chrome-devtools-frontend 1.0.1669021 → 1.0.1672388

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -1,2 +1,2 @@
-export{b5 as Annotation,b6 as AnnotationType,b7 as ChangeDesc,b8 as ChangeSet,b9 as Compartment,C as CompletionContext,bm as Decoration,v as EditorSelection,D as EditorState,S as EditorView,ba as Facet,bp as GutterMarker,aY as HighlightStyle,b as LRParser,o as Language,a as LanguageSupport,bb as Line,bc as MapMode,bu as MatchDecorator,l as NodeProp,m as NodeSet,N as NodeType,P as Parser,x as Prec,bd as Range,be as RangeSet,bf as RangeSetBuilder,bg as SelectionRange,bh as StateEffect,bi as StateEffectType,bj as StateField,a_ as StreamLanguage,a$ as StringStream,bG as StyleModule,T as Tag,bk as Text,bl as Transaction,n as Tree,bE as TreeCursor,bB as ViewPlugin,bC as ViewUpdate,bD as WidgetType,aj as acceptCompletion,Z as angular,ak as autocompletion,aU as bidiIsolates,aS as bracketMatching,_ as clojure,al as closeBrackets,am as closeBracketsKeymap,an as closeCompletion,aT as codeFolding,$ as coffeescript,ao as completeAnyWord,ap as completionStatus,a0 as cpp,a1 as css,af as cssStreamParser,aq as currentCompletions,aw as cursorGroupLeft,ax as cursorGroupRight,av as cursorMatchingBracket,ay as cursorSyntaxLeft,az as cursorSyntaxRight,a2 as dart,bn as drawSelection,aV as ensureSyntaxTree,aW as foldGutter,aX as foldKeymap,b2 as forceParsing,a4 as go,a3 as gss,bo as gutter,bq as gutters,b3 as highlightSelectionMatches,br as highlightSpecialChars,bF as highlightTree,aA as history,aB as historyKeymap,aQ as html,I as ifNotIn,aC as indentLess,aD as indentMore,aZ as indentOnInput,z as indentUnit,bH as indentationMarkers,aE as insertNewlineAndIndent,a5 as java,aR as javascript,y as keymap,a6 as kotlin,a7 as less,bs as lineNumberMarkers,bt as lineNumbers,a8 as markdown,ar as moveCompletionSelection,a9 as php,bv as placeholder,aa as python,aF as redo,aG as redoSelection,bw as repositionTooltips,ab as sass,ac as scala,bx as scrollPastEnd,aI as selectGroupLeft,aJ as selectGroupRight,aH as selectMatchingBracket,b4 as selectNextOccurrence,aK as selectSyntaxLeft,aL as selectSyntaxRight,as as selectedCompletion,at as selectedCompletionIndex,ad as shell,by as showPanel,bz as showTooltip,aM as standardKeymap,au as startCompletion,ae as svelte,b0 as syntaxHighlighting,b1 as syntaxParserRunning,u as syntaxTree,t as tags,aN as toggleComment,bA as tooltips,aO as undo,aP as undoSelection,ag as vue,ah as wast,ai as xml}from"./chunk/codemirror.js";
+export{A as Annotation,a as AnnotationType,C as ChangeDesc,b as ChangeSet,c as Compartment,d as CompletionContext,D as Decoration,E as EditorSelection,f as EditorState,g as EditorView,F as Facet,G as GutterMarker,H as HighlightStyle,i as LRParser,j as Language,l as LanguageSupport,m as Line,M as MapMode,o as MatchDecorator,N as NodeProp,p as NodeSet,q as NodeType,s as Parser,t as Prec,R as Range,u as RangeSet,v as RangeSetBuilder,S as SelectionRange,w as StateEffect,x as StateEffectType,y as StateField,z as StreamLanguage,B as StringStream,J as StyleModule,T as Tag,K as Text,O as Transaction,Q as Tree,U as TreeCursor,V as ViewPlugin,W as ViewUpdate,X as WidgetType,Y as acceptCompletion,Z as angular,_ as autocompletion,$ as bidiIsolates,a0 as bracketMatching,a2 as clojure,a3 as closeBrackets,a4 as closeBracketsKeymap,a5 as closeCompletion,a6 as codeFolding,a7 as coffeescript,a8 as completeAnyWord,aa as completionStatus,ad as cpp,af as css,ah as cssStreamParser,ai as currentCompletions,aj as cursorGroupLeft,ak as cursorGroupRight,al as cursorMatchingBracket,am as cursorSyntaxLeft,an as cursorSyntaxRight,ao as dart,as as drawSelection,at as ensureSyntaxTree,av as foldGutter,ax as foldKeymap,aA as forceParsing,aB as go,aC as gss,aD as gutter,aE as gutters,aF as highlightSelectionMatches,aG as highlightSpecialChars,aH as highlightTree,aI as history,aJ as historyKeymap,aT as html,aM as ifNotIn,aN as indentLess,aO as indentMore,aQ as indentOnInput,aR as indentUnit,aS as indentationMarkers,aV as insertNewlineAndIndent,aW as java,aU as javascript,aZ as keymap,a_ as kotlin,b0 as less,b1 as lineNumberMarkers,b2 as lineNumbers,b3 as markdown,b4 as moveCompletionSelection,b7 as php,b8 as placeholder,b9 as python,ba as redo,bb as redoSelection,bc as repositionTooltips,bd as sass,be as scala,bf as scrollPastEnd,bg as selectGroupLeft,bh as selectGroupRight,bi as selectMatchingBracket,bj as selectNextOccurrence,bk as selectSyntaxLeft,bl as selectSyntaxRight,bm as selectedCompletion,bn as selectedCompletionIndex,bo as shell,bp as showPanel,bq as showTooltip,bs as standardKeymap,bt as startCompletion,bv as svelte,bw as syntaxHighlighting,bx as syntaxParserRunning,by as syntaxTree,bz as tags,bA as toggleComment,bB as tooltips,bD as undo,bE as undoSelection,bF as vue,bG as wast,bH as xml}from"./chunk/codemirror.js";
 //# sourceMappingURL=codemirror.next.js.map

package/front_end/third_party/codemirror.next/rebuild.sh

@@ -1,5 +1,5 @@
 npm install
-../../../node_modules/.bin/tsc -d -t esnext -m esnext --moduleResolution node bundle.ts
+../../../node_modules/.bin/tsc -d -t esnext -m esnext --moduleResolution bundler --ignoreConfig bundle.ts
 ../../../node_modules/rollup/dist/bin/rollup -c
 rm -rf node_modules bundle.js bundle.d.ts
 # Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away

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;
   }