chrome-devtools-frontend 1.0.956060 → 1.0.956975

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/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 {

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';
@@ -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/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

@@ -227,6 +227,10 @@ 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;
+
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.scheduleUpdate();
+    });
   }
 
   willHide(): void {
@@ -1134,7 +1138,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
         if (this.isGroupFocused(index)) {
           context.fillStyle =
-              ThemeSupport.ThemeSupport.instance().getComputedValue('--custom-val-test', this.contentElement);
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
           context.fillRect(0, offset, width, groupHeight - group.style.padding);
         }
       });

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/inspectorSyntaxHighlight.css

@@ -27,18 +27,16 @@
  */
 
 .webkit-css-property {
-  color: var(--webkit-css-property-color, rgb(200 0 0)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, var(--color-syntax-1)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .webkit-html-comment {
   /* Keep this in sync with view-source.css (.webkit-html-comment) */
-  color: rgb(35 110 37); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-comment);
 }
 
 .webkit-html-tag {
-  color: rgb(168 148 166); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-tag);
 }
 
 .webkit-html-tag-name,
@@ -49,16 +47,17 @@
 
 .webkit-html-pseudo-element {
   /* This one is non-standard. */
-  color: rgb(17 85 204); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-pseudo-element);
 }
 
 .webkit-html-js-node,
 .webkit-html-css-node {
+  color: var(--color-text-primary);
   white-space: pre-wrap;
 }
 
 .webkit-html-text-node {
+  color: var(--color-text-primary);
   unicode-bidi: -webkit-isolate;
 }
 
@@ -77,15 +76,13 @@
 
 .webkit-html-attribute-name {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
-  color: var(--color-token-attribute); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-attribute);
   unicode-bidi: -webkit-isolate;
 }
 
 .webkit-html-attribute-value {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
-  color: rgb(26 26 166); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-attribute-value);
   unicode-bidi: -webkit-isolate;
   word-break: break-all;
 }

package/front_end/ui/legacy/softContextMenu.css

@@ -35,12 +35,15 @@
   box-shadow: var(--override-mac-specific-box-shadow);
 }
 
+.dockside-title {
+  padding-right: 13px;
+}
+
 .soft-context-menu-item {
   display: flex;
   width: 100%;
   font-size: 12px;
   padding: 3px 7px 3px 8px;
-  margin: 0 13px 0 0;
   white-space: nowrap;
   align-items: center;
 }

package/front_end/ui/legacy/themeColors.css

@@ -155,6 +155,7 @@
   --color-token-meta: rgb(85 85 85);
   --color-token-deleted: rgb(221 68 68);
   --color-token-inserted: rgb(34 153 34);
+  --color-token-pseudo-element: rgb(17 85 204);
 
   /* Colors used by the code editor */
   --color-secondary-cursor: #c0c0c0;
@@ -295,8 +296,9 @@
   --color-token-comment: rgb(137 137 137);
   --color-token-tag: rgb(93 176 215);
   --color-token-attribute: rgb(155 187 220);
-  --color-token-attribute-value: rgb(1 200 1);
+  --color-token-attribute-value: rgb(242 151 102);
   --color-token-meta: rgb(221 251 85);
+  --color-token-pseudo-element: rgb(237 119 229);
 
   /* Colors used by the code editor */
   --color-secondary-cursor: rgb(63 63 63);

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -36,23 +36,18 @@
 import * as Common from '../../../core/common/common.js';
 
 import inspectorSyntaxHighlightStyles from '../inspectorSyntaxHighlight.css.legacy.js';
-import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.css.legacy.js';
 
 let themeSupportInstance: ThemeSupport;
 
 const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
