chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

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

@@ -37,6 +37,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
+import * as Highlighting from '../../../components/highlighting/highlighting.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -992,7 +993,7 @@ export const TREE_ELEMENT_DEFAULT_VIEW: TreeElementView = (input, output, target
 export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   property: ObjectTreeNode;
   override toggleOnClick: boolean;
-  private highlightChanges: UI.UIUtils.HighlightChange[];
+  private highlightChanges: Highlighting.HighlightChange[];
   private linkifier: Components.Linkifier.Linkifier|undefined;
   private readonly maxNumPropertiesToShow: number;
   readOnly!: boolean;
@@ -1115,7 +1116,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   setSearchRegex(regex: RegExp, additionalCssClassName?: string): boolean {
-    let cssClasses = UI.UIUtils.highlightedSearchResultClassName;
+    let cssClasses = Highlighting.highlightedSearchResultClassName;
     if (additionalCssClassName) {
       cssClasses += ' ' + additionalCssClassName;
     }
@@ -1144,7 +1145,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       match = regex.exec(content);
     }
     if (ranges.length) {
-      UI.UIUtils.highlightRangesWithStyleClass(element, ranges, cssClassName, this.highlightChanges);
+      Highlighting.highlightRangesWithStyleClass(element, ranges, cssClassName, this.highlightChanges);
     }
   }
 
@@ -1171,7 +1172,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   revertHighlightChanges(): void {
-    UI.UIUtils.revertDomChanges(this.highlightChanges);
+    Highlighting.revertDomChanges(this.highlightChanges);
     this.highlightChanges = [];
   }
 

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

@@ -2,6 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// This file supports the gutter decorations visible in the Sources panel when a
+// performance trace is active, showing either the runtime sample measures or the
+// memory sampling (memory is behind the LiveHeapProfile experiment).
+//
+// When profiles are added, the associated UISourceCodes are given the profile data
+// as decorations. The raw profile locations are mapped to original source files in
+// this way.
+//
+// Note, while this is called "LineLevel", it's the profile data is actually granular
+// to the column.
+
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -29,8 +40,12 @@ export class Performance {
     return performanceInstance;
   }
 
