chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/models/trace/handlers/FlowsHandler.test.ts

@@ -0,0 +1,185 @@
+// 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 {
+  makeCompleteEvent,
+  makeFlowPhaseEvent,
+} from '../../../testing/TraceHelpers.js';
+import * as Trace from '../trace.js';
+
+async function getFlowsHandlerData(events: Trace.Types.Events.Event[]):
+    Promise<ReturnType<typeof Trace.Handlers.ModelHandlers.Flows.data>> {
+  Trace.Handlers.ModelHandlers.Flows.reset();
+  for (const event of events) {
+    Trace.Handlers.ModelHandlers.Flows.handleEvent(event);
+  }
+  await Trace.Handlers.ModelHandlers.Flows.finalize();
+  return Trace.Handlers.ModelHandlers.Flows.data();
+}
+const cat = 'mewtwo';
+const pid = 0;
+const tid = 0;
+
+describe('FlowsHandler', function() {
+  it('parses a flow correctly', async () => {
+    const events = [
+      // Trace events linked to flow phase events.
+      makeCompleteEvent('A', 0, 10, cat, pid, tid),
+      makeCompleteEvent('B', 10, 10, cat, pid, tid),
+      makeCompleteEvent('C', 20, 10, cat, pid, tid),
+
+      // Flow phase events
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_STEP, 1, pid, tid),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, tid),
+
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 1);
+    assert.deepEqual(flows[0], events.slice(0, 3));
+  });
+  it('handles multiple flows with the same group token', async function() {
+    const events = [
+      // Flow 1 phase events
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_STEP, 1, pid, tid),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, tid),
+
+      // Flow 2 phase
+      makeFlowPhaseEvent('A', 30, cat, Trace.Types.Events.Phase.FLOW_START, 2, pid, tid),
+      makeFlowPhaseEvent('A', 40, cat, Trace.Types.Events.Phase.FLOW_STEP, 2, pid, tid),
+      makeFlowPhaseEvent('A', 50, cat, Trace.Types.Events.Phase.FLOW_END, 2, pid, tid),
+
+      // Flow 1 events
+      makeCompleteEvent('A', 0, 10, cat, pid, tid),
+      makeCompleteEvent('B', 10, 10, cat, pid, tid),
+      makeCompleteEvent('C', 20, 10, cat, pid, tid),
+
+      // Flow 2 events
+      makeCompleteEvent('A', 30, 10, cat, pid, tid),
+      makeCompleteEvent('B', 40, 10, cat, pid, tid),
+      makeCompleteEvent('C', 50, 10, cat, pid, tid),
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 2);
+    assert.deepEqual(flows[0], events.slice(6, 9));
+    assert.deepEqual(flows[1], events.slice(9));
+  });
+
+  it('handles events belonging to multiple flows', async function() {
+    const events = [
+      // Flow 1 phase events
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, tid),
+
+      // Flow 2 phase events
+      makeFlowPhaseEvent('B', 10, cat, Trace.Types.Events.Phase.FLOW_START, 2, pid, tid),
+      makeFlowPhaseEvent('B', 20, cat, Trace.Types.Events.Phase.FLOW_END, 2, pid, tid),
+
+      // Flow 1 & 2: A -> B, B -> C
+      makeCompleteEvent('A', 0, 10, cat, pid, tid),
+      makeCompleteEvent('B', 10, 10, cat, pid, tid),
+      makeCompleteEvent('C', 20, 10, cat, pid, tid),
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 2);
+    // Flow 1: A -> B
+    assert.deepEqual(flows[0], events.slice(4, 6));
+    // Flow 2: B -> C
+    assert.deepEqual(flows[1], events.slice(5));
+  });
+  it('handles a flow connecting different threads', async function() {
+    const otherThread = 1;
+    const events = [
+      // Flow phase events. Flow events happen in different threads
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_STEP, 1, pid, otherThread),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, otherThread),
+
+      makeCompleteEvent('A', 0, 10, cat, pid, tid),
+      makeCompleteEvent('B', 10, 10, cat, pid, otherThread),
+      makeCompleteEvent('C', 20, 10, cat, pid, otherThread),
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 1);
+    assert.deepEqual(flows[0], events.slice(3, 6));
+  });
+
+  it('does not link flow phase events to trace events if the thread ids are different', async function() {
+    const otherThread = 1;
+    const events = [
+      // Flow phase events. Flow events happen in different threads
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, tid),
+
+      // Flow events (pid and tid combination differs from the one
+      // of the flow phase events, thus they should not be matched).
+      makeCompleteEvent('A', 0, 10, cat, pid, otherThread),
+      makeCompleteEvent('C', 20, 10, cat, pid, otherThread),
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 0);
+  });
+
+  it('handles multiple flows with different group tokens', async function() {
+    const pidForFlow2 = 1;
+    const tidForFlow2 = 1;
+    const events = [
+      // Flow 1 phase events
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_STEP, 1, pid, tid),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, tid),
+
+      // Flow 2 phase events. Using different pid and tid to ensure
+      // the flow group token is different from flow 1.
+      // The overlapping timestamps should not cause issues identifying
+      // the events belonging to the two different flows.
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 2, pidForFlow2, tidForFlow2),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_STEP, 2, pidForFlow2, tidForFlow2),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 2, pidForFlow2, tidForFlow2),
+
+      // Flow 1 events
+      makeCompleteEvent('A', 0, 10, cat, pid, tid),
+      makeCompleteEvent('B', 10, 10, cat, pid, tid),
+      makeCompleteEvent('C', 20, 10, cat, pid, tid),
+
+      // Flow 2 events
+      makeCompleteEvent('A', 0, 10, cat, pidForFlow2, tidForFlow2),
+      makeCompleteEvent('B', 10, 10, cat, pidForFlow2, tidForFlow2),
+      makeCompleteEvent('C', 20, 10, cat, pidForFlow2, tidForFlow2),
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 2);
+    assert.deepEqual(flows[0], events.slice(6, 9));
+    assert.deepEqual(flows[1], events.slice(9));
+  });
+  it('ignores events with no corresponding flow phase event', async function() {
+    const events = [
+      // Flow 1 phase events
+      makeFlowPhaseEvent('A', 0, cat, Trace.Types.Events.Phase.FLOW_START, 1, pid, tid),
+      makeFlowPhaseEvent('A', 10, cat, Trace.Types.Events.Phase.FLOW_STEP, 1, pid, tid),
+      makeFlowPhaseEvent('A', 20, cat, Trace.Types.Events.Phase.FLOW_END, 1, pid, tid),
+
+      // Flow 1 events
+      makeCompleteEvent('A', 0, 10, cat, pid, tid),
+      makeCompleteEvent('B', 10, 10, cat, pid, tid),
+      makeCompleteEvent('C', 20, 10, cat, pid, tid),
+
+      // non-flow events.
+      makeCompleteEvent('A', 30, 10, cat, pid, tid),
+      makeCompleteEvent('B', 40, 10, cat, pid, tid),
+      makeCompleteEvent('C', 50, 10, cat, pid, tid),
+    ];
+
+    const {flows} = await getFlowsHandlerData(events);
+    assert.lengthOf(flows, 1);
+    assert.deepEqual(flows[0], events.slice(3, 6));
+  });
+});

