[RPP] Add related elements to DOM size insight

https://screenshot.googleplex.com/77JSbU8uKGZ9YGC

This also removes the DOM size insight from the experimental list since
it is now feature-complete.

Bug: 372897811
Change-Id: Id66bcd103fcaef4569d111ef787cd6582b873d54
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6182528
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Adam Raine

front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -197,6 +197,7 @@ export class SidebarInsightsTab extends HTMLElement {
             insightSetKey: id,
             activeCategory: this.#selectedCategory,
             activeInsight: this.#activeInsight,
+            parsedTrace: this.#parsedTrace,
           };
 
           const contents = html`

front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts

@@ -30,7 +30,7 @@ function getPassedInsights(component: Components.SidebarSingleInsightSet.Sidebar
 
 describeWithEnvironment('SidebarSingleInsightSet', () => {
   it('renders a list of insights', async function() {
-    const {insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {insights, parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     assert.isOk(insights);
     // only one navigation in this trace.
@@ -46,6 +46,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       insightSetKey: navigationId,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
+      parsedTrace,
     };
     await RenderCoordinator.done();
 
@@ -57,6 +58,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'LCP request discovery',
       'Render blocking requests',
       'Document request latency',
+      'Optimize DOM size',
       'Third parties',
       'INP by phase',
       'Layout shift culprits',
@@ -88,6 +90,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       insightSetKey: firstNavigation,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
+      parsedTrace,
     };
     await RenderCoordinator.done();
     const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
@@ -104,6 +107,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Render blocking requests',
       'Document request latency',
       'Optimize viewport for mobile',
+      'Optimize DOM size',
       'CSS Selector costs',
     ]);
 
@@ -117,6 +121,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Render blocking requests',
       'Document request latency',
       'Optimize viewport for mobile',
+      'Optimize DOM size',
       'CSS Selector costs',
     ]);
   });
@@ -135,6 +140,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       insightSetKey: firstNavigation,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
+      parsedTrace,
     };
     await RenderCoordinator.done();
     const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
@@ -171,7 +177,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
   });
 
   it('will render the active insight fully', async function() {
-    const {insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {insights, parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     assert.isOk(insights);
     // only one navigation in this trace.
@@ -195,6 +201,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
         model,
         insightSetKey: navigationId,
       },
+      parsedTrace,
     };
     await RenderCoordinator.done();
 

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -38,6 +38,7 @@ export interface SidebarSingleInsightSetData {
   insightSetKey: Trace.Types.Events.NavigationId|null;
   activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
 }
 
 /**
@@ -47,7 +48,6 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
-  'DOMSize',
 ]);
 
 type InsightNameToComponentMapping =
@@ -82,6 +82,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
     insightSetKey: null,
     activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
+    parsedTrace: null,
   };
 
   set data(data: SidebarSingleInsightSetData) {
@@ -197,7 +198,8 @@ export class SidebarSingleInsightSet extends HTMLElement {
           .selected=${this.#data.activeInsight?.model === model}
           .model=${model}
           .bounds=${insightSet.bounds}
-          .insightSetKey=${insightSetKey}>
+          .insightSetKey=${insightSetKey}
+          .parsedTrace=${this.#data.parsedTrace}>
         </${componentClass.litTagName}>
       </div>`;
       // clang-format on

front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -4,9 +4,11 @@
 
 import '../../../../ui/components/markdown_view/markdown_view.js';
 
+import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as Protocol from '../../../../generated/protocol.js';
 import type {InsightModel} from '../../../../models/trace/insights/types.js';
-import type * as Trace from '../../../../models/trace/trace.js';
+import * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -59,6 +61,7 @@ export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends H
 
   #selected = false;
   #model: T|null = null;
+  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
 
   get model(): T|null {
     return this.#model;
@@ -120,6 +123,10 @@ export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends H
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+    this.#parsedTrace = parsedTrace;
+  }
+
   #dispatchInsightToggle(): void {
     if (this.#selected) {
       this.dispatchEvent(new SidebarInsight.InsightDeactivated());
@@ -250,6 +257,23 @@ export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends H
     return null;
   }
 
+  protected renderNode(backendNodeId: Protocol.DOM.BackendNodeId, fallbackText?: string): LitHtml.LitTemplate {
+    const fallback = fallbackText ?? LitHtml.nothing;
+    if (!this.#parsedTrace) {
+      return html`${fallback}`;
+    }
+
+    const domNodePromise =
+        Trace.Extras.FetchNodes.domNodeForBackendNodeID(this.#parsedTrace, backendNodeId).then((node): unknown => {
+          if (!node) {
+            return fallback;
+          }
+          return Common.Linkifier.Linkifier.linkify(node);
+        });
+
+    return html`${LitHtml.Directives.until(domNodePromise, fallback)}`;
+  }
+
   #renderWithContent(content: LitHtml.LitTemplate): void {
     if (!this.#model) {
       LitHtml.render(LitHtml.nothing, this.#shadowRoot, {host: this});

front_end/panels/timeline/components/insights/DOMSize.ts

@@ -7,6 +7,7 @@ import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
@@ -22,6 +23,10 @@ const UIStrings = {
    * @description Header for a column containing the value of a statistic.
    */
   value: 'Value',
+  /**
+   * @description Header for a column containing the page element related to a statistc.
+   */
+  element: 'Element',
   /**
    * @description Label for a value representing the total number of elements on the page.
    */
@@ -58,6 +63,36 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
                        }));
   }
 
+  #renderNodeTable(domStatsData: Trace.Types.Events.DOMStats['args']['data']): LitHtml.LitTemplate {
+    const rows: TableData['rows'] = [];
+
+    if (domStatsData.maxDepth) {
+      const {nodeId, nodeName} = domStatsData.maxDepth;
+      rows.push({values: [i18nString(UIStrings.maxDOMDepth), this.renderNode(nodeId, nodeName)]});
+    }
+
+    if (domStatsData.maxChildren) {
+      const {nodeId, nodeName} = domStatsData.maxChildren;
+      rows.push({values: [i18nString(UIStrings.maxChildren), this.renderNode(nodeId, nodeName)]});
+    }
+
+    if (!rows.length) {
+      return LitHtml.nothing;
+    }
+
+    // clang-format off
+    return html`<div class="insight-section">
+      <devtools-performance-table
+        .data=${{
+          insight: this,
+          headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.element)],
+          rows,
+        } as TableData}>
+      </devtools-performance-table>
+    </div>`;
+    // clang-format on
+  }
+
   override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
@@ -81,7 +116,9 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
           ],
         } as TableData}>
       </devtools-performance-table>
-    </div>`;
+    </div>
+    ${this.#renderNodeTable(domStatsData)}
+    `;
     // clang-format on
   }
 }

front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -92,10 +92,11 @@
 
 .insight-section {
   padding-top: var(--sys-size-5);
+  margin-top: var(--sys-size-5);
 }
 
 .insight-description:not(:empty) {
-  padding-bottom: var(--sys-size-5);
+  margin-bottom: var(--sys-size-5);
 }
 
 .insight-section:not(:empty) {

front_end/panels/timeline/components/insights/table.css

@@ -8,6 +8,7 @@ table {
   width: 100%;
   padding: 5px 0;
   border-collapse: collapse;
+  table-layout: fixed;
 }
 
 thead {