-  reset(): void {
+  initialize(profiles: CPUProfile.CPUProfileDataModel.CPUProfileDataModel[], target: SDK.Target.Target|null): void {
     this.helper.reset();
+    for (const profile of profiles) {
+      this.appendCPUProfile(profile, target);
+    }
+    void this.helper.update();
   }
 
   private appendLegacyCPUProfile(
@@ -56,12 +71,13 @@ export class Performance {
     }
   }
 
-  appendCPUProfile(profile: CPUProfile.CPUProfileDataModel.CPUProfileDataModel, target: SDK.Target.Target|null): void {
+  private appendCPUProfile(profile: CPUProfile.CPUProfileDataModel.CPUProfileDataModel, target: SDK.Target.Target|null):
+      void {
     if (!profile.lines) {
       this.appendLegacyCPUProfile(profile, target);
-      this.helper.scheduleUpdate();
       return;
     }
+
     if (!profile.samples || !profile.columns) {
       return;
     }
@@ -83,12 +99,12 @@ export class Performance {
       const time = profile.timestamps[i] - profile.timestamps[i - 1];
       this.helper.addLocationData(target, scriptIdOrUrl, {line, column}, time);
     }
-    this.helper.scheduleUpdate();
   }
 }
 
 let memoryInstance: Memory;
 
+// Note: this is used only by LiveHeapProfile (a drawer panel) if the experiment is enabled.
 export class Memory {
   private readonly helper: Helper;
   private constructor() {
@@ -108,12 +124,23 @@ export class Memory {
 
   reset(): void {
     this.helper.reset();
+    void this.helper.update();
+  }
+
+  initialize(profilesAndTargets: Array<{
+    profile: Protocol.HeapProfiler.SamplingHeapProfile,
+    target: SDK.Target.Target,
+  }>): void {
+    this.helper.reset();
+    for (const {profile, target} of profilesAndTargets) {
+      this.appendHeapProfile(profile, target);
+    }
+    void this.helper.update();
   }
 
-  appendHeapProfile(profile: Protocol.HeapProfiler.SamplingHeapProfile, target: SDK.Target.Target|null): void {
+  private appendHeapProfile(profile: Protocol.HeapProfiler.SamplingHeapProfile, target: SDK.Target.Target|null): void {
     const helper = this.helper;
     processNode(profile.head);
-    helper.scheduleUpdate();
 
     function processNode(node: Protocol.HeapProfiler.SamplingHeapProfileNode): void {
       node.children.forEach(processNode);
@@ -125,8 +152,8 @@ export class Memory {
         return;
       }
       const line = node.callFrame.lineNumber + 1;
-      // Since no column number is provided by the heap profile, default to 1 (beginning of line).
-      helper.addLocationData(target, script, {line, column: 1}, node.selfSize);
+      const column = node.callFrame.columnNumber + 1;
+      helper.addLocationData(target, script, {line, column}, node.selfSize);
     }
   }
 }
@@ -134,13 +161,14 @@ export class Memory {
 export class Helper {
   private readonly type: Workspace.UISourceCode.DecoratorType;
   private readonly locationPool = new Bindings.LiveLocation.LiveLocationPool();
-  private updateTimer: number|null = null;
+
   /**
    * Given a location in a script (with line and column numbers being 1-based) stores
    * the time spent at that location in a performance profile.
    */
-  private locationData =
-      new Map<SDK.Target.Target|null, Map<Platform.DevToolsPath.UrlString|number, Map<number, Map<number, number>>>>();
+  private locationData = new Map<
+      SDK.Target.Target|null,
+      Map<Platform.DevToolsPath.UrlString|number, Workspace.UISourceCode.LineColumnProfileMap>>();
   constructor(type: Workspace.UISourceCode.DecoratorType) {
     this.type = type;
     this.reset();
@@ -149,7 +177,6 @@ export class Helper {
   reset(): void {
     // The second map uses string keys for script URLs and numbers for scriptId.
     this.locationData = new Map();
-    this.scheduleUpdate();
   }
 
   /**
@@ -176,20 +203,10 @@ export class Helper {
     lineData.set(column, (lineData.get(column) || 0) + data);
   }
 
-  scheduleUpdate(): void {
-    if (this.updateTimer) {
-      return;
-    }
-    this.updateTimer = window.setTimeout(() => {
-      this.updateTimer = null;
-      void this.doUpdate();
-    }, 0);
-  }
-
-  private async doUpdate(): Promise<void> {
+  async update(): Promise<void> {
     this.locationPool.disposeAll();
     // Map from sources to line->value profile maps.
-    const decorationsBySource = new Map<Workspace.UISourceCode.UISourceCode, Map<number, Map<number, number>>>();
+    const decorationsBySource: Workspace.UISourceCode.ProfileDataMap = new Map();
     const pending: Array<Promise<void>> = [];
     for (const [target, scriptToLineMap] of this.locationData) {
       const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
@@ -211,18 +228,21 @@ export class Helper {
                         String(scriptIdOrUrl) as Protocol.Runtime.ScriptId, zeroBasedLine, zeroBasedColumn || 0);
                 if (rawLocation) {
                   pending.push(workspaceBinding.rawLocationToUILocation(rawLocation).then(uiLocation => {
-                    if (uiLocation) {
-                      let lineMap = decorationsBySource.get(uiLocation.uiSourceCode);
-                      if (!lineMap) {
-                        lineMap = new Map<number, Map<number, number>>();
-                        decorationsBySource.set(uiLocation.uiSourceCode, lineMap);
-                      }
-                      let columnMap = lineMap.get(lineNumber);
-                      if (!columnMap) {
-                        columnMap = new Map<number, number>();
-                        lineMap.set(lineNumber, columnMap);
+                    if (!uiLocation) {
+                      return;
+                    }
+
+                    this.addLineColumnData(
+                        decorationsBySource, uiLocation.uiSourceCode, uiLocation.lineNumber + 1,
+                        (uiLocation.columnNumber ?? 0) + 1, data);
+
+                    // If the above was a source mapped UILocation, then we also need to add it to the generated UILocation.
+                    if (uiLocation.uiSourceCode.contentType().isFromSourceMap()) {
+                      const script = rawLocation.script();
+                      const uiSourceCode = script ? workspaceBinding.uiSourceCodeForScript(script) : null;
+                      if (uiSourceCode) {
+                        this.addLineColumnData(decorationsBySource, uiSourceCode, lineNumber, columnNumber, data);
                       }
-                      columnMap.set((zeroBasedColumn || 0) + 1, data);
                     }
                   }));
                 }
@@ -247,4 +267,22 @@ export class Helper {
       }
     }
   }
+
+  private addLineColumnData(
+      decorationsBySource: Workspace.UISourceCode.ProfileDataMap, uiSourceCode: Workspace.UISourceCode.UISourceCode,
+      lineOneIndexed: number, columnOneIndexed: number, data: number): void {
+    let lineMap = decorationsBySource.get(uiSourceCode);
+    if (!lineMap) {
+      lineMap = new Map();
+      decorationsBySource.set(uiSourceCode, lineMap);
+    }
+
+    let columnMap = lineMap.get(lineOneIndexed);
+    if (!columnMap) {
+      columnMap = new Map();
+      lineMap.set(lineOneIndexed, columnMap);
+    }
+
+    columnMap.set(columnOneIndexed, (columnMap.get(columnOneIndexed) ?? 0) + data);
+  }
 }

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

@@ -5,6 +5,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../../generated/protocol.js';
 
 import {Memory} from './LineLevelProfile.js';
 
@@ -64,15 +65,23 @@ export class LiveHeapProfile implements Common.Runnable.Runnable,
       if (sessionId !== this.sessionId) {
         break;
       }
-      Memory.instance().reset();
+
+      const profilesAndTargets: Array<{
+        profile: Protocol.HeapProfiler.SamplingHeapProfile,
+        target: SDK.Target.Target,
+      }> = [];
       for (let i = 0; i < profiles.length; ++i) {
         const profile = profiles[i];
         if (!profile) {
           continue;
         }
 
-        Memory.instance().appendHeapProfile(profile, models[i].target());
+        const target = models[i].target();
+        profilesAndTargets.push({profile, target});
       }
+
+      Memory.instance().initialize(profilesAndTargets);
+
       await Promise.race([
         new Promise(r => window.setTimeout(r, Host.InspectorFrontendHost.isUnderTest() ? 10 : 5000)),
         new Promise(r => {

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';
@@ -201,7 +204,7 @@ export class CommandMenu {
         locations.set(name, category);
       }
     }
-    const views = UI.ViewManager.getRegisteredViewExtensions();
+    const views = UI.ViewManager.ViewManager.instance().getRegisteredViewExtensions();
     for (const view of views) {
       const viewLocation = view.location();
       const category = viewLocation && locations.get(viewLocation);
@@ -340,37 +343,26 @@ export class CommandMenuProvider extends Provider {
     return score;
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const command = this.commands[itemIndex];
-
-    titleElement.removeChildren();
-    const icon = IconButton.Icon.create(categoryIcons[command.category]);
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
-    UI.UIUtils.createTextChild(titleElement, command.title);
-    FilteredListWidget.highlightRanges(titleElement, query, true);
-
-    if (command.featurePromotionId) {
-      const badge = UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId);
-      if (badge) {
-        titleElement.parentElement?.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 = titleElement.parentElement?.createChild('span', 'deprecated-tag');
-      if (deprecatedTagElement) {
-        deprecatedTagElement.textContent = i18nString(UIStrings.deprecated);
-        deprecatedTagElement.title = deprecationWarning;
-      }
-    }
-    const tagElement = titleElement.parentElement?.parentElement?.createChild('span', 'tag');
-    if (!tagElement) {
-      return;
-    }
-    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';
@@ -10,6 +10,7 @@ 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 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';
 
@@ -117,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 {
@@ -138,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) {
-      UI.UIUtils.highlightRangesWithStyleClass(element, ranges, 'highlight');
-      return true;
-    }
-    return false;
+    return ranges?.map(range => `${range.offset},${range.length}`).join(' ') || '';
   }
 
   setCommandPrefix(commandPrefix: string): void {
@@ -282,20 +275,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
 
   createElementForItem(item: number): Element {
     const wrapperElement = document.createElement('div');
-    wrapperElement.className = 'filtered-list-widget-item-wrapper';
-
-    const itemElement = wrapperElement.createChild('div');
-    const renderAsTwoRows = this.provider?.renderAsTwoRows();
-    itemElement.className = 'filtered-list-widget-item ' + (renderAsTwoRows ? 'two-rows' : 'one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
-    const subtitleElement = itemElement.createChild('div', 'filtered-list-widget-subtitle');
-    subtitleElement.textContent = '\u200B';
+    wrapperElement.className = 'filtered-list-widget-item';
+
     if (this.provider) {
-      this.provider.renderItem(item, this.cleanValue(), titleElement, subtitleElement);
+      render(this.provider.renderItem(item, this.cleanValue()), wrapperElement);
       wrapperElement.setAttribute(
           'jslog', `${VisualLogging.item(this.provider.jslogContextAt(item)).track({click: true})}`);
     }
-    UI.ARIAUtils.markAsOption(itemElement);
+    UI.ARIAUtils.markAsOption(wrapperElement);
     return wrapperElement;
   }
 
@@ -627,17 +614,14 @@ export class Provider {
     return 1;
   }
 
-  renderItem(_itemIndex: number, _query: string, _titleElement: Element, _subtitleElement: Element): void {
+  renderItem(_itemIndex: number, _query: string): LitTemplate {
+    return nothing;
   }
 
   jslogContextAt(_itemIndex: number): string {
     return this.jslogContext;
   }
 
-  renderAsTwoRows(): boolean {
-    return false;
-  }
-
   selectItem(_itemIndex: number|null, _promptValue: string): void {
   }
 

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

@@ -1,10 +1,10 @@
 // Copyright 2017 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 * as IconButton from '../../../components/icon_button/icon_button.js';
-import * as UI from '../../legacy.js';
+import '../../../kit/kit.js';
+
+import {html, type TemplateResult} from '../../../lit/lit.js';
 
 import {getRegisteredProviders, Provider, type ProviderRegistration, registerProvider} from './FilteredListWidget.js';
 import {QuickOpenImpl} from './QuickOpen.js';
@@ -44,15 +44,15 @@ export class HelpQuickOpen extends Provider {
     return -this.providers[itemIndex].prefix.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
+  override renderItem(itemIndex: number, _query: string): TemplateResult {
     const provider = this.providers[itemIndex];
-
-    const iconElement = new IconButton.Icon.Icon();
-    iconElement.name = provider.iconName;
-    iconElement.classList.add('large');
-    titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
-
-    UI.UIUtils.createTextChild(titleElement, provider.title);
+    // clang-format off
+    return html`
+      <devtools-icon class="large" name=${provider.iconName}></devtools-icon>
+      <div>
+        <div>${provider.title}</div>
+      </div>`;
+    // clang-format on
   }
 
   override jslogContextAt(itemIndex: number): string {
@@ -64,10 +64,6 @@ export class HelpQuickOpen extends Provider {
       QuickOpenImpl.show(this.providers[itemIndex].prefix);
     }
   }
-
-  override renderAsTwoRows(): boolean {
-    return false;
-  }
 }
 
 registerProvider({

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -58,16 +58,20 @@ devtools-text-prompt {
   overflow: hidden auto;
 }
 
-.filtered-list-widget-item-wrapper {
+.filtered-list-widget-item {
   color: var(--sys-color-on-surface);
   display: flex;
   font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
   padding: 0 var(--sys-size-7);
   gap: var(--sys-size-7);
   height: var(--sys-size-14);
+  white-space: break-spaces;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--sys-typescale-body4-size);
 }
 
-.filtered-list-widget-item-wrapper devtools-icon {
+.filtered-list-widget-item devtools-icon {
   align-self: center;
   flex: none;
   width: 18px;
@@ -78,84 +82,38 @@ devtools-text-prompt {
   }
 }
 
-.filtered-list-widget-item-wrapper.selected {
+.filtered-list-widget-item.selected {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
 
-.filtered-list-widget-item {
-  white-space: break-spaces;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  align-self: center;
-  font-size: var(--sys-typescale-body4-size);
+.filtered-list-widget-item > div {
   flex: auto;
-}
-
-.filtered-list-widget-item.is-ignore-listed * {
-  color: var(--sys-color-state-disabled);
-}
-
-.filtered-list-widget-item span.highlight {
-  font-weight: var(--ref-typeface-weight-bold);
-}
-
-.filtered-list-widget-item .filtered-list-widget-title {
   white-space: nowrap;
-  flex: initial;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-.filtered-list-widget-item .filtered-list-widget-subtitle {
-  flex: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--sys-color-on-surface-subtle);
-  padding-left: var(--sys-size-3);
+  line-height: var(--sys-typescale-body3-line-height);
+  align-items: center;
+  align-content: center;
   display: flex;
-  white-space: pre;
+  gap: var(--sys-size-4);
 }
 
-.filtered-list-widget-item .filtered-list-widget-subtitle .first-part {
-  flex-shrink: 1000;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.filtered-list-widget-item span.highlight {
+  font-weight: var(--ref-typeface-weight-bold);
 }
 
-.filtered-list-widget-item-wrapper .tag {
+.filtered-list-widget-item .tag {
   font-size: var(--sys-typescale-body5-size);
   line-height: var(--sys-typescale-headline5-line-height);
   align-self: center;
   flex-shrink: 0;
 }
 
-.filtered-list-widget-item-wrapper .deprecated-tag {
+.filtered-list-widget-item .deprecated-tag {
   font-size: 11px;
   color: var(--sys-color-token-subtle);
 }
 
-.filtered-list-widget-item.one-row {
-  line-height: var(--sys-typescale-body3-line-height);
-  align-items: center;
-  align-content: center;
-  display: flex;
-  gap: var(--sys-size-4);
-}
-
-.filtered-list-widget-item.one-row .filtered-list-widget-title {
-  display: inline;
-}
-
-.filtered-list-widget-item.two-rows {
-  display: grid;
-  align-content: center;
-  gap: var(--sys-size-2);
-}
-
-.filtered-list-widget-item-wrapper:not(.search-mode) .filtered-list-widget-item.two-rows .filtered-list-widget-title {
-  font-weight: var(--ref-typeface-weight-bold);
-}
-
 .not-found-text {
   height: 34px;
   line-height: 34px;
@@ -179,18 +137,13 @@ devtools-text-prompt {
     border-color: ButtonText;
   }
 
-  .filtered-list-widget-item-wrapper .filtered-list-widget-title,
-  .filtered-list-widget-item-wrapper .filtered-list-widget-subtitle,
+  .filtered-list-widget-item,
   .quickpick-description {
     color: ButtonText;
   }
 
-  .filtered-list-widget-item-wrapper.selected {
+  .filtered-list-widget-item.selected {
     background-color: Highlight;
-  }
-
-  .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item .filtered-list-widget-title,
-  .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item .filtered-list-widget-subtitle {
     color: HighlightText;
   }