[GM3Restyling] Update devtools select menu combobox styles

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

Author: Kateryna Prokopenko

front_end/panels/recorder/components/recordingView.css

@@ -300,12 +300,9 @@
   align-items: center;
 }
 
-.editable-setting devtools-select-menu {
-  height: 32px;
-}
-
 .editable-setting .devtools-text-input {
   width: fit-content;
+  height: var(--sys-size-9);
 }
 
 .wrapping-label {

front_end/panels/recorder/components/selectButton.css

@@ -13,57 +13,13 @@
   position: relative; /* Needed for outline to appear on top of the next element */
 }
 
+.select-button devtools-select-menu {
+  position: relative;
+  top: var(--sys-size-1);
+  height: var(--sys-size-9);
+}
+
 .select-menu-item-content-with-icon {
   display: flex;
   align-items: center;
 }
-
-/* .select-menu-item-content-with-icon::before {
-  content: "";
-  position: relative;
-  left: 0;
-  top: 0;
-  background-color: var(--sys-color-on-surface);
-  display: inline-block;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  mask-image: var(--item-mask-icon);
-} */
-
-/* devtools-select-menu {
-  height: var(--override-select-menu-height, 24px);
-  border-radius: 0 4px 4px 0;
-  box-sizing: border-box;
-
-  --override-select-menu-show-button-outline: var(--sys-color-state-focus-ring);
-  --override-select-menu-label-with-arrow-padding: 0;
-  --override-select-menu-border: none;
-  --override-select-menu-show-button-padding: 0 6px 0 0;
-} */
-
-/* devtools-select-menu.primary {
-  border: none;
-  border-left: 1px solid var(--override-icon-and-text-color);
-
-  --override-icon-and-text-color: var(--sys-color-cdt-base-container);
-  --override-select-menu-arrow-color: var(--override-icon-and-text-color);
-  --override-divider-color: var(--override-icon-and-text-color);
-  --override-select-menu-background-color: var(--sys-color-primary);
-  --override-select-menu-active-background-color:
-    var(
-      --override-select-menu-background-color
-    );
-} */
-
-/* devtools-select-menu.primary:hover {
-  --override-select-menu-background-color: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 10%);
-} */
-
-/* devtools-select-menu[disabled].primary,
-devtools-select-menu[disabled].primary:hover {
-  --override-icon-and-text-color: var(--sys-color-state-disabled);
-  --override-select-menu-background-color: var(--sys-color-cdt-base-container-elevation-1);
-} */

front_end/ui/components/menus/selectMenu.css

@@ -6,23 +6,26 @@
 
 :host {
   border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 3px;
+  border-radius: var(--sys-shape-corner-extra-small);
   width: fit-content;
   display: flex;
   align-items: center;
-  background-color: var(--override-select-menu-background-color, var(--sys-color-cdt-base-container));
+  background-color: var(--sys-color-cdt-base-container);
 }
 
 :host([has-open-dialog]) {
-  background-color: var(--override-select-menu-active-background-color, var(--sys-color-neutral-container));
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  background:
+    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));
 }
 
 button {
   background: none;
 }
 
 #side-button {
-  border: 1px solid var(--override-select-menu-border, var(--sys-color-neutral-outline));
+  border: 1px solid var(--sys-color-neutral-outline);
   border-radius: 3px 0 0 3px;
   border-right: none;
   height: 100%;
@@ -31,7 +34,7 @@ button {
 }
 
 button:disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 
 @keyframes slideIn {

front_end/ui/components/menus/selectMenuButton.css

@@ -5,7 +5,7 @@
  */
 
 :host {
-  height: 100%;
+  height: var(--sys-size-9);
   width: 100%;
   display: block;
 }
@@ -17,13 +17,27 @@
   height: 100%;
   width: 100%;
   border: none;
-  border-radius: var(--override-select-menu-show-button-border-radius);
-  padding: var(--override-select-menu-show-button-padding, 1px 6px);
-}
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: 0 var(--sys-size-4) 0 var(--sys-size-5);
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
 
-.show:focus-visible {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  &:hover:active {
+    background:
+      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));
+  }
+
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: -1px;
+  }
 }
 
 #button-label-wrapper {
@@ -45,7 +59,7 @@
 }
 
 #label[witharrow] {
-  padding: var(--override-select-menu-label-with-arrow-padding, 0 10px 0 0);
+  padding: 0 10px 0 0;
   text-align: left;
 }
 
@@ -62,15 +76,12 @@
   height: 14px;
   display: inline-block;
   mask-repeat: no-repeat;
-  background-color: var(--override-throttling-icon-and-text-color, var(--override-select-menu-arrow-color, var(--sys-color-on-surface)));
-  transform: rotate(var(--arrow-angle));
-  transform-origin: center;
-  transition: 200ms;
+  background-color: var(--sys-color-on-surface-subtle);
 }
 
 .single-arrow {
   border-radius: 0 3px 3px 0;
-  border: 1px solid var(--override-select-menu-border, var(--sys-color-neutral-outline));
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   height: 100%;
   aspect-ratio: 1 / 1;
   padding: 0;
@@ -79,14 +90,15 @@
   align-items: center;
 }
 
-button[aria-expanded="true"] #arrow {
-  transform: rotate(calc(var(--arrow-angle) + 180deg));
-}
-
 button {
   background: none;
 }
 
 button[disabled] {
   color: var(--sys-color-state-disabled);
+  background-color: var(--sys-color-state-disabled-container);
+
+  #arrow {
+    background-color: var(--sys-color-state-disabled);
+  }
 }