@paulirish/trace_engine 0.0.44 → 0.0.45

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

@@ -4,47 +4,47 @@ export declare const UIStrings: {
     /**
      *@description Title of an insight that provides a breakdown for how long it took to download the main document.
      */
-    title: string;
+    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: string;
+    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.";
     /**
      * @description Text to tell the user that the document request does not have redirects.
      */
-    passingRedirects: string;
+    readonly passingRedirects: "Avoids redirects";
     /**
      * @description Text to tell the user that the document request had redirects.
      */
-    failedRedirects: string;
+    readonly failedRedirects: "Had redirects";
     /**
      * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.
      */
-    passingServerResponseTime: string;
+    readonly passingServerResponseTime: "Server responds quickly";
     /**
      * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.
      */
-    failedServerResponseTime: string;
+    readonly failedServerResponseTime: "Server responded slowly";
     /**
      * @description Text to tell the user that text compression (like gzip) was applied.
      */
-    passingTextCompression: string;
+    readonly passingTextCompression: "Applies text compression";
     /**
      * @description Text to tell the user that text compression (like gzip) was not applied.
      */
-    failedTextCompression: string;
+    readonly failedTextCompression: "No compression applied";
     /**
      * @description Text for a label describing a network request event as having redirects.
      */
-    redirectsLabel: string;
+    readonly redirectsLabel: "Redirects";
     /**
      * @description Text for a label describing a network request event as taking too long to start delivery by the server.
      */
-    serverResponseTimeLabel: string;
+    readonly serverResponseTimeLabel: "Server response time";
     /**
      * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
      */
-    uncompressedDownload: string;
+    readonly uncompressedDownload: "Uncompressed download";
 };
 export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
 export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {

package/models/trace/insights/DocumentLatency.js

@@ -138,11 +138,12 @@ function finalize(partialModel) {
             !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;
     }
     return {
+        insightKey: "DocumentLatency" /* InsightKeys.DOCUMENT_LATENCY */,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.ALL,
-        shouldShow: hasFailure,
+        state: hasFailure ? 'fail' : 'pass',
         ...partialModel,
     };
 }

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":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAEL,eAAe,EAGf,cAAc,EAGf,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,0BAA0B;IACjC;;OAEG;IACH,WAAW,EACP,8JAA8J;IAClK;;OAEG;IACH,gBAAgB,EAAE,kBAAkB;IACpC;;OAEG;IACH,eAAe,EAAE,eAAe;IAChC;;OAEG;IACH,yBAAyB,EAAE,yBAAyB;IACpD;;OAEG;IACH,wBAAwB,EAAE,yBAAyB;IACnD;;OAEG;IACH,sBAAsB,EAAE,0BAA0B;IAClD;;OAEG;IACH,qBAAqB,EAAE,wBAAwB;IAC/C;;OAEG;IACH,cAAc,EAAE,WAAW;IAC3B;;OAEG;IACH,uBAAuB,EAAE,sBAAsB;IAC/C;;OAEG;IACH,oBAAoB,EAAE,uBAAuB;CAC9C,CAAC;AAEF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,0CAA0C,EAAE,SAAS,CAAC,CAAC;AAChG,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAE7E,wGAAwG;AACxG,4GAA4G;AAC5G,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAClC,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,qCAAqC;AACrC,MAAM,yBAAyB,GAAG,IAAI,CAAC;AAYvC,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,qBAAqB,CAAC,OAA6C;IAC1E,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACxC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAChF,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAuB,CAAC;AAC9C,CAAC;AAED,SAAS,qBAAqB,CAAC,OAA6C;IAC1E,yDAAyD;IACzD,6EAA6E;IAC7E,MAAM,QAAQ,GAAG;QACf,qBAAqB;QACrB,oCAAoC;KACrC,CAAC;IACF,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CACvD,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACnG,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,uFAAuF;IACvF,2CAA2C;IAC3C,+JAA+J;IAC/J,uGAAuG;IACvG,gGAAgG;IAChG,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACzD,IAAI,gBAAgB,GAAG,CAAC,CAAC;IACzB,QAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnC,KAAK,UAAU;YACb,+CAA+C;YAC/C,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC;YAClD,MAAM;QACR,KAAK,WAAW,CAAC;QACjB,KAAK,iBAAiB;YACpB,6CAA6C;YAC7C,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;YACnD,MAAM;QACR,KAAK,YAAY,CAAC;QAClB,KAAK,UAAU,CAAC;QAChB,KAAK,kBAAkB,CAAC;QACxB,KAAK,wBAAwB,CAAC;QAC9B,KAAK,kBAAkB,CAAC;QACxB,KAAK,2BAA2B,CAAC;QACjC,KAAK,0BAA0B,CAAC;QAChC,KAAK,iBAAiB,CAAC;QACvB,KAAK,uBAAuB,CAAC;QAC7B,KAAK,qBAAqB,CAAC;QAC3B,KAAK,sBAAsB,CAAC;QAC5B,KAAK,+BAA+B,CAAC;QACrC,KAAK,wBAAwB,CAAC;QAC9B,KAAK,6BAA6B,CAAC;QACnC,KAAK,6BAA6B,CAAC;QACnC,KAAK,eAAe,CAAC;QACrB,KAAK,cAAc,CAAC;QACpB,KAAK,0BAA0B,CAAC;QAChC,KAAK,UAAU,CAAC;QAChB,KAAK,UAAU,CAAC;QAChB,KAAK,UAAU,CAAC;QAChB,KAAK,eAAe;YAClB,0CAA0C;YAC1C,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC;YAClD,MAAM;QACR,QAAQ,CAAE,sDAAsD;IAClE,CAAC;IACD,6EAA6E;IAC7E,6EAA6E;IAC7E,wBAAwB;IACxB,OAAO,gBAAgB,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;AAC7E,CAAC;AAED,SAAS,QAAQ,CAAC,YAA8D;IAC9E,IAAI,UAAU,GAAG,KAAK,CAAC;IACvB,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC;QACtB,UAAU,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK;YAC3D,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;IAChH,CAAC;IAED,OAAO;QACL,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,UAAU,EAAE,UAAU;QACtB,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAsC,EAAE,OAA0B;IACpE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACxB,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,eAAe,GACjB,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;IACrG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,QAAQ,CAAC,EAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAC,CAAC,CAAC;IACpE,CAAC;IAED,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IAClE,IAAI,kBAAkB,KAAK,IAAI,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,qBAAqB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;IAEzE,IAAI,gBAAgB,GAAG,CAAC,CAAC;IACzB,IAAI,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;QAC/C,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,kBAAkB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxG,gBAAgB,IAAI,gBAAgB,CAAC;IAErC,MAAM,aAAa,GAAG;QACpB,GAAG,EAAE,gBAAsC;QAC3C,GAAG,EAAE,gBAAsC;KAC5C,CAAC;IAEF,MAAM,yBAAyB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IAEzE,MAAM,WAAW,GAAG,gBAAgB,KAAK,CAAC,CAAC;IAC3C,MAAM,oBAAoB,GAAG,CAAC,qBAAqB,CAAC;IACpD,MAAM,eAAe,GAAG,yBAAyB,KAAK,CAAC,CAAC;IAExD,OAAO,QAAQ,CAAC;QACd,aAAa,EAAE,CAAC,eAAe,CAAC;QAChC,IAAI,EAAE;YACJ,kBAAkB;YAClB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;YACtD,yBAAyB;YACzB,eAAe;YACf,SAAS,EAAE;gBACT,WAAW,EAAE;oBACX,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,eAAe,CAAC;oBACnG,KAAK,EAAE,WAAW;iBACnB;gBACD,oBAAoB,EAAE;oBACpB,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC;wBACjD,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC;oBAC5E,KAAK,EAAE,oBAAoB;iBAC5B;gBACD,eAAe,EAAE;oBACf,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC,CAAC;wBAC9C,UAAU,CAAC,SAAS,CAAC,qBAAqB,CAAC;oBACpE,KAAK,EAAE,eAAe;iBACvB;aACF;SACF;QACD,aAAa;KACd,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 * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type Checklist,\n  InsightCategory,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n  type RequiredData\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   */\n  failedRedirects: 'Had redirects',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n   */\n  passingServerResponseTime: 'Server responds quickly',\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   */\n  failedServerResponseTime: 'Server responded slowly',\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};\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 type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n  data?: {\n    serverResponseTime: Types.Timing.Milli,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n                   checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n  },\n}>;\n\nexport function deps(): ['Meta', 'NetworkRequests'] {\n  return ['Meta', 'NetworkRequests'];\n}\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {\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  // Check from headers if compression was already applied.\n  // Older devtools logs are lower case, while modern logs are Cased-Like-This.\n  const patterns = [\n    /^content-encoding$/i,\n    /^x-content-encoding-over-network$/i,\n  ];\n  const compressionTypes = ['gzip', 'br', 'deflate', 'zstd'];\n  const isCompressed = request.args.data.responseHeaders.some(\n      header => patterns.some(p => header.name.match(p)) && compressionTypes.includes(header.value));\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    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    shouldShow: hasFailure,\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): DocumentLatencyInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const documentRequest =\n      parsedTrace.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!documentRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const serverResponseTime = getServerResponseTime(documentRequest);\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          value: noRedirects\n        },\n        serverResponseIsFast: {\n          label: serverResponseIsFast ? i18nString(UIStrings.passingServerResponseTime) :\n                                        i18nString(UIStrings.failedServerResponseTime),\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  });\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 * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n  type RequiredData\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   */\n  failedRedirects: 'Had redirects',\n  /**\n   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n   */\n  passingServerResponseTime: 'Server responds quickly',\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   */\n  failedServerResponseTime: 'Server responded slowly',\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 type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n  data?: {\n    serverResponseTime: Types.Timing.Milli,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n                   checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n  },\n}>;\n\nexport function deps(): ['Meta', 'NetworkRequests'] {\n  return ['Meta', 'NetworkRequests'];\n}\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {\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  // Check from headers if compression was already applied.\n  // Older devtools logs are lower case, while modern logs are Cased-Like-This.\n  const patterns = [\n    /^content-encoding$/i,\n    /^x-content-encoding-over-network$/i,\n  ];\n  const compressionTypes = ['gzip', 'br', 'deflate', 'zstd'];\n  const isCompressed = request.args.data.responseHeaders.some(\n      header => patterns.some(p => header.name.match(p)) && compressionTypes.includes(header.value));\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: RequiredData<typeof deps>, context: InsightSetContext): DocumentLatencyInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const documentRequest =\n      parsedTrace.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!documentRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const serverResponseTime = getServerResponseTime(documentRequest);\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          value: noRedirects\n        },\n        serverResponseIsFast: {\n          label: serverResponseIsFast ? i18nString(UIStrings.passingServerResponseTime) :\n                                        i18nString(UIStrings.failedServerResponseTime),\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  });\n}\n"]}

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

