[RPP] Add component for experimental DuplicatedJavaScript insight

The Table component can now render hierarchical data. Rows that have
subRows will render as indented rows.

https://i.imgur.com/3sdWIQn.png

Bug: 394373632
Change-Id: Ie727a11bf83c32e63d1bda8c448c640a69702643
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6319816
Auto-Submit: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Connor Clark

config/gni/devtools_grd_files.gni

@@ -1147,7 +1147,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/insights/Common.js",
   "front_end/models/trace/insights/DOMSize.js",
   "front_end/models/trace/insights/DocumentLatency.js",
-  "front_end/models/trace/insights/DuplicateJavaScript.js",
+  "front_end/models/trace/insights/DuplicatedJavaScript.js",
   "front_end/models/trace/insights/FontDisplay.js",
   "front_end/models/trace/insights/ForcedReflow.js",
   "front_end/models/trace/insights/ImageDelivery.js",
@@ -1920,6 +1920,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/insights/Checklist.js",
   "front_end/panels/timeline/components/insights/DOMSize.js",
   "front_end/panels/timeline/components/insights/DocumentLatency.js",
+  "front_end/panels/timeline/components/insights/DuplicatedJavaScript.js",
   "front_end/panels/timeline/components/insights/EventRef.js",
   "front_end/panels/timeline/components/insights/FontDisplay.js",
   "front_end/panels/timeline/components/insights/ForcedReflow.js",

front_end/models/trace/Processor.test.ts

@@ -393,7 +393,7 @@ describeWithEnvironment('TraceProcessor', function() {
         'FontDisplay',
         'DOMSize',
         'ThirdParties',
-        'DuplicateJavaScript',
+        'DuplicatedJavaScript',
         'SlowCSSSelector',
         'ForcedReflow',
         'UseCache',
@@ -414,7 +414,7 @@ describeWithEnvironment('TraceProcessor', function() {
         'FontDisplay',
         'DOMSize',
         'ThirdParties',
-        'DuplicateJavaScript',
+        'DuplicatedJavaScript',
         'SlowCSSSelector',
         'ForcedReflow',
         'UseCache',

front_end/models/trace/Processor.ts

@@ -368,7 +368,7 @@ export class TraceProcessor extends EventTarget {
       Viewport: null,
       DOMSize: null,
       ThirdParties: null,
-      DuplicateJavaScript: null,
+      DuplicatedJavaScript: null,
       SlowCSSSelector: null,
       ForcedReflow: null,
       UseCache: null,

front_end/models/trace/extras/ScriptDuplication.test.ts

@@ -247,64 +247,66 @@ describeWithEnvironment('ScriptDuplication', function() {
       };
 
       const results = Object.fromEntries(
-          Trace.Extras.ScriptDuplication.computeScriptDuplication(scriptsData).entries().map(([key, value]) => {
-            return [key, value.map(v => ({scriptId: v.script.scriptId as string, resourceSize: v.resourceSize}))];
+          [...Trace.Extras.ScriptDuplication.computeScriptDuplication(scriptsData).entries()].map(([key, data]) => {
+            return [
+              key, data.duplicates.map(v => ({scriptId: v.script.scriptId as string, resourceSize: v.attributedSize}))
+            ];
           }));
       assert.deepEqual(results, {
         'coursehero:///Control/assets/js/vendor/ng/select/select.js': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 48513},
           {scriptId: '1.coursehero-bundle-2', resourceSize: 48513}
         ],
+        'coursehero:///js/src/search/results/store/filter-store.ts': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 12717},
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 12650}
+        ],
         'coursehero:///Control/assets/js/vendor/ng/select/angular-sanitize.js': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 9135},
           {scriptId: '1.coursehero-bundle-2', resourceSize: 9135}
         ],
-        'node_modules/@babel/runtime/helpers/inherits.js': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 528}, {scriptId: '1.coursehero-bundle-2', resourceSize: 528}
+        'coursehero:///js/src/common/component/school-search.tsx': [
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 5840},
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 5316}
         ],
-        'node_modules/@babel/runtime/helpers/typeof.js': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 992}, {scriptId: '1.coursehero-bundle-2', resourceSize: 992}
+        'coursehero:///js/src/search/results/view/filter/autocomplete-filter.tsx': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 3823},
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 3812}
+        ],
+        'coursehero:///js/src/common/component/search/abstract-taxonomy-search.tsx': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 3103},
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 3098}
+        ],
+        'coursehero:///js/src/search/results/view/filter/autocomplete-filter-with-icon.tsx': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 2696},
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 2693}
         ],
         'coursehero:///js/src/utils/service/amplitude-service.ts': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 1348},
           {scriptId: '1.coursehero-bundle-2', resourceSize: 1325}
         ],
