@paulirish/trace_engine 0.0.56 → 0.0.58

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

@@ -1 +1 @@
-{"version":3,"file":"DOMSize.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DOMSize.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 type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * 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 recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated.\n   */\n  title: 'Optimize DOM size',\n  /**\n   * @description Description of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated. \"layout reflows\" are when the browser will recompute the layout of content on the page.\n   */\n  description:\n      'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).',\n  /**\n   * @description Header for a column containing the names of statistics as opposed to the actual statistic values.\n   */\n  statistic: 'Statistic',\n  /**\n   * @description Header for a column containing the value of a statistic.\n   */\n  value: 'Value',\n  /**\n   * @description Header for a column containing the page element related to a statistic.\n   */\n  element: 'Element',\n  /**\n   * @description Label for a value representing the total number of elements on the page.\n   */\n  totalElements: 'Total elements',\n  /**\n   * @description Label for a value representing the maximum depth of the Document Object Model (DOM). \"DOM\" is a acronym and should not be translated.\n   */\n  maxDOMDepth: 'DOM depth',\n  /**\n   * @description Label for a value representing the maximum number of child elements of any parent element on the page.\n   */\n  maxChildren: 'Most children',\n  /**\n   * @description Text for a section.\n   */\n  topUpdatesDescription:\n      'These are the largest layout and style recalculation events. Their performance impact may be reduced by making the DOM simpler.',\n  /**\n   *@description Label used for a time duration.\n   */\n  duration: 'Duration',\n  /**\n   * @description Message displayed in a table detailing how big a layout (rendering) is.\n   * @example {134} PH1\n   */\n  largeLayout: 'Layout ({PH1} objects)',\n  /**\n   * @description Message displayed in a table detailing how big a style recalculation (rendering) is.\n   * @example {134} PH1\n   */\n  largeStyleRecalc: 'Style recalculation ({PH1} elements)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nconst DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));\n\n// These thresholds were selected to maximize the number of long (>40ms) events above\n// the threshold while maximizing the number of short (<40ms) events below the threshold.\n// See go/rpp-dom-size-thresholds for the analysis that produced these thresholds.\nconst LAYOUT_OBJECTS_THRESHOLD = 100;\nconst STYLE_RECALC_ELEMENTS_THRESHOLD = 300;\n\nexport type DOMSizeInsightModel = InsightModel<typeof UIStrings, {\n  largeLayoutUpdates: Types.Events.Layout[],\n  largeStyleRecalcs: Types.Events.UpdateLayoutTree[],\n  largeUpdates: Array<\n      {label: Common.UIString.LocalizedString, duration: Types.Timing.Milli, size: number, event: Types.Events.Event}>,\n  maxDOMStats?: Types.Events.DOMStats,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSizeInsightModel {\n  const relatedEvents = [...partialModel.largeLayoutUpdates, ...partialModel.largeStyleRecalcs];\n  return {\n    insightKey: InsightKeys.DOM_SIZE,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: relatedEvents.length > 0 ? 'informative' : 'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DOMSizeInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const mainTid = context.navigation?.tid;\n\n  const largeLayoutUpdates: Types.Events.Layout[] = [];\n  const largeStyleRecalcs: Types.Events.UpdateLayoutTree[] = [];\n\n  const threads = Handlers.Threads.threadsInRenderer(parsedTrace.Renderer, parsedTrace.AuctionWorklets);\n  for (const thread of threads) {\n    if (thread.type !== Handlers.Threads.ThreadType.MAIN_THREAD) {\n      continue;\n    }\n\n    if (mainTid === undefined) {\n      // We won't have a specific thread ID to reference if the context does not have a navigation.\n      // In this case, we'll just filter out any OOPIFs threads.\n      if (!thread.processIsOnMainFrame) {\n        continue;\n      }\n    } else if (thread.tid !== mainTid) {\n      continue;\n    }\n\n    const rendererThread = parsedTrace.Renderer.processes.get(thread.pid)?.threads.get(thread.tid);\n    if (!rendererThread) {\n      continue;\n    }\n\n    const {entries, layoutEvents, updateLayoutTreeEvents} = rendererThread;\n    if (!entries.length) {\n      continue;\n    }\n\n    const first = entries[0];\n    const last = entries[entries.length - 1];\n    const timeRange =\n        Helpers.Timing.traceWindowFromMicroSeconds(first.ts, Types.Timing.Micro(last.ts + (last.dur ?? 0)));\n    if (!Helpers.Timing.boundsIncludeTimeRange({timeRange, bounds: context.bounds})) {\n      continue;\n    }\n\n    for (const event of layoutEvents) {\n      if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n        continue;\n      }\n\n      const {dirtyObjects} = event.args.beginData;\n      if (dirtyObjects > LAYOUT_OBJECTS_THRESHOLD) {\n        largeLayoutUpdates.push(event);\n      }\n    }\n\n    for (const event of updateLayoutTreeEvents) {\n      if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n        continue;\n      }\n\n      const {elementCount} = event.args;\n      if (elementCount > STYLE_RECALC_ELEMENTS_THRESHOLD) {\n        largeStyleRecalcs.push(event);\n      }\n    }\n  }\n\n  const largeUpdates: DOMSizeInsightModel['largeUpdates'] = [\n    ...largeLayoutUpdates.map(event => {\n      const duration = (event.dur / 1000) as Types.Timing.Milli;\n      const size = event.args.beginData.dirtyObjects;\n      const label = i18nString(UIStrings.largeLayout, {PH1: size});\n      return {label, duration, size, event};\n    }),\n    ...largeStyleRecalcs.map(event => {\n      const duration = (event.dur / 1000) as Types.Timing.Milli;\n      const size = event.args.elementCount;\n      const label = i18nString(UIStrings.largeStyleRecalc, {PH1: size});\n      return {label, duration, size, event};\n    }),\n  ].sort((a, b) => b.duration - a.duration).slice(0, 5);\n\n  const domStatsEvents = parsedTrace.DOMStats.domStatsByFrameId.get(context.frameId)?.filter(isWithinContext) ?? [];\n  let maxDOMStats: Types.Events.DOMStats|undefined;\n  for (const domStats of domStatsEvents) {\n    // While recording a cross-origin navigation, there can be overlapping dom stats from before & after\n    // the navigation which share a frameId. In this case we should also ensure the pid matches up with\n    // the navigation we care about (i.e. from after the navigation event).\n    const navigationPid = context.navigation?.pid;\n    if (navigationPid && domStats.pid !== navigationPid) {\n      continue;\n    }\n\n    if (!maxDOMStats || domStats.args.data.totalElements > maxDOMStats.args.data.totalElements) {\n      maxDOMStats = domStats;\n    }\n  }\n\n  return finalize({\n    largeLayoutUpdates,\n    largeStyleRecalcs,\n    largeUpdates,\n    maxDOMStats,\n  });\n}\n"]}
+{"version":3,"file":"DOMSize.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DOMSize.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 type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * 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 recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated.\n   */\n  title: 'Optimize DOM size',\n  /**\n   * @description Description of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated. \"layout reflows\" are when the browser will recompute the layout of content on the page.\n   */\n  description:\n      'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).',\n  /**\n   * @description Header for a column containing the names of statistics as opposed to the actual statistic values.\n   */\n  statistic: 'Statistic',\n  /**\n   * @description Header for a column containing the value of a statistic.\n   */\n  value: 'Value',\n  /**\n   * @description Header for a column containing the page element related to a statistic.\n   */\n  element: 'Element',\n  /**\n   * @description Label for a value representing the total number of elements on the page.\n   */\n  totalElements: 'Total elements',\n  /**\n   * @description Label for a value representing the maximum depth of the Document Object Model (DOM). \"DOM\" is a acronym and should not be translated.\n   */\n  maxDOMDepth: 'DOM depth',\n  /**\n   * @description Label for a value representing the maximum number of child elements of any parent element on the page.\n   */\n  maxChildren: 'Most children',\n  /**\n   * @description Text for a section.\n   */\n  topUpdatesDescription:\n      'These are the largest layout and style recalculation events. Their performance impact may be reduced by making the DOM simpler.',\n  /**\n   * @description Label used for a time duration.\n   */\n  duration: 'Duration',\n  /**\n   * @description Message displayed in a table detailing how big a layout (rendering) is.\n   * @example {134} PH1\n   */\n  largeLayout: 'Layout ({PH1} objects)',\n  /**\n   * @description Message displayed in a table detailing how big a style recalculation (rendering) is.\n   * @example {134} PH1\n   */\n  largeStyleRecalc: 'Style recalculation ({PH1} elements)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nconst DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));\n\n// These thresholds were selected to maximize the number of long (>40ms) events above\n// the threshold while maximizing the number of short (<40ms) events below the threshold.\n// See go/rpp-dom-size-thresholds for the analysis that produced these thresholds.\nconst LAYOUT_OBJECTS_THRESHOLD = 100;\nconst STYLE_RECALC_ELEMENTS_THRESHOLD = 300;\n\nexport type DOMSizeInsightModel = InsightModel<typeof UIStrings, {\n  largeLayoutUpdates: Types.Events.Layout[],\n  largeStyleRecalcs: Types.Events.UpdateLayoutTree[],\n  largeUpdates: Array<\n      {label: Common.UIString.LocalizedString, duration: Types.Timing.Milli, size: number, event: Types.Events.Event}>,\n  maxDOMStats?: Types.Events.DOMStats,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSizeInsightModel {\n  const relatedEvents = [...partialModel.largeLayoutUpdates, ...partialModel.largeStyleRecalcs];\n  return {\n    insightKey: InsightKeys.DOM_SIZE,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: relatedEvents.length > 0 ? 'informative' : 'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DOMSizeInsightModel {\n  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n  const mainTid = context.navigation?.tid;\n\n  const largeLayoutUpdates: Types.Events.Layout[] = [];\n  const largeStyleRecalcs: Types.Events.UpdateLayoutTree[] = [];\n\n  const threads = Handlers.Threads.threadsInRenderer(parsedTrace.Renderer, parsedTrace.AuctionWorklets);\n  for (const thread of threads) {\n    if (thread.type !== Handlers.Threads.ThreadType.MAIN_THREAD) {\n      continue;\n    }\n\n    if (mainTid === undefined) {\n      // We won't have a specific thread ID to reference if the context does not have a navigation.\n      // In this case, we'll just filter out any OOPIFs threads.\n      if (!thread.processIsOnMainFrame) {\n        continue;\n      }\n    } else if (thread.tid !== mainTid) {\n      continue;\n    }\n\n    const rendererThread = parsedTrace.Renderer.processes.get(thread.pid)?.threads.get(thread.tid);\n    if (!rendererThread) {\n      continue;\n    }\n\n    const {entries, layoutEvents, updateLayoutTreeEvents} = rendererThread;\n    if (!entries.length) {\n      continue;\n    }\n\n    const first = entries[0];\n    const last = entries[entries.length - 1];\n    const timeRange =\n        Helpers.Timing.traceWindowFromMicroSeconds(first.ts, Types.Timing.Micro(last.ts + (last.dur ?? 0)));\n    if (!Helpers.Timing.boundsIncludeTimeRange({timeRange, bounds: context.bounds})) {\n      continue;\n    }\n\n    for (const event of layoutEvents) {\n      if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n        continue;\n      }\n\n      const {dirtyObjects} = event.args.beginData;\n      if (dirtyObjects > LAYOUT_OBJECTS_THRESHOLD) {\n        largeLayoutUpdates.push(event);\n      }\n    }\n\n    for (const event of updateLayoutTreeEvents) {\n      if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n        continue;\n      }\n\n      const {elementCount} = event.args;\n      if (elementCount > STYLE_RECALC_ELEMENTS_THRESHOLD) {\n        largeStyleRecalcs.push(event);\n      }\n    }\n  }\n\n  const largeUpdates: DOMSizeInsightModel['largeUpdates'] = [\n    ...largeLayoutUpdates.map(event => {\n      const duration = (event.dur / 1000) as Types.Timing.Milli;\n      const size = event.args.beginData.dirtyObjects;\n      const label = i18nString(UIStrings.largeLayout, {PH1: size});\n      return {label, duration, size, event};\n    }),\n    ...largeStyleRecalcs.map(event => {\n      const duration = (event.dur / 1000) as Types.Timing.Milli;\n      const size = event.args.elementCount;\n      const label = i18nString(UIStrings.largeStyleRecalc, {PH1: size});\n      return {label, duration, size, event};\n    }),\n  ].sort((a, b) => b.duration - a.duration).slice(0, 5);\n\n  const domStatsEvents = parsedTrace.DOMStats.domStatsByFrameId.get(context.frameId)?.filter(isWithinContext) ?? [];\n  let maxDOMStats: Types.Events.DOMStats|undefined;\n  for (const domStats of domStatsEvents) {\n    // While recording a cross-origin navigation, there can be overlapping dom stats from before & after\n    // the navigation which share a frameId. In this case we should also ensure the pid matches up with\n    // the navigation we care about (i.e. from after the navigation event).\n    const navigationPid = context.navigation?.pid;\n    if (navigationPid && domStats.pid !== navigationPid) {\n      continue;\n    }\n\n    if (!maxDOMStats || domStats.args.data.totalElements > maxDOMStats.args.data.totalElements) {\n      maxDOMStats = domStats;\n    }\n  }\n\n  return finalize({\n    largeLayoutUpdates,\n    largeStyleRecalcs,\n    largeUpdates,\n    maxDOMStats,\n  });\n}\n\nexport function createOverlays(model: DOMSizeInsightModel): Types.Overlays.Overlay[] {\n  const entries = [...model.largeStyleRecalcs, ...model.largeLayoutUpdates];\n  return entries.map(entry => ({\n                       type: 'ENTRY_OUTLINE',\n                       entry,\n                       outlineReason: 'ERROR',\n                     }));\n}\n"]}

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

