chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -89,6 +89,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.muteOnWindowChanged = false;
 
     this.#dimHighlightSVG = UI.UIUtils.createSVGChild(this.element, 'svg', 'timeline-minimap-dim-highlight-svg hidden');
+    this.#initializeDimHighlightSVG();
   }
 
   enableCreateBreadcrumbsButton(): void {
@@ -108,6 +109,19 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.cursorPosition = mouseEvent.offsetX + offsetLeftRelativeToCursorArea;
     this.cursorElement.style.left = this.cursorPosition + 'px';
     this.cursorElement.style.visibility = 'visible';
+
+    // Dispatch an event to notify the flame chart to show a timestamp marker for the current timestamp if it's visible
+    // in the flame chart.
+    const timeInMilliSeconds = this.overviewCalculator.positionToTime(this.cursorPosition);
+    const timeWindow = this.overviewGrid.calculateWindowValue();
+    if (Trace.Types.Timing.MilliSeconds(timeWindow.rawStartValue) <= timeInMilliSeconds &&
+        timeInMilliSeconds <= Trace.Types.Timing.MilliSeconds(timeWindow.rawEndValue)) {
+      const timeInMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(timeInMilliSeconds);
+      this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_MOVE, {timeInMicroSeconds});
+    } else {
+      this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_LEAVE);
+    }
+
     void this.overviewInfo.setContent(this.buildOverviewInfo());
   }
 
@@ -123,6 +137,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 
   private hideCursor(): void {
     this.cursorElement.style.visibility = 'hidden';
+    this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_LEAVE);
     this.overviewInfo.hide();
   }
 
@@ -181,7 +196,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     });
   }
 
-  private update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
+  override update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
     if (!this.isShowing()) {
       return;
     }
@@ -290,55 +305,95 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     const left = haveRecords && this.windowStartTime ? Math.min((this.windowStartTime - absoluteMin) / timeSpan, 1) : 0;
     const right = haveRecords && this.windowEndTime < Infinity ? (this.windowEndTime - absoluteMin) / timeSpan : 1;
     this.muteOnWindowChanged = true;
-    this.overviewGrid.setWindow(left, right);
+    this.overviewGrid.setWindowRatio(left, right);
     this.muteOnWindowChanged = false;
   }
 
-  highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds): void {
-    let mask = this.#dimHighlightSVG?.querySelector('mask');
-    if (!mask) {
-      // Set up the desaturation mask
-      const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
-      mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
-      mask.id = 'dim-highlight-cutouts';
-      /* Within the mask...
-          - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
-          - white fill = be 100% desaturated
-          - grey fill  = show at the Lightness level of grayscale/desaturation
-      */
-      const showAllRect = UI.UIUtils.createSVGChild(mask, 'rect');
-      showAllRect.setAttribute('width', '100%');
-      showAllRect.setAttribute('height', '100%');
-      showAllRect.setAttribute('fill', 'hsl(0deg 0% 95%)');
-
-      const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect') as SVGRectElement;
-      desaturateRect.setAttribute('width', '100%');
-      desaturateRect.setAttribute('height', '100%');
-      desaturateRect.setAttribute('fill', '#ffffff');
-      desaturateRect.setAttribute('mask', `url(#${mask.id})`);
-      desaturateRect.style.mixBlendMode = 'saturation';
-
-      const punchRect = UI.UIUtils.createSVGChild(mask, 'rect', 'punch');
-      punchRect.setAttribute('y', '0');
-      punchRect.setAttribute('height', '100%');
-      punchRect.setAttribute('fill', 'black');
-
-      const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
-      const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
-      bracket.setAttribute('fill', bracketColor);
-    }
+  /**
+   * This function will create three rectangles and a polygon, which will be use to highlight the time range.
+   */
+  #initializeDimHighlightSVG(): void {
+    // Set up the desaturation mask
+    const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
+    const mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
+    mask.id = 'dim-highlight-cutouts';
+    /* Within the mask...
+        - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
+        - white fill = be 100% desaturated
+        - grey fill  = show at the Lightness level of grayscale/desaturation
+    */
+
+    // This a rectangle covers the entire SVG and has a light gray fill. This sets the base desaturation level for the
+    // masked area.
+    // The colour here should be fixed because the colour's brightness changes the desaturation level.
+    const showAllRect = UI.UIUtils.createSVGChild(mask, 'rect');
+    showAllRect.setAttribute('width', '100%');
+    showAllRect.setAttribute('height', '100%');
+    showAllRect.setAttribute('fill', 'hsl(0deg 0% 95%)');
+
+    // This rectangle also covers the entire SVG and has a fill with the current background. It is linked to the
+    // `mask` element.
+    // The `mixBlendMode` is set to 'saturation', so this rectangle will completely desaturate the area it covers
+    // within the mask.
+    const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect', 'background') as SVGRectElement;
+    desaturateRect.setAttribute('width', '100%');
+    desaturateRect.setAttribute('height', '100%');
+    desaturateRect.setAttribute('fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
+    desaturateRect.setAttribute('mask', `url(#${mask.id})`);
+    desaturateRect.style.mixBlendMode = 'saturation';
+
+    // This rectangle is positioned at the top of the not-to-desaturate time range, with full height and a black fill.
+    // It will be used to "punch" through the desaturation, revealing the original colours beneath.
+    // The *black* fill on the "punch-out" rectangle is crucial because black is fully transparent in a mask.
+    const punchRect = UI.UIUtils.createSVGChild(mask, 'rect', 'punch');
+    punchRect.setAttribute('y', '0');
+    punchRect.setAttribute('height', '100%');
+    punchRect.setAttribute('fill', 'black');
+
+    // This polygon is for the bracket beyond the not desaturated area.
+    const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
+    const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
+    bracket.setAttribute('fill', bracketColor);
+
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const desaturateRect = this.#dimHighlightSVG.querySelector('rect.background');
+      desaturateRect?.setAttribute('fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
+
+      const bracket = this.#dimHighlightSVG.querySelector('polygon');
+      bracket?.setAttribute(
+          'fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover'));
+    });
+  }
 
