chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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,
@@ -208,7 +208,7 @@ export class CookiesTable extends UI.Widget.VBox {
                id="cookies-table"
                striped
                ?inline=${input.renderInline}
-               @create=${input.onCreate}
+               @create=${(e: CustomEvent<CookieData>) => input.onCreate(e.detail)}
                @refresh=${input.onRefresh}
                @deselect=${() => input.onSelect(undefined)}
           >
@@ -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/ColorSwatch.ts

@@ -53,58 +53,62 @@ export class ClickEvent extends Event {
 }
 
 export class ColorSwatch extends HTMLElement {
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
-  private color: Common.Color.Color|null = null;
-  private readonly = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
+  #color: Common.Color.Color|null = null;
+  #readonly = false;
 
   constructor(tooltip?: string) {
     super();
     if (tooltip) {
-      this.tooltip = tooltip;
+      this.#tooltip = tooltip;
     }
     this.tabIndex = -1;
-    this.addEventListener('keydown', e => this.onActivate(e));
+    this.addEventListener('keydown', e => this.#onActivate(e));
   }
 
   static isColorSwatch(element: Element): element is ColorSwatch {
     return element.localName === 'devtools-color-swatch';
   }
 
-  setReadonly(readonly: boolean): void {
-    if (this.readonly === readonly) {
+  get readonly(): boolean {
+    return this.#readonly;
+  }
+
+  set readonly(readonly: boolean) {
+    if (this.#readonly === readonly) {
       return;
     }
 
-    this.readonly = readonly;
-    if (this.color) {
-      this.renderColor(this.color);
+    this.#readonly = readonly;
+    if (this.#color) {
+      this.color = this.#color;
     }
   }
 
-  getColor(): Common.Color.Color|null {
-    return this.color;
+  get color(): Common.Color.Color|null {
+    return this.#color;
   }
 
   get anchorBox(): AnchorBox|null {
-    const swatch = this.shadow.querySelector('.color-swatch');
+    const swatch = this.#shadow.querySelector('.color-swatch');
     return swatch ? swatch.boxInWindow() : null;
   }
 
   getText(): string|undefined {
-    return this.color?.getAuthoredText() ?? this.color?.asString();
+    return this.#color?.getAuthoredText() ?? this.#color?.asString();
   }
 
   /**
    * Render this swatch given a color object or text to be parsed as a color.
    * @param color The color object or string to use for this swatch.
    */
-  renderColor(color: Common.Color.Color): void {
-    this.color = color;
+  set color(color: Common.Color.Color) {
+    this.#color = color;
 
     const colorSwatchClasses = Lit.Directives.classMap({
       'color-swatch': true,
-      readonly: this.readonly,
+      readonly: this.#readonly,
     });
 
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -116,19 +120,20 @@ export class ColorSwatch extends HTMLElement {
     Lit.render(
       html`<style>${colorSwatchStyles}</style><span
           class=${colorSwatchClasses}
-          title=${this.tooltip}><span
+          title=${this.#tooltip}><span
             class="color-swatch-inner"
             style="background-color: ${color.asString()};"
             jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
-            @click=${this.onActivate}
-            @mousedown=${this.consume}
-            @dblclick=${this.consume}></span></span>`,
-      this.shadow, {host: this});
+            @click=${this.#onActivate}
+            @mousedown=${this.#consume}
+            @dblclick=${this.#consume}></span></span>`,
+      this.#shadow, {host: this});
     // clang-format on
+    this.dispatchEvent(new ColorChangedEvent(color));
   }
 
-  private onActivate(e: KeyboardEvent|MouseEvent): void {
-    if (this.readonly) {
+  #onActivate(e: KeyboardEvent|MouseEvent): void {
+    if (this.#readonly) {
       return;
     }
 
@@ -139,29 +144,24 @@ export class ColorSwatch extends HTMLElement {
 
     if (e.shiftKey) {
       e.stopPropagation();
-      this.showFormatPicker(e);
+      this.#showFormatPicker(e);
       return;
     }
 
     this.dispatchEvent(new ClickEvent());
-    this.consume(e);
+    this.#consume(e);
   }
 
-  private consume(e: Event): void {
+  #consume(e: Event): void {
     e.stopPropagation();
   }
 
-  setColor(color: Common.Color.Color): void {
-    this.renderColor(color);
-    this.dispatchEvent(new ColorChangedEvent(color));
-  }
-
-  private showFormatPicker(e: Event): void {
-    if (!this.color) {
+  #showFormatPicker(e: Event): void {
+    if (!this.#color) {
       return;
     }
 
-    const contextMenu = new ColorPicker.FormatPickerContextMenu.FormatPickerContextMenu(this.color);
+    const contextMenu = new ColorPicker.FormatPickerContextMenu.FormatPickerContextMenu(this.#color);
     void contextMenu.show(e, color => {
       this.dispatchEvent(new ColorFormatChangedEvent(color));
     });

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

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

@@ -2,12 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../../../models/source_map_scopes/source_map_scopes.js';
 import * as Acorn from '../../../../third_party/acorn/acorn.js';
-import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
@@ -46,16 +44,13 @@ export class JavaScriptREPL {
     }
   }
 
-  static async evaluateAndBuildPreview(
-      text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
-      objectGroup?: string, awaitPromise = false, silent = false): Promise<{
-    preview: DocumentFragment,
-    result: SDK.RuntimeModel.EvaluationResult|null,
-  }> {
-    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+  static async evaluate(
+      text: string, executionContext: SDK.RuntimeModel.ExecutionContext, throwOnSideEffect: boolean, replMode: boolean,
+      timeout?: number, objectGroup?: string, awaitPromise = false,
+      silent = false): Promise<SDK.RuntimeModel.EvaluationResult|null> {
     const isTextLong = text.length > maxLengthForEvaluation;
-    if (!text || !executionContext || (throwOnSideEffect && isTextLong)) {
-      return {preview: document.createDocumentFragment(), result: null};
+    if (!text || (throwOnSideEffect && isTextLong)) {
+      return null;
     }
 
     let expression = text;
@@ -81,39 +76,29 @@ export class JavaScriptREPL {
       replMode,
       silent,
     };
-    const result = await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
-    const preview = JavaScriptREPL.buildEvaluationPreview(result, allowErrors);
-    return {preview, result};
+    return await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
   }
 
-  private static buildEvaluationPreview(result: SDK.RuntimeModel.EvaluationResult, allowErrors?: boolean):
-      DocumentFragment {
-    const fragment = document.createDocumentFragment();
-    if ('error' in result) {
-      return fragment;
+  static async evaluateAndBuildPreview(
+      text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
+      objectGroup?: string, awaitPromise = false, silent = false): Promise<{
+    preview: DocumentFragment,
+    result: SDK.RuntimeModel.EvaluationResult|null,
+  }> {
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+    if (!executionContext) {
+      return {preview: document.createDocumentFragment(), result: null};
     }
 
-    if (result.exceptionDetails?.exception?.description) {
-      const exception = result.exceptionDetails.exception.description;
-      if (exception.startsWith('TypeError: ') || allowErrors) {
-        fragment.createChild('span').textContent = result.exceptionDetails.text + ' ' + exception;
-      }
-      return fragment;
+    const result = await JavaScriptREPL.evaluate(
+        text, executionContext, throwOnSideEffect, replMode, timeout, objectGroup, awaitPromise, silent);
+    if (!result) {
+      return {preview: document.createDocumentFragment(), result: null};
     }
 
     const formatter = new RemoteObjectPreviewFormatter();
-    const {preview, type, subtype, className, description} = result.object;
-    if (preview && type === 'object' && subtype !== 'node' && subtype !== 'trustedtype') {
-      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
-      render(formatter.renderObjectPreview(preview), fragment);
-    } else {
-      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
-      render(
-          formatter.renderPropertyPreview(
-              type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400)),
-          fragment);
-    }
-    return fragment;
+    const preview = formatter.renderEvaluationResultPreviewFragment(result, allowErrors);
+    return {preview, result};
   }
 }
 

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

@@ -6,7 +6,7 @@ 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 Protocol from '../../../../generated/protocol.js';
-import {Directives, html, type LitTemplate, nothing} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 
 const {ifDefined, repeat} = Directives;
 const UIStrings = {
@@ -245,6 +245,36 @@ export class RemoteObjectPreviewFormatter {
 
     return html`<span class='object-value-${(subtype || type)}' title=${ifDefined(title)}>${preview()}</span>`;
   }
+
+  renderEvaluationResultPreview(result: SDK.RuntimeModel.EvaluationResult, allowErrors?: boolean): LitTemplate {
+    if ('error' in result) {
+      return nothing;
+    }
+
+    if (result.exceptionDetails?.exception?.description) {
+      const exception = result.exceptionDetails.exception.description;
+      if (exception.startsWith('TypeError: ') || allowErrors) {
+        return html`<span>${result.exceptionDetails.text} ${exception}</span>`;
+      }
+      return nothing;
+    }
+
+    const {preview, type, subtype, className, description} = result.object;
+    if (preview && type === 'object' && subtype !== 'node' && subtype !== 'trustedtype') {
+      return this.renderObjectPreview(preview);
+    }
+    return this.renderPropertyPreview(
+        type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400));
+  }
+
+  /** @deprecated (crbug.com/457388389) Use lit version instead */
+  renderEvaluationResultPreviewFragment(result: SDK.RuntimeModel.EvaluationResult, allowErrors?: boolean):
+      DocumentFragment {
+    const fragment = document.createDocumentFragment();
+    /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+    render(this.renderEvaluationResultPreview(result, allowErrors), fragment);
+    return fragment;
+  }
 }
 
 const enum InternalName {

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -3883,7 +3883,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
    * Update position of an Element. By default, the element is treated as a full entry and it's dimensions are set to the full entry width/length/height.
    * If isDecoration parameter is set to true, the element will be positioned on the right side of the entry and have a square shape where width == height of the entry.
    */
-  private updateElementPosition(element: Element|null, entryIndex: number, isDecoration?: boolean): void {
+  private updateElementPosition(element: HTMLElement|null, entryIndex: number, isDecoration?: boolean): void {
     if (!element) {
       return;
     }
@@ -3929,7 +3929,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const entryLevel = timelineData.entryLevels[entryIndex];
     const barY = this.levelToOffset(entryLevel) - this.chartViewport.scrollOffset();
     const barHeight = this.levelHeight(entryLevel);
-    const style = (element as HTMLElement).style;
+    const style = element.style;
 
     // TODO(paulirish): make these changes within a RenderCoordinator.write callback.
     // Currently these (plus the scrollOffset() right above) trigger layout thrashing.

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -7,7 +7,7 @@ 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 type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.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 UI from '../../legacy.js';
 
@@ -137,7 +137,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private breadcrumbButtonContainerElement: HTMLElement;
   private createBreadcrumbButton: HTMLElement;
   private curtainsRange?: HTMLElement;
-  private breadcrumbZoomIcon?: IconButton.Icon.Icon;
+  private breadcrumbZoomIcon?: Icon;
 
   private overviewWindowSelector!: WindowSelector|undefined;
   private offsetLeft!: number;
@@ -213,7 +213,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   enableCreateBreadcrumbsButton(): HTMLElement {
     this.curtainsRange = this.createBreadcrumbButton.createChild('div');
-    this.breadcrumbZoomIcon = IconButton.Icon.create('zoom-in');
+    this.breadcrumbZoomIcon = createIcon('zoom-in');
     this.createBreadcrumbButton.appendChild(this.breadcrumbZoomIcon);
     this.createBreadcrumbButton.addEventListener('click', () => {
       this.#createBreadcrumb();

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../kit/kit.js';
+import '../../../components/highlighting/highlighting.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 Diff from '../../../../third_party/diff/diff.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
+import {html, nothing, type TemplateResult} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {FilteredListWidget, Provider, registerProvider} from './FilteredListWidget.js';
@@ -340,36 +343,26 @@ export class CommandMenuProvider extends Provider {
     return score;
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const command = this.commands[itemIndex];
-
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-
-    titleElement.removeChildren();
-    const icon = IconButton.Icon.create(categoryIcons[command.category]);
-    wrapperElement.insertBefore(icon, itemElement);
-    UI.UIUtils.createTextChild(titleElement, command.title);
-    FilteredListWidget.highlightRanges(titleElement, query, true);
-
-    const subtitleElement = itemElement.createChild('div');
-    if (command.featurePromotionId) {
-      const badge = UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId);
-      if (badge) {
-        itemElement.insertBefore(badge, subtitleElement);
-      }
-    }
-
-    subtitleElement.textContent = command.shortcut;
-
+    const badge = command.featurePromotionId ? UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId) : undefined;
     const deprecationWarning = command.deprecationWarning;
-    if (deprecationWarning) {
-      const deprecatedTagElement = itemElement.createChild('span', 'deprecated-tag');
-      deprecatedTagElement.textContent = i18nString(UIStrings.deprecated);
-      deprecatedTagElement.title = deprecationWarning;
-    }
-    const tagElement = wrapperElement.createChild('span', 'tag');
-    tagElement.textContent = command.category;
+    // clang-format off
+    return html`
+      <devtools-icon name=${categoryIcons[command.category]}></devtools-icon>
+      <div>
+        <devtools-highlight type="markup" ranges=${FilteredListWidget.getHighlightRanges(command.title, query, true)}>
+          ${command.title}
+        </devtools-highlight>
+        ${badge ?? nothing}
+        <div>${command.shortcut}</div>
+        ${deprecationWarning ? html`
+          <span class="deprecated-tag" title=${deprecationWarning}>
+            ${i18nString(UIStrings.deprecated)}
+          </span>` : nothing}
+      </div>
+      <span class="tag">${command.category}</span>`;
+    // clang-format on
   }
 
   override jslogContextAt(itemIndex: number): string {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -1,7 +1,7 @@
 // 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 */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -9,8 +9,8 @@ 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 Diff from '../../../../third_party/diff/diff.js';
-import * as Highlighting from '../../../../ui/components/highlighting/highlighting.js';
 import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
+import {type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -118,9 +118,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.queryChangedCallback = queryChangedCallback;
   }
 
-  static highlightRanges(element: Element, query: string, caseInsensitive?: boolean): boolean {
+  static getHighlightRanges(text: string, query: string, caseInsensitive?: boolean): string {
     if (!query) {
-      return false;
+      return '';
     }
 
     function rangesForMatch(text: string, query: string): TextUtils.TextRange.SourceRange[]|null {
@@ -139,19 +139,11 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
       return ranges;
     }
 
-    if (element.textContent === null) {
-      return false;
-    }
-    const text = element.textContent;
     let ranges = rangesForMatch(text, query);
     if (!ranges || caseInsensitive) {
       ranges = rangesForMatch(text.toUpperCase(), query.toUpperCase());
     }
-    if (ranges) {
-      Highlighting.highlightRangesWithStyleClass(element, ranges, 'highlight');
-      return true;
-    }
-    return false;
+    return ranges?.map(range => `${range.offset},${range.length}`).join(' ') || '';
   }
 
   setCommandPrefix(commandPrefix: string): void {
@@ -286,7 +278,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     wrapperElement.className = 'filtered-list-widget-item';
 
     if (this.provider) {
-      this.provider.renderItem(item, this.cleanValue(), wrapperElement);
+      render(this.provider.renderItem(item, this.cleanValue()), wrapperElement);
       wrapperElement.setAttribute(
           'jslog', `${VisualLogging.item(this.provider.jslogContextAt(item)).track({click: true})}`);
     }
@@ -622,7 +614,8 @@ export class Provider {
     return 1;
   }
 
-  renderItem(_itemIndex: number, _query: string, _wrapperElement: Element): void {
+  renderItem(_itemIndex: number, _query: string): LitTemplate {
+    return nothing;
   }
 
   jslogContextAt(_itemIndex: number): string {