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

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

@@ -0,0 +1,134 @@
+// 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 Platform from '../../../core/platform/platform.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { data as userInteractionsHandlerData } from './UserInteractionsHandler.js';
+import { data as workersData } from './WorkersHandler.js';
+let warningsPerEvent = new Map();
+let eventsPerWarning = new Map();
+/**
+ * Tracks the stack formed by nested trace events up to a given point
+ */
+let allEventsStack = [];
+/**
+ * Tracks the stack formed by JS invocation trace events up to a given point.
+ * F.e. FunctionCall, EvaluateScript, V8Execute.
+ * Not to be confused with ProfileCalls.
+ */
+let jsInvokeStack = [];
+/**
+ * Tracks reflow events in a task.
+ */
+let taskReflowEvents = [];
+/**
+ * Tracks events containing long running tasks. These are compared later against the worker thread pool to filter out long tasks from worker threads.
+ */
+let longTaskEvents = [];
+export const FORCED_REFLOW_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(30));
+export const LONG_MAIN_THREAD_TASK_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(50));
+export function reset() {
+    warningsPerEvent = new Map();
+    eventsPerWarning = new Map();
+    allEventsStack = [];
+    jsInvokeStack = [];
+    taskReflowEvents = [];
+    longTaskEvents = [];
+}
+function storeWarning(event, warning) {
+    const existingWarnings = Platform.MapUtilities.getWithDefault(warningsPerEvent, event, () => []);
+    existingWarnings.push(warning);
+    warningsPerEvent.set(event, existingWarnings);
+    const existingEvents = Platform.MapUtilities.getWithDefault(eventsPerWarning, warning, () => []);
+    existingEvents.push(event);
+    eventsPerWarning.set(warning, existingEvents);
+}
+export function handleEvent(event) {
+    processForcedReflowWarning(event);
+    if (event.name === "RunTask" /* Types.Events.Name.RUN_TASK */) {
+        const { duration } = Helpers.Timing.eventTimingsMicroSeconds(event);
+        if (duration > LONG_MAIN_THREAD_TASK_THRESHOLD) {
+            longTaskEvents.push(event);
+        }
+        return;
+    }
+    if (Types.Events.isFireIdleCallback(event)) {
+        const { duration } = Helpers.Timing.eventTimingsMilliSeconds(event);
+        if (duration > event.args.data.allottedMilliseconds) {
+            storeWarning(event, 'IDLE_CALLBACK_OVER_TIME');
+        }
+        return;
+    }
+}
+/**
+ * Reflows* are added a warning to if:
+ * 1. They are forced/sync, meaning they are invoked by JS and finish
+ *    during the Script execution.
+ * 2. Their duration exceeds a threshold.
+ * - *Reflow: The style recalculation and layout steps in a render task.
+ */
+function processForcedReflowWarning(event) {
+    // Update the event and the JS invocation stacks.
+    accomodateEventInStack(event, allEventsStack);
+    accomodateEventInStack(event, jsInvokeStack, /* pushEventToStack */ Types.Events.isJSInvocationEvent(event));
+    if (jsInvokeStack.length) {
+        // Current event falls inside a JS call.
+        if (event.name === "Layout" /* Types.Events.Name.LAYOUT */ || event.name === "UpdateLayoutTree" /* Types.Events.Name.RECALC_STYLE */) {
+            // A forced reflow happened. However we need to check if
+            // the threshold is surpassed to add a warning. Accumulate the
+            // event to check for this after the current Task is over.
+            taskReflowEvents.push(event);
+            return;
+        }
+    }
+    if (allEventsStack.length === 1) {
+        // We hit a new task. Check if the forced reflows in the previous
+        // task exceeded the threshold and add a warning if so.
+        const totalTime = taskReflowEvents.reduce((time, event) => time + (event.dur || 0), 0);
+        if (totalTime >= FORCED_REFLOW_THRESHOLD) {
+            taskReflowEvents.forEach(reflowEvent => storeWarning(reflowEvent, 'FORCED_REFLOW'));
+        }
+        taskReflowEvents.length = 0;
+    }
+}
+/**
+ * Updates a given trace event stack given a new event.
+ */
+function accomodateEventInStack(event, stack, pushEventToStack = true) {
+    let nextItem = stack.at(-1);
+    while (nextItem && event.ts > nextItem.ts + (nextItem.dur || 0)) {
+        stack.pop();
+        nextItem = stack.at(-1);
+    }
+    if (!pushEventToStack) {
+        return;
+    }
+    stack.push(event);
+}
+export function deps() {
+    return ['UserInteractions', 'Workers'];
+}
+export async function finalize() {
+    // These events do exist on the UserInteractionsHandler, but we also put
+    // them into the WarningsHandler so that the warnings handler can be the
+    // source of truth and the way to look up all warnings for a given event.
+    // Otherwise, we would have to look up warnings across multiple handlers for
+    // a given event, which will start to get messy very quickly.
+    const longInteractions = userInteractionsHandlerData().interactionsOverThreshold;
+    for (const interaction of longInteractions) {
+        storeWarning(interaction, 'LONG_INTERACTION');
+    }
+    for (const event of longTaskEvents) {
+        if (!(event.tid, workersData().workerIdByThread.has(event.tid))) {
+            storeWarning(event, 'LONG_TASK');
+        }
+    }
+    longTaskEvents.length = 0;
+}
+export function data() {
+    return {
+        perEvent: warningsPerEvent,
+        perWarning: eventsPerWarning,
+    };
+}

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

