chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

package/front_end/models/badges/UserBadges.ts

@@ -4,9 +4,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
 
 import {AiExplorerBadge} from './AiExplorerBadge.js';
-import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext} from './Badge.js';
+import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext, TriggerOptions} from './Badge.js';
 import {CodeWhispererBadge} from './CodeWhispererBadge.js';
 import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
@@ -24,6 +25,7 @@ export interface EventTypes {
 
 const SNOOZE_TIME_MS = 24 * 60 * 60 * 1000;  // 24 hours
 const MAX_SNOOZE_COUNT = 3;
+const DELAY_BEFORE_TRIGGER = 1500;
 
 let userBadgesInstance: UserBadges|undefined = undefined;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -48,6 +50,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     super();
 
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
+    if (Host.GdpClient.getGdpProfilesEnterprisePolicy() ===
+        Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED_WITHOUT_BADGES) {
+      this.#receiveBadgesSetting.set(false);
+    }
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
 
     this.#starterBadgeSnoozeCount = Common.Settings.Settings.instance().createSetting(
@@ -93,7 +99,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#badgeActionEventTarget.dispatchEventToListeners(action);
   }
 
-  async #onTriggerBadge(badge: Badge): Promise<void> {
+  async #onTriggerBadge(badge: Badge, opts?: TriggerOptions): Promise<void> {
+    const triggerTime = Date.now();
     let shouldAwardBadge = false;
     // By default, we award non-starter badges directly when they are triggered.
     if (!badge.isStarterBadge) {
@@ -116,7 +123,12 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       }
     }
 
-    this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
+    const timeElapsedAfterTriggerCall = Date.now() - triggerTime;
+    // We want to add exactly 1.5 second delay between the trigger action & the notification.
+    const delay = opts?.immediate ? 0 : Math.max(DELAY_BEFORE_TRIGGER - timeElapsedAfterTriggerCall, 0);
+    setTimeout(() => {
+      this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
+    }, delay);
   }
 
   #deactivateAllBadges(): void {
