chrome-devtools-frontend 1.0.1724140 → 1.0.1726686

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -1,13 +1,13 @@
 // Copyright 2015 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 */
 
 import * as Common from '../../core/common/common.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 * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import classesPaneWidgetStyles from './classesPaneWidget.css.js';
@@ -37,42 +37,89 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ClassesPaneWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {ref, repeat} = Directives;
+
+export interface ClassItem {
+  className: string;
+  enabled: boolean;
+}
+
+export interface ViewInput {
+  classes: ClassItem[];
+  onCommit: () => void;
+  /** Returns whether the prompt had text to discard, in which case the key event is fully consumed. */
+  onCancel: () => boolean;
+  onClick: (className: string, enabled: boolean) => void;
+}
+
+export interface ViewOutput {
+  attachPrompt?: (prompt: UI.TextPrompt.TextPrompt) => void;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY && !event.isComposing) {
+      event.consume();
+      input.onCommit();
+    } else if (Platform.KeyboardUtilities.isEscKey(event) && input.onCancel()) {
+      // Escape discarded non-empty prompt text, so stop it here instead of letting
+      // it reach global DevTools shortcuts (e.g. closing the drawer).
+      event.consume(true);
+    }
+  };
+  // clang-format off
+  render(html`
+    <style>${classesPaneWidgetStyles}</style>
+    <div class="styles-element-classes-pane">
+      <div class="title-container" @keydown=${onKeyDown}>
+        <div class="new-class-input monospace" autofocus ${ref(element => {
+          output.attachPrompt = element instanceof HTMLElement ? prompt => prompt.attach(element) : undefined;
+        })}></div>
+      </div>
+      <div class="source-code styles-element-classes-container">
+        ${repeat(input.classes, item => item.className, item => html`
+          <devtools-checkbox
+              class="monospace"
+              small
+              .checked=${item.enabled}
+              title=${item.className}
+              jslog=${VisualLogging.toggle('element-class').track({change: true})}
+              @click=${(event: Event) => input.onClick(item.className, (event.target as UI.UIUtils.CheckboxLabel).checked)}>${item.className}</devtools-checkbox>`)}
+      </div>
+    </div>`, target);
+  // clang-format on
+};
+
 export class ClassesPaneWidget extends UI.Widget.Widget {
-  private input: HTMLElement;
-  private readonly classesContainer: HTMLElement;
-  private readonly prompt: ClassNamePrompt;
-  private readonly mutatingNodes: Set<SDK.DOMModel.DOMNode>;
-  private readonly pendingNodeClasses: Map<SDK.DOMModel.DOMNode, string>;
-  private readonly updateNodeThrottler: Common.Throttler.Throttler;
-  private previousTarget: SDK.DOMModel.DOMNode|null;
-
-  constructor() {
-    super({
+  readonly #view: View;
+  readonly #prompt: ClassNamePrompt;
+  #promptAttached = false;
+  readonly #mutatingNodes: Set<SDK.DOMModel.DOMNode>;
+  readonly #pendingNodeClasses: Map<SDK.DOMModel.DOMNode, string>;
+  readonly #updateNodeThrottler: Common.Throttler.Throttler;
+  #previousTarget: SDK.DOMModel.DOMNode|null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {
       jslog: `${VisualLogging.pane('elements-classes')}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(classesPaneWidgetStyles);
-    this.contentElement.className = 'styles-element-classes-pane';
-    const container = this.contentElement.createChild('div', 'title-container');
-    this.input = container.createChild('div', 'new-class-input monospace');
-    this.setDefaultFocusedElement(this.input);
-    this.classesContainer = this.contentElement.createChild('div', 'source-code');
-    this.classesContainer.classList.add('styles-element-classes-container');
-    this.prompt = new ClassNamePrompt(this.nodeClasses.bind(this));
-    this.prompt.setAutocompletionTimeout(0);
-    this.prompt.renderAsBlock();
-
-    const proxyElement = (this.prompt.attach(this.input) as HTMLElement);
-    this.prompt.setPlaceholder(i18nString(UIStrings.addNewClass));
-    this.prompt.addEventListener(UI.TextPrompt.Events.TEXT_CHANGED, this.onTextChanged, this);
-    proxyElement.addEventListener('keydown', this.onKeyDown.bind(this), false);
+    this.#view = view;
+    this.#prompt = new ClassNamePrompt(this.nodeClasses.bind(this));
+    this.#prompt.setAutocompletionTimeout(0);
+    this.#prompt.renderAsBlock();
+
+    this.#prompt.addEventListener(UI.TextPrompt.Events.TEXT_CHANGED, this.onTextChanged, this);
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.DOMMutated, this.onDOMMutated, this, {scoped: true});
-    this.mutatingNodes = new Set();
-    this.pendingNodeClasses = new Map();
-    this.updateNodeThrottler = new Common.Throttler.Throttler(0);
-    this.previousTarget = null;
+    this.#mutatingNodes = new Set();
+    this.#pendingNodeClasses = new Map();
+    this.#updateNodeThrottler = new Common.Throttler.Throttler(0);
+    this.#previousTarget = null;
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.onSelectedNodeChanged, this);
   }
 
@@ -82,29 +129,22 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
         .filter(className => className.length);
   }
 
-  private onKeyDown(event: KeyboardEvent): void {
-    if (!(event.key === 'Enter') && !Platform.KeyboardUtilities.isEscKey(event)) {
+  private onCommit(): void {
+    if (this.#prompt.acceptAutoComplete()) {
       return;
     }
+    this.applyPromptText(this.#prompt.text());
+  }
 
-    if (event.key === 'Enter') {
-      event.consume();
-      if (this.prompt.acceptAutoComplete()) {
-        return;
-      }
-    }
-
-    const eventTarget = (event.target as HTMLElement);
-    let text = eventTarget.textContent;
-    if (Platform.KeyboardUtilities.isEscKey(event)) {
-      if (!Platform.StringUtilities.isWhitespace(text)) {
-        event.consume(true);
-      }
-      text = '';
-    }
+  /** Discards the prompt text and returns whether there was any non-whitespace text to discard. */
+  private onCancel(): boolean {
+    const hadText = !Platform.StringUtilities.isWhitespace(this.#prompt.text());
+    this.applyPromptText('');
+    return hadText;
+  }
 
-    this.prompt.clearAutocomplete();
-    eventTarget.textContent = '';
+  private applyPromptText(text: string): void {
+    this.#prompt.setText('');
 
     const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
@@ -128,7 +168,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     UI.ARIAUtils.LiveAnnouncer.alert(announcementString);
 
     this.installNodeClasses(node);
-    this.update();
+    this.requestUpdate();
   }
 
   private onTextChanged(): void {
@@ -141,65 +181,67 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
 
   private onDOMMutated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
     const node = event.data;
-    if (this.mutatingNodes.has(node)) {
+    if (this.#mutatingNodes.has(node)) {
       return;
     }
     cachedClassesMap.delete(node);
-    this.update();
+    this.requestUpdate();
   }
 
   private onSelectedNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    if (this.previousTarget && this.prompt.text()) {
-      this.input.textContent = '';
-      this.installNodeClasses(this.previousTarget);
+    if (this.#previousTarget && this.#promptAttached && this.#prompt.text()) {
+      this.#prompt.setText('');
+      this.installNodeClasses(this.#previousTarget);
     }
-    this.previousTarget = event.data;
-    this.update();
+    this.#previousTarget = event.data;
+    this.requestUpdate();
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.update();
+    // Render synchronously rather than via requestUpdate(): callers such as
+    // StylesSidebarPane.showToolbarPane() focus the widget right after show(),
+    // so the autofocus prompt must already exist. This also re-reads the
+    // selected node, which may have changed while the pane was hidden.
+    this.performUpdate();
   }
 
-  update(): void {
-    if (!this.isShowing()) {
-      return;
-    }
-
+  override performUpdate(): void {
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
     }
 
-    this.classesContainer.removeChildren();
-    // @ts-expect-error this.input is a div, not an input element. So this line makes no sense at all
-    this.input.disabled = !node;
-
-    if (!node) {
-      return;
-    }
-
-    const classes = this.nodeClasses(node);
+    const classes = node ? this.nodeClasses(node) : new Map<string, boolean>();
     const keys = [...classes.keys()];
     keys.sort(Platform.StringUtilities.caseInsensetiveComparator);
-    for (const className of keys) {
-      const checkbox =
-          UI.UIUtils.CheckboxLabel.createWithStringLiteral(className, classes.get(className), 'element-class', true);
-      checkbox.classList.add('monospace');
-      checkbox.addEventListener('click', this.onClick.bind(this, className), false);
-      this.classesContainer.appendChild(checkbox);
+    const input: ViewInput = {
+      classes: keys.map(className => ({className, enabled: Boolean(classes.get(className))})),
+      onCommit: this.onCommit.bind(this),
+      onCancel: this.onCancel.bind(this),
+      onClick: this.onClick.bind(this),
+    };
+    const output: ViewOutput = {};
+    this.#view(input, output, this.contentElement);
+    if (output.attachPrompt && !this.#promptAttached) {
+      output.attachPrompt(this.#prompt);
+      this.#prompt.setPlaceholder(i18nString(UIStrings.addNewClass));
+      this.#promptAttached = true;
+    }
+    if (this.#promptAttached) {
+      // Classes can only be added to a selected node.
+      this.#prompt.setEnabled(Boolean(node));
     }
   }
 
-  private onClick(className: string, event: Event): void {
+  private onClick(className: string, enabled: boolean): void {
     const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
       return;
     }
-    const enabled = (event.target as HTMLInputElement).checked;
     this.toggleClass(node, className, enabled);
     this.installNodeClasses(node);
+    this.requestUpdate();
   }
 
   private nodeClasses(node: SDK.DOMModel.DOMNode): Map<string, boolean> {
@@ -235,30 +277,30 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
       }
     }
 
-    const additionalClasses = this.splitTextIntoClasses(this.prompt.textWithCurrentSuggestion());
+    const additionalClasses = this.splitTextIntoClasses(this.#prompt.textWithCurrentSuggestion());
     for (const className of additionalClasses) {
       activeClasses.add(className);
     }
 
     const newClasses = [...activeClasses.values()].sort();
 
-    this.pendingNodeClasses.set(node, newClasses.join(' '));
-    void this.updateNodeThrottler.schedule(this.flushPendingClasses.bind(this));
+    this.#pendingNodeClasses.set(node, newClasses.join(' '));
+    void this.#updateNodeThrottler.schedule(this.flushPendingClasses.bind(this));
   }
 
   private async flushPendingClasses(): Promise<void> {
     const promises = [];
-    for (const node of this.pendingNodeClasses.keys()) {
-      this.mutatingNodes.add(node);
-      const promise = node.setAttributeValuePromise('class', (this.pendingNodeClasses.get(node) as string))
+    for (const node of this.#pendingNodeClasses.keys()) {
+      this.#mutatingNodes.add(node);
+      const promise = node.setAttributeValuePromise('class', (this.#pendingNodeClasses.get(node) as string))
                           .then(onClassValueUpdated.bind(this, node));
       promises.push(promise);
     }
-    this.pendingNodeClasses.clear();
+    this.#pendingNodeClasses.clear();
     await Promise.all(promises);
 
     function onClassValueUpdated(this: ClassesPaneWidget, node: SDK.DOMModel.DOMNode): void {
-      this.mutatingNodes.delete(node);
+      this.#mutatingNodes.delete(node);
     }
   }
 }

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -21,11 +21,6 @@ const UIStrings = {
    * allows the user to edit cubic-bezier CSS properties directly.
    */
   openCubicBezierEditor: 'Open cubic bezier editor',
-  /**
-   * @description Tooltip text for an icon that opens the shadow editor. The shadow editor is a tool
-   * which allows the user to edit CSS shadow properties.
-   */
-  openShadowEditor: 'Open shadow editor',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ColorSwatchPopoverIcon.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -321,56 +316,35 @@ export interface ShadowEventTypes {
 export class ShadowSwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrapper<ShadowEventTypes> {
   private treeElement: StylePropertyTreeElement;
   private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  private readonly shadowSwatch: InlineEditor.Swatches.CSSShadowSwatch;
-  private iconElement: HTMLSpanElement;
   private readonly boundShadowChanged:
       (event: Common.EventTarget.EventTargetEvent<InlineEditor.CSSShadowEditor.CSSShadowModel>) => void;
   private readonly boundOnScroll: (event: Event) => void;
   private cssShadowEditor?: InlineEditor.CSSShadowEditor.CSSShadowEditor;
   private scrollerElement?: Element;
   private originalPropertyText?: string|null;
-  constructor(
-      treeElement: StylePropertyTreeElement, swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper,
-      shadowSwatch: InlineEditor.Swatches.CSSShadowSwatch) {
+  constructor(treeElement: StylePropertyTreeElement,
+              swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper) {
     super();
     this.treeElement = treeElement;
     this.swatchPopoverHelper = swatchPopoverHelper;
-    this.shadowSwatch = shadowSwatch;
-    this.iconElement = shadowSwatch.iconElement();
-
-    UI.Tooltip.Tooltip.install(this.iconElement, i18nString(UIStrings.openShadowEditor));
-    this.iconElement.addEventListener('click', this.iconClick.bind(this), false);
-    this.iconElement.addEventListener('keydown', this.keyDown.bind(this), false);
-    this.iconElement.addEventListener('mousedown', event => event.consume(), false);
 
     this.boundShadowChanged = this.shadowChanged.bind(this);
     this.boundOnScroll = this.onScroll.bind(this);
   }
 
-  private keyDown(event: KeyboardEvent): void {
-    if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
-      event.consume(true);
-      this.showPopover();
-    }
-  }
-
-  private iconClick(event: Event): void {
-    event.consume(true);
-    this.showPopover();
-  }
-
-  showPopover(): void {
+  showPopover(shadowSwatch: InlineEditor.Swatches.CSSShadowSwatch): void {
     if (this.swatchPopoverHelper.isShowing()) {
       this.swatchPopoverHelper.hide(true);
       return;
     }
 
+    const iconElement = shadowSwatch.iconElement();
     this.cssShadowEditor = new InlineEditor.CSSShadowEditor.CSSShadowEditor();
     this.cssShadowEditor.element.classList.toggle('with-padding', true);
-    this.cssShadowEditor.setModel(this.shadowSwatch.model());
+    this.cssShadowEditor.setModel(shadowSwatch.model());
     this.cssShadowEditor.addEventListener(InlineEditor.CSSShadowEditor.Events.SHADOW_CHANGED, this.boundShadowChanged);
-    this.swatchPopoverHelper.show(this.cssShadowEditor, this.iconElement, this.onPopoverHidden.bind(this));
-    this.scrollerElement = this.iconElement.enclosingNodeOrSelfWithClass('style-panes-wrapper');
+    this.swatchPopoverHelper.show(this.cssShadowEditor, iconElement, this.onPopoverHidden.bind(this));
+    this.scrollerElement = iconElement.enclosingNodeOrSelfWithClass('style-panes-wrapper');
     if (this.scrollerElement) {
       this.scrollerElement.addEventListener('scroll', this.boundOnScroll, false);
     }

package/front_end/panels/elements/DOMTreeWidget.ts

@@ -120,7 +120,7 @@ interface ViewInput {
   selectedClosingTag: boolean;
 
   onSelect: (node: SDK.DOMModel.DOMNode, isClosingTag: boolean, selectedByUser: boolean) => void;
-  onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean) => void;
+  onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean, recursively?: boolean) => void;
   onContextMenu: (node: SDK.DOMModel.DOMNode, event: MouseEvent) => void;
   onClearMaxRows: () => void;
   onHoverNode: (node: SDK.DOMModel.DOMNode|null, showInfo: boolean, isClosingTag: boolean) => void;
@@ -659,7 +659,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
       if (!isCollapsible) {
         return;
       }
-      input.onExpand(node, event.detail.expanded);
+      input.onExpand(node, event.detail.expanded, event.detail.recursively);
     };
 
     const isDragOver = input.dragOverNode?.node === node && !input.dragOverNode.isClosingTag;
@@ -1789,7 +1789,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         node.highlight();
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
       },
-      onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean) => {
+      onExpand: (node: SDK.DOMModel.DOMNode, expanded: boolean, recursively = false) => {
+        if (expanded && recursively) {
+          void this.expandRecursively(node);
+          return;
+        }
         this.setNodeExpanded(node, expanded);
       },
       onContextMenu: (node: SDK.DOMModel.DOMNode, event: MouseEvent) => {

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -69,6 +69,8 @@ enum SpecificPseudoStates {
   AUTOFILL = 'autofill',
   OPEN = 'open',
   TARGET_CURRENT = 'target-current',
+  BUFFERING = 'buffering',
+  STALLED = 'stalled',
 }
 
 interface ElementState {
@@ -92,7 +94,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     return html`
         <div id=${state.state}>
           <devtools-checkbox class="small" @click=${input.onStateCheckboxClicked}
-              jslog=${VisualLogging.toggle(state.state).track({change: true})} ?checked=${state.checked} ?disabled=${state.disabled}
+              jslog=${VisualLogging.toggle(state.state).track({change: true})} .checked=${Boolean(state.checked)} ?disabled=${state.disabled}
               title=${':' + state.state}>
           <span class="source-code">${':' + state.state}</span>
         </devtools-checkbox>
@@ -184,6 +186,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     this.#states.set(SpecificPseudoStates.OPEN, {state: SpecificPseudoStates.OPEN, type: 'specific'});
     this.#states.set(
         SpecificPseudoStates.TARGET_CURRENT, {state: SpecificPseudoStates.TARGET_CURRENT, type: 'specific'});
+    this.#states.set(SpecificPseudoStates.BUFFERING, {state: SpecificPseudoStates.BUFFERING, type: 'specific'});
+    this.#states.set(SpecificPseudoStates.STALLED, {state: SpecificPseudoStates.STALLED, type: 'specific'});
 
     setDualStateCheckboxes(SpecificPseudoStates.VALID, SpecificPseudoStates.INVALID);
     setDualStateCheckboxes(SpecificPseudoStates.USER_VALID, SpecificPseudoStates.USER_INVALID);
@@ -399,6 +403,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.TARGET_CURRENT, true);
     }
+
+    // :buffering and :stalled are independent. Forcing :stalled does not force
+    // :buffering, even though a real stalled media element is also buffering.
+    const isMediaElement = isElementOfTypes(node, ['audio', 'video']);
+    hideSpecificCheckbox(SpecificPseudoStates.BUFFERING, !isMediaElement);
+    hideSpecificCheckbox(SpecificPseudoStates.STALLED, !isMediaElement);
   }
 }
 

