chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
@@ -38,8 +39,9 @@ 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 {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import callStackSidebarPaneStyles from './callStackSidebarPane.css.js';
@@ -88,6 +90,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CallStackSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const {createRef, ref} = Directives;
+
 let callstackSidebarPaneInstance: CallStackSidebarPane;
 
 export class CallStackSidebarPane extends UI.View.SimpleView implements UI.ContextFlavorListener.ContextFlavorListener,
@@ -99,12 +103,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private readonly items: UI.ListModel.ListModel<Item>;
   private list: UI.ListControl.ListControl<Item>;
   private readonly showMoreMessageElement: Element;
-  private showIgnoreListed: boolean;
-  private readonly locationPool: Bindings.LiveLocation.LiveLocationPool;
-  private readonly updateThrottler: Common.Throttler.Throttler;
-  private maxAsyncStackChainDepth: number;
-  private readonly updateItemThrottler: Common.Throttler.Throttler;
-  private readonly scheduledForUpdateItems: Set<Item>;
+  private showIgnoreListed = false;
+  private readonly locationPool = new Bindings.LiveLocation.LiveLocationPool();
+  private maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
+  private readonly updateItemThrottler = new Common.Throttler.Throttler(100);
+  private readonly scheduledForUpdateItems = new Set<Item>();
   private muteActivateItem?: boolean;
   private lastDebuggerModel: SDK.DebuggerModel.DebuggerModel|null = null;
 
@@ -115,27 +118,23 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       viewId: 'sources.callstack',
       useShadowDom: true,
     });
-    this.registerRequiredCSS(callStackSidebarPaneStyles);
-
-    ({element: this.ignoreListMessageElement, checkbox: this.ignoreListCheckboxElement} =
-         this.createIgnoreListMessageElementAndCheckbox());
-    this.contentElement.appendChild(this.ignoreListMessageElement);
 
-    this.notPausedMessageElement = this.contentElement.createChild('div', 'gray-info-message');
-    this.notPausedMessageElement.textContent = i18nString(UIStrings.notPaused);
-    this.notPausedMessageElement.tabIndex = -1;
-
-    this.callFrameWarningsElement = this.contentElement.createChild('div', 'call-frame-warnings-message');
-    const icon = new IconButton.Icon.Icon();
-    icon.name = 'warning-filled';
-    icon.classList.add('call-frame-warning-icon', 'small');
-    this.callFrameWarningsElement.appendChild(icon);
-    this.callFrameWarningsElement.appendChild(document.createTextNode(i18nString(UIStrings.callFrameWarnings)));
-    this.callFrameWarningsElement.tabIndex = -1;
+    const [ignoreListMessageRef, ignoreListCheckboxRef, notPausedRef, warningRef, showMoreRef] = [
+      createRef<HTMLElement>(),
+      createRef<HTMLInputElement>(),
+      createRef<HTMLElement>(),
+      createRef<HTMLElement>(),
+      createRef<HTMLElement>(),
+    ];
+    const ignoreListCheckboxChanged = (): void => {
+      this.showIgnoreListed = Boolean(ignoreListCheckboxRef.value?.checked);
+      for (const item of this.items) {
+        this.refreshItem(item);
+      }
+    };
 
     this.items = new UI.ListModel.ListModel();
     this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);
-    this.contentElement.appendChild(this.list.element);
     this.list.element.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
     self.onInvokeElement(this.list.element, event => {
       const item = this.list.itemForNode((event.target as Node | null));
@@ -145,19 +144,42 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       }
     });
 
-    this.showMoreMessageElement = this.createShowMoreMessageElement();
-    this.showMoreMessageElement.classList.add('hidden');
-    this.contentElement.appendChild(this.showMoreMessageElement);
-
-    this.showIgnoreListed = false;
-    this.locationPool = new Bindings.LiveLocation.LiveLocationPool();
-
-    this.updateThrottler = new Common.Throttler.Throttler(100);
-    this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
-    this.update();
+    const onShowMoreClicked = (): void => {
+      this.maxAsyncStackChainDepth += defaultMaxAsyncStackChainDepth;
+      this.requestUpdate();
+    };
 