@@ -0,0 +1,33 @@
+// 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';
+let sessionIdEvents = [];
+let workerIdByThread = new Map();
+let workerURLById = new Map();
+export function reset() {
+    sessionIdEvents = [];
+    workerIdByThread = new Map();
+    workerURLById = new Map();
+}
+export function handleEvent(event) {
+    if (Types.Events.isTracingSessionIdForWorker(event)) {
+        sessionIdEvents.push(event);
+    }
+}
+export async function finalize() {
+    for (const sessionIdEvent of sessionIdEvents) {
+        if (!sessionIdEvent.args.data) {
+            continue;
+        }
+        workerIdByThread.set(sessionIdEvent.args.data.workerThreadId, sessionIdEvent.args.data.workerId);
+        workerURLById.set(sessionIdEvent.args.data.workerId, sessionIdEvent.args.data.url);
+    }
+}
+export function data() {
+    return {
+        workerSessionIdEvents: sessionIdEvents,
+        workerIdByThread,
+        workerURLById,
+    };
+}

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

@@ -0,0 +1,7 @@
+// 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.
+export * as Helpers from './helpers.js';
+export * as ModelHandlers from './ModelHandlers.js';
+export * as Threads from './Threads.js';
+export * as Types from './types.js';

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

@@ -0,0 +1,163 @@
+// 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 ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
+import * as Types from '../types/types.js';
+export function getEntityForEvent(event, entityMappings) {
+    const url = getNonResolvedURL(event);
+    if (!url) {
+        return;
+    }
+    return getEntityForUrl(url, entityMappings);
+}
+export function getEntityForUrl(url, entityMappings) {
+    const cachedByUrl = entityMappings.entityByUrlCache.get(url);
+    if (cachedByUrl) {
+        return cachedByUrl;
+    }
+    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(entityMappings.createdEntityCache, url);
+    if (entity) {
+        entityMappings.entityByUrlCache.set(url, entity);
+    }
+    return entity;
+}
+export function getNonResolvedURL(entry, handlerData) {
+    if (Types.Events.isProfileCall(entry)) {
+        return entry.callFrame.url;
+    }
+    if (Types.Events.isSyntheticNetworkRequest(entry)) {
+        return entry.args.data.url;
+    }
+    if (Types.Events.isParseAuthorStyleSheetEvent(entry) && entry.args) {
+        return entry.args.data.stylesheetUrl;
+    }
+    if (entry.args?.data?.stackTrace && entry.args.data.stackTrace.length > 0) {
+        return entry.args.data.stackTrace[0].url;
+    }
+    // ParseHTML events store the URL under beginData, not data.
+    if (Types.Events.isParseHTML(entry)) {
+        return entry.args.beginData.url;
+    }
+    if (handlerData) {
+        // DecodeImage events use the URL from the relevant PaintImage event.
+        if (Types.Events.isDecodeImage(entry)) {
+            const paintEvent = handlerData.ImagePainting.paintImageForEvent.get(entry);
+            return paintEvent ? getNonResolvedURL(paintEvent, handlerData) : null;
+        }
+        // DrawLazyPixelRef events use the URL from the relevant PaintImage event.
+        if (Types.Events.isDrawLazyPixelRef(entry) && entry.args?.LazyPixelRef) {
+            const paintEvent = handlerData.ImagePainting.paintImageByDrawLazyPixelRef.get(entry.args.LazyPixelRef);
+            return paintEvent ? getNonResolvedURL(paintEvent, handlerData) : null;
+        }
+    }
+    // For all other events, try to see if the URL is provided, else return null.
+    if (entry.args?.data?.url) {
+        return entry.args.data.url;
+    }
+    // Many events don't have a url, but are associated with a request. Use the
+    // request's url.
+    const requestId = entry.args?.data?.requestId;
+    if (handlerData && requestId) {
+        const url = handlerData.NetworkRequests.byId.get(requestId)?.args.data.url;
+        if (url) {
+            return url;
+        }
+    }
+    return null;
+}
+export function makeUpEntity(entityCache, url) {
+    if (url.startsWith('chrome-extension:')) {
+        return makeUpChromeExtensionEntity(entityCache, url);
+    }
+    // Make up an entity only for valid http/https URLs.
+    if (!url.startsWith('http')) {
+        return;
+    }
+    // NOTE: Lighthouse uses a tld database to determine the root domain, but here
+    // we are using third party web's database. Doesn't really work for the case of classifying
+    // domains 3pweb doesn't know about, so it will just give us a guess.
+    const rootDomain = ThirdPartyWeb.ThirdPartyWeb.getRootDomain(url);
+    if (!rootDomain) {
+        return;
+    }
+    if (entityCache.has(rootDomain)) {
+        return entityCache.get(rootDomain);
+    }
+    const unrecognizedEntity = {
+        name: rootDomain,
+        company: rootDomain,
+        category: '',
+        categories: [],
+        domains: [rootDomain],
+        averageExecutionTime: 0,
+        totalExecutionTime: 0,
+        totalOccurrences: 0,
+        isUnrecognized: true,
+    };
+    entityCache.set(rootDomain, unrecognizedEntity);
+    return unrecognizedEntity;
+}
+function getChromeExtensionOrigin(url) {
+    return url.protocol + '//' + url.host;
+}
+function makeUpChromeExtensionEntity(entityCache, url, extensionName) {
+    const parsedUrl = new URL(url);
+    const origin = getChromeExtensionOrigin(parsedUrl);
+    const host = new URL(origin).host;
+    const name = extensionName || host;
+    const cachedEntity = entityCache.get(origin);
+    if (cachedEntity) {
+        return cachedEntity;
+    }
+    const chromeExtensionEntity = {
+        name,
+        company: name,
+        category: 'Chrome Extension',
+        homepage: 'https://chromewebstore.google.com/detail/' + host,
+        categories: [],
+        domains: [origin],
+        averageExecutionTime: 0,
+        totalExecutionTime: 0,
+        totalOccurrences: 0,
+    };
+    entityCache.set(origin, chromeExtensionEntity);
+    return chromeExtensionEntity;
+}
+export function addEventToEntityMapping(event, entityMappings) {
+    // As we share the entityMappings between Network and Renderer... We can have ResourceSendRequest events passed in here
+    // that were already mapped in Network. So, to avoid mapping twice, we always check that we didn't yet.
+    if (entityMappings.entityByEvent.has(event)) {
+        return;
+    }
+    const entity = getEntityForEvent(event, entityMappings);
+    if (!entity) {
+        return;
+    }
+    const mappedEvents = entityMappings.eventsByEntity.get(entity);
+    if (mappedEvents) {
+        mappedEvents.push(event);
+    }
+    else {
+        entityMappings.eventsByEntity.set(entity, [event]);
+    }
+    entityMappings.entityByEvent.set(event, entity);
+}
+/** A slight upgrade of addEventToEntityMapping to handle the sub-events of a network request. **/
+export function addNetworkRequestToEntityMapping(networkRequest, entityMappings, requestTraceEvents) {
+    const entity = getEntityForEvent(networkRequest, entityMappings);
+    if (!entity) {
+        return;
+    }
+    // In addition to mapping the network request, we'll also assign this entity to its "child" instant events like receiveData, willSendRequest, finishLoading, etc,
+    const eventsToMap = [networkRequest, ...Object.values(requestTraceEvents).flat()];
+    const mappedEvents = entityMappings.eventsByEntity.get(entity);
+    if (mappedEvents) {
+        mappedEvents.push(...eventsToMap);
+    }
+    else {
+        entityMappings.eventsByEntity.set(entity, eventsToMap);
+    }
+    for (const evt of eventsToMap) {
+        entityMappings.entityByEvent.set(evt, entity);
+    }
+}

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

