@mcp-b/chrome-devtools-mcp 1.0.2 → 1.0.3-beta.0

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/SelectorStatsHandler.js

@@ -1,71 +0,0 @@
-// Copyright 2024 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 Types from '../types/types.js';
-let lastRecalcStyleEvent = null;
-let lastInvalidatedNode = null;
-let selectorDataForRecalcStyle = new Map();
-let invalidatedNodeList = new Array();
-export function reset() {
-    lastRecalcStyleEvent = null;
-    lastInvalidatedNode = null;
-    selectorDataForRecalcStyle = new Map();
-    invalidatedNodeList = [];
-}
-export function handleEvent(event) {
-    if (Types.Events.isStyleRecalcInvalidationTracking(event)) {
-        /**
-         * CSS Style substree invalidation
-         * A subtree invalidation comes with two records, 1) a StyleInvalidatorInvalidationTracking
-         * event 2) following with a StyleRecalcInvalidationTracking event. List of selectors and style
-         * sheet ID information is stored in the 1st event. Subtree flag is stored in the 2nd
-         * event.
-         */
-        if (event.args.data.subtree &&
-            event.args.data.reason === "Related style rule" /* Types.Events.StyleRecalcInvalidationReason.RELATED_STYLE_RULE */ &&
-            lastInvalidatedNode && event.args.data.nodeId === lastInvalidatedNode.backendNodeId) {
-            lastInvalidatedNode.subtree = true;
-            return;
-        }
-    }
-    if (Types.Events.isSelectorStats(event) && lastRecalcStyleEvent && event.args.selector_stats) {
-        selectorDataForRecalcStyle.set(lastRecalcStyleEvent, {
-            timings: event.args.selector_stats.selector_timings,
-        });
-        return;
-    }
-    if (Types.Events.isStyleInvalidatorInvalidationTracking(event)) {
-        const selectorList = new Array();
-        event.args.data.selectors?.forEach(selector => {
-            selectorList.push({
-                selector: selector.selector,
-                styleSheetId: selector.style_sheet_id,
-            });
-        });
-        if (selectorList.length > 0) {
-            lastInvalidatedNode = {
-                frame: event.args.data.frame,
-                backendNodeId: event.args.data.nodeId,
-                type: "StyleInvalidatorInvalidationTracking" /* Types.Events.InvalidationEventType.StyleInvalidatorInvalidationTracking */,
-                selectorList,
-                ts: event.ts,
-                tts: event.tts,
-                subtree: false,
-                lastRecalcStyleEventTs: lastRecalcStyleEvent ? lastRecalcStyleEvent.ts : Types.Timing.Micro(0),
-            };
-            invalidatedNodeList.push(lastInvalidatedNode);
-        }
-    }
-    if (Types.Events.isRecalcStyle(event)) {
-        lastRecalcStyleEvent = event;
-        return;
-    }
-}
-export async function finalize() {
-}
-export function data() {
-    return {
-        dataForRecalcStyleEvent: selectorDataForRecalcStyle,
-        invalidatedNodeList,
-    };
-}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/Threads.js

@@ -1,101 +0,0 @@
-function getThreadTypeForRendererThread(pid, thread, auctionWorkletsData) {
-    let threadType = "OTHER" /* ThreadType.OTHER */;
-    if (thread.name === 'CrRendererMain') {
-        threadType = "MAIN_THREAD" /* ThreadType.MAIN_THREAD */;
-    }
-    else if (thread.name === 'DedicatedWorker thread') {
-        threadType = "WORKER" /* ThreadType.WORKER */;
-    }
-    else if (thread.name?.startsWith('CompositorTileWorker')) {
-        threadType = "RASTERIZER" /* ThreadType.RASTERIZER */;
-    }
-    else if (auctionWorkletsData.worklets.has(pid)) {
-        threadType = "AUCTION_WORKLET" /* ThreadType.AUCTION_WORKLET */;
-    }
-    else if (thread.name?.startsWith('ThreadPool')) {
-        // TODO(paulirish): perhaps exclude ThreadPoolServiceThread entirely
-        threadType = "THREAD_POOL" /* ThreadType.THREAD_POOL */;
-    }
-    return threadType;
-}
-export function threadsInRenderer(rendererData, auctionWorkletsData) {
-    const foundThreads = [];
-    // 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();
-/**
- * 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) {
-    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 = [];
-    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: "CPU_PROFILE" /* ThreadType.CPU_PROFILE */,
-                    entryToNode: handlerData.Samples.entryToNode,
-                });
-            }
-        }
-    }
-    threadsInHandlerDataCache.set(handlerData, foundThreads);
-    return foundThreads;
-}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/UserInteractionsHandler.js