package/front_end/models/trace/handlers/FlowsHandler.ts

@@ -0,0 +1,176 @@
+// 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.
+
+// In the trace event format, flows are represented with pairing "flow
+// phase" events. Each flow phase event corresponds to one trace event
+// and indicates the role a trace event plays in a flow (start, step or
+// end). For each flow, one `start` and one `end` phase events are
+// included, while the amount of `step` phase events can be >= 0.
+
+// A flow phase event is assigned to a trace event when their cat, tid,
+// pid and ts are equal (see @flowPhaseBindingTokenForEvent ).
+
+// It's possible for a single event to belong to multiple flows. In that
+// case, it will have multiple corresponding flow phase events (one
+// per flow).
+
+// To parse flows, we first handle flow phase events, by creating unique
+// flows with the timestamps of each phase. Then, we place trace events
+// in the flows where their corresponding phase events were placed (if
+// there are any corresponding flow phase events at all).
+const flowDataByGroupToken = new Map<string, number>();
+
+type EventFlowData = {
+  flows: Set<number>,
+  bindingParsed: boolean,
+};
+type FlowBindingTuple =
+    Map<Types.Timing.MicroSeconds, Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Map<string, EventFlowData>>>>;
+
+// 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: FlowBindingTuple = new Map();
+
+const flowsById = new Map<number, Map<Types.Timing.MicroSeconds, Types.Events.Event>>();
+const flowEvents: Types.Events.FlowEvent[] = [];
+const nonFlowEvents: Types.Events.Event[] = [];
+let flows: Types.Events.Event[][] = [];
+const ID_COMPONENT_SEPARATOR = '-$-';
+export function reset(): void {
+  flows = [];
+  flowEvents.length = 0;
+  nonFlowEvents.length = 0;
+  flowDataByGroupToken.clear();
+  boundFlowData.clear();
+  flowsById.clear();
+}
+
+export function handleEvent(event: Types.Events.Event): void {
+  if (Types.Events.isFlowPhaseEvent(event)) {
+    flowEvents.push(event);
+    return;
+  }
+  nonFlowEvents.push(event);
+}
+
+function processNonFlowEvent(event: Types.Events.Event): void {
+  const flowDataForEvent = boundFlowData.get(event.ts)?.get(event.pid)?.get(event.tid)?.get(event.cat);
+  if (!flowDataForEvent) {
+    return;
+  }
+  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<Types.Timing.MicroSeconds, Types.Events.Event>());
+    flow.set(event.ts, event);
+  }
+  flowDataForEvent.bindingParsed = true;
+}
+
+/**
+ * Creates unique flows by tracking flow phase events. A new created
+ * flow whenever a flow start phase event is detected.
+ * Subsequent flow phase events with the same group token are added to
+ * this flow until a flow end phase is detected.
+ */
+function processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {
+  const flowGroup = flowGroupTokenForFlowPhaseEvent(flowPhaseEvent);
+  switch (flowPhaseEvent.ph) {
+    case (Types.Events.Phase.FLOW_START): {
+      const flowMetadata = {flowId: flowPhaseEvent.id, times: new Map([[flowPhaseEvent.ts, undefined]])};
+      flowDataByGroupToken.set(flowGroup, flowPhaseEvent.id);
+      addFlowIdToEventBinding(flowPhaseEvent, flowMetadata.flowId);
+      return;
+    }
+    case (Types.Events.Phase.FLOW_STEP): {
+      const flowId = flowDataByGroupToken.get(flowGroup);
+      if (flowId === undefined) {
+        // Found non-start flow event with no corresponding start flow,
+        // start event. Quietly ignore the problematic event.
+        return;
+      }
+      addFlowIdToEventBinding(flowPhaseEvent, flowId);
+      return;
+    }
+    case (Types.Events.Phase.FLOW_END): {
+      const flowId = flowDataByGroupToken.get(flowGroup);
+      if (flowId === undefined) {
+        // Found non-start flow event with no corresponding start flow,
+        // start event. Quietly ignore the problematic event.
+        return;
+      }
+      addFlowIdToEventBinding(flowPhaseEvent, flowId);
+      // We don't need this data anymore as the flow has been finished,
+      // so we can drop it.
+      flowDataByGroupToken.delete(flowGroup);
+    }
+  }
+}
+
+type MapValueType<T extends Map<unknown, unknown>> = NonNullable<ReturnType<T['get']>>;
+/**
+ * A single trace event can belong to multiple flows. This method
+ * tracks which flows (flowId) an event belongs to given its flow
+ * binding tuple (made of its ts, pid, tid and cat).
+ */
+function addFlowIdToEventBinding(event: Types.Events.Event, flowId: number): void {
+  const flowsByPid =
+      Platform.MapUtilities.getWithDefault<Types.Timing.MicroSeconds, MapValueType<typeof boundFlowData>>(
+          boundFlowData, event.ts, () => new Map());
+  const flowsByTid = Platform.MapUtilities.getWithDefault<Types.Events.ProcessID, MapValueType<typeof flowsByPid>>(
+      flowsByPid, event.pid, () => new Map());
+  const flowsByCat = Platform.MapUtilities.getWithDefault<Types.Events.ThreadID, MapValueType<typeof flowsByTid>>(
+      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)
+ * belonging to the same flow. Flow phase events belonging to the same
+ * flow share category, thread id, process id and name.
+ *
+ * Note that other phase events of other flows can share these
+ * attributes too. For this reason, we group flow phase events in
+ * cycles. A cycle starts on a flow start phase event and finishes on a
+ * flow end phase event. For this reason, flow phase events need to be
+ * handled in timestamp order.
+ */
+function flowGroupTokenForFlowPhaseEvent(event: Types.Events.FlowEvent): string {
+  return `${event.cat}${ID_COMPONENT_SEPARATOR}${event.name}${ID_COMPONENT_SEPARATOR}${event.id}`;
+}
+
+export async function finalize(): Promise<void> {
+  // Order is important: flow events need to be handled first.
+  flowEvents.forEach(processFlowEvent);
+  nonFlowEvents.forEach(processNonFlowEvent);
+  flows = [...flowsById.values()]
+              .map(flowMapping => [...flowMapping.values()])
+              .map(flow => flow.filter(event => event !== undefined))
+              .filter(flow => flow.length > 1);
+}
+
+export function data(): {flows: Types.Events.Event[][]} {
+  return {
+    flows,
+  };
+}

package/front_end/models/trace/handlers/InitiatorsHandler.test.ts

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
-describe('InitiatorsHandler', () => {
+describeWithEnvironment('InitiatorsHandler', () => {
   beforeEach(() => {
     Trace.Handlers.ModelHandlers.Initiators.reset();
   });
@@ -78,67 +79,71 @@ describe('InitiatorsHandler', () => {
        assert.strictEqual(initiator.ts, 122411054482);
      });
 
-  it('for a FireAnimationFrame event it sets the initiator to the RequestAnimationFrame event', async function() {
-    const traceEvents = await TraceLoader.rawEvents(this, 'timer-initiators.json.gz');
-    for (const event of traceEvents) {
-      Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
-    }
-    await Trace.Handlers.ModelHandlers.Initiators.finalize();
-    const data = Trace.Handlers.ModelHandlers.Initiators.data();
-
-    const fireAnimationFrameEvent = traceEvents.find(Trace.Types.Events.isFireAnimationFrame);
-    if (!fireAnimationFrameEvent) {
-      throw new Error('Could not find FireAnimationFrame event');
+  it('sets an initiator relationship between a requestAnimationFrame and the scheduled FunctionCall', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+    const requestAnimationFrameCall = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'requestAnimationFrame');
+    if (!requestAnimationFrameCall) {
+      throw new Error('Could not find requestAnimationFrame call');
     }
-    const requestAnimationFrameEvent = traceEvents.find(Trace.Types.Events.isRequestAnimationFrame);
-    if (!requestAnimationFrameEvent) {
-      throw new Error('Could not find RequestAnimationFrame event');
+    const functionCallEvent = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isFunctionCall(e) && e.ts > requestAnimationFrameCall.ts);
+    if (!functionCallEvent) {
+      throw new Error('Could not find FunctionCall event');
     }
 
-    assert.strictEqual(data.eventToInitiator.get(fireAnimationFrameEvent), requestAnimationFrameEvent);
-    assert.deepEqual(data.initiatorToEvents.get(requestAnimationFrameEvent), [fireAnimationFrameEvent]);
+    assert.strictEqual(parsedTrace.Initiators.eventToInitiator.get(functionCallEvent), requestAnimationFrameCall);
+    assert.deepEqual(parsedTrace.Initiators.initiatorToEvents.get(requestAnimationFrameCall), [functionCallEvent]);
   });
 
-  it('for a TimerFire event sets the initiator to the TimerInstall', async function() {
-    const traceEvents = await TraceLoader.rawEvents(this, 'timer-initiators.json.gz');
-    for (const event of traceEvents) {
-      Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
+  it('sets an initiator relationship between a setTimeout and the scheduled FunctionCall', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+    const setTimeoutCall =
+        parsedTrace.Renderer.allTraceEntries
+            .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'setTimeout')
+            .at(-1);
+    if (!setTimeoutCall) {
+      throw new Error('Could not find setTimeout call');
     }
-    await Trace.Handlers.ModelHandlers.Initiators.finalize();
-    const data = Trace.Handlers.ModelHandlers.Initiators.data();
-
-    const timerFireEvent = traceEvents.find(Trace.Types.Events.isTimerFire);
-    if (!timerFireEvent) {
-      throw new Error('Could not find TimerFire event');
-    }
-    const timerInstallEvent = traceEvents.find(Trace.Types.Events.isTimerInstall);
-    if (!timerInstallEvent) {
-      throw new Error('Could not find TimerInstall event');
+    const functionCallEvent = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isFunctionCall(e) && e.ts > setTimeoutCall.ts);
+    if (!functionCallEvent) {
+      throw new Error('Could not find FunctionCall event');
     }
 
-    assert.strictEqual(data.eventToInitiator.get(timerFireEvent), timerInstallEvent);
-    assert.deepEqual(data.initiatorToEvents.get(timerInstallEvent), [timerFireEvent]);
+    assert.strictEqual(parsedTrace.Initiators.eventToInitiator.get(functionCallEvent), setTimeoutCall);
+    assert.deepEqual(parsedTrace.Initiators.initiatorToEvents.get(setTimeoutCall), [functionCallEvent]);
   });
 
-  it('for a FireIdleCallback event sets the initiator to the RequestIdleCallback', async function() {
-    const traceEvents = await TraceLoader.rawEvents(this, 'timer-initiators.json.gz');
-    for (const event of traceEvents) {
-      Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
-    }
-    await Trace.Handlers.ModelHandlers.Initiators.finalize();
-    const data = Trace.Handlers.ModelHandlers.Initiators.data();
-
-    const fireIdleCallbackEvent = traceEvents.find(Trace.Types.Events.isFireIdleCallback);
-    if (!fireIdleCallbackEvent) {
-      throw new Error('Could not find FireIdleCallback event');
+  it('sets an initiator relationship between a requestIdleCallback and the scheduled FunctionCall', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+    const requestIdleCallback = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'requestIdleCallback');
+    if (!requestIdleCallback) {
+      throw new Error('Could not find requestIdleCallback call');
     }
-    const requestIdleCallbackEvent = traceEvents.find(Trace.Types.Events.isRequestIdleCallback);
-    if (!requestIdleCallbackEvent) {
-      throw new Error('Could not find RequestIdleCallback event');
+    const functionCallEvent = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isFunctionCall(e) && e.ts > requestIdleCallback.ts);
+    if (!functionCallEvent) {
+      throw new Error('Could not find FunctionCall event');
     }
 
-    assert.strictEqual(data.eventToInitiator.get(fireIdleCallbackEvent), requestIdleCallbackEvent);
-    assert.deepEqual(data.initiatorToEvents.get(requestIdleCallbackEvent), [fireIdleCallbackEvent]);
+    assert.strictEqual(parsedTrace.Initiators.eventToInitiator.get(functionCallEvent), requestIdleCallback);
+    assert.deepEqual(parsedTrace.Initiators.initiatorToEvents.get(requestIdleCallback), [functionCallEvent]);
+  });
+
+  it('sets an initiator relationship between a console.createTask and the scheduled task.run', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+    const schedulerFuntion = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'startExample');
+    if (!schedulerFuntion) {
+      throw new Error('Could not find scheduler function call');
+    }
+    const consoleRunTask = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isConsoleRunTask(e) && e.ts > schedulerFuntion.ts);
+    assert.exists(consoleRunTask);
+    assert.strictEqual(parsedTrace.Initiators.eventToInitiator.get(consoleRunTask), schedulerFuntion);
+    assert.deepEqual(parsedTrace.Initiators.initiatorToEvents.get(schedulerFuntion), [consoleRunTask]);
   });
 
   it('for a WebSocketSendHandshakeRequest the initiator is the WebSocketCreate event', async function() {
@@ -194,8 +199,10 @@ describe('InitiatorsHandler', () => {
   it('for a PostMessage Handler event the initiator is the PostMessage Dispatch event', async function() {
     const traceEvents = await TraceLoader.rawEvents(this, 'postmessage-initiators.json.gz');
     for (const event of traceEvents) {
+      Trace.Handlers.ModelHandlers.Flows.handleEvent(event);
       Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
     }
+    await Trace.Handlers.ModelHandlers.Flows.finalize();
     await Trace.Handlers.ModelHandlers.Initiators.finalize();
     const data = Trace.Handlers.ModelHandlers.Initiators.data();
 

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

@@ -5,6 +5,9 @@
 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<string, Types.Events.ScheduleStyleRecalculation>();
 
 // This tracks the last event that is considered to have invalidated the layout
@@ -20,10 +23,6 @@ const lastInvalidationEventForFrame = new Map<string, Types.Events.Event>();
 // is called.
 const lastUpdateLayoutTreeByFrame = new Map<string, Types.Events.UpdateLayoutTree>();
 
-// This tracks postmessage dispatch and handler events for creating initiator association
-const postMessageHandlerEvents: Types.Events.HandlePostMessage[] = [];
-const schedulePostMessageEventByTraceId: Map<string, Types.Events.SchedulePostMessage> = 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<Types.Events.Event, Types.Events.Event>();
@@ -31,9 +30,14 @@ const eventToInitiatorMap = new Map<Types.Events.Event, Types.Events.Event>();
 // multiple events, hence why the value for this map is an array.
 const initiatorToEventsMap = new Map<Types.Events.Event, Types.Events.Event[]>();
 
+// 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: Map<number, Types.Events.RequestAnimationFrame> = new Map();
 const timerInstallEventsById: Map<number, Types.Events.TimerInstall> = new Map();
 const requestIdleCallbackEventsById: Map<number, Types.Events.RequestIdleCallback> = new Map();
+
 const webSocketCreateEventsById: Map<number, Types.Events.WebSocketCreate> = new Map();
 const schedulePostTaskCallbackEventsById: Map<number, Types.Events.SchedulePostTaskCallback> = new Map();
 
@@ -48,8 +52,6 @@ export function reset(): void {
   requestIdleCallbackEventsById.clear();
   webSocketCreateEventsById.clear();
   schedulePostTaskCallbackEventsById.clear();
-  schedulePostMessageEventByTraceId.clear();
-  postMessageHandlerEvents.length = 0;
 }
 
 function storeInitiator(data: {initiator: Types.Events.Event, event: Types.Events.Event}): void {
@@ -59,6 +61,16 @@ function storeInitiator(data: {initiator: Types.Events.Event, event: Types.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: Types.Events.Event): void {
   if (Types.Events.isScheduleStyleRecalculation(event)) {
     lastScheduleStyleRecalcByFrame.set(event.args.data.frame, event);
@@ -164,34 +176,30 @@ export function handleEvent(event: Types.Events.Event): void {
       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(): void {
+  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(): void {
-  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(): void {
+  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(): Promise<void> {
-  // 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 interface InitiatorsData {
@@ -205,3 +213,7 @@ export function data(): InitiatorsData {
     initiatorToEvents: initiatorToEventsMap,
   };
 }
+
+export function deps(): ['Flows', 'AsyncJSCalls'] {
+  return ['Flows', 'AsyncJSCalls'];
+}

package/front_end/models/trace/handlers/LargestImagePaintHandler.test.ts

@@ -3,10 +3,11 @@
 // found in the LICENSE file.
 
 import type * as Protocol from '../../../generated/protocol.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
-describe('LargestImagePaintHandler', function() {
+describeWithEnvironment('LargestImagePaintHandler', function() {
   beforeEach(async () => {
     Trace.Handlers.ModelHandlers.LargestImagePaint.reset();
   });
@@ -24,4 +25,21 @@ describe('LargestImagePaintHandler', function() {
     assert.strictEqual(imageForLCP?.args.data?.DOMNodeId, 10 as Protocol.DOM.BackendNodeId);
     assert.strictEqual(imageForLCP?.args.data?.imageUrl, 'https://via.placeholder.com/2000.jpg');
   });
+
+  it('is able to identify the LCP image request for each navigation', async function() {
+    // The handler depends on Meta + Network requests, let's just execute
+    // all of them rather than call them individually.
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-multiple-frames.json.gz');
+
+    const {mainFrameNavigations} = parsedTrace.Meta;
+    // There is only one main frame navigation in this trace.
+    assert.lengthOf(mainFrameNavigations, 1);
+    const mainNavigation = mainFrameNavigations.at(0);
+    assert.isOk(mainNavigation);
+
+    const {lcpRequestByNavigation} = parsedTrace.LargestImagePaint;
+    const lcpRequest = lcpRequestByNavigation.get(mainNavigation);
+    assert.isOk(lcpRequest);
+    assert.strictEqual(lcpRequest.args.data.url, 'https://placehold.co/1000.jpg');
+  });
 });