chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/third_party/puppeteer/package/src/node/ScreenRecorder.ts

@@ -26,7 +26,7 @@ import {
 import {CDPSessionEvent} from '../api/CDPSession.js';
 import type {BoundingBox} from '../api/ElementHandle.js';
 import type {Page, VideoFormat} from '../api/Page.js';
-import {debug} from '../common/Debug.js';
+import {debug, DEBUG_PREFIXES, type Logger} from '../common/Debug.js';
 import {fromEmitterEvent, debugCatchError} from '../common/util.js';
 import {guarded} from '../util/decorators.js';
 import {asyncDisposeSymbol} from '../util/disposable.js';
@@ -34,8 +34,6 @@ import {asyncDisposeSymbol} from '../util/disposable.js';
 const CRF_VALUE = 30;
 const DEFAULT_FPS = 30;
 
-const debugFfmpeg = debug('puppeteer:ffmpeg');
-
 /**
  * Computes how many encoder frames to emit for a captured frame that spans
  * `[previousTimestamp, timestamp]`, so that the cumulative number of emitted
@@ -96,6 +94,7 @@ export class ScreenRecorder extends PassThrough {
   #lastFrame: Promise<readonly [Buffer, number]>;
 
   #fps: number;
+  #debugFfmpeg: ((...args: unknown[]) => void) | undefined;
 
   /**
    * @internal
@@ -118,9 +117,12 @@ export class ScreenRecorder extends PassThrough {
       path,
       overwrite,
     }: ScreenRecorderOptions = {},
+    logger: Logger = debug,
   ) {
     super({allowHalfOpen: false});
 
+    this.#debugFfmpeg = logger(DEBUG_PREFIXES.ffmpeg);
+
     ffmpegPath ??= 'ffmpeg';
     format ??= 'webm';
     fps ??= DEFAULT_FPS;
@@ -216,7 +218,7 @@ export class ScreenRecorder extends PassThrough {
     );
     this.#process.stdout.pipe(this);
     this.#process.stderr.on('data', (data: Buffer) => {
-      debugFfmpeg?.(data.toString('utf8'));
+      this.#debugFfmpeg?.(data.toString('utf8'));
     });
 
     this.#page = page;

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '151.0.7922.47',
-  'chrome-headless-shell': '151.0.7922.47',
-  firefox: 'stable_152.0.5',
+  chrome: '151.0.7922.71',
+  'chrome-headless-shell': '151.0.7922.71',
+  firefox: 'stable_153.0.1',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '25.4.0';
+export const packageVersion = '25.5.0';
 // x-release-please-end

package/front_end/tsconfig.compatibility.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "noEmit": false
   },
   "files": ["devtools_compatibility.js"],
   "references": [{ "path": "./tsconfig.json" }]

package/front_end/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../config/typescript/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "ignored",
     "rootDir": ".",
     "target": "ES2023",
+    "noEmit": true,
     "lib": [
       "ES2023",
       "ES2024.Promise",

package/front_end/ui/components/icon_button/IconButton.ts

@@ -29,7 +29,7 @@ export interface IconButtonData {
 }
 
 export class IconButton extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
   #clickHandler?: () => void;
   #groups: IconWithTextData[] = [];
   #compact = false;

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -96,7 +96,7 @@ export function getIssueCountsEnumeration(
 }
 
 export class IssueCounter extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
   #clickHandler?: () => void;
   #tooltipCallback?: () => void;
   #leadingText = '';

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../tooltips/tooltips.js';
-import './SettingDeprecationWarning.js';
 import '../../kit/kit.js';
 
 import type * as Common from '../../../core/common/common.js';
@@ -32,6 +31,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface SettingCheckboxData {
   setting: Common.Settings.Setting<boolean>;
   textOverride?: string;
+  disabled?: boolean;
 }
 
 /**
@@ -43,6 +43,7 @@ export class SettingCheckbox extends HTMLElement {
   #setting?: Common.Settings.Setting<boolean>;
   #changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
   #textOverride?: string;
+  #disabled?: boolean;
 
   set data(data: SettingCheckboxData) {
     if (this.#changeListenerDescriptor && this.#setting) {
@@ -51,6 +52,7 @@ export class SettingCheckbox extends HTMLElement {
 
     this.#setting = data.setting;
     this.#textOverride = data.textOverride;
+    this.#disabled = data.disabled;
 
     this.#changeListenerDescriptor = this.#setting.addChangeListener(() => {
       this.#render();
@@ -63,11 +65,6 @@ export class SettingCheckbox extends HTMLElement {
       return undefined;
     }
 
-    if (this.#setting.deprecation) {
-      return html`<devtools-setting-deprecation-warning .data=${
-          this.#setting.deprecation}></devtools-setting-deprecation-warning>`;
-    }
-
     const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(this.#setting.descriptor());
     const learnMore = uiDescriptor?.learnMore ?? this.#setting.learnMore();
     if (learnMore) {
@@ -160,7 +157,7 @@ export class SettingCheckbox extends HTMLElement {
           <input
             type="checkbox"
             .checked=${this.checked}
-            ?disabled=${this.#setting.disabled()}
+            ?disabled=${this.#disabled || this.#setting.disabled()}
             @change=${this.#checkboxChanged}
             jslog=${VisualLogging.toggle().track({change: true}).context(this.#setting.name)}
             aria-label=${titleText}

package/front_end/ui/components/settings/settings.ts

@@ -3,6 +3,5 @@
 // found in the LICENSE file.
 
 import * as SettingCheckbox from './SettingCheckbox.js';
-import * as SettingDeprecationWarning from './SettingDeprecationWarning.js';
 
-export {SettingCheckbox, SettingDeprecationWarning};
+export {SettingCheckbox};

package/front_end/ui/legacy/Treeoutline.ts

@@ -35,6 +35,8 @@
  */
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as TextUtils from '../../core/text_utils/text_utils.js';
@@ -60,6 +62,23 @@ import {
   isEditing,
 } from './UIUtils.js';
 
+const UIStrings = {
+  /**
+   * @description Screen reader announcement made when the user expands a tree item, such as a DOM
+   * node in the Elements panel. Uses a polite live region so the tree item's name, role, and
+   * position are announced before this state update.
+   */
+  expanded: 'expanded',
+  /**
+   * @description Screen reader announcement made when the user collapses a tree item, such as a DOM
+   * node in the Elements panel. Uses a polite live region so the tree item's name, role, and
+   * position are announced before this state update.
+   */
+  collapsed: 'collapsed',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/Treeoutline.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 const nodeToParentTreeElementMap = new WeakMap<Node, TreeElement>();
 const {render} = Lit;
 
@@ -953,17 +972,7 @@ export class TreeElement {
       return;
     }
 
-    if (this.expanded) {
-      if (event.altKey) {
-        this.collapseRecursively();
-      } else {
-        this.collapse();
-      }
-    } else if (event.altKey) {
-      void this.expandRecursively();
-    } else {
-      this.expand();
-    }
+    void this.#setExpandedFromUser(!this.expanded, event.altKey);
     void VisualLogging.logClick(this.expandLoggable, event);
     event.consume();
   }
@@ -998,7 +1007,30 @@ export class TreeElement {
       return;
     }
     if (this.expandable && !this.expanded) {
-      this.expand();
+      void this.#setExpandedFromUser(true, false);
+    }
+  }
+
+  async #setExpandedFromUser(shouldExpand: boolean, recursively: boolean): Promise<void> {
+    const wasExpanded = this.expanded;
+    if (shouldExpand) {
+      if (recursively) {
+        await this.expandRecursively();
+      } else {
+        this.expand();
+      }
+    } else if (recursively) {
+      this.collapseRecursively();
+    } else {
+      this.collapse();
+    }
+
+    // When a tree item stays focused, VoiceOver on macOS does not announce the updated
+    // `aria-expanded` state, leaving the user without feedback. Other screen readers announce it
+    // natively, so restrict this live-region announcement to macOS to avoid announcing the state
+    // twice elsewhere.
+    if (this.expanded !== wasExpanded && Host.Platform.isMac()) {
+      ARIAUtils.LiveAnnouncer.status(this.expanded ? i18nString(UIStrings.expanded) : i18nString(UIStrings.collapsed));
     }
   }
 
