chrome-devtools-frontend 1.0.1625079 → 1.0.1626437

package/front_end/panels/application/WebMCPView.ts

@@ -191,6 +191,10 @@ const UIStrings = {
    * @description Notice to display when a tool has been unregistered
    */
   toolUnregisteredNotice: 'This tool has been unregistered',
+  /**
+   * @description Text preceding a nested error in a stack trace
+   */
+  causedBy: 'Caused by:',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -219,6 +223,11 @@ export interface FilterMenuButtons {
   toolTypes: FilterMenuButton;
   statusTypes: FilterMenuButton;
 }
+export const enum TabId {
+  DETAILS = 'webmcp.tool-details',
+  INPUT = 'webmcp.call-inputs',
+  OUTPUT = 'webmcp.call-outputs',
+}
 export interface SelectedTool {
   tool: WebMCP.WebMCPModel.Tool;
   parameters?: Record<string, unknown>;
@@ -229,7 +238,8 @@ export interface ViewInput {
   onToolSelect: (tool: WebMCP.WebMCPModel.Tool|null) => void;
   onRevealTool: (tool: WebMCP.WebMCPModel.Tool, parameters?: Record<string, unknown>) => void;
   selectedCall: WebMCP.WebMCPModel.Call|null;
-  onCallSelect: (call: WebMCP.WebMCPModel.Call|null) => void;
+  selectedTab?: TabId;
+  onCallSelect: (call: WebMCP.WebMCPModel.Call|null, tabId?: TabId) => void;
   filters: FilterState;
   filterButtons: FilterMenuButtons;
   onClearLogClick: () => void;
@@ -508,7 +518,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                             }, {jslogContext: 'webmcp.cancel-call'});
                           }
                         }}>
-                      <td>
+                      <td @click=${(e: Event) => {
+                        e.stopPropagation();
+                        input.onCallSelect(call, TabId.DETAILS);
+                      }}>
                         <div class="name-cell">
                           <span>${call.tool.name}</span>
                           <button class="run-tool-action-button"
@@ -524,7 +537,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           </button>
                         </div>
                       </td>
-                      <td>
+                      <td @click=${(e: Event) => {
+                        e.stopPropagation();
+                        input.onCallSelect(call, TabId.OUTPUT);
+                      }}>
                         <div class="status-cell">
                           ${iconName(call) ? html`<devtools-icon class="small" name=${iconName(call)}></devtools-icon>`
                                            : ''}
@@ -532,8 +548,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         </div>
                       </td>
                       ${!input.selectedCall ? html`
-                        <td>${call.input}</td>
-                        <td>${call.result?.output ? JSON.stringify(call.result.output)
+                        <td @click=${(e: Event) => {
+                          e.stopPropagation();
+                          input.onCallSelect(call, TabId.INPUT);
+                        }}>${call.input}</td>
+                        <td @click=${(e: Event) => {
+                          e.stopPropagation();
+                          input.onCallSelect(call, TabId.OUTPUT);
+                        }}>${call.result?.output ? JSON.stringify(call.result.output)
                                                     : call.result?.errorText ?? ''}</td>
                         ` : nothing}
                     </tr>
@@ -552,17 +574,20 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   @click=${() => input.onCallSelect(null)}
                 ></devtools-button>
                 <devtools-widget
-                  id="webmcp.tool-details"
+                  id=${TabId.DETAILS}
+                  ?selected=${input.selectedTab === TabId.DETAILS}
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool, isUnregistered: input.selectedCall ? !input.tools.includes(input.selectedCall.tool) : false})}>
                 </devtools-widget>
                 <devtools-widget
-                  id="webmcp.call-inputs"
+                  id=${TabId.INPUT}
+                  ?selected=${input.selectedTab === TabId.INPUT}
                   title=${i18nString(UIStrings.input)}
                   ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
                 </devtools-widget>
                 <devtools-widget
