[RPP] Add Legacy JavaScript insight component

- Shown by default (not in experimental)
- Adds `scriptRef` helper for rendering a script
- Sorts results by estimated savings in the model
- Filter out results less than 5kb in the model

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

Author: Connor Clark

config/gni/devtools_grd_files.gni

@@ -1932,10 +1932,12 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/insights/InteractionToNextPaint.js",
   "front_end/panels/timeline/components/insights/LCPDiscovery.js",
   "front_end/panels/timeline/components/insights/LCPPhases.js",
+  "front_end/panels/timeline/components/insights/LegacyJavaScript.js",
   "front_end/panels/timeline/components/insights/ModernHTTP.js",
   "front_end/panels/timeline/components/insights/NetworkDependencyTree.js",
   "front_end/panels/timeline/components/insights/NodeLink.js",
   "front_end/panels/timeline/components/insights/RenderBlocking.js",
+  "front_end/panels/timeline/components/insights/ScriptRef.js",
   "front_end/panels/timeline/components/insights/SidebarInsight.js",
   "front_end/panels/timeline/components/insights/SlowCSSSelector.js",
   "front_end/panels/timeline/components/insights/Table.js",

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

@@ -7,7 +7,7 @@ import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing
 import type * as Trace from '../trace.js';
 
 describeWithEnvironment('LegacyJavaScript', function() {
-  it('works', async () => {
+  it('has no results when savings are too small', async () => {
     const {data, insights} = await processTrace(this, 'dupe-js.json.gz');
     assert.strictEqual(insights.size, 1);
     const insight =
@@ -18,15 +18,66 @@ describeWithEnvironment('LegacyJavaScript', function() {
           return [script.url, data];
         }));
 
+    assert.deepEqual(results, {});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
+  });
+
+  it('has results when savings are big enough', async function() {
+    if (this.timeout() > 0) {
+      this.timeout(20000);
+    }
+
+    const {data, insights} = await processTrace(this, 'yahoo-news.json.gz');
+    assert.strictEqual(insights.size, 1);
+    const insight =
+        getInsightOrError('LegacyJavaScript', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+
+    const results = Object.fromEntries([...insight.legacyJavaScriptResults.entries()].map(([script, data]) => {
+      return [script.url, data];
+    }));
+
     assert.deepEqual(results, {
-      'https://dupe-modules-lh-2.surge.sh/bundle.js?v1': {
-        estimatedByteSavings: 2952,
+      'https://s.yimg.com/du/ay/wnsrvbjmeprtfrnfx.js': {
         matches: [
-          {name: '@babel/plugin-transform-classes', line: 1, column: 165614},
-          {name: '@babel/plugin-transform-regenerator', line: 1, column: 159765},
-          {name: '@babel/plugin-transform-spread', line: 1, column: 350646},
+          {name: '@babel/plugin-transform-spread', line: 111, column: 7829},
+          {name: 'Array.prototype.find', line: 111, column: 1794},
+          {name: 'Array.prototype.includes', line: 111, column: 2127}, {name: 'Object.values', line: 111, column: 2748},
+          {name: 'String.prototype.includes', line: 111, column: 2473},
+          {name: 'String.prototype.startsWith', line: 111, column: 2627}
         ],
+        estimatedByteSavings: 42001
+      },
+      'https://s.yimg.com/aaq/benji/benji-2.2.99.js':
+          {matches: [{name: 'Promise.allSettled', line: 0, column: 133}], estimatedByteSavings: 37204},
+      'https://s.yimg.com/aaq/c/25fa214.caas-news_web.min.js': {
+        matches: [{name: 'Array.from', line: 0, column: 13310}, {name: 'Object.assign', line: 0, column: 14623}],
+        estimatedByteSavings: 36084
+      },
+      'https://news.yahoo.com/': {
+        matches: [
+          {name: '@babel/plugin-transform-classes', line: 0, column: 8382},
+          {name: 'Array.prototype.filter', line: 0, column: 107712},
+          {name: 'Array.prototype.forEach', line: 0, column: 107393},
+          {name: 'Array.prototype.map', line: 0, column: 108005},
+          {name: 'String.prototype.includes', line: 0, column: 108358}
+        ],
+        estimatedByteSavings: 36070
+      },
+      'https://static.criteo.net/js/ld/publishertag.prebid.144.js': {
+        matches: [
+          {name: 'Array.isArray', line: 1, column: 74871}, {name: 'Array.prototype.filter', line: 1, column: 75344},
+          {name: 'Array.prototype.indexOf', line: 1, column: 75013}
+        ],
+        estimatedByteSavings: 33233
+      },
+      'https://s.yimg.com/oa/consent.js':
+          {matches: [{name: 'Array.prototype.includes', line: 1, column: 132267}], estimatedByteSavings: 29997},
+      'https://cdn.taboola.com/libtrc/yahooweb-network/loader.js': {
+        matches: [{name: 'Object.entries', line: 0, column: 390544}, {name: 'Object.values', line: 0, column: 390688}],
+        estimatedByteSavings: 28643
       },
+      'https://pm-widget.taboola.com/yahooweb-network/pmk-20220605.1.js':
+          {matches: [{name: 'Object.keys', line: 181, column: 26}], estimatedByteSavings: 26653}
     });
 
     assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);

front_end/models/trace/insights/LegacyJavaScript.ts

@@ -26,7 +26,12 @@ export const UIStrings = {
   /**
    * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
    */
-  description: 'Legacy JavaScript',
+  description:
+      'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support legacy browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)',
+  /** Label for a column in a data table; entries will be the individual JavaScript scripts. */
+  columnScript: 'Script',
+  /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */
+  columnWastedBytes: 'Wasted bytes',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);
@@ -49,6 +54,8 @@ export type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {
   legacyJavaScriptResults: LegacyJavaScriptResults,
 }>;
 
+const BYTE_THRESHOLD = 5000;
+
 function finalize(partialModel: PartialInsightModel<LegacyJavaScriptInsightModel>): LegacyJavaScriptInsightModel {
   const requests = [...partialModel.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e);
 
@@ -86,11 +93,15 @@ export function generateInsight(
   const wastedBytesByRequestId = new Map<string, number>();
 
   for (const script of scripts) {
-    if (!script.content) {
+    if (!script.content || script.content.length < BYTE_THRESHOLD) {
       continue;
     }
 
     const result = detectLegacyJavaScript(script.content, script.sourceMap);
+    if (result.estimatedByteSavings < BYTE_THRESHOLD) {
+      continue;
+    }
+
     legacyJavaScriptResults.set(script, result);
 
     if (script.request) {
@@ -101,8 +112,11 @@ export function generateInsight(
     }
   }
 
+  const sorted =
+      new Map([...legacyJavaScriptResults].sort((a, b) => b[1].estimatedByteSavings - a[1].estimatedByteSavings));
+
   return finalize({
-    legacyJavaScriptResults,
+    legacyJavaScriptResults: sorted,
     metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),
   });
 }

front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts

@@ -72,6 +72,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Forced reflow',
       'Use efficient cache lifetimes',
       'Modern HTTP',
+      'Legacy JavaScript',
     ]);
 
     const passedInsightTitles = getPassedInsights(component).flatMap(component => {
@@ -90,6 +91,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Forced reflow',
       'Use efficient cache lifetimes',
       'Modern HTTP',
+      'Legacy JavaScript',
     ]);
   });
 
@@ -130,6 +132,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'CSS Selector costs',
       'Forced reflow',
       'Modern HTTP',
+      'Legacy JavaScript',
     ]);
 
     const passedInsightTitles = getPassedInsights(component).flatMap(component => {
@@ -147,6 +150,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'CSS Selector costs',
       'Forced reflow',
       'Modern HTTP',
+      'Legacy JavaScript',
     ]);
   });
 
