@paulirish/trace_engine 0.0.10 → 0.0.11

package/models/trace/handlers/UserInteractionsHandler.js

@@ -1,168 +1,267 @@
-import * as Helpers from "../helpers/helpers.js";
-import * as Types from "../types/types.js";
-import { HandlerState } from "./types.js";
+// 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 Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+// This handler serves two purposes. It generates a list of events that are
+// used to show user clicks in the timeline. It is also used to gather
+// EventTimings into Interactions, which we use to show interactions and
+// highlight long interactions to the user, along with INP.
+// We don't need to know which process / thread these events occurred in,
+// because they are effectively global, so we just track all that we find.
 const allEvents = [];
 export const LONG_INTERACTION_THRESHOLD = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(200));
 let longestInteractionEvent = null;
 const interactionEvents = [];
 const interactionEventsWithNoNesting = [];
-const eventTimingEndEventsById = /* @__PURE__ */ new Map();
+const eventTimingEndEventsById = new Map();
 const eventTimingStartEventsForInteractions = [];
-let handlerState = HandlerState.UNINITIALIZED;
+let handlerState = 1 /* HandlerState.UNINITIALIZED */;
 export function reset() {
-  allEvents.length = 0;
-  interactionEvents.length = 0;
-  eventTimingStartEventsForInteractions.length = 0;
-  eventTimingEndEventsById.clear();
-  interactionEventsWithNoNesting.length = 0;
-  longestInteractionEvent = null;
-  handlerState = HandlerState.INITIALIZED;
+    allEvents.length = 0;
+    interactionEvents.length = 0;
+    eventTimingStartEventsForInteractions.length = 0;
+    eventTimingEndEventsById.clear();
+    interactionEventsWithNoNesting.length = 0;
+    longestInteractionEvent = null;
+    handlerState = 2 /* HandlerState.INITIALIZED */;
 }
 export function handleEvent(event) {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error("Handler is not initialized");
-  }
-  if (!Types.TraceEvents.isTraceEventEventTiming(event)) {
-    return;
-  }
-  if (Types.TraceEvents.isTraceEventEventTimingEnd(event)) {
-    eventTimingEndEventsById.set(event.id, event);
-  }
-  allEvents.push(event);
-  if (!event.args.data || !Types.TraceEvents.isTraceEventEventTimingStart(event)) {
-    return;
-  }
-  const { duration, interactionId } = event.args.data;
-  if (duration < 1 || interactionId === void 0 || interactionId === 0) {
-    return;
-  }
-  eventTimingStartEventsForInteractions.push(event);
+    if (handlerState !== 2 /* HandlerState.INITIALIZED */) {
+        throw new Error('Handler is not initialized');
+    }
+    if (!Types.TraceEvents.isTraceEventEventTiming(event)) {
+        return;
+    }
+    if (Types.TraceEvents.isTraceEventEventTimingEnd(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);
+    }
+    allEvents.push(event);
+    // From this point on we want to find events that represent interactions.
+    // These events are always start events - those are the ones that contain all
+    // the metadata about the interaction.
+    if (!event.args.data || !Types.TraceEvents.isTraceEventEventTimingStart(event)) {
+        return;
+    }
+    const { duration, interactionId } = event.args.data;
+    // We exclude events for the sake of interactions if:
+    // 1. They have no duration.
+    // 2. They have no interactionId
+    // 3. They have an interactionId of 0: this indicates that it's not an
+    //    interaction that we care about because it hasn't had its own interactionId
+    //    set (0 is the default on the backend).
+    // See: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/responsiveness_metrics.cc;l=133;drc=40c209a9c365ebb9f16fb99dfe78c7fe768b9594
+    if (duration < 1 || interactionId === undefined || interactionId === 0) {
+        return;
+    }
+    // Store the start event. In the finalize() function we will pair this with
+    // its end event and create the synthetic interaction event.
+    eventTimingStartEventsForInteractions.push(event);
 }
