chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

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

@@ -45,7 +45,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   private readonly cursorArea: HTMLElement;
   private cursorElement: HTMLElement;
   private overviewControls: TimelineOverview[];
-  private markers: Map<number, Element>;
+  private markers: Map<number, HTMLDivElement>;
   private readonly overviewInfo: OverviewInfo;
   private readonly updateThrottler: Common.Throttler.Throttler;
   private cursorEnabled: boolean;
@@ -209,14 +209,33 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.updateWindow();
   }
 
-  setMarkers(markers: Map<number, Element>): void {
+  setMarkers(markers: Map<number, HTMLDivElement>): void {
     this.markers = markers;
   }
 
-  getMarkers(): Map<number, Element> {
+  getMarkers(): Map<number, HTMLDivElement> {
     return this.markers;
   }
 
+  /**
+   * Dim the time marker outside the highlight time bounds.
+   *
+   * @param highlightBounds the time bounds to highlight, if it is empty, it means to highlight everything.
+   */
+  #dimMarkers(highlightBounds?: Trace.Types.Timing.TraceWindowMicroSeconds): void {
+    for (const time of this.markers.keys()) {
+      const marker = this.markers.get(time);
+      if (!marker) {
+        continue;
+      }
+      const timeInMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(Trace.Types.Timing.MilliSeconds(time));
+      const dim = highlightBounds && !Trace.Helpers.Timing.timestampIsInBounds(highlightBounds, timeInMicroSeconds);
+
+      // `filter: grayscale(1)`  will make the element fully completely grayscale.
+      marker.style.filter = `grayscale(${dim ? 1 : 0})`;
+    }
+  }
+
   private updateMarkers(): void {
     const filteredMarkers = new Map<number, Element>();
     for (const time of this.markers.keys()) {
@@ -383,7 +402,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   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));
-
+    this.#dimMarkers(bounds);
     // Update the punch out rectangle to the not-to-desaturate time range.
     const punchRect = this.#dimHighlightSVG.querySelector('rect.punch');
     punchRect?.setAttribute('x', left.toString());
@@ -399,6 +418,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   clearBoundsHighlight(): void {
+    this.#dimMarkers();
     this.#dimHighlightSVG.classList.add('hidden');
   }
 }
@@ -450,7 +470,7 @@ export class TimelineOverviewBase extends UI.Widget.VBox implements TimelineOver
   constructor() {
     super();
     this.calculatorInternal = null;
-    this.canvas = (this.element.createChild('canvas', 'fill') as HTMLCanvasElement);
+    this.canvas = this.element.createChild('canvas', 'fill');
     this.contextInternal = this.canvas.getContext('2d');
   }
 
@@ -521,12 +541,10 @@ export class OverviewInfo {
     this.glassPane.setMarginBehavior(UI.GlassPane.MarginBehavior.ARROW);
     this.glassPane.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
     this.visible = false;
-    this.element = UI.UIUtils
-                       .createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-                         cssFile: [timelineOverviewInfoStyles],
-                         delegatesFocus: undefined,
-                       })
-                       .createChild('div', 'overview-info');
+    this.element =
+        UI.UIUtils
+            .createShadowRootWithCoreStyles(this.glassPane.contentElement, {cssFile: [timelineOverviewInfoStyles]})
+            .createChild('div', 'overview-info');
   }
 
   async setContent(contentPromise: Promise<DocumentFragment>): Promise<void> {

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

@@ -5,8 +5,7 @@
  */
 
 .film-strip-view {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
   align-content: flex-start;
   min-height: 81px;
 }

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

@@ -48,25 +48,14 @@
   background-color: var(--sys-color-state-ripple-primary);
 }
 
