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

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

@@ -0,0 +1,180 @@
+// 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';
+import { data as AsyncJSCallsHandlerData } from './AsyncJSCallsHandler.js';
+import { data as flowsHandlerData } from './FlowsHandler.js';
+let lastScheduleStyleRecalcByFrame = new Map();
+// This tracks the last event that is considered to have invalidated the layout
+// for a given frame.
+// Note that although there is an InvalidateLayout event, there are also other
+// events (ScheduleStyleRecalculation) that could be the reason a layout was
+// invalidated.
+let lastInvalidationEventForFrame = new Map();
+let lastRecalcByFrame = new Map();
+// These two maps store the same data but in different directions.
+// For a given event, tell me what its initiator was. An event can only have one initiator.
+let eventToInitiatorMap = new Map();
+// For a given event, tell me what events it initiated. An event can initiate
+// multiple events, hence why the value for this map is an array.
+let initiatorToEventsMap = new Map();
+let timerInstallEventsById = new Map();
+let requestIdleCallbackEventsById = new Map();
+let webSocketCreateEventsById = new Map();
+let schedulePostTaskCallbackEventsById = new Map();
+export function reset() {
+    lastScheduleStyleRecalcByFrame = new Map();
+    lastInvalidationEventForFrame = new Map();
+    lastRecalcByFrame = new Map();
+    timerInstallEventsById = new Map();
+    eventToInitiatorMap = new Map();
+    initiatorToEventsMap = new Map();
+    requestIdleCallbackEventsById = new Map();
+    webSocketCreateEventsById = new Map();
+    schedulePostTaskCallbackEventsById = new Map();
+}
+function storeInitiator(data) {
+    eventToInitiatorMap.set(data.event, data.initiator);
+    const eventsForInitiator = initiatorToEventsMap.get(data.initiator) || [];
+    eventsForInitiator.push(data.event);
+    initiatorToEventsMap.set(data.initiator, eventsForInitiator);
+}
+/**
+ * IMPORTANT: Before adding support for new initiator relationships in
+ * trace events consider using Perfetto's flow API on the events in
+ * question, so that they get automatically computed.
+ * @see {@link flowsHandlerData}
+ *
+ * The events manually computed here were added before we had support
+ * for flow events. As such they should be migrated to use the flow
+ * API so that no manual parsing is needed.
+ */
+export function handleEvent(event) {
+    if (Types.Events.isScheduleStyleRecalculation(event)) {
+        lastScheduleStyleRecalcByFrame.set(event.args.data.frame, event);
+    }
+    else if (Types.Events.isRecalcStyle(event)) {
+        if (event.args.beginData) {
+            // Store the last RecalcStyle event: we use this when we see an
+            // InvalidateLayout and try to figure out its initiator.
+            lastRecalcByFrame.set(event.args.beginData.frame, event);
+            // If this frame has seen a ScheduleStyleRecalc event, then that event is
+            // considered to be the initiator of this StylesRecalc.
+            const scheduledStyleForFrame = lastScheduleStyleRecalcByFrame.get(event.args.beginData.frame);
+            if (scheduledStyleForFrame) {
+                storeInitiator({
+                    event,
+                    initiator: scheduledStyleForFrame,
+                });
+            }
+        }
+    }
+    else if (Types.Events.isInvalidateLayout(event)) {
+        // By default, the InvalidateLayout event is what triggered the layout invalidation for this frame.
+        let invalidationInitiator = event;
+        // However, if we have not had any prior invalidations for this frame, we
+        // want to consider StyleRecalculation events as they might be the actual
+        // cause of this layout invalidation.
+        if (!lastInvalidationEventForFrame.has(event.args.data.frame)) {
+            // 1. If we have not had an invalidation event for this frame
+            // 2. AND we have had an RecalcStyle for this frame
+            // 3. AND the RecalcStyle event ended AFTER the InvalidateLayout startTime
+            // 4. AND we have an initiator for the RecalcStyle event
+            // 5. Then we set the last invalidation event for this frame to be the RecalcStyle's initiator.
+            const lastRecalcStyleForFrame = lastRecalcByFrame.get(event.args.data.frame);
+            if (lastRecalcStyleForFrame) {
+                const { endTime } = Helpers.Timing.eventTimingsMicroSeconds(lastRecalcStyleForFrame);
+                const initiatorOfRecalcStyle = eventToInitiatorMap.get(lastRecalcStyleForFrame);
+                if (initiatorOfRecalcStyle && endTime && endTime > event.ts) {
+                    invalidationInitiator = initiatorOfRecalcStyle;
+                }
+            }
+        }
+        lastInvalidationEventForFrame.set(event.args.data.frame, invalidationInitiator);
+    }
+    else if (Types.Events.isLayout(event)) {
+        // The initiator of a Layout event is the last Invalidation event.
+        const lastInvalidation = lastInvalidationEventForFrame.get(event.args.beginData.frame);
+        if (lastInvalidation) {
+            storeInitiator({
+                event,
+                initiator: lastInvalidation,
+            });
+        }
+        // Now clear the last invalidation for the frame: the last invalidation has been linked to a Layout event, so it cannot be the initiator for any future layouts.
+        lastInvalidationEventForFrame.delete(event.args.beginData.frame);
+    }
+    else if (Types.Events.isTimerInstall(event)) {
+        timerInstallEventsById.set(event.args.data.timerId, event);
+    }
+    else if (Types.Events.isTimerFire(event)) {
+        const matchingInstall = timerInstallEventsById.get(event.args.data.timerId);
+        if (matchingInstall) {
+            storeInitiator({ event, initiator: matchingInstall });
+        }
+    }
+    else if (Types.Events.isRequestIdleCallback(event)) {
+        requestIdleCallbackEventsById.set(event.args.data.id, event);
+    }
+    else if (Types.Events.isFireIdleCallback(event)) {
+        const matchingRequestEvent = requestIdleCallbackEventsById.get(event.args.data.id);
+        if (matchingRequestEvent) {
+            storeInitiator({
+                event,
+                initiator: matchingRequestEvent,
+            });
+        }
+    }
+    else if (Types.Events.isWebSocketCreate(event)) {
+        webSocketCreateEventsById.set(event.args.data.identifier, event);
+    }
+    else if (Types.Events.isWebSocketInfo(event) || Types.Events.isWebSocketTransfer(event)) {
+        const matchingCreateEvent = webSocketCreateEventsById.get(event.args.data.identifier);
+        if (matchingCreateEvent) {
+            storeInitiator({
+                event,
+                initiator: matchingCreateEvent,
+            });
+        }
+    }
+    else if (Types.Events.isSchedulePostTaskCallback(event)) {
+        schedulePostTaskCallbackEventsById.set(event.args.data.taskId, event);
+    }
+    else if (Types.Events.isRunPostTaskCallback(event) || Types.Events.isAbortPostTaskCallback(event)) {
+        const matchingSchedule = schedulePostTaskCallbackEventsById.get(event.args.data.taskId);
+        if (matchingSchedule) {
+            storeInitiator({ event, initiator: matchingSchedule });
+        }
+    }
+}
+function createRelationshipsFromFlows() {
+    const flows = flowsHandlerData().flows;
+    for (let i = 0; i < flows.length; i++) {
+        const flow = flows[i];
+        for (let j = 0; j < flow.length - 1; j++) {
+            storeInitiator({ event: flow[j + 1], initiator: flow[j] });
+        }
+    }
+}
+function createRelationshipsFromAsyncJSCalls() {
+    const asyncCallEntries = AsyncJSCallsHandlerData().schedulerToRunEntryPoints.entries();
+    for (const [asyncCaller, asyncCallees] of asyncCallEntries) {
+        for (const asyncCallee of asyncCallees) {
+            storeInitiator({ event: asyncCallee, initiator: asyncCaller });
+        }
+    }
+}
+export async function finalize() {
+    createRelationshipsFromFlows();
+    createRelationshipsFromAsyncJSCalls();
+}
+export function data() {
+    return {
+        eventToInitiator: eventToInitiatorMap,
+        initiatorToEvents: initiatorToEventsMap,
+    };
+}
+export function deps() {
+    return ['Flows', 'AsyncJSCalls'];
+}

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

