chrome-devtools-frontend 1.0.955630 → 1.0.956881

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -257,7 +257,8 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
         color: metricInfo.color,
       });
     }
-    const backgroundColor = Common.Color.Color.parse(UI.Utils.getThemeColorValue('--color-background'));
+    const backgroundColor =
+        Common.Color.Color.parse(ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
 
     if (backgroundColor) {
       for (const path of paths.reverse()) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -566,7 +566,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     const enabled = Common.Settings.Settings.instance().moduleSetting('pauseOnExceptionEnabled').get();
     const button = (this.pauseOnExceptionButton as UI.Toolbar.ToolbarToggle);
     button.setToggled(enabled);
-    button.setTitle(enabled ? i18nString(UIStrings.pauseOnExceptions) : i18nString(UIStrings.dontPauseOnExceptions));
+    button.setTitle(enabled ? i18nString(UIStrings.dontPauseOnExceptions) : i18nString(UIStrings.pauseOnExceptions));
     this.debugToolbarDrawer.classList.toggle('expanded', enabled);
   }
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -243,6 +243,25 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.interactionsHeaderLevel2 = this.buildGroupStyle({padding: 2, nestingLevel: 1});
     this.experienceHeader = this.buildGroupStyle({collapsible: false});
 
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const headers = [
+        this.headerLevel1,
+        this.headerLevel2,
+        this.staticHeader,
+        this.framesHeader,
+        this.collapsibleTimingsHeader,
+        this.timingsHeader,
+        this.screenshotsHeader,
+        this.interactionsHeaderLevel1,
+        this.interactionsHeaderLevel2,
+        this.experienceHeader,
+      ];
+      for (const header of headers) {
+        header.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+        header.backgroundColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
+      }
+    });
+
     this.flowEventIndexById = new Map();
   }
 

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -79,6 +79,12 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     this.timeSpan = 0;
     this.requests = [];
     this.maxLevel = 0;
