chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/ui/legacy/designTokens.css

@@ -14,46 +14,46 @@
   --sys-elevation-level4: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px 0 rgb(0 0 0 / 30%);
   --sys-elevation-level5: 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
   --sys-size-1: 1px;
-  --sys-size-2: 0.125rem;     /* 2px */
-  --sys-size-3: 0.25rem;      /* 4px */
-  --sys-size-4: 0.375rem;     /* 6px */
-  --sys-size-5: 0.5rem;       /* 8px */
-  --sys-size-6: 0.75rem;      /* 12px */
-  --sys-size-7: 0.875rem;     /* 14px */
-  --sys-size-8: 1rem;         /* 16px */
-  --sys-size-9: 1.25rem;      /* 20px */
-  --sys-size-10: 1.375rem;    /* 22px */
-  --sys-size-11: 1.5rem;      /* 24px */
-  --sys-size-12: 1.75rem;     /* 28px */
-  --sys-size-13: 2rem;        /* 32px */
-  --sys-size-14: 2.5rem;      /* 40px */
-  --sys-size-15: 2.75rem;     /* 44px */
-  --sys-size-16: 3rem;        /* 48px */
-  --sys-size-17: 3.5rem;      /* 56px */
-  --sys-size-18: 4rem;        /* 64px */
-  --sys-size-19: 6rem;        /* 80px */
-  --sys-size-20: 7rem;        /* 112px */
-  --sys-size-21: 8rem;        /* 128px */
-  --sys-size-22: 9rem;        /* 144px */
-  --sys-size-23: 10rem;       /* 160px */
-  --sys-size-24: 11rem;       /* 176px */
-  --sys-size-25: 12rem;       /* 192px */
-  --sys-size-26: 13rem;       /* 208px */
-  --sys-size-27: 14rem;       /* 224px */
-  --sys-size-28: 15rem;       /* 240px */
-  --sys-size-29: 16rem;       /* 256px */
-  --sys-size-30: 18rem;       /* 288px */
-  --sys-size-31: 20rem;       /* 320px */
-  --sys-size-32: 24rem;       /* 384px */
-  --sys-size-33: 28rem;       /* 448px */
-  --sys-size-34: 32rem;       /* 512px */
-  --sys-size-35: 36rem;       /* 576px */
-  --sys-size-36: 42rem;       /* 672px */
-  --sys-size-37: 48rem;       /* 768px */
-  --sys-size-38: 56rem;       /* 896px */
-  --sys-size-39: 64rem;       /* 1024px */
-  --sys-size-40: 72rem;       /* 1152px */
-  --sys-size-41: 80rem;       /* 1280px */
+  --sys-size-2: 2px;
+  --sys-size-3: 4px;
+  --sys-size-4: 6px;
+  --sys-size-5: 8px;
+  --sys-size-6: 12px;
+  --sys-size-7: 14px;
+  --sys-size-8: 16px;
+  --sys-size-9: 20px;
+  --sys-size-10: 22px;
+  --sys-size-11: 24px;
+  --sys-size-12: 28px;
+  --sys-size-13: 32px;
+  --sys-size-14: 40px;
+  --sys-size-15: 44px;
+  --sys-size-16: 48px;
+  --sys-size-17: 56px;
+  --sys-size-18: 64px;
+  --sys-size-19: 80px;
+  --sys-size-20: 112px;
+  --sys-size-21: 128px;
+  --sys-size-22: 144px;
+  --sys-size-23: 160px;
+  --sys-size-24: 176px;
+  --sys-size-25: 192px;
+  --sys-size-26: 208px;
+  --sys-size-27: 224px;
+  --sys-size-28: 240px;
+  --sys-size-29: 256px;
+  --sys-size-30: 288px;
+  --sys-size-31: 320px;
+  --sys-size-32: 384px;
+  --sys-size-33: 448px;
+  --sys-size-34: 512px;
+  --sys-size-35: 576px;
+  --sys-size-36: 672px;
+  --sys-size-37: 768px;
+  --sys-size-38: 896px;
+  --sys-size-39: 1024px;
+  --sys-size-40: 1152px;
+  --sys-size-41: 1280px;
   --sys-shape-corner-extra-small: 4px;
   --sys-shape-corner-small: 8px;
   --sys-shape-corner-medium-small: 12px;
