chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/ui/legacy/TabbedPane.ts

@@ -2,7 +2,7 @@
 // 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-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
 import './Toolbar.js';
 
@@ -12,8 +12,9 @@ import * as Platform from '../../core/platform/platform.js';
 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 {type LitTemplate, render} from '../../ui/lit/lit.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';
@@ -67,15 +68,30 @@ const UIStrings = {
    */
   moveTabLeft: 'Move left',
 } as const;
+
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface TabInfo {
+  id: string;
+  title: string;
+  view: Widget;
+  tabTooltip?: string;
+  isCloseable?: boolean;
+  previewFeature?: boolean;
+  index?: number;
+  jslogContext?: string;
+  enabled?: boolean;
+  selected?: boolean;
+}
+
 export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof VBox>(VBox) {
   readonly #headerElement: HTMLElement;
   private readonly headerContentsElement: HTMLElement;
   tabSlider: HTMLDivElement;
   readonly tabsElement: HTMLElement;
   readonly #contentElement: HTMLElement;
-  private tabs: TabbedPaneTab[];
+  #tabs: TabbedPaneTab[];
   private readonly tabsHistory: TabbedPaneTab[];
   tabsById: Map<string, TabbedPaneTab>;
   private currentTabLocked: boolean;
@@ -115,7 +131,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
     this.#contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
     this.#contentElement.createChild('slot');
-    this.tabs = [];
+    this.#tabs = [];
     this.tabsHistory = [];
     this.tabsById = new Map();
     this.currentTabLocked = false;
@@ -129,7 +145,11 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       Annotations.AnnotationRepository.instance().addEventListener(
-          Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+          Annotations.Events.ANNOTATION_ADDED, this.#onUpdateAnnotations, this);
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ANNOTATION_DELETED, this.#onUpdateAnnotations, this);
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ALL_ANNOTATIONS_DELETED, this.#onUpdateAnnotations, this);
     }
   }
 