@@ -145,6 +157,12 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
+    if (!Host.GdpClient.isGdpProfilesAvailable() ||
+        Host.GdpClient.getGdpProfilesEnterprisePolicy() !== Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED) {
+      this.#deactivateAllBadges();
+      return;
+    }
+
     const [gdpProfile, isEligibleToCreateProfile] = await Promise.all([
       Host.GdpClient.GdpClient.instance().getProfile(),
       Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile(),

package/front_end/models/badges/badges.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * from './AiExplorerBadge.js';
 export * from './SpeedsterBadge.js';
 export * from './StarterBadge.js';
 export * from './Badge.js';

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7978,7 +7978,7 @@ export const NativeFunctions = [
   },
   {
     name: "constant",
-    signatures: [["tensor"],["desc","buffer"]]
+    signatures: [["tensor"],["desc","buffer"],["type","value"]]
   },
   {
     name: "argMin",
@@ -8470,7 +8470,7 @@ export const NativeFunctions = [
   },
   {
     name: "submitPrintJob",
-    signatures: [["job_name","document","attributes"]]
+    signatures: [["job_name","document_data","attributes"]]
   },
   {
     name: "PushEvent",

package/front_end/models/trace/EventsSerializer.ts

@@ -39,7 +39,7 @@ export class EventsSerializer {
     if (EventsSerializer.isLegacyTimelineFrameKey(eventValues)) {
       const event = parsedTrace.data.Frames.frames.at(eventValues.rawIndex);
       if (!event) {
-        throw new Error(`Could not find frame with index ${eventValues.rawIndex}`);
+        throw new Error(`Unknown trace event. Could not find frame with index ${eventValues.rawIndex}`);
       }
       return event;
     }
@@ -48,7 +48,8 @@ export class EventsSerializer {
       const syntheticEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getSyntheticTraces();
       const syntheticEvent = syntheticEvents.at(eventValues.rawIndex);
       if (!syntheticEvent) {
-        throw new Error(`Attempted to get a synthetic event from an unknown raw event index: ${eventValues.rawIndex}`);
+        throw new Error(`Unknown trace event. Attempted to get a synthetic event from an unknown raw event index: ${
+            eventValues.rawIndex}`);
       }
       return syntheticEvent;
     }
@@ -57,7 +58,7 @@ export class EventsSerializer {
       const rawEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents();
       return rawEvents[eventValues.rawIndex];
     }
-    throw new Error(`Unknown trace event serializable key values: ${(eventValues as unknown[]).join('-')}`);
+    throw new Error(`Unknown trace event. Serializable key values: ${(eventValues as unknown[]).join('-')}`);
   }
 
   static isProfileCallKey(key: Types.File.SerializableKeyValues): key is Types.File.ProfileCallKeyValues {

package/front_end/models/trace/README.md

@@ -31,7 +31,7 @@ This folder contains the new trace engine that was first implemented for the Per
                          │
                          │
       ┌──────────────────▼─────────────────┐
-      │const data = model.parsedTrace()│
+      │const data = model.parsedTrace()    │
       └────────────────────────────────────┘
 ```
 
@@ -98,3 +98,30 @@ The object returned from `parsedTrace()` is an object of key-value pairs where e
   // and so on for each enabled Handler
 }
 ```
+
+## Pairing begin & end events
+
+Note: this detail is not useful if you are using the Trace Engine, but it is if you are working on it.
+
+Trace events are often emitted as `begin` & `end` events to represent the lifetime of the event. These have the `b` and `e` phase.
+
+When we find these events, we often try to pair them into what we call a "Synthetic" event. This is a trace event that doesn't exist in the raw trace, but one that we create to make it easier to deal with. This means we can represent a `b` & `e` pair as a single event rather than pass two events around.
+
+When we pair these events, we look for an ID. Some events have a top level `id` field, others have a nested `id2.local` field (this is for various historical reasons). `getSyntheticId` in `Trace.Helpers` takes care of this, and tries to account for potential collisions by appending a few other pieces of metadata onto the ID.
+
+This approach worked well until July 2025 when an upstream change in Perfetto [https://chromium.googlesource.com/external/github.com/google/perfetto.git/+/aef636b27ffbf379fd722e7798030da2c5c4d699] meant that Perfetto will try to minimise the amount of unique IDs it uses. A consequence of this change is that IDs can be reused by consecutive, non-overlapping events.
+
+For example, take the following set of events:
+
+```
+=== E1 === === E2 ===
+```
+
+These could have the same ID, because they do not overlap.
+
+Whereas these events will have different IDs because otherwise you cannot reliably pair them up:
+
+```
+=== E1 ===
+  === E2 ===
+```

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

@@ -2,6 +2,7 @@
 // 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 Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
@@ -56,15 +57,15 @@ let longestInteractionEvent: Types.Events.SyntheticInteractionPair|null = null;
 
 let interactionEvents: Types.Events.SyntheticInteractionPair[] = [];
 let interactionEventsWithNoNesting: Types.Events.SyntheticInteractionPair[] = [];
-let eventTimingEndEventsById = new Map<string, Types.Events.EventTimingEnd>();
 let eventTimingStartEventsForInteractions: Types.Events.EventTimingBegin[] = [];
+let eventTimingEndEventsForInteractions: Types.Events.EventTimingEnd[] = [];
 
 export function reset(): void {
   beginCommitCompositorFrameEvents = [];
   parseMetaViewportEvents = [];
   interactionEvents = [];
   eventTimingStartEventsForInteractions = [];
-  eventTimingEndEventsById = new Map();
+  eventTimingEndEventsForInteractions = [];
   interactionEventsWithNoNesting = [];
   longestInteractionEvent = null;
 }
@@ -86,7 +87,7 @@ export function handleEvent(event: Types.Events.Event): void {
 
   if (Types.Events.isEventTimingEnd(event)) {
     // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.
-    eventTimingEndEventsById.set(event.id, event);
+    eventTimingEndEventsForInteractions.push(event);
   }
 
   // From this point on we want to find events that represent interactions.
@@ -167,9 +168,18 @@ export function categoryOfInteraction(interaction: Types.Events.SyntheticInterac
  *   =======B=[keyup]=====
  *    ====C=[pointerdown]=
  *         =D=[pointerup]=
+ *
+ * Additionally, this method will also maximise the processing duration of the
+ * events that we keep as non-nested. We want to make sure we give an accurate
+ * representation of main thread activity, so if we keep an event + hide its
+ * nested children, we set the top level event's processing start &
+ * processing end to be the earliest processing start & the latest processing
+ * end of its children. This ensures we report a more accurate main thread
+ * activity time which is important as we want developers to focus on fixing
+ * this.
  **/
-export function removeNestedInteractions(interactions: readonly Types.Events.SyntheticInteractionPair[]):
-    readonly Types.Events.SyntheticInteractionPair[] {
+export function removeNestedInteractionsAndSetProcessingTime(
+    interactions: readonly Types.Events.SyntheticInteractionPair[]): readonly Types.Events.SyntheticInteractionPair[] {
   /**
    * Because we nest events only that are in the same category, we store the
    * longest event for a given end time by category.
@@ -257,77 +267,95 @@ function writeSyntheticTimespans(event: Types.Events.SyntheticInteractionPair):
 export async function finalize(): Promise<void> {
   const {navigationsByFrameId} = metaHandlerData();
 
-  // For each interaction start event, find the async end event by the ID, and then create the Synthetic Interaction event.
-  for (const interactionStartEvent of eventTimingStartEventsForInteractions) {
-    const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);
-    if (!endEvent) {
-      // If we cannot find an end event, bail and drop this event.
-      continue;
-    }
-    const {type, interactionId, timeStamp, processingStart, processingEnd} = interactionStartEvent.args.data;
-    if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
-      // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
-      // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
-      continue;
-    }
-
-    // In the future we will add microsecond timestamps to the trace events…
-    // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
-    // …but until then we can use the millisecond precision values that are in
-    // the trace event. To adjust them to be relative to the event.ts and the
-    // trace timestamps, for both processingStart and processingEnd we subtract
-    // the event timestamp (NOT event.ts, but the timeStamp millisecond value
-    // emitted in args.data), and then add that value to the event.ts. This
-    // will give us a processingStart and processingEnd time in microseconds
-    // that is relative to event.ts, and can be used when drawing boxes.
-    // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.
-    const processingStartRelativeToTraceTime = Types.Timing.Micro(
-        Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) +
-            interactionStartEvent.ts,
-    );
-
-    const processingEndRelativeToTraceTime = Types.Timing.Micro(
-        (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) +
-        interactionStartEvent.ts);
-
-    // Ultimate frameId fallback only needed for TSC, see comments in the type.
-    const frameId = interactionStartEvent.args.frame ?? interactionStartEvent.args.data.frame ?? '';
-    const navigation = Helpers.Trace.getNavigationForTraceEvent(interactionStartEvent, frameId, navigationsByFrameId);
-    const navigationId = navigation?.args.data?.navigationId;
-    const interactionEvent =
-        Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
-          // Use the start event to define the common fields.
-          rawSourceEvent: interactionStartEvent,
-          cat: interactionStartEvent.cat,
-          name: interactionStartEvent.name,
-          pid: interactionStartEvent.pid,
-          tid: interactionStartEvent.tid,
-          ph: interactionStartEvent.ph,
-          processingStart: processingStartRelativeToTraceTime,
-          processingEnd: processingEndRelativeToTraceTime,
-          // These will be set in writeSyntheticTimespans()
-          inputDelay: Types.Timing.Micro(-1),
-          mainThreadHandling: Types.Timing.Micro(-1),
-          presentationDelay: Types.Timing.Micro(-1),
-          args: {
-            data: {
-              beginEvent: interactionStartEvent,
-              endEvent,
-              frame: frameId,
-              navigationId,
+  const beginAndEndEvents = Platform.ArrayUtilities.mergeOrdered(
+                                eventTimingStartEventsForInteractions, eventTimingEndEventsForInteractions,
+                                Helpers.Trace.eventTimeComparator) as Types.Events.EventTimingBeginOrEnd[];
+
+  // Pair up the begin & end events and create synthetic user timing events.
+  const beginEventById = new Map<string, Types.Events.EventTimingBegin[]>();
+  for (const event of beginAndEndEvents) {
+    if (Types.Events.isEventTimingStart(event)) {
+      const forId = beginEventById.get(event.id) ?? [];
+      forId.push(event);
+      beginEventById.set(event.id, forId);
+    } else if (Types.Events.isEventTimingEnd(event)) {
+      const beginEvents = beginEventById.get(event.id) ?? [];
+      const beginEvent = beginEvents.pop();
+      if (!beginEvent) {
+        continue;
+      }
+      const {type, interactionId, timeStamp, processingStart, processingEnd} = beginEvent.args.data;
+      if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
+        // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
+        // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
+        continue;
+      }
+      // In the future we will add microsecond timestamps to the trace events…
+      // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
+      // …but until then we can use the millisecond precision values that are in
+      // the trace event. To adjust them to be relative to the event.ts and the
+      // trace timestamps, for both processingStart and processingEnd we subtract
+      // the event timestamp (NOT event.ts, but the timeStamp millisecond value
+      // emitted in args.data), and then add that value to the event.ts. This
+      // will give us a processingStart and processingEnd time in microseconds
+      // that is relative to event.ts, and can be used when drawing boxes.
+      // There is some inaccuracy here as we are converting milliseconds to
+      // microseconds, but it is good enough until the backend emits more
+      // accurate numbers.
+      const processingStartRelativeToTraceTime = Types.Timing.Micro(
+          Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) + beginEvent.ts,
+      );
+
+      const processingEndRelativeToTraceTime = Types.Timing.Micro(
+          (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) + beginEvent.ts);
+
+      // Ultimate frameId fallback only needed for TSC, see comments in the type.
+      const frameId = beginEvent.args.frame ?? beginEvent.args.data.frame ?? '';
+      const navigation = Helpers.Trace.getNavigationForTraceEvent(beginEvent, frameId, navigationsByFrameId);
+      const navigationId = navigation?.args.data?.navigationId;
+      const interactionEvent =
+          Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
+            // Use the start event to define the common fields.
+            rawSourceEvent: beginEvent,
+            cat: beginEvent.cat,
+            name: beginEvent.name,
+            pid: beginEvent.pid,
+            tid: beginEvent.tid,
+            ph: beginEvent.ph,
+            processingStart: processingStartRelativeToTraceTime,
+            processingEnd: processingEndRelativeToTraceTime,
+            // These will be set in writeSyntheticTimespans()
+            inputDelay: Types.Timing.Micro(-1),
+            mainThreadHandling: Types.Timing.Micro(-1),
+            presentationDelay: Types.Timing.Micro(-1),
+            args: {
+              data: {
+                beginEvent,
+                endEvent: event,
+                frame: frameId,
+                navigationId,
+              },
             },
-          },
-          ts: interactionStartEvent.ts,
-          dur: Types.Timing.Micro(endEvent.ts - interactionStartEvent.ts),
-          type: interactionStartEvent.args.data.type,
-          interactionId: interactionStartEvent.args.data.interactionId,
-        });
-    writeSyntheticTimespans(interactionEvent);
-
-    interactionEvents.push(interactionEvent);
+            ts: beginEvent.ts,
+            dur: Types.Timing.Micro(event.ts - beginEvent.ts),
+            type: beginEvent.args.data.type,
+            interactionId: beginEvent.args.data.interactionId,
+          });
+      writeSyntheticTimespans(interactionEvent);
+      interactionEvents.push(interactionEvent);
+    }
   }
 
-  interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
+  // Once we gather up all the interactions, we want to remove nested
+  // interactions. Interactions can be nested because one user action (e.g. a
+  // click) will cause a pointerdown, pointerup and click. But we don't want to
+  // fill the interactions track with lots of noise. To fix this, we go through
+  // all the events and remove any nested ones so on the timeline we focus the
+  // user on the most important events, which we define as the longest one. But
+  // this algorithm assumes the events are in ASC order, so we first sort the
+  // set of interactions.
+  Helpers.Trace.sortTraceEventsInPlace(interactionEvents);
+  interactionEventsWithNoNesting.push(...removeNestedInteractionsAndSetProcessingTime(interactionEvents));
 
   // Pick the longest interactions from the set that were not nested, as we
   // know those are the set of the largest interactions.

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

@@ -223,9 +223,9 @@ export async function finalize(): Promise<void> {
 
 export function data(): UserTimingsData {
   return {
+    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
     performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing') as
         Types.Events.SyntheticUserTimingPair[],
-    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
     performanceMarks: performanceMarkEvents,
     timestampEvents,
     measureTraceByTraceId,

package/front_end/models/trace/helpers/Timing.ts

@@ -221,7 +221,7 @@ export function boundsIncludeTimeRange(data: BoundsIncludeTimeRange): boolean {
 /** Checks to see if the event is within or overlaps the bounds */
 export function eventIsInBounds(event: Types.Events.Event, bounds: Types.Timing.TraceWindowMicro): boolean {
   const startTime = event.ts;
-  return startTime <= bounds.max && bounds.min <= (startTime + (event.dur ?? 0));
+  return startTime <= bounds.max && bounds.min < (startTime + (event.dur ?? 0));
 }
 
 export function timestampIsInBounds(bounds: Types.Timing.TraceWindowMicro, timestamp: Types.Timing.Micro): boolean {

package/front_end/models/trace/helpers/Trace.ts

@@ -12,6 +12,7 @@ import {SyntheticEventsManager} from './SyntheticEvents.js';
 import {eventTimingsMicroSeconds} from './Timing.js';
 
 interface MatchingPairableAsyncEvents {
+  syntheticId: string;
   begin: Types.Events.PairableAsyncBegin|null;
   end: Types.Events.PairableAsyncEnd|null;
   instant?: Types.Events.PairableAsyncInstant[];
@@ -290,62 +291,113 @@ export function makeProfileCall(
 }
 
 /**
- * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant (ASYNC_NESTABLE_INSTANT)
- * if provided, though currently only coming from Animations. Traces may contain multiple instant events so we need to
- * account for that.
+ * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant
+ * if provided. Traces may contain multiple instant events so we need to
+ * account for that. Additionally we have seen cases where we might only have a
+ * begin event & instant event(s), with no end event. So we account for that
+ * situation also.
  *
- * @returns Map of the animation's ID to it's matching events.
+ * You might also like to read the models/trace/README.md which has some
+ * documentation on trace IDs. This is important as Perfetto will reuse trace
+ * IDs when emitting events (if they do not overlap). This means it's not as
+ * simple as grouping events by IDs. Instead, we group begin & instant events
+ * by ID as we find them. When we find end events, we then pop any matching
+ * begin/instant events off the stack and group those. That way, if we meet the
+ * same ID later on it doesn't cause us collisions.
+ *
+ * @returns An array of all the matched event groups, along with their ID. Note
+ * that two event groups can have the same ID if they were non-overlapping
+ * events. You cannot rely on ID being unique across a trace. The returned set
+ * of groups are NOT SORTED in any order.
  */
-export function matchEvents(unpairedEvents: Types.Events.PairableAsync[]): Map<string, MatchingPairableAsyncEvents> {
+function matchEvents(unpairedEvents: Types.Events.PairableAsync[]): MatchingPairableAsyncEvents[] {
+  sortTraceEventsInPlace(unpairedEvents);
   // map to store begin and end of the event
-  const matchedPairs = new Map<string, MatchingPairableAsyncEvents>();
+  const matches: MatchingPairableAsyncEvents[] = [];
 
-  // looking for start and end
+  const beginEventsById = new Map<string, Types.Events.PairableAsyncBegin[]>();
+  const instantEventsById = new Map<string, Types.Events.PairableAsyncInstant[]>();
   for (const event of unpairedEvents) {
-    const syntheticId = getSyntheticId(event);
-    if (syntheticId === undefined) {
+    const id = getSyntheticId(event);
+    if (id === undefined) {
       continue;
     }
-    // Create a synthetic id to prevent collisions across categories.
-    // Console timings can be dispatched with the same id, so use the
-    // event name as well to generate unique ids.
-    const otherEventsWithID = Platform.MapUtilities.getWithDefault(matchedPairs, syntheticId, () => {
-      return {begin: null, end: null, instant: []};
-    });
-
-    const isStartEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_START;
-    const isEndEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_END;
-    const isInstantEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_INSTANT;
-
-    if (isStartEvent) {
-      otherEventsWithID.begin = event as Types.Events.PairableAsyncBegin;
-    } else if (isEndEvent) {
-      otherEventsWithID.end = event as Types.Events.PairableAsyncEnd;
-    } else if (isInstantEvent) {
-      if (!otherEventsWithID.instant) {
-        otherEventsWithID.instant = [];
+    if (Types.Events.isPairableAsyncBegin(event)) {
+      const existingEvents = beginEventsById.get(id) ?? [];
+      existingEvents.push(event);
+      beginEventsById.set(id, existingEvents);
+    } else if (Types.Events.isPairableAsyncInstant(event)) {
+      const existingEvents = instantEventsById.get(id) ?? [];
+      existingEvents.push(event);
+      instantEventsById.set(id, existingEvents);
+    } else if (Types.Events.isPairableAsyncEnd(event)) {
+      // Find matching begin event by ID
+      const beginEventsWithMatchingId = beginEventsById.get(id) ?? [];
+      const beginEvent = beginEventsWithMatchingId.pop();
+      if (!beginEvent) {
+        continue;
       }
-      otherEventsWithID.instant.push(event as Types.Events.PairableAsyncInstant);
+      const instantEventsWithMatchingId = instantEventsById.get(id) ?? [];
+      // Find all instant events after the begin event ts.
+      const instantEventsForThisGroup: Types.Events.PairableAsyncInstant[] = [];
+      while (instantEventsWithMatchingId.length > 0) {
+        if (instantEventsWithMatchingId[0].ts >= beginEvent.ts) {
+          const event = instantEventsWithMatchingId.pop();
+          if (event) {
+            instantEventsForThisGroup.push(event);
+          }
+        } else {
+          break;
+        }
+      }
+      const matchingGroup: MatchingPairableAsyncEvents = {
+        begin: beginEvent,
+        end: event,
+        instant: instantEventsForThisGroup,
+        syntheticId: id,
+      };
+      matches.push(matchingGroup);
     }
   }
-  return matchedPairs;
+
+  // At this point we know we have paired up all the Begin & End & Instant
+  // events. But it is possible to see only begin & instant events with the
+  // same ID, and no end event. So now we do a second pass through our begin
+  // events to find any that did not have an end event. If we find some
+  // instant events for the begin event, we create a new group.
+  // Also, because there were no end events, we know that the IDs will be
+  // unique now; e.g. each key in the map should have no more than one item in
+  // it.
+  for (const [id, beginEvents] of beginEventsById) {
+    const beginEvent = beginEvents.pop();
+    if (!beginEvent) {
+      continue;
+    }
+    const matchingInstantEvents = instantEventsById.get(id);
+    if (matchingInstantEvents?.length) {
+      matches.push({
+        syntheticId: id,
+        begin: beginEvent,
+        end: null,
+        instant: matchingInstantEvents,
+      });
+    }
+  }
+
+  return matches;
 }
 
-function getSyntheticId(event: Types.Events.PairableAsync): string|undefined {
+export function getSyntheticId(event: Types.Events.PairableAsync): string|undefined {
   const id = extractId(event);
   return id && `${event.cat}:${id}:${event.name}`;
 }
 
-export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    matchedPairs: Map<string, {
-      begin: Types.Events.PairableAsyncBegin | null,
-      end: Types.Events.PairableAsyncEnd | null,
-      instant?: Types.Events.PairableAsyncInstant[],
-    }>,
-    syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void,
+function createSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
+    matchedPairs: MatchingPairableAsyncEvents[],
     ): Array<Types.Events.SyntheticEventPair<T>> {
   const syntheticEvents: Array<Types.Events.SyntheticEventPair<T>> = [];
-  for (const [id, eventsTriplet] of matchedPairs.entries()) {
+  for (const eventsTriplet of matchedPairs) {
+    const id = eventsTriplet.syntheticId;
     const beginEvent = eventsTriplet.begin;
     const endEvent = eventsTriplet.end;
     const instantEvents = eventsTriplet.instant;
@@ -399,17 +451,21 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
       // crbug.com/1472375
       continue;
     }
-    syntheticEventCallback?.(event);
     syntheticEvents.push(event);
   }
-  return syntheticEvents.sort((a, b) => a.ts - b.ts);
+  sortTraceEventsInPlace(syntheticEvents);
+  return syntheticEvents;
 }
 
-export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    unpairedAsyncEvents: T[], syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void):
+/**
+ * Groups up sets of async events into synthetic events.
+ * @param unpairedAsyncEvents the raw array of begin, end and async instant
+ * events. These MUST be sorted in timestamp ASC order.
+ */
+export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(unpairedAsyncEvents: T[]):
     Array<Types.Events.SyntheticEventPair<T>> {
   const matchedPairs = matchEvents(unpairedAsyncEvents);
-  const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs, syntheticEventCallback);
+  const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs);
   return syntheticEvents;
 }
 

package/front_end/models/trace/types/TraceEvents.ts

@@ -1358,6 +1358,15 @@ export interface PairableAsyncInstant extends PairableAsync {
 export interface PairableAsyncEnd extends PairableAsync {
   ph: Phase.ASYNC_NESTABLE_END;
 }
+export function isPairableAsyncBegin(e: Event): e is PairableAsyncBegin {
+  return e.ph === Phase.ASYNC_NESTABLE_START;
+}
+export function isPairableAsyncEnd(e: Event): e is PairableAsyncEnd {
+  return e.ph === Phase.ASYNC_NESTABLE_END;
+}
+export function isPairableAsyncInstant(e: Event): e is PairableAsyncInstant {
+  return e.ph === Phase.ASYNC_NESTABLE_INSTANT;
+}
 
 export interface AnimationFrame extends PairableAsync {
   name: Name.ANIMATION_FRAME;