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

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

@@ -0,0 +1,44 @@
+// 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';
+// Cache film strips based on:
+// 1. The trace parsed data object
+// 2. The start time.
+const filmStripCache = new WeakMap();
+export function fromHandlerData(data, customZeroTime) {
+    const frames = [];
+    const zeroTime = typeof customZeroTime !== 'undefined' ? customZeroTime : data.Meta.traceBounds.min;
+    const spanTime = data.Meta.traceBounds.range;
+    const fromCache = filmStripCache.get(data)?.get(zeroTime);
+    if (fromCache) {
+        return fromCache;
+    }
+    const screenshots = data.Screenshots.screenshots ?? data.Screenshots.legacySyntheticScreenshots ?? [];
+    for (const screenshotEvent of screenshots) {
+        if (screenshotEvent.ts < zeroTime) {
+            continue;
+        }
+        const frame = {
+            index: frames.length,
+            screenshotEvent,
+        };
+        frames.push(frame);
+    }
+    const result = {
+        zeroTime,
+        spanTime,
+        frames: Array.from(frames),
+    };
+    const cachedForData = Platform.MapUtilities.getWithDefault(filmStripCache, data, () => new Map());
+    cachedForData.set(zeroTime, result);
+    return result;
+}
+export function frameClosestToTimestamp(filmStrip, searchTimestamp) {
+    const closestFrameIndexBeforeTimestamp = Platform.ArrayUtilities.nearestIndexFromEnd(filmStrip.frames, frame => frame.screenshotEvent.ts < searchTimestamp);
+    if (closestFrameIndexBeforeTimestamp === null) {
+        return null;
+    }
+    return filmStrip.frames[closestFrameIndexBeforeTimestamp];
+}

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

@@ -0,0 +1,76 @@
+// 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';
+const IDLE_FUNCTION_CALL_NAMES = new Set([
+    '(program)',
+    '(idle)',
+    '(root)',
+]);
+export function calculateWindow(traceBounds, mainThreadEntries) {
+    if (!mainThreadEntries.length) {
+        return traceBounds;
+    }
+    const entriesWithIdleRemoved = mainThreadEntries.filter(entry => {
+        if (Types.Events.isProfileCall(entry) &&
+            (IDLE_FUNCTION_CALL_NAMES.has(entry.callFrame.functionName) || !entry.callFrame.functionName)) {
+            return false;
+        }
+        return true;
+    });
+    if (entriesWithIdleRemoved.length === 0) {
+        return traceBounds;
+    }
+    /**
+     * Calculates regions of low utilization and returns the index of the event
+     * that is the first event that should be included.
+     **/
+    function findLowUtilizationRegion(startIndex, stopIndex) {
+        const threshold = 0.1;
+        let cutIndex = startIndex;
+        const entryAtCut = entriesWithIdleRemoved[cutIndex];
+        const timings = Helpers.Timing.eventTimingsMicroSeconds(entryAtCut);
+        let cutTime = (timings.startTime + timings.endTime) / 2;
+        let usedTime = 0;
+        const step = Math.sign(stopIndex - startIndex);
+        for (let i = startIndex; i !== stopIndex; i += step) {
+            const task = entriesWithIdleRemoved[i];
+            const taskTimings = Helpers.Timing.eventTimingsMicroSeconds(task);
+            const taskTime = (taskTimings.startTime + taskTimings.endTime) / 2;
+            const interval = Math.abs(cutTime - taskTime);
+            if (usedTime < threshold * interval) {
+                cutIndex = i;
+                cutTime = taskTime;
+                usedTime = 0;
+            }
+            usedTime += taskTimings.duration;
+        }
+        return cutIndex;
+    }
+    const rightIndex = findLowUtilizationRegion(entriesWithIdleRemoved.length - 1, 0);
+    const leftIndex = findLowUtilizationRegion(0, rightIndex);
+    const leftTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[leftIndex]);
+    const rightTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[rightIndex]);
+    let leftTime = leftTimings.startTime;
+    let rightTime = rightTimings.endTime;
+    const zoomedInSpan = rightTime - leftTime;
+    if (zoomedInSpan < traceBounds.range * 0.1) {
+        // If the area we have chosen to zoom into is less than 10% of the entire
+        // span, we bail and show the entire trace. It would not be so useful to
+        // the user to zoom in on such a small area; we assume they have
+        // purposefully recorded a trace that contains empty periods of time.
+        return traceBounds;
+    }
+    // Adjust the left time down by 5%, and the right time up by 5%, so that
+    // we give the range we want to zoom a bit of breathing space. At the
+    // same time, ensure that we do not stray beyond the bounds of the
+    // min/max time of the entire trace.
+    leftTime = Types.Timing.Micro(Math.max(leftTime - 0.05 * zoomedInSpan, traceBounds.min));
+    rightTime = Types.Timing.Micro(Math.min(rightTime + 0.05 * zoomedInSpan, traceBounds.max));
+    return {
+        min: leftTime,
+        max: rightTime,
+        range: Types.Timing.Micro(rightTime - leftTime),
+    };
+}

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