-.flame-chart-search-element {
-  position: absolute;
-  pointer-events: none;
-  outline: 1px solid var(--sys-color-on-surface-subtle);
-  background-color: var(--sys-color-state-ripple-neutral-on-subtle);
-}
-
 .chart-cursor-element {
   position: absolute;
   top: 0;
   bottom: 0;
   z-index: 100;
   width: 2px;
-  background-color: var(--sys-color-primary);
+  background-color: var(--ref-palette-pink50);
   pointer-events: none;
-
-  &.using-new-overlays {
-    background-color: var(--ref-palette-pink50);
-  }
 }
 
 .flame-chart-entry-info:not(:empty) {

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

@@ -48,10 +48,7 @@
 
 .overview-grid-cursor-area {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 20px;
-  bottom: 0;
+  inset: 20px 0 0;
   z-index: 500;
   cursor: text;
 }

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

@@ -11,17 +11,19 @@ import type * as PerfUI from './perf_ui.js';
 
 const UIStrings = {
   /**
-   *@description Title of a setting under the Performance category in Settings
+   *@description Title of a setting under the Performance category in Settings.
+   * Selected navigation allows switching between 2 different sets of shortcuts
+   * and actions (like zoom on scroll or crtl/cmd + scroll) for navigating the performance panel.
    */
-  flamechartMouseWheelAction: 'Flamechart mouse wheel action:',
+  flamechartSelectedNavigation: 'Flamechart navigation:',
   /**
-   *@description The action to scroll
+   *@description Modern navigation option in the Performance Panel.
    */
-  scroll: 'Scroll',
+  modern: 'Modern',
   /**
-   *@description Text for zooming in
+   *@description Classic navigation option in the Performance Panel.
    */
-  zoom: 'Zoom',
+  classic: 'Classic',
   /**
    * @description Title of a setting under the Memory category in Settings. Live memory is memory
    * that is still in-use by the program (not dead). Allocation of live memory is when the program
@@ -69,19 +71,19 @@ UI.ActionRegistration.registerActionExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.flamechartMouseWheelAction),
+  title: i18nLazyString(UIStrings.flamechartSelectedNavigation),
   settingName: 'flamechart-selected-navigation',
   settingType: Common.Settings.SettingType.ENUM,
   defaultValue: 'classic',
   options: [
     {
-      title: i18nLazyString(UIStrings.scroll),
-      text: i18nLazyString(UIStrings.scroll),
+      title: i18nLazyString(UIStrings.modern),
+      text: i18nLazyString(UIStrings.modern),
       value: 'modern',
     },
     {
-      title: i18nLazyString(UIStrings.zoom),
-      text: i18nLazyString(UIStrings.zoom),
+      title: i18nLazyString(UIStrings.classic),
+      text: i18nLazyString(UIStrings.classic),
       value: 'classic',
     },
   ],

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

@@ -42,7 +42,7 @@
 
 .chart-root .slice.selected {
   stroke: var(--sys-color-primary);
-  stroke-opacity: 1;
+  stroke-opacity: 100%;
   stroke-width: 0.04;
   stroke-linecap: round;
   stroke-linejoin: round;

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

@@ -6,11 +6,8 @@
 
 .resources-dividers {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
+  inset: 0;
   z-index: -100;
-  bottom: 0;
 }
 
 .resources-event-dividers {

package/front_end/ui/legacy/components/quick_open/CommandMenu.test.ts

@@ -29,9 +29,9 @@ const warning = () => ('Deprecation Warning' as Platform.UIString.LocalizedStrin
 
 function setupElements() {
   const toplevel = document.createElement('div');
-  const container = toplevel.createChild('div') as HTMLDivElement;
-  const title = container.createChild('div') as HTMLDivElement;
-  const subtitle = container.createChild('div') as HTMLDivElement;
+  const container = toplevel.createChild('div');
+  const title = container.createChild('div');
+  const subtitle = container.createChild('div');
   return {toplevel, container, title, subtitle};
 }
 

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -334,13 +334,13 @@ export class CommandMenuProvider extends Provider {
 
     const deprecationWarning = command.deprecationWarning;
     if (deprecationWarning) {
-      const deprecatedTagElement = (titleElement.parentElement?.createChild('span', 'deprecated-tag') as HTMLElement);
+      const deprecatedTagElement = titleElement.parentElement?.createChild('span', 'deprecated-tag');
       if (deprecatedTagElement) {
         deprecatedTagElement.textContent = i18nString(UIStrings.deprecated);
         deprecatedTagElement.title = deprecationWarning;
       }
     }
-    const tagElement = (titleElement.parentElement?.parentElement?.createChild('span', 'tag') as HTMLElement);
+    const tagElement = titleElement.parentElement?.parentElement?.createChild('span', 'tag');
     if (!tagElement) {
       return;
     }

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -534,7 +534,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     let handled = false;
     switch (keyboardEvent.key) {
       case Platform.KeyboardUtilities.ENTER_KEY:
-        this.onEnter(keyboardEvent);
+        if (!keyboardEvent.isComposing) {  // Ignore ENTER to confirm selection in an IME
+          this.onEnter(keyboardEvent);
+        }
         return;
       case Platform.KeyboardUtilities.TAB_KEY:
         if (keyboardEvent.shiftKey) {

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -53,8 +53,7 @@ devtools-text-prompt {
 
 .filtered-list-widget .vbox > div.container {
   flex: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 
 .filtered-list-widget-item-wrapper {

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

@@ -107,7 +107,7 @@ export class FontView extends UI.View.SimpleView {
     if (!this.fontPreviewElement) {
       return;
     }
-    UI.ARIAUtils.markAsHidden(this.fontPreviewElement);
+    UI.ARIAUtils.setHidden(this.fontPreviewElement, true);
     this.fontPreviewElement.style.overflow = 'hidden';
     this.fontPreviewElement.style.setProperty('font-family', uniqueFontName);
     this.fontPreviewElement.style.setProperty('visibility', 'hidden');

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

@@ -122,7 +122,7 @@ export class ImageView extends UI.View.SimpleView {
     this.aspectRatioLabel = new UI.Toolbar.ToolbarText();
     this.mimeTypeLabel = new UI.Toolbar.ToolbarText(mimeType);
     this.container = this.element.createChild('div', 'image');
-    this.imagePreviewElement = (this.container.createChild('img', 'resource-image-view') as HTMLImageElement);
+    this.imagePreviewElement = this.container.createChild('img', 'resource-image-view');
     this.imagePreviewElement.addEventListener('contextmenu', this.contextMenu.bind(this), true);
   }
 

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

@@ -33,7 +33,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as FormatterActions from '../../../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FormatterActions from '../../../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line rulesdir/es-modules-import
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 

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

@@ -1062,13 +1062,11 @@ export class SelfXssWarningDialog {
     dialog.setMaxContentSize(new UI.Geometry.Size(504, 340));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: selfXssDialogStyles, delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: selfXssDialogStyles});
     const content = shadowRoot.createChild('div', 'widget');
 
     const result = await new Promise<boolean>(resolve => {
-      const closeButton =
-          content.createChild('div', 'dialog-close-button', 'dt-close-button') as UI.UIUtils.DevToolsCloseButton;
+      const closeButton = content.createChild('dt-close-button', 'dialog-close-button');
       closeButton.setTabbable(true);
       self.onInvokeElement(closeButton, event => {
         dialog.hide();

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

@@ -76,6 +76,7 @@ export class ImagePreview {
         precomputedFeatures: (PrecomputedFeatures|undefined),
         imageAltText: (string|undefined),
         align: Align,
+        hideFileData?: boolean,
       }|undefined = {precomputedFeatures: undefined, imageAltText: undefined, align: Align.CENTER}):
       Promise<Element|null> {
     const {precomputedFeatures, imageAltText, align} = options;
@@ -118,10 +119,10 @@ export class ImagePreview {
         const container = shadowRoot.createChild('table');
         container.className = 'image-preview-container';
 
-        const imageRow = (container.createChild('tr').createChild('td', 'image-container') as HTMLTableDataCellElement);
+        const imageRow = container.createChild('tr').createChild('td', 'image-container');
         imageRow.colSpan = 2;
 
-        const link = (imageRow.createChild('div', ` ${align}`) as HTMLLinkElement);
+        const link = imageRow.createChild('div', ` ${align}`);
         link.title = displayName;
         link.appendChild(imageElement);
 
@@ -158,23 +159,25 @@ export class ImagePreview {
           }
         }
 
-        // File size
-        const fileRow = container.createChild('tr', 'row');
-        fileRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.fileSize);
-        fileRow.createChild('td', 'description').textContent = resourceSizeText;
-
-        // Current source
-        const originalRow = container.createChild('tr', 'row');
-        originalRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.currentSource);
-
-        const sourceText = Platform.StringUtilities.trimMiddle(imageURL, 100);
-        const sourceLink =
-            (originalRow.createChild('td', 'description description-link').createChild('span', 'source-link') as
-             HTMLLinkElement);
-        sourceLink.textContent = sourceText;
-        sourceLink.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
-        });
+        if (!options.hideFileData) {
+          // File size
+          const fileRow = container.createChild('tr', 'row');
+          fileRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.fileSize);
+          fileRow.createChild('td', 'description').textContent = resourceSizeText;
+
+          // Current source
+          const originalRow = container.createChild('tr', 'row');
+          originalRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.currentSource);
+
+          const sourceText = Platform.StringUtilities.trimMiddle(imageURL, 100);
+          const sourceLink =
+              (originalRow.createChild('td', 'description description-link').createChild('span', 'source-link') as
+               HTMLLinkElement);
+          sourceLink.textContent = sourceText;
+          sourceLink.addEventListener('click', () => {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          });
+        }
         resolve(shadowBoundary);
       }
     });

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

@@ -167,8 +167,7 @@ export function buildStackTracePreviewContents(
   element.classList.add('stack-preview-container');
   element.classList.toggle('width-constrained', options.widthConstrained);
   element.style.display = 'inline-block';
-  const shadowRoot =
-      UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [jsUtilsStyles], delegatesFocus: undefined});
+  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [jsUtilsStyles]});
   const contentElement = shadowRoot.createChild('table', 'stack-preview-container');
   contentElement.classList.toggle('width-constrained', options.widthConstrained);
 
@@ -213,7 +212,7 @@ function renderStackTraceTable(
   tableSection = container.createChild('tfoot');
   const showAllRow = tableSection.createChild('tr', 'show-all-link');
   showAllRow.createChild('td');
-  const cell = showAllRow.createChild('td') as HTMLTableCellElement;
+  const cell = showAllRow.createChild('td');
   cell.colSpan = 4;
   const showAllLink = cell.createChild('span', 'link');
   // Don't directly put the text of the link in the DOM, as it will likely be
@@ -228,7 +227,7 @@ function renderStackTraceTable(
   }, false);
   const showLessRow = tableSection.createChild('tr', 'show-less-link');
   showLessRow.createChild('td');
-  const showLesscell = showLessRow.createChild('td') as HTMLTableCellElement;
+  const showLesscell = showLessRow.createChild('td');
   showLesscell.colSpan = 4;
   const showLessLink = showLesscell.createChild('span', 'link');
   showLessLink.createChild('span', 'css-inserted-text')

package/front_end/ui/legacy/components/utils/Linkifier.test.ts

@@ -128,6 +128,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,
@@ -165,6 +166,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,
@@ -193,6 +195,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,
@@ -243,6 +246,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,

package/front_end/ui/legacy/dropTarget.css

@@ -6,10 +6,7 @@
 
 :host {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   display: flex;
   background-color: var(--color-background-opacity-80);
   z-index: 1000;

package/front_end/ui/legacy/glassPane.css

@@ -6,10 +6,7 @@
 
 :host {
   position: absolute !important; /* stylelint-disable-line declaration-no-important */
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: hidden;
   contain: strict;
   background-color: transparent;
@@ -35,6 +32,7 @@
 }
 
 .arrow {
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-popoverArrows);
   width: 19px;
   height: 19px;

package/front_end/ui/legacy/inspectorCommon.css

@@ -16,6 +16,8 @@
 :root {
   height: 100%;
   overflow: hidden;
+  /* stylelint-disable-next-line property-no-unknown */
+  interpolate-size: allow-keywords;
   /**
    * NOTE: please don't add to these colours!
    * We are migrating to a new set of theme colors (see below for details) and over time these colors will be deprecated / removed.
@@ -170,10 +172,7 @@ a img {
 
 .fill {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 iframe.fill {
@@ -226,10 +225,7 @@ iframe.widget {
   position: absolute;
   width: 100%;
   height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 .hidden {
@@ -337,15 +333,90 @@ input::placeholder {
     border-color: var(--sys-color-error);
   }
 
-  &:not(.error-input):not(:invalid):focus {
+  &:not(.error-input, :invalid):focus {
     border-color: var(--sys-color-state-focus-ring);
   }
 
-  &:not(.error-input):not(:invalid):hover:not(:focus) {
+  &:not(.error-input, :invalid):hover:not(:focus) {
     background: var(--sys-color-state-hover-on-subtle);
   }
 }
 
+/* Radio inputs */
+input[type="radio"] {
+  height: 17px;
+  width: 17px;
+  min-width: 17px;
+  border-radius: 8px;
+  vertical-align: sub;
+  margin: 0 5px 5px 0;
+  accent-color: var(--sys-color-primary-bright);
+  color: var(--sys-color-on-primary);
+
+  &:focus {
+    box-shadow: var(--legacy-focus-ring-active-shadow);
+  }
+}
+
+@media (forced-colors: active) {
+  input[type="radio"] {
+    --gradient-start: ButtonFace;
+    --gradient-end: ButtonFace;
+
+    &:checked {
+      --gradient-start: Highlight;
+      --gradient-end: Highlight;
+    }
+  }
+}
+
+/* Range inputs */
+input[type="range"] {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  height: 10px;
+  width: 88px;
+  outline: none;
+  background: none;
+}
+
+input[type="range"]::-webkit-slider-thumb,
+.-theme-preserve {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 12px;
+  height: 12px;
+  margin-top: -5px;
+  border-radius: 50%;
+  background-color: var(--sys-color-primary);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--sys-color-surface-variant);
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px var(--sys-color-inverse-primary);
+}
+
+input[type="range"]:disabled::-webkit-slider-thumb {
+  background-color: var(--sys-color-state-disabled);
+}
+
+@media (forced-colors: active) {
+  input[type="range"] {
+    forced-color-adjust: none;
+  }
+}
+
 .highlighted-search-result.current-search-result {
   /* Note: this value is used in light & dark mode */
   --override-current-search-result-background-color: rgb(255 127 0 / 80%);
@@ -480,7 +551,7 @@ input::placeholder {
   white-space: nowrap;
 }
 
-span[is="dt-icon-label"] {
+dt-icon-label {
   flex: none;
 }
 
@@ -497,10 +568,7 @@ span[is="dt-icon-label"] {
   text-align: center;
   padding: 20px;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   font-size: 13px;
   overflow: auto;
   z-index: 500;
@@ -564,7 +632,8 @@ span[is="dt-icon-label"] {
 }
 
 ::selection {
-  background-color: var(--sys-color-tonal-container);
+  background-color: var(--sys-color-state-text-highlight);
+  color: var(--sys-color-state-on-text-highlight);
 }
 
 button.link {
@@ -662,10 +731,7 @@ input.custom-search-input::-webkit-search-cancel-button:hover {
   display: flex;
   overflow: hidden;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 0;
   background-color: var(--sys-color-cdt-base-container);
 }

package/front_end/ui/legacy/inspectorViewTabbedPane.css

@@ -5,28 +5,9 @@
  */
 
 .tabbed-pane-header-tab {
-  height: 26px;
-  margin: 0;
-  border: none;
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-
-  &.selected {
-    border-width: 0 2px;
-  }
-
   & > .tabbed-pane-header-tab-icon > devtools-icon {
     width: 14px;
     height: 14px;
     color: var(--icon-warning);
   }
 }
-
-.tabbed-pane-header-contents {
-  margin-left: 0;
-  min-width: min-content;
-}
-
-.tabbed-pane-left-toolbar {
-  margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
-}