chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -7,18 +7,19 @@ import type * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 
 import {ResourceSourceFrame} from './ResourceSourceFrame.js';
+import {StreamingContentHexView} from './StreamingContentHexView.js';
 
 export class BinaryResourceViewFactory {
-  private base64content: string;
+  private streamingContent: TextUtils.StreamingContentData.StreamingContentData;
   private readonly contentUrl: Platform.DevToolsPath.UrlString;
   private readonly resourceType: Common.ResourceType.ResourceType;
   private arrayPromise: Promise<Uint8Array>|null;
   private hexPromise: Promise<string>|null;
   private utf8Promise: Promise<string>|null;
   constructor(
-      base64content: string, contentUrl: Platform.DevToolsPath.UrlString,
+      content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
       resourceType: Common.ResourceType.ResourceType) {
-    this.base64content = base64content;
+    this.streamingContent = content;
     this.contentUrl = contentUrl;
     this.resourceType = resourceType;
     this.arrayPromise = null;
@@ -29,7 +30,7 @@ export class BinaryResourceViewFactory {
   private async fetchContentAsArray(): Promise<Uint8Array> {
     if (!this.arrayPromise) {
       this.arrayPromise = new Promise(async resolve => {
-        const fetchResponse = await fetch('data:;base64,' + this.base64content);
+        const fetchResponse = await fetch('data:;base64,' + this.streamingContent.content().base64);
         resolve(new Uint8Array(await fetchResponse.arrayBuffer()));
       });
     }
@@ -49,7 +50,7 @@ export class BinaryResourceViewFactory {
   }
 
   base64(): string {
-    return this.base64content;
+    return this.streamingContent.content().base64;
   }
 
   async utf8(): Promise<string> {
@@ -67,19 +68,12 @@ export class BinaryResourceViewFactory {
   createBase64View(): ResourceSourceFrame {
     return new ResourceSourceFrame(
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(
-            this.contentUrl, this.resourceType, this.base64content),
+            this.contentUrl, this.resourceType, this.streamingContent.content().base64),
         this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: true});
   }
 
-  createHexView(): ResourceSourceFrame {
-    const hexViewerContentProvider =
-        new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, async () => {
-          const contentAsArray = await this.fetchContentAsArray();
-          const content = BinaryResourceViewFactory.uint8ArrayToHexViewer(contentAsArray);
-          return new TextUtils.ContentData.ContentData(content, /* isBase64 */ false, 'text/plain');
-        });
-    return new ResourceSourceFrame(
-        hexViewerContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: false});
+  createHexView(): StreamingContentHexView {
+    return new StreamingContentHexView(this.streamingContent);
   }
 
   createUtf8View(): ResourceSourceFrame {
@@ -106,49 +100,4 @@ export class BinaryResourceViewFactory {
     }
     return hex;
   }
-
-  static uint8ArrayToHexViewer(array: Uint8Array): string {
-    let output = '';
-    let line = 0;
-
-    while ((line * 16) < array.length) {
-      const lineArray = array.slice(line * 16, (line + 1) * 16);
-
-      // line number
-      output += BinaryResourceViewFactory.numberToHex(line, 8) + ':';
-
-      // hex
-      let hexColsPrinted = 0;
-      for (let i = 0; i < lineArray.length; i++) {
-        if (i % 2 === 0) {
-          output += ' ';
-          hexColsPrinted++;
-        }
-        output += BinaryResourceViewFactory.numberToHex(lineArray[i], 2);
-        hexColsPrinted += 2;
-      }
-
-      // hex-ascii padding
-      while (hexColsPrinted < 42) {
-        output += ' ';
-        hexColsPrinted++;
-      }
-
-      // ascii
-      for (let i = 0; i < lineArray.length; i++) {
-        const code = lineArray[i];
-        if (code >= 32 && code <= 126) {
-          // printable ascii character
-          output += String.fromCharCode(code);
-        } else {
-          // non-printable
-          output += '.';
-        }
-      }
-
-      output += '\n';
-      line++;
-    }
-    return output;
-  }
 }

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

@@ -10,6 +10,7 @@ import {
   dispatchPasteEvent,
 } from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../../../testing/ExpectStubCall.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
 import * as UI from '../../legacy.js';
 
@@ -125,4 +126,21 @@ describeWithEnvironment('SourceFrame', () => {
     assert.isNull(dialogContainer);
     stub.restore();
   });
+
+  it('disassembles wasm', async () => {
+    const contentData = new TextUtils.ContentData.ContentData(
+        'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=', true,
+        'application/wasm');
+    const sourceFrame = new SourceFrame.SourceFrame.SourceFrameImpl(async () => contentData);
+
+    sourceFrame.markAsRoot();
+    const setContentStub = sinon.stub(sourceFrame, 'setContent');
+    sourceFrame.show(document.body);
+    const content = await expectCall(setContentStub);
+
+    assert.strictEqual(
+        content.toString(), '(module\n  (func $bar (;0;) (export \"bar\") (result i32)\n    i32.const 2\n  )\n)');
+
+    sourceFrame.detach();
+  });
 });

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/ui/legacy/components/source_frame/StreamingContentHexView.test.ts

