@mcp-b/chrome-devtools-mcp 1.1.0 → 1.1.2

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

@@ -0,0 +1,109 @@
+// 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 Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+function threadKey(data) {
+    return `${data.pid}-${data.tid}`;
+}
+// Track all the start + end events. We key them by the PID+TID so we don't
+// accidentally pair across different threads.
+let animationFrameStarts = new Map();
+let animationFrameEnds = new Map();
+// Store all the AnimationFrame::Presentation events. Key them by their ID for
+// easy look-up later on when we associate one to the AnimationFrame event.
+let animationFramePresentations = new Map();
+// The final list of animation frames that we return.
+let animationFrames = [];
+let presentationForFrame = new Map();
+export function reset() {
+    animationFrameStarts = new Map();
+    animationFrameEnds = new Map();
+    animationFrames = [];
+    presentationForFrame = new Map();
+    animationFramePresentations = new Map();
+    isEnabled = false;
+}
+let isEnabled = false;
+export function handleUserConfig(config) {
+    isEnabled = config.enableAnimationsFrameHandler;
+}
+export function handleEvent(event) {
+    if (!isEnabled) {
+        return;
+    }
+    if (Types.Events.isAnimationFrameAsyncStart(event)) {
+        const key = threadKey(event);
+        const existing = animationFrameStarts.get(key) ?? [];
+        existing.push(event);
+        animationFrameStarts.set(key, existing);
+    }
+    else if (Types.Events.isAnimationFrameAsyncEnd(event)) {
+        const key = threadKey(event);
+        const existing = animationFrameEnds.get(key) ?? [];
+        existing.push(event);
+        animationFrameEnds.set(key, existing);
+    }
+    else if (Types.Events.isAnimationFramePresentation(event) && event.args?.id) {
+        animationFramePresentations.set(event.args.id, event);
+    }
+}
+export async function finalize() {
+    // AnimationFrames are represented with begin & end events on a stack; so we
+    // can pair them by walking through the list of start events and pairing with
+    // the same index in the list of end events, once both lists are sorted by
+    // timestamp.
+    // We walk through the set of begin/end events we gathered per pid+tid and
+    // pair those up.
+    // Unfortunately we cannot use the pairing helpers in Helpers.Trace because
+    // only the begin event has an ID; the end event does not. But because we
+    // know that AnimationFrames are sequential and do not overlap, we can pair
+    // up events easily.
+    for (const [key, startEvents] of animationFrameStarts.entries()) {
+        const endEvents = animationFrameEnds.get(key);
+        if (!endEvents) {
+            continue;
+        }
+        Helpers.Trace.sortTraceEventsInPlace(startEvents);
+        Helpers.Trace.sortTraceEventsInPlace(endEvents);
+        for (let i = 0; i < startEvents.length; i++) {
+            const endEvent = endEvents.at(i);
+            if (!endEvent) {
+                // Invalid data: break. We can't pair any other events up.
+                break;
+            }
+            const startEvent = startEvents[i];
+            const syntheticEvent = Helpers.SyntheticEvents.SyntheticEventsManager
+                .registerSyntheticEvent({
+                rawSourceEvent: startEvent,
+                ...startEvent,
+                dur: Types.Timing.Micro(endEvent.ts - startEvent.ts),
+                args: {
+                    data: {
+                        beginEvent: startEvent,
+                        endEvent,
+                    },
+                },
+            });
+            animationFrames.push(syntheticEvent);
+            // AnimationFrame begin events + AnimationFrame::Presentation events share
+            // an args.id, so we can pair them up based on that.
+            const id = startEvent.args?.id;
+            if (id) {
+                const presentationEvent = animationFramePresentations.get(id);
+                if (presentationEvent) {
+                    presentationForFrame.set(syntheticEvent, presentationEvent);
+                }
+            }
+        }
+    }
+}
+export function data() {
+    return {
+        animationFrames,
+        presentationForFrame,
+    };
+}
+export function deps() {
+    return ['Meta'];
+}

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

