Agentize 'Duplicate JS' Insight

Example response: https://screenshot.googleplex.com/DH2UPEGnnsPzoni

Bug: 425274647
Change-Id: Ie1b14e7da4fefc8fb6ec6138c8dd21450e7ec323
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6770519
Reviewed-by: Connor Clark <[email protected]>
Auto-Submit: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: AlinaVarkki

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -314,7 +314,10 @@ export class PerformanceTraceContext extends ConversationContext<TimelineUtils.A
       case 'DOMSize':
         return [{title: 'How can I reduce the size of my DOM?'}];
       case 'DuplicatedJavaScript':
-        return [{title: 'How do I deduplicate the identified scripts in my bundle?'}];
+        return [
+          {title: 'How do I deduplicate the identified scripts in my bundle?'},
+          {title: 'Which duplicated JavaScript modules are the most problematic?'}
+        ];
       case 'FontDisplay':
         return [
           {title: 'How can I update my CSS to avoid layout shifts caused by incorrect `font-display` properties?'}

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

@@ -592,4 +592,92 @@ Response headers
           'headers');
     });
   });
+
+  describe('Duplicated javascript', () => {
+    it('serializes the correct details', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'dupe-js.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('DuplicatedJavaScript', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+
+      const expected = `## Insight Title: Duplicated JavaScript
+
+## Insight Summary:
+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.
+
+## Detailed analysis:
+Total wasted bytes: 615821 bytes.
+
+Duplication grouped by Node modules: - Source: node_modules/filestack-js - Duplicated bytes: 345779 bytes
+- Source: node_modules/@headlessui/react - Duplicated bytes: 46023 bytes
+- Source: node_modules/react-query - Duplicated bytes: 32976 bytes
+- Source: node_modules/@floating-ui/react-dom-interactions - Duplicated bytes: 26253 bytes
+- Source: node_modules/yup - Duplicated bytes: 22581 bytes
+- Source: node_modules/lodash - Duplicated bytes: 21453 bytes
+- Source: node_modules/@formatjs/icu-messageformat-parser - Duplicated bytes: 20835 bytes
+- Source: node_modules/react-hook-form - Duplicated bytes: 17328 bytes
+- Source: node_modules/@popperjs/core - Duplicated bytes: 15900 bytes
+- Source: node_modules/downshift - Duplicated bytes: 14925 bytes
+- Source: node_modules/axios - Duplicated bytes: 14079 bytes
+- Source: node_modules/react-dropzone - Duplicated bytes: 12180 bytes
+- Source: node_modules/@formatjs/intl - Duplicated bytes: 10839 bytes
+- Source: node_modules/qs - Duplicated bytes: 9210 bytes
+- Source: node_modules/object-inspect - Duplicated bytes: 7254 bytes
+- Source: node_modules/history - Duplicated bytes: 6870 bytes
+- Source: node_modules/@heroicons/react - Duplicated bytes: 6624 bytes
+- Source: node_modules/react-intl - Duplicated bytes: 6534 bytes
+- Source: node_modules/get-intrinsic - Duplicated bytes: 6411 bytes
+- Source: node_modules/@floating-ui/dom - Duplicated bytes: 6147 bytes
+- Source: node_modules/@formatjs/icu-skeleton-parser - Duplicated bytes: 5736 bytes
+- Source: webpack://ssi/src/components/Autocomplete/Autocomplete.tsx - Duplicated bytes: 5721 bytes
+- Source: node_modules/@floating-ui/core - Duplicated bytes: 5661 bytes
+- Source: node_modules/intl-messageformat - Duplicated bytes: 5583 bytes
+- Source: node_modules/@loadable/component - Duplicated bytes: 4482 bytes
+- Source: node_modules/file-selector - Duplicated bytes: 4374 bytes
+- Source: node_modules/universal-cookie - Duplicated bytes: 4191 bytes
+- Source: node_modules/tabbable - Duplicated bytes: 4146 bytes
+- Source: webpack://ssi/src/components/Button/Button.tsx - Duplicated bytes: 3711 bytes
+- Source: node_modules/path-to-regexp - Duplicated bytes: 2865 bytes
+- Source: webpack://ssi/src/components/Link/Link.tsx - Duplicated bytes: 2766 bytes
+- Source: node_modules/isomorphic-style-loader - Duplicated bytes: 2520 bytes
+- Source: webpack://ssi/src/components/Menu/MenuBase.tsx - Duplicated bytes: 2415 bytes
+- Source: node_modules/tslib - Duplicated bytes: 2376 bytes
+- Source: node_modules/compute-scroll-into-view - Duplicated bytes: 2166 bytes
+- Source: node_modules/react-router-dom - Duplicated bytes: 2154 bytes
+- Source: node_modules/react-fast-compare - Duplicated bytes: 1935 bytes
+- Source: node_modules/react-is - Duplicated bytes: 1845 bytes
+- Source: node_modules/react-router - Duplicated bytes: 1788 bytes
+- Source: node_modules/css-loader - Duplicated bytes: 1608 bytes
+- Source: node_modules/mini-create-react-context - Duplicated bytes: 1563 bytes
+
+## External resources:
+`;
+      assertStringEquals(output, expected);
+    });
+
+    it('serializes no details if there is no duplicate javascript', async function() {
+      const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+      assert.isOk(insights);
+      const firstNav = getFirstOrError(parsedTrace.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('DuplicatedJavaScript', insights, firstNav);
+      const formatter = new PerformanceInsightFormatter(parsedTrace, insight);
+      const output = formatter.formatInsight();
+
+      const expected = `## Insight Title: Duplicated JavaScript
+
+## Insight Summary:
+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.
+
+## Detailed analysis:
+There is no duplicated JavaScript in the page modules
+
+## External resources:
+`;
+      assertStringEquals(output, expected);
+    });
+  });
 });

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -279,6 +279,26 @@ ${shiftsFormatted.join('\n')}`;
 ${requestSummary}`;
     }
 