+
+    // In the event of a theme change, these colors must be recalculated.
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.style.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+      this.style.backgroundColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
+    });
   }
 
   setModel(performanceModel: PerformanceModel|null): void {
@@ -194,7 +200,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     const end = Math.max(timeToPixel(endTime), finish);
 
     // Draw waiting time.
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-opacity-80');
+    context.fillStyle = 'hsla(0, 100%, 100%, 0.8)';
     context.fillRect(sendStart + 0.5, barY + 0.5, headersEnd - sendStart - 0.5, barHeight - 2);
     // Clear portions of initial rect to prepare for the ticks.
     context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');

package/front_end/third_party/acorn/acorn.ts

@@ -7,7 +7,7 @@ import * as acorn from './package/dist/acorn.mjs';
 import type * as ESTree from './estree-legacy';
 export {ESTree};
 
-export { Comment, defaultOptions, getLineInfo, isNewLine, lineBreak, lineBreakG, Node, SourceLocation, Token, tokTypes, tokContexts} from './package/dist/acorn.mjs';
+export { type Comment, defaultOptions, getLineInfo, isNewLine, lineBreak, lineBreakG, Node, SourceLocation, Token, tokTypes, tokContexts} from './package/dist/acorn.mjs';
 
 export const Parser = acorn.Parser;
 export const tokenizer = acorn.Parser.tokenizer.bind(acorn.Parser);

package/front_end/ui/legacy/GlassPane.ts

@@ -56,7 +56,6 @@ export class GlassPane {
   }
 
   registerRequiredCSS(cssFile: {cssContent: string}): void {
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.widgetInternal.registerRequiredCSS(cssFile);
   }
 

package/front_end/ui/legacy/ResizerWidget.ts

@@ -38,7 +38,7 @@ export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   addElement(element: HTMLElement): void {
     if (!this.elementsInternal.has(element)) {
       this.elementsInternal.add(element);
-      element.addEventListener('mousedown', this.installDragOnMouseDownBound, false);
+      element.addEventListener('pointerdown', this.installDragOnMouseDownBound, false);
       this.updateElementCursor(element);
     }
   }
@@ -46,7 +46,7 @@ export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   removeElement(element: HTMLElement): void {
     if (this.elementsInternal.has(element)) {
       this.elementsInternal.delete(element);
-      element.removeEventListener('mousedown', this.installDragOnMouseDownBound, false);
+      element.removeEventListener('pointerdown', this.installDragOnMouseDownBound, false);
       element.style.removeProperty('cursor');
     }
   }
@@ -58,8 +58,10 @@ export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   private updateElementCursor(element: HTMLElement): void {
     if (this.isEnabledInternal) {
       element.style.setProperty('cursor', this.cursor());
+      element.style.setProperty('touch-action', 'none');
     } else {
       element.style.removeProperty('cursor');
+      element.style.removeProperty('touch-action');
     }
   }
 

package/front_end/ui/legacy/SoftDropDown.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -48,7 +49,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
 
     this.element = document.createElement('button');
     this.element.classList.add('soft-dropdown');
-    Utils.appendStyle(this.element, softDropDownButtonStyles);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
     const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
     this.element.appendChild(dropdownArrowIcon);

package/front_end/ui/legacy/TextPrompt.ts

@@ -37,7 +37,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import * as Utils from './utils/utils.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 
 import type {SuggestBoxDelegate, Suggestion} from './SuggestBox.js';
 import {SuggestBox} from './SuggestBox.js';
@@ -136,7 +136,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.boundOnMouseWheel = this.onMouseWheel.bind(this);
     this.boundClearAutocomplete = this.clearAutocomplete.bind(this);
     this.proxyElement = element.ownerDocument.createElement('span');
-    Utils.appendStyle(this.proxyElement, textPromptStyles);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.proxyElement, textPromptStyles);
     this.contentElement = this.proxyElement.createChild('div', 'text-prompt-root');
     this.proxyElement.style.display = this.proxyElementDisplay;
     if (element.parentElement) {

package/front_end/ui/legacy/Treeoutline.ts

@@ -37,6 +37,7 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import type {Icon} from './Icon.js';
@@ -400,7 +401,7 @@ export class TreeOutlineInShadow extends TreeOutline {
   }
 
   registerRequiredCSS(cssFile: {cssContent: string}): void {
-    Utils.appendStyle(this.shadowRoot, cssFile);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.shadowRoot, cssFile);
   }
 
   registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
