[AskAi]: Agentize the DOM Size insight.

Example response: https://screenshot.googleplex.com/3k2fR2xs97r8ocV

Fixed: 425274130
Change-Id: I32a6727ee2bb90f3b9524207a8bf5fd38e6a0602
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6919169
Commit-Queue: Finnur Thorarinsson <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Connor Clark <[email protected]>

Author: finnurbreki

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt

@@ -505,6 +505,57 @@ Response headers
 - expires: Thu, 07 Mar 2024 21:17:02 GMT
 === end content
 
+Title: PerformanceInsightFormatter DomSize serializes correctly when there are no results
+Content:
+## Insight Title: Optimize DOM size
+
+## Insight Summary:
+This insight evaluates some key metrics about the Document Object Model (DOM) and identifies excess in the DOM tree, for example:
+- The maximum number of elements within the DOM.
+- The maximum number of children for any given element.
+- Excessive depth of the DOM structure.
+- The largest layout and style recalculation events.
+
+## Detailed analysis:
+No DOM size issues were detected.
+
+## Estimated savings: none
+
+## External resources:
+- https://developer.chrome.com/docs/lighthouse/performance/dom-size/
+=== end content
+
+Title: PerformanceInsightFormatter DomSize serializes the correct details showing DOM issues
+Content:
+## Insight Title: Optimize DOM size
+
+## Insight Summary:
+This insight evaluates some key metrics about the Document Object Model (DOM) and identifies excess in the DOM tree, for example:
+- The maximum number of elements within the DOM.
+- The maximum number of children for any given element.
+- Excessive depth of the DOM structure.
+- The largest layout and style recalculation events.
+
+## Detailed analysis:
+A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).
+
+Statistic:
+
+Total elements: 1006.
+DOM depth: 1001 nodes, starting with element 'SPAN' (node id: 27).
+Most children: 5, for parent 'BODY' (node id: 19).
+
+Large layout updates/style calculations:
+
+  - Layout update: Duration: 58.9 ms, with 2004 of 2012 nodes needing layout.
+  - Style recalculation: Duration: 150.5 ms, with 1001 elements affected.
+
+## Estimated savings: none
+
+## External resources:
+- https://developer.chrome.com/docs/lighthouse/performance/dom-size/
+=== end content
+
 Title: PerformanceInsightFormatter Duplicated javascript serializes the correct details
 Content:
 ## Insight Title: Duplicated JavaScript

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.test.ts

@@ -299,6 +299,28 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
        });
   });
 
