@paulirish/trace_engine 0.0.38 → 0.0.40

package/models/trace/handlers/FlowsHandler.js

@@ -1,6 +1,7 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
 import * as Types from '../types/types.js';
 // A flow is a logic connection between trace events. We display this
 // connection as arrows between trace events belonging to the same flow.
@@ -19,7 +20,17 @@ import * as Types from '../types/types.js';
 // in the flows where their corresponding phase events were placed (if
 // there are any corresponding flow phase events at all).
 const flowDataByGroupToken = new Map();
-const flowPhaseBindingTokenToFlowId = new Map();
+// Given a trace event's flow binding tuple (timestamp, process id,
+// thread id and category) we determine if there is any flow data bound
+// to it by using this map's content. It's built when processing flow
+// events in a trace.
+// An alternative to having a map of four levels is having single map
+// from a string token built from concatenating the binding data to the
+// corresponding flow data. However, this token would be calculated for
+// every event in a trace, resulting in a lot of memory overhead and
+// major GC triggering. So we are trading off readability for
+// performance.
+const boundFlowData = new Map();
 const flowsById = new Map();
 const flowEvents = [];
 const nonFlowEvents = [];
@@ -30,7 +41,7 @@ export function reset() {
     flowEvents.length = 0;
     nonFlowEvents.length = 0;
     flowDataByGroupToken.clear();
-    flowPhaseBindingTokenToFlowId.clear();
+    boundFlowData.clear();
     flowsById.clear();
 }
 export function handleEvent(event) {
@@ -41,22 +52,20 @@ export function handleEvent(event) {
     nonFlowEvents.push(event);
 }
 function processNonFlowEvent(event) {
-    const flowPhaseBindingToken = flowPhaseBindingTokenForEvent(event);
-    const flowIds = flowPhaseBindingTokenToFlowId.get(flowPhaseBindingToken);
-    if (!flowIds) {
+    const flowDataForEvent = boundFlowData.get(event.ts)?.get(event.pid)?.get(event.tid)?.get(event.cat);
+    if (!flowDataForEvent) {
         return;
     }
-    for (const flowId of flowIds) {
-        const flow = flowsById.get(flowId);
-        if (!flow) {
-            continue;
-        }
-        const timeIndex = flow.times.indexOf(event.ts);
-        if (timeIndex < 0) {
-            continue;
-        }
-        flow.events[timeIndex] = event;
+    const { flows, bindingParsed } = flowDataForEvent;
+    if (bindingParsed) {
+        // We only consider the first event for a given flow binding tuple.
+        return;
+    }
+    for (const flowId of flows) {
+        const flow = Platform.MapUtilities.getWithDefault(flowsById, flowId, () => new Map());
+        flow.set(event.ts, event);
     }
+    flowDataForEvent.bindingParsed = true;
 }
 /**
  * Creates unique flows by tracking flow phase events. A new created
@@ -68,32 +77,29 @@ function processFlowEvent(flowPhaseEvent) {
     const flowGroup = flowGroupTokenForFlowPhaseEvent(flowPhaseEvent);
     switch (flowPhaseEvent.ph) {
         case ("s" /* Types.Events.Phase.FLOW_START */): {
-            const flowMetadata = { flowId: flowPhaseEvent.id, times: [flowPhaseEvent.ts] };
-            flowDataByGroupToken.set(flowGroup, flowMetadata);
-            addFlowIdToFlowPhaseBinding(flowPhaseBindingTokenForEvent(flowPhaseEvent), flowMetadata.flowId);
+            const flowMetadata = { flowId: flowPhaseEvent.id, times: new Map([[flowPhaseEvent.ts, undefined]]) };
+            flowDataByGroupToken.set(flowGroup, flowPhaseEvent.id);
+            addFlowIdToEventBinding(flowPhaseEvent, flowMetadata.flowId);
             return;
         }
         case ("t" /* Types.Events.Phase.FLOW_STEP */): {
-            const flow = flowDataByGroupToken.get(flowGroup);
-            if (!flow || flow.times.length < 0) {
+            const flowId = flowDataByGroupToken.get(flowGroup);
+            if (flowId === undefined) {
                 // Found non-start flow event with no corresponding start flow,
-                // start event. Quietly ignore problematic event.
+                // start event. Quietly ignore the problematic event.
                 return;
             }
-            addFlowIdToFlowPhaseBinding(flowPhaseBindingTokenForEvent(flowPhaseEvent), flow.flowId);
-            flow.times.push(flowPhaseEvent.ts);
+            addFlowIdToEventBinding(flowPhaseEvent, flowId);
             return;
         }
         case ("f" /* Types.Events.Phase.FLOW_END */): {
-            const flow = flowDataByGroupToken.get(flowGroup);
-            if (!flow || flow.times.length < 0) {
+            const flowId = flowDataByGroupToken.get(flowGroup);
+            if (flowId === undefined) {
                 // Found non-start flow event with no corresponding start flow,
-                // start event. Quietly ignore problematic event.
+                // start event. Quietly ignore the problematic event.
                 return;
             }
-            addFlowIdToFlowPhaseBinding(flowPhaseBindingTokenForEvent(flowPhaseEvent), flow.flowId);
-            flow.times.push(flowPhaseEvent.ts);
-            flowsById.set(flow.flowId, { times: flow.times, events: [] });
+            addFlowIdToEventBinding(flowPhaseEvent, flowId);
             // We don't need this data anymore as the flow has been finished,
             // so we can drop it.
             flowDataByGroupToken.delete(flowGroup);
@@ -102,16 +108,15 @@ function processFlowEvent(flowPhaseEvent) {
 }
 /**
  * A single trace event can belong to multiple flows. This method
- * tracks which flows (flowId) an event belongs to (given
- * its flow phase binding token).
+ * tracks which flows (flowId) an event belongs to given its flow
+ * binding tuple (made of its ts, pid, tid and cat).
  */
-function addFlowIdToFlowPhaseBinding(flowPhaseBinding, flowId) {
-    let flowIds = flowPhaseBindingTokenToFlowId.get(flowPhaseBinding);
-    if (!flowIds) {
-        flowIds = new Set();
-    }
-    flowIds.add(flowId);
-    flowPhaseBindingTokenToFlowId.set(flowPhaseBinding, flowIds);
+function addFlowIdToEventBinding(event, flowId) {
+    const flowsByPid = Platform.MapUtilities.getWithDefault(boundFlowData, event.ts, () => new Map());
+    const flowsByTid = Platform.MapUtilities.getWithDefault(flowsByPid, event.pid, () => new Map());
+    const flowsByCat = Platform.MapUtilities.getWithDefault(flowsByTid, event.tid, () => new Map());
+    const flowData = Platform.MapUtilities.getWithDefault(flowsByCat, event.cat, () => ({ flows: new Set(), bindingParsed: false }));
+    flowData.flows.add(flowId);
 }
 /**
  * Returns a token to group flow phase events (start, step and end)
@@ -127,27 +132,14 @@ function addFlowIdToFlowPhaseBinding(flowPhaseBinding, flowId) {
 function flowGroupTokenForFlowPhaseEvent(event) {
     return `${event.cat}${ID_COMPONENT_SEPARATOR}${event.name}${ID_COMPONENT_SEPARATOR}${event.id}`;
 }
-/**
- * A flow phase binding is a token that allows us to associate a flow
- * phase event to its corresponding event. This association indicates
- * what role a trace event plays in a flow.
- * We can assign a trace event with a flow phase when its category,
- * thread id, process id and timestamp matches those of a flow phase
- * event.
- */
-function flowPhaseBindingTokenForEvent(event) {
-    // This function is called many times (one per event) and creating a
-    // string every time can trigger GC. If this becomes a problem, a
-    // possible optimization is to use a multi-key map with the
-    // binding token components, a trade off between memory performance
-    // and readability.
-    return `${event.cat}${ID_COMPONENT_SEPARATOR}${event.tid}${ID_COMPONENT_SEPARATOR}${event.pid}${ID_COMPONENT_SEPARATOR}${event.ts}`;
-}
 export async function finalize() {
     // Order is important: flow events need to be handled first.
     flowEvents.forEach(processFlowEvent);
     nonFlowEvents.forEach(processNonFlowEvent);
-    flows = [...flowsById.values()].map(f => f.events).filter(flow => flow.length > 1);
+    flows = [...flowsById.values()]
+        .map(flowMapping => [...flowMapping.values()])
+        .map(flow => flow.filter(event => event !== undefined))
+        .filter(flow => flow.length > 1);
 }
 export function data() {
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"FlowsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/FlowsHandler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\nimport * as Types from '../types/types.js';\n\n// A flow is a logic connection between trace events. We display this\n// connection as arrows between trace events belonging to the same flow.\n\n// In the trace event format, flows are represented with pairing \"flow\n// phase\" events. Each flow phase event corresponds to one trace event\n// and indicates the role a trace event plays in a flow (start, step or\n// end). For each flow, one `start` and one `end` phase events are\n// included, while the amount of `step` phase events can be >= 0.\n\n// A flow phase event is assigned to a trace event when their cat, tid,\n// pid and ts are equal (see @flowPhaseBindingTokenForEvent ).\n\n// It's possible for a single event to belong to multiple flows. In that\n// case, it will have multiple corresponding flow phase events (one\n// per flow).\n\n// To parse flows, we first handle flow phase events, by creating unique\n// flows with the timestamps of each phase. Then, we place trace events\n// in the flows where their corresponding phase events were placed (if\n// there are any corresponding flow phase events at all).\nconst flowDataByGroupToken = new Map<string, {flowId: number, times: Types.Timing.MicroSeconds[]}>();\nconst flowPhaseBindingTokenToFlowId = new Map<string, Set<number>>();\nconst flowsById = new Map<number, {times: Types.Timing.MicroSeconds[], events: Types.Events.Event[]}>();\nconst flowEvents: Types.Events.FlowEvent[] = [];\nconst nonFlowEvents: Types.Events.Event[] = [];\nlet flows: Types.Events.Event[][] = [];\nconst ID_COMPONENT_SEPARATOR = '-$-';\nexport function reset(): void {\n  flows = [];\n  flowEvents.length = 0;\n  nonFlowEvents.length = 0;\n  flowDataByGroupToken.clear();\n  flowPhaseBindingTokenToFlowId.clear();\n  flowsById.clear();\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (Types.Events.isFlowPhaseEvent(event)) {\n    flowEvents.push(event);\n    return;\n  }\n  nonFlowEvents.push(event);\n}\n\nfunction processNonFlowEvent(event: Types.Events.Event): void {\n  const flowPhaseBindingToken = flowPhaseBindingTokenForEvent(event);\n  const flowIds = flowPhaseBindingTokenToFlowId.get(flowPhaseBindingToken);\n  if (!flowIds) {\n    return;\n  }\n  for (const flowId of flowIds) {\n    const flow = flowsById.get(flowId);\n    if (!flow) {\n      continue;\n    }\n    const timeIndex = flow.times.indexOf(event.ts);\n    if (timeIndex < 0) {\n      continue;\n    }\n    flow.events[timeIndex] = event;\n  }\n}\n\n/**\n * Creates unique flows by tracking flow phase events. A new created\n * flow whenever a flow start phase event is detected.\n * Subsequent flow phase events with the same group token are added to\n * this flow until a flow end phase is detected.\n */\nfunction processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {\n  const flowGroup = flowGroupTokenForFlowPhaseEvent(flowPhaseEvent);\n  switch (flowPhaseEvent.ph) {\n    case (Types.Events.Phase.FLOW_START): {\n      const flowMetadata = {flowId: flowPhaseEvent.id, times: [flowPhaseEvent.ts]};\n      flowDataByGroupToken.set(flowGroup, flowMetadata);\n      addFlowIdToFlowPhaseBinding(flowPhaseBindingTokenForEvent(flowPhaseEvent), flowMetadata.flowId);\n      return;\n    }\n    case (Types.Events.Phase.FLOW_STEP): {\n      const flow = flowDataByGroupToken.get(flowGroup);\n      if (!flow || flow.times.length < 0) {\n        // Found non-start flow event with no corresponding start flow,\n        // start event. Quietly ignore problematic event.\n        return;\n      }\n      addFlowIdToFlowPhaseBinding(flowPhaseBindingTokenForEvent(flowPhaseEvent), flow.flowId);\n      flow.times.push(flowPhaseEvent.ts);\n      return;\n    }\n    case (Types.Events.Phase.FLOW_END): {\n      const flow = flowDataByGroupToken.get(flowGroup);\n      if (!flow || flow.times.length < 0) {\n        // Found non-start flow event with no corresponding start flow,\n        // start event. Quietly ignore problematic event.\n        return;\n      }\n      addFlowIdToFlowPhaseBinding(flowPhaseBindingTokenForEvent(flowPhaseEvent), flow.flowId);\n      flow.times.push(flowPhaseEvent.ts);\n      flowsById.set(flow.flowId, {times: flow.times, events: []});\n      // We don't need this data anymore as the flow has been finished,\n      // so we can drop it.\n      flowDataByGroupToken.delete(flowGroup);\n    }\n  }\n}\n\n/**\n * A single trace event can belong to multiple flows. This method\n * tracks which flows (flowId) an event belongs to (given\n * its flow phase binding token).\n */\nfunction addFlowIdToFlowPhaseBinding(flowPhaseBinding: string, flowId: number): void {\n  let flowIds = flowPhaseBindingTokenToFlowId.get(flowPhaseBinding);\n  if (!flowIds) {\n    flowIds = new Set();\n  }\n  flowIds.add(flowId);\n  flowPhaseBindingTokenToFlowId.set(flowPhaseBinding, flowIds);\n}\n\n/**\n * Returns a token to group flow phase events (start, step and end)\n * belonging to the same flow. Flow phase events belonging to the same\n * flow share category, thread id, process id and name.\n *\n * Note that other phase events of other flows can share these\n * attributes too. For this reason, we group flow phase events in\n * cycles. A cycle starts on a flow start phase event and finishes on a\n * flow end phase event. For this reason, flow phase events need to be\n * handled in timestamp order.\n */\nfunction flowGroupTokenForFlowPhaseEvent(event: Types.Events.FlowEvent): string {\n  return `${event.cat}${ID_COMPONENT_SEPARATOR}${event.name}${ID_COMPONENT_SEPARATOR}${event.id}`;\n}\n\n/**\n * A flow phase binding is a token that allows us to associate a flow\n * phase event to its corresponding event. This association indicates\n * what role a trace event plays in a flow.\n * We can assign a trace event with a flow phase when its category,\n * thread id, process id and timestamp matches those of a flow phase\n * event.\n */\nfunction flowPhaseBindingTokenForEvent(event: Types.Events.Event): string {\n  // This function is called many times (one per event) and creating a\n  // string every time can trigger GC. If this becomes a problem, a\n  // possible optimization is to use a multi-key map with the\n  // binding token components, a trade off between memory performance\n  // and readability.\n  return `${event.cat}${ID_COMPONENT_SEPARATOR}${event.tid}${ID_COMPONENT_SEPARATOR}${event.pid}${\n      ID_COMPONENT_SEPARATOR}${event.ts}`;\n}\n\nexport async function finalize(): Promise<void> {\n  // Order is important: flow events need to be handled first.\n  flowEvents.forEach(processFlowEvent);\n  nonFlowEvents.forEach(processNonFlowEvent);\n  flows = [...flowsById.values()].map(f => f.events).filter(flow => flow.length > 1);\n}\n\nexport function data(): {flows: Types.Events.Event[][]} {\n  return {\n    flows,\n  };\n}\n"]}
+{"version":3,"file":"FlowsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/FlowsHandler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\nimport * as Platform from '../../../core/platform/platform.js';\nimport * as Types from '../types/types.js';\n\n// A flow is a logic connection between trace events. We display this\n// connection as arrows between trace events belonging to the same flow.\n\n// In the trace event format, flows are represented with pairing \"flow\n// phase\" events. Each flow phase event corresponds to one trace event\n// and indicates the role a trace event plays in a flow (start, step or\n// end). For each flow, one `start` and one `end` phase events are\n// included, while the amount of `step` phase events can be >= 0.\n\n// A flow phase event is assigned to a trace event when their cat, tid,\n// pid and ts are equal (see @flowPhaseBindingTokenForEvent ).\n\n// It's possible for a single event to belong to multiple flows. In that\n// case, it will have multiple corresponding flow phase events (one\n// per flow).\n\n// To parse flows, we first handle flow phase events, by creating unique\n// flows with the timestamps of each phase. Then, we place trace events\n// in the flows where their corresponding phase events were placed (if\n// there are any corresponding flow phase events at all).\nconst flowDataByGroupToken = new Map<string, number>();\n\ninterface EventFlowData {\n  flows: Set<number>;\n  bindingParsed: boolean;\n}\ntype FlowBindingTuple =\n    Map<Types.Timing.MicroSeconds, Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Map<string, EventFlowData>>>>;\n\n// Given a trace event's flow binding tuple (timestamp, process id,\n// thread id and category) we determine if there is any flow data bound\n// to it by using this map's content. It's built when processing flow\n// events in a trace.\n// An alternative to having a map of four levels is having single map\n// from a string token built from concatenating the binding data to the\n// corresponding flow data. However, this token would be calculated for\n// every event in a trace, resulting in a lot of memory overhead and\n// major GC triggering. So we are trading off readability for\n// performance.\nconst boundFlowData: FlowBindingTuple = new Map();\n\nconst flowsById = new Map<number, Map<Types.Timing.MicroSeconds, Types.Events.Event>>();\nconst flowEvents: Types.Events.FlowEvent[] = [];\nconst nonFlowEvents: Types.Events.Event[] = [];\nlet flows: Types.Events.Event[][] = [];\nconst ID_COMPONENT_SEPARATOR = '-$-';\nexport function reset(): void {\n  flows = [];\n  flowEvents.length = 0;\n  nonFlowEvents.length = 0;\n  flowDataByGroupToken.clear();\n  boundFlowData.clear();\n  flowsById.clear();\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (Types.Events.isFlowPhaseEvent(event)) {\n    flowEvents.push(event);\n    return;\n  }\n  nonFlowEvents.push(event);\n}\n\nfunction processNonFlowEvent(event: Types.Events.Event): void {\n  const flowDataForEvent = boundFlowData.get(event.ts)?.get(event.pid)?.get(event.tid)?.get(event.cat);\n  if (!flowDataForEvent) {\n    return;\n  }\n  const {flows, bindingParsed} = flowDataForEvent;\n  if (bindingParsed) {\n    // We only consider the first event for a given flow binding tuple.\n    return;\n  }\n  for (const flowId of flows) {\n    const flow = Platform.MapUtilities.getWithDefault(\n        flowsById, flowId, () => new Map<Types.Timing.MicroSeconds, Types.Events.Event>());\n    flow.set(event.ts, event);\n  }\n  flowDataForEvent.bindingParsed = true;\n}\n\n/**\n * Creates unique flows by tracking flow phase events. A new created\n * flow whenever a flow start phase event is detected.\n * Subsequent flow phase events with the same group token are added to\n * this flow until a flow end phase is detected.\n */\nfunction processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {\n  const flowGroup = flowGroupTokenForFlowPhaseEvent(flowPhaseEvent);\n  switch (flowPhaseEvent.ph) {\n    case (Types.Events.Phase.FLOW_START): {\n      const flowMetadata = {flowId: flowPhaseEvent.id, times: new Map([[flowPhaseEvent.ts, undefined]])};\n      flowDataByGroupToken.set(flowGroup, flowPhaseEvent.id);\n      addFlowIdToEventBinding(flowPhaseEvent, flowMetadata.flowId);\n      return;\n    }\n    case (Types.Events.Phase.FLOW_STEP): {\n      const flowId = flowDataByGroupToken.get(flowGroup);\n      if (flowId === undefined) {\n        // Found non-start flow event with no corresponding start flow,\n        // start event. Quietly ignore the problematic event.\n        return;\n      }\n      addFlowIdToEventBinding(flowPhaseEvent, flowId);\n      return;\n    }\n    case (Types.Events.Phase.FLOW_END): {\n      const flowId = flowDataByGroupToken.get(flowGroup);\n      if (flowId === undefined) {\n        // Found non-start flow event with no corresponding start flow,\n        // start event. Quietly ignore the problematic event.\n        return;\n      }\n      addFlowIdToEventBinding(flowPhaseEvent, flowId);\n      // We don't need this data anymore as the flow has been finished,\n      // so we can drop it.\n      flowDataByGroupToken.delete(flowGroup);\n    }\n  }\n}\n\ntype MapValueType<T extends Map<unknown, unknown>> = NonNullable<ReturnType<T['get']>>;\n/**\n * A single trace event can belong to multiple flows. This method\n * tracks which flows (flowId) an event belongs to given its flow\n * binding tuple (made of its ts, pid, tid and cat).\n */\nfunction addFlowIdToEventBinding(event: Types.Events.Event, flowId: number): void {\n  const flowsByPid =\n      Platform.MapUtilities.getWithDefault<Types.Timing.MicroSeconds, MapValueType<typeof boundFlowData>>(\n          boundFlowData, event.ts, () => new Map());\n  const flowsByTid = Platform.MapUtilities.getWithDefault<Types.Events.ProcessID, MapValueType<typeof flowsByPid>>(\n      flowsByPid, event.pid, () => new Map());\n  const flowsByCat = Platform.MapUtilities.getWithDefault<Types.Events.ThreadID, MapValueType<typeof flowsByTid>>(\n      flowsByTid, event.tid, () => new Map());\n  const flowData =\n      Platform.MapUtilities.getWithDefault(flowsByCat, event.cat, () => ({flows: new Set(), bindingParsed: false}));\n  flowData.flows.add(flowId);\n}\n\n/**\n * Returns a token to group flow phase events (start, step and end)\n * belonging to the same flow. Flow phase events belonging to the same\n * flow share category, thread id, process id and name.\n *\n * Note that other phase events of other flows can share these\n * attributes too. For this reason, we group flow phase events in\n * cycles. A cycle starts on a flow start phase event and finishes on a\n * flow end phase event. For this reason, flow phase events need to be\n * handled in timestamp order.\n */\nfunction flowGroupTokenForFlowPhaseEvent(event: Types.Events.FlowEvent): string {\n  return `${event.cat}${ID_COMPONENT_SEPARATOR}${event.name}${ID_COMPONENT_SEPARATOR}${event.id}`;\n}\n\nexport async function finalize(): Promise<void> {\n  // Order is important: flow events need to be handled first.\n  flowEvents.forEach(processFlowEvent);\n  nonFlowEvents.forEach(processNonFlowEvent);\n  flows = [...flowsById.values()]\n              .map(flowMapping => [...flowMapping.values()])\n              .map(flow => flow.filter(event => event !== undefined))\n              .filter(flow => flow.length > 1);\n}\n\nexport function data(): {flows: Types.Events.Event[][]} {\n  return {\n    flows,\n  };\n}\n"]}

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

@@ -1,5 +1,15 @@
 import * as Types from '../types/types.js';
 export declare function reset(): void;
+/**
+ * IMPORTANT: Before adding support for new initiator relationships in
+ * trace events consider using Perfetto's flow API on the events in
+ * question, so that they get automatically computed.
+ * @see {@link flowsHandlerData}
+ *
+ * The events manually computed here were added before we had support
+ * for flow events. As such they should be migrated to use the flow
+ * API so that no manual parsing is needed.
+ */
 export declare function handleEvent(event: Types.Events.Event): void;
 export declare function finalize(): Promise<void>;
 export interface InitiatorsData {
@@ -7,3 +17,4 @@ export interface InitiatorsData {
     initiatorToEvents: Map<Types.Events.Event, Types.Events.Event[]>;
 }
 export declare function data(): InitiatorsData;
+export declare function deps(): ['Flows', 'AsyncJSCalls'];

package/models/trace/handlers/InitiatorsHandler.js

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
+import { data as AsyncJSCallsHandlerData } from './AsyncJSCallsHandler.js';
+import { data as flowsHandlerData } from './FlowsHandler.js';
 const lastScheduleStyleRecalcByFrame = new Map();
 // This tracks the last event that is considered to have invalidated the layout
 // for a given frame.
@@ -15,15 +17,16 @@ const lastInvalidationEventForFrame = new Map();
 // These are the same - just UpdateLayoutTree is what the event from Chromium
 // is called.
 const lastUpdateLayoutTreeByFrame = new Map();
-// This tracks postmessage dispatch and handler events for creating initiator association
-const postMessageHandlerEvents = [];
-const schedulePostMessageEventByTraceId = new Map();
 // These two maps store the same data but in different directions.
 // For a given event, tell me what its initiator was. An event can only have one initiator.
 const eventToInitiatorMap = new Map();
 // For a given event, tell me what events it initiated. An event can initiate
 // multiple events, hence why the value for this map is an array.
 const initiatorToEventsMap = new Map();
+// Note: we are keeping the parsing of the following async JS schedulers
+// for backwards compatibility only. They are targeted to be removed
+// completely by M134. See more details at crbug.com/383974422
+// TODO(andoli): remove manual parsing of async JS schedulers.
 const requestAnimationFrameEventsById = new Map();
 const timerInstallEventsById = new Map();
 const requestIdleCallbackEventsById = new Map();
@@ -40,8 +43,6 @@ export function reset() {
     requestIdleCallbackEventsById.clear();
     webSocketCreateEventsById.clear();
     schedulePostTaskCallbackEventsById.clear();
-    schedulePostMessageEventByTraceId.clear();
-    postMessageHandlerEvents.length = 0;
 }
 function storeInitiator(data) {
     eventToInitiatorMap.set(data.event, data.initiator);
@@ -49,6 +50,16 @@ function storeInitiator(data) {
     eventsForInitiator.push(data.event);
     initiatorToEventsMap.set(data.initiator, eventsForInitiator);
 }
+/**
+ * IMPORTANT: Before adding support for new initiator relationships in
+ * trace events consider using Perfetto's flow API on the events in
+ * question, so that they get automatically computed.
+ * @see {@link flowsHandlerData}
+ *
+ * The events manually computed here were added before we had support
+ * for flow events. As such they should be migrated to use the flow
+ * API so that no manual parsing is needed.
+ */
 export function handleEvent(event) {
     if (Types.Events.isScheduleStyleRecalculation(event)) {
         lastScheduleStyleRecalcByFrame.set(event.args.data.frame, event);
@@ -164,33 +175,27 @@ export function handleEvent(event) {
             storeInitiator({ event, initiator: matchingSchedule });
         }
     }
-    // Store schedulePostMessage Events by their traceIds.
-    // so they can be reconciled later with matching handlePostMessage events with same traceIds.
-    else if (Types.Events.isHandlePostMessage(event)) {
-        postMessageHandlerEvents.push(event);
-    }
-    else if (Types.Events.isSchedulePostMessage(event)) {
-        const traceId = event.args.data?.traceId;
-        if (traceId) {
-            schedulePostMessageEventByTraceId.set(traceId, event);
+}
+function createRelationshipsFromFlows() {
+    const flows = flowsHandlerData().flows;
+    for (let i = 0; i < flows.length; i++) {
+        const flow = flows[i];
+        for (let j = 0; j < flow.length - 1; j++) {
+            storeInitiator({ event: flow[j + 1], initiator: flow[j] });
         }
     }
 }
-function finalizeInitiatorRelationship() {
-    for (const handlerEvent of postMessageHandlerEvents) {
-        const traceId = handlerEvent.args.data?.traceId;
-        const matchingSchedulePostMesssageEvent = schedulePostMessageEventByTraceId.get(traceId);
-        if (matchingSchedulePostMesssageEvent) {
-            // Set schedulePostMesssage events as initiators for handler events.
-            storeInitiator({ event: handlerEvent, initiator: matchingSchedulePostMesssageEvent });
+function createRelationshipsFromAsyncJSCalls() {
+    const asyncCallEntries = AsyncJSCallsHandlerData().schedulerToRunEntryPoints.entries();
+    for (const [asyncCaller, asyncCallees] of asyncCallEntries) {
+        for (const asyncCallee of asyncCallees) {
+            storeInitiator({ event: asyncCallee, initiator: asyncCaller });
         }
     }
 }
 export async function finalize() {
-    // During event processing, we may encounter initiators before the handler events themselves
-    // (e.g dispatch events on worker and handler events on the main thread)
-    // we don't want to miss out on events whose initiators haven't been processed yet
-    finalizeInitiatorRelationship();
+    createRelationshipsFromFlows();
+    createRelationshipsFromAsyncJSCalls();
 }
 export function data() {
     return {
@@ -198,4 +203,7 @@ export function data() {
         initiatorToEvents: initiatorToEventsMap,
     };
 }
+export function deps() {
+    return ['Flows', 'AsyncJSCalls'];
+}
 //# sourceMappingURL=InitiatorsHandler.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InitiatorsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/InitiatorsHandler.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\nconst lastScheduleStyleRecalcByFrame = new Map<string, Types.Events.ScheduleStyleRecalculation>();\n\n// This tracks the last event that is considered to have invalidated the layout\n// for a given frame.\n// Note that although there is an InvalidateLayout event, there are also other\n// events (ScheduleStyleRecalculation) that could be the reason a layout was\n// invalidated.\nconst lastInvalidationEventForFrame = new Map<string, Types.Events.Event>();\n\n// Important: although the event is called UpdateLayoutTree, in the UI we\n// present these to the user as \"Recalculate Style\". So don't get confused!\n// These are the same - just UpdateLayoutTree is what the event from Chromium\n// is called.\nconst lastUpdateLayoutTreeByFrame = new Map<string, Types.Events.UpdateLayoutTree>();\n\n// This tracks postmessage dispatch and handler events for creating initiator association\nconst postMessageHandlerEvents: Types.Events.HandlePostMessage[] = [];\nconst schedulePostMessageEventByTraceId: Map<string, Types.Events.SchedulePostMessage> = new Map();\n\n// These two maps store the same data but in different directions.\n// For a given event, tell me what its initiator was. An event can only have one initiator.\nconst eventToInitiatorMap = new Map<Types.Events.Event, Types.Events.Event>();\n// For a given event, tell me what events it initiated. An event can initiate\n// multiple events, hence why the value for this map is an array.\nconst initiatorToEventsMap = new Map<Types.Events.Event, Types.Events.Event[]>();\n\nconst requestAnimationFrameEventsById: Map<number, Types.Events.RequestAnimationFrame> = new Map();\nconst timerInstallEventsById: Map<number, Types.Events.TimerInstall> = new Map();\nconst requestIdleCallbackEventsById: Map<number, Types.Events.RequestIdleCallback> = new Map();\nconst webSocketCreateEventsById: Map<number, Types.Events.WebSocketCreate> = new Map();\nconst schedulePostTaskCallbackEventsById: Map<number, Types.Events.SchedulePostTaskCallback> = new Map();\n\nexport function reset(): void {\n  lastScheduleStyleRecalcByFrame.clear();\n  lastInvalidationEventForFrame.clear();\n  lastUpdateLayoutTreeByFrame.clear();\n  timerInstallEventsById.clear();\n  eventToInitiatorMap.clear();\n  initiatorToEventsMap.clear();\n  requestAnimationFrameEventsById.clear();\n  requestIdleCallbackEventsById.clear();\n  webSocketCreateEventsById.clear();\n  schedulePostTaskCallbackEventsById.clear();\n  schedulePostMessageEventByTraceId.clear();\n  postMessageHandlerEvents.length = 0;\n}\n\nfunction storeInitiator(data: {initiator: Types.Events.Event, event: Types.Events.Event}): void {\n  eventToInitiatorMap.set(data.event, data.initiator);\n  const eventsForInitiator = initiatorToEventsMap.get(data.initiator) || [];\n  eventsForInitiator.push(data.event);\n  initiatorToEventsMap.set(data.initiator, eventsForInitiator);\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (Types.Events.isScheduleStyleRecalculation(event)) {\n    lastScheduleStyleRecalcByFrame.set(event.args.data.frame, event);\n  } else if (Types.Events.isUpdateLayoutTree(event)) {\n    // IMPORTANT: although the trace event is called UpdateLayoutTree, this\n    // represents a Styles Recalculation. This event in the timeline is shown to\n    // the user as \"Recalculate Styles.\"\n    if (event.args.beginData) {\n      // Store the last UpdateLayout event: we use this when we see an\n      // InvalidateLayout and try to figure out its initiator.\n      lastUpdateLayoutTreeByFrame.set(event.args.beginData.frame, event);\n\n      // If this frame has seen a ScheduleStyleRecalc event, then that event is\n      // considered to be the initiator of this StylesRecalc.\n      const scheduledStyleForFrame = lastScheduleStyleRecalcByFrame.get(event.args.beginData.frame);\n      if (scheduledStyleForFrame) {\n        storeInitiator({\n          event,\n          initiator: scheduledStyleForFrame,\n        });\n      }\n    }\n  } else if (Types.Events.isInvalidateLayout(event)) {\n    // By default, the InvalidateLayout event is what triggered the layout invalidation for this frame.\n    let invalidationInitiator: Types.Events.Event = event;\n\n    // However, if we have not had any prior invalidations for this frame, we\n    // want to consider StyleRecalculation events as they might be the actual\n    // cause of this layout invalidation.\n    if (!lastInvalidationEventForFrame.has(event.args.data.frame)) {\n      // 1. If we have not had an invalidation event for this frame\n      // 2. AND we have had an UpdateLayoutTree for this frame\n      // 3. AND the UpdateLayoutTree event ended AFTER the InvalidateLayout startTime\n      // 4. AND we have an initiator for the UpdateLayoutTree event\n      // 5. Then we set the last invalidation event for this frame to be the UpdateLayoutTree's initiator.\n      const lastUpdateLayoutTreeForFrame = lastUpdateLayoutTreeByFrame.get(event.args.data.frame);\n      if (lastUpdateLayoutTreeForFrame) {\n        const {endTime} = Helpers.Timing.eventTimingsMicroSeconds(lastUpdateLayoutTreeForFrame);\n        const initiatorOfUpdateLayout = eventToInitiatorMap.get(lastUpdateLayoutTreeForFrame);\n\n        if (initiatorOfUpdateLayout && endTime && endTime > event.ts) {\n          invalidationInitiator = initiatorOfUpdateLayout;\n        }\n      }\n    }\n    lastInvalidationEventForFrame.set(event.args.data.frame, invalidationInitiator);\n  } else if (Types.Events.isLayout(event)) {\n    // The initiator of a Layout event is the last Invalidation event.\n    const lastInvalidation = lastInvalidationEventForFrame.get(event.args.beginData.frame);\n    if (lastInvalidation) {\n      storeInitiator({\n        event,\n        initiator: lastInvalidation,\n      });\n    }\n    // Now clear the last invalidation for the frame: the last invalidation has been linked to a Layout event, so it cannot be the initiator for any future layouts.\n    lastInvalidationEventForFrame.delete(event.args.beginData.frame);\n  } else if (Types.Events.isRequestAnimationFrame(event)) {\n    requestAnimationFrameEventsById.set(event.args.data.id, event);\n  } else if (Types.Events.isFireAnimationFrame(event)) {\n    // If we get a fire event, that means we should have had the\n    // RequestAnimationFrame event by now. If so, we can set that as the\n    // initiator for the fire event.\n    const matchingRequestEvent = requestAnimationFrameEventsById.get(event.args.data.id);\n    if (matchingRequestEvent) {\n      storeInitiator({\n        event,\n        initiator: matchingRequestEvent,\n      });\n    }\n  } else if (Types.Events.isTimerInstall(event)) {\n    timerInstallEventsById.set(event.args.data.timerId, event);\n  } else if (Types.Events.isTimerFire(event)) {\n    const matchingInstall = timerInstallEventsById.get(event.args.data.timerId);\n    if (matchingInstall) {\n      storeInitiator({event, initiator: matchingInstall});\n    }\n  } else if (Types.Events.isRequestIdleCallback(event)) {\n    requestIdleCallbackEventsById.set(event.args.data.id, event);\n  } else if (Types.Events.isFireIdleCallback(event)) {\n    const matchingRequestEvent = requestIdleCallbackEventsById.get(event.args.data.id);\n    if (matchingRequestEvent) {\n      storeInitiator({\n        event,\n        initiator: matchingRequestEvent,\n      });\n    }\n  } else if (Types.Events.isWebSocketCreate(event)) {\n    webSocketCreateEventsById.set(event.args.data.identifier, event);\n  } else if (Types.Events.isWebSocketInfo(event) || Types.Events.isWebSocketTransfer(event)) {\n    const matchingCreateEvent = webSocketCreateEventsById.get(event.args.data.identifier);\n    if (matchingCreateEvent) {\n      storeInitiator({\n        event,\n        initiator: matchingCreateEvent,\n      });\n    }\n  } else if (Types.Events.isSchedulePostTaskCallback(event)) {\n    schedulePostTaskCallbackEventsById.set(event.args.data.taskId, event);\n  } else if (Types.Events.isRunPostTaskCallback(event) || Types.Events.isAbortPostTaskCallback(event)) {\n    const matchingSchedule = schedulePostTaskCallbackEventsById.get(event.args.data.taskId);\n    if (matchingSchedule) {\n      storeInitiator({event, initiator: matchingSchedule});\n    }\n  }\n  // Store schedulePostMessage Events by their traceIds.\n  // so they can be reconciled later with matching handlePostMessage events with same traceIds.\n  else if (Types.Events.isHandlePostMessage(event)) {\n    postMessageHandlerEvents.push(event);\n  } else if (Types.Events.isSchedulePostMessage(event)) {\n    const traceId = event.args.data?.traceId;\n    if (traceId) {\n      schedulePostMessageEventByTraceId.set(traceId, event);\n    }\n  }\n}\n\nfunction finalizeInitiatorRelationship(): void {\n  for (const handlerEvent of postMessageHandlerEvents) {\n    const traceId = handlerEvent.args.data?.traceId;\n    const matchingSchedulePostMesssageEvent = schedulePostMessageEventByTraceId.get(traceId);\n    if (matchingSchedulePostMesssageEvent) {\n      // Set schedulePostMesssage events as initiators for handler events.\n      storeInitiator({event: handlerEvent, initiator: matchingSchedulePostMesssageEvent});\n    }\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  // During event processing, we may encounter initiators before the handler events themselves\n  // (e.g dispatch events on worker and handler events on the main thread)\n  // we don't want to miss out on events whose initiators haven't been processed yet\n  finalizeInitiatorRelationship();\n}\n\nexport interface InitiatorsData {\n  eventToInitiator: Map<Types.Events.Event, Types.Events.Event>;\n  initiatorToEvents: Map<Types.Events.Event, Types.Events.Event[]>;\n}\n\nexport function data(): InitiatorsData {\n  return {\n    eventToInitiator: eventToInitiatorMap,\n    initiatorToEvents: initiatorToEventsMap,\n  };\n}\n"]}
+{"version":3,"file":"InitiatorsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/InitiatorsHandler.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 AsyncJSCallsHandlerData} from './AsyncJSCallsHandler.js';\nimport {data as flowsHandlerData} from './FlowsHandler.js';\n\nconst lastScheduleStyleRecalcByFrame = new Map<string, Types.Events.ScheduleStyleRecalculation>();\n\n// This tracks the last event that is considered to have invalidated the layout\n// for a given frame.\n// Note that although there is an InvalidateLayout event, there are also other\n// events (ScheduleStyleRecalculation) that could be the reason a layout was\n// invalidated.\nconst lastInvalidationEventForFrame = new Map<string, Types.Events.Event>();\n\n// Important: although the event is called UpdateLayoutTree, in the UI we\n// present these to the user as \"Recalculate Style\". So don't get confused!\n// These are the same - just UpdateLayoutTree is what the event from Chromium\n// is called.\nconst lastUpdateLayoutTreeByFrame = new Map<string, Types.Events.UpdateLayoutTree>();\n\n// These two maps store the same data but in different directions.\n// For a given event, tell me what its initiator was. An event can only have one initiator.\nconst eventToInitiatorMap = new Map<Types.Events.Event, Types.Events.Event>();\n// For a given event, tell me what events it initiated. An event can initiate\n// multiple events, hence why the value for this map is an array.\nconst initiatorToEventsMap = new Map<Types.Events.Event, Types.Events.Event[]>();\n\n// Note: we are keeping the parsing of the following async JS schedulers\n// for backwards compatibility only. They are targeted to be removed\n// completely by M134. See more details at crbug.com/383974422\n// TODO(andoli): remove manual parsing of async JS schedulers.\nconst requestAnimationFrameEventsById: Map<number, Types.Events.RequestAnimationFrame> = new Map();\nconst timerInstallEventsById: Map<number, Types.Events.TimerInstall> = new Map();\nconst requestIdleCallbackEventsById: Map<number, Types.Events.RequestIdleCallback> = new Map();\n\nconst webSocketCreateEventsById: Map<number, Types.Events.WebSocketCreate> = new Map();\nconst schedulePostTaskCallbackEventsById: Map<number, Types.Events.SchedulePostTaskCallback> = new Map();\n\nexport function reset(): void {\n  lastScheduleStyleRecalcByFrame.clear();\n  lastInvalidationEventForFrame.clear();\n  lastUpdateLayoutTreeByFrame.clear();\n  timerInstallEventsById.clear();\n  eventToInitiatorMap.clear();\n  initiatorToEventsMap.clear();\n  requestAnimationFrameEventsById.clear();\n  requestIdleCallbackEventsById.clear();\n  webSocketCreateEventsById.clear();\n  schedulePostTaskCallbackEventsById.clear();\n}\n\nfunction storeInitiator(data: {initiator: Types.Events.Event, event: Types.Events.Event}): void {\n  eventToInitiatorMap.set(data.event, data.initiator);\n  const eventsForInitiator = initiatorToEventsMap.get(data.initiator) || [];\n  eventsForInitiator.push(data.event);\n  initiatorToEventsMap.set(data.initiator, eventsForInitiator);\n}\n\n/**\n * IMPORTANT: Before adding support for new initiator relationships in\n * trace events consider using Perfetto's flow API on the events in\n * question, so that they get automatically computed.\n * @see {@link flowsHandlerData}\n *\n * The events manually computed here were added before we had support\n * for flow events. As such they should be migrated to use the flow\n * API so that no manual parsing is needed.\n */\nexport function handleEvent(event: Types.Events.Event): void {\n  if (Types.Events.isScheduleStyleRecalculation(event)) {\n    lastScheduleStyleRecalcByFrame.set(event.args.data.frame, event);\n  } else if (Types.Events.isUpdateLayoutTree(event)) {\n    // IMPORTANT: although the trace event is called UpdateLayoutTree, this\n    // represents a Styles Recalculation. This event in the timeline is shown to\n    // the user as \"Recalculate Styles.\"\n    if (event.args.beginData) {\n      // Store the last UpdateLayout event: we use this when we see an\n      // InvalidateLayout and try to figure out its initiator.\n      lastUpdateLayoutTreeByFrame.set(event.args.beginData.frame, event);\n\n      // If this frame has seen a ScheduleStyleRecalc event, then that event is\n      // considered to be the initiator of this StylesRecalc.\n      const scheduledStyleForFrame = lastScheduleStyleRecalcByFrame.get(event.args.beginData.frame);\n      if (scheduledStyleForFrame) {\n        storeInitiator({\n          event,\n          initiator: scheduledStyleForFrame,\n        });\n      }\n    }\n  } else if (Types.Events.isInvalidateLayout(event)) {\n    // By default, the InvalidateLayout event is what triggered the layout invalidation for this frame.\n    let invalidationInitiator: Types.Events.Event = event;\n\n    // However, if we have not had any prior invalidations for this frame, we\n    // want to consider StyleRecalculation events as they might be the actual\n    // cause of this layout invalidation.\n    if (!lastInvalidationEventForFrame.has(event.args.data.frame)) {\n      // 1. If we have not had an invalidation event for this frame\n      // 2. AND we have had an UpdateLayoutTree for this frame\n      // 3. AND the UpdateLayoutTree event ended AFTER the InvalidateLayout startTime\n      // 4. AND we have an initiator for the UpdateLayoutTree event\n      // 5. Then we set the last invalidation event for this frame to be the UpdateLayoutTree's initiator.\n      const lastUpdateLayoutTreeForFrame = lastUpdateLayoutTreeByFrame.get(event.args.data.frame);\n      if (lastUpdateLayoutTreeForFrame) {\n        const {endTime} = Helpers.Timing.eventTimingsMicroSeconds(lastUpdateLayoutTreeForFrame);\n        const initiatorOfUpdateLayout = eventToInitiatorMap.get(lastUpdateLayoutTreeForFrame);\n\n        if (initiatorOfUpdateLayout && endTime && endTime > event.ts) {\n          invalidationInitiator = initiatorOfUpdateLayout;\n        }\n      }\n    }\n    lastInvalidationEventForFrame.set(event.args.data.frame, invalidationInitiator);\n  } else if (Types.Events.isLayout(event)) {\n    // The initiator of a Layout event is the last Invalidation event.\n    const lastInvalidation = lastInvalidationEventForFrame.get(event.args.beginData.frame);\n    if (lastInvalidation) {\n      storeInitiator({\n        event,\n        initiator: lastInvalidation,\n      });\n    }\n    // Now clear the last invalidation for the frame: the last invalidation has been linked to a Layout event, so it cannot be the initiator for any future layouts.\n    lastInvalidationEventForFrame.delete(event.args.beginData.frame);\n  } else if (Types.Events.isRequestAnimationFrame(event)) {\n    requestAnimationFrameEventsById.set(event.args.data.id, event);\n  } else if (Types.Events.isFireAnimationFrame(event)) {\n    // If we get a fire event, that means we should have had the\n    // RequestAnimationFrame event by now. If so, we can set that as the\n    // initiator for the fire event.\n    const matchingRequestEvent = requestAnimationFrameEventsById.get(event.args.data.id);\n    if (matchingRequestEvent) {\n      storeInitiator({\n        event,\n        initiator: matchingRequestEvent,\n      });\n    }\n  } else if (Types.Events.isTimerInstall(event)) {\n    timerInstallEventsById.set(event.args.data.timerId, event);\n  } else if (Types.Events.isTimerFire(event)) {\n    const matchingInstall = timerInstallEventsById.get(event.args.data.timerId);\n    if (matchingInstall) {\n      storeInitiator({event, initiator: matchingInstall});\n    }\n  } else if (Types.Events.isRequestIdleCallback(event)) {\n    requestIdleCallbackEventsById.set(event.args.data.id, event);\n  } else if (Types.Events.isFireIdleCallback(event)) {\n    const matchingRequestEvent = requestIdleCallbackEventsById.get(event.args.data.id);\n    if (matchingRequestEvent) {\n      storeInitiator({\n        event,\n        initiator: matchingRequestEvent,\n      });\n    }\n  } else if (Types.Events.isWebSocketCreate(event)) {\n    webSocketCreateEventsById.set(event.args.data.identifier, event);\n  } else if (Types.Events.isWebSocketInfo(event) || Types.Events.isWebSocketTransfer(event)) {\n    const matchingCreateEvent = webSocketCreateEventsById.get(event.args.data.identifier);\n    if (matchingCreateEvent) {\n      storeInitiator({\n        event,\n        initiator: matchingCreateEvent,\n      });\n    }\n  } else if (Types.Events.isSchedulePostTaskCallback(event)) {\n    schedulePostTaskCallbackEventsById.set(event.args.data.taskId, event);\n  } else if (Types.Events.isRunPostTaskCallback(event) || Types.Events.isAbortPostTaskCallback(event)) {\n    const matchingSchedule = schedulePostTaskCallbackEventsById.get(event.args.data.taskId);\n    if (matchingSchedule) {\n      storeInitiator({event, initiator: matchingSchedule});\n    }\n  }\n}\n\nfunction createRelationshipsFromFlows(): void {\n  const flows = flowsHandlerData().flows;\n  for (let i = 0; i < flows.length; i++) {\n    const flow = flows[i];\n    for (let j = 0; j < flow.length - 1; j++) {\n      storeInitiator({event: flow[j + 1], initiator: flow[j]});\n    }\n  }\n}\n\nfunction createRelationshipsFromAsyncJSCalls(): void {\n  const asyncCallEntries = AsyncJSCallsHandlerData().schedulerToRunEntryPoints.entries();\n  for (const [asyncCaller, asyncCallees] of asyncCallEntries) {\n    for (const asyncCallee of asyncCallees) {\n      storeInitiator({event: asyncCallee, initiator: asyncCaller});\n    }\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  createRelationshipsFromFlows();\n  createRelationshipsFromAsyncJSCalls();\n}\n\nexport interface InitiatorsData {\n  eventToInitiator: Map<Types.Events.Event, Types.Events.Event>;\n  initiatorToEvents: Map<Types.Events.Event, Types.Events.Event[]>;\n}\n\nexport function data(): InitiatorsData {\n  return {\n    eventToInitiator: eventToInitiatorMap,\n    initiatorToEvents: initiatorToEventsMap,\n  };\n}\n\nexport function deps(): ['Flows', 'AsyncJSCalls'] {\n  return ['Flows', 'AsyncJSCalls'];\n}\n"]}

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

@@ -1,11 +1,9 @@
-import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
 import type { HandlerName } from './types.js';
 export declare function reset(): void;
 export declare function handleEvent(event: Types.Events.Event): void;
 export declare function finalize(): Promise<void>;
 export interface LargestImagePaintData {
-    imageByDOMNodeId: Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>;
     lcpRequestByNavigation: Map<Types.Events.NavigationStart | null, Types.Events.SyntheticNetworkRequest>;
 }
 export declare function data(): LargestImagePaintData;

package/models/trace/handlers/LargestImagePaintHandler.js

@@ -1,9 +1,11 @@
 // Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
 import * as Types from '../types/types.js';
 import { data as metaData } from './MetaHandler.js';
 import { data as networkRequestsData } from './NetworkRequestsHandler.js';
+import { data as pageLoadMetricsData } from './PageLoadMetricsHandler.js';
 /**
  * If the LCP resource was an image, and that image was fetched over the
  * network, we want to be able to find the network request in order to construct
@@ -16,45 +18,46 @@ import { data as networkRequestsData } from './NetworkRequestsHandler.js';
  * `LargestContentfulPaint::Candidate` will have. So, when we find an image
  * paint candidate, we can store it, keying it on the node ID.
  * Then, when it comes to finding the network request for an LCP image, we can
- *
  * use the nodeId from the LCP candidate to find the image candidate. That image
  * candidate also contains a `imageUrl` property, which will have the full URL
  * to the image.
+ *
+ * `BackendNodeId`s are only unique within a given renderer process, so this is
+ * also keyed on `ProcessId`.
  **/
-const imageByDOMNodeId = new Map();
+const imagePaintsByNodeIdAndProcess = new Map();
 const lcpRequestByNavigation = new Map();
-const lcpPaintEventByNavigation = new Map();
-let currentNavigation;
 export function reset() {
-    imageByDOMNodeId.clear();
-    lcpRequestByNavigation.clear();
-    lcpPaintEventByNavigation.clear();
-    currentNavigation = null;
+    imagePaintsByNodeIdAndProcess.clear();
 }
 export function handleEvent(event) {
-    if (Types.Events.isNavigationStart(event)) {
-        currentNavigation = event;
-        return;
-    }
-    if (!Types.Events.isLargestImagePaintCandidate(event)) {
-        return;
-    }
-    if (!event.args.data) {
+    if (!Types.Events.isLargestImagePaintCandidate(event) || !event.args.data) {
         return;
     }
-    imageByDOMNodeId.set(event.args.data.DOMNodeId, event);
-    lcpPaintEventByNavigation.set(currentNavigation, event);
+    const imagePaintsByNodeId = Platform.MapUtilities.getWithDefault(imagePaintsByNodeIdAndProcess, event.pid, () => new Map());
+    imagePaintsByNodeId.set(event.args.data.DOMNodeId, event);
 }
 export async function finalize() {
     const requests = networkRequestsData().byTime;
-    const traceBounds = metaData().traceBounds;
-    for (const [navigation, event] of lcpPaintEventByNavigation) {
-        const lcpUrl = event.args.data?.imageUrl;
+    const { traceBounds, navigationsByNavigationId } = metaData();
+    const metricScoresByFrameId = pageLoadMetricsData().metricScoresByFrameId;
+    for (const [navigationId, navigation] of navigationsByNavigationId) {
+        const lcpMetric = metricScoresByFrameId.get(navigation.args.frame)?.get(navigationId)?.get("LCP" /* MetricName.LCP */);
+        const lcpEvent = lcpMetric?.event;
+        if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+            continue;
+        }
+        const nodeId = lcpEvent.args.data?.nodeId;
+        if (!nodeId) {
+            continue;
+        }
+        const lcpImagePaintEvent = imagePaintsByNodeIdAndProcess.get(lcpEvent.pid)?.get(nodeId);
+        const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
         if (!lcpUrl) {
             continue;
         }
         const startTime = navigation?.ts ?? traceBounds.min;
-        const endTime = event.ts;
+        const endTime = lcpImagePaintEvent.ts;
         let lcpRequest;
         for (const request of requests) {
             if (request.ts < startTime) {
@@ -74,9 +77,9 @@ export async function finalize() {
     }
 }
 export function data() {
-    return { imageByDOMNodeId, lcpRequestByNavigation };
+    return { lcpRequestByNavigation };
 }
 export function deps() {
-    return ['Meta', 'NetworkRequests'];
+    return ['Meta', 'NetworkRequests', 'PageLoadMetrics'];
 }
 //# sourceMappingURL=LargestImagePaintHandler.js.map

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":"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","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\nimport {data as metaData} from './MetaHandler.js';\nimport {data as networkRequestsData} from './NetworkRequestsHandler.js';\nimport type {HandlerName} from './types.js';\n\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>();\nconst lcpRequestByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>();\nconst lcpPaintEventByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.LargestImagePaintCandidate>();\nlet currentNavigation: Types.Events.NavigationStart|null;\n\nexport function reset(): void {\n  imageByDOMNodeId.clear();\n  lcpRequestByNavigation.clear();\n  lcpPaintEventByNavigation.clear();\n  currentNavigation = null;\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (Types.Events.isNavigationStart(event)) {\n    currentNavigation = event;\n    return;\n  }\n\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  lcpPaintEventByNavigation.set(currentNavigation, event);\n}\n\nexport async function finalize(): Promise<void> {\n  const requests = networkRequestsData().byTime;\n  const traceBounds = metaData().traceBounds;\n\n  for (const [navigation, event] of lcpPaintEventByNavigation) {\n    const lcpUrl = event.args.data?.imageUrl;\n    if (!lcpUrl) {\n      continue;\n    }\n\n    const startTime = navigation?.ts ?? traceBounds.min;\n    const endTime = event.ts;\n\n    let lcpRequest;\n    for (const request of requests) {\n      if (request.ts < startTime) {\n        continue;\n      }\n      if (request.ts >= endTime) {\n        break;\n      }\n\n      if (request.args.data.url === lcpUrl || request.args.data.redirects.some(r => r.url === lcpUrl)) {\n        lcpRequest = request;\n        break;\n      }\n    }\n\n    if (lcpRequest) {\n      lcpRequestByNavigation.set(navigation, lcpRequest);\n    }\n  }\n}\n\nexport interface LargestImagePaintData {\n  imageByDOMNodeId: Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>;\n  lcpRequestByNavigation: Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>;\n}\n\nexport function data(): LargestImagePaintData {\n  return {imageByDOMNodeId, lcpRequestByNavigation};\n}\n\nexport function deps(): HandlerName[] {\n  return ['Meta', 'NetworkRequests'];\n}\n"]}
+{"version":3,"file":"LargestImagePaintHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/LargestImagePaintHandler.ts"],"names":[],"mappings":"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","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 Platform from '../../../core/platform/platform.js';\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Types from '../types/types.js';\n\nimport {data as metaData} from './MetaHandler.js';\nimport {data as networkRequestsData} from './NetworkRequestsHandler.js';\nimport {data as pageLoadMetricsData, MetricName} from './PageLoadMetricsHandler.js';\nimport type {HandlerName} from './types.js';\n\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 * 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 *\n * `BackendNodeId`s are only unique within a given renderer process, so this is\n * also keyed on `ProcessId`.\n **/\nconst imagePaintsByNodeIdAndProcess =\n    new Map<Types.Events.ProcessID, Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>>();\nconst lcpRequestByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>();\n\nexport function reset(): void {\n  imagePaintsByNodeIdAndProcess.clear();\n}\n\nexport function handleEvent(event: Types.Events.Event): void {\n  if (!Types.Events.isLargestImagePaintCandidate(event) || !event.args.data) {\n    return;\n  }\n\n  const imagePaintsByNodeId =\n      Platform.MapUtilities.getWithDefault(imagePaintsByNodeIdAndProcess, event.pid, () => new Map());\n  imagePaintsByNodeId.set(event.args.data.DOMNodeId, event);\n}\n\nexport async function finalize(): Promise<void> {\n  const requests = networkRequestsData().byTime;\n  const {traceBounds, navigationsByNavigationId} = metaData();\n  const metricScoresByFrameId = pageLoadMetricsData().metricScoresByFrameId;\n\n  for (const [navigationId, navigation] of navigationsByNavigationId) {\n    const lcpMetric = metricScoresByFrameId.get(navigation.args.frame)?.get(navigationId)?.get(MetricName.LCP);\n    const lcpEvent = lcpMetric?.event;\n    if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n      continue;\n    }\n\n    const nodeId = lcpEvent.args.data?.nodeId;\n    if (!nodeId) {\n      continue;\n    }\n\n    const lcpImagePaintEvent = imagePaintsByNodeIdAndProcess.get(lcpEvent.pid)?.get(nodeId);\n    const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;\n    if (!lcpUrl) {\n      continue;\n    }\n\n    const startTime = navigation?.ts ?? traceBounds.min;\n    const endTime = lcpImagePaintEvent.ts;\n\n    let lcpRequest;\n    for (const request of requests) {\n      if (request.ts < startTime) {\n        continue;\n      }\n      if (request.ts >= endTime) {\n        break;\n      }\n\n      if (request.args.data.url === lcpUrl || request.args.data.redirects.some(r => r.url === lcpUrl)) {\n        lcpRequest = request;\n        break;\n      }\n    }\n\n    if (lcpRequest) {\n      lcpRequestByNavigation.set(navigation, lcpRequest);\n    }\n  }\n}\n\nexport interface LargestImagePaintData {\n  lcpRequestByNavigation: Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>;\n}\n\nexport function data(): LargestImagePaintData {\n  return {lcpRequestByNavigation};\n}\n\nexport function deps(): HandlerName[] {\n  return ['Meta', 'NetworkRequests', 'PageLoadMetrics'];\n}\n"]}

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

@@ -21,10 +21,10 @@ interface LayoutShifts {
 }
 export declare const MAX_CLUSTER_DURATION: Types.Timing.MicroSeconds;
 export declare const MAX_SHIFT_TIME_DELTA: Types.Timing.MicroSeconds;
-type ScoreRecord = {
+interface ScoreRecord {
     ts: number;
     score: number;
-};
+}
 export declare function reset(): void;
 export declare function handleEvent(event: Types.Events.Event): void;
 export declare function finalize(): Promise<void>;

package/models/trace/handlers/LayoutShiftsHandler.js

@@ -8,10 +8,10 @@ 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));
+export const MAX_CLUSTER_DURATION = Helpers.Timing.milliToMicro(Types.Timing.MilliSeconds(5000));
 // This represents the maximum #time we will allow between layout shift events
 // before considering it to be the start of a new cluster.
-export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(1000));
+export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.milliToMicro(Types.Timing.MilliSeconds(1000));
 // Layout shifts are reported globally to the developer, irrespective of which
 // frame they originated in. However, each process does have its own individual
 // CLS score, so we need to segment by process. This means Layout Shifts from
@@ -265,6 +265,7 @@ async function buildLayoutShiftsClusters() {
         const shift = Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent({
             rawSourceEvent: event,
             ...event,
+            name: "SyntheticLayoutShift" /* Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT */,
             args: {
                 frame: event.args.frame,
                 data: {