@@ -3,11 +3,11 @@ import * as Types from '../types/types.js';
 import { type Checklist, type InsightModel, type InsightSetContext } from './types.js';
 export declare const UIStrings: {
     /**
-     *@description Title of an insight that provides a breakdown for how long it took to download the main document.
+     * @description Title of an insight that provides a breakdown for how long it took to download the main document.
      */
     readonly title: "Document request latency";
     /**
-     *@description Description of an insight that provides a breakdown for how long it took to download the main document.
+     * @description Description of an insight that provides a breakdown for how long it took to download the main document.
      */
     readonly description: "Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.";
     /**
@@ -63,3 +63,4 @@ export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
     };
 }>;
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DocumentLatencyInsightModel;
+export declare function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[];

package/models/trace/insights/DocumentLatency.js

@@ -8,11 +8,11 @@ import { isRequestCompressed } from './Common.js';
 import { InsightCategory, InsightKeys, InsightWarning, } from './types.js';
 export const UIStrings = {
     /**
-     *@description Title of an insight that provides a breakdown for how long it took to download the main document.
+     * @description Title of an insight that provides a breakdown for how long it took to download the main document.
      */
     title: 'Document request latency',
     /**
-     *@description Description of an insight that provides a breakdown for how long it took to download the main document.
+     * @description Description of an insight that provides a breakdown for how long it took to download the main document.
      */
     description: 'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
     /**
@@ -212,4 +212,46 @@ export function generateInsight(parsedTrace, context) {
         wastedBytes: uncompressedResponseBytes,
     });
 }
+export function createOverlays(model) {
+    if (!model.data?.documentRequest) {
+        return [];
+    }
+    const overlays = [];
+    const event = model.data.documentRequest;
+    const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);
+    const sections = [];
+    if (model.data.redirectDuration) {
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(event.ts, (event.ts + redirectDurationMicro));
+        sections.push({ bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true });
+        overlays.push({ type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event });
+    }
+    if (!model.data.checklist.serverResponseIsFast.value) {
+        const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);
+        // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.
+        const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);
+        const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(sendEndMicro, (sendEndMicro + serverResponseTimeMicro));
+        sections.push({ bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true });
+    }
+    if (model.data.uncompressedResponseBytes) {
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(event.args.data.syntheticData.downloadStart, (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download));
+        sections.push({ bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true });
+        overlays.push({ type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event });
+    }
+    if (sections.length) {
+        overlays.push({
+            type: 'TIMESPAN_BREAKDOWN',
+            sections,
+            entry: model.data.documentRequest,
+            // Always render below because the document request is guaranteed to be
+            // the first request in the network track.
+            renderLocation: 'BELOW_EVENT',
+        });
+    }
+    overlays.push({
+        type: 'ENTRY_SELECTED',
+        entry: model.data.documentRequest,
+    });
+    return overlays;
+}
 //# sourceMappingURL=DocumentLatency.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentLatency.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DocumentLatency.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 * as Types from '../types/types.js';\n\nimport {isRequestCompressed} from './Common.js';\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides a breakdown for how long it took to download the main document.\n   */\n  title: 'Document request latency',\n  /**\n   *@description Description of an insight that provides a breakdown for how long it took to download the main document.\n   */\n  description:\n      'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',\n  /**\n   * @description Text to tell the user that the document request does not have redirects.\n   */\n  passingRedirects: 'Avoids redirects',\n  /**\n   * @description Text to tell the user that the document request had redirects.\n   * @example {3} PH1\n   * @example {1000 ms} PH2\n   */\n  failedRedirects: 'Had redirects ({PH1} redirects, +{PH2})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n   * @example {600 ms} PH1\n   */\n  passingServerResponseTime: 'Server responds quickly (observed {PH1})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.\n   * @example {601 ms} PH1\n   */\n  failedServerResponseTime: 'Server responded slowly (observed {PH1})',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was applied.\n   */\n  passingTextCompression: 'Applies text compression',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was not applied.\n   */\n  failedTextCompression: 'No compression applied',\n  /**\n   * @description Text for a label describing a network request event as having redirects.\n   */\n  redirectsLabel: 'Redirects',\n  /**\n   * @description Text for a label describing a network request event as taking too long to start delivery by the server.\n   */\n  serverResponseTimeLabel: 'Server response time',\n  /**\n   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.\n   */\n  uncompressedDownload: 'Uncompressed download',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.\n// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.\nconst TOO_SLOW_THRESHOLD_MS = 600;\nconst TARGET_MS = 100;\n\n// Threshold for compression savings.\nconst IGNORE_THRESHOLD_IN_BYTES = 1400;\n\nexport function isDocumentLatency(x: InsightModel): x is DocumentLatencyInsightModel {\n  return x.insightKey === 'DocumentLatency';\n}\n\nexport type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n  data?: {\n    serverResponseTime: Types.Timing.Milli,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n  },\n}>;\n\nfunction getServerResponseTime(\n    request: Types.Events.SyntheticNetworkRequest, context: InsightSetContext): Types.Timing.Milli|null {\n  // Prefer the value as given by the Lantern provider.\n  // For PSI, Lighthouse uses this to set a better value for the server response\n  // time. For technical reasons, in Lightrider we do not have `sendEnd` timing\n  // values. See Lighthouse's `asLanternNetworkRequest` function for more.\n  const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);\n  if (lanternRequest?.serverResponseTime !== undefined) {\n    return lanternRequest.serverResponseTime as Types.Timing.Milli;\n  }\n\n  const timing = request.args.data.timing;\n  if (!timing) {\n    return null;\n  }\n\n  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.waiting);\n  return Math.round(ms) as Types.Timing.Milli;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  const isCompressed = isRequestCompressed(request);\n  if (isCompressed) {\n    return 0;\n  }\n\n  // We don't know how many bytes this asset used on the network, but we can guess it was\n  // roughly the size of the content gzipped.\n  // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples\n  // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers\n  // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress\n  const originalSize = request.args.data.decodedBodyLength;\n  let estimatedSavings = 0;\n  switch (request.args.data.mimeType) {\n    case 'text/css':\n      // Stylesheets tend to compress extremely well.\n      estimatedSavings = Math.round(originalSize * 0.8);\n      break;\n    case 'text/html':\n    case 'text/javascript':\n      // Scripts and HTML compress fairly well too.\n      estimatedSavings = Math.round(originalSize * 0.67);\n      break;\n    case 'text/plain':\n    case 'text/xml':\n    case 'text/x-component':\n    case 'application/javascript':\n    case 'application/json':\n    case 'application/manifest+json':\n    case 'application/vnd.api+json':\n    case 'application/xml':\n    case 'application/xhtml+xml':\n    case 'application/rss+xml':\n    case 'application/atom+xml':\n    case 'application/vnd.ms-fontobject':\n    case 'application/x-font-ttf':\n    case 'application/x-font-opentype':\n    case 'application/x-font-truetype':\n    case 'image/svg+xml':\n    case 'image/x-icon':\n    case 'image/vnd.microsoft.icon':\n    case 'font/ttf':\n    case 'font/eot':\n    case 'font/otf':\n    case 'font/opentype':\n      // Use the average savings in HTTPArchive.\n      estimatedSavings = Math.round(originalSize * 0.5);\n      break;\n    default:  // Any other MIME types are likely already compressed.\n  }\n  // Check if the estimated savings are greater than the byte ignore threshold.\n  // Note that the estimated gzip savings are always more than 10%, so there is\n  // no percent threshold.\n  return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;\n}\n\nfunction finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {\n  let hasFailure = false;\n  if (partialModel.data) {\n    hasFailure = !partialModel.data.checklist.usesCompression.value ||\n        !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;\n  }\n\n  return {\n    insightKey: InsightKeys.DOCUMENT_LATENCY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: hasFailure ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DocumentLatencyInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const documentRequest = parsedTrace.NetworkRequests.byId.get(context.navigationId);\n  if (!documentRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const serverResponseTime = getServerResponseTime(documentRequest, context);\n  if (serverResponseTime === null) {\n    throw new Error('missing document request timing');\n  }\n\n  const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;\n\n  let overallSavingsMs = 0;\n  if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {\n    overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);\n  }\n\n  const redirectDuration = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);\n  overallSavingsMs += redirectDuration;\n\n  const metricSavings = {\n    FCP: overallSavingsMs as Types.Timing.Milli,\n    LCP: overallSavingsMs as Types.Timing.Milli,\n  };\n\n  const uncompressedResponseBytes = getCompressionSavings(documentRequest);\n\n  const noRedirects = redirectDuration === 0;\n  const serverResponseIsFast = !serverResponseTooSlow;\n  const usesCompression = uncompressedResponseBytes === 0;\n\n  return finalize({\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      redirectDuration: Types.Timing.Milli(redirectDuration),\n      uncompressedResponseBytes,\n      documentRequest,\n      checklist: {\n        noRedirects: {\n          label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {\n            PH1: documentRequest.args.data.redirects.length,\n            PH2: i18n.TimeUtilities.millisToString(redirectDuration),\n          }),\n          value: noRedirects\n        },\n        serverResponseIsFast: {\n          label: serverResponseIsFast ?\n              i18nString(\n                  UIStrings.passingServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}) :\n              i18nString(\n                  UIStrings.failedServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}),\n          value: serverResponseIsFast\n        },\n        usesCompression: {\n          label: usesCompression ? i18nString(UIStrings.passingTextCompression) :\n                                   i18nString(UIStrings.failedTextCompression),\n          value: usesCompression\n        },\n      },\n    },\n    metricSavings,\n    wastedBytes: uncompressedResponseBytes,\n  });\n}\n"]}
+{"version":3,"file":"DocumentLatency.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DocumentLatency.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 * as Types from '../types/types.js';\n\nimport {isRequestCompressed} from './Common.js';\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Title of an insight that provides a breakdown for how long it took to download the main document.\n   */\n  title: 'Document request latency',\n  /**\n   * @description Description of an insight that provides a breakdown for how long it took to download the main document.\n   */\n  description:\n      'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',\n  /**\n   * @description Text to tell the user that the document request does not have redirects.\n   */\n  passingRedirects: 'Avoids redirects',\n  /**\n   * @description Text to tell the user that the document request had redirects.\n   * @example {3} PH1\n   * @example {1000 ms} PH2\n   */\n  failedRedirects: 'Had redirects ({PH1} redirects, +{PH2})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n   * @example {600 ms} PH1\n   */\n  passingServerResponseTime: 'Server responds quickly (observed {PH1})',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.\n   * @example {601 ms} PH1\n   */\n  failedServerResponseTime: 'Server responded slowly (observed {PH1})',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was applied.\n   */\n  passingTextCompression: 'Applies text compression',\n  /**\n   * @description Text to tell the user that text compression (like gzip) was not applied.\n   */\n  failedTextCompression: 'No compression applied',\n  /**\n   * @description Text for a label describing a network request event as having redirects.\n   */\n  redirectsLabel: 'Redirects',\n  /**\n   * @description Text for a label describing a network request event as taking too long to start delivery by the server.\n   */\n  serverResponseTimeLabel: 'Server response time',\n  /**\n   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.\n   */\n  uncompressedDownload: 'Uncompressed download',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.\n// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.\nconst TOO_SLOW_THRESHOLD_MS = 600;\nconst TARGET_MS = 100;\n\n// Threshold for compression savings.\nconst IGNORE_THRESHOLD_IN_BYTES = 1400;\n\nexport function isDocumentLatency(x: InsightModel): x is DocumentLatencyInsightModel {\n  return x.insightKey === 'DocumentLatency';\n}\n\nexport type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n  data?: {\n    serverResponseTime: Types.Timing.Milli,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n  },\n}>;\n\nfunction getServerResponseTime(\n    request: Types.Events.SyntheticNetworkRequest, context: InsightSetContext): Types.Timing.Milli|null {\n  // Prefer the value as given by the Lantern provider.\n  // For PSI, Lighthouse uses this to set a better value for the server response\n  // time. For technical reasons, in Lightrider we do not have `sendEnd` timing\n  // values. See Lighthouse's `asLanternNetworkRequest` function for more.\n  const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);\n  if (lanternRequest?.serverResponseTime !== undefined) {\n    return lanternRequest.serverResponseTime as Types.Timing.Milli;\n  }\n\n  const timing = request.args.data.timing;\n  if (!timing) {\n    return null;\n  }\n\n  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.waiting);\n  return Math.round(ms) as Types.Timing.Milli;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n  const isCompressed = isRequestCompressed(request);\n  if (isCompressed) {\n    return 0;\n  }\n\n  // We don't know how many bytes this asset used on the network, but we can guess it was\n  // roughly the size of the content gzipped.\n  // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples\n  // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers\n  // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress\n  const originalSize = request.args.data.decodedBodyLength;\n  let estimatedSavings = 0;\n  switch (request.args.data.mimeType) {\n    case 'text/css':\n      // Stylesheets tend to compress extremely well.\n      estimatedSavings = Math.round(originalSize * 0.8);\n      break;\n    case 'text/html':\n    case 'text/javascript':\n      // Scripts and HTML compress fairly well too.\n      estimatedSavings = Math.round(originalSize * 0.67);\n      break;\n    case 'text/plain':\n    case 'text/xml':\n    case 'text/x-component':\n    case 'application/javascript':\n    case 'application/json':\n    case 'application/manifest+json':\n    case 'application/vnd.api+json':\n    case 'application/xml':\n    case 'application/xhtml+xml':\n    case 'application/rss+xml':\n    case 'application/atom+xml':\n    case 'application/vnd.ms-fontobject':\n    case 'application/x-font-ttf':\n    case 'application/x-font-opentype':\n    case 'application/x-font-truetype':\n    case 'image/svg+xml':\n    case 'image/x-icon':\n    case 'image/vnd.microsoft.icon':\n    case 'font/ttf':\n    case 'font/eot':\n    case 'font/otf':\n    case 'font/opentype':\n      // Use the average savings in HTTPArchive.\n      estimatedSavings = Math.round(originalSize * 0.5);\n      break;\n    default:  // Any other MIME types are likely already compressed.\n  }\n  // Check if the estimated savings are greater than the byte ignore threshold.\n  // Note that the estimated gzip savings are always more than 10%, so there is\n  // no percent threshold.\n  return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;\n}\n\nfunction finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {\n  let hasFailure = false;\n  if (partialModel.data) {\n    hasFailure = !partialModel.data.checklist.usesCompression.value ||\n        !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;\n  }\n\n  return {\n    insightKey: InsightKeys.DOCUMENT_LATENCY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    state: hasFailure ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DocumentLatencyInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const documentRequest = parsedTrace.NetworkRequests.byId.get(context.navigationId);\n  if (!documentRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const serverResponseTime = getServerResponseTime(documentRequest, context);\n  if (serverResponseTime === null) {\n    throw new Error('missing document request timing');\n  }\n\n  const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;\n\n  let overallSavingsMs = 0;\n  if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {\n    overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);\n  }\n\n  const redirectDuration = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);\n  overallSavingsMs += redirectDuration;\n\n  const metricSavings = {\n    FCP: overallSavingsMs as Types.Timing.Milli,\n    LCP: overallSavingsMs as Types.Timing.Milli,\n  };\n\n  const uncompressedResponseBytes = getCompressionSavings(documentRequest);\n\n  const noRedirects = redirectDuration === 0;\n  const serverResponseIsFast = !serverResponseTooSlow;\n  const usesCompression = uncompressedResponseBytes === 0;\n\n  return finalize({\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      redirectDuration: Types.Timing.Milli(redirectDuration),\n      uncompressedResponseBytes,\n      documentRequest,\n      checklist: {\n        noRedirects: {\n          label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {\n            PH1: documentRequest.args.data.redirects.length,\n            PH2: i18n.TimeUtilities.millisToString(redirectDuration),\n          }),\n          value: noRedirects\n        },\n        serverResponseIsFast: {\n          label: serverResponseIsFast ?\n              i18nString(\n                  UIStrings.passingServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}) :\n              i18nString(\n                  UIStrings.failedServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}),\n          value: serverResponseIsFast\n        },\n        usesCompression: {\n          label: usesCompression ? i18nString(UIStrings.passingTextCompression) :\n                                   i18nString(UIStrings.failedTextCompression),\n          value: usesCompression\n        },\n      },\n    },\n    metricSavings,\n    wastedBytes: uncompressedResponseBytes,\n  });\n}\n\nexport function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[] {\n  if (!model.data?.documentRequest) {\n    return [];\n  }\n\n  const overlays: Types.Overlays.Overlay[] = [];\n  const event = model.data.documentRequest;\n  const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);\n\n  const sections = [];\n  if (model.data.redirectDuration) {\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        event.ts,\n        (event.ts + redirectDurationMicro) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});\n    overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n  }\n  if (!model.data.checklist.serverResponseIsFast.value) {\n    const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);\n    // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.\n    const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);\n    const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        sendEndMicro,\n        (sendEndMicro + serverResponseTimeMicro) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});\n  }\n  if (model.data.uncompressedResponseBytes) {\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        event.args.data.syntheticData.downloadStart,\n        (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as Types.Timing.Micro,\n    );\n    sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});\n    overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n  }\n\n  if (sections.length) {\n    overlays.push({\n      type: 'TIMESPAN_BREAKDOWN',\n      sections,\n      entry: model.data.documentRequest,\n      // Always render below because the document request is guaranteed to be\n      // the first request in the network track.\n      renderLocation: 'BELOW_EVENT',\n    });\n  }\n  overlays.push({\n    type: 'ENTRY_SELECTED',\n    entry: model.data.documentRequest,\n  });\n\n  return overlays;\n}\n"]}

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

