chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -50,8 +50,8 @@ import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {createIcon, 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';
@@ -229,6 +229,16 @@ const UIStrings = {
    * the overlay showing CSS scroll snapping for the current element.
    */
   disableScrollSnap: 'Disable scroll-snap overlay',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it enables
+   * the overlay showing the container overlay for the current element.
+   */
+  enableContainer: 'Enable container overlay',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it disables
+   * the overlay showing container for the current element.
+   */
+  disableContainer: 'Disable container overlay',
   /**
    * @description Label of an adorner in the Elements panel. When clicked, it forces
    * the element into applying its starting-style rules.
@@ -357,13 +367,21 @@ export function isOpeningTag(context: TagTypeContext): context is OpeningTagCont
 }
 
 export interface ViewInput {
+  containerAdornerActive: boolean;
+  flexAdornerActive: boolean;
+
   showAdAdorner: boolean;
+  showContainerAdorner: boolean;
+  showFlexAdorner: boolean;
+
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
 
   onGutterClick: (e: Event) => void;
   onAdornerAdded: (adorner: Adorners.Adorner.Adorner) => void;
   onAdornerRemoved: (adorner: Adorners.Adorner.Adorner) => void;
+  onContainerAdornerClick: (e: Event) => void;
+  onFlexAdornerClick: (e: Event) => void;
 }
 
 export interface ViewOutput {
@@ -388,7 +406,12 @@ function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.Ref
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   const adAdornerConfig =
       ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
-  const hasAdorners = input.adorners || input.showAdAdorner;
+  const containerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
+  const flexAdornerConfig =
+      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
+  const hasAdorners =
+      input.adorners?.size || input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -397,13 +420,51 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         <devtools-icon name="dots-horizontal"></devtools-icon>
         <div class="hidden" ${ref(el => { output.decorationsElement = el as HTMLElement; })}></div>
       </div>
-      ${hasAdorners? html`<div class="adorner-container ${!hasAdorners ? 'hidden': ''}">
+      ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
         ${input.showAdAdorner ? html`<devtools-adorner
-          .data=${{name: adAdornerConfig.name, jslogContext: adAdornerConfig.name}}
           aria-label=${i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)}
+          .data=${{name: adAdornerConfig.name, jslogContext: adAdornerConfig.name}}
           ${adornerRef(input)}>
           <span>${adAdornerConfig.name}</span>
         </devtools-adorner>` : nothing}
+        ${input.showContainerAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{name: containerAdornerConfig.name, jslogContext: containerAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(containerAdornerConfig.name).track({click: true})}
+          active=${input.containerAdornerActive}
+          aria-label=${input.containerAdornerActive ? i18nString(UIStrings.enableContainer) : i18nString(UIStrings.disableContainer)}
+          @click=${input.onContainerAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onContainerAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${containerAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
+        ${input.showFlexAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{name: flexAdornerConfig.name, jslogContext: flexAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(flexAdornerConfig.name).track({click: true})}
+          active=${input.flexAdornerActive}
+          aria-label=${input.flexAdornerActive ? i18nString(UIStrings.enableFlexMode) : i18nString(UIStrings.disableFlexMode)}
+          @click=${input.onFlexAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onFlexAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${flexAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
@@ -442,6 +503,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #adornersThrottler = new Common.Throttler.Throttler(100);
   #adorners = new Set<Adorners.Adorner.Adorner>();
   #nodeInfo?: DocumentFragment;
+  #containerAdornerActive = false;
+  #flexAdornerActive = false;
+  #layout: SDK.CSSModel.LayoutProperties|null = null;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
@@ -474,13 +538,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       void this.updateStyleAdorners();
 
       void this.updateScrollAdorner();
+
+      void this.#updateAdorners();
     }
     this.expandAllButtonElement = null;
-
     this.performUpdate();
 
     if (this.nodeInternal.retained && !this.isClosingTag()) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'small-status-dot';
       icon.style.color = 'var(--icon-error)';
       icon.classList.add('extra-small');
@@ -494,6 +559,25 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.nodeInternal.detached && !this.isClosingTag()) {
       this.listItemNode.setAttribute('title', 'Detached Tree Node');
     }
+
+    node.domModel().overlayModel().addEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED, event => {
+          const {nodeId: eventNodeId, enabled} = event.data;
+          if (eventNodeId !== node.id) {
+            return;
+          }
+          this.#containerAdornerActive = enabled;
+          this.performUpdate();
+        });
+    node.domModel().overlayModel().addEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED, event => {
+          const {nodeId: eventNodeId, enabled} = event.data;
+          if (eventNodeId !== node.id) {
+            return;
+          }
+          this.#flexAdornerActive = enabled;
+          this.performUpdate();
+        });
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
@@ -556,10 +640,18 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   performUpdate(): void {
     DEFAULT_VIEW(
         {
+          containerAdornerActive: this.#containerAdornerActive,
           adorners: !this.isClosingTag() ? this.#adorners : undefined,
           showAdAdorner:
               ElementsPanel.instance().isAdornerEnabled(ElementsComponents.AdornerManager.RegisteredAdorners.AD) &&
               this.nodeInternal.isAdFrameNode(),
+          showContainerAdorner: ElementsPanel.instance().isAdornerEnabled(
+                                    ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER) &&
+              Boolean(this.#layout?.isContainer) && !this.isClosingTag(),
+          showFlexAdorner:
+              ElementsPanel.instance().isAdornerEnabled(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX) &&
+              Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
+          flexAdornerActive: this.#flexAdornerActive,
           nodeInfo: this.#nodeInfo,
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
@@ -568,10 +660,50 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onAdornerRemoved: adorner => {
             ElementsPanel.instance().deregisterAdorner(adorner);
           },
+          onContainerAdornerClick: (event: Event) => this.#onContainerAdornerClick(event),
+          onFlexAdornerClick: (event: Event) => this.#onFlexAdornerClick(event),
         },
         this, this.listItemElement);
   }
 
+  #onContainerAdornerClick(event: Event): void {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const model = node.domModel().overlayModel();
+    if (model.isHighlightedContainerQueryInPersistentOverlay(nodeId)) {
+      model.hideContainerQueryInPersistentOverlay(nodeId);
+      this.#containerAdornerActive = false;
+    } else {
+      model.highlightContainerQueryInPersistentOverlay(nodeId);
+      this.#containerAdornerActive = true;
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+    }
+    void this.updateAdorners();
+  }
+
+  #onFlexAdornerClick(event: Event): void {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const model = node.domModel().overlayModel();
+    if (model.isHighlightedFlexContainerInPersistentOverlay(nodeId)) {
+      model.hideFlexContainerInPersistentOverlay(nodeId);
+      this.#flexAdornerActive = false;
+    } else {
+      model.highlightFlexContainerInPersistentOverlay(nodeId);
+      this.#flexAdornerActive = true;
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+    }
+    void this.updateAdorners();
+  }
+
   highlightAttribute(attributeName: string): void {
     // If the attribute is not found, we highlight the tag name instead.
     let animationElement = this.listItemElement.querySelector('.webkit-html-tag-name') ?? this.listItemElement;
@@ -1018,7 +1150,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isEditable = this.hasEditableNode();
     // clang-format off
     if (isEditable && !this.editing) {
-      contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this), {jslogContext: 'elements.edit-as-html'});
+      contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this), { jslogContext: 'elements.edit-as-html' });
     }
     // clang-format on
     const isShadowRoot = this.nodeInternal.isShadowRoot();
@@ -2537,7 +2669,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     const adornerContent = document.createElement('span');
@@ -2562,7 +2694,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     adornerContent.textContent = name;
     adornerContent.classList.add('adorner-with-icon');
 
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     adornerContent.append(linkIcon);
 
     const adorner = new Adorners.Adorner.Adorner();
@@ -2601,17 +2733,28 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private updateAdorners(): void {
+  updateAdorners(): void {
     // TODO: remove adornersThrottler in favour of throttled updated (requestUpdate/performUpdate).
     void this.#adornersThrottler.schedule(this.#updateAdorners.bind(this));
   }
 
-  #updateAdorners(): Promise<void> {
-    // TODO: remove in favour of throttled updated (requestUpdate/performUpdate).
+  async #updateAdorners(): Promise<void> {
+    if (this.isClosingTag()) {
+      this.performUpdate();
+      return;
+    }
+    const node = this.node();
+    const nodeId = node.id;
+    if (node.nodeType() !== Node.COMMENT_NODE && node.nodeType() !== Node.DOCUMENT_FRAGMENT_NODE &&
+        node.nodeType() !== Node.TEXT_NODE && nodeId !== undefined) {
+      this.#layout = await node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(nodeId);
+    } else {
+      this.#layout = null;
+    }
     this.performUpdate();
-    return Promise.resolve();
   }
 
+  // TODO: remove in favour of updateAdorners.
   async updateStyleAdorners(): Promise<void> {
     if (!isOpeningTag(this.tagTypeContext)) {
       return;
@@ -2623,7 +2766,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         node.nodeType() === Node.TEXT_NODE || nodeId === undefined) {
       return;
     }
-
     const layout = await node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(nodeId);
     // TODO: move this to the template.
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID);
@@ -2631,7 +2773,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
@@ -2642,15 +2783,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (layout.isGridLanes) {
         this.pushGridLanesAdorner();
       }
-      if (layout.isFlex) {
-        this.pushFlexAdorner();
-      }
       if (layout.hasScroll) {
         this.pushScrollSnapAdorner();
       }
-      if (layout.isContainer) {
-        this.pushContainerAdorner();
-      }
     }
 
     if (node.isMediaNode()) {
@@ -2864,93 +2999,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#adorners.add(adorner);
   }
 
-  pushFlexAdorner(): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
-    const adorner = this.adorn(config);
-    adorner.classList.add('flex');
-
-    const onClick = ((() => {
-                       const model = node.domModel().overlayModel();
-                       if (adorner.isActive()) {
-                         model.highlightFlexContainerInPersistentOverlay(nodeId);
-                       } else {
-                         model.hideFlexContainerInPersistentOverlay(nodeId);
-                       }
-                     }) as EventListener);
-
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableFlexMode),
-      ariaLabelActive: i18nString(UIStrings.disableFlexMode),
-    });
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== nodeId) {
-            return;
-          }
-
-          adorner.toggle(enabled);
-        });
-
-    this.#adorners.add(adorner);
-
-    if (node.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
-    }
-  }
-
-  pushContainerAdorner(): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
-    const adorner = this.adorn(config);
-    adorner.classList.add('container');
-
-    const onClick = ((() => {
-                       const model = node.domModel().overlayModel();
-                       if (adorner.isActive()) {
-                         model.highlightContainerQueryInPersistentOverlay(nodeId);
-                         Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
-                       } else {
-                         model.hideContainerQueryInPersistentOverlay(nodeId);
-                       }
-                     }) as EventListener);
-
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableScrollSnap),
-      ariaLabelActive: i18nString(UIStrings.disableScrollSnap),
-    });
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== nodeId) {
-            return;
-          }
-          adorner.toggle(enabled);
-        });
-
-    this.#adorners.add(adorner);
-    if (node.domModel().overlayModel().isHighlightedContainerQueryInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
-    }
-  }
-
   pushMediaAdorner(): void {
     const node = this.node();
     const nodeId = node.id;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -263,7 +263,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       return;
     }
     this.#currentHighlightedNode = null;
-    this.requestUpdate();
+    this.performUpdate();
   }
 
   selectDOMNode(node: SDK.DOMModel.DOMNode|null, focus?: boolean): void {
@@ -299,6 +299,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#viewOutput.elementsTreeOutline;
   }
 
+  treeElementForNode(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
+    return this.#viewOutput.elementsTreeOutline?.findTreeElement(node) || null;
+  }
+
   override performUpdate(): void {
     this.#view(
         {
@@ -358,7 +362,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
    * FIXME: adorners should be part of the view input.
    */
   updateNodeAdorners(node: SDK.DOMModel.DOMNode): void {
-    void this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.updateStyleAdorners();
+    const element = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
+    void element?.updateStyleAdorners();
+    void element?.updateAdorners();
   }
 
   highlightMatch(node: SDK.DOMModel.DOMNode, query?: string): void {
@@ -2007,6 +2013,7 @@ export class ElementsTreeOutline extends
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
       void treeElement.updateStyleAdorners();
+      void treeElement.updateAdorners();
     }
   }
 }

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -37,7 +37,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -77,7 +77,7 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
     const name = config.name;
     const adornerContent = document.createElement('span');
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     adornerContent.append(linkIcon);

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
@@ -120,7 +120,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
       triggerKey: string): HTMLElement {
-    const triggerButton = IconButton.Icon.create('flex-wrap', 'styles-pane-button');
+    const triggerButton = createIcon('flex-wrap', 'styles-pane-button');
     triggerButton.title = buttonTitle;
     triggerButton.role = 'button';
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -14,8 +14,8 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -1134,7 +1134,7 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
             return;
           }
 
