@paulirish/trace_engine 0.0.7 → 0.0.9

package/trace.mjs

@@ -502,7 +502,7 @@ __export(TraceEvents_exports, {
   isTraceEventLargestTextPaintCandidate: () => isTraceEventLargestTextPaintCandidate,
   isTraceEventLayerTreeHostImplSnapshot: () => isTraceEventLayerTreeHostImplSnapshot,
   isTraceEventLayout: () => isTraceEventLayout,
-  isTraceEventLayoutInvalidation: () => isTraceEventLayoutInvalidation,
+  isTraceEventLayoutInvalidationTracking: () => isTraceEventLayoutInvalidationTracking,
   isTraceEventLayoutShift: () => isTraceEventLayoutShift,
   isTraceEventMainFrameViewport: () => isTraceEventMainFrameViewport,
   isTraceEventMarkDOMContent: () => isTraceEventMarkDOMContent,
@@ -529,9 +529,12 @@ __export(TraceEvents_exports, {
   isTraceEventResourceReceivedData: () => isTraceEventResourceReceivedData,
   isTraceEventResourceSendRequest: () => isTraceEventResourceSendRequest,
   isTraceEventResourceWillSendRequest: () => isTraceEventResourceWillSendRequest,
+  isTraceEventScheduleStyleInvalidationTracking: () => isTraceEventScheduleStyleInvalidationTracking,
   isTraceEventScheduleStyleRecalculation: () => isTraceEventScheduleStyleRecalculation,
   isTraceEventSetLayerId: () => isTraceEventSetLayerId,
-  isTraceEventStyleRecalcInvalidation: () => isTraceEventStyleRecalcInvalidation,
+  isTraceEventStyleInvalidatorInvalidationTracking: () => isTraceEventStyleInvalidatorInvalidationTracking,
+  isTraceEventStyleRecalcInvalidationTracking: () => isTraceEventStyleRecalcInvalidationTracking,
+  isTraceEventSyntheticInvalidation: () => isTraceEventSyntheticInvalidation,
   isTraceEventTimeStamp: () => isTraceEventTimeStamp,
   isTraceEventTimerFire: () => isTraceEventTimerFire,
   isTraceEventTimerInstall: () => isTraceEventTimerInstall,
@@ -540,6 +543,7 @@ __export(TraceEvents_exports, {
   isTraceEventUpdateCounters: () => isTraceEventUpdateCounters,
   isTraceEventUpdateLayer: () => isTraceEventUpdateLayer,
   isTraceEventUpdateLayoutTree: () => isTraceEventUpdateLayoutTree,
+  isTraceEventV8Compile: () => isTraceEventV8Compile,
   isTraceEventWebSocketCreate: () => isTraceEventWebSocketCreate,
   isTraceEventWebSocketDestroy: () => isTraceEventWebSocketDestroy,
   isTraceEventWebSocketReceiveHandshakeResponse: () => isTraceEventWebSocketReceiveHandshakeResponse,
@@ -614,10 +618,19 @@ var LayoutInvalidationReason = /* @__PURE__ */ ((LayoutInvalidationReason2) => {
   LayoutInvalidationReason2["UNKNOWN"] = "Unknown";
   return LayoutInvalidationReason2;
 })(LayoutInvalidationReason || {});
+function isTraceEventScheduleStyleInvalidationTracking(event) {
+  return event.name === KnownEventName.ScheduleStyleInvalidationTracking;
+}
 var StyleRecalcInvalidationReason = /* @__PURE__ */ ((StyleRecalcInvalidationReason2) => {
   StyleRecalcInvalidationReason2["ANIMATION"] = "Animation";
   return StyleRecalcInvalidationReason2;
 })(StyleRecalcInvalidationReason || {});
+function isTraceEventStyleRecalcInvalidationTracking(event) {
+  return event.name === KnownEventName.StyleRecalcInvalidationTracking;
+}
+function isTraceEventStyleInvalidatorInvalidationTracking(event) {
+  return event.name === KnownEventName.StyleInvalidatorInvalidationTracking;
+}
 function isTraceEventScheduleStyleRecalculation(event) {
   return event.name === KnownEventName.ScheduleStyleRecalculation;
 }
@@ -660,6 +673,9 @@ function isTraceEventCompositeLayers(event) {
 function isTraceEventActivateLayerTree(event) {
   return event.name === KnownEventName.ActivateLayerTree;
 }
+function isTraceEventSyntheticInvalidation(event) {
+  return event.name === "SyntheticInvalidation";
+}
 function isTraceEventUpdateLayoutTree(event) {
   return event.name === KnownEventName.UpdateLayoutTree;
 }
@@ -730,7 +746,7 @@ function isProcessName(traceEventData) {
   return traceEventData.name === "process_name";
 }
 function isTraceEventTracingStartedInBrowser(traceEventData) {
-  return traceEventData.name === "TracingStartedInBrowser";
+  return traceEventData.name === KnownEventName.TracingStartedInBrowser;
 }
 function isTraceEventFrameCommittedInBrowser(traceEventData) {
   return traceEventData.name === "FrameCommittedInBrowser";
@@ -747,11 +763,8 @@ function isTraceEventAnimation(traceEventData) {
 function isTraceEventLayoutShift(traceEventData) {
   return traceEventData.name === "LayoutShift";
 }
-function isTraceEventLayoutInvalidation(traceEventData) {
-  return traceEventData.name === "LayoutInvalidationTracking" || traceEventData.name === "ScheduleStyleInvalidationTracking";
-}
-function isTraceEventStyleRecalcInvalidation(traceEventData) {
-  return traceEventData.name === "StyleRecalcInvalidationTracking";
+function isTraceEventLayoutInvalidationTracking(traceEventData) {
+  return traceEventData.name === KnownEventName.LayoutInvalidationTracking;
 }
 function isTraceEventFirstContentfulPaint(traceEventData) {
   return traceEventData.name === "firstContentfulPaint";
@@ -835,21 +848,21 @@ function isSyntheticUserTimingTraceEvent(traceEventData) {
   if (traceEventData.cat !== "blink.user_timing") {
     return false;
   }
-  const data21 = traceEventData.args?.data;
-  if (!data21) {
+  const data22 = traceEventData.args?.data;
+  if (!data22) {
     return false;
   }
-  return "beginEvent" in data21 && "endEvent" in data21;
+  return "beginEvent" in data22 && "endEvent" in data22;
 }
 function isSyntheticConsoleTimingTraceEvent(traceEventData) {
   if (traceEventData.cat !== "blink.console") {
     return false;
   }
-  const data21 = traceEventData.args?.data;
-  if (!data21) {
+  const data22 = traceEventData.args?.data;
+  if (!data22) {
     return false;
   }
-  return "beginEvent" in data21 && "endEvent" in data21;
+  return "beginEvent" in data22 && "endEvent" in data22;
 }
 function isTraceEventPerformanceMeasure(traceEventData) {
   return traceEventData.cat === "blink.user_timing" && isTraceEventAsyncPhase(traceEventData);
@@ -932,6 +945,9 @@ function isTraceEventWebSocketDestroy(event) {
 function isWebSocketTraceEvent(event) {
   return isTraceEventWebSocketCreate(event) || isTraceEventWebSocketDestroy(event) || isTraceEventWebSocketReceiveHandshakeResponse(event) || isTraceEventWebSocketSendHandshakeRequest(event);
 }
+function isTraceEventV8Compile(event) {
+  return event.name === KnownEventName.Compile;
+}
 var KnownEventName = /* @__PURE__ */ ((KnownEventName2) => {
   KnownEventName2["ThreadName"] = "thread_name";
   KnownEventName2["Program"] = "Program";
@@ -942,9 +958,10 @@ var KnownEventName = /* @__PURE__ */ ((KnownEventName2) => {
   KnownEventName2["XHRReadyStateChange"] = "XHRReadyStateChange";
   KnownEventName2["ParseHTML"] = "ParseHTML";
   KnownEventName2["ParseCSS"] = "ParseAuthorStyleSheet";
-  KnownEventName2["CompileScript"] = "V8.CompileScript";
   KnownEventName2["CompileCode"] = "V8.CompileCode";
   KnownEventName2["CompileModule"] = "V8.CompileModule";
+  KnownEventName2["Compile"] = "v8.compile";
+  KnownEventName2["CompileScript"] = "V8.CompileScript";
   KnownEventName2["Optimize"] = "V8.OptimizeCode";
   KnownEventName2["WasmStreamFromResponseCallback"] = "v8.wasm.streamFromResponseCallback";
   KnownEventName2["WasmCompiledModule"] = "v8.wasm.compiledModule";
@@ -1066,6 +1083,7 @@ var KnownEventName = /* @__PURE__ */ ((KnownEventName2) => {
   KnownEventName2["EmbedderCallback"] = "EmbedderCallback";
   KnownEventName2["SetLayerTreeId"] = "SetLayerTreeId";
   KnownEventName2["TracingStartedInPage"] = "TracingStartedInPage";
+  KnownEventName2["TracingStartedInBrowser"] = "TracingStartedInBrowser";
   KnownEventName2["TracingSessionIdForWorker"] = "TracingSessionIdForWorker";
   KnownEventName2["LazyPixelRef"] = "LazyPixelRef";
   KnownEventName2["LayerTreeHostImplSnapshot"] = "cc::LayerTreeHostImpl";
@@ -1091,6 +1109,7 @@ __export(Timing_exports3, {
   secondsToMicroseconds: () => secondsToMicroseconds,
   secondsToMilliseconds: () => secondsToMilliseconds,
   timeStampForEventAdjustedByClosestNavigation: () => timeStampForEventAdjustedByClosestNavigation,
+  traceWindowFromMicroSeconds: () => traceWindowFromMicroSeconds,
   traceWindowFromMilliSeconds: () => traceWindowFromMilliSeconds,
   traceWindowMilliSeconds: () => traceWindowMilliSeconds,
   traceWindowMillisecondsToMicroSeconds: () => traceWindowMillisecondsToMicroSeconds
@@ -1109,8 +1128,21 @@ __export(Trace_exports, {
   makeProfileCall: () => makeProfileCall,
   matchBeginningAndEndEvents: () => matchBeginningAndEndEvents,
   mergeEventsInOrder: () => mergeEventsInOrder,
-  sortTraceEventsInPlace: () => sortTraceEventsInPlace
+  sortTraceEventsInPlace: () => sortTraceEventsInPlace,
+  stackTraceForEvent: () => stackTraceForEvent
 });
+function stackTraceForEvent(event) {
+  if (TraceEvents_exports.isTraceEventSyntheticInvalidation(event)) {
+    return event.stackTrace || null;
+  }
+  if (event.args?.data?.stackTrace) {
+    return event.args.data.stackTrace;
+  }
+  if (TraceEvents_exports.isTraceEventUpdateLayoutTree(event)) {
+    return event.args.beginData?.stackTrace || null;
+  }
+  return null;
+}
 function extractOriginFromTrace(firstNavigationURL) {
   const url = new URL(firstNavigationURL);
   if (url) {
@@ -1410,7 +1442,15 @@ function traceWindowFromMilliSeconds(min, max) {
   const traceWindow = {
     min: millisecondsToMicroseconds(min),
     max: millisecondsToMicroseconds(max),
-    range: millisecondsToMicroseconds(Timing_exports2.MilliSeconds(max - min))
+    range: Timing_exports2.MicroSeconds(millisecondsToMicroseconds(max) - millisecondsToMicroseconds(min))
+  };
+  return traceWindow;
+}
+function traceWindowFromMicroSeconds(min, max) {
+  const traceWindow = {
+    min,
+    max,
+    range: Timing_exports2.MicroSeconds(max - min)
   };
   return traceWindow;
 }
@@ -1784,9 +1824,8 @@ var FilterApplyAction = /* @__PURE__ */ ((FilterApplyAction2) => {
   return FilterApplyAction2;
 })(FilterApplyAction || {});
 var FilterUndoAction = /* @__PURE__ */ ((FilterUndoAction2) => {
+  FilterUndoAction2["RESET_CHILDREN"] = "RESET_CHILDREN";
   FilterUndoAction2["UNDO_ALL_ACTIONS"] = "UNDO_ALL_ACTIONS";
-  FilterUndoAction2["UNDO_COLLAPSE_FUNCTION"] = "UNDO_COLLAPSE_FUNCTION";
-  FilterUndoAction2["UNDO_COLLAPSE_REPEATING_DESCENDANTS"] = "UNDO_COLLAPSE_REPEATING_DESCENDANTS";
   return FilterUndoAction2;
 })(FilterUndoAction || {});
 var filterApplyActionSet = /* @__PURE__ */ new Set([
@@ -1795,120 +1834,92 @@ var filterApplyActionSet = /* @__PURE__ */ new Set([
   "COLLAPSE_REPEATING_DESCENDANTS" /* COLLAPSE_REPEATING_DESCENDANTS */
 ]);
 var filterUndoActionSet = /* @__PURE__ */ new Set([
-  "UNDO_ALL_ACTIONS" /* UNDO_ALL_ACTIONS */,
-  "UNDO_COLLAPSE_FUNCTION" /* UNDO_COLLAPSE_FUNCTION */,
-  "UNDO_COLLAPSE_REPEATING_DESCENDANTS" /* UNDO_COLLAPSE_REPEATING_DESCENDANTS */
-]);
-var actionToUndoActionMap = /* @__PURE__ */ new Map([
-  ["UNDO_COLLAPSE_FUNCTION" /* UNDO_COLLAPSE_FUNCTION */, "COLLAPSE_FUNCTION" /* COLLAPSE_FUNCTION */],
-  ["UNDO_COLLAPSE_REPEATING_DESCENDANTS" /* UNDO_COLLAPSE_REPEATING_DESCENDANTS */, "COLLAPSE_REPEATING_DESCENDANTS" /* COLLAPSE_REPEATING_DESCENDANTS */]
+  "RESET_CHILDREN" /* RESET_CHILDREN */,
+  "UNDO_ALL_ACTIONS" /* UNDO_ALL_ACTIONS */
 ]);
 var EntriesFilter = class {
   #entryToNode;
-  #lastInvisibleEntries = null;
-  #activeActions = [];
+  #invisibleEntries = [];
   #modifiedVisibleEntries = [];
+  #entryToAncestorsMap = /* @__PURE__ */ new Map();
   constructor(entryToNode3) {
     this.#entryToNode = entryToNode3;
   }
   applyAction(action) {
-    if (this.isUserApplyFilterAction(action)) {
-      this.#modifiedVisibleEntries.push(action.entry);
-      if (this.#actionIsActive(action)) {
-        return;
-      }
-      this.#activeActions.push(action);
-    } else if (this.isFilterUndoAction(action.type)) {
-      const entryIndex = this.#modifiedVisibleEntries.indexOf(action.entry);
-      this.#modifiedVisibleEntries.splice(entryIndex);
-      this.#applyUndoAction(action.type, action.entry);
+    if (this.#isUserApplyFilterAction(action)) {
+      this.#applyFilterAction(action);
+    } else if (this.#isFilterUndoAction(action.type)) {
+      this.#applyUndoAction(action);
     }
-    this.#lastInvisibleEntries = null;
   }
-  #applyUndoAction(action, entry) {
-    switch (action) {
+  #applyUndoAction(action) {
+    switch (action.type) {
       case "UNDO_ALL_ACTIONS" /* UNDO_ALL_ACTIONS */: {
-        this.#activeActions = [];
+        this.#invisibleEntries = [];
         this.#modifiedVisibleEntries = [];
         break;
       }
-      default: {
-        const actionToRemove = actionToUndoActionMap.get(action);
-        if (actionToRemove) {
-          this.removeActiveAction({
-            type: actionToRemove,
-            entry
-          });
-        }
+      case "RESET_CHILDREN" /* RESET_CHILDREN */: {
+        this.#makeEntryChildrenVisible(action.entry);
         break;
       }
     }
   }
-  removeActiveAction(action) {
-    this.#activeActions = this.#activeActions.filter((activeAction) => {
-      if (activeAction.type === action.type && activeAction.entry === action.entry) {
-        return false;
-      }
-      return true;
-    });
-  }
-  #actionIsActive(action) {
-    return this.#activeActions.some((activeAction) => {
-      return action.entry === activeAction.entry && action.type === activeAction.type;
-    });
-  }
   invisibleEntries() {
-    if (this.#activeActions.length === 0) {
-      return [];
-    }
-    return this.#calculateInvisibleEntries();
+    return this.#invisibleEntries;
   }
-  #calculateInvisibleEntries() {
-    if (this.#lastInvisibleEntries) {
-      return this.#lastInvisibleEntries;
-    }
+  #applyFilterAction(action) {
+    this.#modifiedVisibleEntries.push(action.entry);
     const entriesToHide = /* @__PURE__ */ new Set();
-    for (const action of this.#activeActions) {
-      switch (action.type) {
-        case "MERGE_FUNCTION" /* MERGE_FUNCTION */: {
-          entriesToHide.add(action.entry);
-          break;
-        }
-        case "COLLAPSE_FUNCTION" /* COLLAPSE_FUNCTION */: {
-          const entryNode = this.#entryToNode.get(action.entry);
-          if (!entryNode) {
-            continue;
-          }
-          const allAncestors = this.#findAllAncestorsOfNode(entryNode);
-          allAncestors.forEach((ancestor) => entriesToHide.add(ancestor));
+    switch (action.type) {
+      case "MERGE_FUNCTION" /* MERGE_FUNCTION */: {
+        entriesToHide.add(action.entry);
+        break;
+      }
+      case "COLLAPSE_FUNCTION" /* COLLAPSE_FUNCTION */: {
+        const entryNode = this.#entryToNode.get(action.entry);
+        if (!entryNode) {
           break;
         }
-        case "COLLAPSE_REPEATING_DESCENDANTS" /* COLLAPSE_REPEATING_DESCENDANTS */: {
-          const entryNode = this.#entryToNode.get(action.entry);
-          if (!entryNode) {
-            continue;
-          }
-          const allRepeatingDescendants = this.#findAllRepeatingDescendantsOfNext(entryNode);
-          allRepeatingDescendants.forEach((ancestor) => entriesToHide.add(ancestor));
+        const allAncestors = this.#findAllAncestorsOfNode(entryNode);
+        allAncestors.forEach((ancestor) => entriesToHide.add(ancestor));
+        break;
+      }
+      case "COLLAPSE_REPEATING_DESCENDANTS" /* COLLAPSE_REPEATING_DESCENDANTS */: {
+        const entryNode = this.#entryToNode.get(action.entry);
+        if (!entryNode) {
           break;
         }
-        default:
-          assertNever(action.type, `Unknown EntriesFilter action: ${action.type}`);
+        const allRepeatingDescendants = this.#findAllRepeatingDescendantsOfNext(entryNode);
+        allRepeatingDescendants.forEach((ancestor) => entriesToHide.add(ancestor));
+        break;
       }
+      default:
+        assertNever(action.type, `Unknown EntriesFilter action: ${action.type}`);
     }
-    this.#lastInvisibleEntries = [...entriesToHide];
-    return this.#lastInvisibleEntries;
+    this.#invisibleEntries.push(...entriesToHide);
+    return this.#invisibleEntries;
   }
   #findAllAncestorsOfNode(root) {
+    const cachedAncestors = this.#entryToAncestorsMap.get(root);
+    if (cachedAncestors) {
+      return cachedAncestors;
+    }
     const ancestors = [];
     const children = [...root.children];
     while (children.length > 0) {
       const childNode = children.shift();
       if (childNode) {
         ancestors.push(childNode.entry);
-        children.push(...childNode.children);
+        const childNodeCachedAncestors = this.#entryToAncestorsMap.get(childNode);
+        if (childNodeCachedAncestors) {
+          ancestors.push(...childNodeCachedAncestors);
+        } else {
+          children.push(...childNode.children);
+        }
       }
     }
+    this.#entryToAncestorsMap.set(root, ancestors);
     return ancestors;
   }
   #findAllRepeatingDescendantsOfNext(root) {
@@ -1935,13 +1946,32 @@ var EntriesFilter = class {
     }
     return repeatingNodes;
   }
+  #makeEntryChildrenVisible(entry) {
+    const entryNode = this.#entryToNode.get(entry);
+    if (!entryNode) {
+      return;
+    }
+    const ancestors = this.#findAllAncestorsOfNode(entryNode);
+    this.#invisibleEntries = this.#invisibleEntries.filter((entry2) => {
+      if (ancestors.includes(entry2)) {
+        return false;
+      }
+      return true;
+    });
+    this.#modifiedVisibleEntries = this.#modifiedVisibleEntries.filter((iterEntry) => {
+      if (ancestors.includes(iterEntry) || iterEntry === entry) {
+        return false;
+      }
+      return true;
+    });
+  }
   isEntryModified(event) {
     return this.#modifiedVisibleEntries.includes(event);
   }
-  isUserApplyFilterAction(action) {
+  #isUserApplyFilterAction(action) {
     return filterApplyActionSet.has(action.type);
   }
-  isFilterUndoAction(action) {
+  #isFilterUndoAction(action) {
     return filterUndoActionSet.has(action);
   }
 };
@@ -1965,6 +1995,7 @@ __export(ModelHandlers_exports, {
   Frames: () => FramesHandler_exports,
   GPU: () => GPUHandler_exports,
   Initiators: () => InitiatorsHandler_exports,
+  Invalidations: () => InvalidationsHandler_exports,
   LargestImagePaint: () => LargestImagePaintHandler_exports,
   LargestTextPaint: () => LargestTextPaintHandler_exports,
   LayerTree: () => LayerTreeHandler_exports,
@@ -1997,10 +2028,10 @@ __export(types_exports2, {
   HandlerState: () => HandlerState,
   handlerDataHasAllHandlers: () => handlerDataHasAllHandlers
 });
-function handlerDataHasAllHandlers(data21) {
+function handlerDataHasAllHandlers(data22) {
   let isMissingHandler = false;
   for (const handlerName of Object.keys(ModelHandlers_exports)) {
-    if (handlerName in data21 === false) {
+    if (handlerName in data22 === false) {
       isMissingHandler = true;
       break;
     }
@@ -2166,6 +2197,7 @@ __export(FramesHandler_exports, {
   data: () => data7,
   deps: () => deps3,
   finalize: () => finalize7,
+  framesWithinWindow: () => framesWithinWindow,
   handleEvent: () => handleEvent7,
   initialize: () => initialize5,
   reset: () => reset7
@@ -2200,6 +2232,7 @@ var browserThreadId = TraceEvents_exports.ThreadID(-1);
 var gpuProcessId = TraceEvents_exports.ProcessID(-1);
 var gpuThreadId = TraceEvents_exports.ThreadID(-1);
 var viewportRect = null;
+var processNames = /* @__PURE__ */ new Map();
 var topLevelRendererIds = /* @__PURE__ */ new Set();
 var traceBounds = {
   min: Timing_exports2.MicroSeconds(Number.POSITIVE_INFINITY),
@@ -2218,9 +2251,16 @@ var eventPhasesOfInterestForTraceBounds = /* @__PURE__ */ new Set([
   TraceEvents_exports.Phase.INSTANT
 ]);
 var handlerState2 = 1 /* UNINITIALIZED */;
+var traceIsGeneric = true;
+var CHROME_WEB_TRACE_EVENTS = /* @__PURE__ */ new Set([
+  TraceEvents_exports.KnownEventName.TracingStartedInPage,
+  TraceEvents_exports.KnownEventName.TracingSessionIdForWorker,
+  TraceEvents_exports.KnownEventName.TracingStartedInBrowser
+]);
 function reset3() {
   navigationsByFrameId.clear();
   navigationsByNavigationId.clear();
+  processNames.clear();
   mainFrameNavigations.length = 0;
   browserProcessId = TraceEvents_exports.ProcessID(-1);
   browserThreadId = TraceEvents_exports.ThreadID(-1);
@@ -2235,6 +2275,7 @@ function reset3() {
   traceBounds.max = Timing_exports2.MicroSeconds(Number.NEGATIVE_INFINITY);
   traceBounds.range = Timing_exports2.MicroSeconds(Number.POSITIVE_INFINITY);
   traceStartedTimeFromTracingStartedEvent = Timing_exports2.MicroSeconds(-1);
+  traceIsGeneric = true;
   handlerState2 = 1 /* UNINITIALIZED */;
 }
 function initialize() {
@@ -2267,6 +2308,12 @@ function handleEvent3(event) {
   if (handlerState2 !== 2 /* INITIALIZED */) {
     throw new Error("Meta Handler is not initialized");
   }
+  if (traceIsGeneric && CHROME_WEB_TRACE_EVENTS.has(event.name)) {
+    traceIsGeneric = false;
+  }
+  if (TraceEvents_exports.isProcessName(event)) {
+    processNames.set(event.pid, event);
+  }
   if (event.ts !== 0 && !event.name.endsWith("::UMA") && eventPhasesOfInterestForTraceBounds.has(event.ph)) {
     traceBounds.min = Timing_exports2.MicroSeconds(Math.min(event.ts, traceBounds.min));
     const eventDuration = event.dur || Timing_exports2.MicroSeconds(0);
@@ -2340,7 +2387,7 @@ function handleEvent3(event) {
   if (TraceEvents_exports.isTraceEventNavigationStartWithURL(event) && event.args.data) {
     const navigationId = event.args.data.navigationId;
     if (navigationsByNavigationId.has(navigationId)) {
-      throw new Error("Found multiple navigation start events with the same navigation ID.");
+      return;
     }
     navigationsByNavigationId.set(navigationId, event);
     const frameId = event.args.frame;
@@ -2387,6 +2434,14 @@ async function finalize3() {
       navigationsByNavigationId.delete(navigation.args.data.navigationId);
     }
   }
+  const firstMainFrameNav = mainFrameNavigations.at(0);
+  const firstNavTimeThreshold = Timing_exports3.secondsToMicroseconds(Timing_exports2.Seconds(0.5));
+  if (firstMainFrameNav) {
+    const navigationIsWithinThreshold = firstMainFrameNav.ts - traceBounds.min < firstNavTimeThreshold;
+    if (firstMainFrameNav.args.data?.isOutermostMainFrame && firstMainFrameNav.args.data?.documentLoaderURL && navigationIsWithinThreshold) {
+      mainFrameURL = firstMainFrameNav.args.data.documentLoaderURL;
+    }
+  }
   handlerState2 = 3 /* FINALIZED */;
 }
 function data3() {
@@ -2397,6 +2452,7 @@ function data3() {
     traceBounds: { ...traceBounds },
     browserProcessId,
     browserThreadId,
+    processNames: new Map(processNames),
     gpuProcessId,
     gpuThreadId: gpuThreadId === TraceEvents_exports.ThreadID(-1) ? void 0 : gpuThreadId,
     viewportRect: viewportRect || void 0,
@@ -2408,7 +2464,8 @@ function data3() {
     rendererProcessesByFrame: new Map(rendererProcessesByFrameId),
     topLevelRendererIds: new Set(topLevelRendererIds),
     frameByProcessId: new Map(framesByProcessId),
-    mainFrameNavigations: [...mainFrameNavigations]
+    mainFrameNavigations: [...mainFrameNavigations],
+    traceIsGeneric
   };
 }
 
@@ -3167,8 +3224,8 @@ function getOrCreatePreProcessedData(processId, profileId) {
     profileId
   }));
 }
-function getProfileCallFunctionName(data21, entry) {
-  const profile = data21.profilesInProcess.get(entry.pid)?.get(entry.tid);
+function getProfileCallFunctionName(data22, entry) {
+  const profile = data22.profilesInProcess.get(entry.pid)?.get(entry.tid);
   const node = profile?.parsedProfile.nodeById(entry.nodeId);
   if (node?.functionName) {
     return node.functionName;
@@ -3309,18 +3366,19 @@ function assignIsMainFrame(processes2, mainFrameId2, rendererProcessesByFrame) {
   }
 }
 function assignThreadName(processes2, rendererProcessesByFrame, threadsInProcess2) {
-  for (const [, renderProcessesByPid] of rendererProcessesByFrame) {
-    for (const [pid] of renderProcessesByPid) {
-      const process = getOrCreateRendererProcess(processes2, pid);
-      for (const [tid, threadInfo] of threadsInProcess2.get(pid) ?? []) {
-        const thread = getOrCreateRendererThread(process, tid);
-        thread.name = threadInfo?.args.name ?? `${tid}`;
-      }
+  for (const [pid, process] of processes2) {
+    for (const [tid, threadInfo] of threadsInProcess2.get(pid) ?? []) {
+      const thread = getOrCreateRendererThread(process, tid);
+      thread.name = threadInfo?.args.name ?? `${tid}`;
     }
   }
 }
 function sanitizeProcesses(processes2) {
   const auctionWorklets = data2().worklets;
+  const metaData = data3();
+  if (metaData.traceIsGeneric) {
+    return;
+  }
   for (const [pid, process] of processes2) {
     if (process.url === null) {
       const maybeWorklet = auctionWorklets.get(pid);
@@ -3331,10 +3389,6 @@ function sanitizeProcesses(processes2) {
       }
       continue;
     }
-    const asUrl = new URL(process.url);
-    if (asUrl.protocol === "about:") {
-      processes2.delete(pid);
-    }
   }
 }
 function sanitizeThreads(processes2) {
@@ -3408,6 +3462,7 @@ var ThreadType = /* @__PURE__ */ ((ThreadType2) => {
   ThreadType2["AUCTION_WORKLET"] = "AUCTION_WORKLET";
   ThreadType2["OTHER"] = "OTHER";
   ThreadType2["CPU_PROFILE"] = "CPU_PROFILE";
+  ThreadType2["THREAD_POOL"] = "THREAD_POOL";
   return ThreadType2;
 })(ThreadType || {});
 function getThreadTypeForRendererThread(auctionWorkletsData, pid, thread) {
@@ -3420,6 +3475,8 @@ function getThreadTypeForRendererThread(auctionWorkletsData, pid, thread) {
     threadType = "RASTERIZER" /* RASTERIZER */;
   } else if (auctionWorkletsData.worklets.has(pid)) {
     threadType = "AUCTION_WORKLET" /* AUCTION_WORKLET */;
+  } else if (thread.name?.startsWith("ThreadPool")) {
+    threadType = "THREAD_POOL" /* THREAD_POOL */;
   }
   return threadType;
 }
@@ -3428,10 +3485,10 @@ function threadsInRenderer(rendererData, auctionWorkletsData) {
   if (rendererData.processes.size) {
     for (const [pid, process] of rendererData.processes) {
       for (const [tid, thread] of process.threads) {
-        const threadType = getThreadTypeForRendererThread(auctionWorkletsData, pid, thread);
         if (!thread.tree) {
           continue;
         }
+        const threadType = getThreadTypeForRendererThread(auctionWorkletsData, pid, thread);
         foundThreads.push({
           name: thread.name,
           pid,
@@ -3496,12 +3553,14 @@ async function finalize7() {
   if (handlerState6 !== 2 /* INITIALIZED */) {
     throw new Error("FramesHandler is not initialized");
   }
+  Trace_exports.sortTraceEventsInPlace(allEvents);
   const modelForTrace = new TimelineFrameModel(allEvents, data6(), data2(), data3(), data4());
   model = modelForTrace;
 }
 function data7() {
   return {
-    frames: model ? Array.from(model.frames()) : []
+    frames: model ? Array.from(model.frames()) : [],
+    framesById: model ? { ...model.framesById() } : {}
   };
 }
 function deps3() {
@@ -3510,14 +3569,6 @@ function deps3() {
 function isFrameEvent(event) {
   return TraceEvents_exports.isTraceEventSetLayerId(event) || TraceEvents_exports.isTraceEventBeginFrame(event) || TraceEvents_exports.isTraceEventDroppedFrame(event) || TraceEvents_exports.isTraceEventRequestMainThreadFrame(event) || TraceEvents_exports.isTraceEventBeginMainThreadFrame(event) || TraceEvents_exports.isTraceEventNeedsBeginFrameChanged(event) || TraceEvents_exports.isTraceEventCommit(event) || TraceEvents_exports.isTraceEventCompositeLayers(event) || TraceEvents_exports.isTraceEventActivateLayerTree(event) || TraceEvents_exports.isTraceEventDrawFrame(event);
 }
-function idForEntry(entry) {
-  const scope = TraceEvents_exports.isTraceEventInstant(entry) && entry.s || void 0;
-  if (TraceEvents_exports.isNestableAsyncPhase(entry.ph)) {
-    const id = Trace_exports.extractId(entry);
-    return scope ? `${scope}@${id}` : id;
-  }
-  return void 0;
-}
 function entryIsTopLevel(entry) {
   const devtoolsTimelineCategory = "disabled-by-default-devtools.timeline";
   return entry.name === TraceEvents_exports.KnownEventName.RunTask && entry.cat.includes(devtoolsTimelineCategory);
@@ -3526,7 +3577,6 @@ var TimelineFrameModel = class {
   #frames = [];
   #frameById = {};
   #beginFrameQueue = new TimelineFrameBeginFrameQueue();
-  #minimumRecordTime = Timing_exports2.MicroSeconds(Infinity);
   #lastFrame = null;
   #mainFrameCommitted = false;
   #mainFrameRequested = false;
@@ -3554,6 +3604,9 @@ var TimelineFrameModel = class {
     this.#layerTreeData = layerTreeData;
     this.#addTraceEvents(allEvents3, threadData, metaData.mainFrameId);
   }
+  framesById() {
+    return this.#frameById;
+  }
   frames() {
     return this.#frames;
   }
@@ -3638,7 +3691,7 @@ var TimelineFrameModel = class {
     if (this.#lastFrame) {
       this.#flushFrame(this.#lastFrame, startTime);
     }
-    this.#lastFrame = new TimelineFrame(seqId, startTime, Timing_exports2.MicroSeconds(startTime - this.#minimumRecordTime));
+    this.#lastFrame = new TimelineFrame(seqId, startTime, Timing_exports2.MicroSeconds(startTime - data3().traceBounds.min));
   }
   #flushFrame(frame, endTime) {
     frame.setLayerTree(this.#lastLayerTree);
@@ -3678,13 +3731,9 @@ var TimelineFrameModel = class {
     this.#activeProcessId = null;
   }
   #addTraceEvent(event, mainFrameId2) {
-    if (event.ts && event.ts < this.#minimumRecordTime) {
-      this.#minimumRecordTime = event.ts;
-    }
-    const entryId = idForEntry(event);
     if (TraceEvents_exports.isTraceEventSetLayerId(event) && event.args.data.frame === mainFrameId2) {
       this.#layerTreeId = event.args.data.layerTreeId;
-    } else if (entryId && TraceEvents_exports.isTraceEventLayerTreeHostImplSnapshot(event) && Number(entryId) === this.#layerTreeId) {
+    } else if (TraceEvents_exports.isTraceEventLayerTreeHostImplSnapshot(event) && Number(event.id) === this.#layerTreeId) {
       this.#handleLayerTreeSnapshot({
         entry: event,
         paints: []
@@ -3857,6 +3906,11 @@ var TimelineFrameBeginFrameQueue = class {
     return framesToVisualize;
   }
 };
+function framesWithinWindow(frames, startTime, endTime) {
+  const firstFrame = array_utilities_exports.lowerBound(frames, startTime || 0, (time, frame) => time - frame.endTime);
+  const lastFrame = array_utilities_exports.lowerBound(frames, endTime || Infinity, (time, frame) => time - frame.startTime);
+  return frames.slice(firstFrame, lastFrame);
+}
 
 // front_end/models/trace/handlers/GPUHandler.ts
 var GPUHandler_exports = {};
@@ -3951,11 +4005,11 @@ function initialize7() {
   }
   handlerState8 = 2 /* INITIALIZED */;
 }
-function storeInitiator(data21) {
-  eventToInitiatorMap.set(data21.event, data21.initiator);
-  const eventsForInitiator = initiatorToEventsMap.get(data21.initiator) || [];
-  eventsForInitiator.push(data21.event);
-  initiatorToEventsMap.set(data21.initiator, eventsForInitiator);
+function storeInitiator(data22) {
+  eventToInitiatorMap.set(data22.event, data22.initiator);
+  const eventsForInitiator = initiatorToEventsMap.get(data22.initiator) || [];
+  eventsForInitiator.push(data22.event);
+  initiatorToEventsMap.set(data22.initiator, eventsForInitiator);
 }
 function handleEvent9(event) {
   if (TraceEvents_exports.isTraceEventScheduleStyleRecalculation(event)) {
@@ -4053,18 +4107,123 @@ function data9() {
   };
 }
 
-// front_end/models/trace/handlers/LargestImagePaintHandler.ts
-var LargestImagePaintHandler_exports = {};
-__export(LargestImagePaintHandler_exports, {
+// front_end/models/trace/handlers/InvalidationsHandler.ts
+var InvalidationsHandler_exports = {};
+__export(InvalidationsHandler_exports, {
   data: () => data10,
+  finalize: () => finalize10,
   handleEvent: () => handleEvent10,
+  initialize: () => initialize8,
   reset: () => reset10
 });
-var imageByDOMNodeId = /* @__PURE__ */ new Map();
+var handlerState9 = 1 /* UNINITIALIZED */;
+var invalidationsForEvent = /* @__PURE__ */ new Map();
+var lastRecalcStyleEvent = null;
+var hasPainted = false;
+var allInvalidationTrackingEvents = [];
 function reset10() {
-  imageByDOMNodeId.clear();
+  handlerState9 = 1 /* UNINITIALIZED */;
+  invalidationsForEvent.clear();
+  lastRecalcStyleEvent = null;
+  allInvalidationTrackingEvents.length = 0;
+  hasPainted = false;
+}
+function initialize8() {
+  if (handlerState9 !== 1 /* UNINITIALIZED */) {
+    throw new Error("InvalidationsHandler was not reset before being initialized");
+  }
+  handlerState9 = 2 /* INITIALIZED */;
+}
+function addInvalidationToEvent(event, invalidation) {
+  const existingInvalidations = invalidationsForEvent.get(event) || [];
+  const syntheticInvalidation = {
+    ...invalidation,
+    name: "SyntheticInvalidation",
+    frame: invalidation.args.data.frame,
+    nodeId: invalidation.args.data.nodeId,
+    rawEvent: invalidation
+  };
+  if (invalidation.args.data.nodeName) {
+    syntheticInvalidation.nodeName = invalidation.args.data.nodeName;
+  }
+  if (invalidation.args.data.reason) {
+    syntheticInvalidation.reason = invalidation.args.data.reason;
+  }
+  if (invalidation.args.data.stackTrace) {
+    syntheticInvalidation.stackTrace = invalidation.args.data.stackTrace;
+  }
+  existingInvalidations.push(syntheticInvalidation);
+  invalidationsForEvent.set(event, existingInvalidations);
 }
 function handleEvent10(event) {
+  if (TraceEvents_exports.isTraceEventUpdateLayoutTree(event)) {
+    lastRecalcStyleEvent = event;
+    for (const invalidation of allInvalidationTrackingEvents) {
+      if (TraceEvents_exports.isTraceEventLayoutInvalidationTracking(invalidation)) {
+        continue;
+      }
+      const recalcFrameId = lastRecalcStyleEvent.args.beginData?.frame;
+      if (recalcFrameId && invalidation.args.data.frame === recalcFrameId) {
+        addInvalidationToEvent(event, invalidation);
+      }
+    }
+    return;
+  }
+  if (TraceEvents_exports.isTraceEventScheduleStyleInvalidationTracking(event) || TraceEvents_exports.isTraceEventStyleRecalcInvalidationTracking(event) || TraceEvents_exports.isTraceEventStyleInvalidatorInvalidationTracking(event) || TraceEvents_exports.isTraceEventLayoutInvalidationTracking(event)) {
+    if (hasPainted) {
+      allInvalidationTrackingEvents.length = 0;
+      lastRecalcStyleEvent = null;
+      hasPainted = false;
+    }
+    if (lastRecalcStyleEvent && (TraceEvents_exports.isTraceEventScheduleStyleInvalidationTracking(event) || TraceEvents_exports.isTraceEventStyleRecalcInvalidationTracking(event) || TraceEvents_exports.isTraceEventStyleInvalidatorInvalidationTracking(event))) {
+      const recalcEndTime = lastRecalcStyleEvent.ts + (lastRecalcStyleEvent.dur || 0);
+      if (event.ts >= lastRecalcStyleEvent.ts && event.ts <= recalcEndTime && lastRecalcStyleEvent.args.beginData?.frame === event.args.data.frame) {
+        addInvalidationToEvent(lastRecalcStyleEvent, event);
+      }
+    }
+    allInvalidationTrackingEvents.push(event);
+    return;
+  }
+  if (TraceEvents_exports.isTraceEventPaint(event)) {
+    hasPainted = true;
+    return;
+  }
+  if (TraceEvents_exports.isTraceEventLayout(event)) {
+    const layoutFrame = event.args.beginData.frame;
+    for (const invalidation of allInvalidationTrackingEvents) {
+      if (!TraceEvents_exports.isTraceEventLayoutInvalidationTracking(invalidation)) {
+        continue;
+      }
+      if (invalidation.args.data.frame === layoutFrame) {
+        addInvalidationToEvent(event, invalidation);
+      }
+    }
+  }
+}
+async function finalize10() {
+  if (handlerState9 !== 2 /* INITIALIZED */) {
+    throw new Error("InvalidationsHandler is not initialized");
+  }
+  handlerState9 = 3 /* FINALIZED */;
+}
+function data10() {
+  return {
+    invalidationsForEvent: new Map(invalidationsForEvent)
+  };
+}
+
+// front_end/models/trace/handlers/LargestImagePaintHandler.ts
+var LargestImagePaintHandler_exports = {};
+__export(LargestImagePaintHandler_exports, {
+  data: () => data11,
+  handleEvent: () => handleEvent11,
+  reset: () => reset11
+});
+var imageByDOMNodeId = /* @__PURE__ */ new Map();
+function reset11() {
+  imageByDOMNodeId.clear();
+}
+function handleEvent11(event) {
   if (!TraceEvents_exports.isTraceEventLargestImagePaintCandidate(event)) {
     return;
   }
@@ -4073,22 +4232,22 @@ function handleEvent10(event) {
   }
   imageByDOMNodeId.set(event.args.data.DOMNodeId, event);
 }
-function data10() {
+function data11() {
   return new Map(imageByDOMNodeId);
 }
 
 // front_end/models/trace/handlers/LargestTextPaintHandler.ts
 var LargestTextPaintHandler_exports = {};
 __export(LargestTextPaintHandler_exports, {
-  data: () => data11,
-  handleEvent: () => handleEvent11,
-  reset: () => reset11
+  data: () => data12,
+  handleEvent: () => handleEvent12,
+  reset: () => reset12
 });
 var textPaintByDOMNodeId = /* @__PURE__ */ new Map();
-function reset11() {
+function reset12() {
   textPaintByDOMNodeId.clear();
 }
-function handleEvent11(event) {
+function handleEvent12(event) {
   if (!TraceEvents_exports.isTraceEventLargestTextPaintCandidate(event)) {
     return;
   }
@@ -4097,7 +4256,7 @@ function handleEvent11(event) {
   }
   textPaintByDOMNodeId.set(event.args.data.DOMNodeId, event);
 }
-function data11() {
+function data12() {
   return new Map(textPaintByDOMNodeId);
 }
 
@@ -4107,13 +4266,13 @@ __export(LayoutShiftsHandler_exports, {
   LayoutShiftsThreshold: () => LayoutShiftsThreshold,
   MAX_CLUSTER_DURATION: () => MAX_CLUSTER_DURATION,
   MAX_SHIFT_TIME_DELTA: () => MAX_SHIFT_TIME_DELTA,
-  data: () => data14,
+  data: () => data15,
   deps: () => deps7,
-  finalize: () => finalize12,
+  finalize: () => finalize13,
   findNextScreenshotEventIndex: () => findNextScreenshotEventIndex,
-  handleEvent: () => handleEvent14,
-  initialize: () => initialize8,
-  reset: () => reset14,
+  handleEvent: () => handleEvent15,
+  initialize: () => initialize9,
+  reset: () => reset15,
   stateForLayoutShiftScore: () => stateForLayoutShiftScore
 });
 
@@ -4123,14 +4282,14 @@ __export(PageLoadMetricsHandler_exports, {
   MarkerName: () => MarkerName,
   MetricName: () => MetricName,
   ScoreClassification: () => ScoreClassification,
-  data: () => data12,
+  data: () => data13,
   deps: () => deps5,
   eventIsPageLoadEvent: () => eventIsPageLoadEvent,
-  finalize: () => finalize10,
+  finalize: () => finalize11,
   getFrameIdForPageLoadEvent: () => getFrameIdForPageLoadEvent,
-  handleEvent: () => handleEvent12,
+  handleEvent: () => handleEvent13,
   isTraceEventMarkerEvent: () => isTraceEventMarkerEvent,
-  reset: () => reset12,
+  reset: () => reset13,
   scoreClassificationForDOMContentLoaded: () => scoreClassificationForDOMContentLoaded,
   scoreClassificationForFirstContentfulPaint: () => scoreClassificationForFirstContentfulPaint,
   scoreClassificationForLargestContentfulPaint: () => scoreClassificationForLargestContentfulPaint,
@@ -4139,7 +4298,7 @@ __export(PageLoadMetricsHandler_exports, {
 });
 var metricScoresByFrameId = /* @__PURE__ */ new Map();
 var allMarkerEvents = [];
-function reset12() {
+function reset13() {
   metricScoresByFrameId.clear();
   pageLoadEventsArray = [];
   allMarkerEvents = [];
@@ -4166,7 +4325,7 @@ var pageLoadEventTypeGuards = [
 function eventIsPageLoadEvent(event) {
   return pageLoadEventTypeGuards.some((fn) => fn(event));
 }
-function handleEvent12(event) {
+function handleEvent13(event) {
   if (!eventIsPageLoadEvent(event)) {
     return;
   }
@@ -4425,7 +4584,7 @@ function gatherFinalLCPEvents() {
   }
   return allFinalLCPEvents;
 }
-async function finalize10() {
+async function finalize11() {
   pageLoadEventsArray.sort((a, b) => a.ts - b.ts);
   for (const pageLoadEvent of pageLoadEventsArray) {
     const navigation = getNavigationForPageLoadEvent(pageLoadEvent);
@@ -4439,7 +4598,7 @@ async function finalize10() {
   const markerEvents = [...allFinalLCPEvents, ...allEventsButLCP].filter(isTraceEventMarkerEvent);
   allMarkerEvents = markerEvents.filter((event) => getFrameIdForPageLoadEvent(event) === mainFrame).sort((a, b) => a.ts - b.ts);
 }
-function data12() {
+function data13() {
   return {
     metricScoresByFrameId: new Map(metricScoresByFrameId),
     allMarkerEvents: [...allMarkerEvents]
@@ -4470,32 +4629,32 @@ var MetricName = /* @__PURE__ */ ((MetricName2) => {
 // front_end/models/trace/handlers/ScreenshotsHandler.ts
 var ScreenshotsHandler_exports = {};
 __export(ScreenshotsHandler_exports, {
-  data: () => data13,
+  data: () => data14,
   deps: () => deps6,
-  finalize: () => finalize11,
-  handleEvent: () => handleEvent13,
-  reset: () => reset13
+  finalize: () => finalize12,
+  handleEvent: () => handleEvent14,
+  reset: () => reset14
 });
 var eventsInProcessThread2 = /* @__PURE__ */ new Map();
 var snapshots = [];
-function reset13() {
+function reset14() {
   eventsInProcessThread2.clear();
   snapshots.length = 0;
 }
-function handleEvent13(event) {
+function handleEvent14(event) {
   if (event.name !== "Screenshot") {
     return;
   }
   Trace_exports.addEventToProcessThread(event, eventsInProcessThread2);
 }
-async function finalize11() {
+async function finalize12() {
   const { browserProcessId: browserProcessId2, browserThreadId: browserThreadId2 } = data3();
   const browserThreads = eventsInProcessThread2.get(browserProcessId2);
   if (browserThreads) {
     snapshots = browserThreads.get(browserThreadId2) || [];
   }
 }
-function data13() {
+function data14() {
   return [...snapshots];
 }
 function deps6() {
@@ -4507,6 +4666,7 @@ var MAX_CLUSTER_DURATION = Timing_exports3.millisecondsToMicroseconds(Timing_exp
 var MAX_SHIFT_TIME_DELTA = Timing_exports3.millisecondsToMicroseconds(Timing_exports2.MilliSeconds(1e3));
 var layoutShiftEvents = [];
 var layoutInvalidationEvents = [];
+var scheduleStyleInvalidationEvents = [];
 var styleRecalcInvalidationEvents = [];
 var backendNodeIds = /* @__PURE__ */ new Set();
 var prePaintEvents = [];
@@ -4514,17 +4674,19 @@ var sessionMaxScore = 0;
 var clsWindowID = -1;
 var clusters = [];
 var scoreRecords = [];
-var handlerState9 = 1 /* UNINITIALIZED */;
-function initialize8() {
-  if (handlerState9 !== 1 /* UNINITIALIZED */) {
+var handlerState10 = 1 /* UNINITIALIZED */;
+function initialize9() {
+  if (handlerState10 !== 1 /* UNINITIALIZED */) {
     throw new Error("LayoutShifts Handler was not reset");
   }
-  handlerState9 = 2 /* INITIALIZED */;
+  handlerState10 = 2 /* INITIALIZED */;
 }
-function reset14() {
-  handlerState9 = 1 /* UNINITIALIZED */;
+function reset15() {
+  handlerState10 = 1 /* UNINITIALIZED */;
   layoutShiftEvents.length = 0;
   layoutInvalidationEvents.length = 0;
+  scheduleStyleInvalidationEvents.length = 0;
+  styleRecalcInvalidationEvents.length = 0;
   prePaintEvents.length = 0;
   backendNodeIds.clear();
   clusters.length = 0;
@@ -4532,19 +4694,22 @@ function reset14() {
   scoreRecords.length = 0;
   clsWindowID = -1;
 }
-function handleEvent14(event) {
-  if (handlerState9 !== 2 /* INITIALIZED */) {
+function handleEvent15(event) {
+  if (handlerState10 !== 2 /* INITIALIZED */) {
     throw new Error("Handler is not initialized");
   }
   if (TraceEvents_exports.isTraceEventLayoutShift(event) && !event.args.data?.had_recent_input) {
     layoutShiftEvents.push(event);
     return;
   }
-  if (TraceEvents_exports.isTraceEventLayoutInvalidation(event)) {
+  if (TraceEvents_exports.isTraceEventLayoutInvalidationTracking(event)) {
     layoutInvalidationEvents.push(event);
     return;
   }
-  if (TraceEvents_exports.isTraceEventStyleRecalcInvalidation(event)) {
+  if (TraceEvents_exports.isTraceEventScheduleStyleInvalidationTracking(event)) {
+    scheduleStyleInvalidationEvents.push(event);
+  }
+  if (TraceEvents_exports.isTraceEventStyleRecalcInvalidationTracking(event)) {
     styleRecalcInvalidationEvents.push(event);
   }
   if (TraceEvents_exports.isTraceEventPrePaint(event)) {
@@ -4564,7 +4729,7 @@ function updateTraceWindowMax(traceWindow, newMax) {
   traceWindow.range = Timing_exports2.MicroSeconds(traceWindow.max - traceWindow.min);
 }
 function findNextScreenshotSource(timestamp) {
-  const screenshots = data13();
+  const screenshots = data14();
   const screenshotIndex = findNextScreenshotEventIndex(screenshots, timestamp);
   if (!screenshotIndex) {
     return void 0;
@@ -4609,15 +4774,21 @@ function collectNodes() {
     }
     backendNodeIds.add(layoutInvalidation.args.data.nodeId);
   }
+  for (const scheduleStyleInvalidation of scheduleStyleInvalidationEvents) {
+    if (!scheduleStyleInvalidation.args.data?.nodeId) {
+      continue;
+    }
+    backendNodeIds.add(scheduleStyleInvalidation.args.data.nodeId);
+  }
 }
-async function finalize12() {
+async function finalize13() {
   layoutShiftEvents.sort((a, b) => a.ts - b.ts);
   prePaintEvents.sort((a, b) => a.ts - b.ts);
   layoutInvalidationEvents.sort((a, b) => a.ts - b.ts);
   await buildLayoutShiftsClusters();
   buildScoreRecords();
   collectNodes();
-  handlerState9 = 3 /* FINALIZED */;
+  handlerState10 = 3 /* FINALIZED */;
 }
 async function buildLayoutShiftsClusters() {
   const { navigationsByFrameId: navigationsByFrameId2, mainFrameId: mainFrameId2, traceBounds: traceBounds2 } = data3();
@@ -4731,8 +4902,8 @@ async function buildLayoutShiftsClusters() {
     }
   }
 }
-function data14() {
-  if (handlerState9 !== 3 /* FINALIZED */) {
+function data15() {
+  if (handlerState10 !== 3 /* FINALIZED */) {
     throw new Error("Layout Shifts Handler is not finalized");
   }
   return {
@@ -4741,6 +4912,7 @@ function data14() {
     clsWindowID,
     prePaintEvents: [...prePaintEvents],
     layoutInvalidationEvents: [...layoutInvalidationEvents],
+    scheduleStyleInvalidationEvents: [...scheduleStyleInvalidationEvents],
     styleRecalcInvalidationEvents: [],
     scoreRecords: [...scoreRecords],
     backendNodeIds: [...backendNodeIds]
@@ -4769,34 +4941,34 @@ var LayoutShiftsThreshold = /* @__PURE__ */ ((LayoutShiftsThreshold2) => {
 // front_end/models/trace/handlers/MemoryHandler.ts
 var MemoryHandler_exports = {};
 __export(MemoryHandler_exports, {
-  data: () => data15,
-  handleEvent: () => handleEvent15,
-  reset: () => reset15
+  data: () => data16,
+  handleEvent: () => handleEvent16,
+  reset: () => reset16
 });
 var updateCountersByProcess = /* @__PURE__ */ new Map();
-function reset15() {
+function reset16() {
   updateCountersByProcess.clear();
 }
-function handleEvent15(event) {
+function handleEvent16(event) {
   if (TraceEvents_exports.isTraceEventUpdateCounters(event)) {
     const countersForProcess = map_utilities_exports.getWithDefault(updateCountersByProcess, event.pid, () => []);
     countersForProcess.push(event);
     updateCountersByProcess.set(event.pid, countersForProcess);
   }
 }
-function data15() {
+function data16() {
   return { updateCountersByProcess: new Map(updateCountersByProcess) };
 }
 
 // front_end/models/trace/handlers/NetworkRequestsHandler.ts
 var NetworkRequestsHandler_exports = {};
 __export(NetworkRequestsHandler_exports, {
-  data: () => data16,
+  data: () => data17,
   deps: () => deps8,
-  finalize: () => finalize13,
-  handleEvent: () => handleEvent16,
-  initialize: () => initialize9,
-  reset: () => reset16
+  finalize: () => finalize14,
+  handleEvent: () => handleEvent17,
+  initialize: () => initialize10,
+  reset: () => reset17
 });
 var MILLISECONDS_TO_MICROSECONDS = 1e3;
 var SECONDS_TO_MICROSECONDS = 1e6;
@@ -4827,18 +4999,18 @@ function firstPositiveValueInList(entries) {
   }
   return 0;
 }
-var handlerState10 = 1 /* UNINITIALIZED */;
-function reset16() {
+var handlerState11 = 1 /* UNINITIALIZED */;
+function reset17() {
   requestsByOrigin.clear();
   requestMap.clear();
   requestsByTime.length = 0;
-  handlerState10 = 1 /* UNINITIALIZED */;
+  handlerState11 = 1 /* UNINITIALIZED */;
 }
-function initialize9() {
-  handlerState10 = 2 /* INITIALIZED */;
+function initialize10() {
+  handlerState11 = 2 /* INITIALIZED */;
 }
-function handleEvent16(event) {
-  if (handlerState10 !== 2 /* INITIALIZED */) {
+function handleEvent17(event) {
+  if (handlerState11 !== 2 /* INITIALIZED */) {
     throw new Error("Network Request handler is not initialized");
   }
   if (TraceEvents_exports.isTraceEventResourceChangePriority(event)) {
@@ -4870,8 +5042,8 @@ function handleEvent16(event) {
     return;
   }
 }
-async function finalize13() {
-  if (handlerState10 !== 2 /* INITIALIZED */) {
+async function finalize14() {
+  if (handlerState11 !== 2 /* INITIALIZED */) {
     throw new Error("Network Request handler is not initialized");
   }
   const { rendererProcessesByFrame } = data3();
@@ -5015,10 +5187,10 @@ async function finalize13() {
     requests.all.push(networkEvent);
     requestsByTime.push(networkEvent);
   }
-  handlerState10 = 3 /* FINALIZED */;
+  handlerState11 = 3 /* FINALIZED */;
 }
-function data16() {
-  if (handlerState10 !== 3 /* FINALIZED */) {
+function data17() {
+  if (handlerState11 !== 3 /* FINALIZED */) {
     throw new Error("Network Request handler is not finalized");
   }
   return {
@@ -5035,11 +5207,11 @@ var UserInteractionsHandler_exports = {};
 __export(UserInteractionsHandler_exports, {
   LONG_INTERACTION_THRESHOLD: () => LONG_INTERACTION_THRESHOLD,
   categoryOfInteraction: () => categoryOfInteraction,
-  data: () => data17,
-  finalize: () => finalize14,
-  handleEvent: () => handleEvent17,
+  data: () => data18,
+  finalize: () => finalize15,
+  handleEvent: () => handleEvent18,
   removeNestedInteractions: () => removeNestedInteractions,
-  reset: () => reset17
+  reset: () => reset18
 });
 var allEvents2 = [];
 var LONG_INTERACTION_THRESHOLD = Timing_exports3.millisecondsToMicroseconds(Timing_exports2.MilliSeconds(200));
@@ -5048,18 +5220,18 @@ var interactionEvents = [];
 var interactionEventsWithNoNesting = [];
 var eventTimingEndEventsById = /* @__PURE__ */ new Map();
 var eventTimingStartEventsForInteractions = [];
-var handlerState11 = 1 /* UNINITIALIZED */;
-function reset17() {
+var handlerState12 = 1 /* UNINITIALIZED */;
+function reset18() {
   allEvents2.length = 0;
   interactionEvents.length = 0;
   eventTimingStartEventsForInteractions.length = 0;
   eventTimingEndEventsById.clear();
   interactionEventsWithNoNesting.length = 0;
   longestInteractionEvent = null;
-  handlerState11 = 2 /* INITIALIZED */;
+  handlerState12 = 2 /* INITIALIZED */;
 }
-function handleEvent17(event) {
-  if (handlerState11 !== 2 /* INITIALIZED */) {
+function handleEvent18(event) {
+  if (handlerState12 !== 2 /* INITIALIZED */) {
     throw new Error("Handler is not initialized");
   }
   if (!TraceEvents_exports.isTraceEventEventTiming(event)) {
@@ -5150,7 +5322,7 @@ function writeSyntheticTimespans(event) {
   event.mainThreadHandling = Timing_exports2.MicroSeconds(event.processingEnd - event.processingStart);
   event.presentationDelay = Timing_exports2.MicroSeconds(endEvent.ts - event.processingEnd);
 }
-async function finalize14() {
+async function finalize15() {
   for (const interactionStartEvent of eventTimingStartEventsForInteractions) {
     const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);
     if (!endEvent) {
@@ -5186,7 +5358,7 @@ async function finalize14() {
     writeSyntheticTimespans(interactionEvent);
     interactionEvents.push(interactionEvent);
   }
-  handlerState11 = 3 /* FINALIZED */;
+  handlerState12 = 3 /* FINALIZED */;
   interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
   for (const interactionEvent of interactionEventsWithNoNesting) {
     if (!longestInteractionEvent || longestInteractionEvent.dur < interactionEvent.dur) {
@@ -5194,7 +5366,7 @@ async function finalize14() {
     }
   }
 }
-function data17() {
+function data18() {
   return {
     allEvents: [...allEvents2],
     interactionEvents: [...interactionEvents],
@@ -5209,24 +5381,24 @@ function data17() {
 // front_end/models/trace/handlers/UserTimingsHandler.ts
 var UserTimingsHandler_exports = {};
 __export(UserTimingsHandler_exports, {
-  data: () => data18,
-  finalize: () => finalize15,
-  handleEvent: () => handleEvent18,
-  reset: () => reset18
+  data: () => data19,
+  finalize: () => finalize16,
+  handleEvent: () => handleEvent19,
+  reset: () => reset19
 });
 var syntheticEvents = [];
 var performanceMeasureEvents = [];
 var performanceMarkEvents = [];
 var consoleTimings = [];
 var timestampEvents = [];
-var handlerState12 = 1 /* UNINITIALIZED */;
-function reset18() {
+var handlerState13 = 1 /* UNINITIALIZED */;
+function reset19() {
   syntheticEvents.length = 0;
   performanceMeasureEvents.length = 0;
   performanceMarkEvents.length = 0;
   consoleTimings.length = 0;
   timestampEvents.length = 0;
-  handlerState12 = 2 /* INITIALIZED */;
+  handlerState13 = 2 /* INITIALIZED */;
 }
 var resourceTimingNames = [
   "workerStart",
@@ -5266,8 +5438,8 @@ var navTimingNames = [
   "loadEventStart",
   "loadEventEnd"
 ];
-function handleEvent18(event) {
-  if (handlerState12 !== 2 /* INITIALIZED */) {
+function handleEvent19(event) {
+  if (handlerState13 !== 2 /* INITIALIZED */) {
     throw new Error("UserTimings handler is not initialized");
   }
   const ignoredNames = [...resourceTimingNames, ...navTimingNames];
@@ -5288,16 +5460,16 @@ function handleEvent18(event) {
     timestampEvents.push(event);
   }
 }
-async function finalize15() {
-  if (handlerState12 !== 2 /* INITIALIZED */) {
+async function finalize16() {
+  if (handlerState13 !== 2 /* INITIALIZED */) {
     throw new Error("UserTimings handler is not initialized");
   }
   const asyncEvents = [...performanceMeasureEvents, ...consoleTimings];
   syntheticEvents.push(...Trace_exports.createMatchedSortedSyntheticEvents(asyncEvents));
-  handlerState12 = 3 /* FINALIZED */;
+  handlerState13 = 3 /* FINALIZED */;
 }
-function data18() {
-  if (handlerState12 !== 3 /* FINALIZED */) {
+function data19() {
+  if (handlerState13 !== 3 /* FINALIZED */) {
     throw new Error("UserTimings handler is not finalized");
   }
   return {
@@ -5313,17 +5485,17 @@ var WarningsHandler_exports = {};
 __export(WarningsHandler_exports, {
   FORCED_LAYOUT_AND_STYLES_THRESHOLD: () => FORCED_LAYOUT_AND_STYLES_THRESHOLD,
   LONG_MAIN_THREAD_TASK_THRESHOLD: () => LONG_MAIN_THREAD_TASK_THRESHOLD,
-  data: () => data19,
+  data: () => data20,
   deps: () => deps9,
-  finalize: () => finalize16,
-  handleEvent: () => handleEvent19,
-  reset: () => reset19
+  finalize: () => finalize17,
+  handleEvent: () => handleEvent20,
+  reset: () => reset20
 });
 var warningsPerEvent = /* @__PURE__ */ new Map();
 var eventsPerWarning = /* @__PURE__ */ new Map();
 var FORCED_LAYOUT_AND_STYLES_THRESHOLD = Timing_exports3.millisecondsToMicroseconds(Timing_exports2.MilliSeconds(10));
 var LONG_MAIN_THREAD_TASK_THRESHOLD = Timing_exports3.millisecondsToMicroseconds(Timing_exports2.MilliSeconds(50));
-function reset19() {
+function reset20() {
   warningsPerEvent.clear();
   eventsPerWarning.clear();
 }
@@ -5335,7 +5507,7 @@ function storeWarning(event, warning) {
   existingEvents.push(event);
   eventsPerWarning.set(warning, existingEvents);
 }
-function handleEvent19(event) {
+function handleEvent20(event) {
   if (event.name === TraceEvents_exports.KnownEventName.RunTask) {
     const { duration } = Timing_exports3.eventTimingsMicroSeconds(event);
     if (duration > LONG_MAIN_THREAD_TASK_THRESHOLD) {
@@ -5366,13 +5538,13 @@ function handleEvent19(event) {
 function deps9() {
   return ["UserInteractions"];
 }
-async function finalize16() {
-  const longInteractions = data17().interactionsOverThreshold;
+async function finalize17() {
+  const longInteractions = data18().interactionsOverThreshold;
   for (const interaction of longInteractions) {
     storeWarning(interaction, "LONG_INTERACTION");
   }
 }
-function data19() {
+function data20() {
   return {
     perEvent: new Map(warningsPerEvent),
     perWarning: new Map(eventsPerWarning)
@@ -5382,38 +5554,38 @@ function data19() {
 // front_end/models/trace/handlers/WorkersHandler.ts
 var WorkersHandler_exports = {};
 __export(WorkersHandler_exports, {
-  data: () => data20,
-  finalize: () => finalize17,
-  handleEvent: () => handleEvent20,
-  initialize: () => initialize10,
-  reset: () => reset20
+  data: () => data21,
+  finalize: () => finalize18,
+  handleEvent: () => handleEvent21,
+  initialize: () => initialize11,
+  reset: () => reset21
 });
-var handlerState13 = 1 /* UNINITIALIZED */;
+var handlerState14 = 1 /* UNINITIALIZED */;
 var sessionIdEvents = [];
 var workerIdByThread = /* @__PURE__ */ new Map();
 var workerURLById = /* @__PURE__ */ new Map();
-function initialize10() {
-  if (handlerState13 !== 1 /* UNINITIALIZED */) {
+function initialize11() {
+  if (handlerState14 !== 1 /* UNINITIALIZED */) {
     throw new Error("Workers Handler was not reset");
   }
-  handlerState13 = 2 /* INITIALIZED */;
+  handlerState14 = 2 /* INITIALIZED */;
 }
-function reset20() {
+function reset21() {
   sessionIdEvents.length = 0;
   workerIdByThread.clear();
   workerURLById.clear();
-  handlerState13 = 1 /* UNINITIALIZED */;
+  handlerState14 = 1 /* UNINITIALIZED */;
 }
-function handleEvent20(event) {
-  if (handlerState13 !== 2 /* INITIALIZED */) {
+function handleEvent21(event) {
+  if (handlerState14 !== 2 /* INITIALIZED */) {
     throw new Error("Workers Handler is not initialized");
   }
   if (TraceEvents_exports.isTraceEventTracingSessionIdForWorker(event)) {
     sessionIdEvents.push(event);
   }
 }
-async function finalize17() {
-  if (handlerState13 !== 2 /* INITIALIZED */) {
+async function finalize18() {
+  if (handlerState14 !== 2 /* INITIALIZED */) {
     throw new Error("Handler is not initialized");
   }
   for (const sessionIdEvent of sessionIdEvents) {
@@ -5423,10 +5595,10 @@ async function finalize17() {
     workerIdByThread.set(sessionIdEvent.args.data.workerThreadId, sessionIdEvent.args.data.workerId);
     workerURLById.set(sessionIdEvent.args.data.workerId, sessionIdEvent.args.data.url);
   }
-  handlerState13 = 3 /* FINALIZED */;
+  handlerState14 = 3 /* FINALIZED */;
 }
-function data20() {
-  if (handlerState13 !== 3 /* FINALIZED */) {
+function data21() {
+  if (handlerState14 !== 3 /* FINALIZED */) {
     throw new Error("Workers Handler is not finalized");
   }
   return {
@@ -6120,9 +6292,9 @@ __export(Processor_exports, {
   sortHandlers: () => sortHandlers
 });
 var _TraceParseProgressEvent = class extends Event {
-  constructor(data21, init = { bubbles: true }) {
+  constructor(data22, init = { bubbles: true }) {
     super(_TraceParseProgressEvent.eventName, init);
-    this.data = data21;
+    this.data = data22;
   }
 };
 var TraceParseProgressEvent = _TraceParseProgressEvent;
@@ -6226,11 +6398,11 @@ var TraceProcessor = class extends EventTarget {
     if (this.#status !== "FINISHED_PARSING" /* FINISHED_PARSING */) {
       return null;
     }
-    const data21 = {};
+    const data22 = {};
     for (const [name, handler] of Object.entries(this.#traceHandlers)) {
-      Object.assign(data21, { [name]: handler.data() });
+      Object.assign(data22, { [name]: handler.data() });
     }
-    return data21;
+    return data22;
   }
 };
 function sortHandlers(traceHandlers) {
@@ -6316,8 +6488,8 @@ var Model = class extends EventTarget {
     const metadata = config2?.metadata || {};
     const isFreshRecording = config2?.isFreshRecording || false;
     const onTraceUpdate = (event) => {
-      const { data: data21 } = event;
-      this.dispatchEvent(new ModelUpdateEvent({ type: ModelUpdateType.PROGRESS_UPDATE, data: data21 }));
+      const { data: data22 } = event;
+      this.dispatchEvent(new ModelUpdateEvent({ type: ModelUpdateType.PROGRESS_UPDATE, data: data22 }));
     };
     this.#processor.addEventListener(TraceParseProgressEvent.eventName, onTraceUpdate);
     const file = {
@@ -6336,8 +6508,8 @@ var Model = class extends EventTarget {
       this.dispatchEvent(new ModelUpdateEvent({ type: ModelUpdateType.COMPLETE, data: "done" }));
     }
   }
-  #storeParsedFileData(file, data21) {
-    file.traceParsedData = data21;
+  #storeParsedFileData(file, data22) {
+    file.traceParsedData = data22;
     this.#lastRecordingIndex++;
     let recordingName = `Trace ${this.#lastRecordingIndex}`;
     let origin = null;
@@ -6389,9 +6561,9 @@ var ModelUpdateType = /* @__PURE__ */ ((ModelUpdateType2) => {
   return ModelUpdateType2;
 })(ModelUpdateType || {});
 var _ModelUpdateEvent = class extends Event {
-  constructor(data21) {
+  constructor(data22) {
     super(_ModelUpdateEvent.eventName);
-    this.data = data21;
+    this.data = data22;
   }
 };
 var ModelUpdateEvent = _ModelUpdateEvent;
@@ -6462,14 +6634,15 @@ var LayoutShiftRootCauses = class {
     this.linkShiftsToLayoutEvents(layoutShifts, modelData);
   }
   async linkShiftsToLayoutInvalidations(layoutShifts, modelData) {
-    const { prePaintEvents: prePaintEvents2, layoutInvalidationEvents: liEvents, backendNodeIds: backendNodeIds2 } = modelData.LayoutShifts;
+    const { prePaintEvents: prePaintEvents2, layoutInvalidationEvents: layoutInvalidationEvents2, scheduleStyleInvalidationEvents: scheduleStyleInvalidationEvents2, backendNodeIds: backendNodeIds2 } = modelData.LayoutShifts;
+    const eventsForLayoutInvalidation = [...layoutInvalidationEvents2, ...scheduleStyleInvalidationEvents2];
     const nodes = await this.#protocolInterface.pushNodesByBackendIdsToFrontend(backendNodeIds2);
     const nodeIdsByBackendIdMap = /* @__PURE__ */ new Map();
     for (let i = 0; i < backendNodeIds2.length; i++) {
       nodeIdsByBackendIdMap.set(backendNodeIds2[i], nodes[i]);
     }
     const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents2);
-    for (const layoutInvalidation of liEvents) {
+    for (const layoutInvalidation of eventsForLayoutInvalidation) {
       const nextPrePaintIndex = array_utilities_exports.nearestIndexFromBeginning(prePaintEvents2, (prePaint) => prePaint.ts > layoutInvalidation.ts);
       if (nextPrePaintIndex === null) {
         continue;
@@ -6485,9 +6658,9 @@ var LayoutShiftRootCauses = class {
       const layoutInvalidationNode = layoutInvalidationNodeId !== void 0 ? await this.#protocolInterface.getNode(layoutInvalidationNodeId) : null;
       let unsizedMediaRootCause = null;
       let iframeRootCause = null;
-      if (layoutInvalidationNode) {
+      if (layoutInvalidationNode && layoutInvalidation.args.data.reason) {
         unsizedMediaRootCause = await this.getUnsizedMediaRootCause(layoutInvalidation.args.data.reason, layoutInvalidationNode);
-        iframeRootCause = await this.getIframeRootCause(layoutInvalidation.args.data.reason, layoutInvalidationNode);
+        iframeRootCause = this.getIframeRootCause(layoutInvalidation.args.data.reason, layoutInvalidationNode);
       }
       if (!unsizedMediaRootCause && !iframeRootCause && !fontChangeRootCause && !renderBlockRootCause) {
         continue;