-                  id="webmcp.call-outputs"
+                  id=${TabId.OUTPUT}
+                  ?selected=${input.selectedTab === TabId.OUTPUT}
                   title=${i18nString(UIStrings.output)}
                   ${widget(PayloadWidget, {
                           valueObject: input.selectedCall?.result?.output,
@@ -697,6 +722,8 @@ export class WebMCPView extends UI.Widget.VBox {
   readonly #view: View;
   #selectedTool: SelectedTool|null = null;
   #selectedCall: WebMCP.WebMCPModel.Call|null = null;
+  #selectedTab: TabId|undefined = undefined;
+  #lastDevToolsInvocationId: string|null = null;
 
   #filterState: FilterState = {
     text: '',
@@ -799,17 +826,26 @@ export class WebMCPView extends UI.Widget.VBox {
   #webMCPModelAdded(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
-    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.#toolInvoked, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
   #webMCPModelRemoved(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
-    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.#toolInvoked, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
+  #toolInvoked(event: Common.EventTarget.EventTargetEvent<WebMCP.WebMCPModel.Call>): void {
+    const call = event.data;
+    if (call.invocationId === this.#lastDevToolsInvocationId) {
+      this.#selectedCall = call;
+      this.#lastDevToolsInvocationId = null;
+    }
+    this.requestUpdate();
+  }
+
   #toolsRemoved(event: Common.EventTarget.EventTargetEvent<readonly WebMCP.WebMCPModel.Tool[]>): void {
     if (this.#selectedTool && event.data.includes(this.#selectedTool.tool)) {
       this.#selectedTool = null;
@@ -861,8 +897,16 @@ export class WebMCPView extends UI.Widget.VBox {
         this.requestUpdate();
       },
       selectedCall: this.#selectedCall,
-      onCallSelect: call => {
-        this.#selectedCall = call;
+      selectedTab: this.#selectedTab,
+      onCallSelect: (call, tabId) => {
+        if (call === null) {
+          this.#selectedCall = null;
+        } else if (this.#selectedCall === null) {
+          this.#selectedCall = call;
+          this.#selectedTab = tabId;
+        } else {
+          this.#selectedCall = call;
+        }
         this.requestUpdate();
       },
       toolCalls: filteredCalls,
@@ -870,9 +914,20 @@ export class WebMCPView extends UI.Widget.VBox {
       filterButtons: this.#filterButtons,
       onClearLogClick: this.#handleClearLogClick,
       onFilterChange: this.#handleFilterChange,
-      onRunTool: event => {
+      onRunTool: async event => {
         if (this.#selectedTool) {
-          void this.#selectedTool.tool.invoke(event.data.parameters || {});
+          this.#selectedTool.parameters = event.data.parameters || {};
+          this.#lastDevToolsInvocationId = await this.#selectedTool.tool.invoke(this.#selectedTool.parameters) ?? null;
+          if (this.#lastDevToolsInvocationId) {
+            const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
+            const call =
+                models.flatMap(model => model.toolCalls).find(c => c.invocationId === this.#lastDevToolsInvocationId);
+            if (call) {
+              this.#selectedCall = call;
+              this.#lastDevToolsInvocationId = null;
+            }
+          }
+          this.requestUpdate();
         }
       },
       onPaste: async () => {
@@ -891,6 +946,7 @@ export class WebMCPView extends UI.Widget.VBox {
       },
     };
     this.#view(input, {}, this.contentElement);
+    this.#selectedTab = undefined;
   }
 }
 export interface PayloadViewInput {
@@ -972,7 +1028,9 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       <div class="payload-value source-code error-text">
         ${details.frames.length === 0 && details.description ? html`<span>${details.description}\n</span>` : nothing}
         <div>${details.frames.map(renderFrame)}</div>
-        ${details.cause ? html`\nCaused by:\n${createException(details.cause, linkifier)}` : nothing}</div>`;
+        ${
+        details.cause ? html`\n${i18nString(UIStrings.causedBy)}\n${createException(details.cause, linkifier)}` :
+                        nothing}</div>`;
   };
 
   render(
@@ -1124,7 +1182,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
            ></devtools-button>
       </div>` : origin ? html`
       <div class="label">Origin</div>
-      <div class="value">
+      <div class="value stack-trace">
         ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
                  {stackTrace: origin, options: { expandable: true}})}
       </div>` : nothing}

package/front_end/panels/application/application.ts

@@ -13,7 +13,6 @@ import * as DeviceBoundSessionsModel from './DeviceBoundSessionsModel.js';
 import * as DeviceBoundSessionsTreeElement from './DeviceBoundSessionsTreeElement.js';
 import * as DeviceBoundSessionsView from './DeviceBoundSessionsView.js';
 import * as DOMStorageItemsView from './DOMStorageItemsView.js';
-import * as DOMStorageModel from './DOMStorageModel.js';
 import * as ExtensionStorageItemsView from './ExtensionStorageItemsView.js';
 import * as ExtensionStorageModel from './ExtensionStorageModel.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
@@ -58,7 +57,6 @@ export {
   DeviceBoundSessionsTreeElement,
   DeviceBoundSessionsView,
   DOMStorageItemsView,
-  DOMStorageModel,
   ExtensionStorageItemsView,
   ExtensionStorageModel,
   FrameDetailsView,

package/front_end/panels/application/webMCPView.css

@@ -88,6 +88,14 @@
     display: flex;
     gap: var(--sys-size-5);
     align-items: center;
+    min-width: 0;
+  }
+
+  .name-cell > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
   }
 
   .run-tool-action-button {
@@ -141,8 +149,11 @@
       color: var(--sys-color-on-surface);
       overflow-wrap: anywhere;
 
-      &:has(> .stack-preview-container) {
-        padding: var(--sys-size-4) 0;
+      &.stack-trace {
+        display: flex;
+        padding: 0;
+        margin-top: calc(-1 * (var(--sys-size-1) + var(--sys-size-2)));
+        margin-left: calc(-1 * var(--sys-size-3));
       }
 
       &.tool-origin-container {

package/front_end/panels/console/ConsolePrompt.ts

@@ -190,7 +190,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.editorSetForTest();
 
     // Record the console tool load time after the console prompt constructor is complete.
-    Host.userMetrics.panelLoaded('console', 'DevTools.Launch.Console');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('console', 'DevTools.Launch.Console');
   }
 
   private eagerSettingChanged(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -571,9 +571,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.consoleMessages = [];
     this.consoleGroupStarts = [];
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    this.aiCodeCompletionConfig =
-        AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale) ? {
+    this.aiCodeCompletionConfig = AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionAvailable() ?
+        {
           completionContext: {
             getPrefix: this.getConsoleMessageHistory.bind(this),
             additionalFiles: [{
@@ -597,7 +596,7 @@ export class ConsoleView extends UI.Widget.VBox implements
           onResponseReceived: this.#onAiCodeCompletionResponseReceived.bind(this),
           panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE,
         } :
-                                                                                                              undefined;
+        undefined;
 
     this.prompt = new ConsolePrompt(this.aiCodeCompletionConfig);
     this.prompt.show(this.promptElement);

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -11,9 +11,7 @@ import * as ColorPicker from '../../ui/legacy/components/color_picker/color_pick
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylesContainer} from './StylesContainer.js';
 
 const UIStrings = {
   /**
@@ -403,153 +401,3 @@ export class ShadowSwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrappe
     delete this.originalPropertyText;
   }
 }
-
-export class FontEditorSectionManager {
-  private readonly treeElementMap: Map<string, StylePropertyTreeElement>;
-  private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  private readonly section: StylePropertiesSection;
-  private stylesContainer: StylesContainer|null;
-  private fontEditor: InlineEditor.FontEditor.FontEditor|null;
-  private scrollerElement: Element|null;
-  private readonly boundFontChanged:
-      (event: Common.EventTarget.EventTargetEvent<InlineEditor.FontEditor.FontChangedEvent>) => void;
-  private readonly boundOnScroll: () => void;
-  private readonly boundResized: () => void;
-  constructor(
-      swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper, section: StylePropertiesSection) {
-    this.treeElementMap = new Map();
-
-    this.swatchPopoverHelper = swatchPopoverHelper;
-
-    this.section = section;
-
-    this.stylesContainer = null;
-
-    this.fontEditor = null;
-
-    this.scrollerElement = null;
-
-    this.boundFontChanged = this.fontChanged.bind(this);
-    this.boundOnScroll = this.onScroll.bind(this);
-    this.boundResized = this.fontEditorResized.bind(this);
-  }
-
-  private fontChanged(event: Common.EventTarget.EventTargetEvent<InlineEditor.FontEditor.FontChangedEvent>): void {
-    const {propertyName, value} = event.data;
-    const treeElement = this.treeElementMap.get(propertyName);
-    void this.updateFontProperty(propertyName, value, treeElement);
-  }
-
-  private async updateFontProperty(propertyName: string, value: string, treeElement?: StylePropertyTreeElement):
-      Promise<void> {
-    if (treeElement?.treeOutline && treeElement.valueElement && treeElement.property.parsedOk &&
-        treeElement.property.range) {
-      let elementRemoved = false;
-      treeElement.valueElement.textContent = value;
-      treeElement.property.value = value;
-      let styleText;
-      const propertyName = treeElement.property.name;
-      if (value.length) {
-        styleText = treeElement.renderedPropertyText();
-      } else {
-        styleText = '';
-        elementRemoved = true;
-        this.fixIndex(treeElement.property.index);
-      }
-      this.treeElementMap.set(propertyName, treeElement);
-      await treeElement.applyStyleText(styleText, true);
-      if (elementRemoved) {
-        this.treeElementMap.delete(propertyName);
-      }
-    } else if (value.length) {
-      const newProperty = this.section.addNewBlankProperty();
-      if (newProperty) {
-        newProperty.property.name = propertyName;
-        newProperty.property.value = value;
-        newProperty.updateTitle();
-        await newProperty.applyStyleText(newProperty.renderedPropertyText(), true);
-        this.treeElementMap.set(newProperty.property.name, newProperty);
-      }
-    }
-    this.section.onpopulate();
-    this.swatchPopoverHelper.reposition();
-    return;
-  }
-
-  private fontEditorResized(): void {
-    this.swatchPopoverHelper.reposition();
-  }
-
-  private fixIndex(removedIndex: number): void {
-    for (const treeElement of this.treeElementMap.values()) {
-      if (treeElement.property.index > removedIndex) {
-        treeElement.property.index -= 1;
-      }
-    }
-  }
-
-  private createPropertyValueMap(): Map<string, string> {
-    const propertyMap = new Map<string, string>();
-    for (const fontProperty of this.treeElementMap) {
-      const propertyName = (fontProperty[0]);
-      const treeElement = fontProperty[1];
-      if (treeElement.property.value.length) {
-        propertyMap.set(propertyName, treeElement.property.value);
-      } else {
-        this.treeElementMap.delete(propertyName);
-      }
-    }
-    return propertyMap;
-  }
-
-  registerFontProperty(treeElement: StylePropertyTreeElement): void {
-    const propertyName = treeElement.property.name;
-    if (this.treeElementMap.has(propertyName)) {
-      const treeElementFromMap = this.treeElementMap.get(propertyName);
-      if (!treeElement.overloaded() || (treeElementFromMap?.overloaded())) {
-        this.treeElementMap.set(propertyName, treeElement);
-      }
-    } else {
-      this.treeElementMap.set(propertyName, treeElement);
-    }
-  }
-
-  async showPopover(iconElement: Element, stylesContainer: StylesContainer): Promise<void> {
-    if (this.swatchPopoverHelper.isShowing()) {
-      this.swatchPopoverHelper.hide(true);
-      return;
-    }
-    this.stylesContainer = stylesContainer;
-    const propertyValueMap = this.createPropertyValueMap();
-    this.fontEditor = new InlineEditor.FontEditor.FontEditor(propertyValueMap);
-    this.fontEditor.addEventListener(InlineEditor.FontEditor.Events.FONT_CHANGED, this.boundFontChanged);
-    this.fontEditor.addEventListener(InlineEditor.FontEditor.Events.FONT_EDITOR_RESIZED, this.boundResized);
-    this.swatchPopoverHelper.show(this.fontEditor, iconElement, this.onPopoverHidden.bind(this));
-    this.scrollerElement = iconElement.enclosingNodeOrSelfWithClass('style-panes-wrapper');
-    if (this.scrollerElement) {
-      this.scrollerElement.addEventListener('scroll', this.boundOnScroll, false);
-    }
-
-    this.stylesContainer.setEditingStyle(true);
-  }
-
-  private onScroll(): void {
-    this.swatchPopoverHelper.hide(true);
-  }
-
-  private onPopoverHidden(): void {
-    if (this.scrollerElement) {
-      this.scrollerElement.removeEventListener('scroll', this.boundOnScroll, false);
-    }
-    this.section.onpopulate();
-    if (this.fontEditor) {
-      this.fontEditor.removeEventListener(InlineEditor.FontEditor.Events.FONT_CHANGED, this.boundFontChanged);
-    }
-    this.fontEditor = null;
-    if (this.stylesContainer) {
-      this.stylesContainer.setEditingStyle(false);
-    }
-    this.section.resetToolbars();
-    this.section.onpopulate();
-  }
-}

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
@@ -55,7 +54,6 @@ import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -1233,12 +1231,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.performUpdate();
 
     if (this.nodeInternal.retained && !this.isClosingTag()) {
-      const icon = new Icon();
-      icon.name = 'small-status-dot';
-      icon.style.color = 'var(--icon-error)';
-      icon.classList.add('extra-small');
-      icon.style.setProperty('vertical-align', 'middle');
-      this.setLeadingIcons([icon]);
+      this.setLeadingIcons([
+        html`<devtools-icon class="extra-small" name="small-status-dot" style="color:var(--icon-error); vertical-align:middle"></devtools-icon>`
+      ]);
       this.listItemNode.classList.add('detached-elements-detached-node');
       this.listItemNode.style.setProperty('display', '-webkit-box');
       this.listItemNode.setAttribute('title', 'Retained Node');
@@ -2375,7 +2370,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private addNewAttribute(): boolean {
     // Cannot just convert the textual html into an element without
     // a parent node. Use a temporary span container for the HTML.
-    const container = document.createElement('span');
+    const container = document.createDocumentFragment();
 
     Lit.render(renderAttribute({name: ' ', value: ''}, null, false, this.nodeInternal), container);
     const attr = container.firstElementChild as HTMLElement;

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -314,6 +314,9 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   jumpToFontPaletteDefinition(_paletteName: string): void {
   }
 
+  jumpToCounterStyleDefinition(_counterStyleName: string): void {
+  }
+
   jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
   }
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -39,7 +39,6 @@ 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 Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
@@ -54,7 +53,6 @@ import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
-import {FontEditorSectionManager} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
@@ -166,9 +164,6 @@ export class StylePropertiesSection {
   private showAllButton: Buttons.Button.Button;
   protected selectorElement: HTMLSpanElement;
   private readonly newStyleRuleToolbar: UI.Toolbar.Toolbar|undefined;
-  private readonly fontEditorToolbar: UI.Toolbar.Toolbar|undefined;
-  private readonly fontEditorSectionManager: FontEditorSectionManager|undefined;
-  private readonly fontEditorButton: UI.Toolbar.ToolbarButton|undefined;
   private selectedSinceMouseDown: boolean;
   private readonly elementToSelectorIndex = new WeakMap<Element, number>();
   navigable: boolean|null|undefined;
@@ -309,31 +304,6 @@ export class StylePropertiesSection {
       UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.editable) {
-      this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
-      this.fontEditorSectionManager = new FontEditorSectionManager(this.stylesContainer.swatchPopoverHelper(), this);
-      this.fontEditorButton =
-          new UI.Toolbar.ToolbarButton('Font Editor', 'custom-typography', undefined, 'font-editor');
-      this.fontEditorButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-        this.onFontEditorButtonClicked();
-      }, this);
-      this.fontEditorButton.element.addEventListener('keydown', event => {
-        if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
-          event.consume(true);
-          this.onFontEditorButtonClicked();
-        }
-      }, false);
-      this.fontEditorToolbar.appendToolbarItem(this.fontEditorButton);
-
-      if (this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Inline) {
-        if (this.newStyleRuleToolbar) {
-          this.newStyleRuleToolbar.classList.add('shifted-toolbar');
-        }
-      } else {
-        this.fontEditorToolbar.classList.add('font-toolbar-hidden');
-      }
-    }
-
     this.selectorElement.addEventListener('click', this.handleSelectorClick.bind(this), false);
     this.selectorElement.setAttribute(
         'jslog', `${VisualLogging.cssRuleHeader('selector').track({click: true, change: true})}`);
@@ -409,31 +379,6 @@ export class StylePropertiesSection {
     return this.sectionIdx;
   }
 
-  registerFontProperty(treeElement: StylePropertyTreeElement): void {
-    if (this.fontEditorSectionManager) {
-      this.fontEditorSectionManager.registerFontProperty(treeElement);
-    }
-    if (this.fontEditorToolbar) {
-      this.fontEditorToolbar.classList.remove('font-toolbar-hidden');
-      if (this.newStyleRuleToolbar) {
-        this.newStyleRuleToolbar.classList.add('shifted-toolbar');
-      }
-    }
-  }
-
-  resetToolbars(): void {
-    if (this.stylesContainer.swatchPopoverHelper().isShowing() ||
-        this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Inline) {
-      return;
-    }
-    if (this.fontEditorToolbar) {
-      this.fontEditorToolbar.classList.add('font-toolbar-hidden');
-    }
-    if (this.newStyleRuleToolbar) {
-      this.newStyleRuleToolbar.classList.remove('shifted-toolbar');
-    }
-  }
-
   static createRuleOriginNode(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, linkifier: Components.Linkifier.Linkifier,
       rule: SDK.CSSRule.CSSRule|null): LitTemplate {
@@ -678,12 +623,6 @@ export class StylePropertiesSection {
     }
   }
 
-  private onFontEditorButtonClicked(): void {
-    if (this.fontEditorSectionManager && this.fontEditorButton) {
-      void this.fontEditorSectionManager.showPopover(this.fontEditorButton.element, this.stylesContainer);
-    }
-  }
-
   style(): SDK.CSSStyleDeclaration.CSSStyleDeclaration {
     return this.styleInternal;
   }