@paulirish/trace_engine 0.0.36 → 0.0.38

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

@@ -1,11 +1,11 @@
 import * as Types from '../types/types.js';
-import type { InsightResult, InsightSetContext, RequiredData } from './types.js';
+import { type InsightModel, type InsightSetContext, type RequiredData } from './types.js';
 export declare function deps(): ['SelectorStats'];
-export type SlowCSSSelectorInsightResult = InsightResult<{
+export type SlowCSSSelectorInsightModel = InsightModel<{
     totalElapsedMs: Types.Timing.MilliSeconds;
     totalMatchAttempts: number;
     totalMatchCount: number;
     topElapsedMs: Types.Events.SelectorTiming[];
     topMatchAttempts: Types.Events.SelectorTiming[];
 }>;
-export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): SlowCSSSelectorInsightResult;
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): SlowCSSSelectorInsightModel;

package/models/trace/insights/SlowCSSSelector.js

@@ -1,9 +1,23 @@
 // 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 { SelectorTimingsKey } from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
+import { InsightCategory } from './types.js';
+const UIStrings = {
+    /**
+     *@description Title of an insight that provides details about slow CSS selectors.
+     */
+    title: 'CSS Selector costs',
+    /**
+     * @description Text to describe how to improve the performance of CSS selectors.
+     */
+    description: 'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
+};
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/SlowCSSSelector.ts', UIStrings);
+const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
 export function deps() {
     return ['SelectorStats'];
 }
@@ -32,6 +46,15 @@ function aggregateSelectorStats(data, context) {
     }
     return [...selectorMap.values()];
 }