@@ -0,0 +1 @@
+export {};

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/helpers/Extensions.js

@@ -0,0 +1,41 @@
+// 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 { sortTraceEventsInPlace } from './Trace.js';
+import { canBuildTreesFromEvents, treify } from './TreeHelpers.js';
+export function buildTrackDataFromExtensionEntries(extensionEntries, extensionTrackData, entryToNode) {
+    const dataByTrack = new Map();
+    for (const entry of extensionEntries) {
+        // Batch data by track group. For each batch, add the data of every
+        // track in the group. In cases where no track group is provided,
+        // we use the standalone track data, but use a fixed prefix in the
+        // batch key to prevent collisions where a track group has the
+        // same name as a standalone track.
+        const key = entry.devtoolsObj.trackGroup || `track-name-${entry.devtoolsObj.track}`;
+        const batchedData = Platform.MapUtilities.getWithDefault(dataByTrack, key, () => ({
+            name: entry.devtoolsObj.trackGroup || entry.devtoolsObj.track,
+            isTrackGroup: Boolean(entry.devtoolsObj.trackGroup),
+            entriesByTrack: { [entry.devtoolsObj.track]: [] },
+        }));
+        if (!batchedData.entriesByTrack[entry.devtoolsObj.track]) {
+            batchedData.entriesByTrack[entry.devtoolsObj.track] = [];
+        }
+        const entriesInTrack = batchedData.entriesByTrack[entry.devtoolsObj.track];
+        entriesInTrack.push(entry);
+    }
+    // Calculate self time if possible for track entries, on a track
+    // by track basis.
+    for (const trackData of dataByTrack.values()) {
+        for (const entries of Object.values(trackData.entriesByTrack)) {
+            sortTraceEventsInPlace(entries);
+            if (canBuildTreesFromEvents(entries)) {
+                for (const [entry, node] of treify(entries).entryToNode) {
+                    entryToNode.set(entry, node);
+                }
+            }
+        }
+        extensionTrackData.push(trackData);
+    }
+    return { extensionTrackData, entryToNode };
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/helpers/Network.js

@@ -0,0 +1,102 @@
+// Important: we purposefully treat `potentially_blocking` as
+// non-render-blocking here because:
+// 1. An async script can run on the main thread at any point, including before
+//    the page is loaded
+// 2. An async script will never block the parsing and rendering process of the
+//    browser.
+// 3. Therefore, from a developer's point of view, there is nothing more they
+//    can do if they've put `async` on, and within the context of Insights, we
+//    shouldn't report an async script as render blocking.
+// In the future we may want to consider suggesting the use of `defer` over
+// `async`, as it doesn't have this concern, but for now we'll allow `async`
+// and not report it as an issue.
+const NON_RENDER_BLOCKING_VALUES = new Set([
+    'non_blocking',
+    'dynamically_injected_non_blocking',
+    'potentially_blocking',
+]);
+export function isSyntheticNetworkRequestEventRenderBlocking(event) {
+    return !NON_RENDER_BLOCKING_VALUES.has(event.args.data.renderBlocking);
+}
+const HIGH_NETWORK_PRIORITIES = new Set([
+    "VeryHigh" /* Protocol.Network.ResourcePriority.VeryHigh */,
+    "High" /* Protocol.Network.ResourcePriority.High */,
+    "Medium" /* Protocol.Network.ResourcePriority.Medium */,
+]);
+export function isSyntheticNetworkRequestHighPriority(event) {
+    return HIGH_NETWORK_PRIORITIES.has(event.args.data.priority);
+}
+export const CACHEABLE_STATUS_CODES = new Set([200, 203, 206]);
+/** @type {Set<LH.Crdp.Network.ResourceType>} */
+export const STATIC_RESOURCE_TYPES = new Set([
+    "Font" /* Protocol.Network.ResourceType.Font */,
+    "Image" /* Protocol.Network.ResourceType.Image */,
+    "Media" /* Protocol.Network.ResourceType.Media */,
+    "Script" /* Protocol.Network.ResourceType.Script */,
+    "Stylesheet" /* Protocol.Network.ResourceType.Stylesheet */,
+]);
+export const NON_NETWORK_SCHEMES = [
+    'blob', // @see https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
+    'data', // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+    'intent', // @see https://developer.chrome.com/docs/multidevice/android/intents/
+    'file', // @see https://en.wikipedia.org/wiki/File_URI_scheme
+    'filesystem', // @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystem
+    'chrome-extension',
+];
+/**
+ * Parses Cache-Control directives based on https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+ * eg. 'no-cache, no-store, max-age=0, no-transform, private' will return
+ * {no-cache: true, no-store: true, max-age: 0, no-transform: true, private: true}
+ */
+export function parseCacheControl(header) {
+    if (!header) {
+        return null;
+    }
+    const directives = header.split(',').map(directive => directive.trim());
+    const cacheControlOptions = {};
+    for (const directive of directives) {
+        const [key, value] = directive.split('=').map(part => part.trim());
+        switch (key) {
+            case 'max-age': {
+                const maxAge = parseInt(value, 10);
+                if (!isNaN(maxAge)) {
+                    cacheControlOptions['max-age'] = maxAge;
+                }
+                break;
+            }
+            case 'no-cache':
+                cacheControlOptions['no-cache'] = true;
+                break;
+            case 'no-store':
+                cacheControlOptions['no-store'] = true;
+                break;
+            case 'must-revalidate':
+                cacheControlOptions['must-revalidate'] = true;
+                break;
+            case 'private':
+                cacheControlOptions['private'] = true;
+                break;
+            default:
+                // Ignore unknown directives
+                break;
+        }
+    }
+    return cacheControlOptions;
+}
+const SECURE_LOCALHOST_DOMAINS = ['localhost', '127.0.0.1'];
+/**
+ * Is the host localhost-enough to satisfy the "secure context" definition
+ * https://github.com/GoogleChrome/lighthouse/pull/11766#discussion_r582340683
+ */
+export function isSyntheticNetworkRequestLocalhost(event) {
+    try {
+        const hostname = new URL(event.args.data.url).hostname;
+        // Any hostname terminating in `.localhost` is considered to be local.
+        // https://w3c.github.io/webappsec-secure-contexts/#localhost
+        // This method doesn't consider IPs that resolve to loopback, IPv6 or other loopback edgecases
+        return SECURE_LOCALHOST_DOMAINS.includes(hostname) || hostname.endsWith('.localhost');
+    }
+    catch {
+        return false;
+    }
+}