-export class ThemeSupport {
-  private readonly themeNameInternal: string;
-  private readonly customSheets: Set<string>;
-  private readonly computedRoot: () => symbol | CSSStyleDeclaration;
+export class ThemeSupport extends EventTarget {
+  private themeNameInternal = 'systemPreferred';
+  private customSheets: Set<string> = new Set();
+  private computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
 
-  private constructor(setting: Common.Settings.Setting<string>) {
-    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
-    this.themeNameInternal = setting.get() === 'systemPreferred' ? systemPreferredTheme : setting.get();
-
-    this.customSheets = new Set();
-    this.computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
+  private constructor(private setting: Common.Settings.Setting<string>) {
+    super();
   }
 
   static hasInstance(): boolean {
@@ -119,16 +114,9 @@ export class ThemeSupport {
 
   injectHighlightStyleSheets(element: Element|ShadowRoot): void {
     this.appendStyle(element, inspectorSyntaxHighlightStyles);
-    if (this.themeNameInternal === 'dark') {
-      this.appendStyle(element, inspectorSyntaxHighlightDarkStyles);
-    }
   }
 
-  /**
-   * Note: this is a duplicate of the function in ui/utils. It exists here
-   * so there is no circular dependency between ui/utils and theme_support.
-   */
-  private appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
+  appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
     const styleElement = document.createElement('style');
     styleElement.textContent = cssContent;
     node.appendChild(styleElement);
@@ -142,28 +130,37 @@ export class ThemeSupport {
     }
   }
 
-  isForcedColorsMode(): boolean {
-    return window.matchMedia('(forced-colors: active)').matches;
-  }
-
   addCustomStylesheet(sheetText: string): void {
     this.customSheets.add(sheetText);
   }
 
   applyTheme(document: Document): void {
-    if (!this.hasTheme() || this.isForcedColorsMode() || this.themeNameInternal !== 'dark') {
+    const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
+    if (isForcedColorsMode) {
       return;
     }
 
-    document.documentElement.classList.add('-theme-with-dark-background');
+    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+    this.themeNameInternal = this.setting.get() === 'systemPreferred' ? systemPreferredTheme : this.setting.get();
+
+    const wasDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
+    document.documentElement.classList.toggle('-theme-with-dark-background', this.themeNameInternal === 'dark');
+
+    const isDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
+
+    // In the event the theme changes we need to clear caches and notify subscribers.
+    if (wasDarkThemed !== isDarkThemed) {
+      themeValuesCache.clear();
+      this.customSheets.clear();
+      this.dispatchEvent(new ThemeChangeEvent());
+    }
   }
 }
-export namespace ThemeSupport {
-  // TODO(crbug.com/1167717): Make this a const enum again
-  // eslint-disable-next-line rulesdir/const_enum
-  export enum ColorUsage {
-    Unknown = 0,
-    Foreground = 1,
-    Background = 2,
+
+export class ThemeChangeEvent extends Event {
+  static readonly eventName = 'themechange';
+
+  constructor() {
+    super(ThemeChangeEvent.eventName, {bubbles: true, composed: true});
   }
 }

package/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {appendStyle} from './append-style.js';
+import * as ThemeSupport from '../theme_support/theme_support.js';
+
 import {focusChanged} from './focus-changed.js';
 import {injectCoreStyles} from './inject-core-styles.js';
 
@@ -24,7 +25,7 @@ export function createShadowRootWithCoreStyles(element: Element, options: Option
   injectCoreStyles(shadowRoot);
   if (cssFile) {
     if ('cssContent' in cssFile) {
-      appendStyle(shadowRoot, cssFile);
+      ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cssFile);
     } else {
       shadowRoot.adoptedStyleSheets = cssFile;
     }

package/front_end/ui/legacy/utils/inject-core-styles.ts

@@ -7,39 +7,11 @@ import textButtonStyles from '../textButton.css.legacy.js';
 import * as ThemeSupport from '../theme_support/theme_support.js';
 import themeColorsStyles from '../themeColors.css.legacy.js';
 
-import {appendStyle} from './append-style.js';
-
 export function injectCoreStyles(root: Element|ShadowRoot): void {
-  appendStyle(root, inspectorCommonStyles);
-  appendStyle(root, textButtonStyles);
-  appendStyle(root, themeColorsStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, themeColorsStyles);
 
   ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
   ThemeSupport.ThemeSupport.instance().injectCustomStyleSheets(root);
 }
-
-let bodyComputedStylesCached: CSSStyleDeclaration|null = null;
-export function getThemeColorValue(variableName: string): string {
-  if (!bodyComputedStylesCached) {
-    /**
-     * We are safe to cache this value as we're only using this code to look up
-     * theme variables, and they do not change during runtime. And if the user
-     * swaps from light => dark theme, or vice-versa, DevTools is entirely
-     * reloaded, removing this cache.
-     */
-    bodyComputedStylesCached = window.getComputedStyle(document.body);
-  }
-
-  const colorValue = bodyComputedStylesCached.getPropertyValue(variableName);
-  if (!colorValue) {
-    throw new Error(`Could not find theme color for variable ${variableName}.`);
-  }
-  return colorValue;
-}
-
-export function getCurrentTheme(): 'light'|'dark' {
-  if (document.documentElement.classList.contains('-theme-with-dark-background')) {
-    return 'dark';
-  }
-  return 'light';
-}

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

@@ -4,19 +4,15 @@
 
 /* eslint-disable rulesdir/es_modules_import */
 
-import {appendStyle} from './append-style.js';
 import {createShadowRootWithCoreStyles} from './create-shadow-root-with-core-styles.js';
 import {focusChanged} from './focus-changed.js';
-import {getCurrentTheme, getThemeColorValue, injectCoreStyles} from './inject-core-styles.js';
+import {injectCoreStyles} from './inject-core-styles.js';
 import {measuredScrollbarWidth, resetMeasuredScrollbarWidthForTest} from './measured-scrollbar-width.js';
 import {registerCustomElement} from './register-custom-element.js';
 
 export {
-  appendStyle,
   createShadowRootWithCoreStyles,
   focusChanged,
-  getCurrentTheme,
-  getThemeColorValue,
   injectCoreStyles,
   measuredScrollbarWidth,
   registerCustomElement,

package/front_end/ui/lit-html/lit-html.ts

@@ -4,7 +4,7 @@
 
 import * as LitHtml from '../../third_party/lit-html/lit-html.js';
 import * as Static from './static.js';
-export {Directive, TemplateResult} from '../../third_party/lit-html/lit-html.js';
+export {Directive, type TemplateResult} from '../../third_party/lit-html/lit-html.js';
 
 const {render, svg, Directives, nothing, noChange} = LitHtml;
 const {html, literal, flattenTemplate} = Static;

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.956060"
+  "version": "1.0.956975"
 }

package/scripts/build/generate_css_js_files.js

@@ -4,7 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 const CleanCSS = require('clean-css');
-const [, , isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
+const [, , buildTimestamp, isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
 
 const filenames = files.split(',');
 const configFiles = [];
@@ -37,7 +37,7 @@ export default styles;`;
 
   fs.writeFileSync(
       path.join(targetGenDir, generatedFileName),
-      `// Copyright ${new Date().getFullYear()} The Chromium Authors. All rights reserved.
+      `// Copyright ${new Date(Number(buildTimestamp) * 1000).getFullYear()} 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.
 // IMPORTANT: this file is auto generated. Please do not edit this file.

package/scripts/build/ninja/generate_css.gni

@@ -2,8 +2,10 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("//build/timestamp.gni")
 import("./node.gni")
 import("./vars.gni")
+
 template("generate_css") {
   node_action(target_name) {
     forward_variables_from(invoker, [ "sources" ])
@@ -17,6 +19,7 @@ template("generate_css") {
         [ devtools_location_prepend + "node_modules/clean-css/package.json" ]
 
     args = [
+      build_timestamp,
       "$is_debug",
       "${invoker.legacy}",
       target_name,