@paulirish/trace_engine 0.0.49 → 0.0.51

package/models/trace/insights/DuplicatedJavaScript.d.ts

@@ -12,12 +12,15 @@ export declare const UIStrings: {
     readonly 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. */
     readonly columnSource: "Source";
-    /** Label for a column in a data table; entries will be the file size of a web resource in kilobytes. */
-    readonly columnResourceSize: "Resource size";
+    /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
+    readonly columnDuplicatedBytes: "Duplicated bytes";
 };
 export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
-export type DuplicateJavaScriptInsightModel = InsightModel<typeof UIStrings, {
+export type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {
     duplication: Extras.ScriptDuplication.ScriptDuplication;
+    duplicationGroupedByNodeModules: Extras.ScriptDuplication.ScriptDuplication;
     scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[];
+    scripts: Handlers.ModelHandlers.Scripts.Script[];
+    mainDocumentUrl: string;
 }>;
-export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicateJavaScriptInsightModel;
+export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicatedJavaScriptInsightModel;

package/models/trace/insights/DuplicatedJavaScript.js

@@ -4,6 +4,7 @@
 // import * as i18n from '../../../core/i18n/i18n.js';
 import * as Extras from '../extras/extras.js';
 import * as Helpers from '../helpers/helpers.js';
+import { estimateCompressionRatioForScript, metricSavingsForWastedBytes } from './Common.js';
 import { InsightCategory, } from './types.js';
 export const UIStrings = {
     /**
@@ -16,14 +17,13 @@ export const UIStrings = {
     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',
+    /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
+    columnDuplicatedBytes: 'Duplicated bytes',
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);
 export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
 function finalize(partialModel) {
-    const requests = partialModel.scriptsWithDuplication.map(script => script.request)
-        .filter(e => !!e); // eslint-disable-line no-implicit-coercion
+    const requests = partialModel.scriptsWithDuplication.map(script => script.request).filter(e => !!e);
     return {
         insightKey: "DuplicatedJavaScript" /* InsightKeys.DUPLICATE_JAVASCRIPT */,
         strings: UIStrings,
@@ -43,13 +43,33 @@ export function generateInsight(parsedTrace, context) {
         if (script.frame !== context.frameId) {
             return false;
         }
+        if (script.url?.startsWith('chrome-extension://')) {
+            return false;
+        }
         return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);
     });
-    const duplication = Extras.ScriptDuplication.computeScriptDuplication({ scripts });
+    const { duplication, duplicationGroupedByNodeModules } = Extras.ScriptDuplication.computeScriptDuplication({ scripts });
     const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];
+    const wastedBytesByRequestId = new Map();
+    for (const { duplicates } of duplication.values()) {
+        for (let i = 1; i < duplicates.length; i++) {
+            const sourceData = duplicates[i];
+            if (!sourceData.script.request) {
+                continue;
+            }
+            const compressionRatio = estimateCompressionRatioForScript(sourceData.script);
+            const transferSize = Math.round(sourceData.attributedSize * compressionRatio);
+            const requestId = sourceData.script.request.args.data.requestId;
+            wastedBytesByRequestId.set(requestId, (wastedBytesByRequestId.get(requestId) || 0) + transferSize);
+        }
+    }
     return finalize({
         duplication,
+        duplicationGroupedByNodeModules,
         scriptsWithDuplication: [...new Set(scriptsWithDuplication)],
+        scripts,
+        mainDocumentUrl: context.navigation?.args.data?.url ?? parsedTrace.Meta.mainFrameURL,
+        metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),
     });
 }
 //# sourceMappingURL=DuplicatedJavaScript.js.map

