chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

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/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/settings/KeybindsSettingsTab.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 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

@@ -12,9 +12,8 @@ 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 * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
-import type {Card} from '../../ui/kit/kit.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';
@@ -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;

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,13 +84,18 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.snippets[itemIndex].name();
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-    const icon = IconButton.Icon.create('snippet', 'snippet');
-    wrapperElement.insertBefore(icon, itemElement);
-    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';

package/front_end/panels/sources/CSSPlugin.ts

@@ -13,7 +13,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -211,7 +211,7 @@ class CurveSwatchWidget extends CodeMirror.WidgetType {
   toDOM(view: CodeMirror.EditorView): HTMLElement {
     const container = document.createElement('span');
     const bezierText = container.createChild('span');
-    const icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    const icon = createIcon('bezier-curve-filled', 'bezier-swatch-icon');
     icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
     bezierText.append(this.text);
     UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.openCubicBezierEditor));
@@ -251,7 +251,7 @@ type ActiveTooltip = {
   pos: number,
   text: string,
   curve: Geometry.CubicBezier,
-  swatch: IconButton.Icon.Icon,
+  swatch: Icon,
 };
 
 function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -38,7 +38,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -126,7 +126,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.notPausedMessageElement.tabIndex = -1;
 
     this.callFrameWarningsElement = this.contentElement.createChild('div', 'call-frame-warnings-message');
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'warning-filled';
     icon.classList.add('call-frame-warning-icon', 'small');
     this.callFrameWarningsElement.appendChild(icon);