@@ -0,0 +1,18 @@
+import * as Extras from '../extras/extras.js';
+import { type InsightModel, type InsightSetContext, type RequiredData } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    readonly title: "Duplicate JavaScript";
+    /**
+     * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    readonly description: "Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.";
+};
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
+export type DuplicateJavaScriptInsightModel = InsightModel<typeof UIStrings, {
+    duplication: Extras.ScriptDuplication.ScriptDuplication;
+}>;
+export declare function deps(): ['Scripts', 'NetworkRequests'];
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): DuplicateJavaScriptInsightModel;

package/models/trace/insights/DuplicateJavaScript.js

@@ -0,0 +1,49 @@
+// 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 Extras from '../extras/extras.js';
+import * as Helpers from '../helpers/helpers.js';
+import { InsightCategory } from './types.js';
+export const UIStrings = {
+    /**
+     * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    title: 'Duplicate JavaScript',
+    /**
+     * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    description: 'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',
+};
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicateJavaScript.ts', UIStrings);
+export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
+export function deps() {
+    return ['Scripts', 'NetworkRequests'];
+}
+function finalize(partialModel) {
+    return {
+        insightKey: "DuplicateJavaScript" /* InsightKeys.DUPLICATE_JAVASCRIPT */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        category: InsightCategory.LCP,
+        state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',
+        // TODO(cjamcl): script network events.
+        // relatedEvents: [],
+        ...partialModel,
+    };
+}
+export function generateInsight(parsedTrace, context) {
+    const scriptEntries = [...parsedTrace.Scripts.scripts].filter(([_, script]) => {
+        if (!context.navigation) {
+            return false;
+        }
+        if (script.frame !== context.frameId) {
+            return false;
+        }
+        return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);
+    });
+    const duplication = Extras.ScriptDuplication.computeScriptDuplication({ scripts: new Map(scriptEntries) });
+    return finalize({ duplication });
+}
+//# sourceMappingURL=DuplicateJavaScript.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DuplicateJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicateJavaScript.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,eAAe,EAMhB,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,sBAAsB;IAC7B;;OAEG;IACH,WAAW,EACP,mHAAmH;CAC/G,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,8CAA8C,EAAE,SAAS,CAAC,CAAC;AACpG,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAM7E,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACxC,CAAC;AAED,SAAS,QAAQ,CAAC,YAAkE;IAClF,OAAO;QACL,UAAU,8DAAkC;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,uCAAuC;QACvC,qBAAqB;QACrB,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAsC,EAAE,OAA0B;IACpE,MAAM,aAAa,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE;QAC5E,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,EAAE,IAAI,GAAG,CAAC,aAAa,CAAC,EAAC,CAAC,CAAC;IACzG,OAAO,QAAQ,CAAC,EAAC,WAAW,EAAC,CAAC,CAAC;AACjC,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 * as Helpers from '../helpers/helpers.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n  type RequiredData\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: 'Duplicate 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} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicateJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type DuplicateJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n  duplication: Extras.ScriptDuplication.ScriptDuplication,\n}>;\n\nexport function deps(): ['Scripts', 'NetworkRequests'] {\n  return ['Scripts', 'NetworkRequests'];\n}\n\nfunction finalize(partialModel: PartialInsightModel<DuplicateJavaScriptInsightModel>): DuplicateJavaScriptInsightModel {\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    // TODO(cjamcl): script network events.\n    // relatedEvents: [],\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): DuplicateJavaScriptInsightModel {\n  const scriptEntries = [...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: new Map(scriptEntries)});\n  return finalize({duplication});\n}\n"]}

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