-        'coursehero:///js/src/utils/service/gsa-inmeta-tags.ts': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 591}, {scriptId: '1.coursehero-bundle-2', resourceSize: 563}
+        'coursehero:///js/src/search/results/view/filter/autocomplete-list.tsx': [
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 1143},
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 1134}
+        ],
+        'node_modules/@babel/runtime/helpers/typeof.js': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 992}, {scriptId: '1.coursehero-bundle-2', resourceSize: 992}
         ],
         'coursehero:///js/src/search/results/store/filter-actions.ts': [
           {scriptId: '1.coursehero-bundle-2', resourceSize: 956}, {scriptId: '1.coursehero-bundle-1', resourceSize: 946}
         ],
         'coursehero:///js/src/search/results/store/item/resource-types.ts': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 783}, {scriptId: '1.coursehero-bundle-2', resourceSize: 775}
         ],
-        'coursehero:///js/src/search/results/store/filter-store.ts': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 12717},
-          {scriptId: '1.coursehero-bundle-2', resourceSize: 12650}
-        ],
-        'coursehero:///js/src/search/results/view/filter/autocomplete-list.tsx': [
-          {scriptId: '1.coursehero-bundle-2', resourceSize: 1143},
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 1134}
-        ],
-        'coursehero:///js/src/search/results/view/filter/autocomplete-filter.tsx': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 3823},
-          {scriptId: '1.coursehero-bundle-2', resourceSize: 3812}
+        'coursehero:///js/src/utils/service/gsa-inmeta-tags.ts': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 591}, {scriptId: '1.coursehero-bundle-2', resourceSize: 563}
         ],
-        'coursehero:///js/src/search/results/view/filter/autocomplete-filter-with-icon.tsx': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 2696},
-          {scriptId: '1.coursehero-bundle-2', resourceSize: 2693}
+        'node_modules/@babel/runtime/helpers/inherits.js': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 528}, {scriptId: '1.coursehero-bundle-2', resourceSize: 528}
         ],
         'coursehero:///js/src/search/results/service/api/filter-api-service.ts': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 554}, {scriptId: '1.coursehero-bundle-2', resourceSize: 534}
         ],
-        'coursehero:///js/src/common/component/school-search.tsx': [
-          {scriptId: '1.coursehero-bundle-2', resourceSize: 5840},
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 5316}
-        ],
-        'coursehero:///js/src/common/component/search/abstract-taxonomy-search.tsx': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 3103},
-          {scriptId: '1.coursehero-bundle-2', resourceSize: 3098}
-        ],
         'coursehero:///js/src/common/component/search/course-search.tsx': [
           {scriptId: '1.coursehero-bundle-2', resourceSize: 545}, {scriptId: '1.coursehero-bundle-1', resourceSize: 544}
         ]
