@paulirish/trace_engine 0.0.41 → 0.0.42

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

@@ -9,12 +9,59 @@ export declare const UIStrings: {
      *@description Description of an insight that provides a breakdown for how long it took to download the main document.
      */
     description: string;
+    /**
+     * @description Text to tell the user that the document request does not have redirects.
+     */
+    passingRedirects: string;
+    /**
+     * @description Text to tell the user that the document request had redirects.
+     */
+    failedRedirects: string;
+    /**
+     * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.
+     */
+    passingServerResponseTime: string;
+    /**
+     * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.
+     */
+    failedServerResponseTime: string;
+    /**
+     * @description Text to tell the user that text compression (like gzip) was applied.
+     */
+    passingTextCompression: string;
+    /**
+     * @description Text to tell the user that text compression (like gzip) was not applied.
+     */
+    failedTextCompression: string;
+    /**
+     * @description Text for a label describing a network request event as having redirects.
+     */
+    redirectsLabel: string;
+    /**
+     * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+     */
+    serverResponseTimeLabel: string;
+    /**
+     * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+     */
+    uncompressedDownload: string;
+    /**
+     *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+     *@example {Server response time} PH1
+     */
+    successAriaLabel: string;
+    /**
+     *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+     *@example {Server response time} PH1
+     */
+    failedAriaLabel: string;
 };