@@ -0,0 +1,26 @@
+// 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';
+let animations = [];
+let animationsSyntheticEvents = [];
+export function reset() {
+    animations = [];
+    animationsSyntheticEvents = [];
+}
+export function handleEvent(event) {
+    if (Types.Events.isAnimation(event)) {
+        animations.push(event);
+        return;
+    }
+}
+export async function finalize() {
+    const syntheticEvents = Helpers.Trace.createMatchedSortedSyntheticEvents(animations);
+    animationsSyntheticEvents.push(...syntheticEvents);
+}
+export function data() {
+    return {
+        animations: animationsSyntheticEvents,
+    };
+}

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

@@ -0,0 +1,187 @@
+// 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 Platform from '../../../core/platform/platform.js';
+import * as Types from '../types/types.js';
+import { data as flowsHandlerData } from './FlowsHandler.js';
+import { data as rendererHandlerData } from './RendererHandler.js';
+let schedulerToRunEntryPoints = new Map();
+let taskScheduleForTaskRunEvent = new Map();
+let asyncCallToScheduler = new Map();
+let runEntryPointToScheduler = new Map();
+export function reset() {
+    schedulerToRunEntryPoints = new Map();
+    asyncCallToScheduler = new Map();
+    taskScheduleForTaskRunEvent = new Map();
+    runEntryPointToScheduler = new Map();
+}
+export function handleEvent(_) {
+}
+export async function finalize() {
+    const { flows } = flowsHandlerData();
+    const { entryToNode } = rendererHandlerData();
+    // Process async task flows
+    for (const flow of flows) {
+        let maybeAsyncTaskScheduled = flow.at(0);
+        if (!maybeAsyncTaskScheduled) {
+            continue;
+        }
+        if (Types.Events.isDebuggerAsyncTaskRun(maybeAsyncTaskScheduled)) {
+            // Sometimes a AsyncTaskRun event run can incorrectly appear as
+            // initiated by another AsyncTaskRun from Perfetto's flows
+            // perspective.
+            // For example, in this snippet:
+            //
+            // const myTask = console.createTask('hola'); // creates an AsyncTaskSchedule
+            // myTask.run(something); // creates an AsyncTaskRun
+            // myTask.run(somethingElse); // creates an AsyncTaskRun
+            //
+            // or also in this one
+            //
+            // setInterval(something); // creates multiple connected AsyncTaskRun.
+            //
+            // Because the flow id is created based on the task's memory address,
+            // the three events will end up belonging to the same flow (even if
+            // in the frontend we receive it as pairs), and elements in a flow
+            // are connected to their immediately consecutive neighbor.
+            //
+            // To ensure we use the right Schedule event, if the "initiating"
+            // portion of the flow is a Run event, we look for any corresponding
+            // Schedule event that we might have found before.
+            maybeAsyncTaskScheduled = taskScheduleForTaskRunEvent.get(maybeAsyncTaskScheduled);
+        }
+        if (!maybeAsyncTaskScheduled || !Types.Events.isDebuggerAsyncTaskScheduled(maybeAsyncTaskScheduled)) {
+            continue;
+        }
+        const taskName = maybeAsyncTaskScheduled.args.taskName;
+        const asyncTaskRun = flow.at(1);
+        if (!asyncTaskRun || !Types.Events.isDebuggerAsyncTaskRun(asyncTaskRun)) {
+            // Unexpected flow shape, ignore.
+            continue;
+        }
+        // Cache the Schedule event for this Run for future reference.
+        taskScheduleForTaskRunEvent.set(asyncTaskRun, maybeAsyncTaskScheduled);
+        // Get the JS call scheduled the task.
+        const asyncCaller = findNearestJSAncestor(maybeAsyncTaskScheduled, entryToNode);
+        // Get the trace entrypoint for the scheduled task (e.g. FunctionCall, etc.).
+        const asyncEntryPoint = findFirstJsInvocationForAsyncTaskRun(asyncTaskRun, entryToNode);
+        // Store the async relationship between traces to be shown with initiator arrows.
+        // Default to the AsyncTask events in case the JS entrypoints aren't found.
+        runEntryPointToScheduler.set(asyncEntryPoint || asyncTaskRun, { taskName, scheduler: asyncCaller || maybeAsyncTaskScheduled });
+        if (!asyncCaller || !asyncEntryPoint) {
+            // Unexpected async call trace data shape, ignore.
+            continue;
+        }
+        // Set scheduler -> scheduled mapping.
+        // The scheduled being the JS entrypoint
+        const entryPoints = Platform.MapUtilities.getWithDefault(schedulerToRunEntryPoints, asyncCaller, () => []);
+        entryPoints.push(asyncEntryPoint);
+        // Set scheduled -> scheduler mapping.
+        // The scheduled being the JS calls (instead of the entrypoints as
+        // above, for usage ergonomics).
+        const scheduledProfileCalls = findFirstJSCallsForAsyncTaskRun(asyncTaskRun, entryToNode);
+        for (const call of scheduledProfileCalls) {
+            asyncCallToScheduler.set(call, { taskName, scheduler: asyncCaller });
+        }
+    }
+}
+/**
+ * Given a DebuggerAsyncTaskScheduled event, returns its closest
+ * ProfileCall or JS invocation ancestor, which represents the JS call
+ * that scheduled the async task.
+ */
+function findNearestJSAncestor(asyncTaskScheduled, entryToNode) {
+    let node = entryToNode.get(asyncTaskScheduled)?.parent;
+    while (node) {
+        if (Types.Events.isProfileCall(node.entry) || acceptJSInvocationsPredicate(node.entry)) {
+            return node.entry;
+        }
+        node = node.parent;
+    }
+    return null;
+}
+/**
+ * Entrypoints to JS execution in the timeline. We ignore those starting
+ * with 'v8' because they aren't shown in the timeline, and ultimately
+ * this function's output results in "initiated" events, so ideally this
+ * returns events that end up in the flame chart.
+ */
+function acceptJSInvocationsPredicate(event) {
+    const eventIsConsoleRunTask = Types.Events.isConsoleRunTask(event);
+    const eventIsV8EntryPoint = event.name.startsWith('v8') || event.name.startsWith('V8');
+    return Types.Events.isJSInvocationEvent(event) && (eventIsConsoleRunTask || !eventIsV8EntryPoint);
+}
+/**
+ * Given a DebuggerAsyncTaskRun event, returns its closest JS entry
+ * point descendant, which contains the task being scheduled.
+ */
+function findFirstJsInvocationForAsyncTaskRun(asyncTaskRun, entryToNode) {
+    // Ignore descendants of other DebuggerAsyncTaskRuns since they
+    // are part of another async task and have to be handled separately
+    return findFirstDescendantsOfType(asyncTaskRun, entryToNode, acceptJSInvocationsPredicate, Types.Events.isDebuggerAsyncTaskRun)
+        .at(0);
+}
+/**
+ * Given an async task run event, returns the top level call frames
+ * (profile calls) directly called by the async task. This implies that
+ * any profile calls under another async task run event are ignored.
+ * These profile calls represent the JS task being scheduled, AKA
+ * the other part of the async stack.
+ *
+ * For example, here the profile calls "js 1", "js 2" and "js 4" would
+ * be returned:
+ *
+ * |------------------Async Task Run------------------|
+ * |--FunctionCall--|    |--FunctionCall--|
+ * |-js 1-||-js 2-|        |-js 4-|
+ * |-js 3-|
+ *
+ * But here, only "js 1" and "js 2" would be returned:
+ *
+ * |------------------Async Task Run------------------|
+ * |--FunctionCall--|    |------------------------|
+ * |-js 1-||-js 2-|       |---Async Task Run--|
+ * |-js 3-|                |--FunctionCall--|
+ *                          |-js 4-|
+ */
+function findFirstJSCallsForAsyncTaskRun(asyncTaskRun, entryToNode) {
+    // Ignore descendants of other DebuggerAsyncTaskRuns since they
+    // are part of another async task and have to be handled separately
+    return findFirstDescendantsOfType(asyncTaskRun, entryToNode, Types.Events.isProfileCall, Types.Events.isDebuggerAsyncTaskRun);
+}
+/**
+ * Given a root event returns all the first descendants that meet a
+ * predicate condition (predicateAccept) while ignoring subtrees whose
+ * top event meets an ignore condition (predicateIgnore).
+ */
+function findFirstDescendantsOfType(root, entryToNode, predicateAccept, predicateIgnore) {
+    const node = entryToNode.get(root);
+    if (!node) {
+        return [];
+    }
+    const childrenGroups = [[...node.children]];
+    const firstDescendants = [];
+    for (let i = 0; i < childrenGroups.length; i++) {
+        const siblings = childrenGroups[i];
+        for (let j = 0; j < siblings.length; j++) {
+            const node = siblings[j];
+            if (predicateAccept(node.entry)) {
+                firstDescendants.push(node.entry);
+            }
+            else if (!predicateIgnore(node.entry)) {
+                childrenGroups.push([...node.children]);
+            }
+        }
+    }
+    return firstDescendants;
+}
+export function data() {
+    return {
+        schedulerToRunEntryPoints,
+        asyncCallToScheduler,
+        runEntryPointToScheduler,
+    };
+}
+export function deps() {
+    return ['Renderer', 'Flows'];
+}

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