@@ -432,7 +433,6 @@ export class TreeElement {
   private readonly boundOnFocus: () => void;
   private readonly boundOnBlur: () => void;
   readonly listItemNode: HTMLLIElement;
-  readonly contentNode: HTMLElement;
   titleElement: Node;
   titleInternal: string|Node;
   private childrenInternal: TreeElement[]|null;
@@ -459,10 +459,8 @@ export class TreeElement {
     this.boundOnFocus = this.onFocus.bind(this);
     this.boundOnBlur = this.onBlur.bind(this);
     this.listItemNode = document.createElement('li');
-    this.contentNode = this.listItemElement.createChild('div');
-    this.contentNode.classList.add('tree-element-content');
 
-    this.titleElement = this.contentNode.createChild('span', 'tree-element-title');
+    this.titleElement = this.listItemNode.createChild('span', 'tree-element-title');
     treeElementBylistItemNode.set(this.listItemNode, this);
     this.titleInternal = '';
     if (title) {
@@ -732,10 +730,6 @@ export class TreeElement {
     return this.listItemNode;
   }
 
-  get contentElement(): HTMLElement {
-    return this.contentNode;
-  }
-
   get childrenListElement(): HTMLOListElement {
     return this.childrenListNode;
   }
@@ -758,13 +752,13 @@ export class TreeElement {
       this.tooltip = '';
     }
 
-    this.contentNode.removeChildren();
+    this.listItemNode.removeChildren();
     if (this.leadingIconsElement) {
-      this.contentNode.appendChild(this.leadingIconsElement);
+      this.listItemNode.appendChild(this.leadingIconsElement);
     }
-    this.contentNode.appendChild(this.titleElement);
+    this.listItemNode.appendChild(this.titleElement);
     if (this.trailingIconsElement) {
-      this.contentNode.appendChild(this.trailingIconsElement);
+      this.listItemNode.appendChild(this.trailingIconsElement);
     }
     this.ensureSelection();
   }
@@ -794,7 +788,7 @@ export class TreeElement {
       this.leadingIconsElement = document.createElement('div');
       this.leadingIconsElement.classList.add('leading-icons');
       this.leadingIconsElement.classList.add('icons-container');
-      this.contentNode.insertBefore(this.leadingIconsElement, this.titleElement);
+      this.listItemNode.insertBefore(this.leadingIconsElement, this.titleElement);
       this.ensureSelection();
     }
     this.leadingIconsElement.removeChildren();
@@ -811,7 +805,7 @@ export class TreeElement {
       this.trailingIconsElement = document.createElement('div');
       this.trailingIconsElement.classList.add('trailing-icons');
       this.trailingIconsElement.classList.add('icons-container');
-      this.contentNode.appendChild(this.trailingIconsElement);
+      this.listItemNode.appendChild(this.trailingIconsElement);
       this.ensureSelection();
     }
     this.trailingIconsElement.removeChildren();

package/front_end/ui/legacy/UIUtils.ts

@@ -33,7 +33,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Common from '../../core/common/common.js';
 import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -46,7 +45,6 @@ import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
-import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import type {ToolbarButton} from './Toolbar.js';
@@ -141,9 +139,9 @@ export function installDragHandle(
   }
 
   let startTimer: number|null;
-  element.addEventListener('mousedown', onMouseDown, false);
+  element.addEventListener('pointerdown', onMouseDown, false);
   if (startDelay) {
-    element.addEventListener('mouseup', onMouseUp, false);
+    element.addEventListener('pointerup', onMouseUp, false);
   }
   if (hoverCursor !== null) {
     (element as HTMLElement).style.cursor = hoverCursor || cursor || '';
@@ -233,12 +231,12 @@ class DragHandler {
       this.dragEventsTargetDocumentTop = this.dragEventsTargetDocument;
     }
 
-    targetDocument.addEventListener('mousemove', this.elementDragMove, true);
-    targetDocument.addEventListener('mouseup', this.elementDragEnd, true);
+    targetDocument.addEventListener('pointermove', this.elementDragMove, true);
+    targetDocument.addEventListener('pointerup', this.elementDragEnd, true);
     DragHandler.rootForMouseOut &&
-        DragHandler.rootForMouseOut.addEventListener('mouseout', this.mouseOutWhileDragging, {capture: true});
+        DragHandler.rootForMouseOut.addEventListener('pointerout', this.mouseOutWhileDragging, {capture: true});
     if (this.dragEventsTargetDocumentTop && targetDocument !== this.dragEventsTargetDocumentTop) {
-      this.dragEventsTargetDocumentTop.addEventListener('mouseup', this.elementDragEnd, true);
+      this.dragEventsTargetDocumentTop.addEventListener('pointerup', this.elementDragEnd, true);
     }
 
     const targetHtmlElement = (targetElement as HTMLElement);
@@ -264,17 +262,17 @@ class DragHandler {
     if (!DragHandler.rootForMouseOut) {
       return;
     }
-    DragHandler.rootForMouseOut.removeEventListener('mouseout', this.mouseOutWhileDragging, {capture: true});
+    DragHandler.rootForMouseOut.removeEventListener('pointerout', this.mouseOutWhileDragging, {capture: true});
   }
 
   private unregisterDragEvents(): void {
     if (!this.dragEventsTargetDocument) {
       return;
     }
-    this.dragEventsTargetDocument.removeEventListener('mousemove', this.elementDragMove, true);
-    this.dragEventsTargetDocument.removeEventListener('mouseup', this.elementDragEnd, true);
+    this.dragEventsTargetDocument.removeEventListener('pointermove', this.elementDragMove, true);
+    this.dragEventsTargetDocument.removeEventListener('pointerup', this.elementDragEnd, true);
     if (this.dragEventsTargetDocumentTop && this.dragEventsTargetDocument !== this.dragEventsTargetDocumentTop) {
-      this.dragEventsTargetDocumentTop.removeEventListener('mouseup', this.elementDragEnd, true);
+      this.dragEventsTargetDocumentTop.removeEventListener('pointerup', this.elementDragEnd, true);
     }
     delete this.dragEventsTargetDocument;
     delete this.dragEventsTargetDocumentTop;
@@ -993,9 +991,9 @@ export class LongClickController {
 
     this.element.addEventListener('keydown', boundKeyDown, false);
     this.element.addEventListener('keyup', boundKeyUp, false);
-    this.element.addEventListener('mousedown', boundMouseDown, false);
-    this.element.addEventListener('mouseout', boundReset, false);
-    this.element.addEventListener('mouseup', boundMouseUp, false);
+    this.element.addEventListener('pointerdown', boundMouseDown, false);
+    this.element.addEventListener('pointerout', boundReset, false);
+    this.element.addEventListener('pointerup', boundMouseUp, false);
     this.element.addEventListener('click', boundReset, true);
 
     this.longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
@@ -1033,9 +1031,9 @@ export class LongClickController {
     if (!this.longClickData) {
       return;
     }
-    this.element.removeEventListener('mousedown', this.longClickData.mouseDown, false);
-    this.element.removeEventListener('mouseout', this.longClickData.reset, false);
-    this.element.removeEventListener('mouseup', this.longClickData.mouseUp, false);
+    this.element.removeEventListener('poinerdown', this.longClickData.mouseDown, false);
+    this.element.removeEventListener('pointerout', this.longClickData.reset, false);
+    this.element.removeEventListener('pointerup', this.longClickData.mouseUp, false);
     this.element.addEventListener('click', this.longClickData.reset, true);
     delete this.longClickData;
   }
@@ -1043,7 +1041,7 @@ export class LongClickController {
   static readonly TIME_MS = 200;
 }
 
-export function initializeUIUtils(document: Document, themeSetting: Common.Settings.Setting<string>): void {
+export function initializeUIUtils(document: Document): void {
   document.body.classList.toggle('inactive', !document.hasFocus());
   if (document.defaultView) {
     document.defaultView.addEventListener('focus', windowFocused.bind(undefined, document), false);
@@ -1051,11 +1049,6 @@ export function initializeUIUtils(document: Document, themeSetting: Common.Setti
   }
   document.addEventListener('focus', Utils.focusChanged.bind(undefined), true);
 
-  if (!ThemeSupport.ThemeSupport.hasInstance()) {
-    ThemeSupport.ThemeSupport.instance({forceNew: true, setting: themeSetting});
-  }
-  ThemeSupport.ThemeSupport.instance().applyTheme(document);
-
   const body = (document.body as Element);
   GlassPane.setContainer(body);
 }

package/front_end/ui/legacy/ViewManager.ts

@@ -15,7 +15,7 @@ import type {ToolbarItem} from './Toolbar.js';
 import {Toolbar, ToolbarMenuButton} from './Toolbar.js';
 import {createTextChild} from './UIUtils.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
-import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, ViewRegistration} from './ViewRegistration.js';
+import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, type ViewRegistration} from './ViewRegistration.js';
 import type {Widget, WidgetElement} from './Widget.js';
 import {VBox} from './Widget.js';
 import viewContainersStyles from './viewContainers.css.legacy.js';

package/front_end/ui/legacy/Widget.ts

@@ -32,6 +32,7 @@ import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Helpers from '../components/helpers/helpers.js';
 
 import {Constraints, Size} from './Geometry.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 import {XWidget} from './XWidget.js';
 
@@ -460,9 +461,9 @@ export class Widget {
 
   registerRequiredCSS(cssFile: {cssContent: string}): void {
     if (this.isWebComponent) {
-      Utils.appendStyle((this.shadowRoot as DocumentFragment), cssFile);
+      ThemeSupport.ThemeSupport.instance().appendStyle((this.shadowRoot as DocumentFragment), cssFile);
     } else {
-      Utils.appendStyle(this.element, cssFile);
+      ThemeSupport.ThemeSupport.instance().appendStyle(this.element, cssFile);
     }
   }
 

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -267,14 +267,14 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     UI.ARIAUtils.markAsButton(displaySwitcher);
 
     UI.UIUtils.installDragHandle(
-        this.hueElement, this.dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'pointer',
-        'default');
+        this.hueElement, this.dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'ew-resize',
+        'crosshair');
     UI.UIUtils.installDragHandle(
         this.alphaElement, this.dragStart.bind(this, positionAlpha.bind(this)), positionAlpha.bind(this), null,
-        'pointer', 'default');
+        'ew-resize', 'crosshair');
     UI.UIUtils.installDragHandle(
-        this.colorElement, this.dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null,
-        'pointer', 'default');
+        this.colorElement, this.dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null, 'move',
+        'crosshair');
 
     // Color contrast business.
     if (contrastInfo) {

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -25,6 +25,7 @@
   border-radius: 2px 2px 0 0;
   overflow: hidden;
   flex: none;
+  touch-action: none;
 }
 
 .spectrum-dragger,
@@ -37,7 +38,8 @@
   height: 12px;
   width: 12px;
   border: 1px solid var(--color-background);
-  cursor: pointer;
+  cursor: move;
+  z-index: 1;
   position: absolute;
   top: 0;
   left: 0;
@@ -48,7 +50,7 @@
 .spectrum-slider {
   position: absolute;
   top: -1px;
-  cursor: pointer;
+  cursor: ew-resize;
   width: 13px;
   height: 13px;
   border-radius: 13px;
@@ -90,6 +92,7 @@
   width: 130px;
   height: 11px;
   border-radius: 2px;
+  touch-action: none;
 }
 
 .spectrum-hue:focus-visible .spectrum-slider,

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -1465,6 +1465,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
 
     this.positionResizers();
+    this.updateWidths();
     event.preventDefault();
   }
 

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

@@ -126,8 +126,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private lastMouseOffsetX: number;
   private selectedGroup: number;
   private keyboardFocusedGroup: number;
-  private selectedGroupBackroundColor: string;
-  private selectedGroupBorderColor: string;
   private offsetWidth!: number;
   private offsetHeight!: number;
   private dragStartX!: number;
@@ -230,10 +228,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     // Keyboard focused group is used to navigate groups irrespective of whether they are selectable or not
     this.keyboardFocusedGroup = -1;
 
-    this.selectedGroupBackroundColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        Colors.SelectedGroupBackground, ThemeSupport.ThemeSupport.ColorUsage.Background);
-    this.selectedGroupBorderColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        Colors.SelectedGroupBorder, ThemeSupport.ThemeSupport.ColorUsage.Background);
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.scheduleUpdate();
+    });
   }
 
   willHide(): void {
@@ -1140,7 +1137,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       context.save();
       this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
         if (this.isGroupFocused(index)) {
-          context.fillStyle = this.selectedGroupBackroundColor;
+          context.fillStyle =
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
           context.fillRect(0, offset, width, groupHeight - group.style.padding);
         }
       });