-    this.updateItemThrottler = new Common.Throttler.Throttler(100);
-    this.scheduledForUpdateItems = new Set();
+    // clang-format off
+    render(html`
+      <style>${callStackSidebarPaneStyles}</style>
+      <div class='ignore-listed-message' ${ref(ignoreListMessageRef)}>
+        <label class='ignore-listed-message-label'>
+          <input type='checkbox' tabindex=0 class='ignore-listed-checkbox'
+              @change=${ignoreListCheckboxChanged} ${ref(ignoreListCheckboxRef)}></input>
+          ${i18nString(UIStrings.showIgnorelistedFrames)}
+        </label>
+      </div>
+      <div class='gray-info-message' tabindex=-1 ${ref(notPausedRef)}>
+        ${i18nString(UIStrings.notPaused)}
+      </div>
+      <div class='call-frame-warnings-message' tabindex=-1 ${ref(warningRef)}>
+        <devtools-icon .name=${'warning-filled'} class='call-frame-warning-icon small'></devtools-icon>
+        ${i18nString(UIStrings.callFrameWarnings)}
+      </div>
+      ${this.list.element}
+      <div class='show-more-message hidden' ${ref(showMoreRef)}>
+        <span class='link' @click=${onShowMoreClicked}>${i18nString(UIStrings.showMore)}</span>
+      </div>
+    `, this.contentElement);
+    // clang-format on
+
+    this.ignoreListMessageElement = ignoreListMessageRef.value as HTMLElement;
+    this.ignoreListCheckboxElement = ignoreListCheckboxRef.value as HTMLInputElement;
+    this.notPausedMessageElement = notPausedRef.value as HTMLElement;
+    this.callFrameWarningsElement = warningRef.value as HTMLElement;
+    this.showMoreMessageElement = showMoreRef.value as HTMLElement;
+
+    this.requestUpdate();
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebugInfoAttached, this.debugInfoAttached, this);
@@ -178,11 +200,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.showIgnoreListed = false;
     this.ignoreListCheckboxElement.checked = false;
     this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
-    this.update();
+    this.requestUpdate();
   }
 
   private debugInfoAttached(): void {
-    this.update();
+    this.requestUpdate();
   }
 
   private setSourceMapSubscription(debuggerModel: SDK.DebuggerModel.DebuggerModel|null): void {
@@ -203,11 +225,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     }
   }
 
-  update(): void {
-    void this.updateThrottler.schedule(() => this.doUpdate());
-  }
-
-  async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.locationPool.disposeAll();
 
     this.callFrameWarningsElement.classList.add('hidden');
@@ -330,14 +348,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(
@@ -375,39 +393,6 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     return true;
   }
 
