chrome-devtools-frontend 1.0.1545096 → 1.0.1547147

package/docs/styleguide/ux/styles.md

@@ -29,7 +29,7 @@ tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design
 name e.g. `--sys-color-error-container`). They reference palette tokens and
 incorporate light / dark mode switches and should be used in the code directly.
 You can view all system tokens in their light and dark variant when running the
-component server with `npm run components-server` under *Theme Colors*.
+component server on our [component documentation page](https://chromedevtools.github.io/devtools-frontend/#ThemeColors).
 
 [**Application
 tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens.css)

package/eslint.config.mjs

@@ -60,7 +60,7 @@ export default defineConfig([
     'scripts/protocol_typescript/*.js',
     'scripts/deps/tests/fixtures',
     'test/**/fixtures/',
-    'test/e2e/**/*.js',
+    'test/e2e_non_hosted/**/*.js',
     'test/shared/**/*.js',
   ]),
   {

package/front_end/Images/src/arrow-down.svg

@@ -1,3 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.25 3V14.125L7.062 11.938L6 13L10 17L14 13L12.938 11.938L10.75 14.125V3H9.25Z" fill="black"/>
+<g clip-path="url(#clip0_4041_3016)">
+<path d="M9.25 4H10.75V13.125L14.9375 8.9375L16 10L10 16L4 10L5.0625 8.9375L9.25 13.125V4Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4041_3016">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/front_end/Images/src/arrow-up.svg

@@ -1,3 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.25 17V5.875L7.062 8.062L6 7L10 3L14 7L12.938 8.062L10.75 5.875V17H9.25Z" fill="black"/>
+<g clip-path="url(#clip0_4041_3013)">
+<path d="M9.25 16V6.875L5.0625 11.0625L4 10L10 4L16 10L14.9375 11.0625L10.75 6.875V16H9.25Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4041_3013">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/front_end/core/host/AidaClient.ts

@@ -733,7 +733,7 @@ export function convertToUserTierEnum(userTier: string|undefined): UserTier {
         return UserTier.PUBLIC;
     }
   }
-  return UserTier.BETA;
+  return UserTier.PUBLIC;
 }
 
 let hostConfigTrackerInstance: HostConfigTracker|undefined;

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -549,7 +549,6 @@ export const enum EnumeratedHistogram {
   LighthouseModeRun = 'DevTools.LighthouseModeRun',
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
   SwatchActivated = 'DevTools.SwatchActivated',
-  AnimationPlaybackRateChanged = 'DevTools.AnimationPlaybackRateChanged',
   BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/UserMetrics.ts

@@ -269,11 +269,6 @@ export class UserMetrics {
         EnumeratedHistogram.SwatchActivated, swatch, SwatchType.MAX_VALUE);
   }
 