@@ -3,15 +3,15 @@ import * as Types from '../types/types.js';
 import { type InsightModel, type InsightSetContext, type RequiredData } from './types.js';
 export declare const UIStrings: {
     /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
-    title: string;
+    readonly title: "Font display";
     /**
      * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
      */
-    description: string;
+    readonly description: "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).";
     /** Column for a font loaded by the page to render text. */
-    fontColumn: string;
+    readonly fontColumn: "Font";
     /** Column for the amount of time wasted. */
-    wastedTimeColumn: string;
+    readonly wastedTimeColumn: "Wasted time";
 };
 export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Platform.UIString.LocalizedString;
 export declare function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'];

package/models/trace/insights/FontDisplay.js

@@ -25,11 +25,12 @@ export function deps() {
 }
 function finalize(partialModel) {
     return {
+        insightKey: "FontDisplay" /* InsightKeys.FONT_DISPLAY */,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.INP,
-        shouldShow: Boolean(partialModel.fonts.find(font => font.wastedTime > 0)),
+        state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',
         ...partialModel,
     };
 }

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":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,oCAAoC,CAAC;AAC/D,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EACL,eAAe,EAKhB,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,oIAAoI;IACpI,KAAK,EAAE,cAAc;IACrB;;OAEG;IACH,WAAW,EACP,6RAA6R;IACjS,2DAA2D;IAC3D,UAAU,EAAE,MAAM;IAClB,4CAA4C;IAC5C,gBAAgB,EAAE,aAAa;CAChC,CAAC;AAEF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,sCAAsC,EAAE,SAAS,CAAC,CAAC;AAC5F,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAE7E,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC;AACrD,CAAC;AAUD,SAAS,QAAQ,CAAC,YAA0D;IAC1E,OAAO;QACL,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,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QACzE,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAsC,EAAE,OAA0B;IACpE,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,YAAY,CAAC,yBAAyB,EAAE,CAAC;QACvE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3D,SAAS;QACX,CAAC;QAED,MAAM,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QAClD,MAAM,OAAO,GAAG,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,SAAS;QACX,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;QACnC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEvC,IAAI,yBAAyB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5C,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CACtC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YAChG,2FAA2F;YAC3F,UAAU;gBACN,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,CAAuB,CAAC;YAC9G,yCAAyC;YACzC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAuB,CAAC;QAChE,CAAC;QAED,KAAK,CAAC,IAAI,CAAC;YACT,OAAO;YACP,OAAO;YACP,UAAU;SACX,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAuB,CAAC;IAEhF,OAAO,QAAQ,CAAC;QACd,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;QACxC,KAAK;QACL,aAAa,EAAE,EAAC,GAAG,EAAE,OAAO,EAAC;KAC9B,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 * as Platform from '../../../core/platform/platform.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n  type RequiredData\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};\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {\n  return ['Meta', 'NetworkRequests', 'LayoutShifts'];\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n  fonts: Array<{\n    request: Types.Events.SyntheticNetworkRequest,\n    display: string,\n    wastedTime: Types.Timing.Milli,\n  }>,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {\n  return {\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    shouldShow: Boolean(partialModel.fonts.find(font => font.wastedTime > 0)),\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): FontDisplayInsightModel {\n  const fonts = [];\n  for (const event of parsedTrace.LayoutShifts.beginRemoteFontLoadEvents) {\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    const display = event.args.display;\n    let wastedTime = Types.Timing.Milli(0);\n\n    if (/^(block|fallback|auto)$/.test(display)) {\n      const wastedTimeMicro = Types.Timing.Micro(\n          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      wastedTime =\n          Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n      // All browsers wait for no more than 3s.\n      wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n    }\n\n    fonts.push({\n      request,\n      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 * 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  type RequiredData\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 function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {\n  return ['Meta', 'NetworkRequests', 'LayoutShifts'];\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n  fonts: Array<{\n    request: Types.Events.SyntheticNetworkRequest,\n    display: string,\n    wastedTime: Types.Timing.Milli,\n  }>,\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: RequiredData<typeof deps>, context: InsightSetContext): FontDisplayInsightModel {\n  const fonts = [];\n  for (const event of parsedTrace.LayoutShifts.beginRemoteFontLoadEvents) {\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    const display = event.args.display;\n    let wastedTime = Types.Timing.Milli(0);\n\n    if (/^(block|fallback|auto)$/.test(display)) {\n      const wastedTimeMicro = Types.Timing.Micro(\n          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      wastedTime =\n          Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n      // All browsers wait for no more than 3s.\n      wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n    }\n\n    fonts.push({\n      request,\n      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"]}

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

