[AI] Add support for Document Latency, Dom Size and Duplicate JS insights widgets

https://screenshot.googleplex.com/37Lsgi8sMuwTdr2
https://screenshot.googleplex.com/8nFto4SB4wJyXYi

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

Author: AlinaVarkki

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

@@ -1069,6 +1069,94 @@ code
         assert.strictEqual(widget?.data.insight, Trace.Insights.Types.InsightKeys.INP_BREAKDOWN);
         assert.strictEqual(widget?.data.insightData, insightSet.model.INPBreakdown);
       });
+
+      it('yields a PERF_INSIGHT widget for DocumentLatency', async function() {
+        insightSet.model.DocumentLatency = {
+          insightKey: 'DocumentLatency',
+          state: 'fail',
+        } as unknown as Trace.Insights.Types.InsightModels['DocumentLatency'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'DocumentLatency'}},
+              ]
+            }],
+            [{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.DOCUMENT_LATENCY);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.DocumentLatency);
+      });
+
+      it('yields a PERF_INSIGHT widget for DOMSize', async function() {
+        insightSet.model.DOMSize = {
+          insightKey: 'DOMSize',
+          state: 'fail',
+          largeLayoutUpdates: [],
+          largeStyleRecalcs: [],
+        } as unknown as Trace.Insights.Types.InsightModels['DOMSize'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'DOMSize'}},
+              ]
+            }],
+            [{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.DOM_SIZE);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.DOMSize);
+      });
+
+      it('yields a PERF_INSIGHT widget for DuplicatedJavaScript', async function() {
+        insightSet.model.DuplicatedJavaScript = {
+          insightKey: 'DuplicatedJavaScript',
+          state: 'fail',
+          duplicationGroupedByNodeModules: new Map(),
+          wastedBytes: 0,
+        } as unknown as Trace.Insights.Types.InsightModels['DuplicatedJavaScript'];
+
+        const agent = createAgentForConversation({
+          aidaClient: mockAidaClient([
+            [{
+              explanation: '',
+              functionCalls: [
+                {name: 'getInsightDetails', args: {insightSetId: insightSet.id, insightName: 'DuplicatedJavaScript'}},
+              ]
+            }],
+            [{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.DUPLICATE_JAVASCRIPT);
+        assert.strictEqual(widget?.data.insightData, insightSet.model.DuplicatedJavaScript);
+      });
     });
 
     it('yields a BOTTOM_UP_TREE widget when getDetailedCallTree is called', async function() {

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -171,7 +171,7 @@ Note: if the user asks a specific question about the trace (such as "What is my
   - \`nav-to-lcp\` (navigation to LCP)
   - \`lcp-ttfb\` (LCP TTFB phase)
   - \`lcp-render-delay\` (LCP render delay phase)
-  - Insight names: \`LCPBreakdown\`, \`CLSCulprits\`, \`RenderBlocking\`, \`NetworkDependencyTree\`, \`ImageDelivery\`, \`FontDisplay\`, \`ThirdParties\`, \`ForcedReflow\`, \`Cache\`, \`DOMSize\`, \`INPBreakdown\`
+  - Insight names: \`LCPBreakdown\`, \`INPBreakdown\`, \`CLSCulprits\`, \`ThirdParties\`, \`DocumentLatency\`, \`DOMSize\`, \`DuplicatedJavaScript\`, \`FontDisplay\`, \`ForcedReflow\`, \`ImageDelivery\`, \`LCPDiscovery\`, \`LegacyJavaScript\`, \`NetworkDependencyTree\`, \`RenderBlocking\`, \`SlowCSSSelector\`, \`Viewport\`, \`ModernHTTP\`, \`Cache\`, \`CharacterSet\`
   - Navigation IDs: \`NAVIGATION_0\`, \`NAVIGATION_1\`, etc.
 - Use \`getEventByKey\` to get data on a specific trace event. This is great for root-cause analysis or validating any assumptions.
 - Provide clear, actionable recommendations. Avoid technical jargon unless necessary, and explain any technical terms used.
@@ -232,6 +232,9 @@ const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
   Trace.Insights.Types.InsightKeys.FORCED_REFLOW,
   Trace.Insights.Types.InsightKeys.CACHE,
   Trace.Insights.Types.InsightKeys.INP_BREAKDOWN,
+  Trace.Insights.Types.InsightKeys.DOCUMENT_LATENCY,
+  Trace.Insights.Types.InsightKeys.DOM_SIZE,
+  Trace.Insights.Types.InsightKeys.DUPLICATE_JAVASCRIPT,
 ]);
 
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -303,6 +303,30 @@ const UIStringsNotTranslate = {
    * @description Title for the INP breakdown widget.
    */
   inpBreakdown: 'INP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the document latency widget.
+   */
+  revealDocumentLatency: 'Reveal document latency',
+  /**
+   * @description Title for the document latency widget.
+   */
+  documentLatency: 'Document latency',
+  /**
+   * @description Accessible label for the reveal button in the DOM size widget.
+   */
+  revealDomSize: 'Reveal DOM size',
+  /**
+   * @description Title for the DOM size widget.
+   */
+  domSize: 'DOM size',
+  /**
+   * @description Accessible label for the reveal button in the duplicated JavaScript widget.
+   */
+  revealDuplicateJavaScript: 'Reveal duplicated JavaScript',
+  /**
+   * @description Title for the duplicated JavaScript widget.
+   */
+  duplicateJavaScript: 'Duplicated JavaScript',
 } as const;
 
 export interface Step {
@@ -1040,6 +1064,24 @@ const INSIGHT_METADATA: Record<string, {
     title: UIStringsNotTranslate.inpBreakdown,
     jslog: 'inp-breakdown-widget',
   },
+  [Trace.Insights.Types.InsightKeys.DOCUMENT_LATENCY]: {
+    component: TimelineInsights.DocumentLatency.DocumentLatency,
+    accessibleLabel: UIStringsNotTranslate.revealDocumentLatency,
+    title: UIStringsNotTranslate.documentLatency,
+    jslog: 'document-latency-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DOM_SIZE]: {
+    component: TimelineInsights.DOMSize.DOMSize,
+    accessibleLabel: UIStringsNotTranslate.revealDomSize,
+    title: UIStringsNotTranslate.domSize,
+    jslog: 'dom-size-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DUPLICATE_JAVASCRIPT]: {
+    component: TimelineInsights.DuplicatedJavaScript.DuplicatedJavaScript,
+    accessibleLabel: UIStringsNotTranslate.revealDuplicateJavaScript,
+    title: UIStringsNotTranslate.duplicateJavaScript,
+    jslog: 'duplicate-javascript-widget',
+  },
 };
 
 function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1370,6 +1370,7 @@ export const knownContextValues = new Set([
   'distance',
   'dock-side',
   'document',
+  'document-latency-widget',
   'document.write',
   'documentation',
   'documents',
@@ -1385,6 +1386,7 @@ export const knownContextValues = new Set([
   'dom-node-inserted-into-document',
   'dom-node-removed',
   'dom-node-removed-from-document',
+  'dom-size-widget',
   'dom-snapshot',
   'dom-subtree-modified',
   'dom-window.close',
@@ -1423,6 +1425,7 @@ export const knownContextValues = new Set([
   'drjones.sources-panel-context.performance',
   'drjones.sources-panel-context.script',
   'drop',
+  'duplicate-javascript-widget',
   'durable-messages',
   'duration',
   'durationchange',