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

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/SourceMapScopesInfo.js

@@ -1,6 +1,7 @@
 // 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 Formatter from '../../models/formatter/formatter.js';
 import { SourceMapScopeChainEntry } from './SourceMapScopeChainEntry.js';
 export class SourceMapScopesInfo {
     #sourceMap;
@@ -12,6 +13,129 @@ export class SourceMapScopesInfo {
         this.#originalScopes = scopeInfo.scopes;
         this.#generatedRanges = scopeInfo.ranges;
     }
+    /**
+     * If the source map does not contain any scopes information, this factory function attempts to create scope information
+     * via the script's AST combined with the mappings.
+     *
+     * We create the generated ranges from the scope tree and for each range we create an original scope that matches the bounds 1:1.
+     */
+    static createFromAst(sourceMap, scopeTree, text) {
+        const numSourceUrls = sourceMap.sourceURLs().length;
+        const scopeBySourceUrl = [];
+        for (let i = 0; i < numSourceUrls; i++) {
+            const scope = {
+                start: { line: 0, column: 0 },
+                end: { line: Number.POSITIVE_INFINITY, column: Number.POSITIVE_INFINITY },
+                isStackFrame: false,
+                variables: [],
+                children: [],
+            };
+            scopeBySourceUrl.push(scope);
+        }
+        // Convert the entire scopeTree. Returns a root range that encompasses everything,
+        // and inserts scopes by sourceIndex into the above scopeBySourceUrl.
+        const { range } = convertScope(scopeTree, undefined);
+        return new SourceMapScopesInfo(sourceMap, { scopes: scopeBySourceUrl, ranges: [range] });
+        /**
+         * Recursively finds the correct place in the tree to insert the new scope.
+         * Maintains the invariant that children are sorted and contained by their parent.
+         */
+        function insertInScope(parent, newScope) {
+            // Check if the newScope fits strictly inside any of the existing children.
+            for (const child of parent.children) {
+                if (contains(child, newScope)) {
+                    insertInScope(child, newScope);
+                    return;
+                }
+            }
+            // When here, newScope belongs directly in parent.
+            // However, newScope might encompass some of parent's existing children (due
+            // to compiler transform quirks or arbitrary insertion order). We must move
+            // those children inside newScope.
+            const childrenToKeep = [];
+            for (const child of parent.children) {
+                if (contains(newScope, child)) {
+                    // child is actually inside newScope, so re-parent it.
+                    newScope.children.push(child);
+                    child.parent = newScope;
+                }
+                else {
+                    childrenToKeep.push(child);
+                }
+            }
+            // Find the correct index in the remaining children to insert newScope.
+            // We look for the first child that starts after the new scope.
+            const insertIndex = childrenToKeep.findIndex(child => compareScopes(newScope, child) < 0);
+            if (insertIndex === -1) {
+                // If no child starts after, it goes at the end.
+                childrenToKeep.push(newScope);
+            }
+            else {
+                childrenToKeep.splice(insertIndex, 0, newScope);
+            }
+            // Update parent's children to only be the ones that don't belong to newScope.
+            parent.children = childrenToKeep;
+            newScope.parent = parent;
+        }
+        function contains(outer, inner) {
+            return comparePositions(outer.start, inner.start) <= 0 && comparePositions(outer.end, inner.end) >= 0;
+        }
+        function compareScopes(a, b) {
+            return comparePositions(a.start, b.start);
+        }
+        function comparePositions(a, b) {
+            if (a.line !== b.line) {
+                return a.line - b.line;
+            }
+            return a.column - b.column;
+        }
+        function convertScope(node, parentRange) {
+            const start = positionFromOffset(node.start);
+            const end = positionFromOffset(node.end);
+            const startEntry = sourceMap.findEntry(start.line, start.column);
+            const endEntry = sourceMap.findEntry(end.line, end.column);
+            const sourceIndex = startEntry?.sourceIndex;
+            const canMapOriginalPosition = startEntry && endEntry && sourceIndex !== undefined &&
+                startEntry.sourceIndex === endEntry.sourceIndex && startEntry.sourceIndex !== undefined && sourceIndex >= 0 &&
+                sourceIndex < numSourceUrls;
+            const isStackFrame = node.kind === 2 /* Formatter.FormatterWorkerPool.ScopeKind.FUNCTION */ ||
+                node.kind === 4 /* Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION */;
+            // TODO(crbug.com/368222773): Instead of mapping `start`, we should report a number of candidates. e.g. for arrow functions we should
+            //     follow the spec and map the `=>` as the spec says that is where the original name (if any) for arrow functions can be found.
+            const name = node.kind === 2 /* Formatter.FormatterWorkerPool.ScopeKind.FUNCTION */ ? startEntry?.name : undefined;
+            let scope;
+            if (canMapOriginalPosition) {
+                scope = {
+                    start: { line: startEntry.sourceLineNumber, column: startEntry.sourceColumnNumber },
+                    end: { line: endEntry.sourceLineNumber, column: endEntry.sourceColumnNumber },
+                    name,
+                    isStackFrame,
+                    variables: [],
+                    children: [],
+                };
+            }
+            const range = {
+                start,
+                end,
+                originalScope: scope,
+                isStackFrame,
+                isHidden: false,
+                values: [],
+                children: [],
+            };
+            parentRange?.children.push(range);
+            if (canMapOriginalPosition && scope) {
+                const rootScope = scopeBySourceUrl[sourceIndex];
+                insertInScope(rootScope, scope);
+            }
+            node.children.forEach(child => convertScope(child, range));
+            return { range };
+        }
+        function positionFromOffset(offset) {
+            const location = text.positionFromOffset(offset);
+            return { line: location.lineNumber, column: location.columnNumber };
+        }
+    }
     addOriginalScopes(scopes) {
         for (const scope of scopes) {
             this.#originalScopes.push(scope);
@@ -25,6 +149,9 @@ export class SourceMapScopesInfo {
     hasOriginalScopes(sourceIdx) {
         return Boolean(this.#originalScopes[sourceIdx]);
     }
+    isEmpty() {
+        return !this.#originalScopes.length && !this.#generatedRanges.length;
+    }
     addOriginalScopesAtIndex(sourceIdx, scope) {
         if (!this.#originalScopes[sourceIdx]) {
             this.#originalScopes[sourceIdx] = scope;
@@ -33,6 +160,38 @@ export class SourceMapScopesInfo {
             throw new Error(`Trying to re-augment existing scopes for source at index: ${sourceIdx}`);
         }
     }
+    /**
+     * @returns true, iff the function surrounding the provided position is marked as "hidden".
+     */
+    isOutlinedFrame(generatedLine, generatedColumn) {
+        const rangeChain = this.#findGeneratedRangeChain(generatedLine, generatedColumn);
+        return this.#isOutlinedFrame(rangeChain);
+    }
+    #isOutlinedFrame(rangeChain) {
+        for (let i = rangeChain.length - 1; i >= 0; --i) {
+            if (rangeChain[i].isStackFrame) {
+                return rangeChain[i].isHidden;
+            }
+        }
+        return false;
+    }
+    /**
+     * @returns true, iff the range surrounding the provided position contains multiple
+     * inlined original functions.
+     */
+    hasInlinedFrames(generatedLine, generatedColumn) {
+        const rangeChain = this.#findGeneratedRangeChain(generatedLine, generatedColumn);
+        for (let i = rangeChain.length - 1; i >= 0; --i) {
+            if (rangeChain[i].isStackFrame) {
+                // We stop looking for inlined original functions once we reach the current frame.
+                return false;
+            }
+            if (rangeChain[i].callSite) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * Given a generated position, returns the original name of the surrounding function as well as
      * all the original function names that got inlined into the surrounding generated function and their
@@ -53,7 +212,10 @@ export class SourceMapScopesInfo {
             const range = rangeChain[i];
             if (range.callSite) {
                 // Record the name and call-site if the range corresponds to an inlined function.
-                result.inlinedFunctions.push({ name: range.originalScope?.name ?? '', callsite: range.callSite });
+                result.inlinedFunctions.push({
+                    name: range.originalScope?.name ?? '',
+                    callsite: { ...range.callSite, sourceURL: this.#sourceMap.sourceURLForSourceIndex(range.callSite.sourceIndex) }
+                });
             }
             if (range.isStackFrame) {
                 // We arrived at an actual generated JS function, don't go further.
@@ -209,7 +371,14 @@ export class SourceMapScopesInfo {
     /**
      * Returns the authored function name of the function containing the provided generated position.
      */
-    findOriginalFunctionName({ line, column }) {
+    findOriginalFunctionName(position) {
+        const originalInnerMostScope = this.findOriginalFunctionScope(position)?.scope ?? undefined;
+        return this.#findFunctionNameInOriginalScopeChain(originalInnerMostScope);
+    }
+    /**
+     * Returns the authored function scope of the function containing the provided generated position.
+     */
+    findOriginalFunctionScope({ line, column }) {
         // There are 2 approaches:
         //   1) Find the inner-most generated range containing the provided generated position
         //      and use it's OriginalScope (then walk it outwards until we hit a function).
@@ -235,13 +404,21 @@ export class SourceMapScopesInfo {
                 this.#findOriginalScopeChain({ sourceIndex: entry.sourceIndex, line: entry.sourceLineNumber, column: entry.sourceColumnNumber })
                     .at(-1);
         }
-        // Walk the original scope chain outwards until we find a function.
-        for (let originalScope = originalInnerMostScope; originalScope; originalScope = originalScope.parent) {
-            if (originalScope.isStackFrame) {
-                return originalScope.name ?? '';
-            }
+        if (!originalInnerMostScope) {
+            return null;
         }
-        return null;
+        const functionScope = this.#findFunctionScopeInOriginalScopeChain(originalInnerMostScope);
+        if (!functionScope) {
+            return null;
+        }
+        // Find the root scope for some given original source, to get the source url.
+        let rootScope = functionScope;
+        while (rootScope.parent) {
+            rootScope = rootScope.parent;
+        }
+        const sourceIndex = this.#originalScopes.indexOf(rootScope);
+        const url = sourceIndex !== -1 ? this.#sourceMap.sourceURLForSourceIndex(sourceIndex) : undefined;
+        return functionScope ? { scope: functionScope, url } : null;
     }
     /**
      * Given an original position, this returns all the surrounding original scopes from outer
@@ -264,6 +441,61 @@ export class SourceMapScopesInfo {
         })([scope]);
         return result;
     }
+    #findFunctionScopeInOriginalScopeChain(innerOriginalScope) {
+        for (let originalScope = innerOriginalScope; originalScope; originalScope = originalScope.parent) {
+            if (originalScope.isStackFrame) {
+                return originalScope;
+            }
+        }
+        return null;
+    }
+    #findFunctionNameInOriginalScopeChain(innerOriginalScope) {
+        const functionScope = this.#findFunctionScopeInOriginalScopeChain(innerOriginalScope);
+        if (!functionScope) {
+            return null;
+        }
+        return functionScope.name ?? '';
+    }
+    /**
+     * Returns one or more original stack frames for this single "raw frame" or call-site.
+     *
+     * @returns An empty array if no mapping at the call-site was found, or the resulting frames
+     * in top-to-bottom order in case of inlining.
+     * @throws If this range is marked "hidden". Outlining needs to be handled externally as
+     * outlined function segments in stack traces can span across bundles.
+     */
+    translateCallSite(generatedLine, generatedColumn) {
+        const rangeChain = this.#findGeneratedRangeChain(generatedLine, generatedColumn);
+        if (this.#isOutlinedFrame(rangeChain)) {
+            throw new Error('SourceMapScopesInfo is unable to translate an outlined function by itself');
+        }
+        const mapping = this.#sourceMap.findEntry(generatedLine, generatedColumn);
+        if (mapping?.sourceIndex === undefined) {
+            return [];
+        }
+        // The top-most frame is translated the same even if we have inlined functions.
+        const result = [{
+                line: mapping.sourceLineNumber,
+                column: mapping.sourceColumnNumber,
+                name: this.findOriginalFunctionName({ line: generatedLine, column: generatedColumn }) ?? undefined,
+                url: mapping.sourceURL,
+            }];
+        // Walk the range chain inside out until we find a generated function and for each inlined function add a frame.
+        for (let i = rangeChain.length - 1; i >= 0 && !rangeChain[i].isStackFrame; --i) {
+            const range = rangeChain[i];
+            if (!range.callSite) {
+                continue;
+            }
+            const originalScopeChain = this.#findOriginalScopeChain(range.callSite);
+            result.push({
+                line: range.callSite.line,
+                column: range.callSite.column,
+                name: this.#findFunctionNameInOriginalScopeChain(originalScopeChain.at(-1)) ?? undefined,
+                url: this.#sourceMap.sourceURLForSourceIndex(range.callSite.sourceIndex),
+            });
+        }
+        return result;
+    }
 }
 export function contains(range, line, column) {
     if (range.start.line > line || (range.start.line === line && range.start.column > column)) {

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/Target.js

@@ -31,8 +31,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
     #targetInfo;
     #creatingModels;
     constructor(targetManager, id, name, type, parentTarget, sessionId, suspended, connection, targetInfo) {
-        const needsNodeJSPatching = type === Type.NODE;
-        super(needsNodeJSPatching, parentTarget, sessionId, connection);
+        super(parentTarget, sessionId, connection);
         this.#targetManager = targetManager;
         this.#name = name;
         this.#capabilitiesMask = 0;
@@ -57,12 +56,15 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
                 this.#capabilitiesMask = 4 /* Capability.JS */ | 8 /* Capability.LOG */ | 16 /* Capability.NETWORK */ | 32 /* Capability.TARGET */ |
                     2048 /* Capability.INSPECTOR */ | 131072 /* Capability.IO */ | 524288 /* Capability.EVENT_BREAKPOINTS */;
                 if (parentTarget?.type() !== Type.FRAME) {
-                    this.#capabilitiesMask |= 1 /* Capability.BROWSER */;
+                    this.#capabilitiesMask |= 1 /* Capability.BROWSER */ | 8192 /* Capability.STORAGE */;
                 }
                 break;
             case Type.SHARED_WORKER:
                 this.#capabilitiesMask = 4 /* Capability.JS */ | 8 /* Capability.LOG */ | 16 /* Capability.NETWORK */ | 32 /* Capability.TARGET */ |
                     131072 /* Capability.IO */ | 262144 /* Capability.MEDIA */ | 2048 /* Capability.INSPECTOR */ | 524288 /* Capability.EVENT_BREAKPOINTS */;
+                if (parentTarget?.type() !== Type.FRAME) {
+                    this.#capabilitiesMask |= 8192 /* Capability.STORAGE */;
+                }
                 break;
             case Type.SHARED_STORAGE_WORKLET:
                 this.#capabilitiesMask = 4 /* Capability.JS */ | 8 /* Capability.LOG */ | 2048 /* Capability.INSPECTOR */ | 524288 /* Capability.EVENT_BREAKPOINTS */;
@@ -70,6 +72,9 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
             case Type.Worker:
                 this.#capabilitiesMask = 4 /* Capability.JS */ | 8 /* Capability.LOG */ | 16 /* Capability.NETWORK */ | 32 /* Capability.TARGET */ |
                     131072 /* Capability.IO */ | 262144 /* Capability.MEDIA */ | 256 /* Capability.EMULATION */ | 524288 /* Capability.EVENT_BREAKPOINTS */;
+                if (parentTarget?.type() !== Type.FRAME) {
+                    this.#capabilitiesMask |= 8192 /* Capability.STORAGE */;
+                }
                 break;
             case Type.WORKLET:
                 this.#capabilitiesMask = 4 /* Capability.JS */ | 8 /* Capability.LOG */ | 524288 /* Capability.EVENT_BREAKPOINTS */ | 16 /* Capability.NETWORK */;
@@ -95,20 +100,11 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#isSuspended = suspended;
         this.#targetInfo = targetInfo;
     }
-    createModels(required) {
+    /** Creates the models in the order in which they are provided */
+    createModels(models) {
         this.#creatingModels = true;
-        const registeredModels = Array.from(SDKModel.registeredModels.entries());
-        // Create early models.
-        for (const [modelClass, info] of registeredModels) {
-            if (info.early) {
-                this.model(modelClass);
-            }
-        }
-        // Create autostart and required models.
-        for (const [modelClass, info] of registeredModels) {
-            if (info.autostart || required.has(modelClass)) {
-                this.model(modelClass);
-            }
+        for (const model of models) {
+            this.model(model);
         }
         this.#creatingModels = false;
     }
@@ -129,7 +125,6 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         return this.#type;
     }
     markAsNodeJSForTest() {
-        super.markAsNodeJSForTest();
         this.#type = Type.NODE;
     }
     targetManager() {

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/TargetManager.js

@@ -6,12 +6,19 @@ import * as Host from '../host/host.js';
 import * as Platform from '../platform/platform.js';
 import { assertNotNullOrUndefined } from '../platform/platform.js';
 import * as Root from '../root/root.js';
-import { StubConnection } from './Connections.js';
-import { RehydratingConnection } from './RehydratingConnection.js';
 import { SDKModel } from './SDKModel.js';
 import { Target, Type as TargetType } from './Target.js';
-let targetManagerInstance;
 export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
+    /**
+     * @deprecated
+     *
+     * Intended for {@link SDKModel} classes to be able to retrieve scoped singletons like
+     * the "PageResourceLoader" or the "FrameManager".
+     *
+     * This is only an intermediate step to migrate towards our "layering vision" where
+     * SDKModels don't require things from the next layer.
+     */
+    context;
     #targets;
     #observers;
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -24,8 +31,13 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
     #scopeTarget;
     #defaultScopeSet;
     #scopeChangeListeners;
-    constructor() {
+    #overrideAutoStartModels;
+    /**
+     * @param overrideAutoStartModels If provided, then the `autostart` flag on {@link RegistrationInfo} will be ignored.
+     */
+    constructor(context, overrideAutoStartModels) {
         super();
+        this.context = context;
         this.#targets = new Set();
         this.#observers = new Set();
         this.#modelListeners = new Platform.MapUtilities.Multimap();
@@ -36,15 +48,16 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
         this.#scopedObservers = new WeakSet();
         this.#defaultScopeSet = false;
         this.#scopeChangeListeners = new Set();
+        this.#overrideAutoStartModels = overrideAutoStartModels;
     }
     static instance({ forceNew } = { forceNew: false }) {
-        if (!targetManagerInstance || forceNew) {
-            targetManagerInstance = new TargetManager();
+        if (!Root.DevToolsContext.globalInstance().has(TargetManager) || forceNew) {
+            Root.DevToolsContext.globalInstance().set(TargetManager, new TargetManager(Root.DevToolsContext.globalInstance()));
         }
-        return targetManagerInstance;
+        return Root.DevToolsContext.globalInstance().get(TargetManager);
     }
     static removeInstance() {
-        targetManagerInstance = undefined;
+        Root.DevToolsContext.globalInstance().delete(TargetManager);
     }
     onInspectedURLChange(target) {
         if (target !== this.#scopeTarget) {
@@ -169,12 +182,27 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
         this.#observers.delete(targetObserver);
         this.#scopedObservers.delete(targetObserver);
     }
+    /** @returns The set of models we create unconditionally for new targets in the order in which they should be created */
+    #autoStartModels() {
+        const earlyModels = new Set();
+        const models = new Set();
+        const shouldAutostart = (model, info) => this.#overrideAutoStartModels ? this.#overrideAutoStartModels.has(model) : info.autostart;
+        for (const [model, info] of SDKModel.registeredModels) {
+            if (info.early) {
+                earlyModels.add(model);
+            }
+            else if (shouldAutostart(model, info) || this.#modelObservers.has(model)) {
+                models.add(model);
+            }
+        }
+        return [...earlyModels, ...models];
+    }
     createTarget(id, name, type, parentTarget, sessionId, waitForDebuggerInPage, connection, targetInfo) {
         const target = new Target(this, id, name, type, parentTarget, sessionId || '', this.#isSuspended, connection || null, targetInfo);
         if (waitForDebuggerInPage) {
             void target.pageAgent().invoke_waitForDebugger();
         }
-        target.createModels(new Set(this.#modelObservers.keysArray()));
+        target.createModels(this.#autoStartModels());
         this.#targets.add(target);
         const inScope = this.isInScope(target);
         // Iterate over a copy. #observers might be modified during iteration.
@@ -252,25 +280,6 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
     browserTarget() {
         return this.#browserTarget;
     }
-    /**
-     * If this returns true, the target is not connected to a legit CDP server.
-     * However, it's not exhaustive, so some `false` responses may be misleading.
-     *    (eg., tab URL of `devtools://devtools/bundled/devtools_app.html` uses a MainConnection but has no CDP server behind it).
-     */
-    hasFakeConnection() {
-        // Rehydrated DevTools always has a fake connection, so we shortcut and avoid the race.
-        if (Root.Runtime.getPathName().includes('rehydrated_devtools_app')) {
-            return true;
-        }
-        // There _may_ be a race condition hiding here on the router/connection creation.
-        // So we play it safe and consider "no connection yet" as "not fake".
-        const connection = this.primaryPageTarget()?.router()?.connection();
-        if (!connection) {
-            return false;
-        }
-        const isFakeConnection = (connection instanceof StubConnection) || (connection instanceof RehydratingConnection);
-        return isFakeConnection;
-    }
     async maybeAttachInitialTarget() {
         if (!Boolean(Root.Runtime.Runtime.queryParam('browserConnection'))) {
             return false;
@@ -278,7 +287,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
         if (!this.#browserTarget) {
             this.#browserTarget = new Target(this, /* #id*/ 'main', /* #name*/ 'browser', TargetType.BROWSER, /* #parentTarget*/ null, 
             /* #sessionId */ '', /* suspended*/ false, /* #connection*/ null, /* targetInfo*/ undefined);
-            this.#browserTarget.createModels(new Set(this.#modelObservers.keysArray()));
+            this.#browserTarget.createModels(this.#autoStartModels());
         }
         const targetId = await Host.InspectorFrontendHost.InspectorFrontendHostInstance.initialTargetId();
         // Do not await for Target.autoAttachRelated to return, as it goes throguh the renderer and we don't want to block early

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/TraceObject.js

@@ -3,19 +3,22 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import { ResourceTreeModel } from './ResourceTreeModel.js';
-// A thin wrapper class, mostly to enable instanceof-based revealing of traces to open in Timeline.
+/** A thin wrapper class, mostly to enable instanceof-based revealing of traces to open in Timeline. **/
 export class TraceObject {
     traceEvents;
     metadata;
-    constructor(payload, meta = {}) {
-        // Handle the typical traceEvent array juggling here.
-        const events = Array.isArray(payload) ? payload : payload.traceEvents;
-        const metadata = meta ?? (!Array.isArray(payload) && payload.metadata) ?? {};
-        this.traceEvents = events;
-        this.metadata = metadata;
+    constructor(payload, meta) {
+        if (Array.isArray(payload)) {
+            this.traceEvents = payload;
+            this.metadata = meta ?? {};
+        }
+        else {
+            this.traceEvents = payload.traceEvents;
+            this.metadata = payload.metadata;
+        }
     }
 }
-// Another thin wrapper class to enable revealing individual trace events (aka entries) in Timeline panel.
+/** Another thin wrapper class to enable revealing individual trace events (aka entries) in Timeline panel. **/
 export class RevealableEvent {
     event;
     // Only Trace.Types.Events.Event are passed in, but we can't depend on that type from SDK

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/sdk-meta.js

@@ -351,44 +351,46 @@ const UIStrings = {
     /**
      * @description Label of a checkbox in the DevTools settings UI.
      */
-    enableRemoteFileLoading: 'Allow `DevTools` to load resources, such as source maps, from remote file paths. Disabled by default for security reasons.',
+    enableRemoteFileLoading: 'Allow loading remote file path resources in DevTools',
+    /**
+     * @description Tooltip text for a setting that controls whether external resource can be loaded in DevTools.
+     */
+    remoteFileLoadingInfo: 'Example resource are source maps. Disabled by default for security reasons.',
     /**
      * @description Tooltip text for a setting that controls the network cache. Disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
      */
     networkCacheExplanation: 'Disabling the network cache will simulate a network experience similar to a first time visitor.',
+    /**
+     * @description Setting under the Sources category to toggle usage of JavaScript source maps.
+     */
+    javaScriptSourceMaps: 'JavaScript source maps',
+    /**
+     * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+     */
+    enableJavaScriptSourceMaps: 'Enable JavaScript source maps',
+    /**
+     * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+     */
+    disableJavaScriptSourceMaps: 'Disable JavaScript source maps',
+    /**
+     * @description Title of a setting under the Sources category
+     */
+    cssSourceMaps: 'CSS source maps',
+    /**
+     * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+     */
+    enableCssSourceMaps: 'Enable CSS source maps',
+    /**
+     * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+     */
+    disableCssSourceMaps: 'Disable CSS source maps',
+    /**
+     * @description Title of a setting under the Console category in Settings
+     */
+    logXmlhttprequests: 'Log XMLHttpRequests',
 };
 const str_ = i18n.i18n.registerUIStrings('core/sdk/sdk-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-Common.Settings.registerSettingExtension({
-    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
-    settingName: 'skip-stack-frames-pattern',
-    settingType: "regex" /* Common.Settings.SettingType.REGEX */,
-    defaultValue: '/node_modules/|^node:',
-});
-Common.Settings.registerSettingExtension({
-    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
-    settingName: 'skip-content-scripts',
-    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
-    defaultValue: true,
-});
-Common.Settings.registerSettingExtension({
-    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
-    settingName: 'automatically-ignore-list-known-third-party-scripts',
-    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
-    defaultValue: true,
-});
-Common.Settings.registerSettingExtension({
-    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
-    settingName: 'skip-anonymous-scripts',
-    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
-    defaultValue: false,
-});
-Common.Settings.registerSettingExtension({
-    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
-    settingName: 'enable-ignore-listing',
-    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
-    defaultValue: true,
-});
 Common.Settings.registerSettingExtension({
     category: "CONSOLE" /* Common.Settings.SettingCategory.CONSOLE */,
     storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
@@ -1114,4 +1116,51 @@ Common.Settings.registerSettingExtension({
     settingName: 'network.enable-remote-file-loading',
     settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
     defaultValue: false,
+    learnMore: {
+        tooltip: i18nLazyString(UIStrings.remoteFileLoadingInfo),
+    }
+});
+Common.Settings.registerSettingExtension({
+    category: "SOURCES" /* Common.Settings.SettingCategory.SOURCES */,
+    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
+    title: i18nLazyString(UIStrings.javaScriptSourceMaps),
+    settingName: 'js-source-maps-enabled',
+    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
+    defaultValue: true,
+    options: [
+        {
+            value: true,
+            title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
+        },
+        {
+            value: false,
+            title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
+        },
+    ],
+});
+Common.Settings.registerSettingExtension({
+    category: "SOURCES" /* Common.Settings.SettingCategory.SOURCES */,
+    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
+    title: i18nLazyString(UIStrings.cssSourceMaps),
+    settingName: 'css-source-maps-enabled',
+    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
+    defaultValue: true,
+    options: [
+        {
+            value: true,
+            title: i18nLazyString(UIStrings.enableCssSourceMaps),
+        },
+        {
+            value: false,
+            title: i18nLazyString(UIStrings.disableCssSourceMaps),
+        },
+    ],
+});
+Common.Settings.registerSettingExtension({
+    category: "CONSOLE" /* Common.Settings.SettingCategory.CONSOLE */,
+    storageType: "Synced" /* Common.Settings.SettingStorageType.SYNCED */,
+    title: i18nLazyString(UIStrings.logXmlhttprequests),
+    settingName: 'monitoring-xhr-enabled',
+    settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
+    defaultValue: false,
 });