@paulirish/trace_engine 0.0.9 → 0.0.11

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

@@ -0,0 +1,57 @@
+import * as Types from '../types/types.js';
+export declare const LONG_INTERACTION_THRESHOLD: Types.Timing.MicroSeconds;
+export interface UserInteractionsData {
+    /** All the user events we found in the trace */
+    allEvents: readonly Types.TraceEvents.TraceEventEventTiming[];
+    /** All the interaction events we found in the trace that had an
+     * interactionId and a duration > 0
+     **/
+    interactionEvents: readonly Types.TraceEvents.SyntheticInteractionPair[];
+    /** If the user rapidly generates interaction events (think typing into a
+     * text box), in the UI we only really want to show the user the longest
+     * interaction in that set.
+     * For example picture interactions like this:
+     * ===[interaction A]==========
+     *       =[interaction B]======
+     *            =[interaction C]=
+     *
+     * These events all end at the same time, and so in this instance we only want
+     * to show the first interaction A on the timeline, as that is the longest one
+     * and the one the developer should be focusing on. So this array of events is
+     * all the interaction events filtered down, removing any nested interactions
+     * entirely.
+     **/
+    interactionEventsWithNoNesting: readonly Types.TraceEvents.SyntheticInteractionPair[];
+    longestInteractionEvent: Readonly<Types.TraceEvents.SyntheticInteractionPair> | null;
+    interactionsOverThreshold: Readonly<Set<Types.TraceEvents.SyntheticInteractionPair>>;
+}
+export declare function reset(): void;
+export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
+export type InteractionCategory = 'KEYBOARD' | 'POINTER' | 'OTHER';
+export declare function categoryOfInteraction(interaction: Types.TraceEvents.SyntheticInteractionPair): InteractionCategory;
+/**
+ * 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 declare function removeNestedInteractions(interactions: readonly Types.TraceEvents.SyntheticInteractionPair[]): readonly Types.TraceEvents.SyntheticInteractionPair[];
+export declare function finalize(): Promise<void>;
+export declare function data(): UserInteractionsData;

package/models/trace/handlers/UserInteractionsHandler.js

@@ -0,0 +1,267 @@
+// 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 = new Map();
+const eventTimingStartEventsForInteractions = [];
+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 = 2 /* HandlerState.INITIALIZED */;
+}
+export function handleEvent(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);
+}
+/**
+ * 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 = 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';
+}
+/**
+ * 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);
+        }
+    }
+    for (const interaction of interactions) {
+        storeEventIfEarliestForCategoryAndEndTime(interaction);
+    }
+    // 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);
+}
+export async function finalize() {
+    // 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);
+    }
+    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;
+        }
+    }
+}
+export function data() {
+    return {
+        allEvents: [...allEvents],
+        interactionEvents: [...interactionEvents],
+        interactionEventsWithNoNesting: [...interactionEventsWithNoNesting],
+        longestInteractionEvent,
+        interactionsOverThreshold: new Set(interactionEvents.filter(event => {
+            return event.dur > LONG_INTERACTION_THRESHOLD;
+        })),
+    };
+}
+//# sourceMappingURL=UserInteractionsHandler.js.map

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

@@ -0,0 +1 @@
+{"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;

package/models/trace/handlers/UserTimingsHandler.js

@@ -0,0 +1,108 @@
+// 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';
+/**
+ * IMPORTANT!
+ * See UserTimings.md in this directory for some handy documentation on
+ * UserTimings and the trace events we parse currently.
+ **/
+let syntheticEvents = [];
+const performanceMeasureEvents = [];
+const performanceMarkEvents = [];
+const consoleTimings = [];
+const timestampEvents = [];
+let handlerState = 1 /* HandlerState.UNINITIALIZED */;
+export function reset() {
+    syntheticEvents.length = 0;
+    performanceMeasureEvents.length = 0;
+    performanceMarkEvents.length = 0;
+    consoleTimings.length = 0;
+    timestampEvents.length = 0;
+    handlerState = 2 /* HandlerState.INITIALIZED */;
+}
+const resourceTimingNames = [
+    'workerStart',
+    'redirectStart',
+    'redirectEnd',
+    'fetchStart',
+    'domainLookupStart',
+    'domainLookupEnd',
+    'connectStart',
+    'connectEnd',
+    'secureConnectionStart',
+    'requestStart',
+    'responseStart',
+    'responseEnd',
+];
+const navTimingNames = [
+    'navigationStart',
+    'unloadEventStart',
+    'unloadEventEnd',
+    'redirectStart',
+    'redirectEnd',
+    'fetchStart',
+    'commitNavigationEnd',
+    'domainLookupStart',
+    'domainLookupEnd',
+    'connectStart',
+    'connectEnd',
+    'secureConnectionStart',
+    'requestStart',
+    'responseStart',
+    'responseEnd',
+    'domLoading',
+    'domInteractive',
+    'domContentLoadedEventStart',
+    'domContentLoadedEventEnd',
+    'domComplete',
+    'loadEventStart',
+    'loadEventEnd',
+];
+export function handleEvent(event) {
+    if (handlerState !== 2 /* HandlerState.INITIALIZED */) {
+        throw new Error('UserTimings handler is not initialized');
+    }
+    // These are events dispatched under the blink.user_timing category
+    // but that the user didn't add. Filter them out so that they do not
+    // Appear in the timings track (they still appear in the main thread
+    // flame chart).
+    const ignoredNames = [...resourceTimingNames, ...navTimingNames];
+    if (ignoredNames.includes(event.name)) {
+        return;
+    }
+    if (Types.TraceEvents.isTraceEventPerformanceMeasure(event)) {
+        performanceMeasureEvents.push(event);
+        return;
+    }
+    if (Types.TraceEvents.isTraceEventPerformanceMark(event)) {
+        performanceMarkEvents.push(event);
+    }
+    if (Types.TraceEvents.isTraceEventConsoleTime(event)) {
+        consoleTimings.push(event);
+    }
+    if (Types.TraceEvents.isTraceEventTimeStamp(event)) {
+        timestampEvents.push(event);
+    }
+}
+export async function finalize() {
+    if (handlerState !== 2 /* HandlerState.INITIALIZED */) {
+        throw new Error('UserTimings handler is not initialized');
+    }
+    const asyncEvents = [...performanceMeasureEvents, ...consoleTimings];
+    syntheticEvents = Helpers.Trace.createMatchedSortedSyntheticEvents(asyncEvents);
+    handlerState = 3 /* HandlerState.FINALIZED */;
+}
+export function data() {
+    if (handlerState !== 3 /* HandlerState.FINALIZED */) {
+        throw new Error('UserTimings handler is not finalized');
+    }
+    return {
+        performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing'),
+        consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console'),
+        performanceMarks: [...performanceMarkEvents],
+        timestampEvents: [...timestampEvents],
+    };
+}
+//# sourceMappingURL=UserTimingsHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserTimingsHandler.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/handlers/UserTimingsHandler.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/**\n * IMPORTANT!\n * See UserTimings.md in this directory for some handy documentation on\n * UserTimings and the trace events we parse currently.\n **/\nlet syntheticEvents: Types.TraceEvents.SyntheticEventPair<Types.TraceEvents.TraceEventPairableAsync>[] = [];\nconst performanceMeasureEvents: Types.TraceEvents.TraceEventPerformanceMeasure[] = [];\nconst performanceMarkEvents: Types.TraceEvents.TraceEventPerformanceMark[] = [];\n\nconst consoleTimings: (Types.TraceEvents.TraceEventConsoleTimeBegin|Types.TraceEvents.TraceEventConsoleTimeEnd)[] = [];\n\nconst timestampEvents: Types.TraceEvents.TraceEventTimeStamp[] = [];\n\nexport interface UserTimingsData {\n  /**\n   * Events triggered with the performance.measure() API.\n   * https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure\n   */\n  performanceMeasures: readonly Types.TraceEvents.SyntheticUserTimingPair[];\n  /**\n   * Events triggered with the performance.mark() API.\n   * https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark\n   */\n  performanceMarks: readonly Types.TraceEvents.TraceEventPerformanceMark[];\n  /**\n   * Events triggered with the console.time(), console.timeEnd() and\n   * console.timeLog() API.\n   * https://developer.mozilla.org/en-US/docs/Web/API/console/time\n   */\n  consoleTimings: readonly Types.TraceEvents.SyntheticConsoleTimingPair[];\n  /**\n   * Events triggered with the console.timeStamp() API\n   * https://developer.mozilla.org/en-US/docs/Web/API/console/timeStamp\n   */\n  timestampEvents: readonly Types.TraceEvents.TraceEventTimeStamp[];\n}\nlet handlerState = HandlerState.UNINITIALIZED;\n\nexport function reset(): void {\n  syntheticEvents.length = 0;\n  performanceMeasureEvents.length = 0;\n  performanceMarkEvents.length = 0;\n  consoleTimings.length = 0;\n  timestampEvents.length = 0;\n  handlerState = HandlerState.INITIALIZED;\n}\n\nconst resourceTimingNames = [\n  'workerStart',\n  'redirectStart',\n  'redirectEnd',\n  'fetchStart',\n  'domainLookupStart',\n  'domainLookupEnd',\n  'connectStart',\n  'connectEnd',\n  'secureConnectionStart',\n  'requestStart',\n  'responseStart',\n  'responseEnd',\n];\nconst navTimingNames = [\n  'navigationStart',\n  'unloadEventStart',\n  'unloadEventEnd',\n  'redirectStart',\n  'redirectEnd',\n  'fetchStart',\n  'commitNavigationEnd',\n  'domainLookupStart',\n  'domainLookupEnd',\n  'connectStart',\n  'connectEnd',\n  'secureConnectionStart',\n  'requestStart',\n  'responseStart',\n  'responseEnd',\n  'domLoading',\n  'domInteractive',\n  'domContentLoadedEventStart',\n  'domContentLoadedEventEnd',\n  'domComplete',\n  'loadEventStart',\n  'loadEventEnd',\n];\n\nexport function handleEvent(event: Types.TraceEvents.TraceEventData): void {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('UserTimings handler is not initialized');\n  }\n\n  // These are events dispatched under the blink.user_timing category\n  // but that the user didn't add. Filter them out so that they do not\n  // Appear in the timings track (they still appear in the main thread\n  // flame chart).\n  const ignoredNames = [...resourceTimingNames, ...navTimingNames];\n  if (ignoredNames.includes(event.name)) {\n    return;\n  }\n\n  if (Types.TraceEvents.isTraceEventPerformanceMeasure(event)) {\n    performanceMeasureEvents.push(event);\n    return;\n  }\n  if (Types.TraceEvents.isTraceEventPerformanceMark(event)) {\n    performanceMarkEvents.push(event);\n  }\n  if (Types.TraceEvents.isTraceEventConsoleTime(event)) {\n    consoleTimings.push(event);\n  }\n  if (Types.TraceEvents.isTraceEventTimeStamp(event)) {\n    timestampEvents.push(event);\n  }\n}\n\nexport async function finalize(): Promise<void> {\n  if (handlerState !== HandlerState.INITIALIZED) {\n    throw new Error('UserTimings handler is not initialized');\n  }\n\n  const asyncEvents = [...performanceMeasureEvents, ...consoleTimings];\n  syntheticEvents = Helpers.Trace.createMatchedSortedSyntheticEvents(asyncEvents);\n  handlerState = HandlerState.FINALIZED;\n}\n\nexport function data(): UserTimingsData {\n  if (handlerState !== HandlerState.FINALIZED) {\n    throw new Error('UserTimings handler is not finalized');\n  }\n\n  return {\n    performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing') as\n        Types.TraceEvents.SyntheticUserTimingPair[],\n    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as\n        Types.TraceEvents.SyntheticConsoleTimingPair[],\n    performanceMarks: [...performanceMarkEvents],\n    timestampEvents: [...timestampEvents],\n  };\n}\n"]}

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

@@ -0,0 +1,14 @@
+import * as Types from '../types/types.js';
+import { type TraceEventHandlerName } from './types.js';
+export interface WarningsData {
+    perEvent: Map<Types.TraceEvents.TraceEventData, Warning[]>;
+    perWarning: Map<Warning, Types.TraceEvents.TraceEventData[]>;
+}
+export type Warning = 'LONG_TASK' | 'IDLE_CALLBACK_OVER_TIME' | 'FORCED_REFLOW' | 'LONG_INTERACTION';
+export declare const FORCED_REFLOW_THRESHOLD: Types.Timing.MicroSeconds;
+export declare const LONG_MAIN_THREAD_TASK_THRESHOLD: Types.Timing.MicroSeconds;
+export declare function reset(): void;
+export declare function handleEvent(event: Types.TraceEvents.TraceEventData): void;
+export declare function deps(): TraceEventHandlerName[];
+export declare function finalize(): Promise<void>;
+export declare function data(): WarningsData;