+  describe('DomSize', () => {
+    it('serializes correctly when there are no results', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'simple-js-program.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('DOMSize', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('serializes the correct details showing DOM issues', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'dom-size.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('DOMSize', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+  });
+
   describe('Duplicated javascript', () => {
     it('serializes the correct details', async function() {
       const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'dupe-js.json.gz');

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -181,6 +181,62 @@ export class PerformanceInsightFormatter {
     }
   }
 
+  /**
+   * Create an AI prompt string out of the DOM Size model to use with Ask AI.
+   * Note: This function accesses the UIStrings within DomSize to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The DOM Size Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatDomSizeInsight(insight: Trace.Insights.Models.DOMSize.DOMSizeInsightModel): string {
+    if (insight.state === 'pass') {
+      return 'No DOM size issues were detected.';
+    }
+
+    let output = Trace.Insights.Models.DOMSize.UIStrings.description + '\n';
+
+    if (insight.maxDOMStats) {
+      output += '\n' + Trace.Insights.Models.DOMSize.UIStrings.statistic + ':\n\n';
+
+      const maxDepthStats = insight.maxDOMStats.args.data.maxDepth;
+      const maxChildrenStats = insight.maxDOMStats.args.data.maxChildren;
+      output += Trace.Insights.Models.DOMSize.UIStrings.totalElements + ': ' +
+          insight.maxDOMStats.args.data.totalElements + '.\n';
+      if (maxDepthStats) {
+        output += Trace.Insights.Models.DOMSize.UIStrings.maxDOMDepth + ': ' + maxDepthStats.depth +
+            ` nodes, starting with element '${maxDepthStats.nodeName}'` +
+            ' (node id: ' + maxDepthStats.nodeId + ').\n';
+      }
+      if (maxChildrenStats) {
+        output += Trace.Insights.Models.DOMSize.UIStrings.maxChildren + ': ' + maxChildrenStats.numChildren +
+            `, for parent '${maxChildrenStats.nodeName}'` +
+            ' (node id: ' + maxChildrenStats.nodeId + ').\n';
+      }
+    }
+
+    if (insight.largeLayoutUpdates.length > 0 || insight.largeStyleRecalcs.length > 0) {
+      output += `\nLarge layout updates/style calculations:\n`;
+    }
+
+    if (insight.largeLayoutUpdates.length > 0) {
+      for (const update of insight.largeLayoutUpdates) {
+        output += `\n  - Layout update: Duration: ${this.#formatMicro(update.dur)},`;
+        output += ` with ${update.args.beginData.dirtyObjects} of ${
+            update.args.beginData.totalObjects} nodes needing layout.`;
+      }
+    }
+
+    if (insight.largeStyleRecalcs.length > 0) {
+      for (const recalc of insight.largeStyleRecalcs) {
+        output += `\n  - Style recalculation: Duration: ${this.#formatMicro(recalc.dur)}, `;
+        output += `with ${recalc.args.elementCount} elements affected.`;
+      }
+    }
+
+    return output;
+  }
+
   /**
    * Create an AI prompt string out of the NetworkDependencyTree Insight model to use with Ask AI.
    * Note: This function accesses the UIStrings within NetworkDependencyTree to help build the
@@ -682,6 +738,10 @@ Legacy JavaScript by file:
 ${filesFormatted}`;
     }
 
+    if (Trace.Insights.Models.DOMSize.isDomSizeInsight(this.#insight)) {
+      return this.formatDomSizeInsight(this.#insight);
+    }
+
     if (Trace.Insights.Models.FontDisplay.isFontDisplayInsight(this.#insight)) {
       return this.formatFontDisplayInsight(this.#insight);
     }
@@ -724,7 +784,7 @@ ${filesFormatted}`;
       case 'DocumentLatency':
         return '- https://web.dev/articles/optimize-ttfb';
       case 'DOMSize':
-        return '';
+        return '- https://developer.chrome.com/docs/lighthouse/performance/dom-size/';
       case 'DuplicatedJavaScript':
         return '';
       case 'FontDisplay':
@@ -781,7 +841,11 @@ ${filesFormatted}`;
 2. Did the server respond in 600ms or less? We want developers to aim for as close to 100ms as possible, but our threshold for this insight is 600ms.
 3. Was there compression applied to the response to minimize the transfer size?`;
       case 'DOMSize':
-        return '';
+        return `This insight evaluates some key metrics about the Document Object Model (DOM) and identifies excess in the DOM tree, for example:
+- The maximum number of elements within the DOM.
+- The maximum number of children for any given element.
+- Excessive depth of the DOM structure.
+- The largest layout and style recalculation events.`;
       case 'DuplicatedJavaScript':
         return `This insight identifies large, duplicated JavaScript modules that are present in your application and create redundant code.
   This wastes network bandwidth and slows down your page, as the user's browser must download and process the same code multiple times.`;

front_end/models/trace/insights/DOMSize.ts

@@ -104,6 +104,10 @@ function finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSi
   };
 }
 
+export function isDomSizeInsight(model: InsightModel): model is DOMSizeInsightModel {
+  return model.insightKey === InsightKeys.DOM_SIZE;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DOMSizeInsightModel {
   const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);

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

@@ -25,6 +25,10 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-dom-size`;
   override internalName = 'dom-size';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   #renderNodeTable(domStatsData: Trace.Types.Events.DOMStats['args']['data']): Lit.LitTemplate {
     const rows: TableData['rows'] = [];