@@ -4,23 +4,23 @@ export declare const UIStrings: {
     /**
      *@description Title of an insight that provides details about Forced reflow.
      */
-    title: string;
+    readonly title: "Forced reflow";
     /**
      * @description Text to describe the forced reflow.
      */
-    description: string;
+    readonly description: "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.";
     /**
      *@description Title of a list to provide related stack trace data
      */
-    relatedStackTrace: string;
+    readonly relatedStackTrace: "Stack trace";
     /**
      *@description Text to describe the top time-consuming function call
      */
-    topTimeConsumingFunctionCall: string;
+    readonly topTimeConsumingFunctionCall: "Top function call";
     /**
      * @description Text to describe the total reflow time
      */
-    totalReflowTime: string;
+    readonly totalReflowTime: "Total reflow time";
 };
 export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
 export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {

package/models/trace/insights/ForcedReflow.js

@@ -154,11 +154,14 @@ function aggregateForcedReflow(data, entryToNodeMap) {
 }
 function finalize(partialModel) {
     return {
+        insightKey: "ForcedReflow" /* InsightKeys.FORCED_REFLOW */,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.ALL,
-        shouldShow: partialModel.topLevelFunctionCallData !== undefined && partialModel.aggregatedBottomUpData.length !== 0,
+        state: partialModel.topLevelFunctionCallData !== undefined && partialModel.aggregatedBottomUpData.length !== 0 ?
+            'fail' :
+            'pass',
         ...partialModel,
     };
 }

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 type * as Protocol from '../../../generated/protocol.js';\nimport type {Warning} from '../handlers/WarningsHandler.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type BottomUpCallStack,\n  type ForcedReflowAggregatedData,\n  InsightCategory,\n  type InsightModel,\n  type PartialInsightModel,\n  type RequiredData,\n} from './types.js';\n\nexport function deps(): ['Warnings', 'Renderer'] {\n  return ['Warnings', 'Renderer'];\n}\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\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\nfunction aggregateForcedReflow(\n    data: Map<Warning, Types.Events.Event[]>,\n    entryToNodeMap: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>):\n    [ForcedReflowAggregatedData|undefined, BottomUpCallStack[]] {\n  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n  const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n  const forcedReflowEvents = data.get('FORCED_REFLOW');\n  if (!forcedReflowEvents || forcedReflowEvents.length === 0) {\n    return [undefined, []];\n  }\n\n  forcedReflowEvents.forEach(e => {\n    // Gather the stack traces by searching in the tree\n    const traceNode = entryToNodeMap.get(e);\n\n    if (!traceNode) {\n      return;\n    }\n    // Compute call stack fully\n    const bottomUpData: (Types.Events.CallFrame|Protocol.Runtime.CallFrame)[] = [];\n    let currentNode = traceNode;\n    let previousNode;\n    const childStack: Protocol.Runtime.CallFrame[] = [];\n\n    // Some profileCalls maybe constructed as its children in hierarchy tree\n    while (currentNode.children.length > 0) {\n      const childNode = currentNode.children[0];\n      if (!previousNode) {\n        previousNode = childNode;\n      }\n      const eventData = childNode.entry;\n      if (Types.Events.isProfileCall(eventData)) {\n        childStack.push(eventData.callFrame);\n      }\n      currentNode = childNode;\n    }\n\n    // In order to avoid too much information, we only contain 2 levels bottomUp data,\n    while (childStack.length > 0 && bottomUpData.length < 2) {\n      const traceData = childStack.pop();\n      if (traceData) {\n        bottomUpData.push(traceData);\n      }\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        if (bottomUpData.length < 2) {\n          bottomUpData.push(eventData.callFrame);\n        }\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          if (bottomUpData.length === 0) {\n            bottomUpData.push(topLevelFunctionCall);\n          }\n        } else {\n          // Sometimes the top level task can be other JSInvocation event\n          // then we use the top level profile call as topLevelFunctionCall's data\n          const previousData = previousNode?.entry;\n          if (previousData && Types.Events.isProfileCall(previousData)) {\n            topLevelFunctionCall = previousData.callFrame;\n            topLevelFunctionCallEvent = previousNode?.entry;\n          }\n        }\n        break;\n      }\n      previousNode = node;\n      node = node.parent;\n    }\n\n    if (!topLevelFunctionCall || !topLevelFunctionCallEvent || bottomUpData.length === 0) {\n      return;\n    }\n    const bottomUpDataId =\n        bottomUpData[0].scriptId + ':' + bottomUpData[0].lineNumber + ':' + bottomUpData[0].columnNumber + ':';\n\n    const data = bottomUpDataMap.get(bottomUpDataId) ?? {\n      bottomUpData: bottomUpData[0],\n      totalTime: 0,\n      relatedEvents: [],\n    };\n    data.totalTime += (e.dur ?? 0);\n    data.relatedEvents.push(e);\n    bottomUpDataMap.set(bottomUpDataId, data);\n\n    const aggregatedDataId =\n        topLevelFunctionCall.scriptId + ':' + topLevelFunctionCall.lineNumber + ':' + topLevelFunctionCall.columnNumber;\n    if (!dataByTopLevelFunction.has(aggregatedDataId)) {\n      dataByTopLevelFunction.set(aggregatedDataId, {\n        topLevelFunctionCall,\n        totalReflowTime: 0,\n        bottomUpData: new Set<string>(),\n        topLevelFunctionCallEvents: [],\n      });\n    }\n    const aggregatedData = dataByTopLevelFunction.get(aggregatedDataId);\n    if (aggregatedData) {\n      aggregatedData.totalReflowTime += (e.dur ?? 0);\n      aggregatedData.bottomUpData.add(bottomUpDataId);\n      aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n    }\n  });\n\n  let topTimeConsumingDataId = '';\n  let maxTime = 0;\n  dataByTopLevelFunction.forEach((value, key) => {\n    if (value.totalReflowTime > maxTime) {\n      maxTime = value.totalReflowTime;\n      topTimeConsumingDataId = key;\n    }\n  });\n\n  const aggregatedBottomUpData: BottomUpCallStack[] = [];\n  const topLevelFunctionCallData = dataByTopLevelFunction.get(topTimeConsumingDataId);\n  const dataSet = dataByTopLevelFunction.get(topTimeConsumingDataId)?.bottomUpData;\n  if (dataSet) {\n    dataSet.forEach(value => {\n      const callStackData = bottomUpDataMap.get(value);\n      if (callStackData && callStackData.totalTime > Helpers.Timing.milliToMicro(Types.Timing.Milli(1))) {\n        aggregatedBottomUpData.push(callStackData);\n      }\n    });\n  }\n\n  return [topLevelFunctionCallData, aggregatedBottomUpData];\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n  return {\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    shouldShow: partialModel.topLevelFunctionCallData !== undefined && partialModel.aggregatedBottomUpData.length !== 0,\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(traceParsedData: RequiredData<typeof deps>): ForcedReflowInsightModel {\n  const warningsData = traceParsedData.Warnings;\n  const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n\n  if (!warningsData) {\n    throw new Error('no warnings data');\n  }\n\n  if (!entryToNodeMap) {\n    throw new Error('no renderer data');\n  }\n\n  const [topLevelFunctionCallData, aggregatedBottomUpData] =\n      aggregateForcedReflow(warningsData.perWarning, entryToNodeMap);\n\n  return finalize({\n    relatedEvents: topLevelFunctionCallData?.topLevelFunctionCallEvents,\n    topLevelFunctionCallData,\n    aggregatedBottomUpData,\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 type * as Protocol from '../../../generated/protocol.js';\nimport type {Warning} from '../handlers/WarningsHandler.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  type BottomUpCallStack,\n  type ForcedReflowAggregatedData,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type PartialInsightModel,\n  type RequiredData,\n} from './types.js';\n\nexport function deps(): ['Warnings', 'Renderer'] {\n  return ['Warnings', 'Renderer'];\n}\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} 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\nfunction aggregateForcedReflow(\n    data: Map<Warning, Types.Events.Event[]>,\n    entryToNodeMap: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>):\n    [ForcedReflowAggregatedData|undefined, BottomUpCallStack[]] {\n  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n  const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n  const forcedReflowEvents = data.get('FORCED_REFLOW');\n  if (!forcedReflowEvents || forcedReflowEvents.length === 0) {\n    return [undefined, []];\n  }\n\n  forcedReflowEvents.forEach(e => {\n    // Gather the stack traces by searching in the tree\n    const traceNode = entryToNodeMap.get(e);\n\n    if (!traceNode) {\n      return;\n    }\n    // Compute call stack fully\n    const bottomUpData: Array<Types.Events.CallFrame|Protocol.Runtime.CallFrame> = [];\n    let currentNode = traceNode;\n    let previousNode;\n    const childStack: Protocol.Runtime.CallFrame[] = [];\n\n    // Some profileCalls maybe constructed as its children in hierarchy tree\n    while (currentNode.children.length > 0) {\n      const childNode = currentNode.children[0];\n      if (!previousNode) {\n        previousNode = childNode;\n      }\n      const eventData = childNode.entry;\n      if (Types.Events.isProfileCall(eventData)) {\n        childStack.push(eventData.callFrame);\n      }\n      currentNode = childNode;\n    }\n\n    // In order to avoid too much information, we only contain 2 levels bottomUp data,\n    while (childStack.length > 0 && bottomUpData.length < 2) {\n      const traceData = childStack.pop();\n      if (traceData) {\n        bottomUpData.push(traceData);\n      }\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        if (bottomUpData.length < 2) {\n          bottomUpData.push(eventData.callFrame);\n        }\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          if (bottomUpData.length === 0) {\n            bottomUpData.push(topLevelFunctionCall);\n          }\n        } else {\n          // Sometimes the top level task can be other JSInvocation event\n          // then we use the top level profile call as topLevelFunctionCall's data\n          const previousData = previousNode?.entry;\n          if (previousData && Types.Events.isProfileCall(previousData)) {\n            topLevelFunctionCall = previousData.callFrame;\n            topLevelFunctionCallEvent = previousNode?.entry;\n          }\n        }\n        break;\n      }\n      previousNode = node;\n      node = node.parent;\n    }\n\n    if (!topLevelFunctionCall || !topLevelFunctionCallEvent || bottomUpData.length === 0) {\n      return;\n    }\n    const bottomUpDataId =\n        bottomUpData[0].scriptId + ':' + bottomUpData[0].lineNumber + ':' + bottomUpData[0].columnNumber + ':';\n\n    const data = bottomUpDataMap.get(bottomUpDataId) ?? {\n      bottomUpData: bottomUpData[0],\n      totalTime: 0,\n      relatedEvents: [],\n    };\n    data.totalTime += (e.dur ?? 0);\n    data.relatedEvents.push(e);\n    bottomUpDataMap.set(bottomUpDataId, data);\n\n    const aggregatedDataId =\n        topLevelFunctionCall.scriptId + ':' + topLevelFunctionCall.lineNumber + ':' + topLevelFunctionCall.columnNumber;\n    if (!dataByTopLevelFunction.has(aggregatedDataId)) {\n      dataByTopLevelFunction.set(aggregatedDataId, {\n        topLevelFunctionCall,\n        totalReflowTime: 0,\n        bottomUpData: new Set<string>(),\n        topLevelFunctionCallEvents: [],\n      });\n    }\n    const aggregatedData = dataByTopLevelFunction.get(aggregatedDataId);\n    if (aggregatedData) {\n      aggregatedData.totalReflowTime += (e.dur ?? 0);\n      aggregatedData.bottomUpData.add(bottomUpDataId);\n      aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n    }\n  });\n\n  let topTimeConsumingDataId = '';\n  let maxTime = 0;\n  dataByTopLevelFunction.forEach((value, key) => {\n    if (value.totalReflowTime > maxTime) {\n      maxTime = value.totalReflowTime;\n      topTimeConsumingDataId = key;\n    }\n  });\n\n  const aggregatedBottomUpData: BottomUpCallStack[] = [];\n  const topLevelFunctionCallData = dataByTopLevelFunction.get(topTimeConsumingDataId);\n  const dataSet = dataByTopLevelFunction.get(topTimeConsumingDataId)?.bottomUpData;\n  if (dataSet) {\n    dataSet.forEach(value => {\n      const callStackData = bottomUpDataMap.get(value);\n      if (callStackData && callStackData.totalTime > Helpers.Timing.milliToMicro(Types.Timing.Milli(1))) {\n        aggregatedBottomUpData.push(callStackData);\n      }\n    });\n  }\n\n  return [topLevelFunctionCallData, aggregatedBottomUpData];\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.topLevelFunctionCallData !== undefined && partialModel.aggregatedBottomUpData.length !== 0 ?\n        'fail' :\n        'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(traceParsedData: RequiredData<typeof deps>): ForcedReflowInsightModel {\n  const warningsData = traceParsedData.Warnings;\n  const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n\n  if (!warningsData) {\n    throw new Error('no warnings data');\n  }\n\n  if (!entryToNodeMap) {\n    throw new Error('no renderer data');\n  }\n\n  const [topLevelFunctionCallData, aggregatedBottomUpData] =\n      aggregateForcedReflow(warningsData.perWarning, entryToNodeMap);\n\n  return finalize({\n    relatedEvents: topLevelFunctionCallData?.topLevelFunctionCallEvents,\n    topLevelFunctionCallData,\n    aggregatedBottomUpData,\n  });\n}\n"]}

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