package/models/trace/insights/DuplicatedJavaScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"DuplicatedJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicatedJavaScript.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,eAAe,GAKhB,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,uBAAuB;IAC9B;;OAEG;IACH,WAAW,EACP,mHAAmH;IACvH,oJAAoJ;IACpJ,YAAY,EAAE,QAAQ;IACtB,wGAAwG;IACxG,kBAAkB,EAAE,eAAe;CAC3B,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,+CAA+C,EAAE,SAAS,CAAC,CAAC;AACrG,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAO7E,SAAS,QAAQ,CAAC,YAAkE;IAClF,MAAM,QAAQ,GAAG,YAAY,CAAC,sBAAsB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;SAC5D,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,2CAA2C;IAEpF,OAAO;QACL,UAAU,+DAAkC;QAC5C,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QAChF,aAAa,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;QACrC,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAuC,EAAE,OAA0B;IACrE,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QAC1D,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YACrC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,EAAC,OAAO,EAAC,CAAC,CAAC;IACjF,MAAM,sBAAsB,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7G,OAAO,QAAQ,CAAC;QACd,WAAW;QACX,sBAAsB,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;KAC7D,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  title: 'Duplicated JavaScript',\n  /**\n   * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  description:\n      'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',\n  /** 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. */\n  columnSource: 'Source',\n  /** Label for a column in a data table; entries will be the file size of a web resource in kilobytes. */\n  columnResourceSize: 'Resource size',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type DuplicateJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  duplication: Extras.ScriptDuplication.ScriptDuplication,\n  scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DuplicateJavaScriptInsightModel>): DuplicateJavaScriptInsightModel {\n  const requests = partialModel.scriptsWithDuplication.map(script => script.request)\n                       .filter(e => !!e);  // eslint-disable-line no-implicit-coercion\n\n  return {\n    insightKey: InsightKeys.DUPLICATE_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicateJavaScriptInsightModel {\n  const scripts = parsedTrace.Scripts.scripts.filter(script => {\n    if (!context.navigation) {\n      return false;\n    }\n\n    if (script.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);\n  });\n\n  const duplication = Extras.ScriptDuplication.computeScriptDuplication({scripts});\n  const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];\n  return finalize({\n    duplication,\n    scriptsWithDuplication: [...new Set(scriptsWithDuplication)],\n  });\n}\n"]}
+{"version":3,"file":"DuplicatedJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicatedJavaScript.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\n\nimport {estimateCompressionRatioForScript, metricSavingsForWastedBytes} from './Common.js';\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  title: 'Duplicated JavaScript',\n  /**\n   * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n   */\n  description:\n      'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',\n  /** 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. */\n  columnSource: 'Source',\n  /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */\n  columnDuplicatedBytes: 'Duplicated bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  duplication: Extras.ScriptDuplication.ScriptDuplication,\n  duplicationGroupedByNodeModules: Extras.ScriptDuplication.ScriptDuplication,\n  scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[],\n  scripts: Handlers.ModelHandlers.Scripts.Script[],\n  mainDocumentUrl: string,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DuplicatedJavaScriptInsightModel>):\n    DuplicatedJavaScriptInsightModel {\n  const requests = partialModel.scriptsWithDuplication.map(script => script.request).filter(e => !!e);\n\n  return {\n    insightKey: InsightKeys.DUPLICATE_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicatedJavaScriptInsightModel {\n  const scripts = parsedTrace.Scripts.scripts.filter(script => {\n    if (!context.navigation) {\n      return false;\n    }\n\n    if (script.frame !== context.frameId) {\n      return false;\n    }\n\n    if (script.url?.startsWith('chrome-extension://')) {\n      return false;\n    }\n\n    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);\n  });\n\n  const {duplication, duplicationGroupedByNodeModules} = Extras.ScriptDuplication.computeScriptDuplication({scripts});\n  const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];\n\n  const wastedBytesByRequestId = new Map<string, number>();\n  for (const {duplicates} of duplication.values()) {\n    for (let i = 1; i < duplicates.length; i++) {\n      const sourceData = duplicates[i];\n      if (!sourceData.script.request) {\n        continue;\n      }\n\n      const compressionRatio = estimateCompressionRatioForScript(sourceData.script);\n      const transferSize = Math.round(sourceData.attributedSize * compressionRatio);\n      const requestId = sourceData.script.request.args.data.requestId;\n      wastedBytesByRequestId.set(requestId, (wastedBytesByRequestId.get(requestId) || 0) + transferSize);\n    }\n  }\n\n  return finalize({\n    duplication,\n    duplicationGroupedByNodeModules,\n    scriptsWithDuplication: [...new Set(scriptsWithDuplication)],\n    scripts,\n    mainDocumentUrl: context.navigation?.args.data?.url ?? parsedTrace.Meta.mainFrameURL,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n  });\n}\n"]}

package/models/trace/insights/ForcedReflow.d.ts

