@paulirish/trace_engine 0.0.55 → 0.0.57

package/models/trace/types/devtools_entrypoint-bundle-tsconfig-tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "composite": true,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": true,
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ],
+    "module": "esnext",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "outDir": ".",
+    "rootDir": ".",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "esnext",
+    "tsBuildInfoFile": "devtools_entrypoint-bundle-tsconfig-tsconfig.json.tsbuildinfo",
+    "typeRoots": [],
+    "useUnknownInCatchVariables": false
+  },
+  "files": [
+    "types.prebundle.ts",
+    "../../../../../../../front_end/legacy/legacy-defs.d.ts",
+    "../../../../../../../front_end/global_typings/global_defs.d.ts",
+    "../../../../../../../node_modules/@types/filesystem/index.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./types-tsconfig.json"
+    }
+  ]
+}

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

@@ -33,6 +33,7 @@
     "../../../../../../../front_end/models/trace/types/Configuration.ts",
     "../../../../../../../front_end/models/trace/types/Extensions.ts",
     "../../../../../../../front_end/models/trace/types/File.ts",
+    "../../../../../../../front_end/models/trace/types/Overlays.ts",
     "../../../../../../../front_end/models/trace/types/Timing.ts",
     "../../../../../../../front_end/models/trace/types/TraceEvents.ts",
     "../../../../../../../front_end/legacy/legacy-defs.d.ts",

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

@@ -1,5 +1,6 @@
 export * as Configuration from './Configuration.js';
 export * as Extensions from './Extensions.js';
 export * as File from './File.js';
+export * as Overlays from './Overlays.js';
 export * as Timing from './Timing.js';
 export * as Events from './TraceEvents.js';

package/models/trace/types/types.js

@@ -4,6 +4,7 @@
 export * as Configuration from './Configuration.js';
 export * as Extensions from './Extensions.js';
 export * as File from './File.js';
+export * as Overlays from './Overlays.js';
 export * as Timing from './Timing.js';
 export * as Events from './TraceEvents.js';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/types/types.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC","sourcesContent":["// Copyright 2022 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 Configuration from './Configuration.js';\nexport * as Extensions from './Extensions.js';\nexport * as File from './File.js';\nexport * as Timing from './Timing.js';\nexport * as Events from './TraceEvents.js';\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/types/types.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC","sourcesContent":["// Copyright 2022 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 Configuration from './Configuration.js';\nexport * as Extensions from './Extensions.js';\nexport * as File from './File.js';\nexport * as Overlays from './Overlays.js';\nexport * as Timing from './Timing.js';\nexport * as Events from './TraceEvents.js';\n"]}

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

@@ -0,0 +1,5 @@
+export * as Configuration from './Configuration.js';
+export * as Extensions from './Extensions.js';
+export * as File from './File.js';
+export * as Timing from './Timing.js';
+export * as Events from './TraceEvents.js';

package/models/trace/types/types.prebundle.js

@@ -0,0 +1,9 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+export * as Configuration from './Configuration.js';
+export * as Extensions from './Extensions.js';
+export * as File from './File.js';
+export * as Timing from './Timing.js';
+export * as Events from './TraceEvents.js';
+//# sourceMappingURL=types.prebundle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.prebundle.js","sourceRoot":"","sources":["types.prebundle.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,aAAa,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC","sourcesContent":["// Copyright 2022 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 Configuration from './Configuration.js';\nexport * as Extensions from './Extensions.js';\nexport * as File from './File.js';\nexport * as Timing from './Timing.js';\nexport * as Events from './TraceEvents.js';\n"]}

package/models/trace/types/types.prebundle.ts