-export type DocumentLatencyInsightModel = InsightModel<{
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
+export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
     data?: {
-        serverResponseTime: Types.Timing.MilliSeconds;
+        serverResponseTime: Types.Timing.Milli;
         serverResponseTooSlow: boolean;
-        redirectDuration: Types.Timing.MilliSeconds;
+        redirectDuration: Types.Timing.Milli;
         uncompressedResponseBytes: number;
         documentRequest?: Types.Events.SyntheticNetworkRequest;
     };

package/models/trace/insights/DocumentLatency.js

@@ -4,7 +4,7 @@
 // import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
-import { InsightCategory } from './types.js';
+import { InsightCategory, 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.
@@ -14,9 +14,55 @@ export const UIStrings = {
      *@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.',
+    /**
+     * @description Text to tell the user that the document request does not have redirects.
+     */
+    passingRedirects: 'Avoids redirects',
+    /**
+     * @description Text to tell the user that the document request had redirects.
+     */
+    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: '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: 'Server responded slowly',
+    /**
+     * @description Text to tell the user that text compression (like gzip) was applied.
+     */
+    passingTextCompression: 'Applies text compression',
+    /**
+     * @description Text to tell the user that text compression (like gzip) was not applied.
+     */
+    failedTextCompression: 'No compression applied',
+    /**
+     * @description Text for a label describing a network request event as having redirects.
+     */
+    redirectsLabel: 'Redirects',
+    /**
+     * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+     */
+    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: 'Uncompressed download',
+    /**
+     *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+     *@example {Server response time} PH1
+     */
+    successAriaLabel: 'Insight check passed: {PH1}',
+    /**
+     *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+     *@example {Server response time} PH1
+     */
+    failedAriaLabel: 'Insight check failed: {PH1}',
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);
-const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
 // Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.
 // We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.
 const TOO_SLOW_THRESHOLD_MS = 600;
@@ -102,6 +148,7 @@ function finalize(partialModel) {
             partialModel.data.uncompressedResponseBytes > 0;
     }
     return {
+        strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.ALL,
@@ -115,7 +162,7 @@ export function generateInsight(parsedTrace, context) {
     }
     const documentRequest = parsedTrace.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
     if (!documentRequest) {
-        throw new Error('missing document request');
+        return finalize({ warnings: [InsightWarning.NO_DOCUMENT_REQUEST] });
     }
     const serverResponseTime = getServerResponseTime(documentRequest);
     if (serverResponseTime === null) {
@@ -137,7 +184,7 @@ export function generateInsight(parsedTrace, context) {
         data: {
             serverResponseTime,
             serverResponseTooSlow,
-            redirectDuration: Types.Timing.MilliSeconds(redirectDuration),
+            redirectDuration: Types.Timing.Milli(redirectDuration),
             uncompressedResponseBytes: getCompressionSavings(documentRequest),
             documentRequest,
         },

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 * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} 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\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nconst 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<{\n  data?: {\n    serverResponseTime: Types.Timing.MilliSeconds,\n    serverResponseTooSlow: boolean,\n    redirectDuration: Types.Timing.MilliSeconds,\n    uncompressedResponseBytes: number,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\n  },\n}>;\n\nexport function deps(): ['Meta', 'NetworkRequests'] {\n  return ['Meta', 'NetworkRequests'];\n}\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|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.MilliSeconds;\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: Omit<DocumentLatencyInsightModel, 'title'|'description'|'category'|'shouldShow'>):\n    DocumentLatencyInsightModel {\n  let hasFailure = false;\n  if (partialModel.data) {\n    hasFailure = partialModel.data.redirectDuration > 0 || partialModel.data.serverResponseTooSlow ||\n        partialModel.data.uncompressedResponseBytes > 0;\n  }\n\n  return {\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    throw new Error('missing 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.MilliSeconds,\n    LCP: overallSavingsMs as Types.Timing.MilliSeconds,\n  };\n\n  return finalize({\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      serverResponseTooSlow,\n      redirectDuration: Types.Timing.MilliSeconds(redirectDuration),\n      uncompressedResponseBytes: getCompressionSavings(documentRequest),\n      documentRequest,\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  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   *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check\n   *@example {Server response time} PH1\n   */\n  successAriaLabel: 'Insight check passed: {PH1}',\n  /**\n   *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check\n   *@example {Server response time} PH1\n   */\n  failedAriaLabel: 'Insight check failed: {PH1}',\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    serverResponseTooSlow: boolean,\n    redirectDuration: Types.Timing.Milli,\n    uncompressedResponseBytes: number,\n    documentRequest?: Types.Events.SyntheticNetworkRequest,\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.redirectDuration > 0 || partialModel.data.serverResponseTooSlow ||\n        partialModel.data.uncompressedResponseBytes > 0;\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  return finalize({\n    relatedEvents: [documentRequest],\n    data: {\n      serverResponseTime,\n      serverResponseTooSlow,\n      redirectDuration: Types.Timing.Milli(redirectDuration),\n      uncompressedResponseBytes: getCompressionSavings(documentRequest),\n      documentRequest,\n    },\n    metricSavings,\n  });\n}\n"]}

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

@@ -1,3 +1,4 @@
+import * as Platform from '../../../core/platform/platform.js';
 import * as Types from '../types/types.js';
 import { type InsightModel, type InsightSetContext, type RequiredData } from './types.js';
 export declare const UIStrings: {
@@ -7,13 +8,18 @@ export declare const UIStrings: {
      * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
      */
     description: string;
+    /** Column for a font loaded by the page to render text. */
+    fontColumn: string;
+    /** Column for the amount of time wasted. */
+    wastedTimeColumn: string;
 };
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Platform.UIString.LocalizedString;
 export declare function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'];
-export type FontDisplayInsightModel = InsightModel<{
+export type FontDisplayInsightModel = InsightModel<typeof UIStrings, {
     fonts: Array<{
         request: Types.Events.SyntheticNetworkRequest;
         display: string;
-        wastedTime: Types.Timing.MilliSeconds;
+        wastedTime: Types.Timing.Milli;
     }>;
 }>;
 export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): FontDisplayInsightModel;

package/models/trace/insights/FontDisplay.js

@@ -13,14 +13,19 @@ export const UIStrings = {
      * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
      */
     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: 'Font',
+    /** Column for the amount of time wasted. */
+    wastedTimeColumn: 'Wasted time',
 };
 // const str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);
-const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
 export function deps() {
     return ['Meta', 'NetworkRequests', 'LayoutShifts'];
 }
 function finalize(partialModel) {
     return {
+        strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
         category: InsightCategory.INP,
@@ -40,11 +45,12 @@ export function generateInsight(parsedTrace, context) {
             continue;
         }
         const display = event.args.display;
-        let wastedTime = Types.Timing.MilliSeconds(0);
+        let wastedTime = Types.Timing.Milli(0);
         if (/^(block|fallback|auto)$/.test(display)) {
-            const wastedTimeMicro = Types.Timing.MicroSeconds(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);
+            const wastedTimeMicro = Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);
             // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.
-            wastedTime = Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5);
+            wastedTime =
+                Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5);
             // All browsers wait for no more than 3s.
             wastedTime = Math.min(wastedTime, 3000);
         }

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 * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} 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};\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nconst 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<{\n  fonts: Array<{\n    request: Types.Events.SyntheticNetworkRequest,\n    display: string,\n    wastedTime: Types.Timing.MilliSeconds,\n  }>,\n}>;\n\nfunction finalize(partialModel: Omit<FontDisplayInsightModel, 'title'|'description'|'category'|'shouldShow'>):\n    FontDisplayInsightModel {\n  return {\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.MilliSeconds(0);\n\n    if (/^(block|fallback|auto)$/.test(display)) {\n      const wastedTimeMicro = Types.Timing.MicroSeconds(\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 = Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as\n          Types.Timing.MilliSeconds;\n      // All browsers wait for no more than 3s.\n      wastedTime = Math.min(wastedTime, 3000) as Types.Timing.MilliSeconds;\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.MilliSeconds;\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  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"]}

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

@@ -0,0 +1,30 @@
+import { type BottomUpCallStack, type ForcedReflowAggregatedData, type InsightModel, type RequiredData } from './types.js';
+export declare function deps(): ['Warnings', 'Renderer'];
+export declare const UIStrings: {
+    /**
+     *@description Title of an insight that provides details about Forced reflow.
+     */
+    title: string;
+    /**
+     * @description Text to describe the forced reflow.
+     */
+    description: string;
+    /**
+     *@description Title of a list to provide related stack trace data
+     */
+    relatedStackTrace: string;
+    /**
+     *@description Text to describe the top time-consuming function call
+     */
+    topTimeConsumingFunctionCall: string;
+    /**
+     * @description Text to describe the total reflow time
+     */
+    totalReflowTime: string;
+};
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
+export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {
+    topLevelFunctionCallData: ForcedReflowAggregatedData | undefined;
+    aggregatedBottomUpData: BottomUpCallStack[];
+}>;
+export declare function generateInsight(traceParsedData: RequiredData<typeof deps>): ForcedReflowInsightModel;

package/models/trace/insights/ForcedReflow.js

@@ -0,0 +1,181 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+// import * as i18n from '../../../core/i18n/i18n.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { InsightCategory, } from './types.js';
+export function deps() {
+    return ['Warnings', 'Renderer'];
+}
+export const UIStrings = {
+    /**
+     *@description Title of an insight that provides details about Forced reflow.
+     */
+    title: 'Forced reflow',
+    /**
+     * @description Text to describe the forced reflow.
+     */
+    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: 'Stack trace',
+    /**
+     *@description Text to describe the top time-consuming function call
+     */
+    topTimeConsumingFunctionCall: 'Top function call',
+    /**
+     * @description Text to describe the total reflow time
+     */
+    totalReflowTime: 'Total reflow time',
+};
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);
+export const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
+function aggregateForcedReflow(data, entryToNodeMap) {
+    const dataByTopLevelFunction = new Map();
+    const bottomUpDataMap = new Map();
+    const forcedReflowEvents = data.get('FORCED_REFLOW');
+    if (!forcedReflowEvents || forcedReflowEvents.length === 0) {
+        return [undefined, []];
+    }
+    forcedReflowEvents.forEach(e => {
+        // Gather the stack traces by searching in the tree
+        const traceNode = entryToNodeMap.get(e);
+        if (!traceNode) {
+            return;
+        }
+        // Compute call stack fully
+        const bottomUpData = [];
+        let currentNode = traceNode;
+        let previousNode;
+        const childStack = [];
+        // Some profileCalls maybe constructed as its children in hierarchy tree
+        while (currentNode.children.length > 0) {
+            const childNode = currentNode.children[0];
+            if (!previousNode) {
+                previousNode = childNode;
+            }
+            const eventData = childNode.entry;
+            if (Types.Events.isProfileCall(eventData)) {
+                childStack.push(eventData.callFrame);
+            }
+            currentNode = childNode;
+        }
+        // In order to avoid too much information, we only contain 2 levels bottomUp data,
+        while (childStack.length > 0 && bottomUpData.length < 2) {
+            const traceData = childStack.pop();
+            if (traceData) {
+                bottomUpData.push(traceData);
+            }
+        }
+        let node = traceNode.parent;
+        let topLevelFunctionCall;
+        let topLevelFunctionCallEvent;
+        while (node) {
+            const eventData = node.entry;
+            if (Types.Events.isProfileCall(eventData)) {
+                if (bottomUpData.length < 2) {
+                    bottomUpData.push(eventData.callFrame);
+                }
+            }
+            else {
+                // We have finished searching bottom up data
+                if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&
+                    Types.Events.objectIsCallFrame(eventData.args.data)) {
+                    topLevelFunctionCall = eventData.args.data;
+                    topLevelFunctionCallEvent = eventData;
+                    if (bottomUpData.length === 0) {
+                        bottomUpData.push(topLevelFunctionCall);
+                    }
+                }
+                else {
+                    // Sometimes the top level task can be other JSInvocation event
+                    // then we use the top level profile call as topLevelFunctionCall's data
+                    const previousData = previousNode?.entry;
+                    if (previousData && Types.Events.isProfileCall(previousData)) {
+                        topLevelFunctionCall = previousData.callFrame;
+                        topLevelFunctionCallEvent = previousNode?.entry;
+                    }
+                }
+                break;
+            }
+            previousNode = node;
+            node = node.parent;
+        }
+        if (!topLevelFunctionCall || !topLevelFunctionCallEvent || bottomUpData.length === 0) {
+            return;
+        }
+        const bottomUpDataId = bottomUpData[0].scriptId + ':' + bottomUpData[0].lineNumber + ':' + bottomUpData[0].columnNumber + ':';
+        const data = bottomUpDataMap.get(bottomUpDataId) ?? {
+            bottomUpData: bottomUpData[0],
+            totalTime: 0,
+            relatedEvents: [],
+        };
+        data.totalTime += (e.dur ?? 0);
+        data.relatedEvents.push(e);
+        bottomUpDataMap.set(bottomUpDataId, data);
+        const aggregatedDataId = topLevelFunctionCall.scriptId + ':' + topLevelFunctionCall.lineNumber + ':' + topLevelFunctionCall.columnNumber;
+        if (!dataByTopLevelFunction.has(aggregatedDataId)) {
+            dataByTopLevelFunction.set(aggregatedDataId, {
+                topLevelFunctionCall,
+                totalReflowTime: 0,
+                bottomUpData: new Set(),
+                topLevelFunctionCallEvents: [],
+            });
+        }
+        const aggregatedData = dataByTopLevelFunction.get(aggregatedDataId);
+        if (aggregatedData) {
+            aggregatedData.totalReflowTime += (e.dur ?? 0);
+            aggregatedData.bottomUpData.add(bottomUpDataId);
+            aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);
+        }
+    });
+    let topTimeConsumingDataId = '';
+    let maxTime = 0;
+    dataByTopLevelFunction.forEach((value, key) => {
+        if (value.totalReflowTime > maxTime) {
+            maxTime = value.totalReflowTime;
+            topTimeConsumingDataId = key;
+        }
+    });
+    const aggregatedBottomUpData = [];
+    const topLevelFunctionCallData = dataByTopLevelFunction.get(topTimeConsumingDataId);
+    const dataSet = dataByTopLevelFunction.get(topTimeConsumingDataId)?.bottomUpData;
+    if (dataSet) {
+        dataSet.forEach(value => {
+            const callStackData = bottomUpDataMap.get(value);
+            if (callStackData && callStackData.totalTime > Helpers.Timing.milliToMicro(Types.Timing.Milli(1))) {
+                aggregatedBottomUpData.push(callStackData);
+            }
+        });
+    }
+    return [topLevelFunctionCallData, aggregatedBottomUpData];
+}
+function finalize(partialModel) {
+    return {
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        category: InsightCategory.ALL,
+        shouldShow: partialModel.topLevelFunctionCallData !== undefined && partialModel.aggregatedBottomUpData.length !== 0,
+        ...partialModel,
+    };
+}
+export function generateInsight(traceParsedData) {
+    const warningsData = traceParsedData.Warnings;
+    const entryToNodeMap = traceParsedData.Renderer.entryToNode;
+    if (!warningsData) {
+        throw new Error('no warnings data');
+    }
+    if (!entryToNodeMap) {
+        throw new Error('no renderer data');
+    }
+    const [topLevelFunctionCallData, aggregatedBottomUpData] = aggregateForcedReflow(warningsData.perWarning, entryToNodeMap);
+    return finalize({
+        relatedEvents: topLevelFunctionCallData?.topLevelFunctionCallEvents,
+        topLevelFunctionCallData,
+        aggregatedBottomUpData,
+    });
+}
+//# sourceMappingURL=ForcedReflow.js.map

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

@@ -0,0 +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"]}

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

@@ -31,7 +31,21 @@ export declare const UIStrings: {
      * @example {100x50} PH3
      */
     useResponsiveSize: string;
+    /**
+     * @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;
+    /**
+     * @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;
+    /**
+     * @description Text status indicating that no potential optimizations were found for any image file
+     */
+    noOptimizableImages: string;
 };
+export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
 export declare function deps(): ['NetworkRequests', 'Meta', 'ImagePainting'];
 export declare enum ImageOptimizationType {
     ADJUST_COMPRESSION = "ADJUST_COMPRESSION",
@@ -66,7 +80,7 @@ export interface OptimizableImage {
      */
     largestImagePaint: Types.Events.PaintImage;
 }
-export type ImageDeliveryInsightModel = InsightModel<{
+export type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {
     optimizableImages: OptimizableImage[];
     totalByteSavings: number;
 }>;