@@ -27,7 +27,11 @@ export declare const UIStrings: {
     /**
      * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.
      */
-    readonly unattributed: "Unattributed";
+    readonly unattributed: "[unattributed]";
+    /**
+     * @description Text for the name of anonymous functions
+     */
+    readonly anonymous: "(anonymous)";
 };
 export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => {i18nId: string, values: Record<string, string|number>, formattedDefault: string};
 export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {

package/models/trace/insights/ForcedReflow.js

@@ -31,7 +31,11 @@ export const UIStrings = {
     /**
      * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.
      */
-    unattributed: 'Unattributed',
+    unattributed: '[unattributed]',
+    /**
+     * @description Text for the name of anonymous functions
+     */
+    anonymous: '(anonymous)',
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);
 export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -103,7 +107,7 @@ function finalize(partialModel) {
 }
 function getBottomCallFrameForEvent(event, traceParsedData) {
     const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);
-    const eventStackTrace = Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
+    const eventStackTrace = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);
     return profileStackTrace?.callFrames[0] ?? eventStackTrace?.[0] ?? null;
 }
 export function generateInsight(traceParsedData, context) {

package/models/trace/insights/ForcedReflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ForcedReflow.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ForcedReflow.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about Forced reflow.\n   */\n  title: 'Forced reflow',\n  /**\n   * @description Text to describe the forced reflow.\n   */\n  description:\n      'Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout. Learn more about [forced reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and its mitigations.',\n  /**\n   *@description Title of a list to provide related stack trace data\n   */\n  relatedStackTrace: 'Stack trace',\n  /**\n   *@description Text to describe the top time-consuming function call\n   */\n  topTimeConsumingFunctionCall: 'Top function call',\n  /**\n   * @description Text to describe the total reflow time\n   */\n  totalReflowTime: 'Total reflow time',\n  /**\n   * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.\n   */\n  unattributed: 'Unattributed',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {\n  topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,\n  aggregatedBottomUpData: BottomUpCallStack[],\n}>;\n\nexport interface BottomUpCallStack {\n  /**\n   * `null` indicates that this data is for unattributed force reflows.\n   */\n  bottomUpData: Types.Events.CallFrame|Protocol.Runtime.CallFrame|null;\n  totalTime: number;\n  relatedEvents: Types.Events.Event[];\n}\n\nexport interface ForcedReflowAggregatedData {\n  topLevelFunctionCall: Types.Events.CallFrame|Protocol.Runtime.CallFrame;\n  totalReflowTime: number;\n  topLevelFunctionCallEvents: Types.Events.Event[];\n}\n\nfunction getCallFrameId(callFrame: Types.Events.CallFrame|Protocol.Runtime.CallFrame): string {\n  return callFrame.scriptId + ':' + callFrame.lineNumber + ':' + callFrame.columnNumber;\n}\n\nfunction getLargestTopLevelFunctionData(\n    forcedReflowEvents: Types.Events.Event[], traceParsedData: Handlers.Types.ParsedTrace): ForcedReflowAggregatedData|\n    undefined {\n  const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n  if (forcedReflowEvents.length === 0) {\n    return;\n  }\n\n  for (const event of forcedReflowEvents) {\n    // Gather the stack traces by searching in the tree\n    const traceNode = entryToNodeMap.get(event);\n    if (!traceNode) {\n      continue;\n    }\n\n    let node = traceNode.parent;\n    let topLevelFunctionCall;\n    let topLevelFunctionCallEvent: Types.Events.Event|undefined;\n    while (node) {\n      const eventData = node.entry;\n      if (Types.Events.isProfileCall(eventData)) {\n        topLevelFunctionCall = eventData.callFrame;\n        topLevelFunctionCallEvent = eventData;\n      } else {\n        // We have finished searching bottom up data\n        if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&\n            Types.Events.objectIsCallFrame(eventData.args.data)) {\n          topLevelFunctionCall = eventData.args.data;\n          topLevelFunctionCallEvent = eventData;\n        }\n        break;\n      }\n      node = node.parent;\n    }\n\n    if (!topLevelFunctionCall || !topLevelFunctionCallEvent) {\n      continue;\n    }\n\n    const aggregatedDataId = getCallFrameId(topLevelFunctionCall);\n    const aggregatedData =\n        Platform.MapUtilities.getWithDefault(dataByTopLevelFunction, aggregatedDataId, () => ({\n                                                                                         topLevelFunctionCall,\n                                                                                         totalReflowTime: 0,\n                                                                                         topLevelFunctionCallEvents: [],\n                                                                                       }));\n    aggregatedData.totalReflowTime += (event.dur ?? 0);\n    aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n  }\n\n  let topTimeConsumingData: ForcedReflowAggregatedData|undefined = undefined;\n  dataByTopLevelFunction.forEach(data => {\n    if (!topTimeConsumingData || data.totalReflowTime > topTimeConsumingData.totalReflowTime) {\n      topTimeConsumingData = data;\n    }\n  });\n\n  return topTimeConsumingData;\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n  return {\n    insightKey: InsightKeys.FORCED_REFLOW,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nfunction getBottomCallFrameForEvent(event: Types.Events.Event, traceParsedData: Handlers.Types.ParsedTrace):\n    Types.Events.CallFrame|Protocol.Runtime.CallFrame|null {\n  const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);\n  const eventStackTrace = Helpers.Trace.getZeroIndexedStackTraceForEvent(event);\n\n  return profileStackTrace?.callFrames[0] ?? eventStackTrace?.[0] ?? null;\n}\n\nexport function generateInsight(\n    traceParsedData: Handlers.Types.ParsedTrace, context: InsightSetContext): ForcedReflowInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => {\n    const frameId = Helpers.Trace.frameIDForEvent(event);\n    if (frameId !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  };\n\n  const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n  const events = traceParsedData.Warnings.perWarning.get('FORCED_REFLOW')?.filter(isWithinContext) ?? [];\n  for (const event of events) {\n    const bottomCallFrame = getBottomCallFrameForEvent(event, traceParsedData);\n    const bottomCallId = bottomCallFrame ? getCallFrameId(bottomCallFrame) : 'UNATTRIBUTED';\n    const bottomUpData =\n        Platform.MapUtilities.getWithDefault(bottomUpDataMap, bottomCallId, () => ({\n                                                                              bottomUpData: bottomCallFrame,\n                                                                              totalTime: 0,\n                                                                              relatedEvents: [],\n                                                                            }));\n    bottomUpData.totalTime += event.dur ?? 0;\n    bottomUpData.relatedEvents.push(event);\n  }\n\n  const topLevelFunctionCallData = getLargestTopLevelFunctionData(events, traceParsedData);\n\n  return finalize({\n    relatedEvents: events,\n    topLevelFunctionCallData,\n    aggregatedBottomUpData: [...bottomUpDataMap.values()],\n  });\n}\n"]}
+{"version":3,"file":"ForcedReflow.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ForcedReflow.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about Forced reflow.\n   */\n  title: 'Forced reflow',\n  /**\n   * @description Text to describe the forced reflow.\n   */\n  description:\n      'Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout. Learn more about [forced reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and its mitigations.',\n  /**\n   *@description Title of a list to provide related stack trace data\n   */\n  relatedStackTrace: 'Stack trace',\n  /**\n   *@description Text to describe the top time-consuming function call\n   */\n  topTimeConsumingFunctionCall: 'Top function call',\n  /**\n   * @description Text to describe the total reflow time\n   */\n  totalReflowTime: 'Total reflow time',\n  /**\n   * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.\n   */\n  unattributed: '[unattributed]',\n  /**\n   * @description Text for the name of anonymous functions\n   */\n  anonymous: '(anonymous)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {\n  topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,\n  aggregatedBottomUpData: BottomUpCallStack[],\n}>;\n\nexport interface BottomUpCallStack {\n  /**\n   * `null` indicates that this data is for unattributed force reflows.\n   */\n  bottomUpData: Types.Events.CallFrame|Protocol.Runtime.CallFrame|null;\n  totalTime: number;\n  relatedEvents: Types.Events.Event[];\n}\n\nexport interface ForcedReflowAggregatedData {\n  topLevelFunctionCall: Types.Events.CallFrame|Protocol.Runtime.CallFrame;\n  totalReflowTime: number;\n  topLevelFunctionCallEvents: Types.Events.Event[];\n}\n\nfunction getCallFrameId(callFrame: Types.Events.CallFrame|Protocol.Runtime.CallFrame): string {\n  return callFrame.scriptId + ':' + callFrame.lineNumber + ':' + callFrame.columnNumber;\n}\n\nfunction getLargestTopLevelFunctionData(\n    forcedReflowEvents: Types.Events.Event[], traceParsedData: Handlers.Types.ParsedTrace): ForcedReflowAggregatedData|\n    undefined {\n  const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n  if (forcedReflowEvents.length === 0) {\n    return;\n  }\n\n  for (const event of forcedReflowEvents) {\n    // Gather the stack traces by searching in the tree\n    const traceNode = entryToNodeMap.get(event);\n    if (!traceNode) {\n      continue;\n    }\n\n    let node = traceNode.parent;\n    let topLevelFunctionCall;\n    let topLevelFunctionCallEvent: Types.Events.Event|undefined;\n    while (node) {\n      const eventData = node.entry;\n      if (Types.Events.isProfileCall(eventData)) {\n        topLevelFunctionCall = eventData.callFrame;\n        topLevelFunctionCallEvent = eventData;\n      } else {\n        // We have finished searching bottom up data\n        if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&\n            Types.Events.objectIsCallFrame(eventData.args.data)) {\n          topLevelFunctionCall = eventData.args.data;\n          topLevelFunctionCallEvent = eventData;\n        }\n        break;\n      }\n      node = node.parent;\n    }\n\n    if (!topLevelFunctionCall || !topLevelFunctionCallEvent) {\n      continue;\n    }\n\n    const aggregatedDataId = getCallFrameId(topLevelFunctionCall);\n    const aggregatedData =\n        Platform.MapUtilities.getWithDefault(dataByTopLevelFunction, aggregatedDataId, () => ({\n                                                                                         topLevelFunctionCall,\n                                                                                         totalReflowTime: 0,\n                                                                                         topLevelFunctionCallEvents: [],\n                                                                                       }));\n    aggregatedData.totalReflowTime += (event.dur ?? 0);\n    aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n  }\n\n  let topTimeConsumingData: ForcedReflowAggregatedData|undefined = undefined;\n  dataByTopLevelFunction.forEach(data => {\n    if (!topTimeConsumingData || data.totalReflowTime > topTimeConsumingData.totalReflowTime) {\n      topTimeConsumingData = data;\n    }\n  });\n\n  return topTimeConsumingData;\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n  return {\n    insightKey: InsightKeys.FORCED_REFLOW,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nfunction getBottomCallFrameForEvent(event: Types.Events.Event, traceParsedData: Handlers.Types.ParsedTrace):\n    Types.Events.CallFrame|Protocol.Runtime.CallFrame|null {\n  const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);\n  const eventStackTrace = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);\n\n  return profileStackTrace?.callFrames[0] ?? eventStackTrace?.[0] ?? null;\n}\n\nexport function generateInsight(\n    traceParsedData: Handlers.Types.ParsedTrace, context: InsightSetContext): ForcedReflowInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => {\n    const frameId = Helpers.Trace.frameIDForEvent(event);\n    if (frameId !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  };\n\n  const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n  const events = traceParsedData.Warnings.perWarning.get('FORCED_REFLOW')?.filter(isWithinContext) ?? [];\n  for (const event of events) {\n    const bottomCallFrame = getBottomCallFrameForEvent(event, traceParsedData);\n    const bottomCallId = bottomCallFrame ? getCallFrameId(bottomCallFrame) : 'UNATTRIBUTED';\n    const bottomUpData =\n        Platform.MapUtilities.getWithDefault(bottomUpDataMap, bottomCallId, () => ({\n                                                                              bottomUpData: bottomCallFrame,\n                                                                              totalTime: 0,\n                                                                              relatedEvents: [],\n                                                                            }));\n    bottomUpData.totalTime += event.dur ?? 0;\n    bottomUpData.relatedEvents.push(event);\n  }\n\n  const topLevelFunctionCallData = getLargestTopLevelFunctionData(events, traceParsedData);\n\n  return finalize({\n    relatedEvents: events,\n    topLevelFunctionCallData,\n    aggregatedBottomUpData: [...bottomUpDataMap.values()],\n  });\n}\n"]}

package/models/trace/insights/InteractionToNextPaint.d.ts

@@ -40,4 +40,5 @@ export type INPInsightModel = InsightModel<typeof UIStrings, {
     longestInteractionEvent?: SyntheticInteractionPair;
     highPercentileInteractionEvent?: SyntheticInteractionPair;
 }>;
+export declare function isINP(insight: InsightModel): insight is INPInsightModel;
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): INPInsightModel;

package/models/trace/insights/InteractionToNextPaint.js

@@ -41,6 +41,9 @@ export const UIStrings = {
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/InteractionToNextPaint.ts', UIStrings);
 export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
+export function isINP(insight) {
+    return insight.insightKey === "InteractionToNextPaint" /* InsightKeys.INTERACTION_TO_NEXT_PAINT */;
+}
 function finalize(partialModel) {
     return {
         insightKey: "InteractionToNextPaint" /* InsightKeys.INTERACTION_TO_NEXT_PAINT */,

package/models/trace/insights/InteractionToNextPaint.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionToNextPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InteractionToNextPaint.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type {SyntheticInteractionPair} from '../types/TraceEvents.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Text to tell the user about the longest user interaction.\n   */\n  description:\n      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',\n  /**\n   * @description Title for the performance insight \"INP by phase\", which shows a breakdown of INP by phases / sections.\n   */\n  title: 'INP by phase',\n  /**\n   *@description Label used for the phase/component/stage/section of a larger duration.\n   */\n  phase: 'Phase',\n  /**\n   *@description Label used for a time duration.\n   */\n  duration: 'Duration',\n\n  // TODO: these are repeated in InteractionBreakdown. Add a place for common strings?\n  /**\n   *@description Text shown next to the interaction event's input delay time in the detail view.\n   */\n  inputDelay: 'Input delay',\n  /**\n   *@description Text shown next to the interaction event's thread processing duration in the detail view.\n   */\n  processingDuration: 'Processing duration',\n  /**\n   *@description Text shown next to the interaction event's presentation delay time in the detail view.\n   */\n  presentationDelay: 'Presentation delay',\n  /**\n   * @description Text status indicating that no user interactions were detected.\n   */\n  noInteractions: 'No interactions detected',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/InteractionToNextPaint.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type INPInsightModel = InsightModel<typeof UIStrings, {\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<INPInsightModel>): INPInsightModel {\n  return {\n    insightKey: InsightKeys.INTERACTION_TO_NEXT_PAINT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): INPInsightModel {\n  const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!interactionEvents.length) {\n    // A valid result, when there is no user interaction.\n    return finalize({});\n  }\n\n  const longestByInteractionId = new Map<number, SyntheticInteractionPair>();\n  for (const event of interactionEvents) {\n    const key = event.interactionId;\n    const longest = longestByInteractionId.get(key);\n    if (!longest || event.dur > longest.dur) {\n      longestByInteractionId.set(key, event);\n    }\n  }\n  const normalizedInteractionEvents = [...longestByInteractionId.values()];\n  normalizedInteractionEvents.sort((a, b) => b.dur - a.dur);\n\n  // INP is the \"nearest-rank\"/inverted_cdf 98th percentile, except Chrome only\n  // keeps the 10 worst events around, so it can never be more than the 10th from\n  // last array element. To keep things simpler, sort desc and pick from front.\n  // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad\n  const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));\n\n  return finalize({\n    relatedEvents: [normalizedInteractionEvents[0]],\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  });\n}\n"]}
+{"version":3,"file":"InteractionToNextPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InteractionToNextPaint.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AAEnD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EACL,eAAe,GAKhB,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,WAAW,EACP,8PAA8P;IAClQ;;OAEG;IACH,KAAK,EAAE,cAAc;IACrB;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;OAEG;IACH,QAAQ,EAAE,UAAU;IAEpB,oFAAoF;IACpF;;OAEG;IACH,UAAU,EAAE,aAAa;IACzB;;OAEG;IACH,kBAAkB,EAAE,qBAAqB;IACzC;;OAEG;IACH,iBAAiB,EAAE,oBAAoB;IACvC;;OAEG;IACH,cAAc,EAAE,0BAA0B;CAClC,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,iDAAiD,EAAE,SAAS,CAAC,CAAC;AACvG,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAO7E,MAAM,UAAU,KAAK,CAAC,OAAqB;IACzC,OAAO,OAAO,CAAC,UAAU,yEAA0C,CAAC;AACtE,CAAC;AAED,SAAS,QAAQ,CAAC,YAAkD;IAClE,OAAO;QACL,UAAU,sEAAuC;QACjD,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;QACpE,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,WAAuC,EAAE,OAA0B;IACjG,MAAM,iBAAiB,GAAG,WAAW,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACnG,OAAO,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;QAC9B,qDAAqD;QACrD,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,sBAAsB,GAAG,IAAI,GAAG,EAAoC,CAAC;IAC3E,KAAK,MAAM,KAAK,IAAI,iBAAiB,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC;QAChC,MAAM,OAAO,GAAG,sBAAsB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChD,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;YACxC,sBAAsB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IACD,MAAM,2BAA2B,GAAG,CAAC,GAAG,sBAAsB,CAAC,MAAM,EAAE,CAAC,CAAC;IACzE,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAE1D,6EAA6E;IAC7E,+EAA+E;IAC/E,6EAA6E;IAC7E,iMAAiM;IACjM,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;IAE7F,OAAO,QAAQ,CAAC;QACd,aAAa,EAAE,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;QAC/C,uBAAuB,EAAE,2BAA2B,CAAC,CAAC,CAAC;QACvD,8BAA8B,EAAE,2BAA2B,CAAC,mBAAmB,CAAC;KACjF,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type {SyntheticInteractionPair} from '../types/TraceEvents.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Text to tell the user about the longest user interaction.\n   */\n  description:\n      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',\n  /**\n   * @description Title for the performance insight \"INP by phase\", which shows a breakdown of INP by phases / sections.\n   */\n  title: 'INP by phase',\n  /**\n   *@description Label used for the phase/component/stage/section of a larger duration.\n   */\n  phase: 'Phase',\n  /**\n   *@description Label used for a time duration.\n   */\n  duration: 'Duration',\n\n  // TODO: these are repeated in InteractionBreakdown. Add a place for common strings?\n  /**\n   *@description Text shown next to the interaction event's input delay time in the detail view.\n   */\n  inputDelay: 'Input delay',\n  /**\n   *@description Text shown next to the interaction event's thread processing duration in the detail view.\n   */\n  processingDuration: 'Processing duration',\n  /**\n   *@description Text shown next to the interaction event's presentation delay time in the detail view.\n   */\n  presentationDelay: 'Presentation delay',\n  /**\n   * @description Text status indicating that no user interactions were detected.\n   */\n  noInteractions: 'No interactions detected',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/InteractionToNextPaint.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type INPInsightModel = InsightModel<typeof UIStrings, {\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nexport function isINP(insight: InsightModel): insight is INPInsightModel {\n  return insight.insightKey === InsightKeys.INTERACTION_TO_NEXT_PAINT;\n}\n\nfunction finalize(partialModel: PartialInsightModel<INPInsightModel>): INPInsightModel {\n  return {\n    insightKey: InsightKeys.INTERACTION_TO_NEXT_PAINT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): INPInsightModel {\n  const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!interactionEvents.length) {\n    // A valid result, when there is no user interaction.\n    return finalize({});\n  }\n\n  const longestByInteractionId = new Map<number, SyntheticInteractionPair>();\n  for (const event of interactionEvents) {\n    const key = event.interactionId;\n    const longest = longestByInteractionId.get(key);\n    if (!longest || event.dur > longest.dur) {\n      longestByInteractionId.set(key, event);\n    }\n  }\n  const normalizedInteractionEvents = [...longestByInteractionId.values()];\n  normalizedInteractionEvents.sort((a, b) => b.dur - a.dur);\n\n  // INP is the \"nearest-rank\"/inverted_cdf 98th percentile, except Chrome only\n  // keeps the 10 worst events around, so it can never be more than the 10th from\n  // last array element. To keep things simpler, sort desc and pick from front.\n  // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad\n  const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));\n\n  return finalize({\n    relatedEvents: [normalizedInteractionEvents[0]],\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  });\n}\n"]}

package/models/trace/insights/LegacyJavaScript.d.ts

@@ -0,0 +1,32 @@
+import type * as Handlers from '../handlers/handlers.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
+     */
+    readonly title: "Legacy JavaScript";
+    /**
+     * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
+     */
+    readonly 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. */
+    readonly 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). */
+    readonly columnWastedBytes: "Wasted bytes";
+};
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
+export interface PatternMatchResult {
+    name: string;
+    line: number;
+    column: number;
+}
+interface LegacyJavaScriptResult {
+    matches: PatternMatchResult[];
+    estimatedByteSavings: number;
+}
+type LegacyJavaScriptResults = Map<Handlers.ModelHandlers.Scripts.Script, LegacyJavaScriptResult>;
+export type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {
+    legacyJavaScriptResults: LegacyJavaScriptResults;
+}>;
+export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LegacyJavaScriptInsightModel;
+export {};

package/models/trace/insights/LegacyJavaScript.js

@@ -0,0 +1,77 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import * as LegacyJavaScriptLib from '../../../third_party/legacy-javascript/legacy-javascript.js';
+import * as Helpers from '../helpers/helpers.js';
+import { estimateCompressionRatioForScript, metricSavingsForWastedBytes } from './Common.js';
+import { InsightCategory, } from './types.js';
+const { detectLegacyJavaScript } = LegacyJavaScriptLib.LegacyJavaScript;
+export const UIStrings = {
+    /**
+     * @description Title of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
+     */
+    title: 'Legacy JavaScript',
+    /**
+     * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
+     */
+    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',
+};
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);
+export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
+const BYTE_THRESHOLD = 5000;
+function finalize(partialModel) {
+    const requests = [...partialModel.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e);
+    return {
+        insightKey: "LegacyJavaScript" /* InsightKeys.LEGACY_JAVASCRIPT */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        category: InsightCategory.ALL,
+        state: requests.length ? 'fail' : 'pass',
+        relatedEvents: [...new Set(requests)],
+        ...partialModel,
+    };
+}
+export function generateInsight(parsedTrace, context) {
+    const scripts = parsedTrace.Scripts.scripts.filter(script => {
+        if (!context.navigation) {
+            return false;
+        }
+        if (script.frame !== context.frameId) {
+            return false;
+        }
+        if (script.url?.startsWith('chrome-extension://')) {
+            return false;
+        }
+        return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);
+    });
+    const legacyJavaScriptResults = new Map();
+    const wastedBytesByRequestId = new Map();
+    for (const script of scripts) {
+        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) {
+            const compressionRatio = estimateCompressionRatioForScript(script);
+            const transferSize = Math.round(result.estimatedByteSavings * compressionRatio);
+            const requestId = script.request.args.data.requestId;
+            wastedBytesByRequestId.set(requestId, transferSize);
+        }
+    }
+    const sorted = new Map([...legacyJavaScriptResults].sort((a, b) => b[1].estimatedByteSavings - a[1].estimatedByteSavings));
+    return finalize({
+        legacyJavaScriptResults: sorted,
+        metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),
+    });
+}
+//# sourceMappingURL=LegacyJavaScript.js.map