@@ -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);
 }

package/front_end/ui/legacy/filter.css

@@ -148,21 +148,36 @@
 
 .dropdown-filterbar {
   justify-content: space-between;
-  padding: 0 3px 0 5px;
-  border: 1px solid transparent;
-  border-radius: 7px;
+  align-items: center;
+  height: var(--sys-size-9);
+  padding: 0 var(--sys-size-3) 0 var(--sys-size-5);
+  border: none;
+  border-radius: var(--sys-shape-corner-extra-small);
   display: flex;
   background-color: transparent;
   color: var(--sys-color-on-surface-subtle);
 
   .toolbar-dropdown-arrow {
-    top: 1px;
+    top: var(--sys-size-2);
   }
-}
 
-button.toolbar-item:focus-visible {
-  background: var(--sys-color-state-hover-on-subtle);
-  border-radius: 2px;
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &: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: 2px solid var(--sys-color-state-focus-ring);
+  }
 }
 
 @media (forced-colors: active) {

package/front_end/ui/legacy/inspectorCommon.css

@@ -382,29 +382,26 @@ input::placeholder {
 .chrome-select {
   appearance: none;
   user-select: none;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  width: var(--sys-size-22);
+  height: var(--sys-size-11);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
   color: var(--sys-color-on-surface);
   font: inherit;
   margin: 0;
   outline: none;
-  padding-right: 20px;
-  padding-left: 6px;
-  background-image: var(--image-file-arrow-drop-down-light);
+  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;
-  min-height: 24px;
-  min-width: 80px;
 }
 
 .chrome-select:disabled {
-  opacity: 38%;
-}
-
-.theme-with-dark-background .chrome-select,
-:host-context(.theme-with-dark-background) .chrome-select {
-  background-image: var(--image-file-arrow-drop-down-dark);
+  opacity: 100%;
+  border: var(--sys-size-1) solid transparent;
+  color: var(--sys-color-state-disabled);
+  background-color: var(--sys-color-state-disabled-container);
 }
 
 .chrome-select:enabled {
@@ -416,31 +413,36 @@ input::placeholder {
     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;
+  }
+
   &:focus {
-    outline: 2px solid var(--sys-color-state-focus-ring);
-    outline-offset: 2px;
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: -1px;
   }
 }
 
 @media (forced-colors: active) and (prefers-color-scheme: light) {
-  .chrome-select {
-    background-image: var(--image-file-arrow-drop-down-light);
-  }
-
-  .theme-with-dark-background .chrome-select,
-  :host-context(.theme-with-dark-background) .chrome-select {
-    background-image: var(--image-file-arrow-drop-down-light);
+  :root,
+  .theme-with-dark-background,
+  :host-context(.theme-with-dark-background) {
+    --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
   }
 }
 
 @media (forced-colors: active) and (prefers-color-scheme: dark) {
-  .chrome-select {
-    background-image: var(--image-file-arrow-drop-down-dark);
-  }
-
-  .theme-with-dark-background .chrome-select,
-  :host-context(.theme-with-dark-background) .chrome-select {
-    background-image: var(--image-file-arrow-drop-down-dark);
+  :root,
+  .theme-with-dark-background,
+  :host-context(.theme-with-dark-background) {
+    --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-dark);
   }
 }
 

package/front_end/ui/legacy/searchableView.css

@@ -107,9 +107,6 @@
     & > devtools-button {
       width: var(--sys-size-11);
       justify-content: center;
-    }
-
-    & devtools-button:last-child(devtools-button) {
       margin-right: var(--sys-size-4);
     }
   }
@@ -141,6 +138,10 @@
     display: inline-flex;
     grid-row: 1/2;
     grid-column: 2/3;
+
+    & > devtools-button:last-child {
+      margin-right: var(--sys-size-4);
+    }
   }
 
   .toolbar-search-buttons {

package/front_end/ui/legacy/softDropDownButton.css

@@ -12,14 +12,18 @@ button.soft-dropdown {
   background: none;
   max-width: 120px;
 
-  devtools-icon {
-    top: 1px;
+  &[disabled] {
+    background: var(--sys-color-state-disabled-container);
+    color: var(--sys-color-state-disabled);
+
+    devtools-icon {
+      color: var(--sys-color-state-disabled);
+    }
   }
-}
 
-button.soft-dropdown[disabled] {
-  background: var(--sys-color-state-disabled-container);
-  color: var(--sys-color-state-disabled);
+  devtools-icon {
+    top: var(--sys-size-2);
+  }
 }
 
 button.soft-dropdown > .title {

package/front_end/ui/legacy/tabbedPane.css

@@ -241,7 +241,7 @@
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-content {
-  padding: var(--sys-size-10);
+  padding-top: var(--sys-size-10);
   overflow-x: hidden;
 }
 

package/front_end/ui/legacy/textPrompt.css

@@ -55,7 +55,7 @@
 }
 
 .text-prompt.disabled {
-  opacity: 50%;
+  color: var(--sys-color-state-disabled);
   cursor: default;
 }
 

package/front_end/ui/legacy/toolbar.css

@@ -82,20 +82,17 @@ devtools-issue-counter.main-toolbar {
 .toolbar-dropdown-arrow {
   pointer-events: none;
   flex: none;
-  top: 1px;
+  top: 2px;
 }
 
 .toolbar-select-container .toolbar-dropdown-arrow {
-  left: -5px;
+  left: -7px;
 }
 
 .toolbar-button.dark-text .toolbar-dropdown-arrow {
   color: var(--sys-color-on-surface);
 }
 
-select.toolbar-item:disabled + .toolbar-dropdown-arrow {
-  opacity: 50%;
-}
 /* Toolbar item */
 
 .toolbar-button {
@@ -322,29 +319,50 @@ it. */
 .toolbar-select-container {
   display: inline-flex;
   flex-shrink: 0;
-  margin-right: 6px;
+  padding-left: 2px;
 }
 
 select.toolbar-item {
-  min-width: 38px;
+  min-width: var(--sys-size-14);
   appearance: none;
-  border: 1px solid transparent;
-  padding: 0 13px 0 5px;
+  padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
   margin-right: -10px;
   position: relative;
-  height: 22px;
-  margin-top: 2px;
-  margin-bottom: 2px;
+  height: var(--sys-size-9);
+  border-radius: var(--sys-shape-corner-extra-small);
+
+  &:disabled {
+    opacity: 100%;
+    pointer-events: none;
+    background-color: var(--sys-color-state-disabled-container);
+    color: var(--sys-color-state-disabled);
+
+    & + .toolbar-dropdown-arrow {
+      color: var(--sys-color-state-disabled);
+    }
+  }
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &: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));
+  }
 }
 
 button.toolbar-item:focus-visible,
 select.toolbar-item:focus-visible {
-  background: var(--sys-color-state-hover-on-subtle);
-  border-radius: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 
   &.toolbar-has-dropdown {
     background: none;
-    border-radius: var(--sys-shape-corner-extra-small);
   }
 }
 
@@ -353,9 +371,6 @@ select.toolbar-item:focus-visible > * {
   border-radius: 7px;
 }
 
-select.toolbar-item:not(.toolbar-has-dropdown):disabled {
-  opacity: 50%;
-}
 /* Input */
 
 .toolbar-input {
@@ -373,7 +388,7 @@ select.toolbar-item:not(.toolbar-has-dropdown):disabled {
     box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
   }
 
-  &:not(:has(devtools-button:hover)):hover {
+  &:not(:has(devtools-button:hover)):not(.disabled):hover {
     background-color: var(--sys-color-state-hover-on-subtle);
   }
 
@@ -400,6 +415,10 @@ select.toolbar-item:not(.toolbar-has-dropdown):disabled {
   }
 }
 
+.toolbar-filter .toolbar-input-clear-button {
+  margin-right: var(--sys-size-4);
+}
+
 .toolbar-input-empty .toolbar-input-clear-button {
   display: none;
 }