@@ -0,0 +1,126 @@
+// 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 Types from '../types/types.js';
+const frameStateByFrame = new Map();
+let maxInvalidationsPerEvent = null;
+export function reset() {
+    frameStateByFrame.clear();
+    maxInvalidationsPerEvent = null;
+}
+export function handleUserConfig(userConfig) {
+    maxInvalidationsPerEvent = userConfig.maxInvalidationEventsPerEvent;
+}
+function getState(frameId) {
+    let frameState = frameStateByFrame.get(frameId);
+    if (!frameState) {
+        frameState = {
+            invalidationsForEvent: new Map(),
+            invalidationCountForEvent: new Map(),
+            lastRecalcStyleEvent: null,
+            pendingInvalidations: [],
+            hasPainted: false,
+        };
+        frameStateByFrame.set(frameId, frameState);
+    }
+    return frameState;
+}
+function getFrameId(event) {
+    if (Types.Events.isRecalcStyle(event) || Types.Events.isLayout(event)) {
+        return event.args.beginData?.frame ?? null;
+    }
+    return event.args?.data?.frame ?? null;
+}
+function addInvalidationToEvent(frameState, event, invalidation) {
+    const existingInvalidations = frameState.invalidationsForEvent.get(event) || [];
+    existingInvalidations.push(invalidation);
+    if (maxInvalidationsPerEvent !== null && existingInvalidations.length > maxInvalidationsPerEvent) {
+        existingInvalidations.shift();
+    }
+    frameState.invalidationsForEvent.set(event, existingInvalidations);
+    const count = frameState.invalidationCountForEvent.get(event) ?? 0;
+    frameState.invalidationCountForEvent.set(event, count + 1);
+}
+export function handleEvent(event) {
+    // Special case: if we have been configured to not store any invalidations,
+    // we take that as a sign that we don't even want to gather any invalidations
+    // data at all and early exit.
+    if (maxInvalidationsPerEvent === 0) {
+        return;
+    }
+    const frameId = getFrameId(event);
+    if (!frameId) {
+        return;
+    }
+    const thisFrame = getState(frameId);
+    if (Types.Events.isRecalcStyle(event)) {
+        thisFrame.lastRecalcStyleEvent = event;
+        // Associate any prior invalidations with this recalc event.
+        for (const invalidation of thisFrame.pendingInvalidations) {
+            if (Types.Events.isLayoutInvalidationTracking(invalidation)) {
+                // LayoutInvalidation events cannot be associated with a LayoutTree
+                // event.
+                continue;
+            }
+            addInvalidationToEvent(thisFrame, event, invalidation);
+        }
+        return;
+    }
+    if (Types.Events.isInvalidationTracking(event)) {
+        if (thisFrame.hasPainted) {
+            // If we have painted, then we can clear out the list of all existing
+            // invalidations, as we cannot associate them across frames.
+            thisFrame.pendingInvalidations.length = 0;
+            thisFrame.lastRecalcStyleEvent = null;
+            thisFrame.hasPainted = false;
+        }
+        // Style invalidation events can occur before and during recalc styles. When we get a recalc style event, we check and associate any prior invalidations with it.
+        // But any invalidations that occur during a RecalcStyle
+        // event would be reported in trace events after. So each time we get an
+        // invalidation that might be due to a style recalc, we check if the
+        // timings overlap and if so associate them.
+        if (thisFrame.lastRecalcStyleEvent &&
+            (Types.Events.isScheduleStyleInvalidationTracking(event) ||
+                Types.Events.isStyleRecalcInvalidationTracking(event) ||
+                Types.Events.isStyleInvalidatorInvalidationTracking(event))) {
+            const recalcLastRecalc = thisFrame.lastRecalcStyleEvent;
+            const recalcEndTime = recalcLastRecalc.ts + (recalcLastRecalc.dur || 0);
+            if (event.ts >= recalcLastRecalc.ts && event.ts <= recalcEndTime) {
+                addInvalidationToEvent(thisFrame, recalcLastRecalc, event);
+            }
+        }
+        thisFrame.pendingInvalidations.push(event);
+        return;
+    }
+    if (Types.Events.isPaint(event)) {
+        thisFrame.hasPainted = true;
+        return;
+    }
+    if (Types.Events.isLayout(event)) {
+        for (const invalidation of thisFrame.pendingInvalidations) {
+            // The only invalidations that cause a Layout are LayoutInvalidations :)
+            if (!Types.Events.isLayoutInvalidationTracking(invalidation)) {
+                continue;
+            }
+            addInvalidationToEvent(thisFrame, event, invalidation);
+        }
+    }
+}
+export async function finalize() {
+}
+export function data() {
+    const invalidationsForEvent = new Map();
+    const invalidationCountForEvent = new Map();
+    for (const frame of frameStateByFrame.values()) {
+        for (const [event, invalidations] of frame.invalidationsForEvent.entries()) {
+            invalidationsForEvent.set(event, invalidations);
+        }
+        for (const [event, count] of frame.invalidationCountForEvent.entries()) {
+            invalidationCountForEvent.set(event, count);
+        }
+    }
+    return {
+        invalidationsForEvent,
+        invalidationCountForEvent,
+    };
+}

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