package/models/trace/insights/LegacyJavaScript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LegacyJavaScript.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,mBAAmB,MAAM,6DAA6D,CAAC;AAEnG,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAC,iCAAiC,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3F,OAAO,EACL,eAAe,GAKhB,MAAM,YAAY,CAAC;AAEpB,MAAM,EAAC,sBAAsB,EAAC,GAAG,mBAAmB,CAAC,gBAAgB,CAAC;AAEtE,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,mBAAmB;IAC1B;;OAEG;IACH,WAAW,EACP,gcAAgc;IACpc,6FAA6F;IAC7F,YAAY,EAAE,QAAQ;IACtB,oIAAoI;IACpI,iBAAiB,EAAE,cAAc;CACzB,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,2CAA2C,EAAE,SAAS,CAAC,CAAC;AACjG,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAmB7E,MAAM,cAAc,GAAG,IAAI,CAAC;AAE5B,SAAS,QAAQ,CAAC,YAA+D;IAC/E,MAAM,QAAQ,GAAG,CAAC,GAAG,YAAY,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjH,OAAO;QACL,UAAU,wDAA+B;QACzC,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QACxC,aAAa,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;QACrC,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAuC,EAAE,OAA0B;IACrE,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QAC1D,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YACrC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,MAAM,CAAC,GAAG,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAAE,CAAC;YAClD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAA4B,IAAI,GAAG,EAAE,CAAC;IACnE,MAAM,sBAAsB,GAAG,IAAI,GAAG,EAAkB,CAAC;IAEzD,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,cAAc,EAAE,CAAC;YAC9D,SAAS;QACX,CAAC;QAED,MAAM,MAAM,GAAG,sBAAsB,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;QACxE,IAAI,MAAM,CAAC,oBAAoB,GAAG,cAAc,EAAE,CAAC;YACjD,SAAS;QACX,CAAC;QAED,uBAAuB,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAE5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,gBAAgB,GAAG,iCAAiC,CAAC,MAAM,CAAC,CAAC;YACnE,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,CAAC;YAChF,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;YACrD,sBAAsB,CAAC,GAAG,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM,MAAM,GACR,IAAI,GAAG,CAAC,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAEhH,OAAO,QAAQ,CAAC;QACd,uBAAuB,EAAE,MAAM;QAC/B,aAAa,EAAE,2BAA2B,CAAC,sBAAsB,EAAE,OAAO,CAAC;KAC5E,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as LegacyJavaScriptLib from '../../../third_party/legacy-javascript/legacy-javascript.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\n\nimport {estimateCompressionRatioForScript, metricSavingsForWastedBytes} from './Common.js';\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nconst {detectLegacyJavaScript} = LegacyJavaScriptLib.LegacyJavaScript;\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.\n   */\n  title: 'Legacy JavaScript',\n  /**\n   * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.\n   */\n  description:\n      '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/)',\n  /** Label for a column in a data table; entries will be the individual JavaScript scripts. */\n  columnScript: 'Script',\n  /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */\n  columnWastedBytes: 'Wasted bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface PatternMatchResult {\n  name: string;\n  line: number;\n  column: number;\n}\n\ninterface LegacyJavaScriptResult {\n  matches: PatternMatchResult[];\n  estimatedByteSavings: number;\n}\n\ntype LegacyJavaScriptResults = Map<Handlers.ModelHandlers.Scripts.Script, LegacyJavaScriptResult>;\n\nexport type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  legacyJavaScriptResults: LegacyJavaScriptResults,\n}>;\n\nconst BYTE_THRESHOLD = 5000;\n\nfunction finalize(partialModel: PartialInsightModel<LegacyJavaScriptInsightModel>): LegacyJavaScriptInsightModel {\n  const requests = [...partialModel.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e);\n\n  return {\n    insightKey: InsightKeys.LEGACY_JAVASCRIPT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: requests.length ? 'fail' : 'pass',\n    relatedEvents: [...new Set(requests)],\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LegacyJavaScriptInsightModel {\n  const scripts = parsedTrace.Scripts.scripts.filter(script => {\n    if (!context.navigation) {\n      return false;\n    }\n\n    if (script.frame !== context.frameId) {\n      return false;\n    }\n\n    if (script.url?.startsWith('chrome-extension://')) {\n      return false;\n    }\n\n    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);\n  });\n\n  const legacyJavaScriptResults: LegacyJavaScriptResults = new Map();\n  const wastedBytesByRequestId = new Map<string, number>();\n\n  for (const script of scripts) {\n    if (!script.content || script.content.length < BYTE_THRESHOLD) {\n      continue;\n    }\n\n    const result = detectLegacyJavaScript(script.content, script.sourceMap);\n    if (result.estimatedByteSavings < BYTE_THRESHOLD) {\n      continue;\n    }\n\n    legacyJavaScriptResults.set(script, result);\n\n    if (script.request) {\n      const compressionRatio = estimateCompressionRatioForScript(script);\n      const transferSize = Math.round(result.estimatedByteSavings * compressionRatio);\n      const requestId = script.request.args.data.requestId;\n      wastedBytesByRequestId.set(requestId, transferSize);\n    }\n  }\n\n  const sorted =\n      new Map([...legacyJavaScriptResults].sort((a, b) => b[1].estimatedByteSavings - a[1].estimatedByteSavings));\n\n  return finalize({\n    legacyJavaScriptResults: sorted,\n    metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n  });\n}\n"]}

package/models/trace/insights/Models.d.ts

@@ -1,3 +1,4 @@
+export * as Cache from './Cache.js';
 export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as DOMSize from './DOMSize.js';
@@ -8,9 +9,10 @@ export * as ImageDelivery from './ImageDelivery.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
 export * as LCPPhases from './LCPPhases.js';
+export * as LegacyJavaScript from './LegacyJavaScript.js';
+export * as ModernHTTP from './ModernHTTP.js';
 export * as NetworkDependencyTree from './NetworkDependencyTree.js';
 export * as RenderBlocking from './RenderBlocking.js';
 export * as SlowCSSSelector from './SlowCSSSelector.js';
 export * as ThirdParties from './ThirdParties.js';
-export * as UseCache from './UseCache.js';
 export * as Viewport from './Viewport.js';

package/models/trace/insights/Models.js

@@ -1,6 +1,7 @@
 // Copyright 2024 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.
+export * as Cache from './Cache.js';
 export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as DOMSize from './DOMSize.js';
@@ -11,10 +12,11 @@ export * as ImageDelivery from './ImageDelivery.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
 export * as LCPPhases from './LCPPhases.js';
+export * as LegacyJavaScript from './LegacyJavaScript.js';
+export * as ModernHTTP from './ModernHTTP.js';
 export * as NetworkDependencyTree from './NetworkDependencyTree.js';
 export * as RenderBlocking from './RenderBlocking.js';
 export * as SlowCSSSelector from './SlowCSSSelector.js';
 export * as ThirdParties from './ThirdParties.js';
-export * as UseCache from './UseCache.js';
 export * as Viewport from './Viewport.js';
 //# sourceMappingURL=Models.js.map

package/models/trace/insights/Models.js.map

@@ -1 +1 @@
-{"version":3,"file":"Models.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Models.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,oBAAoB,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nexport * as CLSCulprits from './CLSCulprits.js';\nexport * as DocumentLatency from './DocumentLatency.js';\nexport * as DOMSize from './DOMSize.js';\nexport * as DuplicatedJavaScript from './DuplicatedJavaScript.js';\nexport * as FontDisplay from './FontDisplay.js';\nexport * as ForcedReflow from './ForcedReflow.js';\nexport * as ImageDelivery from './ImageDelivery.js';\nexport * as InteractionToNextPaint from './InteractionToNextPaint.js';\nexport * as LCPDiscovery from './LCPDiscovery.js';\nexport * as LCPPhases from './LCPPhases.js';\nexport * as NetworkDependencyTree from './NetworkDependencyTree.js';\nexport * as RenderBlocking from './RenderBlocking.js';\nexport * as SlowCSSSelector from './SlowCSSSelector.js';\nexport * as ThirdParties from './ThirdParties.js';\nexport * as UseCache from './UseCache.js';\nexport * as Viewport from './Viewport.js';\n"]}
+{"version":3,"file":"Models.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Models.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,oBAAoB,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,sBAAsB,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,gBAAgB,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,qBAAqB,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,eAAe,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nexport * as Cache from './Cache.js';\nexport * as CLSCulprits from './CLSCulprits.js';\nexport * as DocumentLatency from './DocumentLatency.js';\nexport * as DOMSize from './DOMSize.js';\nexport * as DuplicatedJavaScript from './DuplicatedJavaScript.js';\nexport * as FontDisplay from './FontDisplay.js';\nexport * as ForcedReflow from './ForcedReflow.js';\nexport * as ImageDelivery from './ImageDelivery.js';\nexport * as InteractionToNextPaint from './InteractionToNextPaint.js';\nexport * as LCPDiscovery from './LCPDiscovery.js';\nexport * as LCPPhases from './LCPPhases.js';\nexport * as LegacyJavaScript from './LegacyJavaScript.js';\nexport * as ModernHTTP from './ModernHTTP.js';\nexport * as NetworkDependencyTree from './NetworkDependencyTree.js';\nexport * as RenderBlocking from './RenderBlocking.js';\nexport * as SlowCSSSelector from './SlowCSSSelector.js';\nexport * as ThirdParties from './ThirdParties.js';\nexport * as Viewport from './Viewport.js';\n"]}

