@paulirish/trace_engine 0.0.36 → 0.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/.tmp/tsbuildinfo/tsconfig.tsbuildinfo +1 -1
  2. package/generated/protocol.d.ts +21 -3
  3. package/models/trace/Processor.d.ts +1 -1
  4. package/models/trace/Processor.js +4 -4
  5. package/models/trace/Processor.js.map +1 -1
  6. package/models/trace/extras/TimelineJSProfile.d.ts +13 -0
  7. package/models/trace/extras/TimelineJSProfile.js +55 -0
  8. package/models/trace/extras/TimelineJSProfile.js.map +1 -0
  9. package/models/trace/extras/TraceFilter.d.ts +21 -0
  10. package/models/trace/extras/TraceFilter.js +51 -0
  11. package/models/trace/extras/TraceFilter.js.map +1 -0
  12. package/models/trace/extras/TraceTree.d.ts +91 -0
  13. package/models/trace/extras/TraceTree.js +515 -0
  14. package/models/trace/extras/TraceTree.js.map +1 -0
  15. package/models/trace/extras/extras-tsconfig.json +3 -0
  16. package/models/trace/extras/extras.js.map +1 -1
  17. package/models/trace/handlers/LargestImagePaintHandler.d.ts +7 -1
  18. package/models/trace/handlers/LargestImagePaintHandler.js +43 -1
  19. package/models/trace/handlers/LargestImagePaintHandler.js.map +1 -1
  20. package/models/trace/handlers/MetaHandler.js +2 -3
  21. package/models/trace/handlers/MetaHandler.js.map +1 -1
  22. package/models/trace/handlers/NetworkRequestsHandler.js +2 -0
  23. package/models/trace/handlers/NetworkRequestsHandler.js.map +1 -1
  24. package/models/trace/insights/CLSCulprits.d.ts +57 -0
  25. package/models/trace/insights/CLSCulprits.js +335 -0
  26. package/models/trace/insights/CLSCulprits.js.map +1 -0
  27. package/models/trace/insights/Common.d.ts +2 -10
  28. package/models/trace/insights/Common.js +1 -36
  29. package/models/trace/insights/Common.js.map +1 -1
  30. package/models/trace/insights/DocumentLatency.d.ts +3 -3
  31. package/models/trace/insights/DocumentLatency.js.map +1 -1
  32. package/models/trace/insights/FontDisplay.d.ts +3 -3
  33. package/models/trace/insights/FontDisplay.js.map +1 -1
  34. package/models/trace/insights/InteractionToNextPaint.d.ts +3 -3
  35. package/models/trace/insights/InteractionToNextPaint.js.map +1 -1
  36. package/models/trace/insights/LCPDiscovery.d.ts +13 -0
  37. package/models/trace/insights/LCPDiscovery.js +60 -0
  38. package/models/trace/insights/LCPDiscovery.js.map +1 -0
  39. package/models/trace/insights/LCPPhases.d.ts +34 -0
  40. package/models/trace/insights/LCPPhases.js +97 -0
  41. package/models/trace/insights/LCPPhases.js.map +1 -0
  42. package/models/trace/insights/Models.d.ts +10 -0
  43. package/models/trace/insights/Models.js +14 -0
  44. package/models/trace/insights/Models.js.map +1 -0
  45. package/models/trace/insights/RenderBlocking.d.ts +4 -4
  46. package/models/trace/insights/RenderBlocking.js +1 -16
  47. package/models/trace/insights/RenderBlocking.js.map +1 -1
  48. package/models/trace/insights/SlowCSSSelector.d.ts +3 -3
  49. package/models/trace/insights/SlowCSSSelector.js.map +1 -1
  50. package/models/trace/insights/ThirdParties.d.ts +13 -0
  51. package/models/trace/insights/ThirdParties.js +42 -0
  52. package/models/trace/insights/ThirdParties.js.map +1 -0
  53. package/models/trace/insights/Viewport.d.ts +3 -3
  54. package/models/trace/insights/Viewport.js.map +1 -1
  55. package/models/trace/insights/insights-tsconfig.json +5 -4
  56. package/models/trace/insights/insights.d.ts +1 -1
  57. package/models/trace/insights/insights.js +1 -1
  58. package/models/trace/insights/insights.js.map +1 -1
  59. package/models/trace/insights/types.d.ts +9 -9
  60. package/models/trace/insights/types.js.map +1 -1
  61. package/models/trace/trace-tsconfig.json +6 -0
  62. package/models/trace/types/TraceEvents.d.ts +22 -5
  63. package/models/trace/types/TraceEvents.js +5 -3
  64. package/models/trace/types/TraceEvents.js.map +1 -1
  65. package/package.json +1 -1
  66. package/test/test-trace-engine.mjs +12 -16
@@ -1,7 +1,7 @@
1
1
  import type * as Handlers from '../handlers/handlers.js';
2
2
  import type * as Lantern from '../lantern/lantern.js';
