chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

package/front_end/ui/components/text_editor/config.ts

@@ -8,10 +8,10 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
+import {Icon} from '../../kit/kit.js';
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
-import * as Icon from '../icon_button/icon_button.js';
 
 import {editorTheme} from './theme.js';
 
@@ -200,7 +200,7 @@ export const codeFolding = DynamicSetting.bool('text-editor-code-folding', [
   CM.foldGutter({
     markerDOM(open: boolean): HTMLElement {
       const iconName = open ? 'triangle-down' : 'triangle-right';
-      const icon = new Icon.Icon.Icon();
+      const icon = new Icon();
       icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded');
       icon.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
       icon.name = iconName;

package/front_end/ui/kit/cards/Card.docs.ts

@@ -0,0 +1,43 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../kit.js';
+
+import * as Lit from '../../lit/lit.js';
+
+const {html} = Lit;
+
+export function render(container: HTMLElement): void {
+  Lit.render(
+      html`
+        <style>
+          devtools-card {
+            margin: 1em;
+          }
+          .content {
+            padding: 1em;
+          }
+          span {
+            align-self: center;
+          }
+        </style>
+        <h2>Basic card with heading</h2>
+        <devtools-card heading="Simple card">
+          <div class="content">This is a simple card.</div>
+        </devtools-card>
+
+        <h2>Card without a heading</h2>
+        <devtools-card>
+          <div class="content">This is a card without a heading.</div>
+        </devtools-card>
+
+        <h2>Card with rich heading</h2>
+        <devtools-card heading="Card with rich heading">
+          <span slot="heading-prefix">Slotted heading prefix</span>
+          <span slot="heading-suffix">Slotted heading suffix</span>
+          <div class="content">This is a card with a rich heading.</div>
+        </devtools-card>
+        `,
+      container);
+}

package/front_end/ui/{components/icon_button → kit/icons}/Icon.docs.ts

@@ -3,8 +3,7 @@
 // found in the LICENSE file.
 
 import * as Lit from '../../lit/lit.js';
-
-import {Icon} from './icon_button.js';
+import {createIcon} from '../kit.js';
 
 const {html} = Lit;
 
@@ -26,7 +25,7 @@ export function render(container: HTMLElement): void {
   iconDescription1.textContent = 'Programmatically created with default size and color';
   row1.appendChild(iconDescription1);
 
-  const icon = Icon.create('select-element');
+  const icon = createIcon('select-element');
   const icon1 = document.createElement('td');
   icon1.appendChild(icon);
   row1.appendChild(icon1);
@@ -38,7 +37,7 @@ export function render(container: HTMLElement): void {
   iconDescription2.textContent = 'Programmatically created with custom size and color';
   row2.appendChild(iconDescription2);
 
-  const otherIcon = Icon.create('issue-exclamation-filled');
+  const otherIcon = createIcon('issue-exclamation-filled');
   otherIcon.classList.toggle('custom-size-and-color');
   const icon2 = document.createElement('td');
   icon2.appendChild(otherIcon);

package/front_end/ui/{components/icon_button → kit/icons}/Icon.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 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, @devtools/enforce-custom-element-definitions-location */
+/* eslint-disable @devtools/no-imperative-dom-api */
 
 import '../../../Images/Images.js';
 
@@ -35,8 +35,8 @@ export type IconData = IconWithName|{
  *
  * ```js
  * // Instantiate programmatically via the `create()` helper:
- * const icon = IconButton.Icon.create('bin');
- * const iconWithClassName = IconButton.Icon.create('bin', 'delete-icon');
+ * const icon = createIcon('bin');
+ * const iconWithClassName = createIcon('bin', 'delete-icon');
  *
  * // Use within a template:
  * Lit.html`
@@ -167,7 +167,7 @@ export class Icon extends HTMLElement {
  * @param className optional CSS class name(s) to put onto the element.
  * @returns the newly created `Icon` instance.
  */
-export const create = (name: string, className?: string): Icon => {
+export const createIcon = (name: string, className?: string): Icon => {
   const icon = new Icon();
   icon.name = name;
   if (className !== undefined) {

package/front_end/ui/kit/kit.ts

@@ -3,3 +3,4 @@
 // found in the LICENSE file.
 
 export * from './cards/Card.js';
+export * from './icons/Icon.js';

package/front_end/ui/legacy/Infobar.ts

@@ -7,7 +7,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import infobarStyles from './infobar.css.js';
@@ -55,7 +55,7 @@ export class Infobar {
     this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles});
 
     this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type);
-    const icon = IconButton.Icon.create(TYPE_TO_ICON[type], type + '-icon');
+    const icon = createIcon(TYPE_TO_ICON[type], type + '-icon');
     this.contentElement.createChild('div', 'icon-container').appendChild(icon);
 
     this.mainRow = this.contentElement.createChild('div', 'infobar-main-row');
@@ -180,7 +180,7 @@ export class Infobar {
     if (!this.detailsRows) {
       const details = document.createElement('details');
       const summary = details.createChild('summary');
-      const triangleIcon = IconButton.Icon.create('arrow-drop-down');
+      const triangleIcon = createIcon('arrow-drop-down');
       summary.createChild('div', 'icon-container').appendChild(triangleIcon);
       this.contentElement.insertBefore(details, this.mainRow);
       summary.appendChild(this.mainRow);

package/front_end/ui/legacy/InspectorView.ts

@@ -9,7 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
@@ -429,10 +429,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     // Find the tabbed location where the panel lives
     const tabbedPane = this.getTabbedPaneForTabId(tabId);
     if (tabbedPane) {
-      let icon: IconButton.Icon.Icon|null = null;
+      let icon: Icon|null = null;
       if (warnings.length !== 0) {
         const warning = warnings.length === 1 ? warnings[0] : '· ' + warnings.join('\n· ');
-        icon = IconButton.Icon.create('warning-filled', 'small');
+        icon = createIcon('warning-filled', 'small');
         icon.classList.add('warning');
         Tooltip.install(icon, warning);
       }

package/front_end/ui/legacy/SearchableView.ts

@@ -41,7 +41,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../components/buttons/buttons.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {InspectorView} from './InspectorView.js';
@@ -189,7 +189,7 @@ export class SearchableView extends VBox {
     // Elements within `searchInputElements` are added according to their expected tab order.
     const searchInputElements = this.footerElement.createChild('div', 'search-inputs');
     const iconAndInput = searchInputElements.createChild('div', 'icon-and-input');
-    const searchIcon = IconButton.Icon.create('search');
+    const searchIcon = createIcon('search');
     iconAndInput.appendChild(searchIcon);
 
     this.searchInputElement = createHistoryInput('search', 'search-replace search');

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -6,7 +6,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -218,7 +218,7 @@ export class SoftContextMenu {
 
     // If the menu contains a checkbox, add checkbox space in front of the label to align the items
     if (menuContainsCheckbox) {
-      const checkMarkElement = IconButton.Icon.create('checkmark', 'checkmark');
+      const checkMarkElement = createIcon('checkmark', 'checkmark');
       menuItemElement.appendChild(checkMarkElement);
     }
     if (item.tooltip) {
@@ -293,7 +293,7 @@ export class SoftContextMenu {
     ARIAUtils.setLabel(menuItemElement, accessibleName);
 
     if (item.isExperimentalFeature) {
-      const experimentIcon = IconButton.Icon.create('experiment');
+      const experimentIcon = createIcon('experiment');
       menuItemElement.appendChild(experimentIcon);
     }
 
@@ -317,14 +317,14 @@ export class SoftContextMenu {
 
     // If the menu contains a checkbox, add checkbox space in front of the label to align the items
     if (menuContainsCheckbox) {
-      const checkMarkElement = IconButton.Icon.create('checkmark', 'checkmark soft-context-menu-item-checkmark');
+      const checkMarkElement = createIcon('checkmark', 'checkmark soft-context-menu-item-checkmark');
       menuItemElement.appendChild(checkMarkElement);
     }
 
     createTextChild(menuItemElement, item.label || '');
     ARIAUtils.setExpanded(menuItemElement, false);
 
-    const subMenuArrowElement = IconButton.Icon.create('keyboard-arrow-right', 'soft-context-menu-item-submenu-arrow');
+    const subMenuArrowElement = createIcon('keyboard-arrow-right', 'soft-context-menu-item-submenu-arrow');
     menuItemElement.appendChild(subMenuArrowElement);
 
     menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);

package/front_end/ui/legacy/SoftDropDown.ts

@@ -6,7 +6,7 @@
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -56,7 +56,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.element.classList.add('soft-dropdown');
     appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
-    const dropdownArrowIcon = IconButton.Icon.create('triangle-down');
+    const dropdownArrowIcon = createIcon('triangle-down');
     this.element.appendChild(dropdownArrowIcon);
     ARIAUtils.setExpanded(this.element, false);
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -13,7 +13,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../kit/kit.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {ContextMenu} from './ContextMenu.js';
@@ -402,7 +402,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     return this.tabsHistory.slice(0, tabsCount).map(tabToTabId);
   }
 
-  setTabIcon(id: string, icon: IconButton.Icon.Icon|null): void {
+  setTabIcon(id: string, icon: Icon|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -411,7 +411,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.requestUpdate();
   }
 
-  setTrailingTabIcon(id: string, icon: IconButton.Icon.Icon|null): void {
+  setTrailingTabIcon(id: string, icon: Icon|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -662,7 +662,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const dropDownContainer = document.createElement('div');
     dropDownContainer.classList.add('tabbed-pane-header-tabs-drop-down-container');
     dropDownContainer.setAttribute('jslog', `${VisualLogging.dropDown('more-tabs').track({click: true})}`);
-    const chevronIcon = IconButton.Icon.create('chevron-double-right', 'chevron-icon');
+    const chevronIcon = createIcon('chevron-double-right', 'chevron-icon');
     const moreTabsString = i18nString(UIStrings.moreTabs);
     dropDownContainer.title = moreTabsString;
     ARIAUtils.markAsMenuButton(dropDownContainer);
@@ -1070,7 +1070,7 @@ export class TabbedPaneTab {
   shown: boolean;
   measuredWidth!: number|undefined;
   #tabElement!: HTMLElement|undefined;
-  private icon: IconButton.Icon.Icon|null = null;
+  private icon: Icon|null = null;
   private suffixElement: HTMLElement|null = null;
   #width?: number;
   private delegate?: TabbedPaneTabDelegate;
@@ -1147,7 +1147,7 @@ export class TabbedPaneTab {
     return this.closeable;
   }
 
-  setIcon(icon: IconButton.Icon.Icon|null): void {
+  setIcon(icon: Icon|null): void {
     this.icon = icon;
     if (this.#tabElement && this.titleElement) {
       this.createIconElement(this.#tabElement, this.titleElement, false);
@@ -1250,7 +1250,7 @@ export class TabbedPaneTab {
     tabSuffixElements.set(tabElement, suffixElementContainer);
   }
 
-  private createMeasureClone(original: IconButton.Icon.Icon): Element {
+  private createMeasureClone(original: Icon): Element {
     // Cloning doesn't work for the icon component because the shadow
     // root isn't copied, but it is sufficient to create a div styled
     // to be the same size.
@@ -1319,7 +1319,7 @@ export class TabbedPaneTab {
     // TODO(finnur): Replace the ai-icon with the squiggly svg once it becomes available.
     const iconContainer = document.createElement('div');
     iconContainer.classList.add('ai-icon');
-    const tabAnnotationIcon = new IconButton.Icon.Icon();
+    const tabAnnotationIcon = new Icon();
     tabAnnotationIcon.name = 'smart-assistant';
     tabAnnotationIcon.classList.add('small');
     iconContainer.appendChild(tabAnnotationIcon);
@@ -1346,7 +1346,7 @@ export class TabbedPaneTab {
   private createPreviewIcon(): HTMLDivElement {
     const iconContainer = document.createElement('div');
     iconContainer.classList.add('preview-icon');
-    const previewIcon = new IconButton.Icon.Icon();
+    const previewIcon = new Icon();
     previewIcon.name = 'experiment';
     previewIcon.classList.add('small');
     iconContainer.appendChild(previewIcon);

package/front_end/ui/legacy/Toolbar.ts

@@ -10,7 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
 import {ActionRegistry} from './ActionRegistry.js';
@@ -824,7 +824,7 @@ export class ToolbarFilter extends ToolbarInput {
         filterPlaceholder, filterPlaceholder, growFactor, shrinkFactor, tooltip, completions, dynamicCompletions,
         jslogContext || 'filter', element);
 
-    const filterIcon = IconButton.Icon.create('filter');
+    const filterIcon = createIcon('filter');
     this.element.prepend(filterIcon);
     this.element.classList.add('toolbar-filter');
   }
@@ -997,7 +997,7 @@ export class ToolbarMenuButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.title = '';
     if (!isIconDropdown) {
       this.element.classList.add('toolbar-has-dropdown');
-      const dropdownArrowIcon = IconButton.Icon.create('triangle-down', 'toolbar-dropdown-arrow');
+      const dropdownArrowIcon = createIcon('triangle-down', 'toolbar-dropdown-arrow');
       this.element.appendChild(dropdownArrowIcon);
     }
     if (jslogContext) {

package/front_end/ui/legacy/Treeoutline.ts

@@ -40,7 +40,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Buttons from '../components/buttons/buttons.js';
 import * as Highlighting from '../components/highlighting/highlighting.js';
-import type * as IconButton from '../components/icon_button/icon_button.js';
+import type {Icon} from '../kit/kit.js';
 import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -810,7 +810,7 @@ export class TreeElement {
     }
   }
 
-  setLeadingIcons(icons: IconButton.Icon.Icon[]|Lit.TemplateResult[]): void {
+  setLeadingIcons(icons: Icon[]|Lit.TemplateResult[]): void {
     if (!this.leadingIconsElement && !icons.length) {
       return;
     }

package/front_end/ui/legacy/UIUtils.ts

@@ -42,7 +42,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../components/buttons/buttons.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {Icon, type IconData} from '../kit/kit.js';
 import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -1281,19 +1281,19 @@ export class CheckboxLabel extends HTMLElement {
 customElements.define('devtools-checkbox', CheckboxLabel);
 
 export class DevToolsIconLabel extends HTMLElement {
-  readonly #icon: IconButton.Icon.Icon;
+  readonly #icon: Icon;
 
   constructor() {
     super();
     const root = createShadowRootWithCoreStyles(this);
-    this.#icon = new IconButton.Icon.Icon();
+    this.#icon = new Icon();
     this.#icon.style.setProperty('margin-right', '4px');
     this.#icon.style.setProperty('vertical-align', 'baseline');
     root.appendChild(this.#icon);
     root.createChild('slot');
   }
 
-  set data(data: IconButton.Icon.IconData) {
+  set data(data: IconData) {
     this.#icon.data = data;
     // TODO(crbug.com/1427397): Clean this up. This was necessary so `DevToolsIconLabel` can use Lit icon
     //    while being backwards-compatible with the legacy Icon while working for both small and large icons.

package/front_end/ui/legacy/ViewManager.ts

@@ -11,7 +11,7 @@ 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 type * as Foundation from '../../foundation/foundation.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -472,7 +472,7 @@ export class ContainerWidget extends VBox {
 
 class ExpandableContainerWidget extends VBox {
   private titleElement: HTMLDivElement;
-  private readonly titleExpandIcon: IconButton.Icon.Icon;
+  private readonly titleExpandIcon: Icon;
   private readonly view: View;
   private widget?: Widget;
   private materializePromise?: Promise<void>;
@@ -489,7 +489,7 @@ class ExpandableContainerWidget extends VBox {
                                      keydown: 'Enter|Space|ArrowLeft|ArrowRight',
                                    })}`);
     ARIAUtils.markAsTreeitem(this.titleElement);
-    this.titleExpandIcon = IconButton.Icon.create('triangle-right', 'title-expand-icon');
+    this.titleExpandIcon = createIcon('triangle-right', 'title-expand-icon');
     this.titleElement.appendChild(this.titleExpandIcon);
     const titleText = view.title();
     createTextChild(this.titleElement, titleText);
@@ -809,7 +809,7 @@ class TabbedLocation extends Location implements TabbedViewLocation {
         view.isCloseable() || view.isTransient(), view.isPreviewFeature(), index);
     const iconName = view.iconName();
     if (iconName) {
-      const icon = IconButton.Icon.create(iconName);
+      const icon = createIcon(iconName);
       this.#tabbedPane.setTabIcon(view.viewId(), icon);
     }
   }

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -10,7 +10,7 @@ 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 IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../../../../ui/kit/kit.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
 import * as UI from '../../legacy.js';
 
@@ -134,9 +134,9 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.contrastValueBubble = contrastValueRowContents.createChild('span', 'contrast-details-value');
     this.contrastValue = this.contrastValueBubble.createChild('span');
     this.contrastValueBubbleIcons = [];
-    this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(IconButton.Icon.create('checkmark')));
-    this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(IconButton.Icon.create('check-double')));
-    this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(IconButton.Icon.create('clear')));
+    this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(createIcon('checkmark')));
+    this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(createIcon('check-double')));
+    this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(createIcon('clear')));
     this.contrastValueBubbleIcons.forEach(button => button.addEventListener('click', (event: Event) => {
       ContrastDetails.showHelp();
       event.consume(false);
@@ -492,8 +492,8 @@ export class Swatch {
   }
 }
 
-function createIconCheckmark(): IconButton.Icon.Icon {
-  const icon = new IconButton.Icon.Icon();
+function createIconCheckmark(): Icon {
+  const icon = new Icon();
   icon.name = 'checkmark';
   icon.style.color = 'var(--icon-checkmark-green)';
   icon.style.width = 'var(--sys-size-9)';
@@ -501,8 +501,8 @@ function createIconCheckmark(): IconButton.Icon.Icon {
   return icon;
 }
 
-function createIconNo(): IconButton.Icon.Icon {
-  const icon = new IconButton.Icon.Icon();
+function createIconNo(): Icon {
+  const icon = new Icon();
   icon.name = 'clear';
   icon.style.color = 'var(--icon-error)';
   icon.classList.add('small');

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -39,8 +39,8 @@ 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 TextUtils from '../../../../models/text_utils/text_utils.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as SrgbOverlay from '../../../components/srgb_overlay/srgb_overlay.js';
+import {createIcon, Icon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -563,7 +563,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     }
 
     function appendSwitcherIcon(parentElement: Element): void {
-      const switcherIcon = new IconButton.Icon.Icon();
+      const switcherIcon = new Icon();
       switcherIcon.name = 'fold-more';
       switcherIcon.classList.add('medium');
       parentElement.appendChild(switcherIcon);
@@ -1650,7 +1650,7 @@ export class Swatch {
   private colorString!: string|null;
   private swatchInnerElement: HTMLElement;
   private swatchOverlayElement: HTMLElement;
-  private readonly swatchCopyIcon: IconButton.Icon.Icon;
+  private readonly swatchCopyIcon: Icon;
   constructor(parentElement: HTMLElement) {
     const swatchElement = parentElement.createChild('span', 'swatch');
     swatchElement.setAttribute('jslog', `${VisualLogging.action('copy-color').track({click: true})}`);
@@ -1662,7 +1662,7 @@ export class Swatch {
     self.onInvokeElement(this.swatchOverlayElement, this.onCopyText.bind(this));
     this.swatchOverlayElement.addEventListener('mouseout', this.onCopyIconMouseout.bind(this));
     this.swatchOverlayElement.addEventListener('blur', this.onCopyIconMouseout.bind(this));
-    this.swatchCopyIcon = IconButton.Icon.create('copy', 'copy-color-icon');
+    this.swatchCopyIcon = createIcon('copy', 'copy-color-icon');
     UI.Tooltip.Tooltip.install(this.swatchCopyIcon, i18nString(UIStrings.copyColorToClipboard));
     this.swatchOverlayElement.appendChild(this.swatchCopyIcon);
     UI.ARIAUtils.setLabel(this.swatchOverlayElement, this.swatchCopyIcon.title);

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -42,7 +42,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../../../panels/network/forward/forward.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
+import {Icon} from '../../../kit/kit.js';
 import {Directives, html, render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
@@ -72,7 +72,7 @@ type CookieData = Partial<Record<SDK.Cookie.Attribute, string>>&{
 }&{
   key?: string,
   flagged?: boolean,
-  icons?: Partial<Record<AttributeWithIcon, IconButton.Icon.Icon>>,
+  icons?: Partial<Record<AttributeWithIcon, Icon>>,
   priorityValue?: number,
   expiresTooltip?: string,
   dirty?: boolean,
@@ -513,7 +513,7 @@ export class CookiesTable extends UI.Widget.VBox {
       const attribute = (blockedReason.attribute || SDK.Cookie.Attribute.NAME) as AttributeWithIcon;
       data.icons = data.icons || {};
       if (!(attribute in data.icons)) {
-        data.icons[attribute] = new IconButton.Icon.Icon();
+        data.icons[attribute] = new Icon();
         if (attribute === SDK.Cookie.Attribute.NAME &&
             IssuesManager.RelatedIssue.hasThirdPartyPhaseoutCookieIssue(cookie)) {
           data.icons[attribute].name = 'warning-filled';
@@ -532,7 +532,7 @@ export class CookiesTable extends UI.Widget.VBox {
     if (exemptionReason) {
       data.icons = data.icons || {};
       data.flagged = true;
-      data.icons.name = new IconButton.Icon.Icon();
+      data.icons.name = new Icon();
       data.icons.name.name = 'info';
       data.icons.name.classList.add('small');
       data.icons.name.title = exemptionReason;

package/front_end/ui/legacy/components/inline_editor/FontEditor.ts

@@ -8,7 +8,7 @@ import '../../legacy.js';
 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 IconButton from '../../../components/icon_button/icon_button.js';
+import {Icon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -733,7 +733,7 @@ class FontPropertyInputs {
 
   private createTypeToggle(field: Element, jslogContext: string): void {
     const displaySwitcher = field.createChild('div', 'spectrum-switcher');
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'fold-more';
     icon.classList.add('medium');
     displaySwitcher.appendChild(icon);

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -3,16 +3,16 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../components/icon_button/icon_button.js';
+import '../../../kit/kit.js';
 
-import type * as IconButton from '../../../components/icon_button/icon_button.js';
+import type {Icon} from '../../../kit/kit.js';
 import {html, render} from '../../../lit/lit.js';
 
 import type {CSSShadowModel} from './CSSShadowEditor.js';
 import cssShadowSwatchStyles from './cssShadowSwatch.css.js';
 
 export class CSSShadowSwatch extends HTMLElement {
-  readonly #icon: IconButton.Icon.Icon;
+  readonly #icon: Icon;
   readonly #model: CSSShadowModel;
 
   constructor(model: CSSShadowModel) {
@@ -26,14 +26,14 @@ export class CSSShadowSwatch extends HTMLElement {
         this, {host: this});
     // clang-format on
 
-    this.#icon = this.querySelector('devtools-icon') as IconButton.Icon.Icon;
+    this.#icon = this.querySelector('devtools-icon') as Icon;
   }
 
   model(): CSSShadowModel {
     return this.#model;
   }
 
-  iconElement(): IconButton.Icon.Icon {
+  iconElement(): Icon {
     return this.#icon;
   }
 }