@@ -4,46 +4,48 @@ export declare const UIStrings: {
     /**
      * @description Title of an insight that recommends ways to reduce the size of images downloaded and used on the page.
      */
-    title: string;
+    readonly title: "Improve image delivery";
     /**
      * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
      */
-    description: string;
+    readonly description: "Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)";
     /**
      * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
-     * @example {50 MB} PH1
      */
-    useCompression: string;
+    readonly useCompression: "Increasing the image compression factor could improve this image's download size.";
     /**
      * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
-     * @example {50 MB} PH1
      */
-    useModernFormat: string;
+    readonly useModernFormat: "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.";
     /**
      * @description Message displayed in a chip advising the user to use video formats instead of GIFs because videos generally have smaller file sizes.
-     * @example {50 MB} PH1
      */
-    useVideoFormat: string;
+    readonly useVideoFormat: "Using video formats instead of GIFs can improve the download size of animated content.";
     /**
      * @description Message displayed in a chip explaining that an image was displayed on the page with dimensions much smaller than the image file dimensions.
-     * @example {50 MB} PH1
-     * @example {1000x500} PH2
-     * @example {100x50} PH3
+     * @example {1000x500} PH1
+     * @example {100x50} PH2
      */
-    useResponsiveSize: string;
+    readonly useResponsiveSize: "This image file is larger than it needs to be ({PH1}) for its displayed dimensions ({PH2}). Use responsive images to reduce the image download size.";
     /**
      * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).
      */
-    optimizeFile: string;
+    readonly optimizeFile: "Optimize file size";
     /**
      * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.
      * @example {5} PH1
      */
-    others: string;
+    readonly others: "{PH1} others";
     /**
      * @description Text status indicating that no potential optimizations were found for any image file
      */
-    noOptimizableImages: string;
+    readonly noOptimizableImages: "No optimizable images";
+    /**
+     * @description Text describing the estimated number of bytes that an image file optimization can save. This text is appended to another block of text describing the image optimization in more detail. "Est" means "Estimated".
+     * @example {Use the correct image dimensions to reduce the image file size.} PH1
+     * @example {50 MB} PH2
+     */
+    readonly estimatedSavings: "{PH1} (Est {PH2})";
 };
 export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
 export declare function deps(): ['NetworkRequests', 'Meta', 'ImagePainting'];