package/models/trace/insights/ModernHTTP.d.ts

@@ -0,0 +1,51 @@
+import * as Platform from '../../../core/platform/platform.js';
+import * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. "HTTP" should not be translated.
+     */
+    readonly title: "Modern HTTP";
+    /**
+     * @description Description of an insight that recommends recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. "HTTP" should not be translated.
+     */
+    readonly description: "HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).";
+    /**
+     * @description Column header for a table where each cell represents a network request.
+     */
+    readonly request: "Request";
+    /**
+     * @description Column header for a table where each cell represents the protocol of a network request.
+     */
+    readonly protocol: "Protocol";
+    /**
+     * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
+     */
+    readonly noOldProtocolRequests: "No requests used HTTP/1.1";
+};
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => {i18nId: string, values: Record<string, string|number>, formattedDefault: string};
+export type UseModernHTTPInsightModel = InsightModel<typeof UIStrings, {
+    requests: Types.Events.SyntheticNetworkRequest[];
+}>;
+/**
+ * Determine the set of resources that aren't HTTP/2 but should be.
+ * We're a little conservative about what we surface for a few reasons:
+ *
+ *    - The simulator approximation of HTTP/2 is a little more generous than reality.
+ *    - There's a bit of debate surrounding HTTP/2 due to its worse performance in environments with high packet loss. [1][2][3]
+ *    - It's something that you'd have absolutely zero control over with a third-party (can't defer to fix it for example).
+ *
+ * Therefore, we only surface requests that were...
+ *
+ *    - Served over HTTP/1.1 or earlier
+ *    - Served over an origin that serves at least 6 static asset requests
+ *      (if there aren't more requests than browser's max/host, multiplexing isn't as big a deal)
+ *    - Not served on localhost (h2 is a pain to deal with locally & and CI)
+ *
+ * [1] https://news.ycombinator.com/item?id=19086639
+ * [2] https://www.twilio.com/blog/2017/10/http2-issues.html
+ * [3] https://www.cachefly.com/http-2-is-not-a-magic-bullet/
+ */
+export declare function determineNonHttp2Resources(requests: Types.Events.SyntheticNetworkRequest[], entityMappings: Handlers.Helpers.EntityMappings, firstPartyEntity: Handlers.Helpers.Entity | null): Types.Events.SyntheticNetworkRequest[];
+export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): UseModernHTTPInsightModel;