chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -68,6 +68,10 @@ const UIStrings = {
    * @description Text in Connection info View of the Network panel
    */
   directSocketStatusAborted: 'Aborted',
+  /**
+   * @description Text in Connection info View of the Network panel
+   */
+  joinedMulticastGroups: 'joinedMulticastGroups',
 
 } as const;
 
@@ -167,6 +171,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         ${renderRow(i18nString(UIStrings.type), getDirectSocketTypeString(socketInfo.type))}
         ${renderRow(i18nString(UIStrings.status), getDirectSocketStatusString(socketInfo.status))}
         ${renderRow(i18nString(UIStrings.errorMessage), socketInfo.errorMessage)}
+        ${
+      renderRow(
+          i18nString(UIStrings.joinedMulticastGroups),
+          socketInfo.joinedMulticastGroups ? Array.from(socketInfo.joinedMulticastGroups).join(', ') : '')}
       </div>`;
 
   const optionsContent = html`
@@ -181,6 +189,15 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         ${
       renderRow(i18n.i18n.lockedString('receiveBufferSize'), socketInfo.createOptions.receiveBufferSize?.toString(10))}
         ${renderRow(i18n.i18n.lockedString('dnsQueryType'), socketInfo.createOptions.dnsQueryType)}
+        ${
+      renderRow(
+          i18n.i18n.lockedString('multicastTimeToLive'), socketInfo.createOptions.multicastTimeToLive?.toString(10))}
+        ${
+      renderRow(i18n.i18n.lockedString('multicastLoopback'), socketInfo.createOptions.multicastLoopback?.toString())}
+        ${
+      renderRow(
+          i18n.i18n.lockedString('multicastAllowAddressSharing'),
+          socketInfo.createOptions.multicastAllowAddressSharing?.toString())}
       </div>`;
 
   let openInfoContent: Lit.LitTemplate = Lit.nothing;

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -4,13 +4,13 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import type {IconWithName} from '../../../ui/kit/kit.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -223,12 +223,12 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
   }
 }
 
-const SUCCESS_ICON_DATA: IconButton.Icon.IconWithName = {
+const SUCCESS_ICON_DATA: IconWithName = {
   color: 'var(--icon-checkmark-green)',
   iconName: 'check-circle',
 };
 
-const FAILURE_ICON_DATA: IconButton.Icon.IconWithName = {
+const FAILURE_ICON_DATA: IconWithName = {
   color: 'var(--icon-error)',
   iconName: 'cross-circle-filled',
 };
@@ -239,8 +239,7 @@ export function statusConsideredSuccess(status: Protocol.Network.TrustTokenOpera
       status === Protocol.Network.TrustTokenOperationDoneEventStatus.FulfilledLocally;
 }
 
-function getIconForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus):
-    IconButton.Icon.IconWithName {
+function getIconForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): IconWithName {
   return statusConsideredSuccess(status) ? SUCCESS_ICON_DATA : FAILURE_ICON_DATA;
 }
 

package/front_end/panels/network/resourceChunkView.css

@@ -12,6 +12,10 @@
   flex: auto;
   border: none;
 
+  .resource-chunk-view-td {
+    border-bottom: 1px solid var(--sys-color-divider);
+  }
+
   & tr {
     &.resource-chunk-view-row-send td:first-child::before {
       content: "\2B06";

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -10,7 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -631,12 +631,12 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
     const div = fragment.$('container');
     this.prefixObjectCell(div);
     if (this.reachableFromWindow) {
-      const frameIcon = IconButton.Icon.create('frame', 'heap-object-tag');
+      const frameIcon = createIcon('frame', 'heap-object-tag');
       UI.Tooltip.Tooltip.install(frameIcon, i18nString(UIStrings.userObjectReachableFromWindow));
       div.appendChild(frameIcon);
     }
     if (this.detachedDOMTreeNode) {
-      const frameIcon = IconButton.Icon.create('scissors', 'heap-object-tag');
+      const frameIcon = createIcon('scissors', 'heap-object-tag');
       UI.Tooltip.Tooltip.install(frameIcon, i18nString(UIStrings.detachedFromDomTree));
       div.appendChild(frameIcon);
     }

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -31,7 +31,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -203,7 +203,7 @@ export class ProfileDataGridNode extends DataGrid.DataGrid.DataGridNode<unknown>
         cell.classList.toggle('highlight', this.searchMatchedFunctionColumn);
         if (this.deoptReason) {
           cell.classList.add('not-optimized');
-          const warningIcon = new IconButton.Icon.Icon();
+          const warningIcon = new Icon();
           warningIcon.name = 'warning-filled';
           warningIcon.classList.add('profile-warn-marker', 'small');
           UI.Tooltip.Tooltip.install(warningIcon, i18nString(UIStrings.notOptimizedS, {PH1: this.deoptReason}));

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -33,7 +33,7 @@ import '../../ui/legacy/legacy.js';
 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';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -668,7 +668,7 @@ export class ProfilesSidebarTreeElement extends UI.TreeOutline.TreeElement {
         .createChild('span', 'title-container')
         .createChild('span', 'title')
         .textContent = i18nString(UIStrings.profiles);
-    this.setLeadingIcons([IconButton.Icon.create('tune')]);
+    this.setLeadingIcons([createIcon('tune')]);
   }
 }
 

package/front_end/panels/protocol_monitor/JSONEditor.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.
 
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 import '../../ui/components/menus/menus.js';
 
 import * as Common from '../../core/common/common.js';

package/front_end/panels/recorder/components/CreateRecordingView.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.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './ControlButton.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/panels/recorder/components/ExtensionView.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/legacy.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as PublicExtensions from '../../../models/extensions/extensions.js';

package/front_end/panels/recorder/components/RecordingListView.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.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';

package/front_end/panels/recorder/components/RecordingView.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.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './ExtensionView.js';
 import './ControlButton.js';
 import './ReplaySection.js';

package/front_end/panels/recorder/components/StepView.ts

@@ -7,7 +7,7 @@
    do not define any host for Lit.render and the rule is not happy
    about it. */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './StepEditor.js';
 import './TimelineSection.js';
 

package/front_end/panels/screencast/ScreencastView.ts

@@ -10,7 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {InputModel} from './InputModel.js';
@@ -104,8 +104,8 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
   private navigationProgressBar?: ProgressTracker;
   private touchInputToggle?: HTMLButtonElement;
   private mouseInputToggle?: HTMLButtonElement;
-  private touchInputToggleIcon?: IconButton.Icon.Icon;
-  private mouseInputToggleIcon?: IconButton.Icon.Icon;
+  private touchInputToggleIcon?: Icon;
+  private mouseInputToggleIcon?: Icon;
   private historyIndex?: number;
   private historyEntries?: Protocol.Page.NavigationEntry[];
   private isCasting = false;
@@ -648,17 +648,17 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.navigationBar = this.element.createChild('div', 'screencast-navigation');
 
     this.navigationBack = this.navigationBar.createChild('button', 'navigation');
-    this.navigationBack.appendChild(IconButton.Icon.create('arrow-back'));
+    this.navigationBack.appendChild(createIcon('arrow-back'));
     this.navigationBack.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationBack, i18nString(UIStrings.back));
 
     this.navigationForward = this.navigationBar.createChild('button', 'navigation');
-    this.navigationForward.appendChild(IconButton.Icon.create('arrow-forward'));
+    this.navigationForward.appendChild(createIcon('arrow-forward'));
     this.navigationForward.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationForward, i18nString(UIStrings.forward));
 
     this.navigationReload = this.navigationBar.createChild('button', 'navigation');
-    this.navigationReload.appendChild(IconButton.Icon.create('refresh'));
+    this.navigationReload.appendChild(createIcon('refresh'));
     UI.ARIAUtils.setLabel(this.navigationReload, i18nString(UIStrings.reload));
 
     this.navigationUrl = this.navigationBar.appendChild(UI.UIUtils.createInput());
@@ -668,14 +668,14 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.mouseInputToggle = this.navigationBar.createChild('button');
     this.mouseInputToggle.disabled = true;
     {
-      this.mouseInputToggleIcon = this.mouseInputToggle.appendChild(new IconButton.Icon.Icon());
+      this.mouseInputToggleIcon = this.mouseInputToggle.appendChild(new Icon());
       this.mouseInputToggleIcon.name = 'mouse';
       this.mouseInputToggleIcon.classList.toggle('toggled', true);
     }
     UI.ARIAUtils.setLabel(this.mouseInputToggle, i18nString(UIStrings.mouseInput));
 
     this.touchInputToggle = this.navigationBar.createChild('button');
-    this.touchInputToggleIcon = this.touchInputToggle.appendChild(IconButton.Icon.create('touch-app'));
+    this.touchInputToggleIcon = this.touchInputToggle.appendChild(createIcon('touch-app'));
     UI.ARIAUtils.setLabel(this.touchInputToggle, i18nString(UIStrings.touchInput));
 
     this.navigationProgressBar = new ProgressTracker(

package/front_end/panels/search/SearchView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/legacy.js';
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';

package/front_end/panels/security/CookieControlsTreeElement.ts

@@ -1,14 +1,14 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class CookieControlsTreeElement extends SecurityPanelSidebarTreeElement {
   constructor(title: string, jslogContext: string|number) {
     super(title, false, jslogContext);
-    this.setLeadingIcons([IconButton.Icon.create('gear', 'cookie-icon')]);
+    this.setLeadingIcons([createIcon('gear', 'cookie-icon')]);
   }
 
   override get elemId(): string {

package/front_end/panels/security/CookieControlsView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/components/switch/switch.js';
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 import '../../ui/components/chrome_link/chrome_link.js';
 
 import * as Common from '../../core/common/common.js';

package/front_end/panels/security/CookieReportTreeElement.ts

@@ -1,14 +1,14 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class CookieReportTreeElement extends SecurityPanelSidebarTreeElement {
   constructor(title: string, jslogContext: string|number) {
     super(title, false, jslogContext);
-    this.setLeadingIcons([IconButton.Icon.create('cookie', 'cookie-icon')]);
+    this.setLeadingIcons([createIcon('cookie', 'cookie-icon')]);
   }
 
   override get elemId(): string {

package/front_end/panels/security/SecurityPanel.ts

@@ -10,7 +10,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -470,7 +470,7 @@ const WARNING_ICON_NAME = 'warning';
 const UNKNOWN_ICON_NAME = 'indeterminate-question-box';
 
 export function getSecurityStateIconForDetailedView(
-    securityState: Protocol.Security.SecurityState, className: string): IconButton.Icon.Icon {
+    securityState: Protocol.Security.SecurityState, className: string): Icon {
   let iconName: string;
 
   switch (securityState) {
@@ -488,11 +488,11 @@ export function getSecurityStateIconForDetailedView(
       break;
   }
 
-  return IconButton.Icon.create(iconName, className);
+  return createIcon(iconName, className);
 }
 
 export function getSecurityStateIconForOverview(
-    securityState: Protocol.Security.SecurityState, className: string): IconButton.Icon.Icon {
+    securityState: Protocol.Security.SecurityState, className: string): Icon {
   let iconName: string;
   switch (securityState) {
     case Protocol.Security.SecurityState.Unknown:  // fallthrough
@@ -509,7 +509,7 @@ export function getSecurityStateIconForOverview(
     case Protocol.Security.SecurityState.Info:
       throw new Error(`Unexpected security state ${securityState}`);
   }
-  return IconButton.Icon.create(iconName, className);
+  return createIcon(iconName, className);
 }
 
 export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): Element {

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -8,7 +8,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 * as Protocol from '../../generated/protocol.js';
-import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {CookieControlsTreeElement} from './CookieControlsTreeElement.js';
@@ -73,7 +73,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class SecurityPanelSidebar extends UI.Widget.VBox {
   readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
   readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
-  readonly #originGroupTitles: Map<OriginGroup, {title: string, icon?: IconButton.Icon.Icon}>;
+  readonly #originGroupTitles: Map<OriginGroup, {title: string, icon?: Icon}>;
   #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
   securityOverviewElement: OriginTreeElement;
   readonly #cookieControlsTreeElement: CookieControlsTreeElement|undefined;
@@ -204,8 +204,7 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     return this.#originGroups.get(originGroup) as UI.TreeOutline.TreeElement;
   }
 
-  #createOriginGroupElement(originGroupTitle: string, originGroupIcon?: IconButton.Icon.Icon):
-      UI.TreeOutline.TreeElement {
+  #createOriginGroupElement(originGroupTitle: string, originGroupIcon?: Icon): UI.TreeOutline.TreeElement {
     const originGroup = new UI.TreeOutline.TreeElement(originGroupTitle, true);
     originGroup.selectable = false;
     originGroup.expand();

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -3,14 +3,14 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 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 Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -383,7 +383,7 @@ export class ShortcutListItem {
 
   private createEmptyInfo(): void {
     if (UI.ShortcutRegistry.ShortcutRegistry.instance().actionHasDefaultShortcut(this.item.id())) {
-      const icon = IconButton.Icon.create('keyboard-pen', 'keybinds-modified');
+      const icon = createIcon('keyboard-pen', 'keybinds-modified');
       UI.ARIAUtils.setLabel(icon, i18nString(UIStrings.shortcutModified));
       this.element.appendChild(icon);
     }
@@ -441,9 +441,9 @@ export class ShortcutListItem {
     if (this.editedShortcuts.has(shortcut) && !this.editedShortcuts.get(shortcut)) {
       return;
     }
-    let icon: IconButton.Icon.Icon;
+    let icon: Icon;
     if (shortcut.type !== UI.KeyboardShortcut.Type.UNSET_SHORTCUT && !shortcut.isDefault()) {
-      icon = IconButton.Icon.create('keyboard-pen', 'keybinds-modified');
+      icon = createIcon('keyboard-pen', 'keybinds-modified');
       UI.ARIAUtils.setLabel(icon, i18nString(UIStrings.shortcutModified));
       this.element.appendChild(icon);
     }

package/front_end/panels/settings/SettingsScreen.ts

@@ -5,16 +5,15 @@
 
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import type * as Cards from '../../ui/components/cards/cards.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
+import {type Card, createIcon} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -83,7 +82,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let settingsScreenInstance: SettingsScreen;
 
-function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Cards.Card.Card {
+function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Card {
   const card = document.createElement('devtools-card');
   card.heading = heading;
   card.append(...content);
@@ -382,8 +381,8 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
 }
 
 export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTab {
-  #experimentsSection: Cards.Card.Card|undefined;
-  #unstableExperimentsSection: Cards.Card.Card|undefined;
+  #experimentsSection: Card|undefined;
+  #unstableExperimentsSection: Card|undefined;
   private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
   private readonly containerElement: HTMLElement;
 
@@ -460,7 +459,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
   private createExperimentsWarningSubsection(warningMessage: string): HTMLElement {
     const subsection = document.createElement('div');
     subsection.classList.add('experiments-warning-subsection');
-    const warningIcon = IconButton.Icon.create('warning');
+    const warningIcon = createIcon('warning');
     subsection.appendChild(warningIcon);
     const warning = subsection.createChild('span');
     warning.textContent = warningMessage;
@@ -581,7 +580,7 @@ export class Revealer implements Common.Revealer.Revealer<Root.Runtime.Experimen
     }
 
     // Reveal settings views
-    for (const view of UI.ViewManager.getRegisteredViewExtensions()) {
+    for (const view of UI.ViewManager.ViewManager.instance().getRegisteredViewExtensions()) {
       const id = view.viewId();
       const location = view.location();
       if (location !== UI.ViewManager.ViewLocationValues.SETTINGS_VIEW) {

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -4,7 +4,7 @@
 
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/buttons/buttons.js';
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../../ui/components/cards/cards.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+import '../../ui/components/highlighting/highlighting.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
+import {html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {evaluateScriptSnippet, findSnippetsProject} from './ScriptSnippetFileSystem.js';
 
@@ -81,11 +84,18 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.snippets[itemIndex].name();
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
-    const icon = IconButton.Icon.create('snippet', 'snippet');
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
-    titleElement.textContent = this.snippets[itemIndex].name();
-    QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query, true);
+  override renderItem(itemIndex: number, query: string): TemplateResult {
+    // clang-format off
+    const snippet = this.snippets[itemIndex].name();
+    const highlightRanges = QuickOpen.FilteredListWidget.FilteredListWidget.getHighlightRanges(snippet, query, true);
+    return html`
+      <devtools-icon class="snippet" name="snippet"></devtools-icon>
+      <div>
+        <devtools-highlight type="markup" ranges=${highlightRanges}>
+          ${snippet}
+        </devtools-highlight>
+      </div>`;
+    // clang-format on
   }
 }
 

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -10,8 +10,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.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} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -181,7 +181,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     }));
     editorWrapper.appendChild(this.editor);
 
-    const closeIcon = IconButton.Icon.create('cross');
+    const closeIcon = createIcon('cross');
     closeIcon.title = i18nString(UIStrings.closeDialog);
     closeIcon.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
     closeIcon.onclick = () => this.finishEditing(true, this.editor.state.doc.toString());
@@ -196,7 +196,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     const link = UI.Fragment.html`<x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
                                           jslog="${VisualLogging.link('learn-more')}">${
                      i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>` as UI.XLink.XLink;
-    const linkIcon = IconButton.Icon.create('open-externally', 'link-icon');
+    const linkIcon = createIcon('open-externally', 'link-icon');
     link.prepend(linkIcon);
     linkWrapper.appendChild(link);
 

package/front_end/panels/sources/BreakpointsView.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.
 
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';