@@ -0,0 +1,85 @@
+// 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 Types from '../types/types.js';
+import { data as metaData } from './MetaHandler.js';
+import { data as networkRequestsData } from './NetworkRequestsHandler.js';
+import { data as pageLoadMetricsData } from './PageLoadMetricsHandler.js';
+/**
+ * If the LCP resource was an image, and that image was fetched over the
+ * network, we want to be able to find the network request in order to construct
+ * the critical path for an LCP image.
+ * Within the trace file there are `LargestImagePaint::Candidate` events.
+ * Within their data object, they contain a `DOMNodeId` property, which maps to
+ * the DOM Node ID for that image.
+ *
+ * This id maps exactly to the `data.nodeId` property that a
+ * `LargestContentfulPaint::Candidate` will have. So, when we find an image
+ * paint candidate, we can store it, keying it on the node ID.
+ * Then, when it comes to finding the network request for an LCP image, we can
+ * use the nodeId from the LCP candidate to find the image candidate. That image
+ * candidate also contains a `imageUrl` property, which will have the full URL
+ * to the image.
+ *
+ * `BackendNodeId`s are only unique within a given renderer process, so this is
+ * also keyed on `ProcessId`.
+ **/
+let imagePaintsByNodeIdAndProcess = new Map();
+let lcpRequestByNavigationId = new Map();
+export function reset() {
+    imagePaintsByNodeIdAndProcess = new Map();
+    lcpRequestByNavigationId = new Map();
+}
+export function handleEvent(event) {
+    if (!Types.Events.isLargestImagePaintCandidate(event) || !event.args.data) {
+        return;
+    }
+    const imagePaintsByNodeId = Platform.MapUtilities.getWithDefault(imagePaintsByNodeIdAndProcess, event.pid, () => new Map());
+    imagePaintsByNodeId.set(event.args.data.DOMNodeId, event);
+}
+export async function finalize() {
+    const requests = networkRequestsData().byTime;
+    const { traceBounds, navigationsByNavigationId } = metaData();
+    const metricScoresByFrameId = pageLoadMetricsData().metricScoresByFrameId;
+    for (const [navigationId, navigation] of navigationsByNavigationId) {
+        const lcpMetric = metricScoresByFrameId.get(navigation.args.frame)?.get(navigationId)?.get("LCP" /* MetricName.LCP */);
+        const lcpEvent = lcpMetric?.event;
+        if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+            continue;
+        }
+        const nodeId = lcpEvent.args.data?.nodeId;
+        if (!nodeId) {
+            continue;
+        }
+        const lcpImagePaintEvent = imagePaintsByNodeIdAndProcess.get(lcpEvent.pid)?.get(nodeId);
+        const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
+        if (!lcpUrl) {
+            continue;
+        }
+        const startTime = navigation?.ts ?? traceBounds.min;
+        const endTime = lcpImagePaintEvent.ts;
+        let lcpRequest;
+        for (const request of requests) {
+            if (request.ts < startTime) {
+                continue;
+            }
+            if (request.ts >= endTime) {
+                break;
+            }
+            if (request.args.data.url === lcpUrl || request.args.data.redirects.some(r => r.url === lcpUrl)) {
+                lcpRequest = request;
+                break;
+            }
+        }
+        if (lcpRequest) {
+            lcpRequestByNavigationId.set(navigationId, lcpRequest);
+        }
+    }
+}
+export function data() {
+    return { lcpRequestByNavigationId };
+}
+export function deps() {
+    return ['Meta', 'NetworkRequests', 'PageLoadMetrics'];
+}

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

