[AskAi]: Agentize the Slow Css Selector insight.

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

Also fix obvious typo in one of the UIStrings.

Fixed: 405920696
Change-Id: Ic619d063edbfaf0fd30090695e4ac489bb8c55a7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6916500
Commit-Queue: Finnur Thorarinsson <finnur@chromium.org>
Reviewed-by: Connor Clark <cjamcl@chromium.org>

Author: finnurbreki

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

@@ -843,6 +843,48 @@ no origins were preconnected.
 - https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/
 === end content
 
+Title: PerformanceInsightFormatter SlowCssSelector serializes correctly when there are no results
+Content:
+## Insight Title: CSS Selector costs
+
+## Insight Summary:
+This insight identifies CSS selectors that are slowing down your page's rendering performance.
+
+## Detailed analysis:
+No CSS selector data was found. CSS selector stats need to be enabled in the performance panel settings.
+
+## Estimated savings: none
+
+## External resources:
+- https://developer.chrome.com/docs/devtools/performance/selector-stats
+=== end content
+
+Title: PerformanceInsightFormatter SlowCssSelector serializes the correct details when CSS selectors are found
+Content:
+## Insight Title: CSS Selector costs
+
+## Insight Summary:
+This insight identifies CSS selectors that are slowing down your page's rendering performance.
+
+## Detailed analysis:
+One or more slow CSS selectors were identified as negatively affecting page performance:
+
+Top selector match attempt:
+169 attempts for selector: '.gb_Bd > :only-child'
+
+Total:
+Elapsed time: 0.0 ms
+Match attempts: 2444
+Match count: 465
+
+If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.
+
+## Estimated savings: none
+
+## External resources:
+- https://developer.chrome.com/docs/devtools/performance/selector-stats
+=== end content
+
 Title: PerformanceInsightFormatter ThirdParties serializes correctly when there are no results
 Content:
 ## Insight Title: 3rd parties

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

@@ -412,6 +412,28 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
     });
   });
 
+  describe('SlowCssSelector', () => {
+    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('SlowCSSSelector', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('serializes the correct details when CSS selectors are found', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'selector-stats.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('SlowCSSSelector', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+  });
+
   describe('ThirdParties', () => {
     it('serializes correctly when there are no results', async function() {
       const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'simple-js-program.json.gz');

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -319,6 +319,47 @@ export class PerformanceInsightFormatter {
     return output;
   }
 
+  /**
+   * Create an AI prompt string out of the Slow CSS Selector Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within SlowCSSSelector 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 Network Dependency Tree Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatSlowCssSelectorsInsight(insight: Trace.Insights.Models.SlowCSSSelector.SlowCSSSelectorInsightModel): string {
+    let output = '';
+
+    if (!insight.topSelectorElapsedMs && !insight.topSelectorMatchAttempts) {
+      return Trace.Insights.Models.SlowCSSSelector.UIStrings.enableSelectorData;
+    }
+
+    output += 'One or more slow CSS selectors were identified as negatively affecting page performance:\n\n';
+
+    if (insight.topSelectorElapsedMs) {
+      output += `${
+          Trace.Insights.Models.SlowCSSSelector.UIStrings.topSelectorElapsedTime} (as ranked by elapsed time in ms):\n`;
+      output += `${this.#formatMicro(insight.topSelectorElapsedMs['elapsed (us)'])}: ${
+          insight.topSelectorElapsedMs.selector}\n\n`;
+    }
+
+    if (insight.topSelectorMatchAttempts) {
+      output += Trace.Insights.Models.SlowCSSSelector.UIStrings.topSelectorMatchAttempt + ':\n';
+      output += `${insight.topSelectorMatchAttempts.match_attempts} attempts for selector: '${
+          insight.topSelectorMatchAttempts.selector}'\n\n`;
+    }
+
+    output += `${Trace.Insights.Models.SlowCSSSelector.UIStrings.total}:\n`;
+    output +=
+        `${Trace.Insights.Models.SlowCSSSelector.UIStrings.elapsed}: ${this.#formatMicro(insight.totalElapsedMs)}\n`;
+    output += `${Trace.Insights.Models.SlowCSSSelector.UIStrings.matchAttempts}: ${insight.totalMatchAttempts}\n`;
+    output += `${Trace.Insights.Models.SlowCSSSelector.UIStrings.matchCount}: ${insight.totalMatchCount}\n\n`;
+
+    output += Trace.Insights.Models.SlowCSSSelector.UIStrings.description;
+
+    return output;
+  }
+
   /**
    * Create an AI prompt string out of the ThirdParties Insight model to use with Ask AI.
    * Note: This function accesses the UIStrings within ThirdParties to help build the
@@ -626,6 +667,10 @@ ${filesFormatted}`;
       return this.formatNetworkDependencyTreeInsight(this.#insight);
     }
 
+    if (Trace.Insights.Models.SlowCSSSelector.isSlowCSSSelectorInsight(this.#insight)) {
+      return this.formatSlowCssSelectorsInsight(this.#insight);
+    }
+
     if (Trace.Insights.Models.ThirdParties.isThirdPartyInsight(this.#insight)) {
       return this.formatThirdPartiesInsight(this.#insight);
     }
@@ -679,7 +724,7 @@ ${filesFormatted}`;
         return `- https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp`;
       case 'SlowCSSSelector':
-        return '';
+        return '- https://developer.chrome.com/docs/devtools/performance/selector-stats';
       case 'ThirdParties':
         return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
       case 'Viewport':
@@ -749,7 +794,7 @@ It is important that all of these checks pass to minimize the delay between the
       case 'RenderBlocking':
         return 'This insight identifies network requests that were render blocking. Render blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render blocking network request and prioritize your suggestions to the user based on the impact of each render blocking request.';
       case 'SlowCSSSelector':
-        return '';
+        return `This insight identifies CSS selectors that are slowing down your page's rendering performance.`;
       case 'ThirdParties':
         return 'This insight analyzes the performance impact of resources loaded from third-party servers and aggregates the performance cost, in terms of download transfer sizes and total amount of time that third party scripts spent executing on the main thread.';
       case 'Viewport':

front_end/models/trace/insights/SlowCSSSelector.ts

@@ -56,7 +56,7 @@ export const UIStrings = {
   /**
    * @description top CSS selector when ranked by elapsed time in ms
    */
-  topSelectorElapsedTime: 'Top selector elaspsed time',
+  topSelectorElapsedTime: 'Top selector elapsed time',
   /**
    * @description top CSS selector when ranked by match attempt
    */
@@ -114,6 +114,10 @@ function finalize(partialModel: PartialInsightModel<SlowCSSSelectorInsightModel>
   };
 }
 
+export function isSlowCSSSelectorInsight(model: InsightModel): model is SlowCSSSelectorInsightModel {
+  return model.insightKey === InsightKeys.SLOW_CSS_SELECTOR;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): SlowCSSSelectorInsightModel {
   const selectorStatsData = parsedTrace.SelectorStats;

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

@@ -26,6 +26,10 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
   override internalName = 'slow-css-selector';
   #selectorLocations = new Map<string, Protocol.CSS.SourceRange[]>();
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   private async toSourceFileLocation(cssModel: SDK.CSSModel.CSSModel, selector: Trace.Types.Events.SelectorTiming):
       Promise<Linkifier.Linkifier.LinkifierData[]|undefined> {
     if (!cssModel) {