+  #addBracket(left: number, right: number): void {
+    const TRIANGLE_SIZE = 5;  // px size of triangles
+    const bracket = this.#dimHighlightSVG.querySelector('polygon');
+    bracket?.setAttribute(
+        'points',
+        `${left},0 ${left},${TRIANGLE_SIZE} ${left + TRIANGLE_SIZE - 1},1 ${right - TRIANGLE_SIZE - 1},1 ${right},${
+            TRIANGLE_SIZE} ${right},0`);
+    bracket?.classList.remove('hidden');
+  }
+
+  #hideBracket(): void {
+    const bracket = this.#dimHighlightSVG.querySelector('polygon');
+    bracket?.classList.add('hidden');
+  }
+
+  highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds, withBracket: boolean): void {
     const left = this.overviewCalculator.computePosition(Trace.Helpers.Timing.microSecondsToMilliseconds(bounds.min));
     const right = this.overviewCalculator.computePosition(Trace.Helpers.Timing.microSecondsToMilliseconds(bounds.max));
 
+    // Update the punch out rectangle to the not-to-desaturate time range.
     const punchRect = this.#dimHighlightSVG.querySelector('rect.punch');
     punchRect?.setAttribute('x', left.toString());
     punchRect?.setAttribute('width', (right - left).toString());
 
-    const size = 5;  // px size of triangles
-    const bracket = this.#dimHighlightSVG.querySelector('polygon');
-    bracket?.setAttribute(
-        'points', `${left},0 ${left},${size} ${left + size - 1},1 ${right - size - 1},1 ${right},${size} ${right},0`);
+    if (withBracket) {
+      this.#addBracket(left, right);
+    } else {
+      this.#hideBracket();
+    }
 
     this.#dimHighlightSVG.classList.remove('hidden');
   }