@@ -1563,7 +1561,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     const lastGroupOffset = groupOffsets[groupOffsets.length - 1];
-    const colorUsage = ThemeSupport.ThemeSupport.ColorUsage;
 
     context.save();
     context.scale(ratio, ratio);
@@ -1571,7 +1568,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const defaultFont = '11px ' + Host.Platform.fontFamily();
     context.font = defaultFont;
 
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#fff', colorUsage.Background);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
     this.forEachGroupInViewport((offset, index, group) => {
       const paddingHeight = group.style.padding;
       if (paddingHeight < 5) {
@@ -1583,7 +1580,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
     }
 
-    context.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#eee', colorUsage.Background);
+    context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-elevation-1');
     context.beginPath();
     this.forEachGroupInViewport((offset, index, group, isFirst) => {
       if (isFirst || group.style.padding < 4) {
@@ -1622,7 +1619,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
         const width = this.labelWidthForGroup(context, group) + 2;
         if (this.isGroupFocused(index)) {
-          context.fillStyle = this.selectedGroupBackroundColor;
+          context.fillStyle =
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
         } else {
           const parsedColor = Common.Color.Color.parse(group.style.backgroundColor);
           if (parsedColor) {
@@ -1641,7 +1639,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     });
     context.restore();
 
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#6e6e6e', colorUsage.Foreground);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-secondary');
     context.beginPath();
     this.forEachGroupInViewport((offset, index, group) => {
       if (this.isGroupCollapsible(index)) {
@@ -1652,7 +1650,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     });
     context.fill();
 
-    context.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#ddd', colorUsage.Background);
+    context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-details-hairline-light');
     context.beginPath();
     context.stroke();
 
@@ -1660,7 +1658,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupFocused(index)) {
         const lineWidth = 2;
         const bracketLength = 10;
-        context.fillStyle = this.selectedGroupBorderColor;
+        context.fillStyle =
+            ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-border', this.contentElement);
         context.fillRect(0, offset - lineWidth, lineWidth, groupHeight - group.style.padding + 2 * lineWidth);
         context.fillRect(0, offset - lineWidth, bracketLength, lineWidth);
         context.fillRect(0, offset + groupHeight - group.style.padding, bracketLength, lineWidth);
@@ -2326,10 +2325,6 @@ export type EventTypes = {
   [Events.EntryHighlighted]: number,
 };
 
-export const Colors = {
-  SelectedGroupBackground: 'hsl(215, 85%, 98%)',
-  SelectedGroupBorder: 'hsl(216, 68%, 54%)',
-};
 export interface Group {
   name: Common.UIString.LocalizedString;
   startLevel: number;

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

@@ -32,6 +32,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
+import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import type {Calculator} from './TimelineGrid.js';
 import {TimelineGrid} from './TimelineGrid.js';
@@ -162,7 +163,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
     this.parentElement.addEventListener('wheel', this.onMouseWheel.bind(this), true);
     this.parentElement.addEventListener('dblclick', this.resizeWindowMaximum.bind(this), true);
-    UI.Utils.appendStyle(this.parentElement, overviewGridStyles);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.parentElement, overviewGridStyles);
 
     this.leftResizeElement = parentElement.createChild('div', 'overview-grid-window-resizer') as HTMLElement;
     UI.UIUtils.installDragHandle(

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

@@ -33,7 +33,6 @@
  */
 
 import * as Host from '../../../../core/host/host.js';
-import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import timelineGridStyles from './timelineGrid.css.legacy.js';
@@ -49,7 +48,7 @@ export class TimelineGrid {
 
   constructor() {
     this.element = document.createElement('div');
-    UI.Utils.appendStyle(this.element, timelineGridStyles);
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.element, timelineGridStyles);
 
     this.dividersElementInternal = this.element.createChild('div', 'resources-dividers');
 

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

@@ -6,6 +6,14 @@
 
 .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%);
 }
 
 .flame-chart-marker-highlight-element {

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

@@ -61,7 +61,6 @@ export class FontView extends UI.View.SimpleView {
   private inResize!: boolean|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.font));
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(fontViewStyles);
     this.element.classList.add('font-view');
     this.url = contentProvider.contentURL();

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

@@ -98,7 +98,6 @@ export class ImageView extends UI.View.SimpleView {
   private cachedContent?: string|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(imageViewStyles);
     this.element.tabIndex = -1;
     this.element.classList.add('image-view');

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

@@ -56,7 +56,6 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
   constructor(parsedJSON: ParsedJSON, startCollapsed?: boolean) {
     super();
     this.initialized = false;
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(jsonViewStyles);
     this.parsedJSON = parsedJSON;
     this.startCollapsed = Boolean(startCollapsed);

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

@@ -84,7 +84,6 @@ export class SearchableContainer extends UI.Widget.VBox {
 
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(resourceSourceFrameStyles);
     const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;