Simplify FilteredListWidget CSS

Bug: 414792736
Change-Id: I6522ab09e67cfc8952c54fb11e0b1f03f614d2f3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7201027
Reviewed-by: Simon Zünd <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: danilsomsikov

config/gni/devtools_grd_files.gni

@@ -1933,6 +1933,7 @@ grd_files_unbundled_sources = [
   "front_end/panels/sources/components/HeadersView.js",
   "front_end/panels/sources/debuggerPausedMessage.css.js",
   "front_end/panels/sources/dialog.css.js",
+  "front_end/panels/sources/filteredUISourceCodeListProvider.css.js",
   "front_end/panels/sources/navigatorTree.css.js",
   "front_end/panels/sources/navigatorView.css.js",
   "front_end/panels/sources/scopeChainSidebarPane.css.js",

front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -82,8 +82,8 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
   }
 
   override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
-    const itemElement = wrapperElement.createChild('div', 'filtered-list-widget-item one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
+    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();

front_end/panels/sources/BUILD.gn

@@ -15,6 +15,7 @@ generate_css("css_files") {
     "callStackSidebarPane.css",
     "debuggerPausedMessage.css",
     "dialog.css",
+    "filteredUISourceCodeListProvider.css",
     "navigatorTree.css",
     "navigatorView.css",
     "scopeChainSidebarPane.css",

front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -11,6 +11,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {FilePathScoreFunction} from './FilePathScoreFunction.js';
+import filteredUISourceCodeListProviderStyles from './filteredUISourceCodeListProvider.css.js';
 
 const UIStrings = {
   /**
@@ -144,11 +145,12 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
   }
 
   override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
-    const itemElement = wrapperElement.createChild('div', 'filtered-list-widget-item two-rows');
+    wrapperElement.createChild('style').textContent = filteredUISourceCodeListProviderStyles;
+    const itemElement = wrapperElement.createChild('div', 'filtered-ui-source-code-list-item');
 
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
+    const titleElement = itemElement.createChild('div', 'filtered-ui-source-code-title');
 
-    wrapperElement.classList.toggle('search-mode', Boolean(query));
+    titleElement.classList.toggle('search-mode', Boolean(query));
     query = this.rewriteQuery(query);
     const uiSourceCode = this.uiSourceCodes[itemIndex];
     const fullDisplayName = uiSourceCode.fullDisplayName();
@@ -166,7 +168,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     }
 
     titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
-    const subtitleElement = itemElement.createChild('div', 'filtered-list-widget-subtitle');
+    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);
 

front_end/panels/sources/GoToLineQuickOpen.ts

@@ -78,8 +78,8 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
   }
 
   override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
-    const itemElement = wrapperElement.createChild('div', 'filtered-list-widget-item one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
+    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]);

front_end/panels/sources/OutlineQuickOpen.ts

@@ -319,8 +319,8 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
 
   override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
     const item = this.items[itemIndex];
-    const itemElement = wrapperElement.createChild('div', 'filtered-list-widget-item one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
 
     const icon = IconButton.Icon.create('deployed');
     wrapperElement.insertBefore(icon, itemElement);

front_end/panels/sources/filteredUISourceCodeListProvider.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.filtered-list-widget-item > .filtered-ui-source-code-list-item {
+  align-content: center;
+  display: grid;
+  gap: var(--sys-size-2);
+  line-height: initial;
+}
+
+.filtered-ui-source-code-list-item.is-ignore-listed * {
+  color: var(--sys-color-state-disabled);
+}
+
+.filtered-ui-source-code-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filtered-ui-source-code-title:not(.search-mode) {
+  font-weight: var(--ref-typeface-weight-bold);
+}
+
+.filtered-ui-source-code-subtitle {
+  flex: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sys-color-on-surface-subtle);
+  padding-left: var(--sys-size-3);
+  display: flex;
+  white-space: pre;
+}
+
+.filtered-ui-source-code-subtitle .first-part {
+  flex-shrink: 1000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -343,16 +343,16 @@ export class CommandMenuProvider extends Provider {
   override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
     const command = this.commands[itemIndex];
 
-    const itemElement = wrapperElement.createChild('div', 'filtered-list-widget-item one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
+    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', 'filtered-list-widget-subtitle');
+    const subtitleElement = itemElement.createChild('div');
     if (command.featurePromotionId) {
       const badge = UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId);
       if (badge) {

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

@@ -282,7 +282,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
 
   createElementForItem(item: number): Element {
     const wrapperElement = document.createElement('div');
-    wrapperElement.className = 'filtered-list-widget-item-wrapper';
+    wrapperElement.className = 'filtered-list-widget-item';
 
     if (this.provider) {
       this.provider.renderItem(item, this.cleanValue(), wrapperElement);

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

@@ -47,8 +47,8 @@ export class HelpQuickOpen extends Provider {
   override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
     const provider = this.providers[itemIndex];
 
-    const itemElement = wrapperElement.createChild('div', 'filtered-list-widget-item one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
 
     const iconElement = new IconButton.Icon.Icon();
     iconElement.name = provider.iconName;