@@ -351,7 +406,8 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 export const enum Events {
   OVERVIEW_PANE_WINDOW_CHANGED = 'OverviewPaneWindowChanged',
   OVERVIEW_PANE_BREADCRUMB_ADDED = 'OverviewPaneBreadcrumbAdded',
-  OPEN_SIDEBAR_BUTTON_CLICKED = 'OpenSidebarButtonClicked',
+  OVERVIEW_PANE_MOUSE_MOVE = 'OverviewPaneMouseMove',
+  OVERVIEW_PANE_MOUSE_LEAVE = 'OverviewPaneMouseLeave',
 }
 
 export interface OverviewPaneWindowChangedEvent {
@@ -364,12 +420,15 @@ export interface OverviewPaneBreadcrumbAddedEvent {
   endTime: Trace.Types.Timing.MilliSeconds;
 }
 
-export interface OpenSidebarButtonClicked {}
+export interface OverviewPaneMouseMoveEvent {
+  timeInMicroSeconds: Trace.Types.Timing.MicroSeconds;
+}
 
 export type EventTypes = {
   [Events.OVERVIEW_PANE_WINDOW_CHANGED]: OverviewPaneWindowChangedEvent,
   [Events.OVERVIEW_PANE_BREADCRUMB_ADDED]: OverviewPaneBreadcrumbAddedEvent,
-  [Events.OPEN_SIDEBAR_BUTTON_CLICKED]: OpenSidebarButtonClicked,
+  [Events.OVERVIEW_PANE_MOUSE_MOVE]: OverviewPaneMouseMoveEvent,
+  [Events.OVERVIEW_PANE_MOUSE_LEAVE]: void,
 };
 
 export interface TimelineOverview {
@@ -414,7 +473,7 @@ export class TimelineOverviewBase extends UI.Widget.VBox implements TimelineOver
     return this.calculatorInternal;
   }
 
-  update(): void {
+  override update(): void {
     throw new Error('Not implemented');
   }
 

package/front_end/ui/legacy/components/perf_ui/flameChart.css

@@ -7,12 +7,10 @@
 .flame-chart-main-pane {
   overflow: hidden;
 
-  --selected-group-background: hsl(215deg 85% 98%);
   --selected-group-border: hsl(216deg 68% 54%);
 }
 
 :host-context(.theme-with-dark-background) .flame-chart-main-pane {
-  --selected-group-background: hsl(215deg 85% 15%);
   --selected-group-border: hsl(216deg 68% 46%);
 }
 

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -70,19 +70,19 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.flamechartMouseWheelAction),
-  settingName: 'flamechart-mouse-wheel-action',
+  settingName: 'flamechart-selected-navigation',
   settingType: Common.Settings.SettingType.ENUM,
-  defaultValue: 'zoom',
+  defaultValue: 'classic',
   options: [
     {
       title: i18nLazyString(UIStrings.scroll),
       text: i18nLazyString(UIStrings.scroll),
-      value: 'scroll',
+      value: 'modern',
     },
     {
       title: i18nLazyString(UIStrings.zoom),
       text: i18nLazyString(UIStrings.zoom),
-      value: 'zoom',
+      value: 'classic',
     },
   ],
 });

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

@@ -5,6 +5,7 @@
 import * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import {raf} from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 
 import * as SourceFrame from './source_frame.js';
@@ -30,4 +31,52 @@ describeWithEnvironment('BinaryResourceViewFactory', () => {
     assert.strictEqual(
         await getResourceText(factory.createUtf8View()), 'sending this utf-8 string as a binary message...');
   });
+
+  it('returns the right content for the "copy-to-clipboard" getters', async () => {
+    const base64content = new TextUtils.ContentData.ContentData(
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u', true, '');
+    const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
+        TextUtils.StreamingContentData.StreamingContentData.from(base64content),
+        'http://example.com' as Platform.DevToolsPath.UrlString, Common.ResourceType.resourceTypes.WebSocket);
+
+    assert.strictEqual(factory.base64(), 'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u');
+    assert.strictEqual(
+        factory.hex(),
+        '73656e64696e672074686973207574662d3820737472696e6720617320612062696e617279206d6573736167652e2e2e');
+    assert.strictEqual(factory.utf8(), 'sending this utf-8 string as a binary message...');
+  });
+
+  it('produces views for utf8/base64 that update when the StreamingContentData changes', async () => {
+    const base64content = new TextUtils.ContentData.ContentData(
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u', true, '');
+    const streamingContent = TextUtils.StreamingContentData.StreamingContentData.from(base64content);
+    const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
+        streamingContent, 'http://example.com' as Platform.DevToolsPath.UrlString,
+        Common.ResourceType.resourceTypes.WebSocket);
+
+    const utf8View = factory.createUtf8View();
+    utf8View.markAsRoot();
+    utf8View.show(document.body);
+    const base64View = factory.createBase64View();
+    base64View.markAsRoot();
+    base64View.show(document.body);
+
+    await raf();
+    assert.strictEqual(utf8View.textEditor.state.doc.toString(), 'sending this utf-8 string as a binary message...');
+    assert.strictEqual(
+        base64View.textEditor.state.doc.toString(), 'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u');
+
+    streamingContent.addChunk(window.btoa('\nadded another line'));
+
+    await raf();
+    assert.strictEqual(
+        utf8View.textEditor.state.doc.toString(),
+        'sending this utf-8 string as a binary message...\nadded another line');
+    assert.strictEqual(
+        base64View.textEditor.state.doc.toString(),
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4uCmFkZGVkIGFub3RoZXIgbGluZQ==');
+
+    utf8View.detach();
+    base64View.detach();
+  });
 });

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