@@ -1,5 +1,6 @@
 import * as Extras from '../extras/extras.js';
 import type * 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: {
     /**
@@ -23,4 +24,6 @@ export type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {
     scripts: Handlers.ModelHandlers.Scripts.Script[];
     mainDocumentUrl: string;
 }>;
+export declare function isDuplicatedJavaScript(model: InsightModel): model is DuplicatedJavaScriptInsightModel;
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicatedJavaScriptInsightModel;
+export declare function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[];

package/models/trace/insights/DuplicatedJavaScript.js

@@ -35,11 +35,11 @@ function finalize(partialModel) {
         ...partialModel,
     };
 }
+export function isDuplicatedJavaScript(model) {
+    return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;
+}
 export function generateInsight(parsedTrace, context) {
     const scripts = parsedTrace.Scripts.scripts.filter(script => {
-        if (!context.navigation) {
-            return false;
-        }
         if (script.frame !== context.frameId) {
             return false;
         }
@@ -78,4 +78,13 @@ export function generateInsight(parsedTrace, context) {
         wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),
     });
 }
+export function createOverlays(model) {
+    return model.scriptsWithDuplication.map(script => script.request).filter(e => !!e).map(request => {
+        return {
+            type: 'ENTRY_OUTLINE',
+            entry: request,
+            outlineReason: 'ERROR',
+        };
+    });
+}
 //# 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":"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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 compressionRatios = new Map<string, number>();\n  for (const script of scripts) {\n    if (script.request) {\n      compressionRatios.set(script.request.args.data.requestId, estimateCompressionRatioForScript(script));\n    }\n  }\n\n  const {duplication, duplicationGroupedByNodeModules} =\n      Extras.ScriptDuplication.computeScriptDuplication({scripts}, compressionRatios);\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 transferSize = sourceData.attributedSize;\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    wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\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';\nimport type * as Types from '../types/types.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 isDuplicatedJavaScript(model: InsightModel): model is DuplicatedJavaScriptInsightModel {\n  return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DuplicatedJavaScriptInsightModel {\n  const scripts = parsedTrace.Scripts.scripts.filter(script => {\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 compressionRatios = new Map<string, number>();\n  for (const script of scripts) {\n    if (script.request) {\n      compressionRatios.set(script.request.args.data.requestId, estimateCompressionRatioForScript(script));\n    }\n  }\n\n  const {duplication, duplicationGroupedByNodeModules} =\n      Extras.ScriptDuplication.computeScriptDuplication({scripts}, compressionRatios);\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 transferSize = sourceData.attributedSize;\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    wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\n  });\n}\n\nexport function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[] {\n  return model.scriptsWithDuplication.map(script => script.request).filter(e => !!e).map(request => {\n    return {\n      type: 'ENTRY_OUTLINE',\n      entry: request,\n      outlineReason: 'ERROR',\n    };\n  });\n}\n"]}

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

@@ -25,3 +25,4 @@ export type FontDisplayInsightModel = InsightModel<typeof UIStrings, {
     fonts: RemoteFont[];
 }>;
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): FontDisplayInsightModel;
+export declare function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[];

package/models/trace/insights/FontDisplay.js

@@ -69,4 +69,11 @@ export function generateInsight(parsedTrace, context) {
         metricSavings: { FCP: savings },
     });
 }
+export function createOverlays(model) {
+    return model.fonts.map(font => ({
+        type: 'ENTRY_OUTLINE',
+        entry: font.request,
+        outlineReason: font.wastedTime ? 'ERROR' : 'INFO',
+    }));
+}
 //# sourceMappingURL=FontDisplay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.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 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  /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */\n  title: 'Font display',\n  /**\n   * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.\n   */\n  description:\n      'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',\n  /** Column for a font loaded by the page to render text. */\n  fontColumn: 'Font',\n  /** Column for the amount of time wasted. */\n  wastedTimeColumn: 'Wasted time',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface RemoteFont {\n  name?: string;\n  request: Types.Events.SyntheticNetworkRequest;\n  display: string;\n  wastedTime: Types.Timing.Milli;\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n  fonts: RemoteFont[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {\n  return {\n    insightKey: InsightKeys.FONT_DISPLAY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): FontDisplayInsightModel {\n  const fonts: RemoteFont[] = [];\n  for (const remoteFont of parsedTrace.LayoutShifts.remoteFonts) {\n    const event = remoteFont.beginRemoteFontLoadEvent;\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n\n    const requestId = `${event.pid}.${event.args.id}`;\n    const request = parsedTrace.NetworkRequests.byId.get(requestId);\n    if (!request) {\n      continue;\n    }\n\n    if (!/^(block|fallback|auto)$/.test(remoteFont.display)) {\n      continue;\n    }\n\n    const wastedTimeMicro =\n        Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);\n    // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.\n    let wastedTime =\n        Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n    if (wastedTime === 0) {\n      continue;\n    }\n\n    // All browsers wait for no more than 3s.\n    wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n\n    fonts.push({\n      name: remoteFont.name,\n      request,\n      display: remoteFont.display,\n      wastedTime,\n    });\n  }\n\n  fonts.sort((a, b) => b.wastedTime - a.wastedTime);\n\n  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.Milli;\n\n  return finalize({\n    relatedEvents: fonts.map(f => f.request),\n    fonts,\n    metricSavings: {FCP: savings},\n  });\n}\n"]}
+{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.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 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  /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */\n  title: 'Font display',\n  /**\n   * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.\n   */\n  description:\n      'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',\n  /** Column for a font loaded by the page to render text. */\n  fontColumn: 'Font',\n  /** Column for the amount of time wasted. */\n  wastedTimeColumn: 'Wasted time',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface RemoteFont {\n  name?: string;\n  request: Types.Events.SyntheticNetworkRequest;\n  display: string;\n  wastedTime: Types.Timing.Milli;\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n  fonts: RemoteFont[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {\n  return {\n    insightKey: InsightKeys.FONT_DISPLAY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): FontDisplayInsightModel {\n  const fonts: RemoteFont[] = [];\n  for (const remoteFont of parsedTrace.LayoutShifts.remoteFonts) {\n    const event = remoteFont.beginRemoteFontLoadEvent;\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n\n    const requestId = `${event.pid}.${event.args.id}`;\n    const request = parsedTrace.NetworkRequests.byId.get(requestId);\n    if (!request) {\n      continue;\n    }\n\n    if (!/^(block|fallback|auto)$/.test(remoteFont.display)) {\n      continue;\n    }\n\n    const wastedTimeMicro =\n        Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);\n    // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.\n    let wastedTime =\n        Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n    if (wastedTime === 0) {\n      continue;\n    }\n\n    // All browsers wait for no more than 3s.\n    wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n\n    fonts.push({\n      name: remoteFont.name,\n      request,\n      display: remoteFont.display,\n      wastedTime,\n    });\n  }\n\n  fonts.sort((a, b) => b.wastedTime - a.wastedTime);\n\n  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.Milli;\n\n  return finalize({\n    relatedEvents: fonts.map(f => f.request),\n    fonts,\n    metricSavings: {FCP: savings},\n  });\n}\n\nexport function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[] {\n  return model.fonts.map(font => ({\n                           type: 'ENTRY_OUTLINE',\n                           entry: font.request,\n                           outlineReason: font.wastedTime ? 'ERROR' : 'INFO',\n                         }));\n}\n"]}

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

@@ -5,7 +5,7 @@ import * as Types from '../types/types.js';
 import { type InsightModel, type InsightSetContext } from './types.js';
 export declare const UIStrings: {
     /**
-     *@description Title of an insight that provides details about Forced reflow.
+     * @description Title of an insight that provides details about Forced reflow.
      */
     readonly title: "Forced reflow";
     /**
@@ -13,11 +13,11 @@ export declare const UIStrings: {
      */
     readonly description: "A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.";
     /**
-     *@description Title of a list to provide related stack trace data
+     * @description Title of a list to provide related stack trace data
      */
     readonly relatedStackTrace: "Stack trace";
     /**
-     *@description Text to describe the top time-consuming function call
+     * @description Text to describe the top time-consuming function call
      */
     readonly topTimeConsumingFunctionCall: "Top function call";
     /**
@@ -52,3 +52,5 @@ export interface ForcedReflowAggregatedData {
     topLevelFunctionCallEvents: Types.Events.Event[];
 }
 export declare function generateInsight(traceParsedData: Handlers.Types.ParsedTrace, context: InsightSetContext): ForcedReflowInsightModel;
+export declare function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[];
+export declare function createOverlayForEvents(events: Types.Events.Event[], outlineReason?: 'ERROR' | 'INFO'): Types.Overlays.Overlay[];

package/models/trace/insights/ForcedReflow.js

@@ -9,7 +9,7 @@ import * as Types from '../types/types.js';
 import { InsightCategory, InsightKeys, } from './types.js';
 export const UIStrings = {
     /**
-     *@description Title of an insight that provides details about Forced reflow.
+     * @description Title of an insight that provides details about Forced reflow.
      */
     title: 'Forced reflow',
     /**
@@ -17,11 +17,11 @@ export const UIStrings = {
      */
     description: 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',
     /**
-     *@description Title of a list to provide related stack trace data
+     * @description Title of a list to provide related stack trace data
      */
     relatedStackTrace: 'Stack trace',
     /**
-     *@description Text to describe the top time-consuming function call
+     * @description Text to describe the top time-consuming function call
      */
     topTimeConsumingFunctionCall: 'Top function call',
     /**
@@ -138,4 +138,21 @@ export function generateInsight(traceParsedData, context) {
         aggregatedBottomUpData: [...bottomUpDataMap.values()],
     });
 }
+export function createOverlays(model) {
+    if (!model.topLevelFunctionCallData) {
+        return [];
+    }
+    const allBottomUpEvents = [...model.aggregatedBottomUpData.values().flatMap(data => data.relatedEvents)];
+    return [
+        ...createOverlayForEvents(model.topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),
+        ...createOverlayForEvents(allBottomUpEvents),
+    ];
+}
+export function createOverlayForEvents(events, outlineReason = 'ERROR') {
+    return events.map(e => ({
+        type: 'ENTRY_OUTLINE',
+        entry: e,
+        outlineReason,
+    }));
+}
 //# sourceMappingURL=ForcedReflow.js.map

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      'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible 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"]}
+{"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      'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible 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\nexport function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[] {\n  if (!model.topLevelFunctionCallData) {\n    return [];\n  }\n\n  const allBottomUpEvents = [...model.aggregatedBottomUpData.values().flatMap(data => data.relatedEvents)];\n  return [\n    ...createOverlayForEvents(model.topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),\n    ...createOverlayForEvents(allBottomUpEvents),\n  ];\n}\n\nexport function createOverlayForEvents(\n    events: Types.Events.Event[], outlineReason: 'ERROR'|'INFO' = 'ERROR'): Types.Overlays.Overlay[] {\n  return events.map(e => ({\n                      type: 'ENTRY_OUTLINE',\n                      entry: e,\n                      outlineReason,\n                    }));\n}\n"]}

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

@@ -1,5 +1,6 @@
 import type * as Handlers from '../handlers/handlers.js';
 import type { SyntheticInteractionPair } from '../types/TraceEvents.js';
+import type * as Types from '../types/types.js';
 import { type InsightModel, type InsightSetContext } from './types.js';
 export declare const UIStrings: {
     /**
@@ -11,23 +12,23 @@ export declare const UIStrings: {
      */
     readonly title: "INP breakdown";
     /**
-     *@description Label used for the subpart/component/stage/section of a larger duration.
+     * @description Label used for the subpart/component/stage/section of a larger duration.
      */
     readonly subpart: "Subpart";
     /**
-     *@description Label used for a time duration.
+     * @description Label used for a time duration.
      */
     readonly duration: "Duration";
     /**
-     *@description Text shown next to the interaction event's input delay time in the detail view.
+     * @description Text shown next to the interaction event's input delay time in the detail view.
      */
     readonly inputDelay: "Input delay";
     /**
-     *@description Text shown next to the interaction event's thread processing duration in the detail view.
+     * @description Text shown next to the interaction event's thread processing duration in the detail view.
      */
     readonly processingDuration: "Processing duration";
     /**
-     *@description Text shown next to the interaction event's presentation delay time in the detail view.
+     * @description Text shown next to the interaction event's presentation delay time in the detail view.
      */
     readonly presentationDelay: "Presentation delay";
     /**
@@ -42,3 +43,8 @@ export type INPBreakdownInsightModel = InsightModel<typeof UIStrings, {
 }>;
 export declare function isINPBreakdown(insight: InsightModel): insight is INPBreakdownInsightModel;
 export declare function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): INPBreakdownInsightModel;
+/**
+ * If `subpart` is -1, then all subparts are included. Otherwise it's just that index.
+ **/
+export declare function createOverlaysForSubpart(event: Types.Events.SyntheticInteractionPair, subpartIndex?: number): Types.Overlays.Overlay[];
+export declare function createOverlays(model: INPBreakdownInsightModel): Types.Overlays.Overlay[];