+    if (Trace.Insights.Models.DuplicatedJavaScript.isDuplicatedJavaScript(this.#insight)) {
+      const totalWastedBytes = this.#insight.wastedBytes;
+      const duplicatedScriptsByModule = this.#insight.duplicationGroupedByNodeModules;
+
+      if (duplicatedScriptsByModule.size === 0) {
+        return 'There is no duplicated JavaScript in the page modules';
+      }
+
+      const filesFormatted =
+          Array.from(duplicatedScriptsByModule)
+              .map(
+                  ([module, duplication]) =>
+                      `- Source: ${module} - Duplicated bytes: ${duplication.estimatedDuplicateBytes} bytes`)
+              .join('\n');
+
+      return `Total wasted bytes: ${totalWastedBytes} bytes.
+
+Duplication grouped by Node modules: ${filesFormatted}`;
+    }
+
     return '';
   }
 
@@ -345,7 +365,8 @@ ${requestSummary}`;
       case 'DOMSize':
         return '';
       case 'DuplicatedJavaScript':
-        return '';
+        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.`;
       case 'FontDisplay':
         return '';
       case 'ForcedReflow':

front_end/models/trace/insights/DuplicatedJavaScript.ts

@@ -60,6 +60,10 @@ function finalize(partialModel: PartialInsightModel<DuplicatedJavaScriptInsightM
   };
 }
 
+export function isDuplicatedJavaScript(model: InsightModel): model is DuplicatedJavaScriptInsightModel {
+  return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicatedJavaScriptInsightModel {
   const scripts = parsedTrace.Scripts.scripts.filter(script => {

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

@@ -33,6 +33,10 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
     return this.model.scripts.some(script => !!script.url);
   }
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   #openTreemap(): void {
     if (!this.model) {
       return;

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3710,6 +3710,7 @@ export const knownContextValues = new Set([
   'timeline.insight-ask-ai.dismiss-field-mismatch',
   'timeline.insight-ask-ai.document-latency',
   'timeline.insight-ask-ai.dom-size',
+  'timeline.insight-ask-ai.duplicated-javascript ',
   'timeline.insight-ask-ai.field-mismatch',
   'timeline.insight-ask-ai.font-display',
   'timeline.insight-ask-ai.forced-reflow',