@@ -0,0 +1,69 @@
+// 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 {raf} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+
+import * as SourceFrame from './source_frame.js';
+
+describeWithEnvironment('StreamingContentHexView', () => {
+  function getMemoryViewer(view: SourceFrame.StreamingContentHexView.StreamingContentHexView):
+      LinearMemoryInspectorComponents.LinearMemoryViewer.LinearMemoryViewer {
+    const inspector = view.contentElement.firstChild as HTMLElement;
+    assert.isNotNull(inspector.shadowRoot);
+
+    const viewer = inspector.shadowRoot.querySelector('devtools-linear-memory-inspector-viewer');
+    assert.instanceOf(viewer, LinearMemoryInspectorComponents.LinearMemoryViewer.LinearMemoryViewer);
+    return viewer;
+  }
+
+  function getAllByteCells(view: SourceFrame.StreamingContentHexView.StreamingContentHexView): string {
+    const viewer = getMemoryViewer(view);
+    assert.isNotNull(viewer.shadowRoot);
+
+    const byteCells = [...viewer.shadowRoot.querySelectorAll('.byte-cell')];
+    return byteCells.map(c => c.textContent).join('');
+  }
+
+  function getAllTextCells(view: SourceFrame.StreamingContentHexView.StreamingContentHexView): string {
+    const viewer = getMemoryViewer(view);
+    assert.isNotNull(viewer.shadowRoot);
+
+    const textCells = [...viewer.shadowRoot.querySelectorAll('.text-cell')];
+    return textCells.map(c => c.textContent).join('');
+  }
+
+  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 SourceFrame.StreamingContentHexView.StreamingContentHexView(streamingContentData);
+    view.markAsRoot();
+    view.show(document.body);
+    await raf();
+
+    assert.strictEqual(getAllByteCells(view), '616263');
+    assert.strictEqual(getAllTextCells(view), 'abc');
+
+    view.detach();
+  });
+
+  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 SourceFrame.StreamingContentHexView.StreamingContentHexView(streamingContentData);
+    view.markAsRoot();
+    view.show(document.body);
+    await raf();
+
+    streamingContentData.addChunk(window.btoa('def'));
+    await raf();
+
+    assert.strictEqual(getAllByteCells(view), '616263646566');
+    assert.strictEqual(getAllTextCells(view), 'abcdef');
+
+    view.detach();
+  });
+});

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,32 +382,28 @@ 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);
 }
 
-/* stylelint-disable no-descending-specificity */
 .chrome-select:enabled {
   &:hover {
     background-color: var(--sys-color-state-hover-on-subtle);
@@ -417,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 {