[GM3Restyling] Update Recorder toolbar select combobox

Bug: 368246828
Change-Id: I019b63690964fa41f110a575614597f18c8c9540
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5973699
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/recorder/recorderController.css

@@ -55,30 +55,50 @@ devtools-create-recording-view {
 }
 
 select {
-  border-radius: 2px;
-  border: 1px solid transparent;
-  height: 24px;
+  appearance: none;
+  user-select: none;
+  border: none;
+  border-radius: var(--sys-shape-corner-extra-small);
+  height: var(--sys-size-9);
   max-width: 180px;
   min-width: 140px;
-  padding: 0 5px;
+  padding: 0 var(--sys-size-6) 0 var(--sys-size-5);
   position: relative;
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
   text-overflow: ellipsis;
-}
-
-select:disabled {
-  color: var(--sys-color-state-disabled);
-}
-
-select:not([disabled]):hover,
-select:not([disabled]):focus-visible,
-select:not([disabled]):active {
-  background-color: var(--sys-color-state-hover-on-subtle);
-}
-
-select:not([disabled]):focus-visible {
-  box-shadow: 0 0 0 2px var(--sys-color-state-focus-ring);
+  background-image: var(--combobox-dropdown-arrow);
+  background-position: right center;
+  background-repeat: no-repeat;
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &:hover:active {
+    /* stylelint-disable plugin/use_theme_colors */
+    background:
+      var(--combobox-dropdown-arrow),
+      linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+      linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+    /* stylelint-enable plugin/use_theme_colors */
+    background-position: right center;
+    background-repeat: no-repeat;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    color: var(--sys-color-state-disabled);
+    background-color: var(--sys-color-state-disabled-container);
+  }
+
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  }
 }
 
 select option {

front_end/ui/legacy/designTokens.css

@@ -106,4 +106,10 @@
   --sys-typescale-body4-line-height: 16px;
   --sys-typescale-body5-line-height: 16px;
   --sys-typescale-monospace-line-height: 1.2;
+  --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
+}
+
+.theme-with-dark-background,
+:host-context(.theme-with-dark-background) {
+  --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-dark);
 }

front_end/ui/legacy/inspectorCommon.css

@@ -390,13 +390,11 @@ input::placeholder {
   font: inherit;
   margin: 0;
   outline: none;
-  padding: 0 var(--sys-size-4) 0 var(--sys-size-5);
+  padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
   background-image: var(--combobox-dropdown-arrow);
   background-color: var(--sys-color-surface);
   background-position: right center;
   background-repeat: no-repeat;
-
-  --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
 }
 
 .chrome-select:disabled {
@@ -406,11 +404,6 @@ input::placeholder {
   background-color: var(--sys-color-state-disabled-container);
 }
 
-.theme-with-dark-background .chrome-select,
-:host-context(.theme-with-dark-background) .chrome-select {
-  --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-dark);
-}
-
 .chrome-select:enabled {
   &:hover {
     background-color: var(--sys-color-state-hover-on-subtle);