@@ -0,0 +1,162 @@
+// 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 * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+/**
+ * There are two metadata events that we care about.
+ * => AuctionWorkletRunningInProcess tells us which process the Auction Worklet
+ *    has taken to run in.
+ * => AuctionWorkletDoneWithProcess tells us when the worklet is done with that
+ *    process. This is less useful - but in the future we might want to surface
+ *    this information so we still parse and return the event.
+ *
+ * It is important to note that the top level PID on these events is NOT the
+ * PID that the worklet is running on; instead we have to look at its
+ * args.data.pid property, which is the PID of the process that it is running
+ * on.
+ *
+ * For any given RunningInProcess event, we would typically expect to see a
+ * DoneWithProcess event, however this is not guaranteed, especially as users
+ * can record any chunk of time in DevTools.
+ *
+ * Similarly, it is also possible to see a DoneWithProcess event without a
+ * RunningInProcess event, if the user started recording after the auction
+ * worklets started. Therefore we are happy to create
+ * SyntheticAuctionWorklets as long as we see just one of these events.
+ *
+ * If we do get two events and need to pair them, we can use the
+ * args.data.target property, which is a string ID shared by both
+ * events.
+ */
+let runningInProcessEvents = new Map();
+let doneWithProcessEvents = new Map();
+// Keyed by the PID defined in  `args.data.pid` on AuctionWorklet trace events..
+let createdSyntheticEvents = new Map();
+// Each AuctonWorklet takes over a process and has 2 threads (that we care
+// about and want to show as tracks):
+// 1. A CrUtilityMain thread which is known as the "control process".
+// 2. A AuctionV8HelperThread which is the actual auction worklet and will be
+//    either a "Seller" or a "Bidder"
+// To detect these we look for the metadata thread_name events. We key these by
+// PID so that we can easily look them up later without having to loop through.
+let utilityThreads = new Map();
+let v8HelperThreads = new Map();
+export function reset() {
+    runningInProcessEvents = new Map();
+    doneWithProcessEvents = new Map();
+    createdSyntheticEvents = new Map();
+    utilityThreads = new Map();
+    v8HelperThreads = new Map();
+}
+export function handleEvent(event) {
+    if (Types.Events.isAuctionWorkletRunningInProcess(event)) {
+        runningInProcessEvents.set(event.args.data.pid, event);
+        return;
+    }
+    if (Types.Events.isAuctionWorkletDoneWithProcess(event)) {
+        doneWithProcessEvents.set(event.args.data.pid, event);
+        return;
+    }
+    if (Types.Events.isThreadName(event)) {
+        if (event.args.name === 'auction_worklet.CrUtilityMain') {
+            utilityThreads.set(event.pid, event);
+            return;
+        }
+        if (event.args.name === 'AuctionV8HelperThread') {
+            v8HelperThreads.set(event.pid, event);
+        }
+    }
+}
+function workletType(input) {
+    switch (input) {
+        case 'seller':
+            return "seller" /* Types.Events.AuctionWorkletType.SELLER */;
+        case 'bidder':
+            return "bidder" /* Types.Events.AuctionWorkletType.BIDDER */;
+        default:
+            return "unknown" /* Types.Events.AuctionWorkletType.UNKNOWN */;
+    }
+}
+/**
+ * We cannot make the full event without knowing the type of event, but we can
+ * create everything other than the `args` field, as those are identical
+ * regardless of the type of event.
+ */
+function makeSyntheticEventBase(event) {
+    return Helpers.SyntheticEvents.SyntheticEventsManager
+        .registerSyntheticEvent({
+        rawSourceEvent: event,
+        name: 'SyntheticAuctionWorklet',
+        s: "t" /* Types.Events.Scope.THREAD */,
+        cat: event.cat,
+        tid: event.tid,
+        ts: event.ts,
+        ph: "I" /* Types.Events.Phase.INSTANT */,
+        pid: event.args.data.pid,
+        host: event.args.data.host,
+        target: event.args.data.target,
+        type: workletType(event.args.data.type),
+    });
+}
+export async function finalize() {
+    // Loop through the utility threads we found to create the worklet events. We
+    // expect each worklet to have a utility thread, so we can use them as the
+    // root of our list of worklets.
+    for (const [pid, utilityThreadNameEvent] of utilityThreads) {
+        const v8HelperEvent = v8HelperThreads.get(pid);
+        if (!v8HelperEvent) {
+            // Bad trace data - AuctionWorklets are expected to always have both threads.
+            continue;
+        }
+        const runningEvent = runningInProcessEvents.get(pid);
+        const doneWithEvent = doneWithProcessEvents.get(pid);
+        // We can create a worklet from either the runningEvent or doneWithEvent -
+        // we do not need both. We cannot express that to TypeScript with an early
+        // return here, so instead we set the event initially to null, and then
+        // create it from either the running event or the doneWith event. If it is
+        // still null after this, that means neither event was found, and we drop
+        // the worklet as we do not have enough information to create the synthetic
+        // event.
+        let syntheticEvent = null;
+        if (runningEvent) {
+            syntheticEvent = {
+                ...makeSyntheticEventBase(runningEvent),
+                args: {
+                    data: {
+                        runningInProcessEvent: runningEvent,
+                        utilityThread: utilityThreadNameEvent,
+                        v8HelperThread: v8HelperEvent,
+                    },
+                },
+            };
+            if (doneWithEvent) {
+                syntheticEvent.args.data.doneWithProcessEvent = doneWithEvent;
+            }
+        }
+        else if (doneWithEvent) {
+            syntheticEvent = {
+                ...makeSyntheticEventBase(doneWithEvent),
+                args: {
+                    data: {
+                        doneWithProcessEvent: doneWithEvent,
+                        utilityThread: utilityThreadNameEvent,
+                        v8HelperThread: v8HelperEvent,
+                    },
+                },
+            };
+            if (runningEvent) {
+                syntheticEvent.args.data.runningInProcessEvent = runningEvent;
+            }
+        }
+        if (syntheticEvent === null) {
+            continue;
+        }
+        createdSyntheticEvents.set(pid, syntheticEvent);
+    }
+}
+export function data() {
+    return {
+        worklets: createdSyntheticEvents,
+    };
+}

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

@@ -0,0 +1,21 @@
+// Copyright 2025 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 Types from '../types/types.js';
+let domStatsByFrameId = new Map();
+export function reset() {
+    domStatsByFrameId = new Map();
+}
+export function handleEvent(event) {
+    if (!Types.Events.isDOMStats(event)) {
+        return;
+    }
+    const domStatEvents = Platform.MapUtilities.getWithDefault(domStatsByFrameId, event.args.data.frame, () => []);
+    domStatEvents.push(event);
+}
+export async function finalize() {
+}
+export function data() {
+    return { domStatsByFrameId };
+}