-const pointerEventTypes = /* @__PURE__ */ new Set([
-  "pointerdown",
-  "touchstart",
-  "pointerup",
-  "touchend",
-  "mousedown",
-  "mouseup",
-  "click"
+/**
+ * See https://web.dev/better-responsiveness-metric/#interaction-types for the
+ * table that defines these sets.
+ **/
+const pointerEventTypes = new Set([
+    'pointerdown',
+    'touchstart',
+    'pointerup',
+    'touchend',
+    'mousedown',
+    'mouseup',
+    'click',
 ]);
-const keyboardEventTypes = /* @__PURE__ */ new Set([
-  "keydown",
-  "keypress",
-  "keyup"
+const keyboardEventTypes = new Set([
+    'keydown',
+    'keypress',
+    'keyup',
 ]);
 export function categoryOfInteraction(interaction) {
-  if (pointerEventTypes.has(interaction.type)) {
-    return "POINTER";
-  }
-  if (keyboardEventTypes.has(interaction.type)) {
-    return "KEYBOARD";
-  }
-  return "OTHER";
-}
-export function removeNestedInteractions(interactions) {
-  const earliestEventForEndTimePerCategory = {
-    POINTER: /* @__PURE__ */ new Map(),
-    KEYBOARD: /* @__PURE__ */ new Map(),
-    OTHER: /* @__PURE__ */ new Map()
-  };
-  function storeEventIfEarliestForCategoryAndEndTime(interaction) {
-    const category = categoryOfInteraction(interaction);
-    const earliestEventForEndTime = earliestEventForEndTimePerCategory[category];
-    const endTime = Types.Timing.MicroSeconds(interaction.ts + interaction.dur);
-    const earliestCurrentEvent = earliestEventForEndTime.get(endTime);
-    if (!earliestCurrentEvent) {
-      earliestEventForEndTime.set(endTime, interaction);
-      return;
+    if (pointerEventTypes.has(interaction.type)) {
+        return 'POINTER';
     }
-    if (interaction.ts < earliestCurrentEvent.ts) {
-      earliestEventForEndTime.set(endTime, interaction);
-    } else if (interaction.ts === earliestCurrentEvent.ts && interaction.interactionId === earliestCurrentEvent.interactionId) {
-      const currentEventProcessingTime = earliestCurrentEvent.processingEnd - earliestCurrentEvent.processingStart;
-      const newEventProcessingTime = interaction.processingEnd - interaction.processingStart;
-      if (newEventProcessingTime > currentEventProcessingTime) {
-        earliestEventForEndTime.set(endTime, interaction);
-      }
+    if (keyboardEventTypes.has(interaction.type)) {
+        return 'KEYBOARD';
     }
-    if (interaction.processingStart < earliestCurrentEvent.processingStart) {
-      earliestCurrentEvent.processingStart = interaction.processingStart;
-      writeSyntheticTimespans(earliestCurrentEvent);
+    return 'OTHER';
+}
+/**
+ * We define a set of interactions as nested where:
+ * 1. Their end times align.
+ * 2. The longest interaction's start time is earlier than all other
+ * interactions with the same end time.
+ * 3. The interactions are of the same category [each interaction is either
+ * categorised as keyboard, or pointer.]
+ *
+ * =============A=[pointerup]=
+ *        ====B=[pointerdown]=
+ *        ===C=[pointerdown]==
+ *         ===D=[pointerup]===
+ *
+ * In this example, B, C and D are all nested and therefore should not be
+ * returned from this function.
+ *
+ * However, in this example we would only consider B nested (under A) and D
+ * nested (under C). A and C both stay because they are of different types.
+ * ========A=[keydown]====
+ *   =======B=[keyup]=====
+ *    ====C=[pointerdown]=
+ *         =D=[pointerup]=
+ **/
+export function removeNestedInteractions(interactions) {
+    /**
+     * Because we nest events only that are in the same category, we store the
+     * longest event for a given end time by category.
+     **/
+    const earliestEventForEndTimePerCategory = {
+        POINTER: new Map(),
+        KEYBOARD: new Map(),
+        OTHER: new Map(),
+    };
+    function storeEventIfEarliestForCategoryAndEndTime(interaction) {
+        const category = categoryOfInteraction(interaction);
+        const earliestEventForEndTime = earliestEventForEndTimePerCategory[category];
+        const endTime = Types.Timing.MicroSeconds(interaction.ts + interaction.dur);
+        const earliestCurrentEvent = earliestEventForEndTime.get(endTime);
+        if (!earliestCurrentEvent) {
+            earliestEventForEndTime.set(endTime, interaction);
+            return;
+        }
+        if (interaction.ts < earliestCurrentEvent.ts) {
+            earliestEventForEndTime.set(endTime, interaction);
+        }
+        else if (interaction.ts === earliestCurrentEvent.ts &&
+            interaction.interactionId === earliestCurrentEvent.interactionId) {
+            // We have seen in traces that the same interaction can have multiple
+            // events (e.g. a 'click' and a 'pointerdown'). Often only one of these
+            // events will have an event handler bound to it which caused delay on
+            // the main thread, and the others will not. This leads to a situation
+            // where if we pick one of the events that had no event handler, its
+            // processing time (processingEnd - processingStart) will be 0, but if we
+            // had picked the event that had the slow event handler, we would show
+            // correctly the main thread delay due to the event handler.
+            // So, if we find events with the same interactionId and the same
+            // begin/end times, we pick the one with the largest (processingEnd -
+            // processingStart) time in order to make sure we find the event with the
+            // worst main thread delay, as that is the one the user should care
+            // about.
+            const currentEventProcessingTime = earliestCurrentEvent.processingEnd - earliestCurrentEvent.processingStart;
+            const newEventProcessingTime = interaction.processingEnd - interaction.processingStart;
+            // Use the new interaction if it has a longer processing time than the existing one.
+            if (newEventProcessingTime > currentEventProcessingTime) {
+                earliestEventForEndTime.set(endTime, interaction);
+            }
+        }
+        // Maximize the processing time based on the "children" interactions.
+        // We pick the earliest start processing time, and the latest end
+        // processing time to avoid under-reporting.
+        if (interaction.processingStart < earliestCurrentEvent.processingStart) {
+            earliestCurrentEvent.processingStart = interaction.processingStart;
+            writeSyntheticTimespans(earliestCurrentEvent);
+        }
+        if (interaction.processingEnd > earliestCurrentEvent.processingEnd) {
+            earliestCurrentEvent.processingEnd = interaction.processingEnd;
+            writeSyntheticTimespans(earliestCurrentEvent);
+        }
     }
-    if (interaction.processingEnd > earliestCurrentEvent.processingEnd) {
-      earliestCurrentEvent.processingEnd = interaction.processingEnd;
-      writeSyntheticTimespans(earliestCurrentEvent);
+    for (const interaction of interactions) {
+        storeEventIfEarliestForCategoryAndEndTime(interaction);
     }
-  }
-  for (const interaction of interactions) {
-    storeEventIfEarliestForCategoryAndEndTime(interaction);
-  }
-  const keptEvents = Object.values(earliestEventForEndTimePerCategory).flatMap((eventsByEndTime) => Array.from(eventsByEndTime.values()));
-  keptEvents.sort((eventA, eventB) => {
-    return eventA.ts - eventB.ts;
-  });
-  return keptEvents;
+    // Combine all the events that we have kept from all the per-category event
+    // maps back into an array and sort them by timestamp.
+    const keptEvents = Object.values(earliestEventForEndTimePerCategory)
+        .flatMap(eventsByEndTime => Array.from(eventsByEndTime.values()));
+    keptEvents.sort((eventA, eventB) => {
+        return eventA.ts - eventB.ts;
+    });
+    return keptEvents;
 }
 function writeSyntheticTimespans(event) {
-  const startEvent = event.args.data.beginEvent;
-  const endEvent = event.args.data.endEvent;
-  event.inputDelay = Types.Timing.MicroSeconds(event.processingStart - startEvent.ts);
-  event.mainThreadHandling = Types.Timing.MicroSeconds(event.processingEnd - event.processingStart);
-  event.presentationDelay = Types.Timing.MicroSeconds(endEvent.ts - event.processingEnd);
+    const startEvent = event.args.data.beginEvent;
+    const endEvent = event.args.data.endEvent;
+    event.inputDelay = Types.Timing.MicroSeconds(event.processingStart - startEvent.ts);
+    event.mainThreadHandling = Types.Timing.MicroSeconds(event.processingEnd - event.processingStart);
+    event.presentationDelay = Types.Timing.MicroSeconds(endEvent.ts - event.processingEnd);
 }
 export async function finalize() {
-  for (const interactionStartEvent of eventTimingStartEventsForInteractions) {
-    const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);
-    if (!endEvent) {
-      continue;
-    }
-    if (!interactionStartEvent.args.data?.type || !interactionStartEvent.args.data?.interactionId) {
-      continue;
+    // 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;
+        }
+        if (!interactionStartEvent.args.data?.type || !interactionStartEvent.args.data?.interactionId) {
+            // 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. We already checked
+            // this in the handleEvent() function, but we do it here also to satisfy
+            // TypeScript.
+            continue;
+        }
+        // In the future we will add microsecond timestamps to the trace events,
+        // 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.MicroSeconds(Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingStart) -
+            Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp) +
+            interactionStartEvent.ts);
+        const processingEndRelativeToTraceTime = Types.Timing.MicroSeconds((Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingEnd) -
+            Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp)) +
+            interactionStartEvent.ts);
+        const interactionEvent = {
+            // Use the start event to define the common fields.
+            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.MicroSeconds(-1),
+            mainThreadHandling: Types.Timing.MicroSeconds(-1),
+            presentationDelay: Types.Timing.MicroSeconds(-1),
+            args: {
+                data: {
+                    beginEvent: interactionStartEvent,
+                    endEvent: endEvent,
+                },
+            },
+            ts: interactionStartEvent.ts,
+            dur: Types.Timing.MicroSeconds(endEvent.ts - interactionStartEvent.ts),
+            type: interactionStartEvent.args.data.type,
+            interactionId: interactionStartEvent.args.data.interactionId,
+        };
+        writeSyntheticTimespans(interactionEvent);
+        interactionEvents.push(interactionEvent);
     }
-    const processingStartRelativeToTraceTime = Types.Timing.MicroSeconds(Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingStart) - Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp) + interactionStartEvent.ts);
-    const processingEndRelativeToTraceTime = Types.Timing.MicroSeconds(Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingEnd) - Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp) + interactionStartEvent.ts);
-    const interactionEvent = {
-      cat: interactionStartEvent.cat,
-      name: interactionStartEvent.name,
-      pid: interactionStartEvent.pid,
-      tid: interactionStartEvent.tid,
-      ph: interactionStartEvent.ph,
-      processingStart: processingStartRelativeToTraceTime,
-      processingEnd: processingEndRelativeToTraceTime,
-      inputDelay: Types.Timing.MicroSeconds(-1),
-      mainThreadHandling: Types.Timing.MicroSeconds(-1),
-      presentationDelay: Types.Timing.MicroSeconds(-1),
-      args: {
-        data: {
-          beginEvent: interactionStartEvent,
-          endEvent
+    handlerState = 3 /* HandlerState.FINALIZED */;
+    interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
+    // Pick the longest interactions from the set that were not nested, as we
+    // know those are the set of the largest interactions.
+    for (const interactionEvent of interactionEventsWithNoNesting) {
+        if (!longestInteractionEvent || longestInteractionEvent.dur < interactionEvent.dur) {
+            longestInteractionEvent = interactionEvent;
         }
-      },
-      ts: interactionStartEvent.ts,
-      dur: Types.Timing.MicroSeconds(endEvent.ts - interactionStartEvent.ts),
-      type: interactionStartEvent.args.data.type,
-      interactionId: interactionStartEvent.args.data.interactionId
-    };
-    writeSyntheticTimespans(interactionEvent);
-    interactionEvents.push(interactionEvent);
-  }
-  handlerState = HandlerState.FINALIZED;
-  interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
-  for (const interactionEvent of interactionEventsWithNoNesting) {
-    if (!longestInteractionEvent || longestInteractionEvent.dur < interactionEvent.dur) {
-      longestInteractionEvent = interactionEvent;
     }
-  }
 }
 export function data() {
-  return {
-    allEvents: [...allEvents],
-    interactionEvents: [...interactionEvents],
-    interactionEventsWithNoNesting: [...interactionEventsWithNoNesting],
-    longestInteractionEvent,
-    interactionsOverThreshold: new Set(interactionEvents.filter((event) => {
-      return event.dur > LONG_INTERACTION_THRESHOLD;
-    }))
-  };
+    return {
+        allEvents: [...allEvents],
+        interactionEvents: [...interactionEvents],
+        interactionEventsWithNoNesting: [...interactionEventsWithNoNesting],
+        longestInteractionEvent,
+        interactionsOverThreshold: new Set(interactionEvents.filter(event => {
+            return event.dur > LONG_INTERACTION_THRESHOLD;
+        })),
+    };
 }