@@ -189,6 +193,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'CSS Selector costs',
       'Forced reflow',
       'Modern HTTP',
+      'Legacy JavaScript',
     ]);
 
     const passedInsightTitles = getPassedInsights(component).flatMap(component => {
@@ -205,6 +210,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'CSS Selector costs',
       'Forced reflow',
       'Modern HTTP',
+      'Legacy JavaScript',
     ]);
   });
 

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -101,6 +101,7 @@ type InsightNameToComponentMapping =
  * Order does not matter (but keep alphabetized).
  */
 const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
+  Cache: Insights.Cache.Cache,
   CLSCulprits: Insights.CLSCulprits.CLSCulprits,
   DocumentLatency: Insights.DocumentLatency.DocumentLatency,
   DOMSize: Insights.DOMSize.DOMSize,
@@ -111,13 +112,13 @@ const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
   InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
   LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
   LCPPhases: Insights.LCPPhases.LCPPhases,
+  LegacyJavaScript: Insights.LegacyJavaScript.LegacyJavaScript,
+  ModernHTTP: Insights.ModernHTTP.ModernHTTP,
   NetworkDependencyTree: Insights.NetworkDependencyTree.NetworkDependencyTree,
   RenderBlocking: Insights.RenderBlocking.RenderBlocking,
   SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
   ThirdParties: Insights.ThirdParties.ThirdParties,
   Viewport: Insights.Viewport.Viewport,
