devtools-tracing 1.1.0 → 1.2.0

package/lib/front_end/models/trace/handlers/Threads.ts

@@ -1,139 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-//
-import type * as Helpers from '../helpers/helpers.js';
-import type * as Types from '../types/types.js';
-
-import type {AuctionWorkletsData} from './AuctionWorkletsHandler.js';
-import type * as Renderer from './RendererHandler.js';
-import type {HandlerData} from './types.js';
-
-export interface ThreadData {
-  pid: Types.Events.ProcessID;
-  tid: Types.Events.ThreadID;
-  entries: readonly Types.Events.Event[];
-  processIsOnMainFrame: boolean;
-  tree: Helpers.TreeHelpers.TraceEntryTree;
-  type: ThreadType;
-  name: string|null;
-  entryToNode: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>;
-}
-
-export const enum ThreadType {
-  MAIN_THREAD = 'MAIN_THREAD',
-  WORKER = 'WORKER',
-  RASTERIZER = 'RASTERIZER',
-  AUCTION_WORKLET = 'AUCTION_WORKLET',
-  OTHER = 'OTHER',
-  CPU_PROFILE = 'CPU_PROFILE',
-  THREAD_POOL = 'THREAD_POOL',
-}
-
-function getThreadTypeForRendererThread(
-    pid: Types.Events.ProcessID, thread: Renderer.RendererThread,
-    auctionWorkletsData: AuctionWorkletsData): ThreadType {
-  let threadType = ThreadType.OTHER;
-  if (thread.name === 'CrRendererMain') {
-    threadType = ThreadType.MAIN_THREAD;
-  } else if (thread.name === 'DedicatedWorker thread') {
-    threadType = ThreadType.WORKER;
-  } else if (thread.name?.startsWith('CompositorTileWorker')) {
-    threadType = ThreadType.RASTERIZER;
-  } else if (auctionWorkletsData.worklets.has(pid)) {
-    threadType = ThreadType.AUCTION_WORKLET;
-  } else if (thread.name?.startsWith('ThreadPool')) {
-    // TODO(paulirish): perhaps exclude ThreadPoolServiceThread entirely
-    threadType = ThreadType.THREAD_POOL;
-  }
-  return threadType;
-}
-
-export function threadsInRenderer(
-    rendererData: Renderer.RendererHandlerData, auctionWorkletsData: AuctionWorkletsData): readonly ThreadData[] {
-  const foundThreads: ThreadData[] = [];
-  // If we have Renderer threads, we prefer to use those. In the event that a
-  // trace is a CPU Profile trace, we will never have Renderer threads, so we
-  // know if there are no Renderer threads that we can fallback to using the
-  // data from the SamplesHandler.
-  if (rendererData.processes.size) {
-    for (const [pid, process] of rendererData.processes) {
-      for (const [tid, thread] of process.threads) {
-        if (!thread.tree) {
-          // Drop threads where we could not create the tree; this indicates
-          // unexpected data and we won't be able to support all the UI
-          // filtering we need.
-          continue;
-        }
-        const threadType = getThreadTypeForRendererThread(pid, thread, auctionWorkletsData);
-        foundThreads.push({
-          name: thread.name,
-          pid,
-          tid,
-          processIsOnMainFrame: process.isOnMainFrame,
-          entries: thread.entries,
-          tree: thread.tree,
-          type: threadType,
-          entryToNode: rendererData.entryToNode,
-        });
-      }
-    }
-  }
-  return foundThreads;
-}
-
-const threadsInHandlerDataCache = new WeakMap<HandlerData, readonly ThreadData[]>();
-
-/**
- * Given trace parsed data, this helper will return a high level array of
- * ThreadData. This is useful because it allows you to get a list of threads
- * regardless of if the trace is a CPU Profile or a Tracing profile. Thus you
- * can use this helper to iterate over threads in confidence that it will work
- * for both trace types.
- * The resulting data is cached per-trace, so you can safely call this multiple times.
- */
-export function threadsInTrace(handlerData: HandlerData): readonly ThreadData[] {
-  const cached = threadsInHandlerDataCache.get(handlerData);
-  if (cached) {
-    return cached;
-  }
-
-  // If we have Renderer threads, we prefer to use those.
-  const threadsFromRenderer = threadsInRenderer(handlerData.Renderer, handlerData.AuctionWorklets);
-  if (threadsFromRenderer.length) {
-    threadsInHandlerDataCache.set(handlerData, threadsFromRenderer);
-    return threadsFromRenderer;
-  }
-
-  // If it's a CPU Profile trace, there will be no Renderer threads.
-  // We can fallback to using the data from the SamplesHandler.
-  const foundThreads: ThreadData[] = [];
-  if (handlerData.Samples.profilesInProcess.size) {
-    for (const [pid, process] of handlerData.Samples.profilesInProcess) {
-      for (const [tid, thread] of process) {
-        if (!thread.profileTree) {
-          // Drop threads where we could not create the tree; this indicates
-          // unexpected data and we won't be able to support all the UI
-          // filtering we need.
-          continue;
-        }
-
-        foundThreads.push({
-          pid,
-          tid,
-          // CPU Profile threads do not have a name.
-          name: null,
-          entries: thread.profileCalls,
-          // There is no concept of a "Main Frame" in a CPU profile.
-          processIsOnMainFrame: false,
-          tree: thread.profileTree,
-          type: ThreadType.CPU_PROFILE,
-          entryToNode: handlerData.Samples.entryToNode,
-        });
-      }
-    }
-  }
-
-  threadsInHandlerDataCache.set(handlerData, foundThreads);
-  return foundThreads;
-}

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