@@ -330,14 +330,14 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     element.classList.toggle('selected', isSelected);
     UI.ARIAUtils.setSelected(element, isSelected);
     element.classList.toggle('hidden', !this.showIgnoreListed && item.isIgnoreListed);
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'large-arrow-right-filled';
     icon.classList.add('selected-call-frame-icon', 'small');
     element.appendChild(icon);
     element.tabIndex = item === this.list.selectedItem() ? 0 : -1;
 
     if (callframe?.missingDebugInfoDetails) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('call-frame-warning-icon', 'small');
       const messages = callframe.missingDebugInfoDetails.resources.map(

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -9,8 +9,8 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
@@ -158,7 +158,7 @@ export class DebuggerPausedMessage {
     }
 
     const mainElement = messageWrapper.createChild('div', 'status-main');
-    const mainIcon = new IconButton.Icon.Icon();
+    const mainIcon = new Icon();
     mainIcon.name = 'info';
     mainIcon.style.color = 'var(--sys-color-on-yellow-container)';
     mainIcon.classList.add('medium');
@@ -290,7 +290,7 @@ export class DebuggerPausedMessage {
     function buildWrapper(mainText: string, subText?: string, title?: string): Element {
       const messageWrapper = document.createElement('span');
       const mainElement = messageWrapper.createChild('div', 'status-main');
-      const mainIcon = new IconButton.Icon.Icon();
+      const mainIcon = new Icon();
       mainIcon.name = errorLike ? 'cross-circle-filled' : 'info';
       mainIcon.style.color = errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)';
       mainIcon.classList.add('medium');

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -2,14 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/components/highlighting/highlighting.js';
+
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilePathScoreFunction} from './FilePathScoreFunction.js';
 import filteredUISourceCodeListProviderStyles from './filteredUISourceCodeListProvider.css.js';
@@ -25,8 +26,11 @@ const UIStrings = {
    */
   sIgnoreListed: '{PH1} (ignore listed)',
 } as const;
+
 const str_ = i18n.i18n.registerUIStrings('panels/sources/FilteredUISourceCodeListProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {classMap} = Directives;
+
 export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidget.Provider {
   private queryLineNumberAndColumnNumber: string;
   private defaultScores: Map<Workspace.UISourceCode.UISourceCode, number>|null;
@@ -145,13 +149,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     return score + multiplier * (contentTypeBonus + this.scorer.calculateScore(fullDisplayName, null));
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
-    wrapperElement.createChild('style').textContent = filteredUISourceCodeListProviderStyles;
-    const itemElement = wrapperElement.createChild('div', 'filtered-ui-source-code-list-item');
-
-    const titleElement = itemElement.createChild('div', 'filtered-ui-source-code-title');
-
-    titleElement.classList.toggle('search-mode', Boolean(query));
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     query = this.rewriteQuery(query);
     const uiSourceCode = this.uiSourceCodes[itemIndex];
     const fullDisplayName = uiSourceCode.fullDisplayName();
@@ -164,42 +162,53 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     let tooltipText = fullDisplayName;
 
     if (isIgnoreListed) {
-      itemElement.classList.add('is-ignore-listed');
       tooltipText = i18nString(UIStrings.sIgnoreListed, {PH1: tooltipText});
     }
 
-    titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
-    const subtitleElement = itemElement.createChild('div', 'filtered-ui-source-code-subtitle');
-    this.renderSubtitleElement(subtitleElement, fullDisplayName.substring(0, fileNameIndex + 1));
-    UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), tooltipText);
-
-    const ranges = [];
-    for (let i = 0; i < indexes.length; ++i) {
-      ranges.push({offset: indexes[i], length: 1});
-    }
+    const titleRanges = [];
+    const subtitleRanges = [];
 
     if (indexes[0] > fileNameIndex) {
-      for (let i = 0; i < ranges.length; ++i) {
-        ranges[i].offset -= fileNameIndex + 1;
+      for (let i = 0; i < indexes.length; ++i) {
+        titleRanges.push({offset: indexes[i] - (fileNameIndex + 1), length: 1});
       }
-      Highlighting.highlightRangesWithStyleClass(titleElement, ranges, 'highlight');
     } else {
-      Highlighting.highlightRangesWithStyleClass(subtitleElement, ranges, 'highlight');
+      for (let i = 0; i < indexes.length; ++i) {
+        subtitleRanges.push({offset: indexes[i], length: 1});
+      }
     }
+    // clang-format off
+    return html`
+      <style>${filteredUISourceCodeListProviderStyles}</style>
+      <div class="filtered-ui-source-code-list-item
+                  ${classMap({'is-ignore-listed': isIgnoreListed})}">
+        <devtools-highlight
+            type="markup"
+            ranges=${titleRanges.map(r => `${r.offset},${r.length}`).join(' ')}
+            class="filtered-ui-source-code-title ${classMap({'search-mode': Boolean(query)})}">
+          ${uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '')}
+        </devtools-highlight>
+        <devtools-highlight
+            type="markup"
+            ranges=${subtitleRanges.map(r => `${r.offset},${r.length}`).join(' ')}
+            class="filtered-ui-source-code-subtitle" title=${tooltipText}>
+          ${this.renderSubtitleElement(fullDisplayName.substring(0, fileNameIndex + 1))}
+        </devtools-highlight>
+      </div>`;
+    // clang-format on
   }
 
-  private renderSubtitleElement(element: Element, text: string): void {
-    element.removeChildren();
+  private renderSubtitleElement(text: string): TemplateResult {
     let splitPosition = text.lastIndexOf('/');
     const maxTextLength = 43;
     if (text.length > maxTextLength) {
       splitPosition = text.length - maxTextLength;
     }
-    const first = element.createChild('div', 'first-part');
-    first.textContent = text.substring(0, splitPosition);
-    const second = element.createChild('div', 'second-part');
-    second.textContent = text.substring(splitPosition);
-    UI.Tooltip.Tooltip.install((element as HTMLElement), text);
+    // clang-format off
+    return html`
+      <div class="first-part">${text.substring(0, splitPosition)}</div>
+      <div class="second-part">${text.substring(splitPosition)}</div>`;
+    // clang-format on
   }
 
   override selectItem(itemIndex: number|null, promptValue: string): void {

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -2,10 +2,12 @@
 // 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 * as i18n from '../../core/i18n/i18n.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 * as UI from '../../ui/legacy/legacy.js';
+import {html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {SourcesView} from './SourcesView.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -77,12 +79,14 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.#goToLineStrings.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-    const icon = IconButton.Icon.create('colon');
-    wrapperElement.insertBefore(icon, itemElement);
-    UI.UIUtils.createTextChild(titleElement, this.#goToLineStrings[itemIndex]);
+  override renderItem(itemIndex: number, _query: string): TemplateResult {
+    // clang-format off
+    return html`
+      <devtools-icon name="colon"></devtools-icon>
+      <div>
+        <div>${this.#goToLineStrings[itemIndex]}</div>
+      </div>`;
+    // clang-format on
   }
 
   override rewriteQuery(_query: string): string {

package/front_end/panels/sources/NavigatorView.ts

@@ -15,8 +15,8 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Spinners from '../../ui/components/spinners/spinners.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';
 import * as Snippets from '../snippets/snippets.js';
@@ -1287,7 +1287,7 @@ export class NavigatorFolderTreeElement extends UI.TreeOutline.TreeElement {
       iconType = 'folder-asterisk';
     }
 
-    const icon = IconButton.Icon.create(iconType);
+    const icon = createIcon(iconType);
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -1,17 +1,20 @@
 // Copyright 2012 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 */
+
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import {PanelUtils} from '../../panels/utils/utils.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilteredUISourceCodeListProvider} from './FilteredUISourceCodeListProvider.js';
 import {SourcesView} from './SourcesView.js';
 
+const {styleMap} = Directives;
+
 export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
   constructor() {
     super('source-file');
@@ -40,19 +43,12 @@ export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
     return !project.isServiceProject();
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
-    super.renderItem(itemIndex, query, wrapperElement);
-    const itemElement = wrapperElement.firstChild;
-    if (!itemElement) {
-      return;
-    }
-    const iconElement = new IconButton.Icon.Icon();
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const {iconName, color} = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
-    iconElement.name = iconName;
-    if (color) {
-      iconElement.style.color = color;
-    }
-    iconElement.classList.add('large');
-    wrapperElement.insertBefore(iconElement, itemElement);
+    // clang-format off
+    return html`
+      <devtools-icon class="large" name=${iconName} style=${styleMap({color})}></devtools-icon>
+      ${super.renderItem(itemIndex, query)}`;
+    // clang-format on
   }
 }