Add inline source maps test for DuplicatedJavaScript insight

Bug: none
Change-Id: Ibb268f40a753baa120b689caa3cbabe3b5c3d4b5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6518813
Reviewed-by: Paul Irish <paulirish@chromium.org>
Auto-Submit: Connor Clark <cjamcl@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>

Author: Connor Clark

front_end/models/trace/insights/DuplicatedJavaScript.test.ts

@@ -7,7 +7,7 @@ import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing
 import type * as Trace from '../trace.js';
 
 describeWithEnvironment('DuplicatedJavaScript', function() {
-  it('works', async () => {
+  it('works (external source maps)', async () => {
     const {data, insights} = await processTrace(this, 'dupe-js.json.gz');
     assert.strictEqual(insights.size, 1);
     const insight = getInsightOrError(
@@ -46,4 +46,44 @@ describeWithEnvironment('DuplicatedJavaScript', function() {
 
     assert.deepEqual(insight.metricSavings, {FCP: 100, LCP: 100} as Trace.Insights.Types.MetricSavings);
   });
+
+  it('works (inline source maps)', async () => {
+    const {data, insights} = await processTrace(this, 'dupe-js-inline-maps.json.gz');
+    assert.strictEqual(insights.size, 1);
+    const insight = getInsightOrError(
+        'DuplicatedJavaScript', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+
+    const duplication = insight.duplicationGroupedByNodeModules;
+    const results = Object.fromEntries(
+        [...duplication.entries()].filter(v => v[1].estimatedDuplicateBytes > 1000 * 25).map(([key, data]) => {
+          return [key, data.duplicates.map(v => ({url: v.script.url, transferSize: v.attributedSize}))];
+        }));
+    const url1 = 'https://dupe-modules-lh-inline-data.surge.sh/bundle-smaller.js?v1';
+    const url2 = 'https://dupe-modules-lh-inline-data.surge.sh/bundle-smaller.js?v2';
+    const url3 = 'https://dupe-modules-lh-inline-data.surge.sh/bundle-smaller.js?v3';
+    const url4 = 'https://dupe-modules-lh-inline-data.surge.sh/bundle-smaller.js?v4';
+
+    assert.deepEqual(results, {
+      'node_modules/filestack-js': [
+        {url: url1, transferSize: 104143},
+        {url: url2, transferSize: 104143},
+        {url: url3, transferSize: 104143},
+        {url: url4, transferSize: 104143},
+      ],
+      'node_modules/@headlessui/react': [
+        {url: url1, transferSize: 13863},
+        {url: url2, transferSize: 13863},
+        {url: url3, transferSize: 13863},
+        {url: url4, transferSize: 13863},
+      ],
+      'node_modules/react-query': [
+        {url: url1, transferSize: 9933},
+        {url: url2, transferSize: 9933},
+        {url: url3, transferSize: 9933},
+        {url: url4, transferSize: 9933},
+      ],
+    });
+
+    assert.deepEqual(insight.metricSavings, {FCP: 50, LCP: 50} as Trace.Insights.Types.MetricSavings);
+  });
 });

front_end/panels/timeline/fixtures/traces/BUILD.gn

@@ -26,6 +26,7 @@ copy_to_gen("traces") {
     "dom-size-long.json.gz",
     "dom-size-overlap.json.gz",
     "dom-size.json.gz",
+    "dupe-js-inline-maps.json.gz",
     "dupe-js.json.gz",
     "enhanced-traces.json.gz",
     "example-dot-com.json.gz",

front_end/panels/timeline/fixtures/traces/README.md

@@ -71,6 +71,10 @@ Trace containing a cross-origin navigation where DOM size events from the pre-na
 
 A bunch of bundles with the exact same content: https://dupe-modules-lh-2.surge.sh/
 
+### dupe-js-inline-maps.json.gz
+
+Like above, but the source maps are inline data urls. https://dupe-modules-lh-inline-data.surge.sh/smaller.html
+
 ### enhanced-traces.json.gz
 
 a) Contains traces with metadata needed to power a rehydrated session for enhanced tracing.

front_end/panels/timeline/fixtures/traces/dupe-js-inline-maps.json.gz

@@ -251,6 +251,11 @@ export class TraceLoader {
                 return new SDK.SourceMap.SourceMap(scriptUrl, sourceMapUrl, cachedRawSourceMap);
               }
 
+              if (sourceMapUrl.startsWith('data:')) {
+                const rawSourceMap = await (await fetch(sourceMapUrl)).json();
+                return new SDK.SourceMap.SourceMap(scriptUrl, sourceMapUrl, rawSourceMap);
+              }
+
               return null;
             },
           })