@@ -13,63 +13,38 @@ export class BinaryResourceViewFactory {
   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(
       content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
       resourceType: Common.ResourceType.ResourceType) {
     this.streamingContent = content;
     this.contentUrl = contentUrl;
     this.resourceType = resourceType;
-    this.arrayPromise = null;
-    this.hexPromise = null;
-    this.utf8Promise = null;
   }
 
-  private async fetchContentAsArray(): Promise<Uint8Array> {
-    if (!this.arrayPromise) {
-      this.arrayPromise = new Promise(async resolve => {
-        const fetchResponse = await fetch('data:;base64,' + this.streamingContent.content().base64);
-        resolve(new Uint8Array(await fetchResponse.arrayBuffer()));
-      });
-    }
-    return await this.arrayPromise;
-  }
-
-  async hex(): Promise<string> {
-    if (!this.hexPromise) {
-      this.hexPromise = new Promise(async resolve => {
-        const content = await this.fetchContentAsArray();
-        const hexString = BinaryResourceViewFactory.uint8ArrayToHexString(content);
-        resolve(hexString);
-      });
-    }
-
-    return this.hexPromise;
+  hex(): string {
+    const binaryString = window.atob(this.base64());
+    const array = Uint8Array.from(binaryString, m => m.codePointAt(0) as number);
+    return BinaryResourceViewFactory.#uint8ArrayToHexString(array);
   }
 
   base64(): string {
     return this.streamingContent.content().base64;
   }
 
-  async utf8(): Promise<string> {
-    if (!this.utf8Promise) {
-      this.utf8Promise = new Promise(async resolve => {
-        const content = await this.fetchContentAsArray();
-        const utf8String = new TextDecoder('utf8').decode(content);
-        resolve(utf8String);
-      });
-    }
-
-    return this.utf8Promise;
+  utf8(): string {
+    return new TextUtils.ContentData.ContentData(this.base64(), /* isBase64 */ true, 'text/plain', 'utf-8').text;
   }
 
   createBase64View(): ResourceSourceFrame {
-    return new ResourceSourceFrame(
+    const resourceFrame = new ResourceSourceFrame(
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(
             this.contentUrl, this.resourceType, this.streamingContent.content().base64),
         this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: true});
+    this.streamingContent.addEventListener(TextUtils.StreamingContentData.Events.CHUNK_ADDED, () => {
+      void resourceFrame.setContent(this.base64());
+    });
+    return resourceFrame;
   }
 
   createHexView(): StreamingContentHexView {
@@ -77,23 +52,25 @@ export class BinaryResourceViewFactory {
   }
 
   createUtf8View(): ResourceSourceFrame {
-    const utf8fn = (): Promise<TextUtils.ContentData.ContentData> =>
-        this.utf8().then(str => new TextUtils.ContentData.ContentData(str, /* isBase64 */ false, 'text/plain'));
-    const utf8ContentProvider =
-        new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, utf8fn);
-    return new ResourceSourceFrame(
-        utf8ContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
+    const resourceFrame = new ResourceSourceFrame(
+        TextUtils.StaticContentProvider.StaticContentProvider.fromString(
+            this.contentUrl, this.resourceType, this.utf8()),
+        this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
+    this.streamingContent.addEventListener(TextUtils.StreamingContentData.Events.CHUNK_ADDED, () => {
+      void resourceFrame.setContent(this.utf8());
+    });
+    return resourceFrame;
   }
 
-  static uint8ArrayToHexString(uint8Array: Uint8Array): string {
+  static #uint8ArrayToHexString(uint8Array: Uint8Array): string {
     let output = '';
     for (let i = 0; i < uint8Array.length; i++) {
-      output += BinaryResourceViewFactory.numberToHex(uint8Array[i], 2);
+      output += BinaryResourceViewFactory.#numberToHex(uint8Array[i], 2);
     }
     return output;
   }
 
-  static numberToHex(number: number, padding: number): string {
+  static #numberToHex(number: number, padding: number): string {
     let hex = number.toString(16);
     while (hex.length < padding) {
       hex = '0' + hex;

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

@@ -168,7 +168,7 @@ export class ImageView extends UI.View.SimpleView {
     this.imagePreviewElement.src = imageSrc;
     this.imagePreviewElement.alt = i18nString(UIStrings.imageFromS, {PH1: this.url});
     const size = content.isTextContent ? content.text.length : Platform.StringUtilities.base64ToSize(content.base64);
-    this.sizeLabel.setText(Platform.NumberUtilities.bytesToString(size));
+    this.sizeLabel.setText(i18n.ByteUtilities.bytesToString(size));
     await loadPromise;
     this.dimensionsLabel.setText(i18nString(
         UIStrings.dD, {PH1: this.imagePreviewElement.naturalWidth, PH2: this.imagePreviewElement.naturalHeight}));

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -100,7 +100,7 @@ export class ImagePreview {
     const content = resource.content ? resource.content : resource.url.split('base64,')[1];
     const contentSize = resource.contentSize();
     const resourceSize = contentSize ? contentSize : Platform.StringUtilities.base64ToSize(content);
-    const resourceSizeText = resourceSize > 0 ? Platform.NumberUtilities.bytesToString(resourceSize) : '';
+    const resourceSizeText = resourceSize > 0 ? i18n.ByteUtilities.bytesToString(resourceSize) : '';
 
     return new Promise(resolve => {
       const imageElement = document.createElement('img');

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -66,6 +66,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding-inline: 2px;
+
+    &.link {
+      overflow: visible;
+
+      & > button.text-button.devtools-link {
+        background-color: inherit;
+      }
+    }
   }
 
   &.width-constrained {

package/front_end/ui/legacy/filter.css

@@ -103,7 +103,7 @@
   position: relative;
 }
 
-.filter-checkbox-filter > [is="dt-checkbox"] {
+.filter-checkbox-filter > dt-checkbox {
   display: flex;
   margin: auto 0;
 }

package/front_end/ui/legacy/inspectorCommon.css

@@ -392,7 +392,7 @@ input::placeholder {
   outline: none;
   padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
   background-image: var(--combobox-dropdown-arrow);
-  background-color: var(--sys-color-surface);
+  background-color: transparent;
   background-position: right center;
   background-repeat: no-repeat;
 }

package/front_end/ui/legacy/listWidget.css

@@ -7,10 +7,13 @@
 .list {
   flex: auto 0 1;
   overflow-y: auto;
-  border: 1px solid var(--sys-color-divider);
   flex-direction: column;
 
   --override-background-list-item-color: hsl(0deg 0% 96%);
+
+  &:has(div) {
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 }
 
 .theme-with-dark-background .list,

package/front_end/ui/legacy/reportView.css

@@ -74,7 +74,7 @@
 .report-row {
   margin: 10px 0 2px 18px;
 
-  &:has(span[is="dt-checkbox"]) {
+  &:has(dt-checkbox) {
     margin-top: 7px;
   }
 }

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

@@ -128,7 +128,8 @@ devtools-issue-counter.main-toolbar {
 .toolbar-has-dropdown {
   justify-content: space-between;
   height: var(--sys-size-9);
-  padding: 0 var(--sys-size-3) 0 var(--sys-size-5);
+  padding: 0 var(--sys-size-2) 0 var(--sys-size-4);
+  margin: 0 var(--sys-size-2);
   gap: var(--sys-size-2);
   border-radius: var(--sys-shape-corner-extra-small);
 
@@ -152,7 +153,7 @@ devtools-issue-counter.main-toolbar {
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   }
 
   &[disabled] {
@@ -160,10 +161,6 @@ devtools-issue-counter.main-toolbar {
     background-color: var(--sys-color-state-disabled-container);
     color: var(--sys-color-state-disabled);
   }
-
-  &:first-child {
-    margin-left: var(--sys-size-2);
-  }
 }
 
 .toolbar-has-dropdown-shrinkable {
@@ -331,10 +328,9 @@ select.toolbar-item {
   height: var(--sys-size-9);
   border-radius: var(--sys-shape-corner-extra-small);
 
-  &:disabled,
-  &:disabled:hover,
-  &:disabled:active,
-  &:disabled:hover:active {
+  &:disabled {
+    opacity: 100%;
+    pointer-events: none;
     background-color: var(--sys-color-state-disabled-container);
     color: var(--sys-color-state-disabled);
 
@@ -389,7 +385,7 @@ select.toolbar-item:focus-visible > * {
     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);
   }
 

package/front_end/ui/legacy/treeoutline.css

@@ -47,7 +47,7 @@
   border-top-color: var(--sys-color-tonal-container);
 }
 
-.tree-outline li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+.tree-outline li:hover:not(:has(dt-checkbox)) .selection {
   display: block;
   background-color: var(--sys-color-state-hover-on-subtle);
 }
@@ -214,6 +214,8 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
   & .tree-variant-navigation li.selected:focus,
   .tree-variant-navigation li.selected:focus devtools-icon {
     color: var(--app-color-navigation-drawer-label-selected);
+
+    --override-file-source-icon-color: var(--app-color-navigation-drawer-label-selected);
   }
 }