[AI] Add support for Image Delivery, font display and slow css selector widgets

https://screenshot.googleplex.com/4cb2ozPTtQypxqj
https://screenshot.googleplex.com/9pXchzAoovtkpV8

Bug: 503296282
Change-Id: I09956b4c28870fc6e12562eac48eb1b71a739400
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7806146
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Alina Varkki <alinavarkki@chromium.org>

Author: AlinaVarkki

front_end/models/ai_assistance/agents/PerformanceAgent.test.ts

@@ -1157,6 +1157,96 @@ code
         assert.strictEqual(widget?.data.insight, Trace.Insights.Types.InsightKeys.DUPLICATE_JAVASCRIPT);
         assert.strictEqual(widget?.data.insightData, insightSet.model.DuplicatedJavaScript);
       });
+
+      it('yields a PERF_INSIGHT widget for ImageDelivery', async function() {
+        insightSet.model.ImageDelivery = {
+          insightKey: 'ImageDelivery',
+          state: 'fail',
+          optimizableImages: [],
+          wastedBytes: 0,
+        } as unknown as Trace.Insights.Types.InsightModels['ImageDelivery'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'ImageDelivery'}},
+              ]
+            }],
+            [{explanation: 'done'}]
+          ])
+        });
+
+        const responses = await Array.fromAsync(agent.run('test', {selected: context}));
+        const actions = responses.filter(r => r.type === AiAgent.ResponseType.ACTION);
+        assert.lengthOf(actions, 1);
+        assert.exists(actions[0].widgets);
+        const widget = actions[0].widgets?.find(w => w.name === 'PERF_INSIGHT');
+        assert.exists(widget);
+        assert.strictEqual(widget?.data.insight, Trace.Insights.Types.InsightKeys.IMAGE_DELIVERY);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.ImageDelivery);
+      });
+
+      it('yields a PERF_INSIGHT widget for FontDisplay', async function() {
+        insightSet.model.FontDisplay = {
+          insightKey: 'FontDisplay',
+          state: 'fail',
+          fonts: [],
+        } as unknown as Trace.Insights.Types.InsightModels['FontDisplay'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'FontDisplay'}},
+              ]
+            }],
+            [{explanation: 'done'}]
+          ])
+        });
+
+        const responses = await Array.fromAsync(agent.run('test', {selected: context}));
+        const actions = responses.filter(r => r.type === AiAgent.ResponseType.ACTION);
+        assert.lengthOf(actions, 1);
+        assert.exists(actions[0].widgets);
+        const widget = actions[0].widgets?.find(w => w.name === 'PERF_INSIGHT');
+        assert.exists(widget);
+        assert.strictEqual(widget?.data.insight, Trace.Insights.Types.InsightKeys.FONT_DISPLAY);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.FontDisplay);
+      });
+
+      it('yields a PERF_INSIGHT widget for SlowCSSSelector', async function() {
+        insightSet.model.SlowCSSSelector = {
+          insightKey: 'SlowCSSSelector',
+          state: 'fail',
+          totalElapsedMs: 0,
+          totalMatchAttempts: 0,
+          totalMatchCount: 0,
+        } as unknown as Trace.Insights.Types.InsightModels['SlowCSSSelector'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'SlowCSSSelector'}},
+              ]
+            }],
+            [{explanation: 'done'}]
+          ])
+        });
+
+        const responses = await Array.fromAsync(agent.run('test', {selected: context}));
+        const actions = responses.filter(r => r.type === AiAgent.ResponseType.ACTION);
+        assert.lengthOf(actions, 1);
+        assert.exists(actions[0].widgets);
+        const widget = actions[0].widgets?.find(w => w.name === 'PERF_INSIGHT');
+        assert.exists(widget);
+        assert.strictEqual(widget?.data.insight, Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.SlowCSSSelector);
+      });
     });
 
     it('yields a BOTTOM_UP_TREE widget when getDetailedCallTree is called', async function() {

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -235,6 +235,9 @@ const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
   Trace.Insights.Types.InsightKeys.DOCUMENT_LATENCY,
   Trace.Insights.Types.InsightKeys.DOM_SIZE,
   Trace.Insights.Types.InsightKeys.DUPLICATE_JAVASCRIPT,
+  Trace.Insights.Types.InsightKeys.IMAGE_DELIVERY,
+  Trace.Insights.Types.InsightKeys.FONT_DISPLAY,
+  Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR,
 ]);
 
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -327,6 +327,30 @@ const UIStringsNotTranslate = {
    * @description Title for the duplicated JavaScript widget.
    */
   duplicateJavaScript: 'Duplicated JavaScript',
+  /**
+   * @description Accessible label for the reveal button in the image delivery widget.
+   */
+  revealImageDelivery: 'Reveal image delivery',
+  /**
+   * @description Title for the image delivery widget.
+   */
+  imageDelivery: 'Image delivery',
+  /**
+   * @description Accessible label for the reveal button in the font display widget.
+   */
+  revealFontDisplay: 'Reveal font display',
+  /**
+   * @description Title for the font display widget.
+   */
+  fontDisplay: 'Font display',
+  /**
+   * @description Accessible label for the reveal button in the slow CSS selectors widget.
+   */
+  revealSlowCssSelector: 'Reveal slow CSS selectors',
+  /**
+   * @description Title for the slow CSS selectors widget.
+   */
+  slowCssSelector: 'Slow CSS selectors',
 } as const;
 
 export interface Step {
@@ -1082,6 +1106,24 @@ const INSIGHT_METADATA: Record<string, {
     title: UIStringsNotTranslate.duplicateJavaScript,
     jslog: 'duplicate-javascript-widget',
   },
+  [Trace.Insights.Types.InsightKeys.IMAGE_DELIVERY]: {
+    component: TimelineInsights.ImageDelivery.ImageDelivery,
+    accessibleLabel: UIStringsNotTranslate.revealImageDelivery,
+    title: UIStringsNotTranslate.imageDelivery,
+    jslog: 'image-delivery-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.FONT_DISPLAY]: {
+    component: TimelineInsights.FontDisplay.FontDisplay,
+    accessibleLabel: UIStringsNotTranslate.revealFontDisplay,
+    title: UIStringsNotTranslate.fontDisplay,
+    jslog: 'font-display-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR]: {
+    component: TimelineInsights.SlowCSSSelector.SlowCSSSelector,
+    accessibleLabel: UIStringsNotTranslate.revealSlowCssSelector,
+    title: UIStringsNotTranslate.slowCssSelector,
+    jslog: 'slow-css-selector-widget',
+  },
 };
 
 function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1709,6 +1709,7 @@ export const knownContextValues = new Set([
   'folder',
   'font',
   'font-display',
+  'font-display-widget',
   'font-editor',
   'font-editor-documentation',
   'font-family',
@@ -1978,6 +1979,7 @@ export const knownContextValues = new Set([
   'ignore-this-retainer',
   'image',
   'image-animation',
+  'image-delivery-widget',
   'image-orientation',
   'image-rendering',
   'image-url',
@@ -3723,6 +3725,7 @@ export const knownContextValues = new Set([
   'slot',
   'slow',
   'slow-4g',
+  'slow-css-selector-widget',
   'sm-script',
   'sm-stylesheet',
   'small',