@@ -1,317 +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';
-// This handler gathers EventTimings into Interactions, which we use to show
-// interactions and highlight long interactions to the user, along with INP.
-let beginCommitCompositorFrameEvents = [];
-let parseMetaViewportEvents = [];
-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));
-let longestInteractionEvent = null;
-let interactionEvents = [];
-let interactionEventsWithNoNesting = [];
-let eventTimingStartEventsForInteractions = [];
-let eventTimingEndEventsForInteractions = [];
-export function reset() {
-    beginCommitCompositorFrameEvents = [];
-    parseMetaViewportEvents = [];
-    interactionEvents = [];
-    eventTimingStartEventsForInteractions = [];
-    eventTimingEndEventsForInteractions = [];
-    interactionEventsWithNoNesting = [];
-    longestInteractionEvent = null;
-}
-export function handleEvent(event) {
-    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 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]=
- *
- * 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) {
-    /**
-     * 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.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) {
-    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() {
-    const { navigationsByFrameId } = metaHandlerData();
-    const beginAndEndEvents = Platform.ArrayUtilities.mergeOrdered(eventTimingStartEventsForInteractions, eventTimingEndEventsForInteractions, Helpers.Trace.eventTimeComparator);
-    // Pair up the begin & end events and create synthetic user timing events.
-    const beginEventById = new Map();
-    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({
-                // 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() {
-    return {
-        beginCommitCompositorFrameEvents,
-        parseMetaViewportEvents,
-        interactionEvents,
-        interactionEventsWithNoNesting,
-        longestInteractionEvent,
-        interactionsOverThreshold: new Set(interactionEvents.filter(event => {
-            return event.dur > LONG_INTERACTION_THRESHOLD;
-        })),
-    };
-}
-export function deps() {
-    return ['Meta'];
-}
-/**
- * Classifications sourced from
- * https://web.dev/articles/inp#good-score
- */
-export function scoreClassificationForInteractionToNextPaint(timing) {
-    if (timing <= INP_GOOD_TIMING) {
-        return "good" /* ScoreClassification.GOOD */;
-    }
-    if (timing <= INP_MEDIUM_TIMING) {
-        return "ok" /* ScoreClassification.OK */;
-    }
-    return "bad" /* ScoreClassification.BAD */;
-}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/UserTimingsHandler.js

@@ -1,183 +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 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 = [];
-// There are two events dispatched for performance.measure calls: one to
-// represent the measured timing in the tracing clock (which we type as
-// PerformanceMeasure) and another one for the call itself (which we
-// type as UserTimingMeasure). The two events corresponding to the same
-// call are linked together by a common trace_id. The reason two events
-// are dispatched is because the first was originally added with the
-// implementation of the performance.measure API and it uses an
-// overridden timestamp and duration. To prevent breaking potential deps
-// created since then, a second event was added instead of changing the
-// params of the first.
-let measureTraceByTraceId = new Map();
-let performanceMeasureEvents = [];
-let performanceMarkEvents = [];
-let consoleTimings = [];
-let timestampEvents = [];
-export function reset() {
-    syntheticEvents = [];
-    performanceMeasureEvents = [];
-    performanceMarkEvents = [];
-    consoleTimings = [];
-    timestampEvents = [];
-    measureTraceByTraceId = new Map();
-}
-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',
-];
-// 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];
-function getEventTimings(event) {
-    if ('dur' in event) {
-        // It's a SyntheticEventPair.
-        return { start: event.ts, end: Types.Timing.Micro(event.ts + (event.dur ?? 0)) };
-    }
-    if (Types.Events.isConsoleTimeStamp(event)) {
-        const { start, end } = event.args.data || {};
-        if (typeof start === 'number' && typeof end === 'number') {
-            return { start: Types.Timing.Micro(start), end: Types.Timing.Micro(end) };
-        }
-    }
-    // A ConsoleTimeStamp without start/end is just a point in time, so dur is 0.
-    return { start: event.ts, end: event.ts };
-}
-function getEventTrack(event) {
-    if (event.cat === 'blink.user_timing') {
-        // This is a SyntheticUserTimingPair
-        const detailString = event.args.data.beginEvent.args?.detail;
-        if (detailString) {
-            const details = Helpers.Trace.parseDevtoolsDetails(detailString, 'devtools');
-            if (details && 'track' in details) {
-                return details.track;
-            }
-        }
-    }
-    else if (Types.Events.isConsoleTimeStamp(event)) {
-        const track = event.args.data?.track;
-        return typeof track === 'string' ? track : undefined;
-    }
-    // SyntheticConsoleTimingPair does not have track info.
-    return undefined;
-}
-/**
- * Similar to the default {@link Helpers.Trace.eventTimeComparator}
- * but with a twist:
- * In case of equal start and end times, put the second event (within a
- * track) first.
- *
- * Explanation:
- * User timing entries come as trace events dispatched when
- * performance.measure/mark is called. The trace events buffered in
- * devtools frontend are sorted by the start time. If their start time
- * is the same, then the event for the first call will appear first.
- *
- * When entries are meant to be stacked, the corresponding
- * performance.measure calls usually are done in bottom-up direction:
- * calls for children first and for parent later (because the call
- * is usually done when the measured task is over). This means that
- * when two user timing events have the same start and end time, usually
- * the second event is the parent of the first. Hence the switch.
- *
- */
-export function userTimingComparator(a, b, originalArray) {
-    const { start: aStart, end: aEnd } = getEventTimings(a);
-    const { start: bStart, end: bEnd } = getEventTimings(b);
-    const timeDifference = Helpers.Trace.compareBeginAndEnd(aStart, bStart, aEnd, bEnd);
-    if (timeDifference) {
-        return timeDifference;
-    }
-    // Never re-order entries across different tracks.
-    const aTrack = getEventTrack(a);
-    const bTrack = getEventTrack(b);
-    if (aTrack !== bTrack) {
-        return 0; // Preserve current positions.
-    }
-    // Prefer the event located in a further position in the original array.
-    const aIndex = originalArray.indexOf(a);
-    const bIndex = originalArray.indexOf(b);
-    return bIndex - aIndex;
-}
-export function handleEvent(event) {
-    if (ignoredNames.includes(event.name)) {
-        return;
-    }
-    if (Types.Events.isUserTimingMeasure(event)) {
-        measureTraceByTraceId.set(event.args.traceId, event);
-    }
-    if (Types.Events.isPerformanceMeasure(event)) {
-        performanceMeasureEvents.push(event);
-        return;
-    }
-    if (Types.Events.isPerformanceMark(event)) {
-        performanceMarkEvents.push(event);
-    }
-    if (Types.Events.isConsoleTime(event)) {
-        consoleTimings.push(event);
-    }
-    if (Types.Events.isConsoleTimeStamp(event)) {
-        timestampEvents.push(event);
-    }
-}
-export async function finalize() {
-    const asyncEvents = [...performanceMeasureEvents, ...consoleTimings];
-    syntheticEvents = Helpers.Trace.createMatchedSortedSyntheticEvents(asyncEvents);
-    syntheticEvents = syntheticEvents.sort((a, b) => userTimingComparator(a, b, [...syntheticEvents]));
-    timestampEvents = timestampEvents.sort((a, b) => userTimingComparator(a, b, [...timestampEvents]));
-}
-export function data() {
-    return {
-        consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console'),
-        performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing'),
-        performanceMarks: performanceMarkEvents,
-        timestampEvents,
-        measureTraceByTraceId,
-    };
-}