package/front_end/panels/elements/PropertyRenderer.ts

@@ -324,8 +324,9 @@ export class TracingContext {
   // evaluation callback is run. The callback should return synchronously an array of Nodes as placeholder to be
   // rendered immediately and optionally a callback for asynchronous updates of the placeholder nodes. The callback
   // returns a boolean indicating whether the update was successful or not.
-  applyEvaluation(children: TracingContext[],
-                  evaluation: () => ({placeholder: Node[], asyncEvalCallback?: () => Promise<boolean>})): Node[]|null {
+  applyEvaluation<T extends Node[]|LitTemplate = Node[]>(
+      children: TracingContext[], evaluation: () => ({placeholder: T, asyncEvalCallback?: () => Promise<boolean>})): T
+      |null {
     if (this.#evaluationCount === 0 || children.some(child => child.#appliedEvaluations >= this.#evaluationCount)) {
       this.#setHasMoreEvaluations(true);
       children.forEach(child => this.#asyncEvalCallbacks.push(...child.#asyncEvalCallbacks));

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,15 +3,19 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/kit/kit.js';
+
 import * as Elements from '../../models/elements/elements.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type * as ElementsComponents from './components/components.js';
 import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
 import type {StylesContainer} from './StylesContainer.js';
 
+const {ref} = Directives;
 type PropertySelectedEvent = ElementsComponents.StylePropertyEditor.PropertySelectedEvent;
 type PropertyDeselectedEvent = ElementsComponents.StylePropertyEditor.PropertyDeselectedEvent;
 
@@ -118,7 +122,6 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       });
     }
   }
-
   async render(): Promise<void> {
     if (!this.editor) {
       return;
@@ -150,47 +153,63 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     }
   }
 
-  static createTriggerButton(
-      stylesContainer: StylesContainer, section: StylePropertiesSection, editorClass: {new(): Editor},
-      buttonTitle: string, triggerKey: string): HTMLElement {
-    const triggerButton = createIcon('flex-wrap', 'styles-pane-button');
-    triggerButton.title = buttonTitle;
-    triggerButton.role = 'button';
-
-    triggerButton.onclick = async event => {
-      event.stopPropagation();
-      const popoverHelper = stylesContainer.swatchPopoverHelper();
-      const widget = StyleEditorWidget.instance();
-      widget.element.classList.toggle('with-padding', true);
-      widget.setEditor(editorClass);
-      widget.bindContext(stylesContainer, section);
-      widget.setTriggerKey(triggerKey);
-      await widget.render();
-      widget.focus();
-      const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
-      const onScroll = (): void => {
-        popoverHelper.hide(true);
-      };
-      const onStylesUpdateCompleted = widget.requestUpdate.bind(widget);
-      stylesContainer.addStyleUpdateListener(onStylesUpdateCompleted);
-      popoverHelper.show(widget, triggerButton, () => {
-        widget.#trackChanges();
-        widget.unbindContext();
+  static createTriggerButton(stylesContainer: StylesContainer, section: StylePropertiesSection,
+                             editorClass: {new(): Editor}, buttonTitle: string, triggerKey: string,
+                             jslogContext: string, onClick?: () => void): LitTemplate {
+    const popoverHelper = stylesContainer.swatchPopoverHelper();
+    let triggerButton: Element|undefined;
+    // clang-format off
+    return html`<devtools-icon
+      ${ref(e => {
+        triggerButton = e;
+        if (e && popoverHelper.isShowing(StyleEditorWidget.instance()) &&
+            StyleEditorWidget.instance().getTriggerKey() === triggerKey) {
+          popoverHelper.setAnchorElement(e);
+        }
+      })}
+      name="flex-wrap"
+      class="styles-pane-button"
+      title=${buttonTitle}
+      role="button"
+      tabindex="-1"
+      jslog=${VisualLogging.showStyleEditor(jslogContext).track({click: true})}
+      @click=${async (event: Event) => {
+        event.stopPropagation();
+        onClick?.();
+        if (!triggerButton) {
+          return;
+        }
+        const widget = StyleEditorWidget.instance();
+        widget.element.classList.toggle('with-padding', true);
+        widget.setEditor(editorClass);
+        widget.bindContext(stylesContainer, section);
+        widget.setTriggerKey(triggerKey);
+        await widget.render();
+        widget.focus();
+        const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
+        const onScroll = (): void => {
+          popoverHelper.hide(true);
+        };
+        const onStylesUpdateCompleted = widget.requestUpdate.bind(widget);
+        stylesContainer.addStyleUpdateListener(onStylesUpdateCompleted);
+        popoverHelper.show(widget, triggerButton, () => {
+          widget.#trackChanges();
+          widget.unbindContext();
+          if (scrollerElement) {
+            scrollerElement.removeEventListener('scroll', onScroll);
+          }
+          stylesContainer.removeStyleUpdateListener(onStylesUpdateCompleted);
+        });
         if (scrollerElement) {
-          scrollerElement.removeEventListener('scroll', onScroll);
+          scrollerElement.addEventListener('scroll', onScroll);
         }
-        stylesContainer.removeStyleUpdateListener(onStylesUpdateCompleted);
-      });
-      if (scrollerElement) {
-        scrollerElement.addEventListener('scroll', onScroll);
-      }
-    };
-    triggerButton.onmouseup = event => {
-      // Stop propagation to prevent the property editor from being activated.
-      event.stopPropagation();
-    };
-
-    return triggerButton;
+      }}
+      @mouseup=${(event: Event) => {
+        // Stop propagation to prevent the property editor from being activated.
+        event.stopPropagation();
+      }}
+    ></devtools-icon>`;
+    // clang-format on
   }
 }