@@ -0,0 +1,162 @@
+// 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 Handlers from '../handlers/handlers.js';
+// Ignore modules smaller than an absolute threshold.
+const ABSOLUTE_SIZE_THRESHOLD_BYTES = 1024 * 0.5;
+// Ignore modules smaller than a % size of largest copy of the module.
+const RELATIVE_SIZE_THRESHOLD = 0.1;
+export function normalizeSource(source) {
+    // Trim trailing question mark - b/c webpack.
+    source = source.replace(/\?$/, '');
+    // Normalize paths for dependencies by only keeping everything after the last `node_modules`.
+    const lastNodeModulesIndex = source.lastIndexOf('node_modules');
+    if (lastNodeModulesIndex !== -1) {
+        source = source.substring(lastNodeModulesIndex);
+    }
+    return source;
+}
+function shouldIgnoreSource(source) {
+    // Ignore bundle overhead.
+    if (source.includes('webpack/bootstrap')) {
+        return true;
+    }
+    if (source.includes('(webpack)/buildin')) {
+        return true;
+    }
+    // Ignore webpack module shims, i.e. aliases of the form `module.exports = window.jQuery`
+    if (source.includes('external ')) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Sorts each array within @see ScriptDuplication by attributedSize, drops information
+ * on sources that are too small, and calculates esimatedDuplicateBytes.
+ */
+export function normalizeDuplication(duplication) {
+    for (const [key, data] of duplication) {
+        // Sort by resource size.
+        data.duplicates.sort((a, b) => b.attributedSize - a.attributedSize);
+        // Ignore modules smaller than a % size of largest.
+        if (data.duplicates.length > 1) {
+            const largestResourceSize = data.duplicates[0].attributedSize;
+            data.duplicates = data.duplicates.filter(duplicate => {
+                const percentSize = duplicate.attributedSize / largestResourceSize;
+                return percentSize >= RELATIVE_SIZE_THRESHOLD;
+            });
+        }
+        // Ignore modules smaller than an absolute threshold.
+        data.duplicates = data.duplicates.filter(duplicate => duplicate.attributedSize >= ABSOLUTE_SIZE_THRESHOLD_BYTES);
+        // Delete any that now don't have multiple entries.
+        if (data.duplicates.length <= 1) {
+            duplication.delete(key);
+            continue;
+        }
+        data.estimatedDuplicateBytes = data.duplicates.slice(1).reduce((acc, cur) => acc + cur.attributedSize, 0);
+    }
+}
+function indexOfOrLength(haystack, needle, startPosition = 0) {
+    const index = haystack.indexOf(needle, startPosition);
+    return index === -1 ? haystack.length : index;
+}
+export function getNodeModuleName(source) {
+    const sourceSplit = source.split('node_modules/');
+    source = sourceSplit[sourceSplit.length - 1];
+    const indexFirstSlash = indexOfOrLength(source, '/');
+    if (source[0] === '@') {
+        return source.slice(0, indexOfOrLength(source, '/', indexFirstSlash + 1));
+    }
+    return source.slice(0, indexFirstSlash);
+}
+function groupByNodeModules(duplication) {
+    const groupedDuplication = new Map();
+    for (const [source, data] of duplication) {
+        if (!source.includes('node_modules')) {
+            groupedDuplication.set(source, data);
+            continue;
+        }
+        const nodeModuleKey = 'node_modules/' + getNodeModuleName(source);
+        const aggregatedData = groupedDuplication.get(nodeModuleKey) ?? {
+            duplicates: [],
+            // This is calculated in normalizeDuplication.
+            estimatedDuplicateBytes: 0,
+        };
+        groupedDuplication.set(nodeModuleKey, aggregatedData);
+        for (const { script, attributedSize } of data.duplicates) {
+            let duplicate = aggregatedData.duplicates.find(d => d.script === script);
+            if (!duplicate) {
+                duplicate = { script, attributedSize: 0 };
+                aggregatedData.duplicates.push(duplicate);
+            }
+            duplicate.attributedSize += attributedSize;
+        }
+    }
+    return groupedDuplication;
+}
+/**
+ * Sort by estimated savings.
+ */
+function sorted(duplication) {
+    return new Map([...duplication].sort((a, b) => b[1].estimatedDuplicateBytes - a[1].estimatedDuplicateBytes));
+}
+/**
+ * Returns 2 @see ScriptDuplication for the given collection of script contents + source maps:
+ *
+ * 1. `duplication` keys correspond to authored files
+ * 2. `duplication` keys correspond to authored files, except all files within the same
+ *    node_module package are aggregated under the same entry.
+ */
+export function computeScriptDuplication(scriptsData, compressionRatios) {
+    const sourceDatasMap = new Map();
+    // Determine size of each `sources` entry.
+    for (const script of scriptsData.scripts) {
+        if (!script.content || !script.sourceMap) {
+            continue;
+        }
+        const sizes = Handlers.ModelHandlers.Scripts.getScriptGeneratedSizes(script);
+        if (!sizes) {
+            continue;
+        }
+        if ('errorMessage' in sizes) {
+            console.error(sizes.errorMessage);
+            continue;
+        }
+        const sourceDataArray = [];
+        sourceDatasMap.set(script, sourceDataArray);
+        const sources = script.sourceMap.sourceURLs();
+        for (let i = 0; i < sources.length; i++) {
+            if (shouldIgnoreSource(sources[i])) {
+                continue;
+            }
+            const sourceSize = sizes.files[sources[i]];
+            sourceDataArray.push({
+                source: normalizeSource(sources[i]),
+                resourceSize: sourceSize,
+            });
+        }
+    }
+    const duplication = new Map();
+    for (const [script, sourceDataArray] of sourceDatasMap) {
+        for (const sourceData of sourceDataArray) {
+            let data = duplication.get(sourceData.source);
+            if (!data) {
+                data = { estimatedDuplicateBytes: 0, duplicates: [] };
+                duplication.set(sourceData.source, data);
+            }
+            const compressionRatio = script.request ? compressionRatios.get(script.request?.args.data.requestId) ?? 1 : 1;
+            const transferSize = Math.round(sourceData.resourceSize * compressionRatio);
+            data.duplicates.push({
+                script,
+                attributedSize: transferSize,
+            });
+        }
+    }
+    const duplicationGroupedByNodeModules = groupByNodeModules(duplication);
+    normalizeDuplication(duplication);
+    normalizeDuplication(duplicationGroupedByNodeModules);
+    return {
+        duplication: sorted(duplication),
+        duplicationGroupedByNodeModules: sorted(duplicationGroupedByNodeModules),
+    };
+}

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

@@ -0,0 +1,191 @@
+// 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';
+export const stackTraceForEventInTrace = new Map();
+export function clearCacheForTrace(data) {
+    stackTraceForEventInTrace.delete(data);
+}
+/**
+ * This util builds a stack trace that includes async calls for a given
+ * event. It leverages data we collect from sampling to deduce sync
+ * stacks and trace event instrumentation on the V8 debugger to stitch
+ * them together.
+ */
+export function get(event, data) {
+    let cacheForTrace = stackTraceForEventInTrace.get(data);
+    if (!cacheForTrace) {
+        cacheForTrace = new Map();
+        stackTraceForEventInTrace.set(data, cacheForTrace);
+    }
+    const resultFromCache = cacheForTrace.get(event);
+    if (resultFromCache) {
+        return resultFromCache;
+    }
+    let result = null;
+    if (Types.Extensions.isSyntheticExtensionEntry(event)) {
+        result = getForExtensionEntry(event, data);
+    }
+    else if (Types.Events.isPerformanceMeasureBegin(event)) {
+        result = getForPerformanceMeasure(event, data);
+    }
+    else {
+        result = getForEvent(event, data);
+        const payloadCallFrames = getTraceEventPayloadStackAsProtocolCallFrame(event).filter(callFrame => !isNativeJSFunction(callFrame));
+        // If the event has a payload stack trace, replace the synchronous
+        // portion of the calculated stack with the payload's call frames.
+        // We do this because trace payload call frames contain call
+        // locations, unlike profile call frames obtained with getForEvent
+        // (which contain function declaration locations).
+        // This way the user knows which exact JS location triggered an
+        // event.
+        if (!result.callFrames.length) {
+            result.callFrames = payloadCallFrames;
+        }
+        else {
+            for (let i = 0; i < payloadCallFrames.length && i < result.callFrames.length; i++) {
+                result.callFrames[i] = payloadCallFrames[i];
+            }
+        }
+    }
+    if (result) {
+        cacheForTrace.set(event, result);
+    }
+    return result;
+}
+/**
+ * Fallback method to obtain a stack trace using the parsed event tree
+ * hierarchy. This shouldn't be called outside of this file, use `get`
+ * instead to ensure the correct event in the tree hierarchy is used.
+ */
+function getForEvent(event, data) {
+    // When working with a CPU profile the renderer handler won't have
+    // entries in its tree.
+    const entryToNode = data.Renderer.entryToNode.size > 0 ? data.Renderer.entryToNode : data.Samples.entryToNode;
+    const topStackTrace = { callFrames: [] };
+    let stackTrace = topStackTrace;
+    let currentEntry;
+    let node = entryToNode.get(event);
+    const traceCache = stackTraceForEventInTrace.get(data) || new Map();
+    stackTraceForEventInTrace.set(data, traceCache);
+    // Move up this node's ancestor tree appending JS frames to its
+    // stack trace. If an async caller is detected, move up in the async
+    // stack instead.
+    while (node) {
+        if (!Types.Events.isProfileCall(node.entry)) {
+            const maybeAsyncParent = data.AsyncJSCalls.runEntryPointToScheduler.get(node.entry);
+            if (!maybeAsyncParent) {
+                node = node.parent;
+                continue;
+            }
+            const maybeAsyncParentNode = maybeAsyncParent && entryToNode.get(maybeAsyncParent.scheduler);
+            if (maybeAsyncParentNode) {
+                stackTrace = addAsyncParentToStack(stackTrace, maybeAsyncParent.taskName);
+                node = maybeAsyncParentNode;
+            }
+            continue;
+        }
+        currentEntry = node.entry;
+        // First check if this entry was processed before.
+        const stackTraceFromCache = traceCache.get(node.entry);
+        if (stackTraceFromCache) {
+            stackTrace.callFrames.push(...stackTraceFromCache.callFrames.filter(callFrame => !isNativeJSFunction(callFrame)));
+            stackTrace.parent = stackTraceFromCache.parent;
+            // Only set the description to the cache value if we didn't
+            // compute it in the previous iteration, since the async stack
+            // trace descriptions / taskNames is only extracted when jumping
+            // to the async parent, and that might not have happened when
+            // the cached value was computed (e.g. the cached value
+            // computation started at some point inside the parent stack
+            // trace).
+            stackTrace.description = stackTrace.description || stackTraceFromCache.description;
+            break;
+        }
+        if (!isNativeJSFunction(currentEntry.callFrame)) {
+            stackTrace.callFrames.push(currentEntry.callFrame);
+        }
+        const maybeAsyncParentEvent = data.AsyncJSCalls.asyncCallToScheduler.get(currentEntry);
+        const maybeAsyncParentNode = maybeAsyncParentEvent && entryToNode.get(maybeAsyncParentEvent.scheduler);
+        if (maybeAsyncParentNode) {
+            stackTrace = addAsyncParentToStack(stackTrace, maybeAsyncParentEvent.taskName);
+            node = maybeAsyncParentNode;
+            continue;
+        }
+        node = node.parent;
+    }
+    return topStackTrace;
+}
+function addAsyncParentToStack(stackTrace, taskName) {
+    const parent = { callFrames: [] };
+    // The Protocol.Runtime.StackTrace type is recursive, so we
+    // move one level deeper in it as we walk up the ancestor tree.
+    stackTrace.parent = parent;
+    // Note: this description effectively corresponds to the name
+    // of the task that scheduled the stack trace we are jumping
+    // FROM, so it would make sense that it was set to that stack
+    // trace instead of the one we are jumping TO. However, the
+    // JS presentation utils we use to present async stack traces
+    // assume the description is added to the stack trace that
+    // scheduled the async task, so we build the data that way.
+    parent.description = taskName;
+    return parent;
+}
+/**
+ * Finds the JS call in which an extension entry was injected (the
+ * code location that called the extension API), and returns its stack
+ * trace.
+ */
+function getForExtensionEntry(event, data) {
+    const rawEvent = event.rawSourceEvent;
+    if (Types.Events.isPerformanceMeasureBegin(rawEvent)) {
+        return getForPerformanceMeasure(rawEvent, data);
+    }
+    if (!rawEvent) {
+        return null;
+    }
+    return get(rawEvent, data);
+}
+/**
+ * Gets the raw event for a user timing and obtains its stack trace.
+ */
+function getForPerformanceMeasure(event, data) {
+    let rawEvent = event;
+    if (event.args.traceId === undefined) {
+        return null;
+    }
+    // performance.measure calls dispatch 2 events: one for the call
+    // itself and another to represent the measured entry in the trace
+    // timeline. They are connected via a common traceId. At this
+    // point `rawEvent` corresponds to the second case, we must
+    // encounter the event for the call itself to obtain its callstack.
+    rawEvent = data.UserTimings.measureTraceByTraceId.get(event.args.traceId);
+    if (!rawEvent) {
+        return null;
+    }
+    return get(rawEvent, data);
+}
+/**
+ * Determines if a function is a native JS API (like setTimeout,
+ * requestAnimationFrame, consoleTask.run. etc.). This is useful to
+ * discard stack frames corresponding to the JS scheduler function
+ * itself, since it's already being used as title of async stack traces
+ * taken from the async `taskName`. This is also consistent with the
+ * behaviour of the stack trace in the sources
+ * panel.
+ */
+function isNativeJSFunction({ columnNumber, lineNumber, url, scriptId }) {
+    return lineNumber === -1 && columnNumber === -1 && url === '' && scriptId === '0';
+}
+/**
+ * Converts a stack trace from a trace event's payload into an array of
+ * Protocol.Runtime.CallFrame.
+ */
+function getTraceEventPayloadStackAsProtocolCallFrame(event) {
+    const payloadCallStack = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event) || [];
+    const callFrames = [];
+    for (const frame of payloadCallStack) {
+        callFrames.push({ ...frame, scriptId: String(frame.scriptId) });
+    }
+    return callFrames;
+}

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

