chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/ui/legacy/UIUtils.ts

@@ -41,9 +41,8 @@ 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 Geometry from '../../models/geometry/geometry.js';
-import * as TextUtils from '../../models/text_utils/text_utils.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';
 
@@ -125,9 +124,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/UIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export const highlightedSearchResultClassName = 'highlighted-search-result';
-export const highlightedCurrentSearchResultClassName = 'current-search-result';
-
 export function installDragHandle(
     element: Element, elementDragStart: ((arg0: MouseEvent) => boolean)|null, elementDrag: (arg0: MouseEvent) => void,
     elementDragEnd: ((arg0: MouseEvent) => void)|null, cursor: string|null, hoverCursor?: string|null,
@@ -698,17 +694,6 @@ export class ElementFocusRestorer {
   }
 }
 
-export function highlightSearchResult(
-    element: Element, offset: number, length: number, domChanges?: HighlightChange[]): Element|null {
-  const result = highlightSearchResults(element, [new TextUtils.TextRange.SourceRange(offset, length)], domChanges);
-  return result.length ? result[0] : null;
-}
-
-export function highlightSearchResults(
-    element: Element, resultRanges: TextUtils.TextRange.SourceRange[], changes?: HighlightChange[]): Element[] {
-  return highlightRangesWithStyleClass(element, resultRanges, highlightedSearchResultClassName, changes);
-}
-
 export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
@@ -725,166 +710,6 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   element.classList.add(className);
 }
 