@@ -85,4 +87,6 @@ export type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {
     optimizableImages: OptimizableImage[];
     totalByteSavings: number;
 }>;
+export declare function getOptimizationMessage(optimization: ImageOptimization): string;
+export declare function getOptimizationMessageWithBytes(optimization: ImageOptimization): string;
 export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ImageDeliveryInsightModel;

package/models/trace/insights/ImageDelivery.js

@@ -16,26 +16,22 @@ export const UIStrings = {
     description: 'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)',
     /**
      * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
-     * @example {50 MB} PH1
      */
-    useCompression: 'Increasing the image compression factor could improve this image\'s download size. (Est {PH1})',
+    useCompression: 'Increasing the image compression factor could improve this image\'s download size.',
     /**
      * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
-     * @example {50 MB} PH1
      */
-    useModernFormat: 'Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image\'s download size. (Est {PH1})',
+    useModernFormat: 'Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image\'s download size.',
     /**
      * @description Message displayed in a chip advising the user to use video formats instead of GIFs because videos generally have smaller file sizes.
-     * @example {50 MB} PH1
      */
-    useVideoFormat: 'Using video formats instead of GIFs can improve the download size of animated content. (Est {PH1})',
+    useVideoFormat: 'Using video formats instead of GIFs can improve the download size of animated content.',
     /**
      * @description Message displayed in a chip explaining that an image was displayed on the page with dimensions much smaller than the image file dimensions.
-     * @example {50 MB} PH1
-     * @example {1000x500} PH2
-     * @example {100x50} PH3
+     * @example {1000x500} PH1
+     * @example {100x50} PH2
      */
-    useResponsiveSize: 'This image file is larger than it needs to be ({PH2}) for its displayed dimensions ({PH3}). Use responsive images to reduce the image download size. (Est {PH1})',
+    useResponsiveSize: 'This image file is larger than it needs to be ({PH1}) for its displayed dimensions ({PH2}). Use responsive images to reduce the image download size.',
     /**
      * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).
      */
@@ -49,6 +45,12 @@ export const UIStrings = {
      * @description Text status indicating that no potential optimizations were found for any image file
      */
     noOptimizableImages: 'No optimizable images',
+    /**
+     * @description Text describing the estimated number of bytes that an image file optimization can save. This text is appended to another block of text describing the image optimization in more detail. "Est" means "Estimated".
+     * @example {Use the correct image dimensions to reduce the image file size.} PH1
+     * @example {50 MB} PH2
+     */
+    estimatedSavings: '{PH1} (Est {PH2})',
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ImageDelivery.ts', UIStrings);
 export const i18nString = (i18nId, values) => ({i18nId, values}); // i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -84,32 +86,36 @@ export var ImageOptimizationType;
     ImageOptimizationType["VIDEO_FORMAT"] = "VIDEO_FORMAT";
     ImageOptimizationType["RESPONSIVE_SIZE"] = "RESPONSIVE_SIZE";
 })(ImageOptimizationType || (ImageOptimizationType = {}));