@@ -0,0 +1,118 @@
+// 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 Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import * as TraceFilter from './TraceFilter.js';
+import * as TraceTree from './TraceTree.js';
+/**
+ *
+ * Returns Main frame main thread events.
+ * These events are inline with the ones used by selectedEvents() of TimelineTreeViews
+ */
+function collectMainThreadActivity(data) {
+    // TODO: Note b/402658800 could be an issue here.
+    const mainFrameMainThread = data.Renderer.processes.values()
+        .find(p => {
+        const url = p.url ?? '';
+        // Frame url checked a la CompatibilityTracksAppenders's addThreadAppenders
+        return p.isOnMainFrame && !url.startsWith('about:') && !url.startsWith('chrome:');
+    })
+        ?.threads.values()
+        .find(t => t.name === 'CrRendererMain');
+    if (!mainFrameMainThread) {
+        return [];
+    }
+    return mainFrameMainThread.entries;
+}
+export function summarizeByThirdParty(data, traceBounds) {
+    const mainThreadEvents = collectMainThreadActivity(data).sort(Helpers.Trace.eventTimeComparator);
+    const groupingFunction = (event) => {
+        const entity = data.Renderer.entityMappings.entityByEvent.get(event);
+        return entity?.name ?? '';
+    };
+    const node = getBottomUpTree(mainThreadEvents, traceBounds, groupingFunction);
+    const summaries = summarizeBottomUpByEntity(node, data);
+    return summaries;
+}
+/**
+ * Used only by Lighthouse.
+ */
+export function summarizeByURL(data, traceBounds) {
+    const mainThreadEvents = collectMainThreadActivity(data).sort(Helpers.Trace.eventTimeComparator);
+    const groupingFunction = (event) => {
+        return Handlers.Helpers.getNonResolvedURL(event, data) ?? '';
+    };
+    const node = getBottomUpTree(mainThreadEvents, traceBounds, groupingFunction);
+    const summaries = summarizeBottomUpByURL(node, data);
+    return summaries;
+}
+function summarizeBottomUpByEntity(root, data) {
+    const summaries = [];
+    // Top nodes are the 3P entities.
+    const topNodes = [...root.children().values()].flat();
+    for (const node of topNodes) {
+        if (node.id === '') {
+            continue;
+        }
+        const entity = data.Renderer.entityMappings.entityByEvent.get(node.event);
+        if (!entity) {
+            continue;
+        }
+        // Lets use the mapper events as our source of events, since we use the main thread to construct
+        // the bottom up tree. The mapper will give us all related events.
+        const summary = {
+            transferSize: node.transferSize,
+            mainThreadTime: Types.Timing.Milli(node.selfTime),
+            entity,
+            relatedEvents: data.Renderer.entityMappings.eventsByEntity.get(entity) ?? [],
+        };
+        summaries.push(summary);
+    }
+    return summaries;
+}
+function summarizeBottomUpByURL(root, data) {
+    const summaries = [];
+    const allRequests = data.NetworkRequests.byTime;
+    // Top nodes are URLs.
+    const topNodes = [...root.children().values()].flat();
+    for (const node of topNodes) {
+        if (node.id === '' || typeof node.id !== 'string') {
+            continue;
+        }
+        const entity = data.Renderer.entityMappings.entityByEvent.get(node.event);
+        if (!entity) {
+            continue;
+        }
+        const url = node.id;
+        const request = allRequests.find(r => r.args.data.url === url);
+        const summary = {
+            request,
+            url,
+            entity,
+            transferSize: node.transferSize,
+            mainThreadTime: Types.Timing.Milli(node.selfTime),
+        };
+        summaries.push(summary);
+    }
+    return summaries;
+}
+function getBottomUpTree(mainThreadEvents, tracebounds, groupingFunction) {
+    // Use the same filtering as front_end/panels/timeline/TimelineTreeView.ts.
+    const visibleEvents = Helpers.Trace.VISIBLE_TRACE_EVENT_TYPES.values().toArray();
+    const filter = new TraceFilter.VisibleEventsFilter(visibleEvents.concat(["SyntheticNetworkRequest" /* Types.Events.Name.SYNTHETIC_NETWORK_REQUEST */]));
+    // The bottom up root node handles all the "in Tracebounds" checks we need for the insight.
+    const startTime = Helpers.Timing.microToMilli(tracebounds.min);
+    const endTime = Helpers.Timing.microToMilli(tracebounds.max);
+    return new TraceTree.BottomUpRootNode(mainThreadEvents, {
+        textFilter: new TraceFilter.ExclusiveNameFilter([]),
+        filters: [filter],
+        startTime,
+        endTime,
+        eventGroupIdCallback: groupingFunction,
+        calculateTransferSize: true,
+        // Ensure we group by 3P alongside eventID for correct 3P grouping.
+        forceGroupIdCallback: true,
+    });
+}

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