-          const icon = IconButton.Icon.create('animation', 'open-in-animations-panel');
+          const icon = createIcon('animation', 'open-in-animations-panel');
           icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
           icon.setAttribute('role', 'button');
           icon.setAttribute('title', i18nString(UIStrings.jumpToAnimationsPanel));
@@ -1170,7 +1170,7 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
       return nodes;
     }
     const swatchPopoverHelper = this.#treeElement.parentPane().swatchPopoverHelper();
-    const icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    const icon = createIcon('bezier-curve-filled', 'bezier-swatch-icon');
     icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
     icon.tabIndex = -1;
     icon.addEventListener('click', () => {
@@ -1954,7 +1954,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private expandedDueToFilter = false;
   valueElement: HTMLElement|null = null;
   nameElement: HTMLElement|null = null;
-  private expandElement: IconButton.Icon.Icon|null = null;
+  private expandElement: Icon|null = null;
   private originalPropertyText = '';
   private hasBeenEditedIncrementally = false;
   private prompt: CSSPropertyPrompt|null = null;
@@ -2338,7 +2338,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.#tooltipKeyCounts.clear();
     this.updateState();
     if (this.isExpandable()) {
-      this.expandElement = IconButton.Icon.create('triangle-right', 'expand-icon');
+      this.expandElement = createIcon('triangle-right', 'expand-icon');
       this.expandElement.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
     }
 
@@ -2641,7 +2641,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       if (hint) {
         const wrapper = document.createElement('span');
         wrapper.classList.add('hint-wrapper');
-        const hintIcon = new IconButton.Icon.Icon();
+        const hintIcon = new Icon();
         hintIcon.name = 'info';
         hintIcon.classList.add('hint', 'small');
         hintIcon.tabIndex = -1;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -44,7 +44,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -1504,15 +1504,14 @@ export class SectionBlock {
   readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
   #expanded = false;
-  #icon: IconButton.Icon.Icon|undefined;
+  #icon: Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
     this.#titleElement = titleElement;
     this.sections = [];
     this.#expanded = expandedByDefault ?? false;
 
     if (expandable && titleElement instanceof HTMLElement) {
-      this.#icon =
-          IconButton.Icon.create(this.#expanded ? 'triangle-down' : 'triangle-right', 'section-block-expand-icon');
+      this.#icon = createIcon(this.#expanded ? 'triangle-down' : 'triangle-right', 'section-block-expand-icon');
       titleElement.classList.toggle('empty-section', !this.#expanded);
       UI.ARIAUtils.setExpanded(titleElement, this.#expanded);
       titleElement.appendChild(this.#icon);
@@ -1964,7 +1963,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       if (!iconInfo) {
         continue;
       }
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = iconInfo.iconName;
       icon.classList.add('extra-small');
       icon.style.transform = `rotate(${iconInfo.rotate}deg) scale(${iconInfo.scaleX * 1.1}, ${iconInfo.scaleY * 1.1})`;

package/front_end/panels/elements/TopLayerContainer.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -97,7 +97,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
     adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const adornerText = document.createElement('span');
     adornerText.textContent = `top-layer (${topLayerElementIndex})`;
     adornerContent.append(linkIcon);

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import {html, render} from '../../../ui/lit/lit.js';

package/front_end/panels/elements/components/QueryContainer.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as SDK from '../../../core/sdk/sdk.js';

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Lit from '../../../ui/lit/lit.js';