@@ -0,0 +1,27 @@
+// 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 Types from '../types/types.js';
+/**
+ * A trace file will contain all the text paints that were candidates for the
+ * LargestTextPaint. If an LCP event is text, it will point to one of these
+ * candidates, so we store them by their DOM Node ID.
+ **/
+let textPaintByDOMNodeId = new Map();
+export function reset() {
+    textPaintByDOMNodeId = new Map();
+}
+export function handleEvent(event) {
+    if (!Types.Events.isLargestTextPaintCandidate(event)) {
+        return;
+    }
+    if (!event.args.data) {
+        return;
+    }
+    textPaintByDOMNodeId.set(event.args.data.DOMNodeId, event);
+}
+export async function finalize() {
+}
+export function data() {
+    return textPaintByDOMNodeId;
+}

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

@@ -0,0 +1,103 @@
+// 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';
+import { data as metaHandlerData } from './MetaHandler.js';
+let paintEvents = [];
+let snapshotEvents = [];
+let paintToSnapshotMap = new Map();
+let lastPaintForLayerId = {};
+let currentMainFrameLayerTreeId = null;
+let updateLayerEvents = [];
+let relevantEvents = [];
+export function reset() {
+    paintEvents = [];
+    snapshotEvents = [];
+    paintToSnapshotMap = new Map();
+    lastPaintForLayerId = {};
+    currentMainFrameLayerTreeId = null;
+    updateLayerEvents = [];
+    relevantEvents = [];
+}
+export function handleEvent(event) {
+    // We gather up the events here but do all the processing in finalize(). This
+    // is because we need to have all the events before we process them, and we
+    // need the Meta handler to be finalized() so we can use its data as we need
+    // the mainFrameId to know which Layer(s) to care about.
+    if (Types.Events.isPaint(event) || Types.Events.isDisplayListItemListSnapshot(event) ||
+        Types.Events.isUpdateLayer(event) || Types.Events.isSetLayerId(event)) {
+        relevantEvents.push(event);
+    }
+}
+export async function finalize() {
+    const metaData = metaHandlerData();
+    Helpers.Trace.sortTraceEventsInPlace(relevantEvents);
+    for (const event of relevantEvents) {
+        if (Types.Events.isSetLayerId(event)) {
+            if (metaData.mainFrameId !== event.args.data.frame) {
+                // We only care about LayerId changes that affect the main frame.
+                continue;
+            }
+            currentMainFrameLayerTreeId = event.args.data.layerTreeId;
+        }
+        else if (Types.Events.isUpdateLayer(event)) {
+            // We don't do anything with this event, but we need to store it because
+            // the information in it determines if we need to care about future
+            // snapshot events - we need to know what the active layer is when we see a
+            // snapshot.
+            updateLayerEvents.push(event);
+        }
+        else if (Types.Events.isPaint(event)) {
+            if (!event.args.data.layerId) {
+                // Note that this check purposefully includes excluding an event with a layerId of 0.
+                // 0 indicates that this paint was for a subframe - we do not want these
+                // as we only care about paints for top level frames.
+                continue;
+            }
+            paintEvents.push(event);
+            lastPaintForLayerId[event.args.data.layerId] = event;
+            continue;
+        }
+        else if (Types.Events.isDisplayListItemListSnapshot(event)) {
+            // First we figure out which layer is active for this event's thread. To
+            // do this we work backwards through the list of UpdateLayerEvents,
+            // finding the first one (i.e. the most recent one) with the same pid and
+            // tid.
+            let lastUpdateLayerEventForThread = null;
+            for (let i = updateLayerEvents.length - 1; i > -1; i--) {
+                const updateEvent = updateLayerEvents[i];
+                if (updateEvent.pid === event.pid && updateEvent.tid === event.tid) {
+                    lastUpdateLayerEventForThread = updateEvent;
+                    break;
+                }
+            }
+            if (!lastUpdateLayerEventForThread) {
+                // No active layer, so this snapshot is not relevant.
+                continue;
+            }
+            if (lastUpdateLayerEventForThread.args.layerTreeId !== currentMainFrameLayerTreeId) {
+                // Snapshot applies to a layer that is not the main frame, so discard.
+                continue;
+            }
+            const paintEvent = lastPaintForLayerId[lastUpdateLayerEventForThread.args.layerId];
+            if (!paintEvent) {
+                // No paint event for this layer, so discard.
+                continue;
+            }
+            snapshotEvents.push(event);
+            // Store the relationship between the paint and the snapshot.
+            paintToSnapshotMap.set(paintEvent, event);
+        }
+    }
+}
+export function data() {
+    return {
+        paints: paintEvents,
+        snapshots: snapshotEvents,
+        paintsToSnapshots: paintToSnapshotMap,
+    };
+}
+export function deps() {
+    return ['Meta'];
+}