-  private createIgnoreListMessageElementAndCheckbox(): {element: Element, checkbox: HTMLInputElement} {
-    const element = document.createElement('div');
-    element.classList.add('ignore-listed-message');
-    const label = element.createChild('label');
-    label.classList.add('ignore-listed-message-label');
-    const checkbox = label.createChild('input');
-    checkbox.tabIndex = 0;
-    checkbox.type = 'checkbox';
-    checkbox.classList.add('ignore-listed-checkbox');
-    label.append(i18nString(UIStrings.showIgnorelistedFrames));
-    const showAll = (): void => {
-      this.showIgnoreListed = checkbox.checked;
-      for (const item of this.items) {
-        this.refreshItem(item);
-      }
-    };
-    checkbox.addEventListener('click', showAll);
-    return {element, checkbox};
-  }
-
-  private createShowMoreMessageElement(): Element {
-    const element = document.createElement('div');
-    element.classList.add('show-more-message');
-    element.createChild('span');
-    const showAllLink = element.createChild('span', 'link');
-    showAllLink.textContent = i18nString(UIStrings.showMore);
-    showAllLink.addEventListener('click', () => {
-      this.maxAsyncStackChainDepth += defaultMaxAsyncStackChainDepth;
-      this.update();
-    }, false);
-    return element;
-  }
-
   private onContextMenu(event: Event): void {
     const item = this.list.itemForNode((event.target as Node | null));
     if (!item) {

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

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -2,11 +2,14 @@
 // 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 * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.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, nothing, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {SourcesView} from './SourcesView.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -317,34 +320,28 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return -item.lineNumber - 1;
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const item = this.items[itemIndex];
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-
-    const icon = IconButton.Icon.create('deployed');
-    wrapperElement.insertBefore(icon, itemElement);
-    titleElement.textContent = item.title + (item.subtitle ? item.subtitle : '');
-    QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query);
-
+    let location: string|undefined;
     const sourceFrame = this.currentSourceFrame();
-    if (!sourceFrame) {
-      return;
-    }
-
-    const tagElement = wrapperElement.createChild('span', 'tag');
-    if (!tagElement) {
-      return;
-    }
-
-    const disassembly = sourceFrame.wasmDisassembly;
-    if (disassembly) {
-      const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
-      const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
-      tagElement.textContent = `:0x${item.columnNumber.toString(16).padStart(bytecodeOffsetDigits, '0')}`;
-    } else {
-      tagElement.textContent = `:${item.lineNumber + 1}`;
+    if (sourceFrame) {
+      const disassembly = sourceFrame.wasmDisassembly;
+      if (disassembly) {
+        const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
+        const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
+        location = `:0x${item.columnNumber.toString(16).padStart(bytecodeOffsetDigits, '0')}`;
+      } else {
+        location = `:${item.lineNumber + 1}`;
+      }
     }
+    const title = item.title + (item.subtitle ? item.subtitle : '');
+    const highlightRanges = QuickOpen.FilteredListWidget.FilteredListWidget.getHighlightRanges(title, query, true);
+    // clang-format off
+    return html`
+      <devtools-icon name="deployed"></devtools-icon>
+      <div><devtools-highlight type="markup" ranges=${highlightRanges}>${title}</devtools-highlight></div>
+      ${location ? html`<span class="tag">${location}</span>` : nothing}`;
+    // clang-format on
   }
 
   override selectItem(itemIndex: number|null, _promptValue: string): void {

package/front_end/panels/sources/SourcesPanel.ts

@@ -977,11 +977,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
       const editorElement = this.element.querySelector('devtools-text-editor');
       if (!eventTarget.isSelfOrDescendant(editorElement) && uiSourceCode.contentType().isTextType()) {
         UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
-        if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-          const submenu = contextMenu.footerSection().appendSubMenuItem(
-              action.title(), false, openAiAssistanceId,
-              Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.featureName);
+          const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
           submenu.defaultSection().appendAction('drjones.sources-panel-context', i18nString(UIStrings.startAChat));
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.assessPerformance), 'Is this script optimized for performance?',
@@ -992,13 +989,6 @@ export class SourcesPanel extends UI.Panel.Panel implements
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.explainInputHandling), 'Does the script handle user input safely',
               openAiAssistanceId + '.input');
-        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
-          contextMenu.footerSection().appendAction(
-              openAiAssistanceId, undefined, false, undefined,
-              Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.featureName);
-        } else {
-          contextMenu.footerSection().appendAction(openAiAssistanceId);
-        }
       }
     }
 

package/front_end/panels/sources/SourcesView.ts

@@ -13,7 +13,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -149,7 +149,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const workspaceElement = placeholder.createChild('div', 'tabbed-pane-placeholder-row');
     workspaceElement.classList.add('workspace');
 
-    const icon = IconButton.Icon.create('sync', 'sync-icon');
+    const icon = createIcon('sync', 'sync-icon');
     workspaceElement.createChild('span', 'icon-container').appendChild(icon);
     const text = workspaceElement.createChild('span');
     text.textContent = UIStrings.workspaceDropInAFolderToSyncSources;