@@ -0,0 +1,9 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * as Configuration from './Configuration.js';
+export * as Extensions from './Extensions.js';
+export * as File from './File.js';
+export * as Timing from './Timing.js';
+export * as Events from './TraceEvents.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paulirish/trace_engine",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "",
   "main": "models/trace/trace.js",
   "scripts": {

package/test/test-trace-engine.mjs

@@ -69,8 +69,8 @@ test('insights look ok', t => {
   }
   const keys = Object.keys(insightSet.model);
   assert.deepStrictEqual(keys, [
-    'InteractionToNextPaint',
-    'LCPPhases',
+    'INPBreakdown',
+    'LCPBreakdown',
     'LCPDiscovery',
     'CLSCulprits',
     'RenderBlocking',
@@ -103,7 +103,7 @@ test('insights look ok', t => {
   const expected = {
     ahfhijdlegdabablpippeagghigmibma: { transferSize: 0, mainThreadTime: 3.953000009059906 },
     'paulirish.com': { transferSize: 142142, mainThreadTime: 17.631999850273132 },
-    cjpalhdlnbpafiamejdnhcphjbkeiagm: { transferSize: 0, mainThreadTime: 4.081999972462654 },
+    cjpalhdlnbpafiamejdnhcphjbkeiagm: { transferSize: 7390, mainThreadTime: 4.081999972462654 },
     jinjaccalgkegednnccohejagnlnfdag: { transferSize: 0, mainThreadTime: 1.2049999833106995 },
     noondiphcddnnabmjcihcjfbhfklnnep: { transferSize: 0, mainThreadTime: 2.2430000007152557 },
     'Google Tag Manager': { transferSize: 0, mainThreadTime: 0.2629999965429306 },

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

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionToNextPaint.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/InteractionToNextPaint.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type {SyntheticInteractionPair} from '../types/TraceEvents.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @description Text to tell the user about the longest user interaction.\n   */\n  description:\n      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',\n  /**\n   * @description Title for the performance insight \"INP by phase\", which shows a breakdown of INP by phases / sections.\n   */\n  title: 'INP by phase',\n  /**\n   *@description Label used for the phase/component/stage/section of a larger duration.\n   */\n  phase: 'Phase',\n  /**\n   *@description Label used for a time duration.\n   */\n  duration: 'Duration',\n\n  // TODO: these are repeated in InteractionBreakdown. Add a place for common strings?\n  /**\n   *@description Text shown next to the interaction event's input delay time in the detail view.\n   */\n  inputDelay: 'Input delay',\n  /**\n   *@description Text shown next to the interaction event's thread processing duration in the detail view.\n   */\n  processingDuration: 'Processing duration',\n  /**\n   *@description Text shown next to the interaction event's presentation delay time in the detail view.\n   */\n  presentationDelay: 'Presentation delay',\n  /**\n   * @description Text status indicating that no user interactions were detected.\n   */\n  noInteractions: 'No interactions detected',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/InteractionToNextPaint.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type INPInsightModel = InsightModel<typeof UIStrings, {\n  longestInteractionEvent?: SyntheticInteractionPair,\n  highPercentileInteractionEvent?: SyntheticInteractionPair,\n}>;\n\nexport function isINP(insight: InsightModel): insight is INPInsightModel {\n  return insight.insightKey === InsightKeys.INTERACTION_TO_NEXT_PAINT;\n}\n\nfunction finalize(partialModel: PartialInsightModel<INPInsightModel>): INPInsightModel {\n  return {\n    insightKey: InsightKeys.INTERACTION_TO_NEXT_PAINT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): INPInsightModel {\n  const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!interactionEvents.length) {\n    // A valid result, when there is no user interaction.\n    return finalize({});\n  }\n\n  const longestByInteractionId = new Map<number, SyntheticInteractionPair>();\n  for (const event of interactionEvents) {\n    const key = event.interactionId;\n    const longest = longestByInteractionId.get(key);\n    if (!longest || event.dur > longest.dur) {\n      longestByInteractionId.set(key, event);\n    }\n  }\n  const normalizedInteractionEvents = [...longestByInteractionId.values()];\n  normalizedInteractionEvents.sort((a, b) => b.dur - a.dur);\n\n  // INP is the \"nearest-rank\"/inverted_cdf 98th percentile, except Chrome only\n  // keeps the 10 worst events around, so it can never be more than the 10th from\n  // last array element. To keep things simpler, sort desc and pick from front.\n  // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad\n  const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));\n\n  return finalize({\n    relatedEvents: [normalizedInteractionEvents[0]],\n    longestInteractionEvent: normalizedInteractionEvents[0],\n    highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],\n  });\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"LCPPhases.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPPhases.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 Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.\n   */\n  title: 'LCP by phase',\n  /**\n   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by phases.\n   * This is displayed after a user expands the section to see more. No character length limits.\n   */\n  description:\n      'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',\n  /**\n   *@description Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.\n   */\n  timeToFirstByte: 'Time to first byte',\n  /**\n   *@description Resource load delay title for the Largest Contentful Paint phases timespan breakdown.\n   */\n  resourceLoadDelay: 'Resource load delay',\n  /**\n   *@description Resource load duration title for the Largest Contentful Paint phases timespan breakdown.\n   */\n  resourceLoadDuration: 'Resource load duration',\n  /**\n   *@description Element render delay title for the Largest Contentful Paint phases timespan breakdown.\n   */\n  elementRenderDelay: 'Element render delay',\n  /**\n   *@description Label used for the phase/component/stage/section of a larger duration.\n   */\n  phase: 'Phase',\n  /**\n   * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration.\n   */\n  duration: 'Duration',\n  /**\n   * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration. The value will be the 75th percentile of aggregate data. \"Field\" means that the data was collected from real users in the field as opposed to the developers local environment. \"Field\" is synonymous with \"Real user data\".\n   */\n  fieldDuration: 'Field p75',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n} as const;\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPPhases.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\ninterface LCPPhases {\n  /**\n   * The time between when the user initiates loading the page until when\n   * the browser receives the first byte of the html response.\n   */\n  ttfb: Types.Timing.Milli;\n  /**\n   * The time between ttfb and the LCP request request being started.\n   * For a text LCP, this is undefined given no request is loaded.\n   */\n  loadDelay?: Types.Timing.Milli;\n  /**\n   * The time it takes to load the LCP request.\n   */\n  loadTime?: Types.Timing.Milli;\n  /**\n   * The time between when the LCP request finishes loading and when\n   * the LCP element is rendered.\n   */\n  renderDelay: Types.Timing.Milli;\n}\n\nexport function isLCPPhases(model: InsightModel): model is LCPPhasesInsightModel {\n  return model.insightKey === 'LCPPhases';\n}\nexport type LCPPhasesInsightModel = InsightModel<typeof UIStrings, {\n  lcpMs?: Types.Timing.Milli,\n  lcpTs?: Types.Timing.Milli,\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  phases?: LCPPhases,\n}>;\n\nfunction anyValuesNaN(...values: number[]): boolean {\n  return values.some(v => Number.isNaN(v));\n}\n/**\n * Calculates the 4 phases of an LCP and the timings of each.\n * Will return `null` if any required values were missing. We don't ever expect\n * them to be missing on newer traces, but old trace files may lack some of the\n * data we rely on, so we want to handle that case.\n */\nfunction breakdownPhases(\n    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest, lcpMs: Types.Timing.Milli,\n    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPPhases|null {\n  const docReqTiming = docRequest.args.data.timing;\n  if (!docReqTiming) {\n    throw new Error('no timing for document request');\n  }\n  const firstDocByteTs = Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +\n      Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart);\n\n  const firstDocByteTiming = Types.Timing.Micro(firstDocByteTs - nav.ts);\n  const ttfb = Helpers.Timing.microToMilli(firstDocByteTiming);\n  let renderDelay = Types.Timing.Milli(lcpMs - ttfb);\n\n  if (!lcpRequest) {\n    if (anyValuesNaN(ttfb, renderDelay)) {\n      return null;\n    }\n    return {ttfb, renderDelay};\n  }\n\n  const lcpStartTs = Types.Timing.Micro(lcpRequest.ts - nav.ts);\n  const requestStart = Helpers.Timing.microToMilli(lcpStartTs);\n\n  const lcpReqEndTs = Types.Timing.Micro(lcpRequest.args.data.syntheticData.finishTime - nav.ts);\n  const requestEnd = Helpers.Timing.microToMilli(lcpReqEndTs);\n\n  const loadDelay = Types.Timing.Milli(requestStart - ttfb);\n  const loadTime = Types.Timing.Milli(requestEnd - requestStart);\n  renderDelay = Types.Timing.Milli(lcpMs - requestEnd);\n  if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {\n    return null;\n  }\n\n  return {\n    ttfb,\n    loadDelay,\n    loadTime,\n    renderDelay,\n  };\n}\n\nfunction finalize(partialModel: PartialInsightModel<LCPPhasesInsightModel>): LCPPhasesInsightModel {\n  const relatedEvents = [];\n  if (partialModel.lcpEvent) {\n    relatedEvents.push(partialModel.lcpEvent);\n  }\n  if (partialModel.lcpRequest) {\n    relatedEvents.push(partialModel.lcpRequest);\n  }\n  return {\n    insightKey: InsightKeys.LCP_PHASES,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPPhasesInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  // This helps calculate the phases.\n  const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);\n  // This helps position things on the timeline's UI accurately for a trace.\n  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n\n  const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);\n  if (!docRequest) {\n    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  if (!lcpRequest) {\n    return finalize({\n      lcpMs,\n      lcpTs,\n      lcpEvent,\n      lcpRequest,\n      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,\n    });\n  }\n\n  return finalize({\n    lcpMs,\n    lcpTs,\n    lcpEvent,\n    lcpRequest,\n    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,\n  });\n}\n"]}