-  Cache: Insights.Cache.Cache,
-  ModernHTTP: Insights.ModernHTTP.ModernHTTP,
 };
 
 export class SidebarSingleInsightSet extends HTMLElement {

front_end/panels/timeline/components/insights/BUILD.gn

@@ -33,10 +33,12 @@ devtools_module("insights") {
     "InteractionToNextPaint.ts",
     "LCPDiscovery.ts",
     "LCPPhases.ts",
+    "LegacyJavaScript.ts",
     "ModernHTTP.ts",
     "NetworkDependencyTree.ts",
     "NodeLink.ts",
     "RenderBlocking.ts",
+    "ScriptRef.ts",
     "SidebarInsight.ts",
     "SlowCSSSelector.ts",
     "Table.ts",

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

@@ -14,7 +14,7 @@ import type * as Overlays from '../../overlays/overlays.js';
 import * as Utils from '../../utils/utils.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import {eventRef} from './EventRef.js';
+import {scriptRef} from './ScriptRef.js';
 import type {TableData, TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.DuplicatedJavaScript;
@@ -108,7 +108,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
 
           return {
             values: [
-              script.request ? eventRef(script.request) : script.url ?? 'unknown',
+              scriptRef(script),
               index === 0 ? '--' : i18n.ByteUtilities.bytesToString(resourceSize),
             ],
             overlays,

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

@@ -0,0 +1,106 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import './Table.js';
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type {LegacyJavaScriptInsightModel} from '../../../../models/trace/insights/LegacyJavaScript.js';
+import * as Trace from '../../../../models/trace/trace.js';
+import * as Lit from '../../../../ui/lit/lit.js';
+import type * as Overlays from '../../overlays/overlays.js';
+
+import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {scriptRef} from './ScriptRef.js';
+import type {TableData, TableDataRow} from './Table.js';
+
+const {UIStrings, i18nString} = Trace.Insights.Models.LegacyJavaScript;
+
+const {html} = Lit;
+
+export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsightModel> {
+  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-legacy-javascript`;
+  override internalName = 'legacy-javascript';
+
+  override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  override getEstimatedSavingsBytes(): number|null {
+    if (!this.model) {
+      return null;
+    }
+
+    let estimatedByteSavings = 0;
+    for (const result of this.model.legacyJavaScriptResults.values()) {
+      estimatedByteSavings += result.estimatedByteSavings;
+    }
+
+    return estimatedByteSavings;
+  }
+
+  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (!this.model) {
+      return [];
+    }
+
+    const requests = [...this.model.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e);
+    return requests.map(request => {
+      return {
+        type: 'ENTRY_OUTLINE',
+        entry: request,
+        outlineReason: 'ERROR',
+      };
+    });
+  }
+
+  override renderContent(): Lit.LitTemplate {
+    if (!this.model) {
+      return Lit.nothing;
+    }
+
+    const rows: TableDataRow[] =
+        [...this.model.legacyJavaScriptResults.entries()].slice(0, 10).map(([script, result]) => {
+          const overlays: Overlays.Overlays.TimelineOverlay[] = [];
+          if (script.request) {
+            overlays.push({
+              type: 'ENTRY_OUTLINE',
+              entry: script.request,
+              outlineReason: 'ERROR',
+            });
+          }
+
+          return {
+            values: [scriptRef(script), i18n.ByteUtilities.bytesToString(result.estimatedByteSavings)],
+            overlays,
+            subRows: result.matches.map(match => {
+              return {
+                values: [html`<span title=${`${script.url}:${match.line}:${match.column}`}>${match.name}</span>`],
+              };
+            })
+          };
+        });
+
+    // clang-format off
+    return html`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.columnScript), i18nString(UIStrings.columnWastedBytes)],
+            rows,
+          } as TableData}>
+        </devtools-performance-table>
+      </div>
+    `;
+    // clang-format on
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-legacy-javascript': LegacyJavaScript;
+  }
+}
+
+customElements.define('devtools-performance-legacy-javascript', LegacyJavaScript);

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

@@ -0,0 +1,37 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../../../core/platform/platform.js';
+import type * as Trace from '../../../../models/trace/trace.js';
+import type * as Lit from '../../../../ui/lit/lit.js';
+import * as TimelineUtils from '../../utils/utils.js';
+
+import {eventRef} from './EventRef.js';
+
+export function scriptRef(script: Trace.Handlers.ModelHandlers.Scripts.Script): Lit.TemplateResult|string {
+  // The happy path is that we have a network request associated with this script.
+  if (script.request) {
+    if (script.inline) {
+      return eventRef(script.request, {
+        text: `(inline) ${Platform.StringUtilities.trimEndWithMaxLength(script.content ?? '', 15)}`,
+      });
+    }
+
+    return eventRef(script.request);
+  }
+
+  if (script.url) {
+    try {
+      const parsedUrl = new URL(script.url);
+      return TimelineUtils.Helpers.shortenUrl(parsedUrl);
+    } catch {
+    }
+  }
+
+  if (script.inline) {
+    return `(inline) ${Platform.StringUtilities.trimEndWithMaxLength(script.content ?? '', 15)}`;
+  }
+
+  return `script id: ${script.scriptId}`;
+}