@@ -313,28 +315,46 @@ describeWithEnvironment('ScriptDuplication', function() {
   });
 
   describe('normalizeDuplication', () => {
+    function makeDuplication(entries: Array<{source: string, resourceSize: number}>):
+        Trace.Extras.ScriptDuplication.ScriptDuplication {
+      const duplication = new Map();
+
+      for (const {source, resourceSize} of entries) {
+        const data = duplication.get(source) ?? {estimatedWastedBytes: 0, duplicates: []};
+        duplication.set(source, data);
+        data.duplicates.push({resourceSize});
+      }
+
+      return duplication;
+    }
+
     it('removes entries with just one value', () => {
-      const duplication = new Map([['1', [{resourceSize: 100}]]]) as Trace.Extras.ScriptDuplication.ScriptDuplication;
+      const duplication = makeDuplication([{source: '1', resourceSize: 100}]);
       Trace.Extras.ScriptDuplication.normalizeDuplication(duplication);
       const results = Object.fromEntries(duplication);
       assert.deepEqual(results, {});
     });
 
     it('sorts entries based on resource size', () => {
-      const duplication = new Map([
-                            ['1', [{resourceSize: 250}, {resourceSize: 200}]],
-                            ['2', [{resourceSize: 200}, {resourceSize: 250}]],
-                          ]) as Trace.Extras.ScriptDuplication.ScriptDuplication;
+      const duplication = makeDuplication([
+        {source: '1', resourceSize: 250},
+        {source: '1', resourceSize: 200},
+        {source: '2', resourceSize: 200},
+        {source: '2', resourceSize: 250},
+      ]);
       Trace.Extras.ScriptDuplication.normalizeDuplication(duplication);
       const results = Object.fromEntries(duplication);
       assert.deepEqual(results, {});
     });
 
     it('removes duplication if size is much smaller than the largest', () => {
-      const duplication = new Map([
-                            ['1', [{resourceSize: 200}, {resourceSize: 1}, {resourceSize: 250}]],
-                            ['2', [{resourceSize: 250}, {resourceSize: 1}]],
-                          ]) as Trace.Extras.ScriptDuplication.ScriptDuplication;
+      const duplication = makeDuplication([
+        {source: '1', resourceSize: 200},
+        {source: '1', resourceSize: 1},
+        {source: '1', resourceSize: 250},
+        {source: '2', resourceSize: 250},
+        {source: '2', resourceSize: 1},
+      ]);
       Trace.Extras.ScriptDuplication.normalizeDuplication(duplication);
       const results = Object.fromEntries(duplication);
       assert.deepEqual(results, {});

front_end/models/trace/extras/ScriptDuplication.ts

@@ -5,8 +5,10 @@
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Handlers from '../handlers/handlers.js';
 
-const RELATIVE_SIZE_THRESHOLD = 0.1;
+// Ignore modules smaller than an absolute threshold.
 const ABSOLUTE_SIZE_THRESHOLD_BYTES = 1024 * 0.5;
+// Ignore modules smaller than a % size of largest copy of the module.
+const RELATIVE_SIZE_THRESHOLD = 0.1;
 
 type GeneratedFileSizes = {
   errorMessage: string,
@@ -113,44 +115,64 @@ function shouldIgnoreSource(source: string): boolean {
 }
 
 /**
- * The key is a source map `sources` entry, but normalized via `normalizeSource`.
+ * The key is a source map `sources` entry (these are URLs/file paths), but normalized
+ * via `normalizeSource`.
  *
- * The value is an array with an entry for every script that has a source map which
+ * The value is an object with an entry for every script that has a source map which
  * denotes that this source was used, along with the estimated resource size it takes
  * up in the script.
  */
-export type ScriptDuplication =
-    Map<string, Array<{script: Handlers.ModelHandlers.Scripts.Script, resourceSize: number}>>;
+export type ScriptDuplication = Map<string, {
+  /**
+   * This is the sum of all (but one) `attributedSize` in `scripts`.
+   *
+   * One copy of this module is treated as the canonical version - the rest will
+   * have non-zero `wastedBytes`. The canonical copy is the first entry of
+   * `scripts`.
+   *
+   * In the case of all copies being the same version, all sizes are
+   * equal and the selection doesn't matter (ignoring compression ratios). When
+   * the copies are different versions, it does matter. Ideally the newest
+   * version would be the canonical copy, but version information is not present.
+   * Instead, size is used as a heuristic for latest version. This makes the
+   * value here conserative in its estimation.
+   */
+  estimatedDuplicateBytes: number,
+  duplicates: Array<{
+    script: Handlers.ModelHandlers.Scripts.Script,
+    /** The number of bytes in the script bundle that map back to this module. */
+    attributedSize: number,
+  }>,
+}>;
 
 /**
- * Sorts each array within @see ScriptDuplication by resource size, and drops information
- * on sources that are too small.
+ * Sorts each array within @see ScriptDuplication by attributedSize, drops information
+ * on sources that are too small, and calculates esimatedDuplicateBytes.
  */
 export function normalizeDuplication(duplication: ScriptDuplication): void {
-  for (const [key, originalSourceData] of duplication.entries()) {
-    let sourceData = originalSourceData;
-
+  for (const [key, data] of duplication) {
     // Sort by resource size.
-    sourceData.sort((a, b) => b.resourceSize - a.resourceSize);
+    data.duplicates.sort((a, b) => b.attributedSize - a.attributedSize);
 
-    // Remove modules smaller than a % size of largest.
-    if (sourceData.length > 1) {
-      const largestResourceSize = sourceData[0].resourceSize;
-      sourceData = sourceData.filter(data => {
-        const percentSize = data.resourceSize / largestResourceSize;
+    // Ignore modules smaller than a % size of largest.
+    if (data.duplicates.length > 1) {
+      const largestResourceSize = data.duplicates[0].attributedSize;
+      data.duplicates = data.duplicates.filter(duplicate => {
+        const percentSize = duplicate.attributedSize / largestResourceSize;
         return percentSize >= RELATIVE_SIZE_THRESHOLD;
       });
     }
 
-    // Remove modules smaller than an absolute threshold.
-    sourceData = sourceData.filter(data => data.resourceSize >= ABSOLUTE_SIZE_THRESHOLD_BYTES);
+    // Ignore modules smaller than an absolute threshold.
+    data.duplicates = data.duplicates.filter(duplicate => duplicate.attributedSize >= ABSOLUTE_SIZE_THRESHOLD_BYTES);
 
-    // Delete any that now don't have multiple source data entries.
-    if (sourceData.length > 1) {
-      duplication.set(key, sourceData);
-    } else {
+    // Delete any that now don't have multiple entries.
+    if (data.duplicates.length <= 1) {
       duplication.delete(key);
+      continue;
     }
+
+    data.estimatedDuplicateBytes = data.duplicates.slice(1).reduce((acc, cur) => acc + cur.attributedSize, 0);
   }
 }
 
@@ -211,21 +233,23 @@ export function computeScriptDuplication(scriptsData: Handlers.ModelHandlers.Scr
     }
   }
 
-  const moduleNameToSourceData: ScriptDuplication = new Map();
+  const duplication: ScriptDuplication = new Map();
   for (const [script, sourceDataArray] of sourceDatasMap) {
     for (const sourceData of sourceDataArray) {
-      let data = moduleNameToSourceData.get(sourceData.source);
+      let data = duplication.get(sourceData.source);
       if (!data) {
-        data = [];
-        moduleNameToSourceData.set(sourceData.source, data);
+        data = {estimatedDuplicateBytes: 0, duplicates: []};
+        duplication.set(sourceData.source, data);
       }
-      data.push({
+      data.duplicates.push({
         script,
-        resourceSize: sourceData.resourceSize,
+        attributedSize: sourceData.resourceSize,
       });
     }
   }
 
-  normalizeDuplication(moduleNameToSourceData);
-  return moduleNameToSourceData;
+  normalizeDuplication(duplication);
+
+  // Sort by estimated savings.
+  return new Map([...duplication].sort((a, b) => b[1].estimatedDuplicateBytes - a[1].estimatedDuplicateBytes));
 }

front_end/models/trace/insights/BUILD.gn

@@ -12,7 +12,7 @@ devtools_module("insights") {
     "Common.ts",
     "DOMSize.ts",
     "DocumentLatency.ts",
-    "DuplicateJavaScript.ts",
+    "DuplicatedJavaScript.ts",
     "FontDisplay.ts",
     "ForcedReflow.ts",
     "ImageDelivery.ts",

…ls/trace/insights/DuplicateJavaScript.ts …s/trace/insights/DuplicatedJavaScript.tsfront_end/models/trace/insights/DuplicateJavaScript.ts renamed to front_end/models/trace/insights/DuplicatedJavaScript.ts front_end/models/trace/insights/DuplicateJavaScript.ts renamed to front_end/models/trace/insights/DuplicatedJavaScript.ts

@@ -19,24 +19,29 @@ export const UIStrings = {
   /**
    * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
    */
-  title: 'Duplicate JavaScript',
+  title: 'Duplicated JavaScript',
   /**
    * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
    */
   description:
       'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',
+  /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
+  columnSource: 'Source',
+  /** Label for a column in a data table; entries will be the file size of a web resource in kilobytes. */
+  columnResourceSize: 'Resource size',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicateJavaScript.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type DuplicateJavaScriptInsightModel = InsightModel<typeof UIStrings, {
   duplication: Extras.ScriptDuplication.ScriptDuplication,
+  scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[],
 }>;
 
 function finalize(partialModel: PartialInsightModel<DuplicateJavaScriptInsightModel>): DuplicateJavaScriptInsightModel {
-  const requests = [...partialModel.duplication.values().flatMap(array => array.map(v => v.script.request))].filter(
-      e => !!e);  // eslint-disable-line no-implicit-coercion
+  const requests = partialModel.scriptsWithDuplication.map(script => script.request)
+                       .filter(e => !!e);  // eslint-disable-line no-implicit-coercion
 
   return {
     insightKey: InsightKeys.DUPLICATE_JAVASCRIPT,
@@ -65,5 +70,9 @@ export function generateInsight(
   });
 
   const duplication = Extras.ScriptDuplication.computeScriptDuplication({scripts});
-  return finalize({duplication});
+  const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];
+  return finalize({
+    duplication,
+    scriptsWithDuplication: [...new Set(scriptsWithDuplication)],
+  });
 }

front_end/models/trace/insights/Models.ts

@@ -5,7 +5,7 @@
 export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as DOMSize from './DOMSize.js';
-export * as DuplicateJavaScript from './DuplicateJavaScript.js';
+export * as DuplicatedJavaScript from './DuplicatedJavaScript.js';
 export * as FontDisplay from './FontDisplay.js';
 export * as ForcedReflow from './ForcedReflow.js';
 export * as ImageDelivery from './ImageDelivery.js';

front_end/models/trace/insights/types.ts

@@ -126,7 +126,7 @@ export const enum InsightKeys {
   THIRD_PARTIES = 'ThirdParties',
   DOCUMENT_LATENCY = 'DocumentLatency',
   DOM_SIZE = 'DOMSize',
-  DUPLICATE_JAVASCRIPT = 'DuplicateJavaScript',
+  DUPLICATE_JAVASCRIPT = 'DuplicatedJavaScript',
   FONT_DISPLAY = 'FontDisplay',
   FORCED_REFLOW = 'ForcedReflow',
   IMAGE_DELIVERY = 'ImageDelivery',