+function finalize(partialModel) {
+    return {
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        category: InsightCategory.ALL,
+        shouldShow: partialModel.topElapsedMs.length !== 0 && partialModel.topMatchAttempts.length !== 0,
+        ...partialModel,
+    };
+}
 export function generateInsight(parsedTrace, context) {
     const selectorStatsData = parsedTrace.SelectorStats;
     if (!selectorStatsData) {
@@ -47,14 +70,14 @@ export function generateInsight(parsedTrace, context) {
         totalMatchCount += timing[SelectorTimingsKey.MatchCount];
     });
     // sort by elapsed time
-    const sortByElapsedMs = selectorTimings.toSorted((a, b) => {
+    const sortByElapsedMs = [...selectorTimings].sort((a, b) => {
         return b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed];
     });
     // sort by match attempts
-    const sortByMatchAttempts = selectorTimings.toSorted((a, b) => {
+    const sortByMatchAttempts = [...selectorTimings].sort((a, b) => {
         return b[SelectorTimingsKey.MatchAttempts] - a[SelectorTimingsKey.MatchAttempts];
     });
-    return {
+    return finalize({
         // TODO: should we identify UpdateLayout events as linked to this insight?
         relatedEvents: [],
         totalElapsedMs: Types.Timing.MilliSeconds(totalElapsedUs / 1000.0),
@@ -62,6 +85,6 @@ export function generateInsight(parsedTrace, context) {
         totalMatchCount,
         topElapsedMs: sortByElapsedMs.slice(0, 3),
         topMatchAttempts: sortByMatchAttempts.slice(0, 3),
-    };
+    });
 }
 //# sourceMappingURL=SlowCSSSelector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SlowCSSSelector.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/SlowCSSSelector.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 Helpers from '../helpers/helpers.js';\nimport {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';\nimport * as Types from '../types/types.js';\n\nimport type {InsightResult, InsightSetContext, RequiredData} from './types.js';\n\nexport function deps(): ['SelectorStats'] {\n  return ['SelectorStats'];\n}\n\nexport type SlowCSSSelectorInsightResult = InsightResult<{\n  totalElapsedMs: Types.Timing.MilliSeconds,\n  totalMatchAttempts: number,\n  totalMatchCount: number,\n  topElapsedMs: Types.Events.SelectorTiming[],\n  topMatchAttempts: Types.Events.SelectorTiming[],\n}>;\n\nfunction aggregateSelectorStats(\n    data: Map<Types.Events.UpdateLayoutTree, {\n      timings: Types.Events.SelectorTiming[],\n    }>,\n    context: InsightSetContext): SelectorTiming[] {\n  const selectorMap = new Map<String, SelectorTiming>();\n\n  for (const [event, value] of data) {\n    if (event.args.beginData?.frame !== context.frameId) {\n      continue;\n    }\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n    for (const timing of value.timings) {\n      const key = timing[SelectorTimingsKey.Selector] + '_' + timing[SelectorTimingsKey.StyleSheetId];\n      const findTiming = selectorMap.get(key);\n      if (findTiming !== undefined) {\n        findTiming[SelectorTimingsKey.Elapsed] += timing[SelectorTimingsKey.Elapsed];\n        findTiming[SelectorTimingsKey.FastRejectCount] += timing[SelectorTimingsKey.FastRejectCount];\n        findTiming[SelectorTimingsKey.MatchAttempts] += timing[SelectorTimingsKey.MatchAttempts];\n        findTiming[SelectorTimingsKey.MatchCount] += timing[SelectorTimingsKey.MatchCount];\n      } else {\n        selectorMap.set(key, {...timing});\n      }\n    }\n  }\n\n  return [...selectorMap.values()];\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): SlowCSSSelectorInsightResult {\n  const selectorStatsData = parsedTrace.SelectorStats;\n\n  if (!selectorStatsData) {\n    throw new Error('no selector stats data');\n  }\n\n  const selectorTimings = aggregateSelectorStats(selectorStatsData.dataForUpdateLayoutEvent, context);\n\n  let totalElapsedUs = 0;\n  let totalMatchAttempts = 0;\n  let totalMatchCount = 0;\n\n  selectorTimings.map(timing => {\n    totalElapsedUs += timing[SelectorTimingsKey.Elapsed];\n    totalMatchAttempts += timing[SelectorTimingsKey.MatchAttempts];\n    totalMatchCount += timing[SelectorTimingsKey.MatchCount];\n  });\n\n  // sort by elapsed time\n  const sortByElapsedMs = selectorTimings.toSorted((a, b) => {\n    return b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed];\n  });\n\n  // sort by match attempts\n  const sortByMatchAttempts = selectorTimings.toSorted((a, b) => {\n    return b[SelectorTimingsKey.MatchAttempts] - a[SelectorTimingsKey.MatchAttempts];\n  });\n\n  return {\n    // TODO: should we identify UpdateLayout events as linked to this insight?\n    relatedEvents: [],\n    totalElapsedMs: Types.Timing.MilliSeconds(totalElapsedUs / 1000.0),\n    totalMatchAttempts,\n    totalMatchCount,\n    topElapsedMs: sortByElapsedMs.slice(0, 3),\n    topMatchAttempts: sortByMatchAttempts.slice(0, 3),\n  };\n}\n"]}
+{"version":3,"file":"SlowCSSSelector.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/SlowCSSSelector.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 {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';\nimport * as Types from '../types/types.js';\n\nimport {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';\n\nconst UIStrings = {\n  /**\n   *@description Title of an insight that provides details about slow CSS selectors.\n   */\n  title: 'CSS Selector costs',\n\n  /**\n   * @description Text to describe how to improve the performance of CSS selectors.\n   */\n  description:\n      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',\n};\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/SlowCSSSelector.ts', UIStrings);\nconst i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function deps(): ['SelectorStats'] {\n  return ['SelectorStats'];\n}\n\nexport type SlowCSSSelectorInsightModel = InsightModel<{\n  totalElapsedMs: Types.Timing.MilliSeconds,\n  totalMatchAttempts: number,\n  totalMatchCount: number,\n  topElapsedMs: Types.Events.SelectorTiming[],\n  topMatchAttempts: Types.Events.SelectorTiming[],\n}>;\n\nfunction aggregateSelectorStats(\n    data: Map<Types.Events.UpdateLayoutTree, {\n      timings: Types.Events.SelectorTiming[],\n    }>,\n    context: InsightSetContext): SelectorTiming[] {\n  const selectorMap = new Map<String, SelectorTiming>();\n\n  for (const [event, value] of data) {\n    if (event.args.beginData?.frame !== context.frameId) {\n      continue;\n    }\n    if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n      continue;\n    }\n    for (const timing of value.timings) {\n      const key = timing[SelectorTimingsKey.Selector] + '_' + timing[SelectorTimingsKey.StyleSheetId];\n      const findTiming = selectorMap.get(key);\n      if (findTiming !== undefined) {\n        findTiming[SelectorTimingsKey.Elapsed] += timing[SelectorTimingsKey.Elapsed];\n        findTiming[SelectorTimingsKey.FastRejectCount] += timing[SelectorTimingsKey.FastRejectCount];\n        findTiming[SelectorTimingsKey.MatchAttempts] += timing[SelectorTimingsKey.MatchAttempts];\n        findTiming[SelectorTimingsKey.MatchCount] += timing[SelectorTimingsKey.MatchCount];\n      } else {\n        selectorMap.set(key, {...timing});\n      }\n    }\n  }\n\n  return [...selectorMap.values()];\n}\n\nfunction finalize(partialModel: Omit<SlowCSSSelectorInsightModel, 'title'|'description'|'category'|'shouldShow'>):\n    SlowCSSSelectorInsightModel {\n  return {\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    shouldShow: partialModel.topElapsedMs.length !== 0 && partialModel.topMatchAttempts.length !== 0,\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): SlowCSSSelectorInsightModel {\n  const selectorStatsData = parsedTrace.SelectorStats;\n\n  if (!selectorStatsData) {\n    throw new Error('no selector stats data');\n  }\n\n  const selectorTimings = aggregateSelectorStats(selectorStatsData.dataForUpdateLayoutEvent, context);\n\n  let totalElapsedUs = 0;\n  let totalMatchAttempts = 0;\n  let totalMatchCount = 0;\n\n  selectorTimings.map(timing => {\n    totalElapsedUs += timing[SelectorTimingsKey.Elapsed];\n    totalMatchAttempts += timing[SelectorTimingsKey.MatchAttempts];\n    totalMatchCount += timing[SelectorTimingsKey.MatchCount];\n  });\n\n  // sort by elapsed time\n  const sortByElapsedMs = [...selectorTimings].sort((a, b) => {\n    return b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed];\n  });\n\n  // sort by match attempts\n  const sortByMatchAttempts = [...selectorTimings].sort((a, b) => {\n    return b[SelectorTimingsKey.MatchAttempts] - a[SelectorTimingsKey.MatchAttempts];\n  });\n\n  return finalize({\n    // TODO: should we identify UpdateLayout events as linked to this insight?\n    relatedEvents: [],\n    totalElapsedMs: Types.Timing.MilliSeconds(totalElapsedUs / 1000.0),\n    totalMatchAttempts,\n    totalMatchCount,\n    topElapsedMs: sortByElapsedMs.slice(0, 3),\n    topMatchAttempts: sortByMatchAttempts.slice(0, 3),\n  });\n}\n"]}

package/models/trace/insights/{ThirdPartyWeb.d.ts → ThirdParties.d.ts}

@@ -1,8 +1,8 @@
 import * as Extras from '../extras/extras.js';
 import type * as Types from '../types/types.js';
-import type { InsightResult, InsightSetContext, RequiredData } from './types.js';
+import { type InsightModel, type InsightSetContext, type RequiredData } from './types.js';
 export declare function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
-export type ThirdPartyWebInsightResult = InsightResult<{
+export type ThirdPartiesInsightModel = InsightModel<{
     entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Entity>;
     requestsByEntity: Map<Extras.ThirdParties.Entity, Types.Events.SyntheticNetworkRequest[]>;
     summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Summary>;
@@ -10,4 +10,4 @@ export type ThirdPartyWebInsightResult = InsightResult<{
     /** The entity for this navigation's URL. Any other entity is from a third party. */
     firstPartyEntity?: Extras.ThirdParties.Entity;
 }>;
-export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartyWebInsightResult;
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartiesInsightModel;

package/models/trace/insights/{ThirdPartyWeb.js → ThirdParties.js}

@@ -1,9 +1,23 @@
 // 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 ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
 import * as Extras from '../extras/extras.js';
 import * as Helpers from '../helpers/helpers.js';
+import { InsightCategory } from './types.js';
+const UIStrings = {
+    /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
+    title: 'Third parties',
+    /**
+     * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
+     * This is displayed after a user expands the section to see more. No character length limits.
+     */
+    description: 'Third party code can significantly impact load performance. ' +
+        '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\'s content.',
+};
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ThirdParties.ts', UIStrings);
+const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
 export function deps() {
     return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
 }
@@ -16,6 +30,15 @@ function getRelatedEvents(summaries, firstPartyEntity) {
     }
     return events;
 }
+function finalize(partialModel) {
+    return {
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        category: InsightCategory.ALL,
+        shouldShow: Boolean([...partialModel.summaryByEntity.entries()].find(kv => kv[0] !== partialModel.firstPartyEntity)),
+        ...partialModel,
+    };
+}
 export function generateInsight(parsedTrace, context) {
     const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {
         if (!context.navigation) {
@@ -30,13 +53,13 @@ export function generateInsight(parsedTrace, context) {
     const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
     const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
         Extras.ThirdParties.makeUpEntity(madeUpEntityCache, firstPartyUrl);
-    return {
+    return finalize({
         relatedEvents: getRelatedEvents(summaries, firstPartyEntity),
         entityByRequest,
         requestsByEntity: summaries.requestsByEntity,
         summaryByRequest: summaries.byRequest,
         summaryByEntity: summaries.byEntity,
         firstPartyEntity,
-    };
+    });
 }
-//# sourceMappingURL=ThirdPartyWeb.js.map
+//# sourceMappingURL=ThirdParties.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThirdParties.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ThirdParties.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 ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';\n\nconst UIStrings = {\n  /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as \"third-party code\"). */\n  title: 'Third parties',\n  /**\n   * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.\n   * This is displayed after a user expands the section to see more. No character length limits.\n   */\n  description: 'Third party code can significantly impact load performance. ' +\n      '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\\'s content.',\n};\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ThirdParties.ts', UIStrings);\nconst i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'] {\n  return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];\n}\n\nexport type ThirdPartiesInsightModel = InsightModel<{\n  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Entity>,\n  requestsByEntity: Map<Extras.ThirdParties.Entity, Types.Events.SyntheticNetworkRequest[]>,\n  summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Summary>,\n  summaryByEntity: Map<Extras.ThirdParties.Entity, Extras.ThirdParties.Summary>,\n  /** The entity for this navigation's URL. Any other entity is from a third party. */\n  firstPartyEntity?: Extras.ThirdParties.Entity,\n}>;\n\nfunction getRelatedEvents(\n    summaries: Extras.ThirdParties.SummaryMaps,\n    firstPartyEntity: Extras.ThirdParties.Entity|undefined): Types.Events.Event[] {\n  const events = [];\n\n  for (const [entity, requests] of summaries.requestsByEntity.entries()) {\n    if (entity !== firstPartyEntity) {\n      events.push(...requests);\n    }\n  }\n\n  return events;\n}\n\nfunction finalize(partialModel: Omit<ThirdPartiesInsightModel, 'title'|'description'|'category'|'shouldShow'>):\n    ThirdPartiesInsightModel {\n  return {\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.ALL,\n    shouldShow:\n        Boolean([...partialModel.summaryByEntity.entries()].find(kv => kv[0] !== partialModel.firstPartyEntity)),\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartiesInsightModel {\n  const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {\n    if (!context.navigation) {\n      return false;\n    }\n\n    if (event.args.data.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  const {entityByRequest, madeUpEntityCache, summaries} = Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(\n      parsedTrace as Handlers.Types.ParsedTrace, context.bounds, networkRequests);\n\n  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;\n  const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||\n      Extras.ThirdParties.makeUpEntity(madeUpEntityCache, firstPartyUrl);\n\n  return finalize({\n    relatedEvents: getRelatedEvents(summaries, firstPartyEntity),\n    entityByRequest,\n    requestsByEntity: summaries.requestsByEntity,\n    summaryByRequest: summaries.byRequest,\n    summaryByEntity: summaries.byEntity,\n    firstPartyEntity,\n  });\n}\n"]}

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

@@ -1,8 +1,8 @@
 import type * as Types from '../types/types.js';
-import { type InsightResult, type InsightSetContext, type RequiredData } from './types.js';
+import { type InsightModel, type InsightSetContext, type RequiredData } from './types.js';
 export declare function deps(): ['Meta', 'UserInteractions'];
-export type ViewportInsightResult = InsightResult<{
+export type ViewportInsightModel = InsightModel<{
     mobileOptimized: boolean | null;
     viewportEvent?: Types.Events.ParseMetaViewport;
 }>;
-export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightResult;
+export declare function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightModel;

package/models/trace/insights/Viewport.js

@@ -1,11 +1,31 @@
 // 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 { InsightWarning } from './types.js';
+import { InsightCategory, InsightWarning, } from './types.js';
+const UIStrings = {
+    /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
+    title: 'Viewport not optimized for mobile',
+    /**
+     * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
+     */
+    description: 'The page\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
+};
+// const str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);
+const i18nString = string => string; // i18n.i18n.getLocalizedString.bind(undefined, str_);
 export function deps() {
     return ['Meta', 'UserInteractions'];
 }
+function finalize(partialModel) {
+    return {
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        category: InsightCategory.INP,
+        shouldShow: partialModel.mobileOptimized === false,
+        ...partialModel,
+    };
+}
 export function generateInsight(parsedTrace, context) {
     const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {
         if (event.args.frame !== context.frameId) {
@@ -15,10 +35,10 @@ export function generateInsight(parsedTrace, context) {
     });
     if (!compositorEvents.length) {
         // Trace doesn't have the data we need.
-        return {
+        return finalize({
             mobileOptimized: null,
             warnings: [InsightWarning.NO_LAYOUT],
-        };
+        });
     }
     const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {
         if (event.args.data.frame !== context.frameId) {
@@ -29,16 +49,16 @@ export function generateInsight(parsedTrace, context) {
     // Returns true only if all events are mobile optimized.
     for (const event of compositorEvents) {
         if (!event.args.is_mobile_optimized) {
-            return {
+            return finalize({
                 mobileOptimized: false,
                 viewportEvent,
                 metricSavings: { INP: 300 },
-            };
+            });
         }
     }
-    return {
+    return finalize({
         mobileOptimized: true,
         viewportEvent,
-    };
+    });
 }
 //# sourceMappingURL=Viewport.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Viewport.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Viewport.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAA6C,cAAc,EAAoB,MAAM,YAAY,CAAC;AAEzG,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AACtC,CAAC;AAOD,MAAM,UAAU,eAAe,CAC3B,WAAsC,EAAE,OAA0B;IACpE,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACpG,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;QAC7B,uCAAuC;QACvC,OAAO;YACL,eAAe,EAAE,IAAI;YACrB,QAAQ,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC;SACrC,CAAC;IACJ,CAAC;IAED,MAAM,aAAa,GAAG,WAAW,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QACtF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YAC9C,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,wDAAwD;IACxD,KAAK,MAAM,KAAK,IAAI,gBAAgB,EAAE,CAAC;QACrC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACpC,OAAO;gBACL,eAAe,EAAE,KAAK;gBACtB,aAAa;gBACb,aAAa,EAAE,EAAC,GAAG,EAAE,GAAgC,EAAC;aACvD,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO;QACL,eAAe,EAAE,IAAI;QACrB,aAAa;KACd,CAAC;AACJ,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 Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {type InsightResult, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';\n\nexport function deps(): ['Meta', 'UserInteractions'] {\n  return ['Meta', 'UserInteractions'];\n}\n\nexport type ViewportInsightResult = InsightResult<{\n  mobileOptimized: boolean | null,\n  viewportEvent?: Types.Events.ParseMetaViewport,\n}>;\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightResult {\n  const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {\n    if (event.args.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!compositorEvents.length) {\n    // Trace doesn't have the data we need.\n    return {\n      mobileOptimized: null,\n      warnings: [InsightWarning.NO_LAYOUT],\n    };\n  }\n\n  const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {\n    if (event.args.data.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  // Returns true only if all events are mobile optimized.\n  for (const event of compositorEvents) {\n    if (!event.args.is_mobile_optimized) {\n      return {\n        mobileOptimized: false,\n        viewportEvent,\n        metricSavings: {INP: 300 as Types.Timing.MilliSeconds},\n      };\n    }\n  }\n\n  return {\n    mobileOptimized: true,\n    viewportEvent,\n  };\n}\n"]}
+{"version":3,"file":"Viewport.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Viewport.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EACL,eAAe,EAGf,cAAc,GAEf,MAAM,YAAY,CAAC;AAEpB,MAAM,SAAS,GAAG;IAChB,8GAA8G;IAC9G,KAAK,EAAE,mCAAmC;IAC1C;;OAEG;IACH,WAAW,EACP,sKAAsK;CAC3K,CAAC;AAEF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,mCAAmC,EAAE,SAAS,CAAC,CAAC;AACzF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAEtE,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AACtC,CAAC;AAOD,SAAS,QAAQ,CAAC,YAAuF;IAEvG,OAAO;QACL,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,YAAY,CAAC,eAAe,KAAK,KAAK;QAClD,GAAG,YAAY;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,WAAsC,EAAE,OAA0B;IACpE,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACpG,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;QAC7B,uCAAuC;QACvC,OAAO,QAAQ,CAAC;YACd,eAAe,EAAE,IAAI;YACrB,QAAQ,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC;SACrC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,aAAa,GAAG,WAAW,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QACtF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;YAC9C,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,wDAAwD;IACxD,KAAK,MAAM,KAAK,IAAI,gBAAgB,EAAE,CAAC;QACrC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACpC,OAAO,QAAQ,CAAC;gBACd,eAAe,EAAE,KAAK;gBACtB,aAAa;gBACb,aAAa,EAAE,EAAC,GAAG,EAAE,GAAgC,EAAC;aACvD,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;QACd,eAAe,EAAE,IAAI;QACrB,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 type * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type RequiredData,\n} from './types.js';\n\nconst UIStrings = {\n  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */\n  title: 'Viewport not optimized for mobile',\n  /**\n   * @description Text to tell the user how a viewport meta element can improve performance. \\xa0 is a non-breaking space\n   */\n  description:\n      'The page\\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',\n};\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);\nconst i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function deps(): ['Meta', 'UserInteractions'] {\n  return ['Meta', 'UserInteractions'];\n}\n\nexport type ViewportInsightModel = InsightModel<{\n  mobileOptimized: boolean | null,\n  viewportEvent?: Types.Events.ParseMetaViewport,\n}>;\n\nfunction finalize(partialModel: Omit<ViewportInsightModel, 'title'|'description'|'category'|'shouldShow'>):\n    ViewportInsightModel {\n  return {\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    shouldShow: partialModel.mobileOptimized === false,\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightModel {\n  const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {\n    if (event.args.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!compositorEvents.length) {\n    // Trace doesn't have the data we need.\n    return finalize({\n      mobileOptimized: null,\n      warnings: [InsightWarning.NO_LAYOUT],\n    });\n  }\n\n  const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {\n    if (event.args.data.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  // Returns true only if all events are mobile optimized.\n  for (const event of compositorEvents) {\n    if (!event.args.is_mobile_optimized) {\n      return finalize({\n        mobileOptimized: false,\n        viewportEvent,\n        metricSavings: {INP: 300 as Types.Timing.MilliSeconds},\n      });\n    }\n  }\n\n  return finalize({\n    mobileOptimized: true,\n    viewportEvent,\n  });\n}\n"]}

package/models/trace/insights/insights-tsconfig.json

@@ -29,16 +29,18 @@
     "useUnknownInCatchVariables": false
   },
   "files": [
+    "../../../../../../../front_end/models/trace/insights/CLSCulprits.ts",
     "../../../../../../../front_end/models/trace/insights/Common.ts",
-    "../../../../../../../front_end/models/trace/insights/CumulativeLayoutShift.ts",
     "../../../../../../../front_end/models/trace/insights/DocumentLatency.ts",
     "../../../../../../../front_end/models/trace/insights/FontDisplay.ts",
-    "../../../../../../../front_end/models/trace/insights/InsightRunners.ts",
+    "../../../../../../../front_end/models/trace/insights/ImageDelivery.ts",
     "../../../../../../../front_end/models/trace/insights/InteractionToNextPaint.ts",
-    "../../../../../../../front_end/models/trace/insights/LargestContentfulPaint.ts",
+    "../../../../../../../front_end/models/trace/insights/LCPDiscovery.ts",
+    "../../../../../../../front_end/models/trace/insights/LCPPhases.ts",
+    "../../../../../../../front_end/models/trace/insights/Models.ts",
     "../../../../../../../front_end/models/trace/insights/RenderBlocking.ts",
     "../../../../../../../front_end/models/trace/insights/SlowCSSSelector.ts",
-    "../../../../../../../front_end/models/trace/insights/ThirdPartyWeb.ts",
+    "../../../../../../../front_end/models/trace/insights/ThirdParties.ts",
     "../../../../../../../front_end/models/trace/insights/Viewport.ts",
     "../../../../../../../front_end/models/trace/insights/types.ts",
     "../../../../../../../front_end/legacy/legacy-defs.d.ts",

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

@@ -1,3 +1,3 @@
 export * as Common from './Common.js';
-export * as InsightRunners from './InsightRunners.js';
+export * as Models from './Models.js';
 export * as Types from './types.js';

package/models/trace/insights/insights.js

@@ -2,6 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 export * as Common from './Common.js';
-export * as InsightRunners from './InsightRunners.js';
+export * as Models from './Models.js';
 export * as Types from './types.js';
 //# sourceMappingURL=insights.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/insights.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nexport * as Common from './Common.js';\nexport * as InsightRunners from './InsightRunners.js';\nexport * as Types from './types.js';\n"]}
+{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/insights.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nexport * as Common from './Common.js';\nexport * as Models from './Models.js';\nexport * as Types from './types.js';\n"]}

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

@@ -1,7 +1,8 @@
+// import type * as Common from '../../../core/common/common.js';
 import type * as Handlers from '../handlers/handlers.js';
 import type * as Lantern from '../lantern/lantern.js';
 import type * as Types from '../types/types.js';
-import type * as InsightsRunners from './InsightRunners.js';
+import type * as Models from './Models.js';
 /**
  * Context for the portion of the trace an insight should look at.
  */
@@ -23,7 +24,7 @@ export interface LanternContext {
     simulator: Lantern.Simulation.Simulator<Types.Events.SyntheticNetworkRequest>;
     metrics: Record<string, Lantern.Metrics.MetricResult>;
 }
-export type InsightRunnersType = typeof InsightsRunners;
+export type InsightModelsType = typeof Models;
 export declare enum InsightWarning {
     NO_FP = "NO_FP",
     NO_LCP = "NO_LCP",
@@ -37,7 +38,18 @@ export interface MetricSavings {
     CLS?: number;
     INP?: Types.Timing.MilliSeconds;
 }
-export type InsightResult<R extends Record<string, unknown>> = R & {
+export declare enum InsightCategory {
+    ALL = "All",
+    INP = "INP",
+    LCP = "LCP",
+    CLS = "CLS"
+}
+export type InsightModel<R extends Record<string, unknown>> = R & {
+    title: string;
+    description: string;
+    category: InsightCategory;
+    /** True if there is anything of interest to display to the user. */
+    shouldShow: boolean;
     relatedEvents?: Types.Events.Event[];
     warnings?: InsightWarning[];
     metricSavings?: MetricSavings;
@@ -47,21 +59,21 @@ export type InsightResult<R extends Record<string, unknown>> = R & {
  * this could instead represent the duration from the beginning of the trace up to the first recorded
  * navigation (or the end of the trace).
  */
-export type InsightSets = {
+export type InsightSet = {
     /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
     id: Types.Events.NavigationId;
     /** The URL to show in the accordion list. */
     url: URL;
     frameId: string;
     bounds: Types.Timing.TraceWindowMicroSeconds;
-    data: InsightResults;
+    model: InsightModels;
     navigation?: Types.Events.NavigationStart;
 };
 /**
- * Contains insights for a specific navigation.
+ * Contains insights for a specific insight set.
  */
-export type InsightResults = {
-    [I in keyof InsightRunnersType]: ReturnType<InsightRunnersType[I]['generateInsight']>;
+export type InsightModels = {
+    [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;
 };
 /**
  * Contains insights for the entire trace. Insights are mostly grouped by `navigationId`, with one exception:
@@ -69,7 +81,7 @@ export type InsightResults = {
  * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no
  * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.
  */
-export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSets>;
+export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;
 /**
  * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.
  */

package/models/trace/insights/types.js

@@ -9,4 +9,11 @@ export var InsightWarning;
     InsightWarning["NO_DOCUMENT_REQUEST"] = "NO_DOCUMENT_REQUEST";
     InsightWarning["NO_LAYOUT"] = "NO_LAYOUT";
 })(InsightWarning || (InsightWarning = {}));
+export var InsightCategory;
+(function (InsightCategory) {
+    InsightCategory["ALL"] = "All";
+    InsightCategory["INP"] = "INP";
+    InsightCategory["LCP"] = "LCP";
+    InsightCategory["CLS"] = "CLS";
+})(InsightCategory || (InsightCategory = {}));
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/types.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAmC7B,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,mCAAiB,CAAA;IACjB,uEAAuE;IACvE,6DAA2C,CAAA;IAC3C,yCAAuB,CAAA;AACzB,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Handlers from '../handlers/handlers.js';\nimport type * as Lantern from '../lantern/lantern.js';\nimport type * as Types from '../types/types.js';\n\nimport type * as InsightsRunners from './InsightRunners.js';\n\n/**\n * Context for the portion of the trace an insight should look at.\n */\nexport type InsightSetContext = InsightSetContextWithoutNavigation|InsightSetContextWithNavigation;\n\nexport interface InsightSetContextWithoutNavigation {\n  bounds: Types.Timing.TraceWindowMicroSeconds;\n  frameId: string;\n  navigation?: never;\n}\n\nexport interface InsightSetContextWithNavigation {\n  bounds: Types.Timing.TraceWindowMicroSeconds;\n  frameId: string;\n  navigation: Types.Events.NavigationStart;\n  navigationId: string;\n  lantern?: LanternContext;\n}\n\nexport interface LanternContext {\n  graph: Lantern.Graph.Node<Types.Events.SyntheticNetworkRequest>;\n  simulator: Lantern.Simulation.Simulator<Types.Events.SyntheticNetworkRequest>;\n  metrics: Record<string, Lantern.Metrics.MetricResult>;\n}\n\nexport type InsightRunnersType = typeof InsightsRunners;\n\nexport enum InsightWarning {\n  NO_FP = 'NO_FP',\n  NO_LCP = 'NO_LCP',\n  // No network request could be identified as the primary HTML document.\n  NO_DOCUMENT_REQUEST = 'NO_DOCUMENT_REQUEST',\n  NO_LAYOUT = 'NO_LAYOUT',\n}\n\nexport interface MetricSavings {\n  /* eslint-disable @typescript-eslint/naming-convention */\n  FCP?: Types.Timing.MilliSeconds;\n  LCP?: Types.Timing.MilliSeconds;\n  TBT?: Types.Timing.MilliSeconds;\n  CLS?: number;\n  INP?: Types.Timing.MilliSeconds;\n  /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nexport type InsightResult<R extends Record<string, unknown>> = R&{\n  relatedEvents?: Types.Events.Event[],\n  warnings?: InsightWarning[],\n  metricSavings?: MetricSavings,\n};\n\n/**\n * Contains insights for a specific navigation. If a trace began after a navigation already started,\n * this could instead represent the duration from the beginning of the trace up to the first recorded\n * navigation (or the end of the trace).\n */\nexport type InsightSets = {\n  /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */\n  id: Types.Events.NavigationId,\n  /** The URL to show in the accordion list. */\n  url: URL,\n  frameId: string,\n  bounds: Types.Timing.TraceWindowMicroSeconds,\n  data: InsightResults,\n  navigation?: Types.Events.NavigationStart,\n};\n\n/**\n * Contains insights for a specific navigation.\n */\nexport type InsightResults = {\n  [I in keyof InsightRunnersType]: ReturnType<InsightRunnersType[I]['generateInsight']>;\n};\n\n/**\n * Contains insights for the entire trace. Insights are mostly grouped by `navigationId`, with one exception:\n *\n * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no\n * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.\n */\nexport type TraceInsightSets = Map<Types.Events.NavigationId, InsightSets>;\n\n/**\n * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.\n */\nexport type RequiredData<D extends() => Array<keyof typeof Handlers.ModelHandlers>> =\n    Handlers.Types.EnabledHandlerDataWithMeta<Pick<typeof Handlers.ModelHandlers, ReturnType<D>[number]>>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/types.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAoC7B,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,mCAAiB,CAAA;IACjB,uEAAuE;IACvE,6DAA2C,CAAA;IAC3C,yCAAuB,CAAA;AACzB,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB;AAYD,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,8BAAW,CAAA;IACX,8BAAW,CAAA;IACX,8BAAW,CAAA;IACX,8BAAW,CAAA;AACb,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Common from '../../../core/common/common.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport type * as Lantern from '../lantern/lantern.js';\nimport type * as Types from '../types/types.js';\n\nimport type * as Models from './Models.js';\n\n/**\n * Context for the portion of the trace an insight should look at.\n */\nexport type InsightSetContext = InsightSetContextWithoutNavigation|InsightSetContextWithNavigation;\n\nexport interface InsightSetContextWithoutNavigation {\n  bounds: Types.Timing.TraceWindowMicroSeconds;\n  frameId: string;\n  navigation?: never;\n}\n\nexport interface InsightSetContextWithNavigation {\n  bounds: Types.Timing.TraceWindowMicroSeconds;\n  frameId: string;\n  navigation: Types.Events.NavigationStart;\n  navigationId: string;\n  lantern?: LanternContext;\n}\n\nexport interface LanternContext {\n  graph: Lantern.Graph.Node<Types.Events.SyntheticNetworkRequest>;\n  simulator: Lantern.Simulation.Simulator<Types.Events.SyntheticNetworkRequest>;\n  metrics: Record<string, Lantern.Metrics.MetricResult>;\n}\n\nexport type InsightModelsType = typeof Models;\n\nexport enum InsightWarning {\n  NO_FP = 'NO_FP',\n  NO_LCP = 'NO_LCP',\n  // No network request could be identified as the primary HTML document.\n  NO_DOCUMENT_REQUEST = 'NO_DOCUMENT_REQUEST',\n  NO_LAYOUT = 'NO_LAYOUT',\n}\n\nexport interface MetricSavings {\n  /* eslint-disable @typescript-eslint/naming-convention */\n  FCP?: Types.Timing.MilliSeconds;\n  LCP?: Types.Timing.MilliSeconds;\n  TBT?: Types.Timing.MilliSeconds;\n  CLS?: number;\n  INP?: Types.Timing.MilliSeconds;\n  /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nexport enum InsightCategory {\n  ALL = 'All',\n  INP = 'INP',\n  LCP = 'LCP',\n  CLS = 'CLS',\n}\n\nexport type InsightModel<R extends Record<string, unknown>> = R&{\n  title: Common.UIString.LocalizedString,\n  description: Common.UIString.LocalizedString,\n  category: InsightCategory,\n  /** True if there is anything of interest to display to the user. */\n  shouldShow: boolean,\n  relatedEvents?: Types.Events.Event[],\n  warnings?: InsightWarning[],\n  metricSavings?: MetricSavings,\n};\n\n/**\n * Contains insights for a specific navigation. If a trace began after a navigation already started,\n * this could instead represent the duration from the beginning of the trace up to the first recorded\n * navigation (or the end of the trace).\n */\nexport type InsightSet = {\n  /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */\n  id: Types.Events.NavigationId,\n  /** The URL to show in the accordion list. */\n  url: URL,\n  frameId: string,\n  bounds: Types.Timing.TraceWindowMicroSeconds,\n  model: InsightModels,\n  navigation?: Types.Events.NavigationStart,\n};\n\n/**\n * Contains insights for a specific insight set.\n */\nexport type InsightModels = {\n  [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;\n};\n\n/**\n * Contains insights for the entire trace. Insights are mostly grouped by `navigationId`, with one exception:\n *\n * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no\n * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.\n */\nexport type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;\n\n/**\n * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.\n */\nexport type RequiredData<D extends() => Array<keyof typeof Handlers.ModelHandlers>> =\n    Handlers.Types.EnabledHandlerDataWithMeta<Pick<typeof Handlers.ModelHandlers, ReturnType<D>[number]>>;\n"]}

package/models/trace/lantern/BaseNode.d.ts

@@ -0,0 +1,91 @@
+import { type CPUNode } from './CPUNode.js';
+import { type NetworkNode } from './NetworkNode.js';
+import type * as Lantern from './types/lantern.js';
+/**
+ * A union of all types derived from BaseNode, allowing type check discrimination
+ * based on `node.type`. If a new node type is created, it should be added here.
+ */
+export type Node<T = Lantern.AnyNetworkObject> = CPUNode<T> | NetworkNode<T>;
+/**
+ * @fileoverview This class encapsulates logic for handling resources and tasks used to model the
+ * execution dependency graph of the page. A node has a unique identifier and can depend on other
+ * nodes/be depended on. The construction of the graph maintains some important invariants that are
+ * inherent to the model:
+ *
+ *    1. The graph is a DAG, there are no cycles.
+ *    2. There is always a root node upon which all other nodes eventually depend.
+ *
+ * This allows particular optimizations in this class so that we do no need to check for cycles as
+ * these methods are called and we can always start traversal at the root node.
+ */
+declare class BaseNode<T = Lantern.AnyNetworkObject> {
+    static types: {
+        readonly NETWORK: "network";
+        readonly CPU: "cpu";
+    };
+    _id: string;
+    _isMainDocument: boolean;
+    _dependents: Node[];
+    _dependencies: Node[];
+    constructor(id: string);
+    get id(): string;
+    get type(): 'network' | 'cpu';
+    /**
+     * In microseconds
+     */
+    get startTime(): number;
+    /**
+     * In microseconds
+     */
+    get endTime(): number;
+    setIsMainDocument(value: boolean): void;
+    isMainDocument(): boolean;
+    getDependents(): Node[];
+    getNumberOfDependents(): number;
+    getDependencies(): Node[];
+    getNumberOfDependencies(): number;
+    getRootNode(): Node<T>;
+    addDependent(node: Node): void;
+    addDependency(node: Node): void;
+    removeDependent(node: Node): void;
+    removeDependency(node: Node): void;
+    removeAllDependencies(): void;
+    /**
+     * Computes whether the given node is anywhere in the dependency graph of this node.
+     * While this method can prevent cycles, it walks the graph and should be used sparingly.
+     * Nodes are always considered dependent on themselves for the purposes of cycle detection.
+     */
+    isDependentOn(node: BaseNode<T>): boolean;
+    /**
+     * Clones the node's information without adding any dependencies/dependents.
+     */
+    cloneWithoutRelationships(): Node<T>;
+    /**
+     * Clones the entire graph connected to this node filtered by the optional predicate. If a node is
+     * included by the predicate, all nodes along the paths between the node and the root will be included. If the
+     * node this was called on is not included in the resulting filtered graph, the method will throw.
+     */
+    cloneWithRelationships(predicate?: (arg0: Node) => boolean): Node;
+    /**
+     * Traverses all connected nodes in BFS order, calling `callback` exactly once
+     * on each. `traversalPath` is the shortest (though not necessarily unique)
+     * path from `node` to the root of the iteration.
+     *
+     * The `getNextNodes` function takes a visited node and returns which nodes to
+     * visit next. It defaults to returning the node's dependents.
+     */
+    traverse(callback: (node: Node<T>, traversalPath: Node<T>[]) => void, getNextNodes?: (arg0: Node<T>) => Node<T>[]): void;
+    /**
+     * @see BaseNode.traverse
+     */
+    traverseGenerator(getNextNodes?: (arg0: Node) => Node[]): Generator<{
+        node: Node;
+        traversalPath: Node[];
+    }, void, unknown>;
+    /**
+     * Returns whether the given node has a cycle in its dependent graph by performing a DFS.
+     */
+    static hasCycle(node: Node, direction?: 'dependents' | 'dependencies' | 'both'): boolean;
+    canDependOn(node: Node): boolean;
+}
+export { BaseNode };