-function getOptimizationMessage(optimization) {
-    const byteSavingsText = (bytes => ({__i18nBytes: bytes}))(optimization.byteSavings);
+export function getOptimizationMessage(optimization) {
     switch (optimization.type) {
         case ImageOptimizationType.ADJUST_COMPRESSION:
-            return i18nString(UIStrings.useCompression, { PH1: byteSavingsText });
+            return i18nString(UIStrings.useCompression);
         case ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION:
-            return i18nString(UIStrings.useModernFormat, { PH1: byteSavingsText });
+            return i18nString(UIStrings.useModernFormat);
         case ImageOptimizationType.VIDEO_FORMAT:
-            return i18nString(UIStrings.useVideoFormat, { PH1: byteSavingsText });
+            return i18nString(UIStrings.useVideoFormat);
         case ImageOptimizationType.RESPONSIVE_SIZE:
             return i18nString(UIStrings.useResponsiveSize, {
-                PH1: byteSavingsText,
-                PH2: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,
-                PH3: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,
+                PH1: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,
+                PH2: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,
             });
     }
 }
+export function getOptimizationMessageWithBytes(optimization) {
+    const byteSavingsText = (bytes => ({__i18nBytes: bytes}))(optimization.byteSavings);
+    const optimizationMessage = getOptimizationMessage(optimization);
+    return i18nString(UIStrings.estimatedSavings, { PH1: optimizationMessage, PH2: byteSavingsText });
+}
 function finalize(partialModel) {
     return {
+        insightKey: "ImageDelivery" /* InsightKeys.IMAGE_DELIVERY */,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.LCP,
-        shouldShow: partialModel.optimizableImages.length > 0,
+        state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',
         ...partialModel,
-        relatedEvents: new Map(partialModel.optimizableImages.map(image => [image.request, image.optimizations.map(getOptimizationMessage)])),
+        relatedEvents: new Map(partialModel.optimizableImages.map(image => [image.request, image.optimizations.map(getOptimizationMessageWithBytes)])),
     };
 }
 /**