@@ -151,15 +171,15 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   tabIds(): string[] {
-    return this.tabs.map(tab => tab.id);
+    return this.#tabs.map(tab => tab.id);
   }
 
   tabIndex(tabId: string): number {
-    return this.tabs.findIndex(tab => tab.id === tabId);
+    return this.#tabs.findIndex(tab => tab.id === tabId);
   }
 
   tabViews(): Widget[] {
-    return this.tabs.map(tab => tab.view);
+    return this.#tabs.map(tab => tab.view);
   }
 
   tabView(tabId: string): Widget|null {
@@ -210,7 +230,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   setTabDelegate(delegate: TabbedPaneTabDelegate): void {
-    const tabs = this.tabs.slice();
+    const tabs = this.#tabs.slice();
     for (let i = 0; i < tabs.length; ++i) {
       tabs[i].setDelegate(delegate);
     }
@@ -230,9 +250,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     tab.tabElement.setAttribute(
         'jslog', `${VisualLogging.panelTabHeader().track({click: true, drag: true}).context(tab.jslogContext)}`);
     if (index !== undefined) {
-      this.tabs.splice(index, 0, tab);
+      this.#tabs.splice(index, 0, tab);
     } else {
-      this.tabs.push(tab);
+      this.#tabs.push(tab);
     }
     this.tabsHistory.push(tab);
     if (this.tabsHistory[0] === tab && this.isShowing()) {
@@ -278,7 +298,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsById.delete(id);
 
     this.tabsHistory.splice(this.tabsHistory.indexOf(tab), 1);
-    this.tabs.splice(this.tabs.indexOf(tab), 1);
+    this.#tabs.splice(this.#tabs.indexOf(tab), 1);
     if (tab.shown) {
       this.hideTabElement(tab);
     }
@@ -294,9 +314,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   otherTabs(id: string): string[] {
     const result = [];
-    for (let i = 0; i < this.tabs.length; ++i) {
-      if (this.tabs[i].id !== id) {
-        result.push(this.tabs[i].id);
+    for (let i = 0; i < this.#tabs.length; ++i) {
+      if (this.#tabs[i].id !== id) {
+        result.push(this.#tabs[i].id);
       }
     }
     return result;
@@ -304,7 +324,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   tabsToTheRight(id: string): string[] {
     let index = -1;
-    for (let i = 0; i < this.tabs.length; ++i) {
+    for (let i = 0; i < this.#tabs.length; ++i) {
       if (this.tabs[i].id === id) {
         index = i;
         break;
@@ -313,7 +333,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     if (index === -1) {
       return [];
     }
-    return this.tabs.slice(index + 1).map(function(tab) {
+    return this.#tabs.slice(index + 1).map(function(tab) {
       return tab.id;
     });
   }
@@ -368,19 +388,19 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   selectNextTab(): void {
-    const index = this.tabs.indexOf((this.currentTab as TabbedPaneTab));
-    const nextIndex = Platform.NumberUtilities.mod(index + 1, this.tabs.length);
-    this.selectTab(this.tabs[nextIndex].id, true);
+    const index = this.#tabs.indexOf((this.currentTab as TabbedPaneTab));
+    const nextIndex = Platform.NumberUtilities.mod(index + 1, this.#tabs.length);
+    this.selectTab(this.#tabs[nextIndex].id, true);
   }
 
   selectPrevTab(): void {
-    const index = this.tabs.indexOf((this.currentTab as TabbedPaneTab));
-    const nextIndex = Platform.NumberUtilities.mod(index - 1, this.tabs.length);
-    this.selectTab(this.tabs[nextIndex].id, true);
+    const index = this.#tabs.indexOf((this.currentTab as TabbedPaneTab));
+    const nextIndex = Platform.NumberUtilities.mod(index - 1, this.#tabs.length);
+    this.selectTab(this.#tabs[nextIndex].id, true);
   }
 
   getTabIndex(id: string): number {
-    const index = this.tabs.indexOf((this.tabsById.get(id) as TabbedPaneTab));
+    const index = this.#tabs.indexOf((this.tabsById.get(id) as TabbedPaneTab));
     return index;
   }
 
@@ -402,7 +422,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 +431,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|LitTemplate|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -419,7 +439,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     tab.setSuffixElement(icon);
   }
 
-  setSuffixElement(id: string, suffixElement: HTMLElement|null): void {
+  setSuffixElement(id: string, suffixElement: HTMLElement|LitTemplate|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -460,8 +480,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   private clearMeasuredWidths(): void {
-    for (let i = 0; i < this.tabs.length; ++i) {
-      delete this.tabs[i].measuredWidth;
+    for (let i = 0; i < this.#tabs.length; ++i) {
+      delete this.#tabs[i].measuredWidth;
     }
   }
 
@@ -499,6 +519,59 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.resumeInvalidations();
   }
 
+  get tabs(): TabInfo[] {
+    return this.#tabs.map(tab => ({
+                            id: tab.id,
+                            title: tab.title,
+                            view: tab.view,
+                            tabTooltip: tab.tooltip,
+                            isCloseable: tab.closeable,
+                            previewFeature: tab.previewFeature,
+                            index: this.#tabs.indexOf(tab),
+                            jslogContext: tab.jslogContext,
+                            enabled: this.tabIsEnabled(tab.id),
+                            selected: this.currentTab?.id === tab.id,
+                          }));
+  }
+
+  set tabs(tabs: TabInfo[]) {
+    const newIds = new Set(tabs.map(tab => tab.id));
+    for (const id of this.tabsById.keys()) {
+      if (!newIds.has(id)) {
+        this.#closeTab(id);
+      }
+    }
+    let index = 0;
+    for (const tab of tabs) {
+      const existingTab = this.tabsById.get(tab.id);
+      if (existingTab) {
+        this.changeTabView(tab.id, tab.view);
+        this.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
+        if (tab.isCloseable !== undefined) {
+          existingTab.closeable = tab.isCloseable;
+        }
+        if (tab.previewFeature !== undefined) {
+          existingTab.previewFeature = tab.previewFeature;
+        }
+        const currentIndex = this.#tabs.indexOf(existingTab);
+        if (currentIndex !== index) {
+          this.insertBefore(existingTab, index);
+        }
+      } else {
+        this.appendTab(
+            tab.id, tab.title, tab.view, tab.tabTooltip, /* userGesture=*/ false, tab.isCloseable, tab.previewFeature,
+            index, tab.jslogContext);
+      }
+      if (tab.enabled !== undefined) {
+        this.setTabEnabled(tab.id, tab.enabled);
+      }
+      if (tab.selected) {
+        this.selectTab(tab.id);
+      }
+      ++index;
+    }
+  }
+
   override onResize(): void {
     if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
       // Force recalculation of all tab widths on a DPI change
@@ -589,8 +662,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
           break;
       }
 
-      const showTabAnnotationIcon = annotations.getAnnotationsByType(primaryType).length > 0 ||
-          annotations.getAnnotationsByType(secondaryType).length > 0;
+      const showTabAnnotationIcon = annotations.getAnnotationDataByType(primaryType).length > 0 ||
+          annotations.getAnnotationDataByType(secondaryType).length > 0;
       this.setTabAnnotationIcon(tab.id, showTabAnnotationIcon);
     }
   }
@@ -600,7 +673,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
 
-    if (!this.tabs.length) {
+    if (!this.#tabs.length) {
       this.#contentElement.classList.add('has-no-tabs');
       if (this.placeholderElement && !this.placeholderContainerElement) {
         this.placeholderContainerElement = this.#contentElement.createChild('div', 'tabbed-pane-placeholder fill');
@@ -662,7 +735,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);
@@ -697,7 +770,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
         ARIAUtils.setExpanded(this.dropDownButton, false);
       },
     });
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       if (tab.shown) {
         continue;
       }
@@ -729,7 +802,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   private numberOfTabsShown(): number {
     let numTabsShown = 0;
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       if (tab.shown) {
         numTabsShown++;
       }
@@ -739,26 +812,26 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   private updateTabsDropDown(): void {
     const tabsToShowIndexes =
-        this.tabsToShowIndexes(this.tabs, this.tabsHistory, this.totalWidth(), this.measuredDropDownButtonWidth || 0);
+        this.tabsToShowIndexes(this.#tabs, this.tabsHistory, this.totalWidth(), this.measuredDropDownButtonWidth || 0);
     if (this.lastSelectedOverflowTab && this.numberOfTabsShown() !== tabsToShowIndexes.length) {
       delete this.lastSelectedOverflowTab;
       this.updateTabsDropDown();
       return;
     }
 
-    for (let i = 0; i < this.tabs.length; ++i) {
-      if (this.tabs[i].shown && tabsToShowIndexes.indexOf(i) === -1) {
-        this.hideTabElement(this.tabs[i]);
+    for (let i = 0; i < this.#tabs.length; ++i) {
+      if (this.#tabs[i].shown && tabsToShowIndexes.indexOf(i) === -1) {
+        this.hideTabElement(this.#tabs[i]);
       }
     }
     for (let i = 0; i < tabsToShowIndexes.length; ++i) {
-      const tab = this.tabs[tabsToShowIndexes[i]];
+      const tab = this.#tabs[tabsToShowIndexes[i]];
       if (!tab.shown) {
         this.showTabElement(i, tab);
       }
     }
 
-    this.maybeShowDropDown(tabsToShowIndexes.length !== this.tabs.length);
+    this.maybeShowDropDown(tabsToShowIndexes.length !== this.#tabs.length);
   }
 
   private maybeShowDropDown(hasMoreTabs: boolean): void {
@@ -786,7 +859,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
         this.shrinkableTabs ? this.calculateMaxWidth(measuredWidths.slice(), this.totalWidth()) : Number.MAX_VALUE;
 
     let i = 0;
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       tab.setWidth(this.verticalTabLayout ? -1 : Math.min(maxWidth, measuredWidths[i++]));
     }
   }
@@ -795,7 +868,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     // Add all elements to measure into this.tabsElement
     this.tabsElement.style.setProperty('width', '2000px');
     const measuringTabElements = new Map<HTMLElement, TabbedPaneTab>();
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       if (typeof tab.measuredWidth === 'number') {
         continue;
       }
@@ -817,7 +890,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     // Combine the results.
     const measuredWidths = [];
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       measuredWidths.push(tab.measuredWidth || 0);
     }
     this.tabsElement.style.removeProperty('width');
@@ -917,9 +990,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     let left = 0;
-    for (let i = 0; i < this.tabs.length && this.currentTab !== this.tabs[i]; i++) {
-      if (this.tabs[i].shown) {
-        left += this.tabs[i].measuredWidth || 0;
+    for (let i = 0; i < this.#tabs.length && this.currentTab !== this.#tabs[i]; i++) {
+      if (this.#tabs[i].shown) {
+        left += this.#tabs[i].measuredWidth || 0;
       }
     }
     const sliderWidth = this.currentTab.shown ? this.currentTab.measuredWidth : this.dropDownButton.offsetWidth;
@@ -946,12 +1019,12 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   insertBefore(tab: TabbedPaneTab, index: number): void {
     this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.childNodes[index]);
-    const oldIndex = this.tabs.indexOf(tab);
-    this.tabs.splice(oldIndex, 1);
+    const oldIndex = this.#tabs.indexOf(tab);
+    this.#tabs.splice(oldIndex, 1);
     if (oldIndex < index) {
       --index;
     }
-    this.tabs.splice(index, 0, tab);
+    this.#tabs.splice(index, 0, tab);
 
     const eventData: EventData = {prevTabId: undefined, tabId: tab.id, view: tab.view, isUserGesture: undefined};
     this.dispatchEventToListeners(Events.TabOrderChanged, eventData);
@@ -987,7 +1060,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
-  #onAnnotationAdded(): void {
+  #onUpdateAnnotations(): void {
     this.updateTabAnnotationIcons();
   }
 
@@ -1026,7 +1099,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.dropDownButton.click();
       return;
     }
-    const tab = this.tabs.find(tab => tab.tabElement === nextTabElement);
+    const tab = this.#tabs.find(tab => tab.tabElement === nextTabElement);
     if (tab) {
       this.selectTab(tab.id, true);
     }
@@ -1070,8 +1143,9 @@ export class TabbedPaneTab {
   shown: boolean;
   measuredWidth!: number|undefined;
   #tabElement!: HTMLElement|undefined;
-  private icon: IconButton.Icon.Icon|null = null;
-  private suffixElement: HTMLElement|null = null;
+  private icon: Icon|null = null;
+  private suffixElement: HTMLElement|LitTemplate|null = null;
+
   #width?: number;
   private delegate?: TabbedPaneTabDelegate;
   private titleElement?: HTMLElement;
@@ -1147,7 +1221,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);
@@ -1155,7 +1229,7 @@ export class TabbedPaneTab {
     delete this.measuredWidth;
   }
 
-  setSuffixElement(suffixElement: HTMLElement|null): void {
+  setSuffixElement(suffixElement: HTMLElement|LitTemplate|null): void {
     this.suffixElement = suffixElement;
     if (this.#tabElement && this.titleElement) {
       this.createSuffixElement(this.#tabElement, this.titleElement, false);
@@ -1244,13 +1318,17 @@ export class TabbedPaneTab {
 
     const suffixElementContainer = document.createElement('span');
     suffixElementContainer.classList.add('tabbed-pane-header-tab-suffix-element');
-    const suffixElement = measuring ? this.suffixElement.cloneNode() : this.suffixElement;
-    suffixElementContainer.appendChild(suffixElement);
+    if (this.suffixElement instanceof HTMLElement) {
+      const suffixElement = measuring ? this.suffixElement.cloneNode() : this.suffixElement;
+      suffixElementContainer.appendChild(suffixElement);
+    } else {
+      render(this.suffixElement, suffixElementContainer);
+    }
     titleElement.insertAdjacentElement('afterend', suffixElementContainer);
     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 +1397,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 +1424,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');