[GM3Restyling] Update run command menu

Also add a script that given an image name adds required image paths to
devtools_image_files.gni and devtools_grd_files.gni

Screenshot: https://imgur.com/a/MaU8tFD

Bug: 325442580
Change-Id: I13d1af601c5534507f5303608fc28faf612c7d3a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6170727
Auto-Submit: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

config/gni/devtools_grd_files.gni

@@ -151,8 +151,10 @@ grd_files_release_sources = [
   "front_end/Images/gear-filled.svg",
   "front_end/Images/gear.svg",
   "front_end/Images/gears.svg",
+  "front_end/Images/global.svg",
   "front_end/Images/google.svg",
   "front_end/Images/goto-filled.svg",
+  "front_end/Images/grid-on.svg",
   "front_end/Images/group.svg",
   "front_end/Images/heap-snapshot.svg",
   "front_end/Images/heap-snapshots.svg",
@@ -181,8 +183,10 @@ grd_files_release_sources = [
   "front_end/Images/justify-items-start.svg",
   "front_end/Images/justify-items-stretch.svg",
   "front_end/Images/keyboard-arrow-right.svg",
+  "front_end/Images/keyboard-full.svg",
   "front_end/Images/keyboard-pen.svg",
   "front_end/Images/keyboard.svg",
+  "front_end/Images/label.svg",
   "front_end/Images/large-arrow-right-filled.svg",
   "front_end/Images/layers-filled.svg",
   "front_end/Images/layers.svg",
@@ -205,6 +209,8 @@ grd_files_release_sources = [
   "front_end/Images/network-settings.svg",
   "front_end/Images/nodeIcon.avif",
   "front_end/Images/open-externally.svg",
+  "front_end/Images/override.svg",
+  "front_end/Images/palette.svg",
   "front_end/Images/pause-circle.svg",
   "front_end/Images/pause.svg",
   "front_end/Images/pen-spark.svg",
@@ -214,6 +220,7 @@ grd_files_release_sources = [
   "front_end/Images/performance-panel-time-range.svg",
   "front_end/Images/performance.svg",
   "front_end/Images/person.svg",
+  "front_end/Images/photo-camera.svg",
   "front_end/Images/play.svg",
   "front_end/Images/plus.svg",
   "front_end/Images/policy.svg",
@@ -256,10 +263,12 @@ grd_files_release_sources = [
   "front_end/Images/symbol.svg",
   "front_end/Images/sync.svg",
   "front_end/Images/table.svg",
+  "front_end/Images/terminal.svg",
   "front_end/Images/thumb-down-filled.svg",
   "front_end/Images/thumb-down.svg",
   "front_end/Images/thumb-up-filled.svg",
   "front_end/Images/thumb-up.svg",
+  "front_end/Images/tonality.svg",
   "front_end/Images/toolbarResizerVertical.png",
   "front_end/Images/top-panel-close.svg",
   "front_end/Images/top-panel-open.svg",

config/gni/devtools_image_files.gni

@@ -153,8 +153,10 @@ devtools_svg_sources = [
   "gear-filled.svg",
   "gear.svg",
   "gears.svg",
+  "global.svg",
   "google.svg",
   "goto-filled.svg",
+  "grid-on.svg",
   "group.svg",
   "heap-snapshot.svg",
   "heap-snapshots.svg",
@@ -183,8 +185,10 @@ devtools_svg_sources = [
   "justify-items-start.svg",
   "justify-items-stretch.svg",
   "keyboard-arrow-right.svg",
+  "keyboard-full.svg",
   "keyboard-pen.svg",
   "keyboard.svg",
+  "label.svg",
   "large-arrow-right-filled.svg",
   "layers-filled.svg",
   "layers.svg",
@@ -204,6 +208,8 @@ devtools_svg_sources = [
   "mouse.svg",
   "network-settings.svg",
   "open-externally.svg",
+  "override.svg",
+  "palette.svg",
   "pause-circle.svg",
   "pause.svg",
   "pen-spark.svg",
@@ -213,6 +219,7 @@ devtools_svg_sources = [
   "performance-panel-time-range.svg",
   "performance.svg",
   "person.svg",
+  "photo-camera.svg",
   "play.svg",
   "plus.svg",
   "policy.svg",
@@ -254,10 +261,12 @@ devtools_svg_sources = [
   "symbol.svg",
   "sync.svg",
   "table.svg",
+  "terminal.svg",
   "thumb-down-filled.svg",
   "thumb-down.svg",
   "thumb-up-filled.svg",
   "thumb-up.svg",
+  "tonality.svg",
   "top-panel-close.svg",
   "top-panel-open.svg",
   "touch-app.svg",

front_end/ui/components/text_prompt/textPrompt.css

@@ -34,6 +34,7 @@ input {
   left: 0;
   padding: 0;
   z-index: 2;
+  color: var(--sys-color-on-surface);
   background-color: transparent;
   line-height: var(--sys-typescale-body3-line-height);
 }

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

@@ -7,6 +7,7 @@ import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
+import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UI from '../../legacy.js';
 
 import {FilteredListWidget, Provider, registerProvider} from './FilteredListWidget.js';
@@ -323,6 +324,8 @@ export class CommandMenuProvider extends Provider {
     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);
 
@@ -340,9 +343,6 @@ export class CommandMenuProvider extends Provider {
     if (!tagElement) {
       return;
     }
-    const index = Platform.StringUtilities.hashCode(command.category) % MaterialPaletteColors.length;
-    tagElement.style.backgroundColor = MaterialPaletteColors[index];
-    tagElement.style.color = '#fff';
     tagElement.textContent = command.category;
   }
 
@@ -363,25 +363,28 @@ export class CommandMenuProvider extends Provider {
   }
 }
 
-export const MaterialPaletteColors = [
-  '#F44336',
-  '#E91E63',
-  '#9C27B0',
-  '#673AB7',
-  '#3F51B5',
-  '#03A9F4',
-  '#00BCD4',
-  '#009688',
-  '#4CAF50',
-  '#8BC34A',
-  '#CDDC39',
-  '#FFC107',
-  '#FF9800',
-  '#FF5722',
-  '#795548',
-  '#9E9E9E',
-  '#607D8B',
-];
+const categoryIcons: {[key: string]: string} = {
+  Appearance: 'palette',
+  Console: 'terminal',
+  Debugger: 'bug',
+  Drawer: 'keyboard-full',
+  Elements: 'code',
+  Global: 'global',
+  Grid: 'grid-on',
+  Help: 'help',
+  Mobile: 'devices',
+  Navigation: 'refresh',
+  Network: 'arrow-up-down',
+  Panel: 'frame',
+  Performance: 'performance',
+  Persistence: 'override',
+  Recorder: 'record-start',
+  Rendering: 'tonality',
+  Resources: 'bin',
+  Screenshot: 'photo-camera',
+  Settings: 'gear',
+  Sources: 'label',
+};
 
 export class Command {
   readonly category: Common.UIString.LocalizedString;

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

@@ -70,6 +70,8 @@ devtools-text-prompt {
 .filtered-list-widget-item-wrapper devtools-icon {
   align-self: center;
   flex: none;
+  width: 18px;
+  height: 18px;
 }
 
 .filtered-list-widget-item-wrapper.selected {
@@ -119,10 +121,8 @@ devtools-text-prompt {
 }
 
 .filtered-list-widget-item-wrapper .tag {
-  padding: 0 12px;
-  border-radius: 4px;
-  line-height: 24px;
-  height: 24px;
+  font-size: var(--sys-typescale-body5-size);
+  line-height: var(--sys-typescale-headline5-line-height);
   align-self: center;
   flex-shrink: 0;
 }
@@ -139,15 +139,13 @@ devtools-text-prompt {
 }
 
 .filtered-list-widget-item.one-row {
-  height: 36px;
-  line-height: 20px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  line-height: var(--sys-typescale-body3-line-height);
+  align-content: center;
   display: flex;
 }
 
 .filtered-list-widget-item.one-row .filtered-list-widget-title {
-  padding-right: 8px;
+  display: flex;
 }
 
 .filtered-list-widget-item.two-rows {

scripts/add_icon_paths.py

@@ -0,0 +1,71 @@
+#!/usr/bin/env python3
+
+# Copyright 2024 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import sys
+
+
+def add_image_to_config(image_name):
+    """
+    Adds required image paths to the devtools_grd_files.gni and devtools_image_files.gni.
+
+    Args:
+        image_name: The name of the image file (e.g., "palette").
+    """
+
+    grd_files_path = "config/gni/devtools_grd_files.gni"
+    image_files_path = "config/gni/devtools_image_files.gni"
+
+    grd_files_line = f'  "front_end/Images/{image_name}.svg",'
+    image_files_line = f'  "{image_name}.svg",'
+
+    # --- Update devtools-frontend/config/gni/devtools_grd_files.gni ---
+
+    with open(grd_files_path, "r") as f:
+        grd_files_lines = f.readlines()
+
+    start_index = grd_files_lines.index("grd_files_release_sources = [\n") + 1
+    end_index = grd_files_lines.index("]\n", start_index)
+
+    for i in range(start_index, end_index):
+        current_file_name = grd_files_lines[i].strip().strip('",')
+        if current_file_name.startswith("front_end/Images/"):
+            current_file_name = current_file_name[len("front_end/Images/"):]
+        if current_file_name > f"{image_name}.svg":
+            grd_files_lines.insert(i, grd_files_line + "\n")
+            break
+    else:
+        grd_files_lines.insert(end_index, grd_files_line + "\n")
+
+    with open(grd_files_path, "w") as f:
+        f.writelines(grd_files_lines)
+
+    # --- Update devtools-frontend/config/gni/devtools_image_files.gni ---
+
+    with open(image_files_path, "r") as f:
+        image_files_lines = f.readlines()
+
+    start_index = image_files_lines.index("devtools_svg_sources = [\n") + 1
+    end_index = image_files_lines.index("]\n", start_index)
+
+    for i in range(start_index, end_index):
+        if image_files_lines[i] > image_files_line:
+            image_files_lines.insert(i, image_files_line + "\n")
+            break
+    else:
+        image_files_lines.insert(end_index, image_files_line + "\n")
+
+    with open(image_files_path, "w") as f:
+        f.writelines(image_files_lines)
+
+
+if __name__ == "__main__":
+    if len(sys.argv) != 2:
+        print("Usage: python add_icon_paths.py <image_name>")
+        sys.exit(1)
+
+    image_name = sys.argv[1]
+    add_image_to_config(image_name)
+    print(f"Successfully added {image_name} to the configuration files.")