@@ -1,400 +0,0 @@
-// Copyright 2022 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Platform from '../../../core/platform/platform.js';
-import * as Helpers from '../helpers/helpers.js';
-import * as Types from '../types/types.js';
-
-import {data as metaHandlerData} from './MetaHandler.js';
-import {ScoreClassification} from './PageLoadMetricsHandler.js';
-import type {HandlerName} from './types.js';
-
-// This handler gathers EventTimings into Interactions, which we use to show
-// interactions and highlight long interactions to the user, along with INP.
-
-let beginCommitCompositorFrameEvents: Types.Events.BeginCommitCompositorFrame[] = [];
-let parseMetaViewportEvents: Types.Events.ParseMetaViewport[] = [];
-
-export const LONG_INTERACTION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(200));
-
-const INP_GOOD_TIMING = LONG_INTERACTION_THRESHOLD;
-const INP_MEDIUM_TIMING = Helpers.Timing.milliToMicro(Types.Timing.Milli(500));
-
-export interface UserInteractionsData {
-  /** All the BeginCommitCompositorFrame events we found in the trace */
-  beginCommitCompositorFrameEvents: readonly Types.Events.BeginCommitCompositorFrame[];
-  /** All the ParseMetaViewport events we found in the trace */
-  parseMetaViewportEvents: readonly Types.Events.ParseMetaViewport[];
-  /**
-   * All the interaction events we found in the trace that had an
-   * interactionId and a duration > 0
-   **/
-  interactionEvents: readonly Types.Events.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.Events.SyntheticInteractionPair[];
-  // The longest duration interaction event. Can be null if the trace has no interaction events.
-  longestInteractionEvent: Readonly<Types.Events.SyntheticInteractionPair>|null;
-  // All interactions that went over the interaction threshold (200ms, see https://web.dev/inp/)
-  interactionsOverThreshold: Readonly<Set<Types.Events.SyntheticInteractionPair>>;
-}
-
-let longestInteractionEvent: Types.Events.SyntheticInteractionPair|null = null;
-
-let interactionEvents: Types.Events.SyntheticInteractionPair[] = [];
-let interactionEventsWithNoNesting: Types.Events.SyntheticInteractionPair[] = [];
-let eventTimingStartEventsForInteractions: Types.Events.EventTimingBegin[] = [];
-let eventTimingEndEventsForInteractions: Types.Events.EventTimingEnd[] = [];
-
-export function reset(): void {
-  beginCommitCompositorFrameEvents = [];
-  parseMetaViewportEvents = [];
-  interactionEvents = [];
-  eventTimingStartEventsForInteractions = [];
-  eventTimingEndEventsForInteractions = [];
-  interactionEventsWithNoNesting = [];
-  longestInteractionEvent = null;
-}
-
-export function handleEvent(event: Types.Events.Event): void {
-  if (Types.Events.isBeginCommitCompositorFrame(event)) {
-    beginCommitCompositorFrameEvents.push(event);
-    return;
-  }
-
-  if (Types.Events.isParseMetaViewport(event)) {
-    parseMetaViewportEvents.push(event);
-    return;
-  }
-
-  if (!Types.Events.isEventTiming(event)) {
-    return;
-  }
-
-  if (Types.Events.isEventTimingEnd(event)) {
-    // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.
-    eventTimingEndEventsForInteractions.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.Events.isEventTimingStart(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 type InteractionCategory = 'KEYBOARD'|'POINTER'|'OTHER';
-export function categoryOfInteraction(interaction: Types.Events.SyntheticInteractionPair): InteractionCategory {
-  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]=
- *
- * Additionally, this method will also maximise the processing duration of the
- * events that we keep as non-nested. We want to make sure we give an accurate
- * representation of main thread activity, so if we keep an event + hide its
- * nested children, we set the top level event's processing start &
- * processing end to be the earliest processing start & the latest processing
- * end of its children. This ensures we report a more accurate main thread
- * activity time which is important as we want developers to focus on fixing
- * this.
- **/
-export function removeNestedInteractionsAndSetProcessingTime(
-    interactions: readonly Types.Events.SyntheticInteractionPair[]): readonly Types.Events.SyntheticInteractionPair[] {
-  /**
-   * Because we nest events only that are in the same category, we store the
-   * longest event for a given end time by category.
-   **/
-  const earliestEventForEndTimePerCategory:
-      Record<InteractionCategory, Map<Types.Timing.Micro, Types.Events.SyntheticInteractionPair>> = {
-        POINTER: new Map(),
-        KEYBOARD: new Map(),
-        OTHER: new Map(),
-      };
-
-  function storeEventIfEarliestForCategoryAndEndTime(interaction: Types.Events.SyntheticInteractionPair): void {
-    const category = categoryOfInteraction(interaction);
-    const earliestEventForEndTime = earliestEventForEndTimePerCategory[category];
-    const endTime = Types.Timing.Micro(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 duration (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 currentProcessingDuration = earliestCurrentEvent.processingEnd - earliestCurrentEvent.processingStart;
-      const newProcessingDuration = interaction.processingEnd - interaction.processingStart;
-
-      // Use the new interaction if it has a longer processing duration than the existing one.
-      if (newProcessingDuration > currentProcessingDuration) {
-        earliestEventForEndTime.set(endTime, interaction);
-      }
-    }
-
-    // Maximize the processing duration based on the "children" interactions.
-    // We pick the earliest start processing duration, and the latest end
-    // processing duration 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: Types.Events.SyntheticInteractionPair): void {
-  const startEvent = event.args.data.beginEvent;
-  const endEvent = event.args.data.endEvent;
-
-  event.inputDelay = Types.Timing.Micro(event.processingStart - startEvent.ts);
-  event.mainThreadHandling = Types.Timing.Micro(event.processingEnd - event.processingStart);
-  event.presentationDelay = Types.Timing.Micro(endEvent.ts - event.processingEnd);
-}
-
-export async function finalize(): Promise<void> {
-  const {navigationsByFrameId} = metaHandlerData();
-
-  const beginAndEndEvents = Platform.ArrayUtilities.mergeOrdered(
-                                eventTimingStartEventsForInteractions, eventTimingEndEventsForInteractions,
-                                Helpers.Trace.eventTimeComparator) as Types.Events.EventTimingBeginOrEnd[];
-
-  // Pair up the begin & end events and create synthetic user timing events.
-  const beginEventById = new Map<string, Types.Events.EventTimingBegin[]>();
-  for (const event of beginAndEndEvents) {
-    if (Types.Events.isEventTimingStart(event)) {
-      const forId = beginEventById.get(event.id) ?? [];
-      forId.push(event);
-      beginEventById.set(event.id, forId);
-    } else if (Types.Events.isEventTimingEnd(event)) {
-      const beginEvents = beginEventById.get(event.id) ?? [];
-      const beginEvent = beginEvents.pop();
-      if (!beginEvent) {
-        continue;
-      }
-      const {type, interactionId, timeStamp, processingStart, processingEnd} = beginEvent.args.data;
-      if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
-        // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
-        // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
-        continue;
-      }
-      // In the future we will add microsecond timestamps to the trace events…
-      // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
-      // …but until then we can use the millisecond precision values that are in
-      // the trace event. To adjust them to be relative to the event.ts and the
-      // trace timestamps, for both processingStart and processingEnd we subtract
-      // the event timestamp (NOT event.ts, but the timeStamp millisecond value
-      // emitted in args.data), and then add that value to the event.ts. This
-      // will give us a processingStart and processingEnd time in microseconds
-      // that is relative to event.ts, and can be used when drawing boxes.
-      // There is some inaccuracy here as we are converting milliseconds to
-      // microseconds, but it is good enough until the backend emits more
-      // accurate numbers.
-      const processingStartRelativeToTraceTime = Types.Timing.Micro(
-          Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) + beginEvent.ts,
-      );
-
-      const processingEndRelativeToTraceTime = Types.Timing.Micro(
-          (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) + beginEvent.ts);
-
-      // Ultimate frameId fallback only needed for TSC, see comments in the type.
-      const frameId = beginEvent.args.frame ?? beginEvent.args.data.frame ?? '';
-      const navigation = Helpers.Trace.getNavigationForTraceEvent(beginEvent, frameId, navigationsByFrameId);
-      const navigationId = navigation?.args.data?.navigationId;
-      const interactionEvent =
-          Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
-            // Use the start event to define the common fields.
-            rawSourceEvent: beginEvent,
-            cat: beginEvent.cat,
-            name: beginEvent.name,
-            pid: beginEvent.pid,
-            tid: beginEvent.tid,
-            ph: beginEvent.ph,
-            processingStart: processingStartRelativeToTraceTime,
-            processingEnd: processingEndRelativeToTraceTime,
-            // These will be set in writeSyntheticTimespans()
-            inputDelay: Types.Timing.Micro(-1),
-            mainThreadHandling: Types.Timing.Micro(-1),
-            presentationDelay: Types.Timing.Micro(-1),
-            args: {
-              data: {
-                beginEvent,
-                endEvent: event,
-                frame: frameId,
-                navigationId,
-              },
-            },
-            ts: beginEvent.ts,
-            dur: Types.Timing.Micro(event.ts - beginEvent.ts),
-            type: beginEvent.args.data.type,
-            interactionId: beginEvent.args.data.interactionId,
-          });
-      writeSyntheticTimespans(interactionEvent);
-      interactionEvents.push(interactionEvent);
-    }
-  }
-
-  // Once we gather up all the interactions, we want to remove nested
-  // interactions. Interactions can be nested because one user action (e.g. a
-  // click) will cause a pointerdown, pointerup and click. But we don't want to
-  // fill the interactions track with lots of noise. To fix this, we go through
-  // all the events and remove any nested ones so on the timeline we focus the
-  // user on the most important events, which we define as the longest one. But
-  // this algorithm assumes the events are in ASC order, so we first sort the
-  // set of interactions.
-  Helpers.Trace.sortTraceEventsInPlace(interactionEvents);
-  interactionEventsWithNoNesting.push(...removeNestedInteractionsAndSetProcessingTime(interactionEvents));
-
-  // Pick the longest interactions from the set that were not nested, as we
-  // know those are the set of the largest interactions.
-  for (const interactionEvent of interactionEventsWithNoNesting) {
-    if (!longestInteractionEvent || longestInteractionEvent.dur < interactionEvent.dur) {
-      longestInteractionEvent = interactionEvent;
-    }
-  }
-}
-
-export function data(): UserInteractionsData {
-  return {
-    beginCommitCompositorFrameEvents,
-    parseMetaViewportEvents,
-    interactionEvents,
-    interactionEventsWithNoNesting,
-    longestInteractionEvent,
-    interactionsOverThreshold: new Set(interactionEvents.filter(event => {
-      return event.dur > LONG_INTERACTION_THRESHOLD;
-    })),
-  };
-}
-
-export function deps(): HandlerName[] {
-  return ['Meta'];
-}
-
-/**
- * Classifications sourced from
- * https://web.dev/articles/inp#good-score
- */
-export function scoreClassificationForInteractionToNextPaint(timing: Types.Timing.Micro): ScoreClassification {
-  if (timing <= INP_GOOD_TIMING) {
-    return ScoreClassification.GOOD;
-  }
-
-  if (timing <= INP_MEDIUM_TIMING) {
-    return ScoreClassification.OK;
-  }
-
-  return ScoreClassification.BAD;
-}