[AI] Add support for legacy js, viewport, modern http and character set widgets

https://screenshot.googleplex.com/jkce8tWGWRCsReb
https://screenshot.googleplex.com/BicWVy6LuCCAAmx

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

Author: AlinaVarkki

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

@@ -1247,6 +1247,122 @@ code
         assert.strictEqual(widget?.data.insight, Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR);
         assert.strictEqual(widget?.data.insightData, insightSet.model.SlowCSSSelector);
       });
+
+      it('yields a PERF_INSIGHT widget for LegacyJavaScript', async function() {
+        insightSet.model.LegacyJavaScript = {
+          insightKey: 'LegacyJavaScript',
+          state: 'fail',
+          legacyJavaScriptResults: new Map(),
+        } as unknown as Trace.Insights.Types.InsightModels['LegacyJavaScript'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'LegacyJavaScript'}},
+              ]
+            }],
+            [{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.LEGACY_JAVASCRIPT);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.LegacyJavaScript);
+      });
+
+      it('yields a PERF_INSIGHT widget for Viewport', async function() {
+        insightSet.model.Viewport = {
+          insightKey: 'Viewport',
+          state: 'fail',
+          mobileOptimized: false,
+        } as unknown as Trace.Insights.Types.InsightModels['Viewport'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'Viewport'}},
+              ]
+            }],
+            [{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.VIEWPORT);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.Viewport);
+      });
+
+      it('yields a PERF_INSIGHT widget for ModernHTTP', async function() {
+        insightSet.model.ModernHTTP = {
+          insightKey: 'ModernHTTP',
+          state: 'fail',
+          http1Requests: [],
+        } as unknown as Trace.Insights.Types.InsightModels['ModernHTTP'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'ModernHTTP'}},
+              ]
+            }],
+            [{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.MODERN_HTTP);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.ModernHTTP);
+      });
+
+      it('yields a PERF_INSIGHT widget for CharacterSet', async function() {
+        insightSet.model.CharacterSet = {
+          insightKey: 'CharacterSet',
+          state: 'fail',
+          data: {hasHttpCharset: false, metaCharsetDisposition: 'missing'},
+        } as unknown as Trace.Insights.Types.InsightModels['CharacterSet'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'CharacterSet'}},
+              ]
+            }],
+            [{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.CHARACTER_SET);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.CharacterSet);
+      });
     });
 
     it('yields a BOTTOM_UP_TREE widget when getDetailedCallTree is called', async function() {

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -238,6 +238,10 @@ const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
   Trace.Insights.Types.InsightKeys.IMAGE_DELIVERY,
   Trace.Insights.Types.InsightKeys.FONT_DISPLAY,
   Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR,
+  Trace.Insights.Types.InsightKeys.LEGACY_JAVASCRIPT,
+  Trace.Insights.Types.InsightKeys.VIEWPORT,
+  Trace.Insights.Types.InsightKeys.MODERN_HTTP,
+  Trace.Insights.Types.InsightKeys.CHARACTER_SET,
 ]);
 
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -351,6 +351,38 @@ const UIStringsNotTranslate = {
    * @description Title for the slow CSS selectors widget.
    */
   slowCssSelector: 'Slow CSS selectors',
+  /**
+   * @description Accessible label for the reveal button in the legacy JavaScript widget.
+   */
+  revealLegacyJavaScript: 'Reveal legacy JavaScript',
+  /**
+   * @description Title for the legacy JavaScript widget.
+   */
+  legacyJavaScript: 'Legacy JavaScript',
+  /**
+   * @description Accessible label for the reveal button in the viewport optimization widget.
+   */
+  revealViewport: 'Reveal viewport optimization',
+  /**
+   * @description Title for the viewport optimization widget.
+   */
+  viewport: 'Viewport optimization',
+  /**
+   * @description Accessible label for the reveal button in the modern HTTP usage widget.
+   */
+  revealModernHttp: 'Reveal modern HTTP usage',
+  /**
+   * @description Title for the modern HTTP usage widget.
+   */
+  modernHttp: 'Modern HTTP usage',
+  /**
+   * @description Accessible label for the reveal button in the character set declaration widget.
+   */
+  revealCharacterSet: 'Reveal character set declaration',
+  /**
+   * @description Title for the character set declaration widget.
+   */
+  characterSet: 'Character set declaration',
 } as const;
 
 export interface Step {
@@ -1124,6 +1156,30 @@ const INSIGHT_METADATA: Record<string, {
     title: UIStringsNotTranslate.slowCssSelector,
     jslog: 'slow-css-selector-widget',
   },
+  [Trace.Insights.Types.InsightKeys.LEGACY_JAVASCRIPT]: {
+    component: TimelineInsights.LegacyJavaScript.LegacyJavaScript,
+    accessibleLabel: UIStringsNotTranslate.revealLegacyJavaScript,
+    title: UIStringsNotTranslate.legacyJavaScript,
+    jslog: 'legacy-javascript-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.VIEWPORT]: {
+    component: TimelineInsights.Viewport.Viewport,
+    accessibleLabel: UIStringsNotTranslate.revealViewport,
+    title: UIStringsNotTranslate.viewport,
+    jslog: 'viewport-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.MODERN_HTTP]: {
+    component: TimelineInsights.ModernHTTP.ModernHTTP,
+    accessibleLabel: UIStringsNotTranslate.revealModernHttp,
+    title: UIStringsNotTranslate.modernHttp,
+    jslog: 'modern-http-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CHARACTER_SET]: {
+    component: TimelineInsights.CharacterSet.CharacterSet,
+    accessibleLabel: UIStringsNotTranslate.revealCharacterSet,
+    title: UIStringsNotTranslate.characterSet,
+    jslog: 'character-set-widget',
+  },
 };
 
 function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(

front_end/ui/visual_logging/KnownContextValues.ts

@@ -745,6 +745,7 @@ export const knownContextValues = new Set([
   'changes',
   'changes.changes',
   'changes.reveal-source',
+  'character-set-widget',
   'checkbox-item',
   'checked',
   'chevron-left',
@@ -2299,6 +2300,7 @@ export const knownContextValues = new Set([
   'learn-more.origin-trials',
   'leavepictureinpicture',
   'left',
+  'legacy-javascript-widget',
   'legend',
   'length',
   'length-popover',
@@ -2709,6 +2711,7 @@ export const knownContextValues = new Set([
   'mobile-throttling',
   'model',
   'modern',
+  'modern-http-widget',
   'monitoring-xhr-enabled',
   'monspace',
   'more',
@@ -4357,6 +4360,7 @@ export const knownContextValues = new Set([
   'view-transition-group',
   'view-transition-name',
   'view-transition-scope',
+  'viewport-widget',
   'views-location-override',
   'virtual-authenticators',
   'visibility',