@paulirish/trace_engine 0.0.32 → 0.0.34

package/models/trace/handlers/InvalidationsHandler.js

@@ -4,6 +4,7 @@
 import * as Types from '../types/types.js';
 let handlerState = 1 /* HandlerState.UNINITIALIZED */;
 const invalidationsForEvent = new Map();
+const invalidationCountForEvent = new Map();
 let lastRecalcStyleEvent = null;
 // Used to track paints so we track invalidations correctly per paint.
 let hasPainted = false;
@@ -14,6 +15,11 @@ export function reset() {
     lastRecalcStyleEvent = null;
     allInvalidationTrackingEvents.length = 0;
     hasPainted = false;
+    maxInvalidationsPerEvent = null;
+}
+let maxInvalidationsPerEvent = null;
+export function handleUserConfig(userConfig) {
+    maxInvalidationsPerEvent = userConfig.maxInvalidationEventsPerEvent;
 }
 export function initialize() {
     if (handlerState !== 1 /* HandlerState.UNINITIALIZED */) {
@@ -24,14 +30,25 @@ export function initialize() {
 function addInvalidationToEvent(event, invalidation) {
     const existingInvalidations = invalidationsForEvent.get(event) || [];
     existingInvalidations.push(invalidation);
+    if (maxInvalidationsPerEvent !== null && existingInvalidations.length > maxInvalidationsPerEvent) {
+        existingInvalidations.shift();
+    }
     invalidationsForEvent.set(event, existingInvalidations);
+    const count = invalidationCountForEvent.get(event) ?? 0;
+    invalidationCountForEvent.set(event, count + 1);
 }
 export function handleEvent(event) {
-    if (Types.TraceEvents.isTraceEventUpdateLayoutTree(event)) {
+    // Special case: if we have been configured to not store any invalidations,
+    // we take that as a sign that we don't even want to gather any invalidations
+    // data at all and early exit.
+    if (maxInvalidationsPerEvent === 0) {
+        return;
+    }
+    if (Types.Events.isUpdateLayoutTree(event)) {
         lastRecalcStyleEvent = event;
         // Associate any prior invalidations with this recalc event.
         for (const invalidation of allInvalidationTrackingEvents) {
-            if (Types.TraceEvents.isTraceEventLayoutInvalidationTracking(invalidation)) {
+            if (Types.Events.isLayoutInvalidationTracking(invalidation)) {
                 // LayoutInvalidation events cannot be associated with a LayoutTree
                 // event.
                 continue;
@@ -43,7 +60,7 @@ export function handleEvent(event) {
         }
         return;
     }
-    if (Types.TraceEvents.isTraceEventInvalidationTracking(event)) {
+    if (Types.Events.isInvalidationTracking(event)) {
         if (hasPainted) {
             // If we have painted, then we can clear out the list of all existing
             // invalidations, as we cannot associate them across frames.
@@ -51,15 +68,15 @@ export function handleEvent(event) {
             lastRecalcStyleEvent = null;
             hasPainted = false;
         }
-        // Style invalidation events can occur before and during recalc styles. When we get a recalc style event (aka TraceEventUpdateLayoutTree), we check and associate any prior invalidations with it.
-        // But any invalidations that occur during a TraceEventUpdateLayoutTree
+        // Style invalidation events can occur before and during recalc styles. When we get a recalc style event (aka UpdateLayoutTree), we check and associate any prior invalidations with it.
+        // But any invalidations that occur during a UpdateLayoutTree
         // event would be reported in trace events after. So each time we get an
         // invalidation that might be due to a style recalc, we check if the
         // timings overlap and if so associate them.
         if (lastRecalcStyleEvent &&
-            (Types.TraceEvents.isTraceEventScheduleStyleInvalidationTracking(event) ||
-                Types.TraceEvents.isTraceEventStyleRecalcInvalidationTracking(event) ||
-                Types.TraceEvents.isTraceEventStyleInvalidatorInvalidationTracking(event))) {
+            (Types.Events.isScheduleStyleInvalidationTracking(event) ||
+                Types.Events.isStyleRecalcInvalidationTracking(event) ||
+                Types.Events.isStyleInvalidatorInvalidationTracking(event))) {
             const recalcEndTime = lastRecalcStyleEvent.ts + (lastRecalcStyleEvent.dur || 0);
             if (event.ts >= lastRecalcStyleEvent.ts && event.ts <= recalcEndTime &&
                 lastRecalcStyleEvent.args.beginData?.frame === event.args.data.frame) {
@@ -69,16 +86,16 @@ export function handleEvent(event) {
         allInvalidationTrackingEvents.push(event);
         return;
     }
-    if (Types.TraceEvents.isTraceEventPaint(event)) {
+    if (Types.Events.isPaint(event)) {
         // Used to ensure that we do not create relationships across frames.
         hasPainted = true;
         return;
     }
-    if (Types.TraceEvents.isTraceEventLayout(event)) {
+    if (Types.Events.isLayout(event)) {
         const layoutFrame = event.args.beginData.frame;
         for (const invalidation of allInvalidationTrackingEvents) {
             // The only invalidations that cause a Layout are LayoutInvalidations :)
-            if (!Types.TraceEvents.isTraceEventLayoutInvalidationTracking(invalidation)) {
+            if (!Types.Events.isLayoutInvalidationTracking(invalidation)) {
                 continue;
             }
             if (invalidation.args.data.frame === layoutFrame) {
@@ -96,6 +113,7 @@ export async function finalize() {
 export function data() {
     return {
         invalidationsForEvent,
+        invalidationCountForEvent,
     };
 }
 //# sourceMappingURL=InvalidationsHandler.js.map

package/models/trace/handlers/InvalidationsHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvalidationsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/InvalidationsHandler.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAI3C,IAAI,YAAY,qCAA6B,CAAC;AAE9C,MAAM,qBAAqB,GACvB,IAAI,GAAG,EAAmF,CAAC;AAE/F,IAAI,oBAAoB,GAAsD,IAAI,CAAC;AAEnF,sEAAsE;AACtE,IAAI,UAAU,GAAG,KAAK,CAAC;AAEvB,MAAM,6BAA6B,GAAuD,EAAE,CAAC;AAE7F,MAAM,UAAU,KAAK;IACnB,YAAY,qCAA6B,CAAC;IAC1C,qBAAqB,CAAC,KAAK,EAAE,CAAC;IAC9B,oBAAoB,GAAG,IAAI,CAAC;IAC5B,6BAA6B,CAAC,MAAM,GAAG,CAAC,CAAC;IACzC,UAAU,GAAG,KAAK,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,IAAI,YAAY,uCAA+B,EAAE,CAAC;QAChD,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAC;IACjF,CAAC;IAED,YAAY,mCAA2B,CAAC;AAC1C,CAAC;AAED,SAAS,sBAAsB,CAC3B,KAAuC,EAAE,YAAyD;IACpG,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACrE,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACzC,qBAAqB,CAAC,GAAG,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuC;IACjE,IAAI,KAAK,CAAC,WAAW,CAAC,4BAA4B,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1D,oBAAoB,GAAG,KAAK,CAAC;QAE7B,4DAA4D;QAC5D,KAAK,MAAM,YAAY,IAAI,6BAA6B,EAAE,CAAC;YACzD,IAAI,KAAK,CAAC,WAAW,CAAC,sCAAsC,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC3E,mEAAmE;gBACnE,SAAS;gBACT,SAAS;YACX,CAAC;YAED,MAAM,aAAa,GAAG,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;YAEjE,IAAI,aAAa,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,aAAa,EAAE,CAAC;gBACpE,sBAAsB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QACD,OAAO;IACT,CAAC;IAED,IAAI,KAAK,CAAC,WAAW,CAAC,gCAAgC,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9D,IAAI,UAAU,EAAE,CAAC;YACf,qEAAqE;YACrE,4DAA4D;YAC5D,6BAA6B,CAAC,MAAM,GAAG,CAAC,CAAC;YACzC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,UAAU,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,kMAAkM;QAClM,uEAAuE;QACvE,wEAAwE;QACxE,oEAAoE;QACpE,4CAA4C;QAC5C,IAAI,oBAAoB;YACpB,CAAC,KAAK,CAAC,WAAW,CAAC,6CAA6C,CAAC,KAAK,CAAC;gBACtE,KAAK,CAAC,WAAW,CAAC,2CAA2C,CAAC,KAAK,CAAC;gBACpE,KAAK,CAAC,WAAW,CAAC,gDAAgD,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAChF,MAAM,aAAa,GAAG,oBAAoB,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;YAChF,IAAI,KAAK,CAAC,EAAE,IAAI,oBAAoB,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,IAAI,aAAa;gBAChE,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACzE,sBAAsB,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YACtD,CAAC;QACH,CAAC;QAED,6BAA6B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,OAAO;IACT,CAAC;IAED,IAAI,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;QAC/C,oEAAoE;QACpE,UAAU,GAAG,IAAI,CAAC;QAClB,OAAO;IACT,CAAC;IAED,IAAI,KAAK,CAAC,WAAW,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;QAChD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QAC/C,KAAK,MAAM,YAAY,IAAI,6BAA6B,EAAE,CAAC;YACzD,wEAAwE;YACxE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sCAAsC,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC5E,SAAS;YACX,CAAC;YAED,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;gBACjD,sBAAsB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,QAAQ;IAC5B,IAAI,YAAY,qCAA6B,EAAE,CAAC;QAC9C,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;IAC7D,CAAC;IAED,YAAY,iCAAyB,CAAC;AACxC,CAAC;AAMD,MAAM,UAAU,IAAI;IAClB,OAAO;QACL,qBAAqB;KACtB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright 2023 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 Types from '../types/types.js';\n\nimport {HandlerState} from './types.js';\n\nlet handlerState = HandlerState.UNINITIALIZED;\n\nconst invalidationsForEvent =\n    new Map<Types.TraceEvents.TraceEventData, Types.TraceEvents.InvalidationTrackingEvent[]>();\n\nlet lastRecalcStyleEvent: Types.TraceEvents.TraceEventUpdateLayoutTree|null = null;\n\n// Used to track paints so we track invalidations correctly per paint.\nlet hasPainted = false;\n\nconst allInvalidationTrackingEvents: Array<Types.TraceEvents.InvalidationTrackingEvent> = [];\n\nexport function reset(): void {\n  handlerState = HandlerState.UNINITIALIZED;\n  invalidationsForEvent.clear();\n  lastRecalcStyleEvent = null;\n  allInvalidationTrackingEvents.length = 0;\n  hasPainted = false;\n}\n\nexport function initialize(): void {\n  if (handlerState !== HandlerState.UNINITIALIZED) {\n    throw new Error('InvalidationsHandler was not reset before being initialized');\n  }\n\n  handlerState = HandlerState.INITIALIZED;\n}\n\nfunction addInvalidationToEvent(\n    event: Types.TraceEvents.TraceEventData, invalidation: Types.TraceEvents.InvalidationTrackingEvent): void {\n  const existingInvalidations = invalidationsForEvent.get(event) || [];\n  existingInvalidations.push(invalidation);\n  invalidationsForEvent.set(event, existingInvalidations);\n}\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  if (Types.TraceEvents.isTraceEventUpdateLayoutTree(event)) {\n    lastRecalcStyleEvent = event;\n\n    // Associate any prior invalidations with this recalc event.\n    for (const invalidation of allInvalidationTrackingEvents) {\n      if (Types.TraceEvents.isTraceEventLayoutInvalidationTracking(invalidation)) {\n        // LayoutInvalidation events cannot be associated with a LayoutTree\n        // event.\n        continue;\n      }\n\n      const recalcFrameId = lastRecalcStyleEvent.args.beginData?.frame;\n\n      if (recalcFrameId && invalidation.args.data.frame === recalcFrameId) {\n        addInvalidationToEvent(event, invalidation);\n      }\n    }\n    return;\n  }\n\n  if (Types.TraceEvents.isTraceEventInvalidationTracking(event)) {\n    if (hasPainted) {\n      // If we have painted, then we can clear out the list of all existing\n      // invalidations, as we cannot associate them across frames.\n      allInvalidationTrackingEvents.length = 0;\n      lastRecalcStyleEvent = null;\n      hasPainted = false;\n    }\n\n    // Style invalidation events can occur before and during recalc styles. When we get a recalc style event (aka TraceEventUpdateLayoutTree), we check and associate any prior invalidations with it.\n    // But any invalidations that occur during a TraceEventUpdateLayoutTree\n    // event would be reported in trace events after. So each time we get an\n    // invalidation that might be due to a style recalc, we check if the\n    // timings overlap and if so associate them.\n    if (lastRecalcStyleEvent &&\n        (Types.TraceEvents.isTraceEventScheduleStyleInvalidationTracking(event) ||\n         Types.TraceEvents.isTraceEventStyleRecalcInvalidationTracking(event) ||\n         Types.TraceEvents.isTraceEventStyleInvalidatorInvalidationTracking(event))) {\n      const recalcEndTime = lastRecalcStyleEvent.ts + (lastRecalcStyleEvent.dur || 0);\n      if (event.ts >= lastRecalcStyleEvent.ts && event.ts <= recalcEndTime &&\n          lastRecalcStyleEvent.args.beginData?.frame === event.args.data.frame) {\n        addInvalidationToEvent(lastRecalcStyleEvent, event);\n      }\n    }\n\n    allInvalidationTrackingEvents.push(event);\n    return;\n  }\n\n  if (Types.TraceEvents.isTraceEventPaint(event)) {\n    // Used to ensure that we do not create relationships across frames.\n    hasPainted = true;\n    return;\n  }\n\n  if (Types.TraceEvents.isTraceEventLayout(event)) {\n    const layoutFrame = event.args.beginData.frame;\n    for (const invalidation of allInvalidationTrackingEvents) {\n      // The only invalidations that cause a Layout are LayoutInvalidations :)\n      if (!Types.TraceEvents.isTraceEventLayoutInvalidationTracking(invalidation)) {\n        continue;\n      }\n\n      if (invalidation.args.data.frame === layoutFrame) {\n        addInvalidationToEvent(event, invalidation);\n      }\n    }\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('InvalidationsHandler is not initialized');\n  }\n\n  handlerState = HandlerState.FINALIZED;\n}\n\ninterface InvalidationsData {\n  invalidationsForEvent: Map<Types.TraceEvents.TraceEventData, Types.TraceEvents.InvalidationTrackingEvent[]>;\n}\n\nexport function data(): InvalidationsData {\n  return {\n    invalidationsForEvent,\n  };\n}\n"]}
+{"version":3,"file":"InvalidationsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/InvalidationsHandler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2023 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 Types from '../types/types.js';\n\nimport {HandlerState} from './types.js';\n\nlet handlerState = HandlerState.UNINITIALIZED;\n\nconst invalidationsForEvent = new Map<Types.Events.Event, Types.Events.InvalidationTrackingEvent[]>();\nconst invalidationCountForEvent = new Map<Types.Events.Event, number>();\n\nlet lastRecalcStyleEvent: Types.Events.UpdateLayoutTree|null = null;\n\n// Used to track paints so we track invalidations correctly per paint.\nlet hasPainted = false;\n\nconst allInvalidationTrackingEvents: Array<Types.Events.InvalidationTrackingEvent> = [];\n\nexport function reset(): void {\n  handlerState = HandlerState.UNINITIALIZED;\n  invalidationsForEvent.clear();\n  lastRecalcStyleEvent = null;\n  allInvalidationTrackingEvents.length = 0;\n  hasPainted = false;\n  maxInvalidationsPerEvent = null;\n}\n\nlet maxInvalidationsPerEvent: number|null = null;\nexport function handleUserConfig(userConfig: Types.Configuration.Configuration): void {\n  maxInvalidationsPerEvent = userConfig.maxInvalidationEventsPerEvent;\n}\n\nexport function initialize(): void {\n  if (handlerState !== HandlerState.UNINITIALIZED) {\n    throw new Error('InvalidationsHandler was not reset before being initialized');\n  }\n\n  handlerState = HandlerState.INITIALIZED;\n}\n\nfunction addInvalidationToEvent(event: Types.Events.Event, invalidation: Types.Events.InvalidationTrackingEvent): void {\n  const existingInvalidations = invalidationsForEvent.get(event) || [];\n  existingInvalidations.push(invalidation);\n\n  if (maxInvalidationsPerEvent !== null && existingInvalidations.length > maxInvalidationsPerEvent) {\n    existingInvalidations.shift();\n  }\n  invalidationsForEvent.set(event, existingInvalidations);\n\n  const count = invalidationCountForEvent.get(event) ?? 0;\n  invalidationCountForEvent.set(event, count + 1);\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  // Special case: if we have been configured to not store any invalidations,\n  // we take that as a sign that we don't even want to gather any invalidations\n  // data at all and early exit.\n  if (maxInvalidationsPerEvent === 0) {\n    return;\n  }\n\n  if (Types.Events.isUpdateLayoutTree(event)) {\n    lastRecalcStyleEvent = event;\n\n    // Associate any prior invalidations with this recalc event.\n    for (const invalidation of allInvalidationTrackingEvents) {\n      if (Types.Events.isLayoutInvalidationTracking(invalidation)) {\n        // LayoutInvalidation events cannot be associated with a LayoutTree\n        // event.\n        continue;\n      }\n\n      const recalcFrameId = lastRecalcStyleEvent.args.beginData?.frame;\n\n      if (recalcFrameId && invalidation.args.data.frame === recalcFrameId) {\n        addInvalidationToEvent(event, invalidation);\n      }\n    }\n    return;\n  }\n\n  if (Types.Events.isInvalidationTracking(event)) {\n    if (hasPainted) {\n      // If we have painted, then we can clear out the list of all existing\n      // invalidations, as we cannot associate them across frames.\n      allInvalidationTrackingEvents.length = 0;\n      lastRecalcStyleEvent = null;\n      hasPainted = false;\n    }\n\n    // Style invalidation events can occur before and during recalc styles. When we get a recalc style event (aka UpdateLayoutTree), we check and associate any prior invalidations with it.\n    // But any invalidations that occur during a UpdateLayoutTree\n    // event would be reported in trace events after. So each time we get an\n    // invalidation that might be due to a style recalc, we check if the\n    // timings overlap and if so associate them.\n    if (lastRecalcStyleEvent &&\n        (Types.Events.isScheduleStyleInvalidationTracking(event) ||\n         Types.Events.isStyleRecalcInvalidationTracking(event) ||\n         Types.Events.isStyleInvalidatorInvalidationTracking(event))) {\n      const recalcEndTime = lastRecalcStyleEvent.ts + (lastRecalcStyleEvent.dur || 0);\n      if (event.ts >= lastRecalcStyleEvent.ts && event.ts <= recalcEndTime &&\n          lastRecalcStyleEvent.args.beginData?.frame === event.args.data.frame) {\n        addInvalidationToEvent(lastRecalcStyleEvent, event);\n      }\n    }\n\n    allInvalidationTrackingEvents.push(event);\n    return;\n  }\n\n  if (Types.Events.isPaint(event)) {\n    // Used to ensure that we do not create relationships across frames.\n    hasPainted = true;\n    return;\n  }\n\n  if (Types.Events.isLayout(event)) {\n    const layoutFrame = event.args.beginData.frame;\n    for (const invalidation of allInvalidationTrackingEvents) {\n      // The only invalidations that cause a Layout are LayoutInvalidations :)\n      if (!Types.Events.isLayoutInvalidationTracking(invalidation)) {\n        continue;\n      }\n\n      if (invalidation.args.data.frame === layoutFrame) {\n        addInvalidationToEvent(event, invalidation);\n      }\n    }\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('InvalidationsHandler is not initialized');\n  }\n\n  handlerState = HandlerState.FINALIZED;\n}\n\ninterface InvalidationsData {\n  invalidationsForEvent: Map<Types.Events.Event, Types.Events.InvalidationTrackingEvent[]>;\n  invalidationCountForEvent: Map<Types.Events.Event, number>;\n}\n\nexport function data(): InvalidationsData {\n  return {\n    invalidationsForEvent,\n    invalidationCountForEvent,\n  };\n}\n"]}

package/models/trace/handlers/LargestImagePaintHandler.d.ts

@@ -1,5 +1,5 @@
 import * as Types from '../types/types.js';
 import type * as Protocol from '../../../generated/protocol.js';
 export declare function reset(): void;
-export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
-export declare function data(): Map<Protocol.DOM.BackendNodeId, Types.TraceEvents.TraceEventLargestImagePaintCandidate>;
+export declare function handleEvent(event: Types.Events.Event): void;
+export declare function data(): Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>;

package/models/trace/handlers/LargestImagePaintHandler.js

@@ -24,7 +24,7 @@ export function reset() {
     imageByDOMNodeId.clear();
 }
 export function handleEvent(event) {
-    if (!Types.TraceEvents.isTraceEventLargestImagePaintCandidate(event)) {
+    if (!Types.Events.isLargestImagePaintCandidate(event)) {
         return;
     }
     if (!event.args.data) {

package/models/trace/handlers/LargestImagePaintHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"LargestImagePaintHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LargestImagePaintHandler.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C;;;;;;;;;;;;;;;;IAgBI;AACJ,MAAM,gBAAgB,GAAG,IAAI,GAAG,EAAsF,CAAC;AAEvH,MAAM,UAAU,KAAK;IACnB,gBAAgB,CAAC,KAAK,EAAE,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuC;IACjE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sCAAsC,CAAC,KAAK,CAAC,EAAE,CAAC;QACrE,OAAO;IACT,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IAED,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,OAAO,gBAAgB,CAAC;AAC1B,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\nimport * as Types from '../types/types.js';\nimport type * as Protocol from '../../../generated/protocol.js';\n/**\n * If the LCP resource was an image, and that image was fetched over the\n * network, we want to be able to find the network request in order to construct\n * the critical path for an LCP image.\n * Within the trace file there are `LargestImagePaint::Candidate` events.\n * Within their data object, they contain a `DOMNodeId` property, which maps to\n * the DOM Node ID for that image.\n *\n * This id maps exactly to the `data.nodeId` property that a\n * `LargestContentfulPaint::Candidate` will have. So, when we find an image\n * paint candidate, we can store it, keying it on the node ID.\n * Then, when it comes to finding the network request for an LCP image, we can\n *\n * use the nodeId from the LCP candidate to find the image candidate. That image\n * candidate also contains a `imageUrl` property, which will have the full URL\n * to the image.\n **/\nconst imageByDOMNodeId = new Map<Protocol.DOM.BackendNodeId, Types.TraceEvents.TraceEventLargestImagePaintCandidate>();\n\nexport function reset(): void {\n  imageByDOMNodeId.clear();\n}\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  if (!Types.TraceEvents.isTraceEventLargestImagePaintCandidate(event)) {\n    return;\n  }\n\n  if (!event.args.data) {\n    return;\n  }\n\n  imageByDOMNodeId.set(event.args.data.DOMNodeId, event);\n}\n\nexport function data(): Map<Protocol.DOM.BackendNodeId, Types.TraceEvents.TraceEventLargestImagePaintCandidate> {\n  return imageByDOMNodeId;\n}\n"]}
+{"version":3,"file":"LargestImagePaintHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LargestImagePaintHandler.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C;;;;;;;;;;;;;;;;IAgBI;AACJ,MAAM,gBAAgB,GAAG,IAAI,GAAG,EAAuE,CAAC;AAExG,MAAM,UAAU,KAAK;IACnB,gBAAgB,CAAC,KAAK,EAAE,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAyB;IACnD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAAK,CAAC,EAAE,CAAC;QACtD,OAAO;IACT,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IAED,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,OAAO,gBAAgB,CAAC;AAC1B,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\nimport * as Types from '../types/types.js';\nimport type * as Protocol from '../../../generated/protocol.js';\n/**\n * If the LCP resource was an image, and that image was fetched over the\n * network, we want to be able to find the network request in order to construct\n * the critical path for an LCP image.\n * Within the trace file there are `LargestImagePaint::Candidate` events.\n * Within their data object, they contain a `DOMNodeId` property, which maps to\n * the DOM Node ID for that image.\n *\n * This id maps exactly to the `data.nodeId` property that a\n * `LargestContentfulPaint::Candidate` will have. So, when we find an image\n * paint candidate, we can store it, keying it on the node ID.\n * Then, when it comes to finding the network request for an LCP image, we can\n *\n * use the nodeId from the LCP candidate to find the image candidate. That image\n * candidate also contains a `imageUrl` property, which will have the full URL\n * to the image.\n **/\nconst imageByDOMNodeId = new Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>();\n\nexport function reset(): void {\n  imageByDOMNodeId.clear();\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (!Types.Events.isLargestImagePaintCandidate(event)) {\n    return;\n  }\n\n  if (!event.args.data) {\n    return;\n  }\n\n  imageByDOMNodeId.set(event.args.data.DOMNodeId, event);\n}\n\nexport function data(): Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate> {\n  return imageByDOMNodeId;\n}\n"]}

package/models/trace/handlers/LargestTextPaintHandler.d.ts

@@ -1,5 +1,5 @@
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
 export declare function reset(): void;
-export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
-export declare function data(): Map<Protocol.DOM.BackendNodeId, Types.TraceEvents.TraceEventLargestTextPaintCandidate>;
+export declare function handleEvent(event: Types.Events.Event): void;
+export declare function data(): Map<Protocol.DOM.BackendNodeId, Types.Events.LargestTextPaintCandidate>;

package/models/trace/handlers/LargestTextPaintHandler.js

@@ -12,7 +12,7 @@ export function reset() {
     textPaintByDOMNodeId.clear();
 }
 export function handleEvent(event) {
-    if (!Types.TraceEvents.isTraceEventLargestTextPaintCandidate(event)) {
+    if (!Types.Events.isLargestTextPaintCandidate(event)) {
         return;
     }
     if (!event.args.data) {

package/models/trace/handlers/LargestTextPaintHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"LargestTextPaintHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LargestTextPaintHandler.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAC3C;;;;IAII;AACJ,MAAM,oBAAoB,GACtB,IAAI,GAAG,EAAqF,CAAC;AAEjG,MAAM,UAAU,KAAK;IACnB,oBAAoB,CAAC,KAAK,EAAE,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuC;IACjE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,CAAC,KAAK,CAAC,EAAE,CAAC;QACpE,OAAO;IACT,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IAED,oBAAoB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,OAAO,oBAAoB,CAAC;AAC9B,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\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Types from '../types/types.js';\n/**\n * A trace file will contain all the text paints that were candidates for the\n * LargestTextPaint. If an LCP event is text, it will point to one of these\n * candidates, so we store them by their DOM Node ID.\n **/\nconst textPaintByDOMNodeId =\n    new Map<Protocol.DOM.BackendNodeId, Types.TraceEvents.TraceEventLargestTextPaintCandidate>();\n\nexport function reset(): void {\n  textPaintByDOMNodeId.clear();\n}\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  if (!Types.TraceEvents.isTraceEventLargestTextPaintCandidate(event)) {\n    return;\n  }\n\n  if (!event.args.data) {\n    return;\n  }\n\n  textPaintByDOMNodeId.set(event.args.data.DOMNodeId, event);\n}\n\nexport function data(): Map<Protocol.DOM.BackendNodeId, Types.TraceEvents.TraceEventLargestTextPaintCandidate> {\n  return textPaintByDOMNodeId;\n}\n"]}
+{"version":3,"file":"LargestTextPaintHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LargestTextPaintHandler.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAC3C;;;;IAII;AACJ,MAAM,oBAAoB,GAAG,IAAI,GAAG,EAAsE,CAAC;AAE3G,MAAM,UAAU,KAAK;IACnB,oBAAoB,CAAC,KAAK,EAAE,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAyB;IACnD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,2BAA2B,CAAC,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO;IACT,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IAED,oBAAoB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,OAAO,oBAAoB,CAAC;AAC9B,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\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Types from '../types/types.js';\n/**\n * A trace file will contain all the text paints that were candidates for the\n * LargestTextPaint. If an LCP event is text, it will point to one of these\n * candidates, so we store them by their DOM Node ID.\n **/\nconst textPaintByDOMNodeId = new Map<Protocol.DOM.BackendNodeId, Types.Events.LargestTextPaintCandidate>();\n\nexport function reset(): void {\n  textPaintByDOMNodeId.clear();\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (!Types.Events.isLargestTextPaintCandidate(event)) {\n    return;\n  }\n\n  if (!event.args.data) {\n    return;\n  }\n\n  textPaintByDOMNodeId.set(event.args.data.DOMNodeId, event);\n}\n\nexport function data(): Map<Protocol.DOM.BackendNodeId, Types.Events.LargestTextPaintCandidate> {\n  return textPaintByDOMNodeId;\n}\n"]}

package/models/trace/handlers/LayerTreeHandler.d.ts

@@ -1,13 +1,13 @@
 import * as Types from '../types/types.js';
-import { type TraceEventHandlerName } from './types.js';
+import { type HandlerName } from './types.js';
 export declare function reset(): void;
 export declare function initialize(): void;
-export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
+export declare function handleEvent(event: Types.Events.Event): void;
 export declare function finalize(): Promise<void>;
 export interface LayerTreeData {
-    paints: Types.TraceEvents.TraceEventPaint[];
-    snapshots: Types.TraceEvents.TraceEventDisplayItemListSnapshot[];
-    paintsToSnapshots: Map<Types.TraceEvents.TraceEventPaint, Types.TraceEvents.TraceEventDisplayItemListSnapshot>;
+    paints: Types.Events.Paint[];
+    snapshots: Types.Events.DisplayItemListSnapshot[];
+    paintsToSnapshots: Map<Types.Events.Paint, Types.Events.DisplayItemListSnapshot>;
 }
 export declare function data(): LayerTreeData;
-export declare function deps(): TraceEventHandlerName[];
+export declare function deps(): HandlerName[];

package/models/trace/handlers/LayerTreeHandler.js

@@ -33,8 +33,8 @@ export function handleEvent(event) {
     // is because we need to have all the events before we process them, and we
     // need the Meta handler to be finalized() so we can use its data as we need
     // the mainFrameId to know which Layer(s) to care about.
-    if (Types.TraceEvents.isTraceEventPaint(event) || Types.TraceEvents.isTraceEventDisplayListItemListSnapshot(event) ||
-        Types.TraceEvents.isTraceEventUpdateLayer(event) || Types.TraceEvents.isTraceEventSetLayerId(event)) {
+    if (Types.Events.isPaint(event) || Types.Events.isDisplayListItemListSnapshot(event) ||
+        Types.Events.isUpdateLayer(event) || Types.Events.isSetLayerId(event)) {
         relevantEvents.push(event);
     }
 }
@@ -45,21 +45,21 @@ export async function finalize() {
     const metaData = metaHandlerData();
     Helpers.Trace.sortTraceEventsInPlace(relevantEvents);
     for (const event of relevantEvents) {
-        if (Types.TraceEvents.isTraceEventSetLayerId(event)) {
+        if (Types.Events.isSetLayerId(event)) {
             if (metaData.mainFrameId !== event.args.data.frame) {
                 // We only care about LayerId changes that affect the main frame.
                 continue;
             }
             currentMainFrameLayerTreeId = event.args.data.layerTreeId;
         }
-        else if (Types.TraceEvents.isTraceEventUpdateLayer(event)) {
+        else if (Types.Events.isUpdateLayer(event)) {
             // We don't do anything with this event, but we need to store it because
             // the information in it determines if we need to care about future
             // snapshot events - we need to know what the active layer is when we see a
             // snapshot.
             updateLayerEvents.push(event);
         }
-        else if (Types.TraceEvents.isTraceEventPaint(event)) {
+        else if (Types.Events.isPaint(event)) {
             if (!event.args.data.layerId) {
                 // Note that this check purposefully includes excluding an event with a layerId of 0.
                 // 0 indicates that this paint was for a subframe - we do not want these
@@ -70,7 +70,7 @@ export async function finalize() {
             lastPaintForLayerId[event.args.data.layerId] = event;
             continue;
         }
-        else if (Types.TraceEvents.isTraceEventDisplayListItemListSnapshot(event)) {
+        else if (Types.Events.isDisplayListItemListSnapshot(event)) {
             // First we figure out which layer is active for this event's thread. To
             // do this we work backwards through the list of UpdateLayerEvents,
             // finding the first one (i.e. the most recent one) with the same pid and

package/models/trace/handlers/LayerTreeHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerTreeHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LayerTreeHandler.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,IAAI,IAAI,eAAe,EAAC,MAAM,kBAAkB,CAAC;AAGzD,IAAI,YAAY,qCAA6B,CAAC;AAE9C,MAAM,WAAW,GAAwC,EAAE,CAAC;AAC5D,MAAM,cAAc,GAA0D,EAAE,CAAC;AACjF,MAAM,kBAAkB,GACpB,IAAI,GAAG,EAA0F,CAAC;AAEtG,IAAI,mBAAmB,GAAsD,EAAE,CAAC;AAEhF,IAAI,2BAA2B,GAAgB,IAAI,CAAC;AACpD,MAAM,iBAAiB,GAA8C,EAAE,CAAC;AAMxE,MAAM,cAAc,GAA6B,EAAE,CAAC;AACpD,MAAM,UAAU,KAAK;IACnB,YAAY,qCAA6B,CAAC;IAC1C,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IACvB,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1B,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,mBAAmB,GAAG,EAAE,CAAC;IACzB,2BAA2B,GAAG,IAAI,CAAC;IACnC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7B,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,IAAI,YAAY,uCAA+B,EAAE,CAAC;QAChD,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IAED,YAAY,mCAA2B,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuC;IACjE,6EAA6E;IAC7E,2EAA2E;IAC3E,4EAA4E;IAC5E,wDAAwD;IACxD,IAAI,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,uCAAuC,CAAC,KAAK,CAAC;QAC9G,KAAK,CAAC,WAAW,CAAC,uBAAuB,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC;QACxG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,QAAQ;IAC5B,IAAI,YAAY,qCAA6B,EAAE,CAAC;QAC9C,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAC;IAErD,KAAK,MAAM,KAAK,IAAI,cAAc,EAAE,CAAC;QACnC,IAAI,KAAK,CAAC,WAAW,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC;YACpD,IAAI,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnD,iEAAiE;gBACjE,SAAS;YACX,CAAC;YACD,2BAA2B,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QAC5D,CAAC;aAAM,IAAI,KAAK,CAAC,WAAW,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5D,wEAAwE;YACxE,mEAAmE;YACnE,2EAA2E;YAC3E,YAAY;YACZ,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;aAAM,IAAI,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC7B,qFAAqF;gBACrF,wEAAwE;gBACxE,qDAAqD;gBACrD,SAAS;YACX,CAAC;YACD,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;YACrD,SAAS;QACX,CAAC;aAAM,IAAI,KAAK,CAAC,WAAW,CAAC,uCAAuC,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5E,wEAAwE;YACxE,mEAAmE;YACnE,yEAAyE;YACzE,OAAO;YACP,IAAI,6BAA6B,GAAiD,IAAI,CAAC;YACvF,KAAK,IAAI,CAAC,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACvD,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;gBACzC,IAAI,WAAW,CAAC,GAAG,KAAK,KAAK,CAAC,GAAG,IAAI,WAAW,CAAC,GAAG,KAAK,KAAK,CAAC,GAAG,EAAE,CAAC;oBACnE,6BAA6B,GAAG,WAAW,CAAC;oBAC5C,MAAM;gBACR,CAAC;YACH,CAAC;YACD,IAAI,CAAC,6BAA6B,EAAE,CAAC;gBACnC,qDAAqD;gBACrD,SAAS;YACX,CAAC;YACD,IAAI,6BAA6B,CAAC,IAAI,CAAC,WAAW,KAAK,2BAA2B,EAAE,CAAC;gBACnF,sEAAsE;gBACtE,SAAS;YACX,CAAC;YACD,MAAM,UAAU,GAAG,mBAAmB,CAAC,6BAA6B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnF,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,6CAA6C;gBAC7C,SAAS;YACX,CAAC;YACD,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE3B,6DAA6D;YAC7D,kBAAkB,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,YAAY,iCAAyB,CAAC;AACxC,CAAC;AAQD,MAAM,UAAU,IAAI;IAClB,OAAO;QACL,MAAM,EAAE,WAAW;QACnB,SAAS,EAAE,cAAc;QACzB,iBAAiB,EAAE,kBAAkB;KACtC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,MAAM,CAAC,CAAC;AAClB,CAAC","sourcesContent":["// Copyright 2023 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 * as Types from '../types/types.js';\n\nimport {data as metaHandlerData} from './MetaHandler.js';\nimport {HandlerState, type TraceEventHandlerName} from './types.js';\n\nlet handlerState = HandlerState.UNINITIALIZED;\n\nconst paintEvents: Types.TraceEvents.TraceEventPaint[] = [];\nconst snapshotEvents: Types.TraceEvents.TraceEventDisplayItemListSnapshot[] = [];\nconst paintToSnapshotMap =\n    new Map<Types.TraceEvents.TraceEventPaint, Types.TraceEvents.TraceEventDisplayItemListSnapshot>();\n\nlet lastPaintForLayerId: Record<number, Types.TraceEvents.TraceEventPaint> = {};\n\nlet currentMainFrameLayerTreeId: number|null = null;\nconst updateLayerEvents: Types.TraceEvents.TraceEventUpdateLayer[] = [];\n\ntype RelevantLayerTreeEvent = Types.TraceEvents.TraceEventPaint|\n                              Types.TraceEvents.TraceEventDisplayItemListSnapshot|\n                              Types.TraceEvents.TraceEventUpdateLayer|Types.TraceEvents.TraceEventSetLayerTreeId;\n\nconst relevantEvents: RelevantLayerTreeEvent[] = [];\nexport function reset(): void {\n  handlerState = HandlerState.UNINITIALIZED;\n  paintEvents.length = 0;\n  snapshotEvents.length = 0;\n  paintToSnapshotMap.clear();\n\n  lastPaintForLayerId = {};\n  currentMainFrameLayerTreeId = null;\n  updateLayerEvents.length = 0;\n  relevantEvents.length = 0;\n}\n\nexport function initialize(): void {\n  if (handlerState !== HandlerState.UNINITIALIZED) {\n    throw new Error('LayerTree Handler was not reset before being initialized');\n  }\n\n  handlerState = HandlerState.INITIALIZED;\n}\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  // We gather up the events here but do all the processing in finalize(). This\n  // is because we need to have all the events before we process them, and we\n  // need the Meta handler to be finalized() so we can use its data as we need\n  // the mainFrameId to know which Layer(s) to care about.\n  if (Types.TraceEvents.isTraceEventPaint(event) || Types.TraceEvents.isTraceEventDisplayListItemListSnapshot(event) ||\n      Types.TraceEvents.isTraceEventUpdateLayer(event) || Types.TraceEvents.isTraceEventSetLayerId(event)) {\n    relevantEvents.push(event);\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('LayerTree Handler is not initialized');\n  }\n\n  const metaData = metaHandlerData();\n  Helpers.Trace.sortTraceEventsInPlace(relevantEvents);\n\n  for (const event of relevantEvents) {\n    if (Types.TraceEvents.isTraceEventSetLayerId(event)) {\n      if (metaData.mainFrameId !== event.args.data.frame) {\n        // We only care about LayerId changes that affect the main frame.\n        continue;\n      }\n      currentMainFrameLayerTreeId = event.args.data.layerTreeId;\n    } else if (Types.TraceEvents.isTraceEventUpdateLayer(event)) {\n      // We don't do anything with this event, but we need to store it because\n      // the information in it determines if we need to care about future\n      // snapshot events - we need to know what the active layer is when we see a\n      // snapshot.\n      updateLayerEvents.push(event);\n    } else if (Types.TraceEvents.isTraceEventPaint(event)) {\n      if (!event.args.data.layerId) {\n        // Note that this check purposefully includes excluding an event with a layerId of 0.\n        // 0 indicates that this paint was for a subframe - we do not want these\n        // as we only care about paints for top level frames.\n        continue;\n      }\n      paintEvents.push(event);\n      lastPaintForLayerId[event.args.data.layerId] = event;\n      continue;\n    } else if (Types.TraceEvents.isTraceEventDisplayListItemListSnapshot(event)) {\n      // First we figure out which layer is active for this event's thread. To\n      // do this we work backwards through the list of UpdateLayerEvents,\n      // finding the first one (i.e. the most recent one) with the same pid and\n      // tid.\n      let lastUpdateLayerEventForThread: Types.TraceEvents.TraceEventUpdateLayer|null = null;\n      for (let i = updateLayerEvents.length - 1; i > -1; i--) {\n        const updateEvent = updateLayerEvents[i];\n        if (updateEvent.pid === event.pid && updateEvent.tid === event.tid) {\n          lastUpdateLayerEventForThread = updateEvent;\n          break;\n        }\n      }\n      if (!lastUpdateLayerEventForThread) {\n        // No active layer, so this snapshot is not relevant.\n        continue;\n      }\n      if (lastUpdateLayerEventForThread.args.layerTreeId !== currentMainFrameLayerTreeId) {\n        // Snapshot applies to a layer that is not the main frame, so discard.\n        continue;\n      }\n      const paintEvent = lastPaintForLayerId[lastUpdateLayerEventForThread.args.layerId];\n      if (!paintEvent) {\n        // No paint event for this layer, so discard.\n        continue;\n      }\n      snapshotEvents.push(event);\n\n      // Store the relationship between the paint and the snapshot.\n      paintToSnapshotMap.set(paintEvent, event);\n    }\n  }\n\n  handlerState = HandlerState.FINALIZED;\n}\n\nexport interface LayerTreeData {\n  paints: Types.TraceEvents.TraceEventPaint[];\n  snapshots: Types.TraceEvents.TraceEventDisplayItemListSnapshot[];\n  paintsToSnapshots: Map<Types.TraceEvents.TraceEventPaint, Types.TraceEvents.TraceEventDisplayItemListSnapshot>;\n}\n\nexport function data(): LayerTreeData {\n  return {\n    paints: paintEvents,\n    snapshots: snapshotEvents,\n    paintsToSnapshots: paintToSnapshotMap,\n  };\n}\n\nexport function deps(): TraceEventHandlerName[] {\n  return ['Meta'];\n}\n"]}
+{"version":3,"file":"LayerTreeHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LayerTreeHandler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2023 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 * as Types from '../types/types.js';\n\nimport {data as metaHandlerData} from './MetaHandler.js';\nimport {type HandlerName, HandlerState} from './types.js';\n\nlet handlerState = HandlerState.UNINITIALIZED;\n\nconst paintEvents: Types.Events.Paint[] = [];\nconst snapshotEvents: Types.Events.DisplayItemListSnapshot[] = [];\nconst paintToSnapshotMap = new Map<Types.Events.Paint, Types.Events.DisplayItemListSnapshot>();\n\nlet lastPaintForLayerId: Record<number, Types.Events.Paint> = {};\n\nlet currentMainFrameLayerTreeId: number|null = null;\nconst updateLayerEvents: Types.Events.UpdateLayer[] = [];\n\ntype RelevantLayerTreeEvent =\n    Types.Events.Paint|Types.Events.DisplayItemListSnapshot|Types.Events.UpdateLayer|Types.Events.SetLayerTreeId;\n\nconst relevantEvents: RelevantLayerTreeEvent[] = [];\nexport function reset(): void {\n  handlerState = HandlerState.UNINITIALIZED;\n  paintEvents.length = 0;\n  snapshotEvents.length = 0;\n  paintToSnapshotMap.clear();\n\n  lastPaintForLayerId = {};\n  currentMainFrameLayerTreeId = null;\n  updateLayerEvents.length = 0;\n  relevantEvents.length = 0;\n}\n\nexport function initialize(): void {\n  if (handlerState !== HandlerState.UNINITIALIZED) {\n    throw new Error('LayerTree Handler was not reset before being initialized');\n  }\n\n  handlerState = HandlerState.INITIALIZED;\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  // We gather up the events here but do all the processing in finalize(). This\n  // is because we need to have all the events before we process them, and we\n  // need the Meta handler to be finalized() so we can use its data as we need\n  // the mainFrameId to know which Layer(s) to care about.\n  if (Types.Events.isPaint(event) || Types.Events.isDisplayListItemListSnapshot(event) ||\n      Types.Events.isUpdateLayer(event) || Types.Events.isSetLayerId(event)) {\n    relevantEvents.push(event);\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('LayerTree Handler is not initialized');\n  }\n\n  const metaData = metaHandlerData();\n  Helpers.Trace.sortTraceEventsInPlace(relevantEvents);\n\n  for (const event of relevantEvents) {\n    if (Types.Events.isSetLayerId(event)) {\n      if (metaData.mainFrameId !== event.args.data.frame) {\n        // We only care about LayerId changes that affect the main frame.\n        continue;\n      }\n      currentMainFrameLayerTreeId = event.args.data.layerTreeId;\n    } else if (Types.Events.isUpdateLayer(event)) {\n      // We don't do anything with this event, but we need to store it because\n      // the information in it determines if we need to care about future\n      // snapshot events - we need to know what the active layer is when we see a\n      // snapshot.\n      updateLayerEvents.push(event);\n    } else if (Types.Events.isPaint(event)) {\n      if (!event.args.data.layerId) {\n        // Note that this check purposefully includes excluding an event with a layerId of 0.\n        // 0 indicates that this paint was for a subframe - we do not want these\n        // as we only care about paints for top level frames.\n        continue;\n      }\n      paintEvents.push(event);\n      lastPaintForLayerId[event.args.data.layerId] = event;\n      continue;\n    } else if (Types.Events.isDisplayListItemListSnapshot(event)) {\n      // First we figure out which layer is active for this event's thread. To\n      // do this we work backwards through the list of UpdateLayerEvents,\n      // finding the first one (i.e. the most recent one) with the same pid and\n      // tid.\n      let lastUpdateLayerEventForThread: Types.Events.UpdateLayer|null = null;\n      for (let i = updateLayerEvents.length - 1; i > -1; i--) {\n        const updateEvent = updateLayerEvents[i];\n        if (updateEvent.pid === event.pid && updateEvent.tid === event.tid) {\n          lastUpdateLayerEventForThread = updateEvent;\n          break;\n        }\n      }\n      if (!lastUpdateLayerEventForThread) {\n        // No active layer, so this snapshot is not relevant.\n        continue;\n      }\n      if (lastUpdateLayerEventForThread.args.layerTreeId !== currentMainFrameLayerTreeId) {\n        // Snapshot applies to a layer that is not the main frame, so discard.\n        continue;\n      }\n      const paintEvent = lastPaintForLayerId[lastUpdateLayerEventForThread.args.layerId];\n      if (!paintEvent) {\n        // No paint event for this layer, so discard.\n        continue;\n      }\n      snapshotEvents.push(event);\n\n      // Store the relationship between the paint and the snapshot.\n      paintToSnapshotMap.set(paintEvent, event);\n    }\n  }\n\n  handlerState = HandlerState.FINALIZED;\n}\n\nexport interface LayerTreeData {\n  paints: Types.Events.Paint[];\n  snapshots: Types.Events.DisplayItemListSnapshot[];\n  paintsToSnapshots: Map<Types.Events.Paint, Types.Events.DisplayItemListSnapshot>;\n}\n\nexport function data(): LayerTreeData {\n  return {\n    paints: paintEvents,\n    snapshots: snapshotEvents,\n    paintsToSnapshots: paintToSnapshotMap,\n  };\n}\n\nexport function deps(): HandlerName[] {\n  return ['Meta'];\n}\n"]}

package/models/trace/handlers/LayoutShiftsHandler.d.ts

@@ -1,16 +1,21 @@
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
 import { ScoreClassification } from './PageLoadMetricsHandler.js';
-import { type TraceEventHandlerName } from './types.js';
+import { type HandlerName } from './types.js';
 interface LayoutShifts {
-    clusters: readonly LayoutShiftCluster[];
+    clusters: readonly Types.Events.SyntheticLayoutShiftCluster[];
+    clustersByNavigationId: Map<Types.Events.NavigationId, Types.Events.SyntheticLayoutShiftCluster[]>;
     sessionMaxScore: number;
     clsWindowID: number;
-    prePaintEvents: Types.TraceEvents.TraceEventPrePaint[];
-    layoutInvalidationEvents: readonly Types.TraceEvents.TraceEventLayoutInvalidationTracking[];
-    scheduleStyleInvalidationEvents: readonly Types.TraceEvents.TraceEventScheduleStyleInvalidationTracking[];
-    styleRecalcInvalidationEvents: readonly Types.TraceEvents.TraceEventStyleRecalcInvalidationTracking[];
-    renderFrameImplCreateChildFrameEvents: readonly Types.TraceEvents.TraceEventRenderFrameImplCreateChildFrame[];
+    prePaintEvents: Types.Events.PrePaint[];
+    paintImageEvents: Types.Events.PaintImage[];
+    layoutInvalidationEvents: readonly Types.Events.LayoutInvalidationTracking[];
+    scheduleStyleInvalidationEvents: readonly Types.Events.ScheduleStyleInvalidationTracking[];
+    styleRecalcInvalidationEvents: readonly Types.Events.StyleRecalcInvalidationTracking[];
+    renderFrameImplCreateChildFrameEvents: readonly Types.Events.RenderFrameImplCreateChildFrame[];
+    domLoadingEvents: readonly Types.Events.DomLoading[];
+    layoutImageUnsizedEvents: readonly Types.Events.LayoutImageUnsized[];
+    beginRemoteFontLoadEvents: readonly Types.Events.BeginRemoteFontLoad[];
     scoreRecords: readonly ScoreRecord[];
     backendNodeIds: Protocol.DOM.BackendNodeId[];
 }
@@ -22,22 +27,11 @@ type ScoreRecord = {
 };
 export declare function initialize(): void;
 export declare function reset(): void;
-export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
+export declare function handleEvent(event: Types.Events.Event): void;
 export declare function finalize(): Promise<void>;
 export declare function data(): LayoutShifts;
-export declare function deps(): TraceEventHandlerName[];
+export declare function deps(): HandlerName[];
 export declare function scoreClassificationForLayoutShift(score: number): ScoreClassification;
-export interface LayoutShiftCluster {
-    clusterWindow: Types.Timing.TraceWindowMicroSeconds;
-    clusterCumulativeScore: number;
-    events: Types.TraceEvents.SyntheticLayoutShift[];
-    scoreWindows: {
-        good: Types.Timing.TraceWindowMicroSeconds;
-        needsImprovement: Types.Timing.TraceWindowMicroSeconds | null;
-        bad: Types.Timing.TraceWindowMicroSeconds | null;
-    };
-    navigationId?: string;
-}
 export declare const enum LayoutShiftsThreshold {
     GOOD = 0,
     NEEDS_IMPROVEMENT = 0.1,

package/models/trace/handlers/LayoutShiftsHandler.js

@@ -5,6 +5,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 import { data as metaHandlerData } from './MetaHandler.js';
+import { data as screenshotsHandlerData } from './ScreenshotsHandler.js';
 // This represents the maximum #time we will allow a cluster to go before we
 // reset it.
 export const MAX_CLUSTER_DURATION = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(5000));
@@ -25,15 +26,20 @@ const layoutInvalidationEvents = [];
 const scheduleStyleInvalidationEvents = [];
 const styleRecalcInvalidationEvents = [];
 const renderFrameImplCreateChildFrameEvents = [];
+const domLoadingEvents = [];
+const layoutImageUnsizedEvents = [];
+const beginRemoteFontLoadEvents = [];
 const backendNodeIds = new Set();
 // Layout shifts happen during PrePaint as part of the rendering lifecycle.
 // We determine if a LayoutInvalidation event is a potential root cause of a layout
 // shift if the next PrePaint after the LayoutInvalidation is the parent
 // node of such shift.
 const prePaintEvents = [];
+const paintImageEvents = [];
 let sessionMaxScore = 0;
 let clsWindowID = -1;
 const clusters = [];
+const clustersByNavigationId = new Map();
 // The complete timeline of LS score changes in a trace.
 // Includes drops to 0 when session windows end.
 const scoreRecords = [];
@@ -51,38 +57,55 @@ export function reset() {
     scheduleStyleInvalidationEvents.length = 0;
     styleRecalcInvalidationEvents.length = 0;
     prePaintEvents.length = 0;
+    paintImageEvents.length = 0;
     renderFrameImplCreateChildFrameEvents.length = 0;
+    layoutImageUnsizedEvents.length = 0;
+    domLoadingEvents.length = 0;
+    beginRemoteFontLoadEvents.length = 0;
     backendNodeIds.clear();
     clusters.length = 0;
     sessionMaxScore = 0;
     scoreRecords.length = 0;
     clsWindowID = -1;
+    clustersByNavigationId.clear();
 }
 export function handleEvent(event) {
     if (handlerState !== 2 /* HandlerState.INITIALIZED */) {
         throw new Error('Handler is not initialized');
     }
-    if (Types.TraceEvents.isTraceEventLayoutShift(event) && !event.args.data?.had_recent_input) {
+    if (Types.Events.isLayoutShift(event) && !event.args.data?.had_recent_input) {
         layoutShiftEvents.push(event);
         return;
     }
-    if (Types.TraceEvents.isTraceEventLayoutInvalidationTracking(event)) {
+    if (Types.Events.isLayoutInvalidationTracking(event)) {
         layoutInvalidationEvents.push(event);
         return;
     }
-    if (Types.TraceEvents.isTraceEventScheduleStyleInvalidationTracking(event)) {
+    if (Types.Events.isScheduleStyleInvalidationTracking(event)) {
         scheduleStyleInvalidationEvents.push(event);
     }
-    if (Types.TraceEvents.isTraceEventStyleRecalcInvalidationTracking(event)) {
+    if (Types.Events.isStyleRecalcInvalidationTracking(event)) {
         styleRecalcInvalidationEvents.push(event);
     }
-    if (Types.TraceEvents.isTraceEventPrePaint(event)) {
+    if (Types.Events.isPrePaint(event)) {
         prePaintEvents.push(event);
         return;
     }
-    if (Types.TraceEvents.isTraceEventRenderFrameImplCreateChildFrame(event)) {
+    if (Types.Events.isRenderFrameImplCreateChildFrame(event)) {
         renderFrameImplCreateChildFrameEvents.push(event);
     }
+    if (Types.Events.isDomLoading(event)) {
+        domLoadingEvents.push(event);
+    }
+    if (Types.Events.isLayoutImageUnsized(event)) {
+        layoutImageUnsizedEvents.push(event);
+    }
+    if (Types.Events.isBeginRemoteFontLoad(event)) {
+        beginRemoteFontLoadEvents.push(event);
+    }
+    if (Types.Events.isPaintImage(event)) {
+        paintImageEvents.push(event);
+    }
 }
 function traceWindowFromTime(time) {
     return {
@@ -95,6 +118,12 @@ function updateTraceWindowMax(traceWindow, newMax) {
     traceWindow.max = newMax;
     traceWindow.range = Types.Timing.MicroSeconds(traceWindow.max - traceWindow.min);
 }
+function findScreenshots(timestamp) {
+    const screenshots = screenshotsHandlerData().all;
+    const before = Helpers.Trace.findPreviousEventBeforeTimestamp(screenshots, timestamp);
+    const after = before ? screenshots[screenshots.indexOf(before) + 1] : null;
+    return { before, after };
+}
 function buildScoreRecords() {
     const { traceBounds } = metaHandlerData();
     scoreRecords.push({ ts: traceBounds.min, score: 0 });
@@ -149,6 +178,10 @@ export async function finalize() {
     prePaintEvents.sort((a, b) => a.ts - b.ts);
     layoutInvalidationEvents.sort((a, b) => a.ts - b.ts);
     renderFrameImplCreateChildFrameEvents.sort((a, b) => a.ts - b.ts);
+    domLoadingEvents.sort((a, b) => a.ts - b.ts);
+    layoutImageUnsizedEvents.sort((a, b) => a.ts - b.ts);
+    beginRemoteFontLoadEvents.sort((a, b) => a.ts - b.ts);
+    paintImageEvents.sort((a, b) => a.ts - b.ts);
     // Each function transforms the data used by the next, as such the invoke order
     // is important.
     await buildLayoutShiftsClusters();
@@ -205,17 +238,29 @@ async function buildLayoutShiftsClusters() {
             // If this cluster happened after a navigation, set the navigationId to
             // the current navigation. This lets us easily group clusters by
             // navigation.
-            const navigationId = currentShiftNavigation === null ? undefined : navigations[currentShiftNavigation].args.data?.navigationId;
+            const navigationId = currentShiftNavigation === null ?
+                Types.Events.NO_NAVIGATION :
+                navigations[currentShiftNavigation].args.data?.navigationId;
+            // TODO: `navigationId` is `string | undefined`, but the undefined portion
+            // comes from `data.navigationId`. I don't think that is possible for this
+            // event type. Can we make this typing stronger? In the meantime, we allow
+            // `navigationId` to include undefined values.
             clusters.push({
+                name: 'SyntheticLayoutShiftCluster',
                 events: [],
                 clusterWindow: traceWindowFromTime(clusterStartTime),
                 clusterCumulativeScore: 0,
                 scoreWindows: {
                     good: traceWindowFromTime(clusterStartTime),
-                    needsImprovement: null,
-                    bad: null,
                 },
                 navigationId,
+                // Set default Event so that this event is treated accordingly for the track appender.
+                ts: event.ts,
+                pid: event.pid,
+                tid: event.tid,
+                ph: "X" /* Types.Events.Phase.COMPLETE */,
+                cat: '',
+                dur: Types.Timing.MicroSeconds(-1), // This `cluster.dur` is updated below.
             });
             firstShiftTime = clusterStartTime;
         }
@@ -229,8 +274,7 @@ async function buildLayoutShiftsClusters() {
         if (!event.args.data) {
             continue;
         }
-        const shift = Helpers.SyntheticEvents.SyntheticEventsManager
-            .registerSyntheticBasedEvent({
+        const shift = Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent({
             rawSourceEvent: event,
             ...event,
             args: {
@@ -238,10 +282,12 @@ async function buildLayoutShiftsClusters() {
                 data: {
                     ...event.args.data,
                     rawEvent: event,
+                    navigationId: currentCluster.navigationId ?? undefined,
                 },
             },
             parsedData: {
                 timeFromNavigation,
+                screenshots: findScreenshots(event.ts),
                 cumulativeWeightedScoreInWindow: currentCluster.clusterCumulativeScore,
                 // The score of the session window is temporarily set to 0 just
                 // to initialize it. Since we need to get the score of all shifts
@@ -273,6 +319,8 @@ async function buildLayoutShiftsClusters() {
             const clusterEnd = Math.min(clusterEndByMaxDuration, clusterEndByMaxGap, traceBounds.max, nextNavigationTime);
             updateTraceWindowMax(cluster.clusterWindow, Types.Timing.MicroSeconds(clusterEnd));
         }
+        let largestScore = 0;
+        let worstShiftEvent = null;
         for (const shift of cluster.events) {
             weightedScore += shift.args.data ? shift.args.data.weighted_score_delta : 0;
             windowID = shift.parsedData.sessionWindowData.id;
@@ -321,11 +369,33 @@ async function buildLayoutShiftsClusters() {
             else {
                 updateTraceWindowMax(cluster.scoreWindows.good, cluster.clusterWindow.max);
             }
+            // Find the worst layout shift of the cluster.
+            const score = shift.args.data?.weighted_score_delta;
+            if (score !== undefined && score > largestScore) {
+                largestScore = score;
+                worstShiftEvent = shift;
+            }
+        }
+        // Update the cluster's worst layout shift.
+        if (worstShiftEvent) {
+            cluster.worstShiftEvent = worstShiftEvent;
         }
+        // layout shifts are already sorted by time ascending.
+        // Capture the time range of the cluster.
+        cluster.ts = cluster.events[0].ts;
+        const lastShiftTimings = Helpers.Timing.eventTimingsMicroSeconds(cluster.events[cluster.events.length - 1]);
+        // Add MAX_SHIFT_TIME_DELTA, the section gap after the last layout shift. This marks the end of the cluster.
+        cluster.dur = Types.Timing.MicroSeconds((lastShiftTimings.endTime - cluster.events[0].ts) + MAX_SHIFT_TIME_DELTA);
         if (weightedScore > sessionMaxScore) {
             clsWindowID = windowID;
             sessionMaxScore = weightedScore;
         }
+        if (cluster.navigationId) {
+            const clustersForId = Platform.MapUtilities.getWithDefault(clustersByNavigationId, cluster.navigationId, () => {
+                return [];
+            });
+            clustersForId.push(cluster);
+        }
     }
 }
 export function data() {
@@ -334,16 +404,21 @@ export function data() {
     }
     return {
         clusters,
-        sessionMaxScore: sessionMaxScore,
+        sessionMaxScore,
         clsWindowID,
         prePaintEvents,
         layoutInvalidationEvents,
         scheduleStyleInvalidationEvents,
         styleRecalcInvalidationEvents: [],
         renderFrameImplCreateChildFrameEvents,
+        domLoadingEvents,
+        layoutImageUnsizedEvents,
+        beginRemoteFontLoadEvents,
         scoreRecords,
         // TODO(crbug/41484172): change the type so no need to clone
         backendNodeIds: [...backendNodeIds],
+        clustersByNavigationId: new Map(clustersByNavigationId),
+        paintImageEvents,
     };
 }
 export function deps() {