@@ -0,0 +1,50 @@
+// Copyright 2017 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';
+export class TraceFilter {
+}
+export class VisibleEventsFilter extends TraceFilter {
+    visibleTypes;
+    constructor(visibleTypes) {
+        super();
+        this.visibleTypes = new Set(visibleTypes);
+    }
+    accept(event) {
+        if (Types.Extensions.isSyntheticExtensionEntry(event)) {
+            return true;
+        }
+        return this.visibleTypes.has(VisibleEventsFilter.eventType(event));
+    }
+    static eventType(event) {
+        // Any blink.console category events are treated as ConsoleTime events
+        if (event.cat.includes('blink.console')) {
+            return "ConsoleTime" /* Types.Events.Name.CONSOLE_TIME */;
+        }
+        // Any blink.user_timing egory events are treated as UserTiming events
+        if (event.cat.includes('blink.user_timing')) {
+            return "UserTiming" /* Types.Events.Name.USER_TIMING */;
+        }
+        return event.name;
+    }
+}
+export class InvisibleEventsFilter extends TraceFilter {
+    #invisibleTypes;
+    constructor(invisibleTypes) {
+        super();
+        this.#invisibleTypes = new Set(invisibleTypes);
+    }
+    accept(event) {
+        return !this.#invisibleTypes.has(VisibleEventsFilter.eventType(event));
+    }
+}
+export class ExclusiveNameFilter extends TraceFilter {
+    #excludeNames;
+    constructor(excludeNames) {
+        super();
+        this.#excludeNames = new Set(excludeNames);
+    }
+    accept(event) {
+        return !this.#excludeNames.has(event.name);
+    }
+}