@@ -1094,11 +1126,7 @@ export class TreeElement {
 
   collapseOrAscend(altKey: boolean): boolean {
     if (this.expanded && this.collapsible) {
-      if (altKey) {
-        this.collapseRecursively();
-      } else {
-        this.collapse();
-      }
+      void this.#setExpandedFromUser(false, altKey);
       return true;
     }
 
@@ -1129,11 +1157,7 @@ export class TreeElement {
     }
 
     if (!this.expanded) {
-      if (altKey) {
-        void this.expandRecursively();
-      } else {
-        this.expand();
-      }
+      void this.#setExpandedFromUser(true, altKey);
       return true;
     }
 
@@ -1291,15 +1315,13 @@ export class TreeElement {
   }
 
   onenter(): boolean {
-    if (this.expandable && !this.expanded) {
-      this.expand();
-      return true;
-    }
-    if (this.collapsible && this.expanded) {
-      this.collapse();
-      return true;
+    // Expanding requires an expandable node; collapsing requires a collapsible one.
+    const canToggle = this.expanded ? this.collapsible : this.expandable;
+    if (!canToggle) {
+      return false;
     }
-    return false;
+    void this.#setExpandedFromUser(!this.expanded, false);
+    return true;
   }
 
   ondelete(): boolean {

package/front_end/ui/legacy/components/object_ui/CSSStyleSanitizer.ts

@@ -0,0 +1,74 @@
+// Copyright 2026 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 type * as Platform from '../../../../core/platform/platform.js';
+
+/**
+ * Builds a regex fragment that matches a CSS identifier even when written
+ * with hex escapes (e.g. `\75\72\6c` for `url`).
+ */
+export function cssEscapeRegex(cssString: string): string {
+  return [...cssString]
+      .map(char => {
+        const charCodes = new Set([char.toLowerCase(), char.toUpperCase()].map(c => c.charCodeAt(0).toString(16)));
+        const charCodeRegex =
+            [...charCodes].map(charCode => `\\\\0{0,${6 - charCode.length}}${charCode}[ \\n\\t]?`).join('|');
+        return `\\\\?(?:${charCodeRegex}|${char})`;
+      })
+      .join('');
+}
+
+const ALLOWED_PROPERTY_PREFIXES = ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
+
+// We only allow data URLs with the `url()` CSS function.
+// The capture group is not intended to grab the whole URL exactly, just enough so we can check the scheme.
+// The regex also covers CSS hex-escaped variations of `url()`.
+const URL_REGEX = new RegExp(`(?=${cssEscapeRegex('url')}\\(['"]?([^\\)]*))`, 'gi');
+
+// We greedily capture all `image-set()`s to make sure that all of
+// them properly use `url()`s to enforce the data URL check later.
+const IMAGESET_REGEX = new RegExp(`(?=(${cssEscapeRegex('image-set')}\\(.*))`, 'gi');
+const GOOD_IMAGESET_REGEX = /^image-set\((?:(?:(?:url|type)\("[^\\"]*"\)|[\d.]+(?:x|dpi|dpcm|dppx)),?\s*)+\)/i;
+
+/**
+ * Parses `styleToAdd` as a CSS style string and populates `currentStyle`
+ * with only the properties that pass safety checks:
+ *   - Property name must start with one of the allowed prefixes.
+ *   - `url()` values must use `data:` scheme only.
+ *   - `image-set()` values must use properly formed `url()`s.
+ *
+ * The map is cleared before being populated.
+ */
+export function sanitizeStyle(currentStyle: Map<string, {value: string, priority: string}>, styleToAdd: string): void {
+  currentStyle.clear();
+  // eslint-disable-next-line @devtools/no-imperative-dom-api
+  const buffer = document.createElement('span');
+  buffer.setAttribute('style', styleToAdd);
+  for (const property of buffer.style) {
+    if (!ALLOWED_PROPERTY_PREFIXES.some(prefix =>
+                                            property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
+      continue;
+    }
+
+    const value = buffer.style.getPropertyValue(property);
+    // We make sure every `image-set()` only uses `url()`s for its images.
+    // If any of them seem malformed, we skip the whole property.
+    const imageSets = [...value.matchAll(IMAGESET_REGEX)];
+    if (imageSets.some(match => !GOOD_IMAGESET_REGEX.test(match[1]))) {
+      continue;
+    }
+    // There could be multiple `url()` functions, so we check them all.
+    // If any of them is not a `data` URL, we skip the whole property.
+    const potentialUrls = [...value.matchAll(URL_REGEX)].map(match => match[1]);
+    if (potentialUrls.some(potentialUrl =>
+                               !Common.ParsedURL.schemeIs(potentialUrl as Platform.DevToolsPath.UrlString, 'data:'))) {
+      continue;
+    }
+    currentStyle.set(property, {
+      value,
+      priority: buffer.style.getPropertyPriority(property),
+    });
+  }
+}

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -10,6 +10,7 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import {createIcon, type Icon} from '../../../kit/kit.js';
 import * as UI from '../../legacy.js';
 
+import {sanitizeStyle} from './CSSStyleSanitizer.js';
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
 import {
   ObjectPropertiesMode,
@@ -108,7 +109,11 @@ export class CustomPreviewSection {
           continue;
         }
 
-        element.setAttribute(key, value);
+        const sanitizedStyle = new Map<string, {value: string, priority: string}>();
+        sanitizeStyle(sanitizedStyle, value);
+        for (const [property, {value: propertyValue, priority}] of sanitizedStyle) {
+          element.style.setProperty(property, propertyValue, priority);
+        }
       }
     }
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -46,6 +46,7 @@ import {
   type LitTemplate,
   nothing,
   render,
+  type TemplateResult,
 } from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -1051,31 +1052,9 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return 0;
   }
 
-  static createNameElement(name: string|null, isPrivate?: boolean): Element {
-    const element = document.createElement('span');
-    element.classList.add('name');
-    if (name === null) {
-      return element;
-    }
-    const escapedName = Platform.StringUtilities.escapeUnicodeAsText(name);
-    if (/^\s|\s$|^$|\n/.test(escapedName)) {
-      element.textContent = `"${escapedName.replace(/\n/g, '\u21B5')}"`;
-      return element;
-    }
-    if (isPrivate) {
-      const privatePropertyHash = document.createElement('span');
-      privatePropertyHash.classList.add('private-property-hash');
-      privatePropertyHash.textContent = escapedName[0];
-      element.appendChild(privatePropertyHash);
-      element.appendChild(document.createTextNode(escapedName.substring(1)));
-      return element;
-    }
-    element.textContent = escapedName;
-    return element;
-  }
-
   static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string,
-                                            className?: string): LitTemplate {
+                                            details?: SDK.DebuggerModel.FunctionDetails|null,
+                                            linkify?: boolean): LitTemplate {
     const contents =
         (description: string, defaultName: string): {prefix: string, abbreviation: string, body: string} => {
           const text = description.replace(/^function [gs]et /, 'function ')
@@ -1132,10 +1111,23 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
     const {prefix, body, abbreviation} = contents(description ?? '', defaultName ?? '');
     const maxFunctionBodyLength = 200;
+
+    const location = details?.location;
+    const clickHandler = linkify && location ? (event: Event) => {
+      void Common.Revealer.reveal(location);
+      event.consume(true);
+    } : undefined;
+
+    const classes = classMap({
+      'object-value-function': true,
+      linkified: Boolean(linkify && location),
+    });
+    const title = description ? Platform.StringUtilities.trimEndWithMaxLength(description, 500) : undefined;
+
     return html`<span
-      class="object-value-function ${className ?? ''}"
-      title=${Platform.StringUtilities.trimEndWithMaxLength(description ?? '', 500)}>${
-        prefix && html`<span class=object-value-function-prefix>${prefix} </span>`}${
+      class=${classes}
+      @click=${clickHandler || nothing}
+      title=${ifDefined(title)}>${prefix && html`<span class=object-value-function-prefix>${prefix} </span>`}${
         includePreview ? Platform.StringUtilities.trimEndWithMaxLength(body.trim(), maxFunctionBodyLength) :
                          abbreviation.replace(/\n/g, ' ')}</span>`;
 
@@ -1221,7 +1213,8 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
             tooLong ? widget(ExpandableTextPropertyValue, {text}) : renderTrustedType(description, className)}</span>`;
       }
       if (type === 'function') {
-        return ObjectPropertiesSection.valueElementForFunctionDescription(description, undefined, undefined, 'value');
+        return html`<span class="value">${
+            ObjectPropertiesSection.valueElementForFunctionDescription(description)}</span>`;
       }
       if (type === 'object' && subtype === 'node' && description) {
         return html`<span class="value object-value-node"
@@ -1263,32 +1256,6 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return child;
   }
 
-  static formatObjectAsFunction(func: SDK.RemoteObject.RemoteObject, element: Element, linkify: boolean,
-                                includePreview?: boolean): Promise<void> {
-    return func.debuggerModel().functionDetailsPromise(func).then(didGetDetails);
-
-    function didGetDetails(response: SDK.DebuggerModel.FunctionDetails|null): void {
-      if (linkify && response?.location) {
-        element.classList.add('linkified');
-        element.addEventListener('click', () => {
-          void Common.Revealer.reveal(response.location);
-          return false;
-        });
-      }
-
-      // The includePreview flag is false for formats such as console.dir().
-      let defaultName: string|('' | 'anonymous') = includePreview ? '' : 'anonymous';
-      if (response?.functionName) {
-        defaultName = response.functionName;
-      }
-      const valueElement = document.createDocumentFragment();
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName),
-             valueElement);
-      element.appendChild(valueElement);
-    }
-  }
-
   static isDisplayableProperty(property: SDK.RemoteObject.RemoteObjectProperty,
                                parentProperty?: SDK.RemoteObject.RemoteObjectProperty): boolean {
     if (!parentProperty?.synthetic) {
@@ -1532,6 +1499,32 @@ class RootElement extends UI.TreeOutline.TreeElement {
   }
 }
 
+export function renderPropertyName(name: string|null, isPrivate?: boolean, title?: string): TemplateResult {
+  if (name === null) {
+    return html`<span class="name" title=${ifDefined(title)}></span>`;
+  }
+  const escapedName = Platform.StringUtilities.escapeUnicodeAsText(name);
+  if (/^\s|\s$|^$|\n/.test(escapedName)) {
+    return html`<span class="name" title=${ifDefined(title)}>"${escapedName.replace(/\n/g, '\u21B5')}"</span>`;
+  }
+  if (isPrivate) {
+    return html`<span class="name" title=${ifDefined(title)}><span class="private-property-hash">${
+        escapedName[0]}</span>${escapedName.substring(1)}</span>`;
+  }
+  return html`<span class="name" title=${ifDefined(title)}>${escapedName}</span>`;
+}
+
+export async function formatObjectAsFunction(func: SDK.RemoteObject.RemoteObject, linkify: boolean,
+                                             includePreview?: boolean): Promise<LitTemplate> {
+  const details = await func.debuggerModel().functionDetailsPromise(func);
+
+  // The includePreview flag is false for formats such as console.dir().
+  const defaultName = details?.functionName ?? (includePreview ? '' : 'anonymous');
+
+  return ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName,
+                                                                    details, linkify);
+}
+
 /**
  * Number of initially visible children in an ObjectPropertyTreeElement.
  * Remaining children are shown as soon as requested via a show more properties button.

package/front_end/ui/legacy/components/object_ui/object_ui.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as CSSStyleSanitizer from './CSSStyleSanitizer.js';
 import * as CustomPreviewComponent from './CustomPreviewComponent.js';
 import * as JavaScriptREPL from './JavaScriptREPL.js';
 import * as ObjectPopoverHelper from './ObjectPopoverHelper.js';
@@ -9,6 +10,7 @@ import * as ObjectPropertiesSection from './ObjectPropertiesSection.js';
 import * as RemoteObjectPreviewFormatter from './RemoteObjectPreviewFormatter.js';
 
 export {
+  CSSStyleSanitizer,
   CustomPreviewComponent,
   JavaScriptREPL,
   ObjectPopoverHelper,

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -38,10 +38,6 @@ const UIStrings = {
    * @description Text for help title of run command menu
    */
   runCommand: 'Run command',
-  /**
-   * @description Hint text to indicate that a selected command is deprecated
-   */
-  deprecated: '— deprecated',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/CommandMenu.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -75,7 +71,6 @@ export class CommandMenu {
       executeHandler,
       availableHandler,
       userActionCode,
-      deprecationWarning,
       isPanelOrDrawer,
       featurePromotionId,
     } = options;
@@ -89,9 +84,8 @@ export class CommandMenu {
         // not here
       };
     }
-    return new Command(
-        category, title, keys, shortcut, jslogContext, handler, availableHandler, deprecationWarning, isPanelOrDrawer,
-        featurePromotionId);
+    return new Command(category, title, keys, shortcut, jslogContext, handler, availableHandler, isPanelOrDrawer,
+                       featurePromotionId);
   }
 
   static createSettingCommand<V>(setting: Common.Settings.Setting<V>, title: Common.UIString.LocalizedString, value: V,
@@ -111,11 +105,6 @@ export class CommandMenu {
       shortcut: '',
       jslogContext: Platform.StringUtilities.toKebabCase(`${setting.name}-${value}`),
       executeHandler: () => {
-        if (setting.deprecation?.disabled &&
-            (!setting.deprecation?.experiment || setting.deprecation.experiment.isEnabled())) {
-          void Common.Revealer.reveal(setting);
-          return;
-        }
         setting.set(value);
 
         if (setting.name === 'emulate-page-focus') {
@@ -128,7 +117,6 @@ export class CommandMenu {
         }
       },
       availableHandler,
-      deprecationWarning: setting.deprecation?.warning,
     });
 
     function availableHandler(): boolean {
@@ -273,7 +261,6 @@ export interface CreateCommandOptions {
   executeHandler: () => void;
   availableHandler?: () => boolean;
   userActionCode?: number;
-  deprecationWarning?: Platform.UIString.LocalizedString;
   isPanelOrDrawer?: PanelOrDrawer;
   featurePromotionId?: string;
 }
@@ -357,7 +344,6 @@ export class CommandMenuProvider extends Provider {
   override renderItem(itemIndex: number, query: string): TemplateResult {
     const command = this.commands[itemIndex];
     const badge = command.featurePromotionId ? UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId) : undefined;
-    const deprecationWarning = command.deprecationWarning;
     // clang-format off
     return html`
       <devtools-icon name=${categoryIcons[command.category]}></devtools-icon>
@@ -367,10 +353,6 @@ export class CommandMenuProvider extends Provider {
         </devtools-highlight>
         ${badge ?? nothing}
         <div>${command.shortcut}</div>
-        ${deprecationWarning ? html`
-          <span class="deprecated-tag" title=${deprecationWarning}>
-            ${i18nString(UIStrings.deprecated)}
-          </span>` : nothing}
       </div>
       <span class="tag">${command.category}</span>`;
     // clang-format on
@@ -422,18 +404,15 @@ export class Command {
   readonly key: string;
   readonly shortcut: string;
   readonly jslogContext: string;
-  readonly deprecationWarning?: Platform.UIString.LocalizedString;
   readonly isPanelOrDrawer?: PanelOrDrawer;
   readonly featurePromotionId?: string;
 
   readonly #executeHandler: () => unknown;
   readonly #availableHandler?: () => boolean;
 
-  constructor(
-      category: Common.UIString.LocalizedString, title: Common.UIString.LocalizedString, key: string, shortcut: string,
-      jslogContext: string, executeHandler: () => unknown, availableHandler?: () => boolean,
-      deprecationWarning?: Platform.UIString.LocalizedString, isPanelOrDrawer?: PanelOrDrawer,
-      featurePromotionId?: string) {
+  constructor(category: Common.UIString.LocalizedString, title: Common.UIString.LocalizedString, key: string,
+              shortcut: string, jslogContext: string, executeHandler: () => unknown, availableHandler?: () => boolean,
+              isPanelOrDrawer?: PanelOrDrawer, featurePromotionId?: string) {
     this.category = category;
     this.title = title;
     this.key = category + '\0' + title + '\0' + key;
@@ -441,7 +420,6 @@ export class Command {
     this.jslogContext = jslogContext;
     this.#executeHandler = executeHandler;
     this.#availableHandler = availableHandler;
-    this.deprecationWarning = deprecationWarning;
     this.isPanelOrDrawer = isPanelOrDrawer;
     this.featurePromotionId = featurePromotionId;
   }