-  animationPlaybackRateChanged(playbackRate: AnimationsPlaybackRate): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.AnimationPlaybackRateChanged, playbackRate, AnimationsPlaybackRate.MAX_VALUE);
-  }
-
   workspacesPopulated(wallClockTimeInMilliseconds: number): void {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Workspaces.PopulateWallClocktime', wallClockTimeInMilliseconds);

package/front_end/core/platform/HostRuntime.ts

@@ -0,0 +1,18 @@
+// 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 type * as Api from './api/api.js';
+import * as Browser from './browser/browser.js';
+import * as Node from './node/node.js';
+
+export const HOST_RUNTIME = ((): Api.HostRuntime.HostRuntime => {
+  if (Node.HostRuntime.IS_NODE) {
+    return Node.HostRuntime.HOST_RUNTIME;
+  }
+  if (Browser.HostRuntime.IS_BROWSER) {
+    return Browser.HostRuntime.HOST_RUNTIME;
+  }
+
+  throw new Error('Unknown runtime!');
+})();

package/front_end/core/platform/KeyboardUtilities.ts

@@ -29,10 +29,10 @@ export function keyIsArrowKey(key: string): key is ArrowKey {
   return ARROW_KEYS.has(key as ArrowKey);
 }
 
-export function isEscKey(event: KeyboardEvent): boolean {
+export function isEscKey(event: {readonly key: string}): boolean {
   return event.key === 'Escape';
 }
 
-export function isEnterOrSpaceKey(event: KeyboardEvent): boolean {
+export function isEnterOrSpaceKey(event: {readonly key: string}): boolean {
   return event.key === 'Enter' || event.key === ' ';
 }

package/front_end/core/platform/StringUtilities.ts

@@ -584,5 +584,5 @@ export const concatBase64 = function(lhs: string, rhs: string): string {
   }
   const lhsLeaveAsIs = lhs.substring(0, lhs.length - 4);
   const lhsToDecode = lhs.substring(lhs.length - 4);
-  return lhsLeaveAsIs + window.btoa(window.atob(lhsToDecode) + window.atob(rhs));
+  return lhsLeaveAsIs + globalThis.btoa(globalThis.atob(lhsToDecode) + globalThis.atob(rhs));
 };

package/front_end/core/platform/api/HostRuntime.ts

@@ -0,0 +1,20 @@
+// 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.
+
+/**
+ * Provides abstractions for host features that require different implementations depending
+ * on whether DevTools runs in the browser or Node.js
+ */
+export interface HostRuntime {
+  createWorker(url: string): Worker;
+}
+
+/**
+ * Abstracts away the differences between browser web workers and Node.js worker threads.
+ */
+export interface Worker {
+  // TODO(crbug.com/461952544): Actually add some methods here.
+  // Leave one marker method to make this non-empty.
+  dispose?(): void;
+}

package/front_end/core/platform/api/api.ts

@@ -0,0 +1,7 @@
+// 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 HostRuntime from './HostRuntime.js';
+
+export {HostRuntime};

package/front_end/core/platform/browser/HostRuntime.ts

@@ -0,0 +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.
+
+import type * as Api from '../api/api.js';
+
+export const IS_BROWSER =
+    typeof window !== 'undefined' || (typeof self !== 'undefined' && typeof self.postMessage === 'function');
+
+export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
+  createWorker(): Api.HostRuntime.Worker {
+    throw new Error('unimplemented');
+  }
+};

package/front_end/core/platform/browser/browser.ts

@@ -0,0 +1,7 @@
+// 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 HostRuntime from './HostRuntime.js';
+
+export {HostRuntime};

package/front_end/core/platform/node/HostRuntime.ts

@@ -0,0 +1,13 @@
+// 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 type * as Api from '../api/api.js';
+
+export const IS_NODE = typeof (process as unknown) !== 'undefined' && process.versions?.node !== null;
+
+export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
+  createWorker(): Api.HostRuntime.Worker {
+    throw new Error('unimplemented');
+  }
+};

package/front_end/core/platform/node/node.ts

@@ -0,0 +1,7 @@
+// 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 HostRuntime from './HostRuntime.js';
+
+export {HostRuntime};

package/front_end/core/platform/platform.ts

@@ -7,7 +7,7 @@ import * as Brand from './Brand.js';
 import * as Constructor from './Constructor.js';
 import * as DateUtilities from './DateUtilities.js';
 import * as DevToolsPath from './DevToolsPath.js';
-import * as DOMUtilities from './DOMUtilities.js';
+import * as HostRuntime from './HostRuntime.js';
 import * as KeyboardUtilities from './KeyboardUtilities.js';
 import * as MapUtilities from './MapUtilities.js';
 import * as MimeType from './MimeType.js';