-export function highlightRangesWithStyleClass(
-    element: Element, resultRanges: TextUtils.TextRange.SourceRange[], styleClass: string,
-    changes?: HighlightChange[]): Element[] {
-  changes = changes || [];
-  const highlightNodes: Element[] = [];
-  const textNodes = element.childTextNodes();
-  const lineText = textNodes
-                       .map(function(node) {
-                         return node.textContent;
-                       })
-                       .join('');
-  const ownerDocument = element.ownerDocument;
-
-  if (textNodes.length === 0) {
-    return highlightNodes;
-  }
-
-  const nodeRanges: TextUtils.TextRange.SourceRange[] = [];
-  let rangeEndOffset = 0;
-  for (const textNode of textNodes) {
-    const range =
-        new TextUtils.TextRange.SourceRange(rangeEndOffset, textNode.textContent ? textNode.textContent.length : 0);
-    rangeEndOffset = range.offset + range.length;
-    nodeRanges.push(range);
-  }
-
-  let startIndex = 0;
-  for (let i = 0; i < resultRanges.length; ++i) {
-    const startOffset = resultRanges[i].offset;
-    const endOffset = startOffset + resultRanges[i].length;
-
-    while (startIndex < textNodes.length &&
-           nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset) {
-      startIndex++;
-    }
-    let endIndex = startIndex;
-    while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset) {
-      endIndex++;
-    }
-    if (endIndex === textNodes.length) {
-      break;
-    }
-
-    const highlightNode = ownerDocument.createElement('span');
-    highlightNode.className = styleClass;
-    highlightNode.textContent = lineText.substring(startOffset, endOffset);
-
-    const lastTextNode = textNodes[endIndex];
-    const lastText = lastTextNode.textContent || '';
-    lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
-    changes.push({
-      node: (lastTextNode as Element),
-      type: 'changed',
-      oldText: lastText,
-      newText: lastTextNode.textContent,
-      nextSibling: undefined,
-      parent: undefined,
-    });
-
-    if (startIndex === endIndex && lastTextNode.parentElement) {
-      lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
-      changes.push({
-        node: highlightNode,
-        type: 'added',
-        nextSibling: lastTextNode,
-        parent: lastTextNode.parentElement,
-        oldText: undefined,
-        newText: undefined,
-      });
-      highlightNodes.push(highlightNode);
-
-      const prefixNode =
-          ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
-      lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
-      changes.push({
-        node: prefixNode,
-        type: 'added',
-        nextSibling: highlightNode,
-        parent: lastTextNode.parentElement,
-        oldText: undefined,
-        newText: undefined,
-      });
-    } else {
-      const firstTextNode = textNodes[startIndex];
-      const firstText = firstTextNode.textContent || '';
-      const anchorElement = firstTextNode.nextSibling;
-
-      if (firstTextNode.parentElement) {
-        firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
-        changes.push({
-          node: highlightNode,
-          type: 'added',
-          nextSibling: anchorElement || undefined,
-          parent: firstTextNode.parentElement,
-          oldText: undefined,
-          newText: undefined,
-        });
-        highlightNodes.push(highlightNode);
-      }
-
-      firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
-      changes.push({
-        node: (firstTextNode as Element),
-        type: 'changed',
-        oldText: firstText,
-        newText: firstTextNode.textContent,
-        nextSibling: undefined,
-        parent: undefined,
-      });
-
-      for (let j = startIndex + 1; j < endIndex; j++) {
-        const textNode = textNodes[j];
-        const text = textNode.textContent;
-        textNode.textContent = '';
-        changes.push({
-          node: (textNode as Element),
-          type: 'changed',
-          oldText: text || undefined,
-          newText: textNode.textContent,
-          nextSibling: undefined,
-          parent: undefined,
-        });
-      }
-    }
-    startIndex = endIndex;
-    nodeRanges[startIndex].offset = endOffset;
-    nodeRanges[startIndex].length = lastTextNode.textContent.length;
-  }
-  return highlightNodes;
-}
-
-/** Used in chromium/src/third_party/blink/web_tests/http/tests/devtools/components/utilities-highlight-results.js **/
-export function applyDomChanges(domChanges: HighlightChange[]): void {
-  for (let i = 0, size = domChanges.length; i < size; ++i) {
-    const entry = domChanges[i];
-    switch (entry.type) {
-      case 'added':
-        entry.parent?.insertBefore(entry.node, entry.nextSibling ?? null);
-        break;
-      case 'changed':
-        entry.node.textContent = entry.newText ?? null;
-        break;
-    }
-  }
-}
-
-export function revertDomChanges(domChanges: HighlightChange[]): void {
-  for (let i = domChanges.length - 1; i >= 0; --i) {
-    const entry = domChanges[i];
-    switch (entry.type) {
-      case 'added':
-        entry.node.remove();
-        break;
-      case 'changed':
-        entry.node.textContent = entry.oldText ?? null;
-        break;
-    }
-  }
-}
-
 export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
   const oldNextSibling = element.nextSibling;
@@ -1456,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.
@@ -1802,15 +1627,6 @@ export interface Options {
   expand?: boolean;
 }
 
