[GM3Restyling] Update run command menu

Kateryna Prokopenko · Devtools-frontend LUCI CQ · commit 33546605a90c · 2025-01-15T21:22:50.000-08:00
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 <kprokopenko@chromium.org> Reviewed-by: Kim-Anh Tran <kimanh@chromium.org> Reviewed-by: Simon Zünd <szuend@chromium.org> Commit-Queue: Simon Zünd <szuend@chromium.org>
diff --git a/config/gni/devtools_grd_files.gni b/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",
diff --git a/config/gni/devtools_image_files.gni b/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",
diff --git a/front_end/Images/src/global.svg b/front_end/Images/src/global.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.14582 16.1875C2.47916 16.507 2.87499 16.6667 3.33332 16.6667H7.5V15H3.33332V6.66671H16.6667V11.6666H18.3333V5.00004C18.3333 4.54171 18.1667 4.15282 17.8333 3.83337C17.5139 3.50004 17.125 3.33337 16.6667 3.33337H3.33332C2.87499 3.33337 2.47916 3.50004 2.14582 3.83337C1.82638 4.15282 1.66666 4.54171 1.66666 5.00004V15C1.66666 15.4584 1.82638 15.8542 2.14582 16.1875Z" fill="black"/>
+<path d="M9.16666 15.8334L12.1667 18.8334L13.3333 17.6459L11.5208 15.8334L13.3333 14.0209L12.1667 12.8334L9.16666 15.8334Z" fill="black"/>
+<path d="M15 17.6459L16.1667 18.8334L19.1667 15.8334L16.1667 12.8334L15 14.0209L16.8125 15.8334L15 17.6459Z" fill="black"/>
+</svg>
diff --git a/front_end/Images/src/grid-on.svg b/front_end/Images/src/grid-on.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2516)">
+<path d="M4.5 17C4.08333 17 3.72917 16.8542 3.4375 16.5625C3.14583 16.2708 3 15.9167 3 15.5V4.5C3 4.08333 3.14583 3.72917 3.4375 3.4375C3.72917 3.14583 4.08333 3 4.5 3H15.5C15.9167 3 16.2708 3.14583 16.5625 3.4375C16.8542 3.72917 17 4.08333 17 4.5V15.5C17 15.9167 16.8542 16.2708 16.5625 16.5625C16.2708 16.8542 15.9167 17 15.5 17H4.5ZM4.5 15.5H7.16667V12.8333H4.5V15.5ZM8.66667 15.5H11.3333V12.8333H8.66667V15.5ZM12.8333 15.5H15.5V12.8333H12.8333V15.5ZM4.5 11.3333H7.16667V8.66667H4.5V11.3333ZM8.66667 11.3333H11.3333V8.66667H8.66667V11.3333ZM12.8333 11.3333H15.5V8.66667H12.8333V11.3333ZM4.5 7.16667H7.16667V4.5H4.5V7.16667ZM8.66667 7.16667H11.3333V4.5H8.66667V7.16667ZM12.8333 7.16667H15.5V4.5H12.8333V7.16667Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2516">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/keyboard-full.svg b/front_end/Images/src/keyboard-full.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2482)">
+<path d="M3.5 16C3.08333 16 2.72917 15.8542 2.4375 15.5625C2.14583 15.2708 2 14.9167 2 14.5V5.5C2 5.08333 2.14583 4.72917 2.4375 4.4375C2.72917 4.14583 3.08333 4 3.5 4H16.5C16.9167 4 17.2708 4.14583 17.5625 4.4375C17.8542 4.72917 18 5.08333 18 5.5V14.5C18 14.9167 17.8542 15.2708 17.5625 15.5625C17.2708 15.8542 16.9167 16 16.5 16H3.5ZM3.5 11H16.5V5.5H3.5V11Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2482">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/label.svg b/front_end/Images/src/label.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2462)">
+<path d="M3.5 16C3.08333 16 2.72917 15.8542 2.4375 15.5625C2.14583 15.2708 2 14.9167 2 14.5V5.5C2 5.08333 2.14583 4.72917 2.4375 4.4375C2.72917 4.14583 3.08333 4 3.5 4H12.25C12.4861 4 12.7083 4.05555 12.9167 4.16667C13.125 4.26389 13.3056 4.40972 13.4583 4.60417L17.5 10L13.4583 15.3958C13.3056 15.5903 13.125 15.7431 12.9167 15.8542C12.7083 15.9514 12.4861 16 12.25 16H3.5ZM3.5 14.5H12.25L15.625 10L12.25 5.5H3.5V14.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2462">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/override.svg b/front_end/Images/src/override.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2504)">
+<path d="M4.4375 17.5625C4.72917 17.8542 5.08333 18 5.5 18H10.1C10.0344 17.6769 10 17.3425 10 17C10 16.8313 10.0084 16.6645 10.0247 16.5H5.5V3.5H11V7H14.5V12.0247C14.6645 12.0084 14.8313 12 15 12C15.3425 12 15.6769 12.0344 16 12.1V6L12 2H5.5C5.08333 2 4.72917 2.14583 4.4375 2.4375C4.14583 2.72917 4 3.08333 4 3.5V16.5C4 16.9167 4.14583 17.2708 4.4375 17.5625Z" fill="black"/>
+<path d="M18 17C18 18.6569 16.6569 20 15 20C13.3432 20 12 18.6569 12 17C12 15.3432 13.3432 14 15 14C16.6569 14 18 15.3432 18 17Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2504">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/palette.svg b/front_end/Images/src/palette.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2519)">
+<path d="M10 18C8.90278 18 7.86806 17.7917 6.89583 17.375C5.92361 16.9583 5.06944 16.3889 4.33333 15.6667C3.61111 14.9306 3.04167 14.0764 2.625 13.1042C2.20833 12.1319 2 11.0972 2 10C2 8.88889 2.20833 7.85417 2.625 6.89583C3.05556 5.92361 3.63889 5.07639 4.375 4.35417C5.125 3.61805 5.99306 3.04167 6.97917 2.625C7.97917 2.20833 9.04167 2 10.1667 2C11.25 2 12.2639 2.1875 13.2083 2.5625C14.1667 2.9375 15 3.45139 15.7083 4.10417C16.4167 4.75694 16.9722 5.52083 17.375 6.39583C17.7917 7.27083 18 8.20833 18 9.20833C18 10.5417 17.5347 11.6736 16.6042 12.6042C15.6736 13.5347 14.5417 14 13.2083 14H11.7917C11.6806 14 11.5833 14.0347 11.5 14.1042C11.4167 14.1736 11.375 14.2639 11.375 14.375C11.375 14.5833 11.4792 14.7569 11.6875 14.8958C11.8958 15.0347 12 15.4028 12 16C12 16.5139 11.8125 16.9792 11.4375 17.3958C11.0625 17.7986 10.5833 18 10 18ZM5.5 10.75C5.84722 10.75 6.13889 10.6319 6.375 10.3958C6.625 10.1458 6.75 9.84722 6.75 9.5C6.75 9.15278 6.625 8.86111 6.375 8.625C6.13889 8.375 5.84722 8.25 5.5 8.25C5.15278 8.25 4.85417 8.375 4.60417 8.625C4.36806 8.86111 4.25 9.15278 4.25 9.5C4.25 9.84722 4.36806 10.1458 4.60417 10.3958C4.85417 10.6319 5.15278 10.75 5.5 10.75ZM8 7.75C8.34722 7.75 8.63889 7.63194 8.875 7.39583C9.125 7.14583 9.25 6.84722 9.25 6.5C9.25 6.15278 9.125 5.86111 8.875 5.625C8.63889 5.375 8.34722 5.25 8 5.25C7.65278 5.25 7.35417 5.375 7.10417 5.625C6.86806 5.86111 6.75 6.15278 6.75 6.5C6.75 6.84722 6.86806 7.14583 7.10417 7.39583C7.35417 7.63194 7.65278 7.75 8 7.75ZM12 7.75C12.3472 7.75 12.6389 7.63194 12.875 7.39583C13.125 7.14583 13.25 6.84722 13.25 6.5C13.25 6.15278 13.125 5.86111 12.875 5.625C12.6389 5.375 12.3472 5.25 12 5.25C11.6528 5.25 11.3542 5.375 11.1042 5.625C10.8681 5.86111 10.75 6.15278 10.75 6.5C10.75 6.84722 10.8681 7.14583 11.1042 7.39583C11.3542 7.63194 11.6528 7.75 12 7.75ZM14.5 10.75C14.8472 10.75 15.1389 10.6319 15.375 10.3958C15.625 10.1458 15.75 9.84722 15.75 9.5C15.75 9.15278 15.625 8.86111 15.375 8.625C15.1389 8.375 14.8472 8.25 14.5 8.25C14.1528 8.25 13.8542 8.375 13.6042 8.625C13.3681 8.86111 13.25 9.15278 13.25 9.5C13.25 9.84722 13.3681 10.1458 13.6042 10.3958C13.8542 10.6319 14.1528 10.75 14.5 10.75ZM10 16.5C10.1528 16.5 10.2708 16.4444 10.3542 16.3333C10.4514 16.2083 10.5 16.0972 10.5 16C10.5 15.7778 10.3958 15.5833 10.1875 15.4167C9.97917 15.25 9.875 14.9028 9.875 14.375C9.875 13.8472 10.0556 13.4028 10.4167 13.0417C10.7917 12.6806 11.2431 12.5 11.7708 12.5H13.2083C14.125 12.5 14.9028 12.1806 15.5417 11.5417C16.1806 10.9028 16.5 10.125 16.5 9.20833C16.5 7.61111 15.8819 6.26389 14.6458 5.16667C13.4236 4.05555 11.9306 3.5 10.1667 3.5C8.30556 3.5 6.72917 4.13194 5.4375 5.39583C4.14583 6.65972 3.5 8.19444 3.5 10C3.5 11.8056 4.13194 13.3403 5.39583 14.6042C6.65972 15.8681 8.19444 16.5 10 16.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2519">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/photo-camera.svg b/front_end/Images/src/photo-camera.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4442_3515)">
+<path d="M10 14.5C11 14.5 11.8333 14.1597 12.5 13.4792C13.1667 12.7986 13.5 11.9722 13.5 11C13.5 10.0417 13.1667 9.22222 12.5 8.54167C11.8333 7.84722 11 7.5 10 7.5C9 7.5 8.16667 7.84722 7.5 8.54167C6.83333 9.22222 6.5 10.0486 6.5 11.0208C6.5 11.9792 6.83333 12.7986 7.5 13.4792C8.16667 14.1597 9 14.5 10 14.5ZM10 13C9.41667 13 8.9375 12.8056 8.5625 12.4167C8.1875 12.0278 8 11.5486 8 10.9792C8 10.4236 8.1875 9.95833 8.5625 9.58333C8.9375 9.19444 9.41667 9 10 9C10.5833 9 11.0625 9.19444 11.4375 9.58333C11.8125 9.95833 12 10.4236 12 10.9792C12 11.5486 11.8125 12.0278 11.4375 12.4167C11.0625 12.8056 10.5833 13 10 13ZM3.5 17C3.09722 17 2.74306 16.8542 2.4375 16.5625C2.14583 16.2569 2 15.9028 2 15.5V6.5C2 6.09722 2.14583 5.75 2.4375 5.45833C2.74306 5.15278 3.09722 5 3.5 5H6L7.5 3H12.5L14 5H16.5C16.9167 5 17.2708 5.15278 17.5625 5.45833C17.8542 5.75 18 6.09722 18 6.5V15.5C18 15.9028 17.8542 16.2569 17.5625 16.5625C17.2708 16.8542 16.9167 17 16.5 17H3.5ZM3.5 15.5H16.5V6.5H13.25L11.75 4.5H8.25L6.75 6.5H3.5V15.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4442_3515">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/terminal.svg b/front_end/Images/src/terminal.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2475)">
+<path d="M3.5 16C3.08333 16 2.72917 15.8542 2.4375 15.5625C2.14583 15.2708 2 14.9167 2 14.5V5.5C2 5.08333 2.14583 4.72917 2.4375 4.4375C2.72917 4.14583 3.08333 4 3.5 4H16.5C16.9167 4 17.2708 4.14583 17.5625 4.4375C17.8542 4.72917 18 5.08333 18 5.5V14.5C18 14.9167 17.8542 15.2708 17.5625 15.5625C17.2708 15.8542 16.9167 16 16.5 16H3.5ZM3.5 14.5H16.5V7H3.5V14.5ZM6.25 13.5L5.1875 12.4375L6.875 10.75L5.1875 9.0625L6.25 8L9 10.75L6.25 13.5ZM10 13.5V12H15V13.5H10Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2475">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/Images/src/tonality.svg b/front_end/Images/src/tonality.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2467)">
+<path d="M10 18C8.90278 18 7.86806 17.7917 6.89583 17.375C5.92361 16.9583 5.06944 16.3889 4.33333 15.6667C3.61111 14.9306 3.04167 14.0764 2.625 13.1042C2.20833 12.1319 2 11.0972 2 10C2 8.88889 2.20833 7.85417 2.625 6.89583C3.04167 5.92361 3.61111 5.07639 4.33333 4.35417C5.06944 3.61805 5.92361 3.04167 6.89583 2.625C7.86806 2.20833 8.90278 2 10 2C11.1111 2 12.1458 2.20833 13.1042 2.625C14.0764 3.04167 14.9236 3.61805 15.6458 4.35417C16.3819 5.07639 16.9583 5.92361 17.375 6.89583C17.7917 7.85417 18 8.88889 18 10C18 11.0972 17.7917 12.1319 17.375 13.1042C16.9583 14.0764 16.3819 14.9306 15.6458 15.6667C14.9236 16.3889 14.0764 16.9583 13.1042 17.375C12.1458 17.7917 11.1111 18 10 18ZM9.25 16.4583V3.54167C7.625 3.73611 6.25694 4.44444 5.14583 5.66667C4.04861 6.875 3.5 8.31944 3.5 10C3.5 11.6806 4.04861 13.1319 5.14583 14.3542C6.25694 15.5625 7.625 16.2639 9.25 16.4583ZM10.75 16.4583C11.2222 16.4028 11.6667 16.3056 12.0833 16.1667C12.5139 16.0139 12.9236 15.8194 13.3125 15.5833H10.75V16.4583ZM10.75 14.0833H15.0417C15.1528 13.9306 15.2569 13.7778 15.3542 13.625C15.4653 13.4722 15.5694 13.3194 15.6667 13.1667H10.75V14.0833ZM10.75 11.6667H16.2708C16.3125 11.5139 16.3472 11.3611 16.375 11.2083C16.4028 11.0556 16.4306 10.9028 16.4583 10.75H10.75V11.6667ZM10.75 9.25H16.4583C16.4306 9.09722 16.4028 8.94444 16.375 8.79167C16.3472 8.63889 16.3125 8.48611 16.2708 8.33333H10.75V9.25ZM10.75 6.83333H15.6667C15.5694 6.66667 15.4653 6.51389 15.3542 6.375C15.2569 6.22222 15.1528 6.06944 15.0417 5.91667H10.75V6.83333ZM10.75 4.41667H13.3125C12.9236 4.18055 12.5139 3.99305 12.0833 3.85417C11.6667 3.70139 11.2222 3.59722 10.75 3.54167V4.41667Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2467">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/front_end/ui/components/text_prompt/textPrompt.css b/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);
 }
diff --git a/front_end/ui/legacy/components/quick_open/CommandMenu.ts b/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;
diff --git a/front_end/ui/legacy/components/quick_open/filteredListWidget.css b/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 {
diff --git a/scripts/add_icon_paths.py b/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.")