-//# sourceMappingURL=UserInteractionsHandler.js.map
+//# sourceMappingURL=UserInteractionsHandler.js.map

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

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../front_end/models/trace/handlers/UserInteractionsHandler.ts"],
-  "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 Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {HandlerState} from './types.js';\n\n// This handler serves two purposes. It generates a list of events that are\n// used to show user clicks in the timeline. It is also used to gather\n// EventTimings into Interactions, which we use to show interactions and\n// highlight long interactions to the user, along with INP.\n\n// We don't need to know which process / thread these events occurred in,\n// because they are effectively global, so we just track all that we find.\nconst allEvents: Types.TraceEvents.TraceEventEventTiming[] = [];\n\nexport const LONG_INTERACTION_THRESHOLD = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(200));\n\nexport interface UserInteractionsData {\n  /** All the user events we found in the trace */\n  allEvents: readonly Types.TraceEvents.TraceEventEventTiming[];\n  /** All the interaction events we found in the trace that had an\n   * interactionId and a duration > 0\n   **/\n  interactionEvents: readonly Types.TraceEvents.SyntheticInteractionPair[];\n  /** If the user rapidly generates interaction events (think typing into a\n   * text box), in the UI we only really want to show the user the longest\n   * interaction in that set.\n   * For example picture interactions like this:\n   * ===[interaction A]==========\n   *       =[interaction B]======\n   *            =[interaction C]=\n   *\n   * These events all end at the same time, and so in this instance we only want\n   * to show the first interaction A on the timeline, as that is the longest one\n   * and the one the developer should be focusing on. So this array of events is\n   * all the interaction events filtered down, removing any nested interactions\n   * entirely.\n   **/\n  interactionEventsWithNoNesting: readonly Types.TraceEvents.SyntheticInteractionPair[];\n  // The longest duration interaction event. Can be null if the trace has no interaction events.\n  longestInteractionEvent: Readonly<Types.TraceEvents.SyntheticInteractionPair>|null;\n  // All interactions that went over the interaction threshold (200ms, see https://web.dev/inp/)\n  interactionsOverThreshold: Readonly<Set<Types.TraceEvents.SyntheticInteractionPair>>;\n}\n\nlet longestInteractionEvent: Types.TraceEvents.SyntheticInteractionPair|null = null;\n\nconst interactionEvents: Types.TraceEvents.SyntheticInteractionPair[] = [];\nconst interactionEventsWithNoNesting: Types.TraceEvents.SyntheticInteractionPair[] = [];\nconst eventTimingEndEventsById = new Map<string, Types.TraceEvents.TraceEventEventTimingEnd>();\nconst eventTimingStartEventsForInteractions: Types.TraceEvents.TraceEventEventTimingBegin[] = [];\nlet handlerState = HandlerState.UNINITIALIZED;\n\nexport function reset(): void {\n  allEvents.length = 0;\n  interactionEvents.length = 0;\n  eventTimingStartEventsForInteractions.length = 0;\n  eventTimingEndEventsById.clear();\n  interactionEventsWithNoNesting.length = 0;\n  longestInteractionEvent = null;\n  handlerState = HandlerState.INITIALIZED;\n}\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('Handler is not initialized');\n  }\n\n  if (!Types.TraceEvents.isTraceEventEventTiming(event)) {\n    return;\n  }\n\n  if (Types.TraceEvents.isTraceEventEventTimingEnd(event)) {\n    // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.\n    eventTimingEndEventsById.set(event.id, event);\n  }\n\n  allEvents.push(event);\n\n  // From this point on we want to find events that represent interactions.\n  // These events are always start events - those are the ones that contain all\n  // the metadata about the interaction.\n  if (!event.args.data || !Types.TraceEvents.isTraceEventEventTimingStart(event)) {\n    return;\n  }\n  const {duration, interactionId} = event.args.data;\n  // We exclude events for the sake of interactions if:\n  // 1. They have no duration.\n  // 2. They have no interactionId\n  // 3. They have an interactionId of 0: this indicates that it's not an\n  //    interaction that we care about because it hasn't had its own interactionId\n  //    set (0 is the default on the backend).\n  // See: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/responsiveness_metrics.cc;l=133;drc=40c209a9c365ebb9f16fb99dfe78c7fe768b9594\n\n  if (duration < 1 || interactionId === undefined || interactionId === 0) {\n    return;\n  }\n\n  // Store the start event. In the finalize() function we will pair this with\n  // its end event and create the synthetic interaction event.\n  eventTimingStartEventsForInteractions.push(event);\n}\n\n/**\n * See https://web.dev/better-responsiveness-metric/#interaction-types for the\n * table that defines these sets.\n **/\nconst pointerEventTypes = new Set([\n  'pointerdown',\n  'touchstart',\n  'pointerup',\n  'touchend',\n  'mousedown',\n  'mouseup',\n  'click',\n]);\n\nconst keyboardEventTypes = new Set([\n  'keydown',\n  'keypress',\n  'keyup',\n]);\n\nexport type InteractionCategory = 'KEYBOARD'|'POINTER'|'OTHER';\nexport function categoryOfInteraction(interaction: Types.TraceEvents.SyntheticInteractionPair): InteractionCategory {\n  if (pointerEventTypes.has(interaction.type)) {\n    return 'POINTER';\n  }\n  if (keyboardEventTypes.has(interaction.type)) {\n    return 'KEYBOARD';\n  }\n\n  return 'OTHER';\n}\n\n/**\n * We define a set of interactions as nested where:\n * 1. Their end times align.\n * 2. The longest interaction's start time is earlier than all other\n * interactions with the same end time.\n * 3. The interactions are of the same category [each interaction is either\n * categorised as keyboard, or pointer.]\n *\n * =============A=[pointerup]=\n *        ====B=[pointerdown]=\n *        ===C=[pointerdown]==\n *         ===D=[pointerup]===\n *\n * In this example, B, C and D are all nested and therefore should not be\n * returned from this function.\n *\n * However, in this example we would only consider B nested (under A) and D\n * nested (under C). A and C both stay because they are of different types.\n * ========A=[keydown]====\n *   =======B=[keyup]=====\n *    ====C=[pointerdown]=\n *         =D=[pointerup]=\n **/\nexport function removeNestedInteractions(interactions: readonly Types.TraceEvents.SyntheticInteractionPair[]):\n    readonly Types.TraceEvents.SyntheticInteractionPair[] {\n  /**\n   * Because we nest events only that are in the same category, we store the\n   * longest event for a given end time by category.\n   **/\n  const earliestEventForEndTimePerCategory:\n      Record<InteractionCategory, Map<Types.Timing.MicroSeconds, Types.TraceEvents.SyntheticInteractionPair>> = {\n        POINTER: new Map(),\n        KEYBOARD: new Map(),\n        OTHER: new Map(),\n      };\n\n  function storeEventIfEarliestForCategoryAndEndTime(interaction: Types.TraceEvents.SyntheticInteractionPair): void {\n    const category = categoryOfInteraction(interaction);\n    const earliestEventForEndTime = earliestEventForEndTimePerCategory[category];\n    const endTime = Types.Timing.MicroSeconds(interaction.ts + interaction.dur);\n\n    const earliestCurrentEvent = earliestEventForEndTime.get(endTime);\n    if (!earliestCurrentEvent) {\n      earliestEventForEndTime.set(endTime, interaction);\n      return;\n    }\n    if (interaction.ts < earliestCurrentEvent.ts) {\n      earliestEventForEndTime.set(endTime, interaction);\n    } else if (\n        interaction.ts === earliestCurrentEvent.ts &&\n        interaction.interactionId === earliestCurrentEvent.interactionId) {\n      // We have seen in traces that the same interaction can have multiple\n      // events (e.g. a 'click' and a 'pointerdown'). Often only one of these\n      // events will have an event handler bound to it which caused delay on\n      // the main thread, and the others will not. This leads to a situation\n      // where if we pick one of the events that had no event handler, its\n      // processing time (processingEnd - processingStart) will be 0, but if we\n      // had picked the event that had the slow event handler, we would show\n      // correctly the main thread delay due to the event handler.\n      // So, if we find events with the same interactionId and the same\n      // begin/end times, we pick the one with the largest (processingEnd -\n      // processingStart) time in order to make sure we find the event with the\n      // worst main thread delay, as that is the one the user should care\n      // about.\n      const currentEventProcessingTime = earliestCurrentEvent.processingEnd - earliestCurrentEvent.processingStart;\n      const newEventProcessingTime = interaction.processingEnd - interaction.processingStart;\n\n      // Use the new interaction if it has a longer processing time than the existing one.\n      if (newEventProcessingTime > currentEventProcessingTime) {\n        earliestEventForEndTime.set(endTime, interaction);\n      }\n    }\n\n    // Maximize the processing time based on the \"children\" interactions.\n    // We pick the earliest start processing time, and the latest end\n    // processing time to avoid under-reporting.\n    if (interaction.processingStart < earliestCurrentEvent.processingStart) {\n      earliestCurrentEvent.processingStart = interaction.processingStart;\n      writeSyntheticTimespans(earliestCurrentEvent);\n    }\n    if (interaction.processingEnd > earliestCurrentEvent.processingEnd) {\n      earliestCurrentEvent.processingEnd = interaction.processingEnd;\n      writeSyntheticTimespans(earliestCurrentEvent);\n    }\n  }\n\n  for (const interaction of interactions) {\n    storeEventIfEarliestForCategoryAndEndTime(interaction);\n  }\n\n  // Combine all the events that we have kept from all the per-category event\n  // maps back into an array and sort them by timestamp.\n  const keptEvents = Object.values(earliestEventForEndTimePerCategory)\n                         .flatMap(eventsByEndTime => Array.from(eventsByEndTime.values()));\n  keptEvents.sort((eventA, eventB) => {\n    return eventA.ts - eventB.ts;\n  });\n  return keptEvents;\n}\n\nfunction writeSyntheticTimespans(event: Types.TraceEvents.SyntheticInteractionPair): void {\n  const startEvent = event.args.data.beginEvent;\n  const endEvent = event.args.data.endEvent;\n\n  event.inputDelay = Types.Timing.MicroSeconds(event.processingStart - startEvent.ts);\n  event.mainThreadHandling = Types.Timing.MicroSeconds(event.processingEnd - event.processingStart);\n  event.presentationDelay = Types.Timing.MicroSeconds(endEvent.ts - event.processingEnd);\n}\n\nexport async function finalize(): Promise<void> {\n  // For each interaction start event, find the async end event by the ID, and then create the Synthetic Interaction event.\n  for (const interactionStartEvent of eventTimingStartEventsForInteractions) {\n    const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);\n    if (!endEvent) {\n      // If we cannot find an end event, bail and drop this event.\n      continue;\n    }\n    if (!interactionStartEvent.args.data?.type || !interactionStartEvent.args.data?.interactionId) {\n      // A valid interaction event that we care about has to have a type (e.g.\n      // pointerdown, keyup).\n      //\n      // We also need to ensure it has an interactionId. We already checked\n      // this in the handleEvent() function, but we do it here also to satisfy\n      // TypeScript.\n      continue;\n    }\n\n    // In the future we will add microsecond timestamps to the trace events,\n    // but until then we can use the millisecond precision values that are in\n    // the trace event. To adjust them to be relative to the event.ts and the\n    // trace timestamps, for both processingStart and processingEnd we subtract\n    // the event timestamp (NOT event.ts, but the timeStamp millisecond value\n    // emitted in args.data), and then add that value to the event.ts. This\n    // will give us a processingStart and processingEnd time in microseconds\n    // that is relative to event.ts, and can be used when drawing boxes.\n    // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.\n    const processingStartRelativeToTraceTime = Types.Timing.MicroSeconds(\n        Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingStart) -\n            Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp) +\n            interactionStartEvent.ts,\n    );\n\n    const processingEndRelativeToTraceTime = Types.Timing.MicroSeconds(\n        (Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingEnd) -\n         Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp)) +\n        interactionStartEvent.ts);\n\n    const interactionEvent: Types.TraceEvents.SyntheticInteractionPair = {\n      // Use the start event to define the common fields.\n      cat: interactionStartEvent.cat,\n      name: interactionStartEvent.name,\n      pid: interactionStartEvent.pid,\n      tid: interactionStartEvent.tid,\n      ph: interactionStartEvent.ph,\n      processingStart: processingStartRelativeToTraceTime,\n      processingEnd: processingEndRelativeToTraceTime,\n      // These will be set in writeSyntheticTimespans()\n      inputDelay: Types.Timing.MicroSeconds(-1),\n      mainThreadHandling: Types.Timing.MicroSeconds(-1),\n      presentationDelay: Types.Timing.MicroSeconds(-1),\n      args: {\n        data: {\n          beginEvent: interactionStartEvent,\n          endEvent: endEvent,\n        },\n      },\n      ts: interactionStartEvent.ts,\n      dur: Types.Timing.MicroSeconds(endEvent.ts - interactionStartEvent.ts),\n      type: interactionStartEvent.args.data.type,\n      interactionId: interactionStartEvent.args.data.interactionId,\n    };\n    writeSyntheticTimespans(interactionEvent);\n\n    interactionEvents.push(interactionEvent);\n  }\n\n  handlerState = HandlerState.FINALIZED;\n  interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));\n\n  // Pick the longest interactions from the set that were not nested, as we\n  // know those are the set of the largest interactions.\n  for (const interactionEvent of interactionEventsWithNoNesting) {\n    if (!longestInteractionEvent || longestInteractionEvent.dur < interactionEvent.dur) {\n      longestInteractionEvent = interactionEvent;\n    }\n  }\n}\n\nexport function data(): UserInteractionsData {\n  return {\n    allEvents: [...allEvents],\n    interactionEvents: [...interactionEvents],\n    interactionEventsWithNoNesting: [...interactionEventsWithNoNesting],\n    longestInteractionEvent,\n    interactionsOverThreshold: new Set(interactionEvents.filter(event => {\n      return event.dur > LONG_INTERACTION_THRESHOLD;\n    })),\n  };\n}\n"],
-  "mappings": "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",
-  "names": []
-}
+{"version":3,"file":"UserInteractionsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/UserInteractionsHandler.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 Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {HandlerState} from './types.js';\n\n// This handler serves two purposes. It generates a list of events that are\n// used to show user clicks in the timeline. It is also used to gather\n// EventTimings into Interactions, which we use to show interactions and\n// highlight long interactions to the user, along with INP.\n\n// We don't need to know which process / thread these events occurred in,\n// because they are effectively global, so we just track all that we find.\nconst allEvents: Types.TraceEvents.TraceEventEventTiming[] = [];\n\nexport const LONG_INTERACTION_THRESHOLD = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(200));\n\nexport interface UserInteractionsData {\n  /** All the user events we found in the trace */\n  allEvents: readonly Types.TraceEvents.TraceEventEventTiming[];\n  /** All the interaction events we found in the trace that had an\n   * interactionId and a duration > 0\n   **/\n  interactionEvents: readonly Types.TraceEvents.SyntheticInteractionPair[];\n  /** If the user rapidly generates interaction events (think typing into a\n   * text box), in the UI we only really want to show the user the longest\n   * interaction in that set.\n   * For example picture interactions like this:\n   * ===[interaction A]==========\n   *       =[interaction B]======\n   *            =[interaction C]=\n   *\n   * These events all end at the same time, and so in this instance we only want\n   * to show the first interaction A on the timeline, as that is the longest one\n   * and the one the developer should be focusing on. So this array of events is\n   * all the interaction events filtered down, removing any nested interactions\n   * entirely.\n   **/\n  interactionEventsWithNoNesting: readonly Types.TraceEvents.SyntheticInteractionPair[];\n  // The longest duration interaction event. Can be null if the trace has no interaction events.\n  longestInteractionEvent: Readonly<Types.TraceEvents.SyntheticInteractionPair>|null;\n  // All interactions that went over the interaction threshold (200ms, see https://web.dev/inp/)\n  interactionsOverThreshold: Readonly<Set<Types.TraceEvents.SyntheticInteractionPair>>;\n}\n\nlet longestInteractionEvent: Types.TraceEvents.SyntheticInteractionPair|null = null;\n\nconst interactionEvents: Types.TraceEvents.SyntheticInteractionPair[] = [];\nconst interactionEventsWithNoNesting: Types.TraceEvents.SyntheticInteractionPair[] = [];\nconst eventTimingEndEventsById = new Map<string, Types.TraceEvents.TraceEventEventTimingEnd>();\nconst eventTimingStartEventsForInteractions: Types.TraceEvents.TraceEventEventTimingBegin[] = [];\nlet handlerState = HandlerState.UNINITIALIZED;\n\nexport function reset(): void {\n  allEvents.length = 0;\n  interactionEvents.length = 0;\n  eventTimingStartEventsForInteractions.length = 0;\n  eventTimingEndEventsById.clear();\n  interactionEventsWithNoNesting.length = 0;\n  longestInteractionEvent = null;\n  handlerState = HandlerState.INITIALIZED;\n}\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('Handler is not initialized');\n  }\n\n  if (!Types.TraceEvents.isTraceEventEventTiming(event)) {\n    return;\n  }\n\n  if (Types.TraceEvents.isTraceEventEventTimingEnd(event)) {\n    // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.\n    eventTimingEndEventsById.set(event.id, event);\n  }\n\n  allEvents.push(event);\n\n  // From this point on we want to find events that represent interactions.\n  // These events are always start events - those are the ones that contain all\n  // the metadata about the interaction.\n  if (!event.args.data || !Types.TraceEvents.isTraceEventEventTimingStart(event)) {\n    return;\n  }\n  const {duration, interactionId} = event.args.data;\n  // We exclude events for the sake of interactions if:\n  // 1. They have no duration.\n  // 2. They have no interactionId\n  // 3. They have an interactionId of 0: this indicates that it's not an\n  //    interaction that we care about because it hasn't had its own interactionId\n  //    set (0 is the default on the backend).\n  // See: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/responsiveness_metrics.cc;l=133;drc=40c209a9c365ebb9f16fb99dfe78c7fe768b9594\n\n  if (duration < 1 || interactionId === undefined || interactionId === 0) {\n    return;\n  }\n\n  // Store the start event. In the finalize() function we will pair this with\n  // its end event and create the synthetic interaction event.\n  eventTimingStartEventsForInteractions.push(event);\n}\n\n/**\n * See https://web.dev/better-responsiveness-metric/#interaction-types for the\n * table that defines these sets.\n **/\nconst pointerEventTypes = new Set([\n  'pointerdown',\n  'touchstart',\n  'pointerup',\n  'touchend',\n  'mousedown',\n  'mouseup',\n  'click',\n]);\n\nconst keyboardEventTypes = new Set([\n  'keydown',\n  'keypress',\n  'keyup',\n]);\n\nexport type InteractionCategory = 'KEYBOARD'|'POINTER'|'OTHER';\nexport function categoryOfInteraction(interaction: Types.TraceEvents.SyntheticInteractionPair): InteractionCategory {\n  if (pointerEventTypes.has(interaction.type)) {\n    return 'POINTER';\n  }\n  if (keyboardEventTypes.has(interaction.type)) {\n    return 'KEYBOARD';\n  }\n\n  return 'OTHER';\n}\n\n/**\n * We define a set of interactions as nested where:\n * 1. Their end times align.\n * 2. The longest interaction's start time is earlier than all other\n * interactions with the same end time.\n * 3. The interactions are of the same category [each interaction is either\n * categorised as keyboard, or pointer.]\n *\n * =============A=[pointerup]=\n *        ====B=[pointerdown]=\n *        ===C=[pointerdown]==\n *         ===D=[pointerup]===\n *\n * In this example, B, C and D are all nested and therefore should not be\n * returned from this function.\n *\n * However, in this example we would only consider B nested (under A) and D\n * nested (under C). A and C both stay because they are of different types.\n * ========A=[keydown]====\n *   =======B=[keyup]=====\n *    ====C=[pointerdown]=\n *         =D=[pointerup]=\n **/\nexport function removeNestedInteractions(interactions: readonly Types.TraceEvents.SyntheticInteractionPair[]):\n    readonly Types.TraceEvents.SyntheticInteractionPair[] {\n  /**\n   * Because we nest events only that are in the same category, we store the\n   * longest event for a given end time by category.\n   **/\n  const earliestEventForEndTimePerCategory:\n      Record<InteractionCategory, Map<Types.Timing.MicroSeconds, Types.TraceEvents.SyntheticInteractionPair>> = {\n        POINTER: new Map(),\n        KEYBOARD: new Map(),\n        OTHER: new Map(),\n      };\n\n  function storeEventIfEarliestForCategoryAndEndTime(interaction: Types.TraceEvents.SyntheticInteractionPair): void {\n    const category = categoryOfInteraction(interaction);\n    const earliestEventForEndTime = earliestEventForEndTimePerCategory[category];\n    const endTime = Types.Timing.MicroSeconds(interaction.ts + interaction.dur);\n\n    const earliestCurrentEvent = earliestEventForEndTime.get(endTime);\n    if (!earliestCurrentEvent) {\n      earliestEventForEndTime.set(endTime, interaction);\n      return;\n    }\n    if (interaction.ts < earliestCurrentEvent.ts) {\n      earliestEventForEndTime.set(endTime, interaction);\n    } else if (\n        interaction.ts === earliestCurrentEvent.ts &&\n        interaction.interactionId === earliestCurrentEvent.interactionId) {\n      // We have seen in traces that the same interaction can have multiple\n      // events (e.g. a 'click' and a 'pointerdown'). Often only one of these\n      // events will have an event handler bound to it which caused delay on\n      // the main thread, and the others will not. This leads to a situation\n      // where if we pick one of the events that had no event handler, its\n      // processing time (processingEnd - processingStart) will be 0, but if we\n      // had picked the event that had the slow event handler, we would show\n      // correctly the main thread delay due to the event handler.\n      // So, if we find events with the same interactionId and the same\n      // begin/end times, we pick the one with the largest (processingEnd -\n      // processingStart) time in order to make sure we find the event with the\n      // worst main thread delay, as that is the one the user should care\n      // about.\n      const currentEventProcessingTime = earliestCurrentEvent.processingEnd - earliestCurrentEvent.processingStart;\n      const newEventProcessingTime = interaction.processingEnd - interaction.processingStart;\n\n      // Use the new interaction if it has a longer processing time than the existing one.\n      if (newEventProcessingTime > currentEventProcessingTime) {\n        earliestEventForEndTime.set(endTime, interaction);\n      }\n    }\n\n    // Maximize the processing time based on the \"children\" interactions.\n    // We pick the earliest start processing time, and the latest end\n    // processing time to avoid under-reporting.\n    if (interaction.processingStart < earliestCurrentEvent.processingStart) {\n      earliestCurrentEvent.processingStart = interaction.processingStart;\n      writeSyntheticTimespans(earliestCurrentEvent);\n    }\n    if (interaction.processingEnd > earliestCurrentEvent.processingEnd) {\n      earliestCurrentEvent.processingEnd = interaction.processingEnd;\n      writeSyntheticTimespans(earliestCurrentEvent);\n    }\n  }\n\n  for (const interaction of interactions) {\n    storeEventIfEarliestForCategoryAndEndTime(interaction);\n  }\n\n  // Combine all the events that we have kept from all the per-category event\n  // maps back into an array and sort them by timestamp.\n  const keptEvents = Object.values(earliestEventForEndTimePerCategory)\n                         .flatMap(eventsByEndTime => Array.from(eventsByEndTime.values()));\n  keptEvents.sort((eventA, eventB) => {\n    return eventA.ts - eventB.ts;\n  });\n  return keptEvents;\n}\n\nfunction writeSyntheticTimespans(event: Types.TraceEvents.SyntheticInteractionPair): void {\n  const startEvent = event.args.data.beginEvent;\n  const endEvent = event.args.data.endEvent;\n\n  event.inputDelay = Types.Timing.MicroSeconds(event.processingStart - startEvent.ts);\n  event.mainThreadHandling = Types.Timing.MicroSeconds(event.processingEnd - event.processingStart);\n  event.presentationDelay = Types.Timing.MicroSeconds(endEvent.ts - event.processingEnd);\n}\n\nexport async function finalize(): Promise<void> {\n  // For each interaction start event, find the async end event by the ID, and then create the Synthetic Interaction event.\n  for (const interactionStartEvent of eventTimingStartEventsForInteractions) {\n    const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);\n    if (!endEvent) {\n      // If we cannot find an end event, bail and drop this event.\n      continue;\n    }\n    if (!interactionStartEvent.args.data?.type || !interactionStartEvent.args.data?.interactionId) {\n      // A valid interaction event that we care about has to have a type (e.g.\n      // pointerdown, keyup).\n      //\n      // We also need to ensure it has an interactionId. We already checked\n      // this in the handleEvent() function, but we do it here also to satisfy\n      // TypeScript.\n      continue;\n    }\n\n    // In the future we will add microsecond timestamps to the trace events,\n    // but until then we can use the millisecond precision values that are in\n    // the trace event. To adjust them to be relative to the event.ts and the\n    // trace timestamps, for both processingStart and processingEnd we subtract\n    // the event timestamp (NOT event.ts, but the timeStamp millisecond value\n    // emitted in args.data), and then add that value to the event.ts. This\n    // will give us a processingStart and processingEnd time in microseconds\n    // that is relative to event.ts, and can be used when drawing boxes.\n    // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.\n    const processingStartRelativeToTraceTime = Types.Timing.MicroSeconds(\n        Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingStart) -\n            Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp) +\n            interactionStartEvent.ts,\n    );\n\n    const processingEndRelativeToTraceTime = Types.Timing.MicroSeconds(\n        (Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.processingEnd) -\n         Helpers.Timing.millisecondsToMicroseconds(interactionStartEvent.args.data.timeStamp)) +\n        interactionStartEvent.ts);\n\n    const interactionEvent: Types.TraceEvents.SyntheticInteractionPair = {\n      // Use the start event to define the common fields.\n      cat: interactionStartEvent.cat,\n      name: interactionStartEvent.name,\n      pid: interactionStartEvent.pid,\n      tid: interactionStartEvent.tid,\n      ph: interactionStartEvent.ph,\n      processingStart: processingStartRelativeToTraceTime,\n      processingEnd: processingEndRelativeToTraceTime,\n      // These will be set in writeSyntheticTimespans()\n      inputDelay: Types.Timing.MicroSeconds(-1),\n      mainThreadHandling: Types.Timing.MicroSeconds(-1),\n      presentationDelay: Types.Timing.MicroSeconds(-1),\n      args: {\n        data: {\n          beginEvent: interactionStartEvent,\n          endEvent: endEvent,\n        },\n      },\n      ts: interactionStartEvent.ts,\n      dur: Types.Timing.MicroSeconds(endEvent.ts - interactionStartEvent.ts),\n      type: interactionStartEvent.args.data.type,\n      interactionId: interactionStartEvent.args.data.interactionId,\n    };\n    writeSyntheticTimespans(interactionEvent);\n\n    interactionEvents.push(interactionEvent);\n  }\n\n  handlerState = HandlerState.FINALIZED;\n  interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));\n\n  // Pick the longest interactions from the set that were not nested, as we\n  // know those are the set of the largest interactions.\n  for (const interactionEvent of interactionEventsWithNoNesting) {\n    if (!longestInteractionEvent || longestInteractionEvent.dur < interactionEvent.dur) {\n      longestInteractionEvent = interactionEvent;\n    }\n  }\n}\n\nexport function data(): UserInteractionsData {\n  return {\n    allEvents: [...allEvents],\n    interactionEvents: [...interactionEvents],\n    interactionEventsWithNoNesting: [...interactionEventsWithNoNesting],\n    longestInteractionEvent,\n    interactionsOverThreshold: new Set(interactionEvents.filter(event => {\n      return event.dur > LONG_INTERACTION_THRESHOLD;\n    })),\n  };\n}\n"]}

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

@@ -0,0 +1,28 @@
+import * as Types from '../types/types.js';
+export interface UserTimingsData {
+    /**
+     * Events triggered with the performance.measure() API.
+     * https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure
+     */
+    performanceMeasures: readonly Types.TraceEvents.SyntheticUserTimingPair[];
+    /**
+     * Events triggered with the performance.mark() API.
+     * https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
+     */
+    performanceMarks: readonly Types.TraceEvents.TraceEventPerformanceMark[];
+    /**
+     * Events triggered with the console.time(), console.timeEnd() and
+     * console.timeLog() API.
+     * https://developer.mozilla.org/en-US/docs/Web/API/console/time
+     */
+    consoleTimings: readonly Types.TraceEvents.SyntheticConsoleTimingPair[];
+    /**
+     * Events triggered with the console.timeStamp() API
+     * https://developer.mozilla.org/en-US/docs/Web/API/console/timeStamp
+     */
+    timestampEvents: readonly Types.TraceEvents.TraceEventTimeStamp[];
+}
+export declare function reset(): void;
+export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
+export declare function finalize(): Promise<void>;
+export declare function data(): UserTimingsData;