3
3
  import type * as Types from '../types/types.js';
4
- import type * as InsightsRunners from './InsightRunners.js';
4
+ import type * as Models from './Models.js';
5
5
  /**
6
6
  * Context for the portion of the trace an insight should look at.
7
7
  */
@@ -23,7 +23,7 @@ export interface LanternContext {
23
23
  simulator: Lantern.Simulation.Simulator<Types.Events.SyntheticNetworkRequest>;
24
24
  metrics: Record<string, Lantern.Metrics.MetricResult>;
25
25
  }
26
- export type InsightRunnersType = typeof InsightsRunners;
26
+ export type InsightModelsType = typeof Models;
27
27
  export declare enum InsightWarning {
28
28
  NO_FP = "NO_FP",
29
29
  NO_LCP = "NO_LCP",
@@ -37,7 +37,7 @@ export interface MetricSavings {
37
37
  CLS?: number;
38
38
  INP?: Types.Timing.MilliSeconds;
39
39
  }
40
- export type InsightResult<R extends Record<string, unknown>> = R & {
40
+ export type InsightModel<R extends Record<string, unknown>> = R & {
41
41
  relatedEvents?: Types.Events.Event[];
42
42
  warnings?: InsightWarning[];
43
43
  metricSavings?: MetricSavings;
@@ -47,21 +47,21 @@ export type InsightResult<R extends Record<string, unknown>> = R & {
47
47
  * this could instead represent the duration from the beginning of the trace up to the first recorded
48
48
  * navigation (or the end of the trace).
49
49
  */
50
- export type InsightSets = {
50
+ export type InsightSet = {
51
51
  /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
52
52
  id: Types.Events.NavigationId;
53
53
  /** The URL to show in the accordion list. */
54
54
  url: URL;
55
55
  frameId: string;
56
56
  bounds: Types.Timing.TraceWindowMicroSeconds;
57
- data: InsightResults;
57
+ model: InsightModels;
58
58
  navigation?: Types.Events.NavigationStart;
59
59
  };
60
60
  /**
61
- * Contains insights for a specific navigation.
61
+ * Contains insights for a specific insight set.
62
62
  */
63
- export type InsightResults = {
64
- [I in keyof InsightRunnersType]: ReturnType<InsightRunnersType[I]['generateInsight']>;
63
+ export type InsightModels = {
64
+ [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;
65
65
  };
66
66
  /**
67
67
  * Contains insights for the entire trace. Insights are mostly grouped by `navigationId`, with one exception:
@@ -69,7 +69,7 @@ export type InsightResults = {
69
69
  * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no
70
70
  * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.
71
71
  */
72
- export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSets>;
72
+ export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;
73
73
  /**
74
74
  * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.
75
75
  */
@@ -1 +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"]}
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 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 type InsightModel<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 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"]}
@@ -47,6 +47,12 @@
47
47
  {
48
48
  "path": "../../core/sdk/bundle-tsconfig.json"
49
49
  },
50
+ {
51
+ "path": "../../generated/protocol-tsconfig.json"
52
+ },
53
+ {
54
+ "path": "../cpu_profile/bundle-tsconfig.json"
55
+ },
50
56
  {
51
57
  "path": "extras/bundle-tsconfig.json"
52
58
  },
@@ -26,6 +26,9 @@ export declare const enum Phase {
26
26
  MARK = "R",
27
27
  CLOCK_SYNC = "c"
28
28
  }
29
+ export type NonEmptyString = string & {
30
+ _tag: 'NonEmptyString';
31
+ };
29
32
  export declare function isNestableAsyncPhase(phase: Phase): boolean;
30
33
  export declare function isPhaseAsync(phase: Phase): boolean;
31
34
  export declare function isFlowPhase(phase: Phase): boolean;
@@ -452,11 +455,12 @@ export interface ProcessName extends Metadata {
452
455
  export interface Mark extends Event {
453
456
  ph: Phase.MARK;
454
457
  }
455
- export interface NavigationStart extends Mark {
458
+ export interface NavigationStartUnreliable extends Mark {
456
459
  name: 'navigationStart';
457
460
  args: Args & {
458
461
  data?: ArgsData & {
459
- documentLoaderURL: string;
462
+ /** An empty documentLoaderURL means this navigationStart is unreliable noise and can be ignored. */
463
+ documentLoaderURL: never;
460
464
  isLoadingMainFrame: boolean;
461
465
  isOutermostMainFrame?: boolean;
462
466
  navigationId: string;
@@ -468,6 +472,14 @@ export interface NavigationStart extends Mark {
468
472
  frame: string;
469
473
  };
470
474
  }
475
+ export interface NavigationStart extends NavigationStartUnreliable {
476
+ args: NavigationStartUnreliable['args'] & {
477
+ data: NavigationStartUnreliable['args']['data'] & {
478
+ /** This navigationStart is valid, as the documentLoaderURL isn't empty. */
479
+ documentLoaderURL: NonEmptyString;
480
+ };
481
+ };
482
+ }
471
483
  export interface FirstContentfulPaint extends Mark {
472
484
  name: Name.MARK_FCP;
473
485
  args: Args & {
@@ -752,8 +764,9 @@ export interface ResourceChangePriority extends Instant {
752
764
  };
753
765
  };
754
766
  }
767
+ /** Only sent for navigations. https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/devtools_instrumentation.cc;l=1612-1647;drc=ec7daf93d0479b758610c75f4e146fd4d2d6ed2b */
755
768
  export interface ResourceWillSendRequest extends Instant {
756
- name: 'ResourceWillSendRequest';
769
+ name: Name.RESOURCE_WILL_SEND_REQUEST;
757
770
  args: Args & {
758
771
  data: ArgsData & {
759
772
  requestId: string;
@@ -782,6 +795,7 @@ export interface ResourceReceivedData extends Instant {
782
795
  };
783
796
  };
784
797
  }
798
+ /** See https://mdn.github.io/shared-assets/images/diagrams/api/performance/timestamp-diagram.svg */
785
799
  interface ResourceReceiveResponseTimingData {
786
800
  connectEnd: MilliSeconds;
787
801
  connectStart: MilliSeconds;
@@ -793,6 +807,7 @@ interface ResourceReceiveResponseTimingData {
793
807
  pushStart: MilliSeconds;
794
808
  receiveHeadersEnd: MilliSeconds;
795
809
  receiveHeadersStart: MilliSeconds;
810
+ /** When the network service is about to handle a request, ie. just before going to the HTTP cache or going to the network for DNS/connection setup. */
796
811
  requestTime: Seconds;
797
812
  sendEnd: MilliSeconds;
798
813
  sendStart: MilliSeconds;
@@ -1448,7 +1463,8 @@ export declare function isProcessName(event: Event): event is ProcessName;
1448
1463
  export declare function isTracingStartedInBrowser(event: Event): event is TracingStartedInBrowser;
1449
1464
  export declare function isFrameCommittedInBrowser(event: Event): event is FrameCommittedInBrowser;
1450
1465
  export declare function isCommitLoad(event: Event): event is CommitLoad;
1451
- export declare function isNavigationStart(event: Event): event is NavigationStart;
1466
+ /** @deprecated You probably want `isNavigationStart` instead. */
1467
+ export declare function isNavigationStartUnreliable(event: Event): event is NavigationStartUnreliable;
1452
1468
  export declare function isAnimation(event: Event): event is Animation;
1453
1469
  export declare function isSyntheticAnimation(event: Event): event is SyntheticAnimationPair;
1454
1470
  export declare function isLayoutShift(event: Event): event is LayoutShift;
@@ -1479,7 +1495,8 @@ export declare function isSyntheticNetworkRequest(event: Event): event is Synthe
1479
1495
  export declare function isSyntheticWebSocketConnection(event: Event): event is SyntheticWebSocketConnection;
1480
1496
  export declare function isNetworkTrackEntry(event: Event): event is SyntheticWebSocketConnection | SyntheticNetworkRequest;
1481
1497
  export declare function isPrePaint(event: Event): event is PrePaint;
1482
- export declare function isNavigationStartWithURL(event: Event): event is NavigationStart;
1498
+ /** A VALID navigation start (as it has a populated documentLoaderURL) */
1499
+ export declare function isNavigationStart(event: Event): event is NavigationStart;
1483
1500
  export declare function isMainFrameViewport(event: Event): event is MainFrameViewport;
1484
1501
  export declare function isSyntheticUserTiming(event: Event): event is SyntheticUserTimingPair;
1485
1502
  export declare function isSyntheticConsoleTiming(event: Event): event is SyntheticConsoleTimingPair;
@@ -246,7 +246,8 @@ export function isFrameCommittedInBrowser(event) {
246
246
  export function isCommitLoad(event) {
247
247
  return event.name === 'CommitLoad';
248
248
  }
249
- export function isNavigationStart(event) {
249
+ /** @deprecated You probably want `isNavigationStart` instead. */
250
+ export function isNavigationStartUnreliable(event) {
250
251
  return event.name === 'navigationStart';
251
252
  }
252
253
  export function isAnimation(event) {
@@ -347,8 +348,9 @@ export function isNetworkTrackEntry(event) {
347
348
  export function isPrePaint(event) {
348
349
  return event.name === 'PrePaint';
349
350
  }
350
- export function isNavigationStartWithURL(event) {
351
- return Boolean(isNavigationStart(event) && event.args.data && event.args.data.documentLoaderURL !== '');
351
+ /** A VALID navigation start (as it has a populated documentLoaderURL) */
352
+ export function isNavigationStart(event) {
353
+ return Boolean(isNavigationStartUnreliable(event) && event.args.data && event.args.data.documentLoaderURL !== '');
352
354
  }
353
355
  export function isMainFrameViewport(event) {
354
356
  return event.name === 'PaintTimingVisualizer::Viewport';