chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -33,6 +33,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 Root from '../../../../core/root/root.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
@@ -113,6 +114,12 @@ const UIStrings = {
    *@example {allow pasting} PH1
    */
   typeAllowPasting: 'Type \'\'{PH1}\'\'',
+  /**
+   * @description Error message shown when the user tries to open a file that contains non-readable data. "Editor" refers to
+   * a text editor.
+   */
+  binaryContentError:
+      'Editor can\'t show binary data. Use the "Response" tab in the "Network" panel to inspect this resource.',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/SourceFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -550,7 +557,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     progressIndicator.setWorked(1);
     const contentData = await contentDataPromise;
 
-    let error, content;
+    let error: string|undefined;
+    let content: CodeMirror.Text|string|null;
     let isMinified = false;
     if (TextUtils.ContentData.ContentData.isError(contentData)) {
       error = contentData.error;
@@ -558,16 +566,25 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     } else if (contentData instanceof TextUtils.WasmDisassembly.WasmDisassembly) {
       content = CodeMirror.Text.of(contentData.lines);
       this.wasmDisassemblyInternal = contentData;
-    } else {
+    } else if (contentData.isTextContent) {
       content = contentData.text;
       isMinified = TextUtils.TextUtils.isMinified(contentData.text);
       this.wasmDisassemblyInternal = null;
+    } else if (contentData.mimeType === 'application/wasm') {
+      // The network panel produces ContentData with raw WASM inside. We have to manually disassemble that
+      // as V8 might not know about it.
+      this.wasmDisassemblyInternal = await SDK.Script.disassembleWasm(contentData.base64);
+      content = CodeMirror.Text.of(this.wasmDisassemblyInternal.lines);
+    } else {
+      error = i18nString(UIStrings.binaryContentError);
+      content = null;
+      this.wasmDisassemblyInternal = null;
     }
 
     progressIndicator.setWorked(100);
     progressIndicator.done();
 
-    if (this.rawContent === content) {
+    if (this.rawContent === content && error === undefined) {
       return;
     }
     this.rawContent = content;

package/front_end/{panels/network/RequestBinaryResponseView.test.ts → ui/legacy/components/source_frame/StreamingContentHexView.test.ts}

@@ -1,16 +1,16 @@
-// Copyright (c) 2024 The Chromium Authors. All rights reserved.
+// 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 * as TextUtils from '../../models/text_utils/text_utils.js';
-import {raf} from '../../testing/DOMHelpers.js';
-import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
-import * as LinearMemoryInspectorComponents from '../linear_memory_inspector/components/components.js';
+import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
+import {raf} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 
-import * as Network from './network.js';
+import * as SourceFrame from './source_frame.js';
 
-describeWithEnvironment('RequestBinaryResponseView', () => {
-  function getMemoryViewer(view: Network.RequestBinaryResponseView.RequestBinaryResponseView):
+describeWithEnvironment('StreamingContentHexView', () => {
+  function getMemoryViewer(view: SourceFrame.StreamingContentHexView.StreamingContentHexView):
       LinearMemoryInspectorComponents.LinearMemoryViewer.LinearMemoryViewer {
     const inspector = view.contentElement.firstChild as HTMLElement;
     assert.isNotNull(inspector.shadowRoot);
@@ -20,7 +20,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
     return viewer;
   }
 
-  function getAllByteCells(view: Network.RequestBinaryResponseView.RequestBinaryResponseView): string {
+  function getAllByteCells(view: SourceFrame.StreamingContentHexView.StreamingContentHexView): string {
     const viewer = getMemoryViewer(view);
     assert.isNotNull(viewer.shadowRoot);
 
@@ -28,7 +28,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
     return byteCells.map(c => c.textContent).join('');
   }
 
-  function getAllTextCells(view: Network.RequestBinaryResponseView.RequestBinaryResponseView): string {
+  function getAllTextCells(view: SourceFrame.StreamingContentHexView.StreamingContentHexView): string {
     const viewer = getMemoryViewer(view);
     assert.isNotNull(viewer.shadowRoot);
 
@@ -39,7 +39,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
   it('shows the initial content of a StreamingContentData', async () => {
     const streamingContentData = TextUtils.StreamingContentData.StreamingContentData.from(
         new TextUtils.ContentData.ContentData(window.btoa('abc'), /* isBase64 */ true, 'application/octet-stream'));
-    const view = new Network.RequestBinaryResponseView.RequestBinaryResponseView(streamingContentData);
+    const view = new SourceFrame.StreamingContentHexView.StreamingContentHexView(streamingContentData);
     view.markAsRoot();
     view.show(document.body);
     await raf();
@@ -53,7 +53,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
   it('shows the updated content of a StreamingContentData', async () => {
     const streamingContentData = TextUtils.StreamingContentData.StreamingContentData.from(
         new TextUtils.ContentData.ContentData(window.btoa('abc'), /* isBase64 */ true, 'application/octet-stream'));
-    const view = new Network.RequestBinaryResponseView.RequestBinaryResponseView(streamingContentData);
+    const view = new SourceFrame.StreamingContentHexView.StreamingContentHexView(streamingContentData);
     view.markAsRoot();
     view.show(document.body);
     await raf();

package/front_end/ui/legacy/components/source_frame/StreamingContentHexView.ts

@@ -0,0 +1,122 @@
+// 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 * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
+import * as UI from '../../legacy.js';
+
+const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
+
+/**
+ * This is a slightly reduced version of `panels/LinearMemoryInspectorPane.LinearMemoryInspectorView.
+ *
+ * It's not hooked up to the LinearMemoryInspectorController and it operates on a fixed memory array thats
+ * known upfront.
+ */
+class LinearMemoryInspectorView extends UI.Widget.VBox {
+  #memory = new Uint8Array([0]);
+  #address = 0;
+  #inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
+
+  constructor() {
+    super(false);
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
+        this.#memoryRequested.bind(this));
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName, event => {
+          this.#address = event.data;
+        });
+    this.contentElement.appendChild(this.#inspector);
+  }
+
+  override wasShown(): void {
+    this.refreshData();
+  }
+
+  setMemory(memory: Uint8Array): void {
+    this.#memory = memory;
+    this.refreshData();
+  }
+
+  refreshData(): void {
+    // TODO(szuend): The following lines are copied from `LinearMemoryInspectorController`. We can't reuse them
+    // as depending on a module in `panels/` from a component is a layering violation.
+
+    // Provide a chunk of memory that covers the address to show and some before and after
+    // as 1. the address shown is not necessarily at the beginning of a page and
+    // 2. to allow for fewer memory requests.
+    const memoryChunkStart = Math.max(0, this.#address - MEMORY_TRANSFER_MIN_CHUNK_SIZE / 2);
+    const memoryChunkEnd = memoryChunkStart + MEMORY_TRANSFER_MIN_CHUNK_SIZE;
+    const memory = this.#memory.slice(memoryChunkStart, memoryChunkEnd);
+    this.#inspector.data = {
+      memory,
+      address: this.#address,
+      memoryOffset: memoryChunkStart,
+      outerMemoryLength: this.#memory.length,
+      hideValueInspector: true,
+    };
+  }
+
+  #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
+    // TODO(szuend): The following lines are copied from `LinearMemoryInspectorController`. We can't reuse them
+    // as depending on a module in `panels/` from a component is a layering violation.
+
+    const {start, end, address} = event.data;
+    if (address < start || address >= end) {
+      throw new Error('Requested address is out of bounds.');
+    }
+
+    // Check that the requested start is within bounds.
+    // If the requested end is larger than the actual
+    // memory, it will be automatically capped when
+    // requesting the range.
+    if (start < 0 || start > end || start >= this.#memory.length) {
+      throw new Error('Requested range is out of bounds.');
+    }
+
+    const chunkEnd = Math.max(end, start + MEMORY_TRANSFER_MIN_CHUNK_SIZE);
+    const memory = this.#memory.slice(start, chunkEnd);
+
+    this.#inspector.data = {
+      memory,
+      address,
+      memoryOffset: start,
+      outerMemoryLength: this.#memory.length,
+      hideValueInspector: true,
+    };
+  }
+}
+
+/**
+ * Adapter for the linear memory inspector that can show a {@link StreamingContentData}.
+ */
+export class StreamingContentHexView extends LinearMemoryInspectorView {
+  readonly #streamingContentData: TextUtils.StreamingContentData.StreamingContentData;
+
+  constructor(streamingContentData: TextUtils.StreamingContentData.StreamingContentData) {
+    super();
+    this.#streamingContentData = streamingContentData;
+  }
+
+  override wasShown(): void {
+    this.#updateMemoryFromContentData();
+    this.#streamingContentData.addEventListener(
+        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.#updateMemoryFromContentData, this);
+
+    // No need to call super.wasShown() as we call super.refreshData() ourselves.
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#streamingContentData.removeEventListener(
+        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.#updateMemoryFromContentData, this);
+  }
+
+  #updateMemoryFromContentData(): void {
+    const binaryString = window.atob(this.#streamingContentData.content().base64);
+    const memory = Uint8Array.from(binaryString, m => m.codePointAt(0) as number);
+    this.setMemory(memory);
+  }
+}

package/front_end/ui/legacy/components/source_frame/source_frame.ts

@@ -9,6 +9,7 @@ import * as JSONView from './JSONView.js';
 import * as PreviewFactory from './PreviewFactory.js';
 import * as ResourceSourceFrame from './ResourceSourceFrame.js';
 import * as SourceFrame from './SourceFrame.js';
+import * as StreamingContentHexView from './StreamingContentHexView.js';
 import * as XMLView from './XMLView.js';
 
 export {
@@ -19,5 +20,6 @@ export {
   PreviewFactory,
   ResourceSourceFrame,
   SourceFrame,
+  StreamingContentHexView,
   XMLView,
 };

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/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,51 @@ 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,
+  &:disabled:hover,
+  &:disabled:active,
+  &:disabled:hover:active {
+    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 +372,6 @@ select.toolbar-item:focus-visible > * {
   border-radius: 7px;
 }
 
-select.toolbar-item:not(.toolbar-has-dropdown):disabled {
-  opacity: 50%;
-}
 /* Input */
 
 .toolbar-input {
@@ -400,6 +416,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;
 }