@@ -31,7 +31,7 @@ export {
   Constructor,
   DateUtilities,
   DevToolsPath,
-  DOMUtilities,
+  HostRuntime,
   KeyboardUtilities,
   MapUtilities,
   MimeType,

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -26,35 +26,114 @@ export class SourceMapScopesInfo {
   }
 
   /**
-   * If the source map does not contain any scopes information, this factory function attempts to create bare bones scope information
+   * 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.
-   * We don't map the bounds via mappings as mappings are often iffy and it's not strictly required to translate stack traces where we
-   * map call-sites separately.
    */
   static createFromAst(
       sourceMap: SourceMap, scopeTree: Formatter.FormatterWorkerPool.ScopeTreeNode,
       text: TextUtils.Text.Text): SourceMapScopesInfo {
-    const {scope, range} = convertScope(scopeTree, undefined, undefined);
-    return new SourceMapScopesInfo(sourceMap, {scopes: [scope], ranges: [range]});
+    const numSourceUrls = sourceMap.sourceURLs().length;
+    const scopeBySourceUrl: ScopesCodec.OriginalScope[] = [];
+    for (let i = 0; i < numSourceUrls; i++) {
+      const scope: ScopesCodec.OriginalScope = {
+        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: ScopesCodec.OriginalScope, newScope: ScopesCodec.OriginalScope): void {
+      // 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: ScopesCodec.OriginalScope[] = [];
+      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: ScopesCodec.OriginalScope, inner: ScopesCodec.OriginalScope): boolean {
+      return comparePositions(outer.start, inner.start) <= 0 && comparePositions(outer.end, inner.end) >= 0;
+    }
+
+    function compareScopes(a: ScopesCodec.OriginalScope, b: ScopesCodec.OriginalScope): number {
+      return comparePositions(a.start, b.start);
+    }
+
+    function comparePositions(a: ScopesCodec.Position, b: ScopesCodec.Position): number {
+      if (a.line !== b.line) {
+        return a.line - b.line;
+      }
+      return a.column - b.column;
+    }
 
     function convertScope(
-        node: Formatter.FormatterWorkerPool.ScopeTreeNode, parentScope: ScopesCodec.OriginalScope|undefined,
-        parentRange: ScopesCodec.GeneratedRange|
-        undefined): {scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange} {
+        node: Formatter.FormatterWorkerPool.ScopeTreeNode,
+        parentRange: ScopesCodec.GeneratedRange|undefined): {range: ScopesCodec.GeneratedRange} {
       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 === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION;
 
-      const scope: ScopesCodec.OriginalScope = {
-        start,
-        end,
-        name: sourceMap.findEntry(start.line, start.column, 0)?.name,
-        isStackFrame,
-        variables: [],
-        children: [],
-      };
+      let scope: ScopesCodec.OriginalScope|undefined;
+      if (canMapOriginalPosition) {
+        scope = {
+          start: {line: startEntry.sourceLineNumber, column: startEntry.sourceColumnNumber},
+          end: {line: endEntry.sourceLineNumber, column: endEntry.sourceColumnNumber},
+          name: startEntry.name,
+          isStackFrame,
+          variables: [],
+          children: [],
+        };
+      }
 
       const range: ScopesCodec.GeneratedRange = {
         start,
@@ -67,11 +146,14 @@ export class SourceMapScopesInfo {
       };
 
       parentRange?.children.push(range);
-      parentScope?.children.push(scope);
+      if (canMapOriginalPosition && scope) {
+        const rootScope = scopeBySourceUrl[sourceIndex];
+        insertInScope(rootScope, scope);
+      }
 
-      node.children.forEach(child => convertScope(child, scope, range));
+      node.children.forEach(child => convertScope(child, range));
 
-      return {scope, range};
+      return {range};
     }
 
     function positionFromOffset(offset: number): ScopesCodec.Position {
@@ -347,7 +429,16 @@ export class SourceMapScopesInfo {
   /**
    * Returns the authored function name of the function containing the provided generated position.
    */
-  findOriginalFunctionName({line, column}: ScopesCodec.Position): string|null {
+  findOriginalFunctionName(position: ScopesCodec.Position): string|null {
+    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}: ScopesCodec.Position):
+      {scope: ScopesCodec.OriginalScope, url?: Platform.DevToolsPath.UrlString}|null {
     // 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).
@@ -376,7 +467,24 @@ export class SourceMapScopesInfo {
               .at(-1);
     }
 
-    return this.#findFunctionNameInOriginalScopeChain(originalInnerMostScope) ?? null;
+    if (!originalInnerMostScope) {
+      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: ScopesCodec.OriginalScope = 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;
   }
 
   /**
@@ -403,15 +511,25 @@ export class SourceMapScopesInfo {
     return result;
   }
 
-  #findFunctionNameInOriginalScopeChain(innerOriginalScope: ScopesCodec.OriginalScope|undefined): string|null {
+  #findFunctionScopeInOriginalScopeChain(innerOriginalScope: ScopesCodec.OriginalScope|undefined):
+      ScopesCodec.OriginalScope|null {
     for (let originalScope = innerOriginalScope; originalScope; originalScope = originalScope.parent) {
       if (originalScope.isStackFrame) {
-        return originalScope.name ?? '';
+        return originalScope;
       }
     }
     return null;
   }
 
+  #findFunctionNameInOriginalScopeChain(innerOriginalScope: ScopesCodec.OriginalScope|undefined): string|null {
+    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.
    *

package/front_end/core/sdk/Target.ts

@@ -7,7 +7,7 @@ import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 import * as ProtocolClient from '../protocol_client/protocol_client.js';
 
-import {SDKModel} from './SDKModel.js';
+import {SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import type {TargetManager} from './TargetManager.js';
 
 export class Target extends ProtocolClient.InspectorBackend.TargetBase {
@@ -111,20 +111,11 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
     this.#targetInfo = targetInfo;
   }
 
-  createModels(required: Set<new(arg1: Target) => SDKModel>): void {
+  /** Creates the models in the order in which they are provided */
+  createModels(models: SDKModelConstructor[]): void {
     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;
   }

package/front_end/core/sdk/TargetManager.ts

@@ -10,7 +10,7 @@ import {assertNotNullOrUndefined} from '../platform/platform.js';
 import type * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
 
-import {SDKModel, type SDKModelConstructor} from './SDKModel.js';
+import {type RegistrationInfo, SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import {Target, Type as TargetType} from './Target.js';
 
 export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -31,8 +31,12 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   #scopeTarget: Target|null;
   #defaultScopeSet: boolean;
   readonly #scopeChangeListeners: Set<() => void>;
+  readonly #overrideAutoStartModels?: Set<SDKModelConstructor>;
 
-  constructor() {
+  /**
+   * @param overrideAutoStartModels If provided, then the `autostart` flag on {@link RegistrationInfo} will be ignored.
+   */
+  constructor(overrideAutoStartModels?: Set<SDKModelConstructor>) {
     super();
     this.#targets = new Set();
     this.#observers = new Set();
@@ -44,6 +48,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.#scopedObservers = new WeakSet();
     this.#defaultScopeSet = false;
     this.#scopeChangeListeners = new Set();
+    this.#overrideAutoStartModels = overrideAutoStartModels;
   }
 
   static instance({forceNew}: {
@@ -205,6 +210,23 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     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(): SDKModelConstructor[] {
+    const earlyModels = new Set<SDKModelConstructor>();
+    const models = new Set<SDKModelConstructor>();
+    const shouldAutostart = (model: SDKModelConstructor, info: RegistrationInfo): boolean =>
+        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: Protocol.Target.TargetID|'main', name: string, type: TargetType, parentTarget: Target|null,
       sessionId?: string, waitForDebuggerInPage?: boolean, connection?: ProtocolClient.CDPConnection.CDPConnection,
@@ -214,7 +236,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     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);
@@ -316,7 +338,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
       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() as Protocol.Target.TargetID;

package/front_end/core/sdk/sdk-meta.ts

@@ -363,6 +363,30 @@ const UIStrings = {
    */
   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',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('core/sdk/sdk-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -1132,3 +1156,41 @@ Common.Settings.registerSettingExtension({
     tooltip: i18nLazyString(UIStrings.remoteFileLoadingInfo),
   }
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.javaScriptSourceMaps),
+  settingName: 'js-source-maps-enabled',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
+    },
+  ],
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.cssSourceMaps),
+  settingName: 'css-source-maps-enabled',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.enableCssSourceMaps),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.disableCssSourceMaps),
+    },
+  ],
+});

package/front_end/devtools_compatibility.js

@@ -450,7 +450,6 @@
     TimelineNavigationSettingState: 'DevTools.TimelineNavigationSettingState',
     SyncSetting: 'DevTools.SyncSetting',
     SwatchActivated: 'DevTools.SwatchActivated',
-    AnimationPlaybackRateChanged: 'DevTools.AnimationPlaybackRateChanged',
     BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability'
     // LINT.ThenChange(/front_end/core/host/InspectorFrontendHostAPI.ts:EnumeratedHistogram)
   };

package/front_end/entrypoints/main/MainImpl.ts

@@ -717,7 +717,7 @@ export class MainImpl {
     // @ts-expect-error Used in ElementsTreeOutline
     eventCopy['original'] = event;
     const document = event.target && (event.target as HTMLElement).ownerDocument;
-    const target = document ? Platform.DOMUtilities.deepActiveElement(document) : null;
+    const target = document ? UI.DOMUtilities.deepActiveElement(document) : null;
     if (target) {
       target.dispatchEvent(eventCopy);
     }
@@ -778,7 +778,7 @@ export class ZoomActionDelegate implements UI.ActionRegistration.ActionDelegate
 export class SearchActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     let searchableView = UI.SearchableView.SearchableView.fromElement(
-        Platform.DOMUtilities.deepActiveElement(document),
+        UI.DOMUtilities.deepActiveElement(document),
     );
     if (!searchableView) {
       const currentPanel = (UI.InspectorView.InspectorView.instance().currentPanelDeprecated() as UI.Panel.Panel);