-export interface HighlightChange {
-  node: Element|Text;
-  type: string;
-  oldText?: string;
-  newText?: string;
-  nextSibling?: Node;
-  parent?: Node;
-}
-
 export const isScrolledToBottom = (element: Element): boolean => {
   // This code works only for 0-width border.
   // The scrollTop, clientHeight and scrollHeight are computed in double values internally.

package/front_end/ui/legacy/ViewManager.ts

@@ -10,7 +10,8 @@ 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 '../components/icon_button/icon_button.js';
+import type * as Foundation from '../../foundation/foundation.js';
+import {createIcon, type Icon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -52,10 +53,12 @@ export const defaultOptionsForTabs = {
 
 export class PreRegisteredView implements View {
   private readonly viewRegistration: ViewRegistration;
+  private readonly universe?: Foundation.Universe.Universe;
   private widgetPromise: Promise<Widget>|null;
 
-  constructor(viewRegistration: ViewRegistration) {
+  constructor(viewRegistration: ViewRegistration, universe?: Foundation.Universe.Universe) {
     this.viewRegistration = viewRegistration;
+    this.universe = universe;
     this.widgetPromise = null;
   }
 
@@ -124,7 +127,10 @@ export class PreRegisteredView implements View {
 
   widget(): Promise<Widget> {
     if (this.widgetPromise === null) {
-      this.widgetPromise = this.viewRegistration.loadView();
+      if (!this.universe) {
+        throw new Error('Creating views via ViewManager requires a Foundation.Universe');
+      }
+      this.widgetPromise = this.viewRegistration.loadView(this.universe);
     }
     return this.widgetPromise;
   }
@@ -168,7 +174,11 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 
-  private constructor() {
+  private readonly preRegisteredViews: PreRegisteredView[] = [];
+
+  // TODO(crbug.com/458180550): Pass the universe unconditionally once tests no longer rely
+  //   on `instance()` to create ViewManagers lazily in after/afterEach blocks.
+  private constructor(universe?: Foundation.Universe.Universe) {
     super();
 
     // Read override setting for location
@@ -180,9 +190,9 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
     const viewsByLocation = new Map<ViewLocationValues|'none', PreRegisteredView[]>();
     for (const view of getRegisteredViewExtensions()) {
-      const location = view.location() || 'none';
+      const location = view.location || 'none';
       const views = viewsByLocation.get(location) || [];
-      views.push(view);
+      views.push(new PreRegisteredView(view, universe));
       viewsByLocation.set(location, views);
     }
 
@@ -209,6 +219,7 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         throw new Error(`Invalid view ID '${viewId}'`);
       }
       this.views.set(viewId, view);
+      this.preRegisteredViews.push(view);
       // Use the preferred user location if available
       const locationName = preferredExtensionLocations[viewId] || location;
       this.locationNameByViewId.set(viewId, locationName as string);
@@ -217,10 +228,11 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   static instance(opts: {
     forceNew: boolean|null,
+    universe?: Foundation.Universe.Universe,
   } = {forceNew: null}): ViewManager {
-    const {forceNew} = opts;
+    const {forceNew, universe} = opts;
     if (!viewManagerInstance || forceNew) {
-      viewManagerInstance = new ViewManager();
+      viewManagerInstance = new ViewManager(universe);
     }
 
     return viewManagerInstance;
@@ -241,6 +253,10 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return toolbar;
   }
 
+  getRegisteredViewExtensions(): PreRegisteredView[] {
+    return this.preRegisteredViews;
+  }
+
   locationNameForViewId(viewId: string): string {
     const locationName = this.locationNameByViewId.get(viewId);
     if (!locationName) {
@@ -456,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>;
@@ -473,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);
@@ -793,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);
     }
   }
@@ -1004,7 +1020,6 @@ class StackLocation extends Location implements ViewLocation {
 export {
   getLocalizedViewLocationCategory,
   getRegisteredLocationResolvers,
-  getRegisteredViewExtensions,
   maybeRemoveViewExtension,
   registerLocationResolver,
   registerViewExtension,

package/front_end/ui/legacy/ViewRegistration.ts

@@ -5,9 +5,9 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+import type * as Foundation from '../../foundation/foundation.js';
 
 import type {ViewLocationResolver} from './View.js';
-import {PreRegisteredView} from './ViewManager.js';
 import type {Widget} from './Widget.js';
 
 const UIStrings = {
@@ -43,8 +43,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/ViewRegistration.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const registeredViewExtensions: PreRegisteredView[] = [];
-
 export const enum ViewPersistence {
   CLOSEABLE = 'closeable',
   PERMANENT = 'permanent',
@@ -115,7 +113,11 @@ export interface ViewRegistration {
   /**
    * Returns an instance of the class that wraps the view.
    * The common pattern for implementing this function is loading the module with the wrapping 'Widget'
-   * lazily loaded. As an example:
+   * lazily loaded.
+   * The DevTools universe is passed along, allowing `loadView` to retrieve necessary dependencies.
+   * Prefer passing individual dependencies one by one instead of forwarding the full universe. This
+   * makes testing easier.
+   * As an example:
    *
    * ```js
    * let loadedElementsModule;
@@ -129,15 +131,16 @@ export interface ViewRegistration {
    * }
    * UI.ViewManager.registerViewExtension({
    *   <...>
-   *   async loadView() {
+   *   async loadView(universe) {
    *      const Elements = await loadElementsModule();
-   *      return Elements.ElementsPanel.ElementsPanel.instance();
+   *      const pageResourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+   *      return new Elements.ElementsPanel.ElementsPanel(pageResourceLoader);
    *   },
    *   <...>
    * });
    * ```
    */
-  loadView: () => Promise<Widget>;
+  loadView: (universe: Foundation.Universe.Universe) => Promise<Widget>;
   /**
    * Used to sort the views that appear in a shared location.
    */
@@ -160,28 +163,25 @@ export interface ViewRegistration {
   featurePromotionId?: string;
 }
 
-const viewIdSet = new Set<string>();
+const registeredViewExtensions = new Map<string, ViewRegistration>();
+
 export function registerViewExtension(registration: ViewRegistration): void {
   const viewId = registration.id;
-  if (viewIdSet.has(viewId)) {
+  if (registeredViewExtensions.has(viewId)) {
     throw new Error(`Duplicate view id '${viewId}'`);
   }
-  viewIdSet.add(viewId);
-  registeredViewExtensions.push(new PreRegisteredView(registration));
+  registeredViewExtensions.set(viewId, registration);
 }
 
-export function getRegisteredViewExtensions(): PreRegisteredView[] {
-  return registeredViewExtensions.filter(
-      view => Root.Runtime.Runtime.isDescriptorEnabled({experiment: view.experiment(), condition: view.condition()}));
+export function getRegisteredViewExtensions(): ViewRegistration[] {
+  return registeredViewExtensions.values()
+      .filter(
+          view => Root.Runtime.Runtime.isDescriptorEnabled({experiment: view.experiment, condition: view.condition}))
+      .toArray();
 }
 
 export function maybeRemoveViewExtension(viewId: string): boolean {
-  const viewIndex = registeredViewExtensions.findIndex(view => view.viewId() === viewId);
-  if (viewIndex < 0 || !viewIdSet.delete(viewId)) {
-    return false;
-  }
-  registeredViewExtensions.splice(viewIndex, 1);
-  return true;
+  return registeredViewExtensions.delete(viewId);
 }
 
 const registeredLocationResolvers: LocationResolverRegistration[] = [];
@@ -202,10 +202,9 @@ export function getRegisteredLocationResolvers(): LocationResolverRegistration[]
 }
 
 export function resetViewRegistration(): void {
-  registeredViewExtensions.length = 0;
+  registeredViewExtensions.clear();
   registeredLocationResolvers.length = 0;
   viewLocationNameSet.clear();
-  viewIdSet.clear();
 }
 
 export const enum ViewLocationCategory {

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;
   }
 }

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -7,7 +7,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 type * as Protocol from '../../../../generated/protocol.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../../kit/kit.js';
 import * as UI from '../../legacy.js';
 
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
@@ -33,7 +33,7 @@ export class CustomPreviewSection {
   private expanded: boolean;
   private cachedContent: Node|null;
   private readonly header: Node|undefined;
-  private readonly expandIcon: IconButton.Icon.Icon|undefined;
+  private readonly expandIcon: Icon|undefined;
   constructor(object: SDK.RemoteObject.RemoteObject) {
     this.sectionElement = document.createElement('span');
     this.sectionElement.classList.add('custom-expandable-section');
@@ -64,7 +64,7 @@ export class CustomPreviewSection {
         this.header.classList.add('custom-expandable-section-header');
       }
       this.header.addEventListener('click', this.onClick.bind(this), false);
-      this.expandIcon = IconButton.Icon.create('triangle-right', 'custom-expand-icon');
+      this.expandIcon = createIcon('triangle-right', 'custom-expand-icon');
       this.header.insertBefore(this.expandIcon, this.header.firstChild);
     }