chrome-devtools-mcp-for-extension 0.19.2 → 0.20.0

package/build/node_modules/chrome-devtools-frontend/front_end/models/cpu_profile/CPUProfileDataModel.js

@@ -50,7 +50,15 @@ export class CPUProfileDataModel extends ProfileTreeModel {
      * for CPU profiles coming from traces.
      */
     traceIds;
+    /**
+     * Each item in the `lines` array contains the script line executing
+     * when the sample in that array position was taken.
+     */
     lines;
+    /**
+     * Same as `lines` above, but with the script column.
+     */
+    columns;
     totalHitCount;
     profileHead;
     /**
@@ -84,14 +92,8 @@ export class CPUProfileDataModel extends ProfileTreeModel {
         }
         this.traceIds = profile.traceIds;
         this.samples = profile.samples;
-        // Lines are available only in profiles coming from tracing.
-        // Elements in the lines array have a 1 to 1 correspondence with
-        // samples, by array position. They can be 1 or 0 and indicate if
-        // there is line data for a given sample, i.e. if a given sample
-        // needs to be included to calculate the line level execution time
-        // data, which we show in the sources panel after recording a
-        // profile.
         this.lines = profile.lines;
+        this.columns = profile.columns;
         this.totalHitCount = 0;
         this.profileHead = this.translateProfileTree(profile.nodes);
         this.initialize(this.profileHead);

package/build/node_modules/chrome-devtools-frontend/front_end/models/cpu_profile/ProfileTreeModel.js

@@ -9,7 +9,7 @@ export class ProfileNode {
     id;
     parent;
     children;
-    functionName;
+    originalFunctionName = null;
     depth;
     deoptReason;
     constructor(callFrame) {
@@ -18,7 +18,6 @@ export class ProfileNode {
         this.self = 0;
         this.total = 0;
         this.id = 0;
-        this.functionName = callFrame.functionName;
         this.parent = null;
         this.children = [];
     }
@@ -34,11 +33,11 @@ export class ProfileNode {
     get columnNumber() {
         return this.callFrame.columnNumber;
     }
-    setFunctionName(name) {
-        if (name === null) {
-            return;
-        }
-        this.functionName = name;
+    get functionName() {
+        return this.originalFunctionName ?? this.callFrame.functionName;
+    }
+    setOriginalFunctionName(name) {
+        this.originalFunctionName = name;
     }
 }
 export class ProfileTreeModel {

package/build/node_modules/chrome-devtools-frontend/front_end/models/crux-manager/CrUXManager.js

@@ -19,7 +19,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const CRUX_API_KEY = 'AIzaSyCCSOx25vrb5z0tbedCB3_JRzzbVW6Uwgw';
 const DEFAULT_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${CRUX_API_KEY}`;
 let cruxManagerInstance;
-// TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then.
+/** TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then. **/
 export const DEVICE_SCOPE_LIST = ['ALL', 'DESKTOP', 'PHONE'];
 const pageScopeList = ['origin', 'url'];
 const metrics = [
@@ -92,9 +92,11 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper {
             'url-PHONE': null,
             'url-TABLET': null,
             warnings: [],
+            normalizedUrl: '',
         };
         try {
             const normalizedUrl = this.#normalizeUrl(pageUrl);
+            pageResult.normalizedUrl = normalizedUrl.href;
             const promises = [];
             for (const pageScope of pageScopeList) {
                 for (const deviceScope of DEVICE_SCOPE_LIST) {
@@ -143,10 +145,10 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper {
      */
     async #getFieldDataForCurrentPage() {
         const currentUrl = this.#mainDocumentUrl || await this.#getInspectedURL();
-        const urlForCrux = this.#configSetting.get().overrideEnabled ? this.#configSetting.get().override || '' :
+        const normalizedUrl = this.#configSetting.get().overrideEnabled ? this.#configSetting.get().override || '' :
             this.#getMappedUrl(currentUrl);
-        const result = await this.getFieldDataForPage(urlForCrux);
-        if (currentUrl !== urlForCrux) {
+        const result = await this.getFieldDataForPage(normalizedUrl);
+        if (currentUrl !== normalizedUrl) {
             result.warnings.push(i18nString(UIStrings.fieldOverrideWarning));
         }
         return result;

package/build/node_modules/chrome-devtools-frontend/front_end/models/formatter/FormatterWorkerPool.js

@@ -1,7 +1,7 @@
 // Copyright 2016 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 Common from '../../core/common/common.js';
+import * as Platform from '../../core/platform/platform.js';
 let formatterWorkerPoolInstance;
 export class FormatterWorkerPool {
     taskQueue;
@@ -16,8 +16,22 @@ export class FormatterWorkerPool {
         }
         return formatterWorkerPoolInstance;
     }
+    dispose() {
+        for (const task of this.taskQueue) {
+            console.error('rejecting task');
+            task.errorCallback(new Event('Worker terminated'));
+        }
+        for (const [worker, task] of this.workerTasks.entries()) {
+            task?.errorCallback(new Event('Worker terminated'));
+            worker.terminate(/* immediately=*/ true);
+        }
+    }
+    static removeInstance() {
+        formatterWorkerPoolInstance?.dispose();
+        formatterWorkerPoolInstance = undefined;
+    }
     createWorker() {
-        const worker = Common.Worker.WorkerWrapper.fromURL(new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url));
+        const worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url).toString());
         worker.onmessage = this.onWorkerMessage.bind(this, worker);
         worker.onerror = this.onWorkerError.bind(this, worker);
         return worker;

package/build/node_modules/chrome-devtools-frontend/front_end/models/network_time_calculator/RequestTimeRanges.js

@@ -36,10 +36,12 @@ export function calculateRequestTimeRanges(request, navigationStart) {
             addRange(name, startTime + (start / 1000), startTime + (end / 1000));
         }
     }
-    // In some situations, argument `start` may come before `startTime` (`timing.requestStart`). This is especially true
-    // in cases such as SW static routing API where fields like `workerRouterEvaluationStart` or `workerCacheLookupStart`
-    // is set before setting `timing.requestStart`. If the `start` and `end` is known to be a valid value (i.e. not default
-    // invalid value -1 or undefined), we allow adding the range.
+    /**
+     * In some situations, argument `start` may come before `startTime` (`timing.requestStart`). This is especially true
+     * in cases such as SW static routing API where fields like `workerRouterEvaluationStart` or `workerCacheLookupStart`
+     * is set before setting `timing.requestStart`. If the `start` and `end` is known to be a valid value (i.e. not default
+     * invalid value -1 or undefined), we allow adding the range.
+     **/
     function addMaybeNegativeOffsetRange(name, start, end) {
         addRange(name, startTime + (start / 1000), startTime + (end / 1000));
     }

package/build/node_modules/chrome-devtools-frontend/front_end/models/source_map_scopes/FunctionCodeResolver.js

@@ -0,0 +1,192 @@
+// 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 SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../bindings/bindings.js';
+import * as Formatter from '../formatter/formatter.js';
+import * as TextUtils from '../text_utils/text_utils.js';
+import * as Workspace from '../workspace/workspace.js';
+const inputCache = new WeakMap();
+async function prepareInput(uiSourceCode, content) {
+    const formattedContent = await format(uiSourceCode, content);
+    const text = new TextUtils.Text.Text(formattedContent ? formattedContent.formattedContent : content);
+    let performanceData = uiSourceCode.getDecorationData("performance" /* Workspace.UISourceCode.DecoratorType.PERFORMANCE */);
+    // Map profile data to the formatted view of the text.
+    if (formattedContent && performanceData) {
+        performanceData = Workspace.UISourceCode.createMappedProfileData(performanceData, (line, column) => {
+            return formattedContent.formattedMapping.originalToFormatted(line, column);
+        });
+    }
+    return { text, formattedContent, performanceData };
+}
+/** Formatting and parsing line endings for Text is expensive, so cache it. */
+async function prepareInputAndCache(uiSourceCode, content) {
+    let cachedPromise = inputCache.get(uiSourceCode);
+    if (cachedPromise) {
+        return await cachedPromise;
+    }
+    cachedPromise = prepareInput(uiSourceCode, content);
+    inputCache.set(uiSourceCode, cachedPromise);
+    return await cachedPromise;
+}
+function extractPerformanceDataByLine(textRange, performanceData) {
+    const { startLine, startColumn, endLine, endColumn } = textRange;
+    const byLine = new Array(endLine - startLine + 1).fill(0);
+    for (let line = startLine; line <= endLine; line++) {
+        const lineData = performanceData.get(line + 1);
+        if (!lineData) {
+            continue;
+        }
+        // Fast-path for when the entire line's data is relevant.
+        if (line !== startLine && line !== endLine) {
+            byLine[line - startLine] = lineData.values().reduce((acc, cur) => acc + cur);
+            continue;
+        }
+        const column0 = line === startLine ? startColumn + 1 : 0;
+        const column1 = line === endLine ? endColumn + 1 : Number.POSITIVE_INFINITY;
+        let totalData = 0;
+        for (const [column, data] of lineData) {
+            if (column >= column0 && column <= column1) {
+                totalData += data;
+            }
+        }
+        byLine[line - startLine] = totalData;
+    }
+    return byLine.map(data => Math.round(data * 10) / 10);
+}
+function createFunctionCode(inputData, functionBounds, options) {
+    let { startLine, startColumn, endLine, endColumn } = functionBounds.range;
+    if (inputData.formattedContent) {
+        const startMapped = inputData.formattedContent.formattedMapping.originalToFormatted(startLine, startColumn);
+        startLine = startMapped[0];
+        startColumn = startMapped[1];
+        const endMapped = inputData.formattedContent.formattedMapping.originalToFormatted(endLine, endColumn);
+        endLine = endMapped[0];
+        endColumn = endMapped[1];
+    }
+    const text = inputData.text;
+    const content = text.value();
+    // Define two ranges - the first is just the function bounds, the second includes
+    // that plus some surrounding context as dictated by the options.
+    const range = new TextUtils.TextRange.TextRange(startLine, startColumn, endLine, endColumn);
+    const functionStartOffset = text.offsetFromPosition(startLine, startColumn);
+    const functionEndOffset = text.offsetFromPosition(endLine, endColumn);
+    let contextStartOffset = 0;
+    if (options?.contextLength !== undefined) {
+        const contextLength = options.contextLength;
+        contextStartOffset = Math.max(contextStartOffset, functionStartOffset - contextLength);
+    }
+    if (options?.contextLineLength !== undefined) {
+        const contextLineLength = options.contextLineLength;
+        const position = text.offsetFromPosition(Math.max(startLine - contextLineLength, 0), 0);
+        contextStartOffset = Math.max(contextStartOffset, position);
+    }
+    let contextEndOffset = content.length;
+    if (options?.contextLength !== undefined) {
+        const contextLength = options.contextLength;
+        contextEndOffset = Math.min(contextEndOffset, functionEndOffset + contextLength);
+    }
+    if (options?.contextLineLength !== undefined) {
+        const contextLineLength = options.contextLineLength;
+        const position = text.offsetFromPosition(Math.min(endLine + contextLineLength, text.lineCount() - 1), Number.POSITIVE_INFINITY);
+        contextEndOffset = Math.min(contextEndOffset, position);
+    }
+    const contextStart = text.positionFromOffset(contextStartOffset);
+    const contextEnd = text.positionFromOffset(contextEndOffset);
+    const rangeWithContext = new TextUtils.TextRange.TextRange(contextStart.lineNumber, contextStart.columnNumber, contextEnd.lineNumber, contextEnd.columnNumber);
+    // Grab substrings for the function range, and for the context range.
+    const code = content.substring(functionStartOffset, functionEndOffset);
+    const before = content.substring(contextStartOffset, functionStartOffset);
+    const after = content.substring(functionEndOffset, contextEndOffset);
+    let codeWithContext;
+    if (options?.appendProfileData && inputData.performanceData) {
+        const performanceDataByLine = extractPerformanceDataByLine(range, inputData.performanceData);
+        const lines = performanceDataByLine.map((data, i) => {
+            let line = text.lineAt(startLine + i);
+            const isLastLine = i === performanceDataByLine.length - 1;
+            if (i === 0) {
+                if (isLastLine) {
+                    line = line.substring(startColumn, endColumn);
+                }
+                else {
+                    line = line.substring(startColumn);
+                }
+            }
+            else if (isLastLine) {
+                line = line.substring(0, endColumn);
+            }
+            if (isLastLine) {
+                // Don't ever annotate the last line - it could make the rest of the code on
+                // that line get commented out.
+                data = 0;
+            }
+            return data ? `${line} // ${data} ms` : line;
+        });
+        const annotatedCode = lines.join('\n');
+        codeWithContext = before + `<FUNCTION_START>${annotatedCode}<FUNCTION_END>` + after;
+    }
+    else {
+        codeWithContext = before + `<FUNCTION_START>${code}<FUNCTION_END>` + after;
+    }
+    return {
+        functionBounds,
+        text,
+        code,
+        range,
+        codeWithContext,
+        rangeWithContext,
+    };
+}
+/**
+ * The input location may be a source mapped location or a raw location.
+ */
+export async function getFunctionCodeFromLocation(target, url, line, column, options) {
+    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+    if (!debuggerModel) {
+        throw new Error('missing debugger model');
+    }
+    let uiSourceCode;
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    const projects = debuggerWorkspaceBinding.workspace.projectsForType(Workspace.Workspace.projectTypes.Network);
+    for (const project of projects) {
+        uiSourceCode = project.uiSourceCodeForURL(url);
+        if (uiSourceCode) {
+            break;
+        }
+    }
+    if (!uiSourceCode) {
+        return null;
+    }
+    const rawLocations = await debuggerWorkspaceBinding.uiLocationToRawLocations(uiSourceCode, line, column);
+    const rawLocation = rawLocations.at(-1);
+    if (!rawLocation) {
+        return null;
+    }
+    return await getFunctionCodeFromRawLocation(rawLocation, options);
+}
+async function format(uiSourceCode, content) {
+    const contentType = uiSourceCode.contentType();
+    const shouldFormat = !contentType.isFromSourceMap() && (contentType.isDocument() || contentType.isScript()) &&
+        TextUtils.TextUtils.isMinified(content);
+    if (!shouldFormat) {
+        return null;
+    }
+    return await Formatter.ScriptFormatter.formatScriptContent(contentType.canonicalMimeType(), content, '\t');
+}
+/**
+ * Returns a {@link FunctionCode} for the given raw location.
+ */
+export async function getFunctionCodeFromRawLocation(rawLocation, options) {
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    const functionBounds = await debuggerWorkspaceBinding.functionBoundsAtRawLocation(rawLocation);
+    if (!functionBounds) {
+        return null;
+    }
+    await functionBounds.uiSourceCode.requestContentData();
+    const content = functionBounds.uiSourceCode.content();
+    if (!content) {
+        return null;
+    }
+    const inputData = await prepareInputAndCache(functionBounds.uiSourceCode, content);
+    return createFunctionCode(inputData, functionBounds, options);
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/source_map_scopes/NamesResolver.js

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
-import { scopeTreeForScript } from './ScopeTreeCache.js';
 const scopeToCachedIdentifiersMap = new WeakMap();
 const cachedMapByCallFrame = new WeakMap();
 export async function getTextFor(contentProvider) {
@@ -31,15 +31,7 @@ const computeScopeTree = async function (script) {
     if (!script.sourceMapURL) {
         return null;
     }
-    const text = await getTextFor(script);
-    if (!text) {
-        return null;
-    }
-    const scopeTree = await scopeTreeForScript(script);
-    if (!scopeTree) {
-        return null;
-    }
-    return { scopeTree, text };
+    return await SDK.ScopeTreeCache.scopeTreeForScript(script);
 };
 /**
  * @returns the scope chain from outer-most to inner-most scope where the inner-most
@@ -182,7 +174,7 @@ const resolveScope = async (script, scopeChain) => {
                         return;
                     }
                 }
-                // If there is no entry with the name field, try to infer the name from the source positions.
+                /** If there is no entry with the name field, try to infer the name from the source positions. **/
                 async function resolvePosition() {
                     if (!sourceMap) {
                         return;
@@ -309,7 +301,9 @@ export const resolveScopeChain = async function (callFrame) {
     if (scopeChain) {
         return scopeChain;
     }
-    scopeChain = callFrame.script.sourceMap()?.resolveScopeChain(callFrame);
+    scopeChain = Root.Runtime.experiments.isEnabled("use-source-map-scopes" /* Root.Runtime.ExperimentName.USE_SOURCE_MAP_SCOPES */) ?
+        callFrame.script.sourceMap()?.resolveScopeChain(callFrame) :
+        null;
     if (scopeChain) {
         return scopeChain;
     }
@@ -556,10 +550,12 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
         return this.object.isNode();
     }
 }
-// Resolve the frame's function name using the name associated with the opening
-// paren that starts the scope. If there is no name associated with the scope
-// start or if the function scope does not start with a left paren (e.g., arrow
-// function with one parameter), the resolution returns null.
+/**
+ * Resolve the frame's function name using the name associated with the opening
+ * paren that starts the scope. If there is no name associated with the scope
+ * start or if the function scope does not start with a left paren (e.g., arrow
+ * function with one parameter), the resolution returns null.
+ **/
 async function getFunctionNameFromScopeStart(script, lineNumber, columnNumber) {
     // To reduce the overhead of resolving function names,
     // we check for source maps first and immediately leave

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

@@ -1,7 +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.
+import * as FunctionCodeResolver from './FunctionCodeResolver.js';
 import * as NamesResolver from './NamesResolver.js';
 import * as ScopeChainModel from './ScopeChainModel.js';
-import * as ScopeTreeCache from './ScopeTreeCache.js';
-export { NamesResolver, ScopeChainModel, ScopeTreeCache, };
+export { FunctionCodeResolver, NamesResolver, ScopeChainModel, };

package/build/node_modules/chrome-devtools-frontend/front_end/models/stack_trace/StackTraceModel.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as SDK from '../../core/sdk/sdk.js';
-// eslint-disable-next-line rulesdir/es-modules-import
+// eslint-disable-next-line @devtools/es-modules-import
 import * as StackTrace from './stack_trace.js';
 import { AsyncFragmentImpl, FragmentImpl, FrameImpl, StackTraceImpl } from './StackTraceImpl.js';
 import { Trie } from './Trie.js';

package/build/node_modules/chrome-devtools-frontend/front_end/models/stack_trace/Trie.js

@@ -1,6 +1,14 @@
 // 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.
+/**
+ * @returns whether the frame is a V8 builtin frame e.g. Array.map. Builtin frames
+ * have neither source position nor script or URL. They only have a name.
+ */
+export function isBuiltinFrame(rawFrame) {
+    return rawFrame.lineNumber === -1 && rawFrame.columnNumber === -1 && !Boolean(rawFrame.scriptId) &&
+        !Boolean(rawFrame.url);
+}
 export class FrameNode {
     parent;
     children = [];

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

@@ -167,6 +167,7 @@ function createLanternRequest(parsedTrace, workerThreads, request) {
         priority: request.args.data.priority,
         frameId: request.args.data.frame,
         fromWorker,
+        serverResponseTime: request.args.data.lrServerResponseTime ?? undefined,
         // Set later.
         redirects: undefined,
         redirectSource: undefined,

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

@@ -70,8 +70,11 @@ export class Model extends EventTarget {
      * });
      * void this.traceModel.parse(events);
      **/
-    async parse(traceEvents, config) {
-        const metadata = config?.metadata || {};
+    async parse(traceEvents, config = {}) {
+        if (config.showAllEvents === undefined) {
+            config.showAllEvents = this.#config.showAllEvents;
+        }
+        const metadata = config.metadata || {};
         // During parsing, periodically update any listeners on each processors'
         // progress (if they have any updates).
         const onTraceUpdate = (event) => {
@@ -84,7 +87,7 @@ export class Model extends EventTarget {
         try {
             // Wait for all outstanding promises before finishing the async execution,
             // but perform all tasks in parallel.
-            await this.#processor.parse(traceEvents, config ?? {});
+            await this.#processor.parse(traceEvents, config);
             if (!this.#processor.data) {
                 throw new Error('processor did not parse trace');
             }

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

@@ -351,9 +351,12 @@ export class TraceProcessor extends EventTarget {
     }
     #computeInsightSet(data, context) {
         const logger = context.options.logger;
+        if (!this.#insights) {
+            this.#insights = new Map();
+        }
         let id, urlString, navigation;
         if (context.navigation) {
-            id = context.navigationId;
+            id = `NAVIGATION_${this.#insights.size}`;
             urlString = data.Meta.finalDisplayUrlByNavigationId.get(context.navigationId) ?? data.Meta.mainFrameURL;
             navigation = context.navigation;
         }
@@ -421,9 +424,6 @@ export class TraceProcessor extends EventTarget {
             bounds: context.bounds,
             model: insightSetModel,
         };
-        if (!this.#insights) {
-            this.#insights = new Map();
-        }
         this.#insights.set(insightSet.id, insightSet);
         this.sortInsightSet(insightSet, context.options.metadata ?? null);
     }

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

@@ -428,7 +428,7 @@ const UIStrings = {
     /**
      * @description Event category in the Performance panel for time spent to perform Garbage Collection for C++: https://chromium.googlesource.com/v8/v8/+/main/include/cppgc/README.md
      */
-    cppGc: 'CPP GC',
+    cppGc: 'C++ GC',
     /**
      * @description Event category in the Performance panel for time spent to perform encryption
      */

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

@@ -326,6 +326,7 @@ export class BottomUpRootNode extends Node {
         const root = this;
         const startTime = this.startTime;
         const endTime = this.endTime;
+        const idStack = [];
         const nodeById = new Map();
         const selfTimeStack = [endTime - startTime];
         const firstNodeStack = [];
@@ -383,6 +384,11 @@ export class BottomUpRootNode extends Node {
             if (forceGroupIdCallback && eventGroupIdCallback) {
                 id = `${id}-${eventGroupIdCallback(e)}`;
             }
+            idStack.push(id);
+            // For an event 'X' that contains another event 'X' (resolving to the same node
+            // id), we need to measure `totalTime` from the start of the outermost 'X' to
+            // its corresponding end. This logic ensures we don't double-count the duration
+            // of the inner event.
             const noNodeOnStack = !totalTimeById.has(id);
             if (noNodeOnStack) {
                 totalTimeById.set(id, duration);
@@ -390,9 +396,9 @@ export class BottomUpRootNode extends Node {
             firstNodeStack.push(noNodeOnStack);
         }
         function onEndEvent(event) {
-            let id = generateEventID(event);
-            if (forceGroupIdCallback && eventGroupIdCallback) {
-                id = `${id}-${eventGroupIdCallback(event)}`;
+            const id = idStack.pop();
+            if (!id) {
+                return;
             }
             let node = nodeById.get(id);
             if (!node) {
@@ -407,6 +413,7 @@ export class BottomUpRootNode extends Node {
                 node.totalTime += totalTimeById.get(id) || 0;
                 totalTimeById.delete(id);
             }
+            // TODO: this may be wrong. See the skipped test in TraceTree.test.ts.
             if (firstNodeStack.length) {
                 node.setHasChildren(true);
             }
@@ -573,7 +580,7 @@ export function eventStackFrame(event) {
     }
     return { ...topFrame, scriptId: String(topFrame.scriptId) };
 }
-// TODO(paulirish): rename to generateNodeId
+/** TODO(paulirish): rename to generateNodeId **/
 export function generateEventID(event) {
     if (Types.Events.isProfileCall(event)) {
         const name = SamplesIntegrator.isNativeRuntimeFrame(event.callFrame) ?

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

@@ -410,7 +410,7 @@ export class PendingFrame {
         this.triggerTime = triggerTime;
     }
 }
-// The parameters of an impl-side BeginFrame.
+/** The parameters of an impl-side BeginFrame. **/
 class BeginFrameInfo {
     seqId;
     startTime;
@@ -423,10 +423,12 @@ class BeginFrameInfo {
         this.isPartial = isPartial;
     }
 }
-// A queue of BeginFrames pending visualization.
-// BeginFrames are added into this queue as they occur; later when their
-// corresponding DrawFrames occur (or lack thereof), the BeginFrames are removed
-// from the queue and their timestamps are used for visualization.
+/**
+ * A queue of BeginFrames pending visualization.
+ * BeginFrames are added into this queue as they occur; later when their
+ * corresponding DrawFrames occur (or lack thereof), the BeginFrames are removed
+ * from the queue and their timestamps are used for visualization.
+ **/
 export class TimelineFrameBeginFrameQueue {
     queueFrames = [];
     // Maps frameSeqId to BeginFrameInfo.

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

@@ -6,11 +6,15 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 import { data as metaHandlerData } from './MetaHandler.js';
 import { data as screenshotsHandlerData } from './ScreenshotsHandler.js';
-// This represents the maximum #time we will allow a cluster to go before we
-// reset it.
+/**
+ * This represents the maximum #time we will allow a cluster to go before we
+ * reset it.
+ **/
 export const MAX_CLUSTER_DURATION = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
-// This represents the maximum #time we will allow between layout shift events
-// before considering it to be the start of a new cluster.
+/**
+ * This represents the maximum #time we will allow between layout shift events
+ * before considering it to be the start of a new cluster.
+ **/
 export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.milliToMicro(Types.Timing.Milli(1000));
 // Layout shifts are reported globally to the developer, irrespective of which
 // frame they originated in. However, each process does have its own individual

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

@@ -4,6 +4,7 @@
 import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
+let config;
 // We track the renderer processes we see in each frame on the way through the trace.
 let rendererProcessesByFrameId = new Map();
 // We will often want to key data by Frame IDs, and commonly we'll care most
@@ -299,7 +300,8 @@ export function handleEvent(event) {
         return;
     }
 }
-export async function finalize() {
+export async function finalize(options) {
+    config = { showAllEvents: Boolean(options?.showAllEvents) };
     // We try to set the minimum time by finding the event with the smallest
     // timestamp. However, if we also got a timestamp from the
     // TracingStartedInBrowser event, we should always use that.
@@ -378,6 +380,7 @@ export async function finalize() {
 }
 export function data() {
     return {
+        config,
         traceBounds,
         browserProcessId,
         browserThreadId,