chrome-devtools-frontend 1.0.956401 → 1.0.956812

package/config/gni/devtools_grd_files.gni

@@ -1577,7 +1577,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/theme_support/theme_support_impl.js",
   "front_end/ui/legacy/toolbar.css.legacy.js",
   "front_end/ui/legacy/treeoutline.css.legacy.js",
-  "front_end/ui/legacy/utils/append-style.js",
   "front_end/ui/legacy/utils/create-shadow-root-with-core-styles.js",
   "front_end/ui/legacy/utils/focus-changed.js",
   "front_end/ui/legacy/utils/inject-core-styles.js",

package/front_end/Images/generate-css-vars.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 const fs = require('fs');
 const path = require('path');
-const [, , targetGenDir, targetName, ...imageSources] = process.argv;
+const [, , buildTimestamp, targetGenDir, targetName, ...imageSources] = process.argv;
 
 /**
  * @param {string} fileName
@@ -18,7 +18,7 @@ function generateCSSVariableDefinition(fileName) {
       fileName}', import.meta.url).toString() + '\\")');`;
 }
 
-const CURRENT_YEAR = new Date().getFullYear();
+const CURRENT_YEAR = new Date(Number(buildTimestamp) * 1000).getFullYear();
 const fileContent = `
 // Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be

package/front_end/core/common/ParsedURL.ts

@@ -29,7 +29,40 @@
  */
 
 import * as Platform from '../platform/platform.js';
-import * as Root from '../root/root.js';
+
+/**
+ * http://tools.ietf.org/html/rfc3986#section-5.2.4
+ */
+export function normalizePath(path: string): string {
+  if (path.indexOf('..') === -1 && path.indexOf('.') === -1) {
+    return path;
+  }
+
+  const normalizedSegments = [];
+  const segments = path.split('/');
+  for (const segment of segments) {
+    if (segment === '.') {
+      continue;
+    } else if (segment === '..') {
+      normalizedSegments.pop();
+    } else if (segment) {
+      normalizedSegments.push(segment);
+    }
+  }
+  let normalizedPath = normalizedSegments.join('/');
+  if (normalizedPath[normalizedPath.length - 1] === '/') {
+    return normalizedPath;
+  }
+  if (path[0] === '/' && normalizedPath) {
+    normalizedPath = '/' + normalizedPath;
+  }
+  if ((path[path.length - 1] === '/') || (segments[segments.length - 1] === '.') ||
+      (segments[segments.length - 1] === '..')) {
+    normalizedPath = normalizedPath + '/';
+  }
+
+  return normalizedPath;
+}
 
 export class ParsedURL {
   isValid: boolean;
@@ -291,7 +324,7 @@ export class ParsedURL {
     if (hrefPath.charAt(0) !== '/') {
       hrefPath = parsedURL.folderPathComponents + '/' + hrefPath;
     }
-    return securityOrigin + Root.Runtime.Runtime.normalizePath(hrefPath) + hrefSuffix;
+    return securityOrigin + normalizePath(hrefPath) + hrefSuffix;
   }
 
   static splitLineAndColumn(string: string): {

package/front_end/core/common/Settings.ts

@@ -36,7 +36,7 @@ import {Format} from './Color.js';
 import {Console} from './Console.js';
 import type {GenericEvents, EventDescriptor, EventTargetEvent} from './EventTarget.js';
 import {ObjectWrapper} from './Object.js';
-import {getLocalizedSettingsCategory, getRegisteredSettings, maybeRemoveSettingExtension, RegExpSettingItem, registerSettingExtension, registerSettingsForTest, resetSettings, SettingCategory, SettingExtensionOption, SettingRegistration, SettingType} from './SettingRegistration.js';
+import {getLocalizedSettingsCategory, getRegisteredSettings, maybeRemoveSettingExtension, type RegExpSettingItem, registerSettingExtension, registerSettingsForTest, resetSettings, SettingCategory, type SettingExtensionOption, type SettingRegistration, SettingType} from './SettingRegistration.js';
 
 let settingsInstance: Settings|undefined;
 

package/front_end/core/host/InspectorFrontendHost.ts

@@ -220,7 +220,8 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
 
   loadNetworkResource(
       url: string, headers: string, streamId: number, callback: (arg0: LoadNetworkResourceResult) => void): void {
-    Root.Runtime.loadResourcePromise(url)
+    fetch(url)
+        .then(result => result.text())
         .then(function(text) {
           resourceLoaderStreamWrite(streamId, text);
           callback({

package/front_end/core/i18n/i18nImpl.ts

@@ -56,11 +56,10 @@ function getLocaleFetchUrl(locale: Intl.UnicodeBCP47LocaleIdentifier): string {
  * fetched locally or remotely.
  */
 export async function fetchAndRegisterLocaleData(locale: Intl.UnicodeBCP47LocaleIdentifier): Promise<void> {
-  const localeDataTextPromise = Root.Runtime.loadResourcePromise(getLocaleFetchUrl(locale));
+  const localeDataTextPromise = fetch(getLocaleFetchUrl(locale)).then(result => result.json());
   const timeoutPromise =
       new Promise((resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
-  const localeDataText = await Promise.race([timeoutPromise, localeDataTextPromise]);
-  const localeData = JSON.parse(localeDataText as string);
+  const localeData = await Promise.race([timeoutPromise, localeDataTextPromise]);
   i18nInstance.registerLocaleData(locale, localeData);
 }
 

package/front_end/core/root/Runtime.ts

@@ -47,40 +47,6 @@ export class Runtime {
     runtimeInstance = undefined;
   }
 
-  /**
-   * http://tools.ietf.org/html/rfc3986#section-5.2.4
-   */
-  static normalizePath(path: string): string {
-    if (path.indexOf('..') === -1 && path.indexOf('.') === -1) {
-      return path;
-    }
-
-    const normalizedSegments = [];
-    const segments = path.split('/');
-    for (const segment of segments) {
-      if (segment === '.') {
-        continue;
-      } else if (segment === '..') {
-        normalizedSegments.pop();
-      } else if (segment) {
-        normalizedSegments.push(segment);
-      }
-    }
-    let normalizedPath = normalizedSegments.join('/');
-    if (normalizedPath[normalizedPath.length - 1] === '/') {
-      return normalizedPath;
-    }
-    if (path[0] === '/' && normalizedPath) {
-      normalizedPath = '/' + normalizedPath;
-    }
-    if ((path[path.length - 1] === '/') || (segments[segments.length - 1] === '.') ||
-        (segments[segments.length - 1] === '..')) {
-      normalizedPath = normalizedPath + '/';
-    }
-
-    return normalizedPath;
-  }
-
   static queryParam(name: string): string|null {
     return queryParamsObject.get(name);
   }
@@ -132,15 +98,6 @@ export class Runtime {
     return true;
   }
 
-  static resolveSourceURL(path: string): string {
-    let sourceURL: string = self.location.href;
-    if (self.location.search) {
-      sourceURL = sourceURL.replace(self.location.search, '');
-    }
-    sourceURL = sourceURL.substring(0, sourceURL.lastIndexOf('/') + 1) + path;
-    return '\n/*# sourceURL=' + sourceURL + ' */';
-  }
-
   loadLegacyModule(modulePath: string): Promise<void> {
     return import(`../../${modulePath}`);
   }
@@ -297,35 +254,6 @@ export class Experiment {
   }
 }
 
-export function loadResourcePromise(url: string): Promise<string> {
-  return new Promise<string>(load);
-
-  function load(fulfill: (arg0: string) => void, reject: (arg0: Error) => void): void {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.onreadystatechange = onreadystatechange;
-
-    function onreadystatechange(this: XMLHttpRequest, _e: Event): void {
-      if (xhr.readyState !== XMLHttpRequest.DONE) {
-        return;
-      }
-
-      const response: string = this.response;
-
-      // DevTools Proxy server can mask 404s as 200s, check the body to be sure
-      const status = /^HTTP\/1.1 404/.test(response) ? 404 : xhr.status;
-
-      if ([0, 200, 304].indexOf(status) === -1)  // Testing harness file:/// results in 0.
-      {
-        reject(new Error('While loading from url ' + url + ' server responded with a status of ' + status));
-      } else {
-        fulfill(response);
-      }
-    }
-    xhr.send(null);
-  }
-}
-
 // This must be constructed after the query parameters have been parsed.
 export const experiments = new ExperimentsSupport();
 

package/front_end/core/root/root-legacy.ts

@@ -20,8 +20,6 @@ Root.Runtime.queryParam = RootModule.Runtime.Runtime.queryParam;
 /** @type {!RootModule.Runtime.Runtime} */
 Root.runtime;
 
-Root.Runtime.loadResourcePromise = RootModule.Runtime.loadResourcePromise;
-
 /** @constructor */
 Root.Runtime.Extension = RootModule.Runtime.Extension;
 

package/front_end/entrypoints/lighthouse_worker/LighthouseService.ts

@@ -87,20 +87,17 @@ async function fetchLocaleData(locales: string[]): Promise<string|void> {
 
   // Try to load the locale data.
   try {
-    let localeDataTextPromise;
     const remoteBase = Root.Runtime.getRemoteBase();
+    let localeUrl: string;
     if (remoteBase && remoteBase.base) {
-      const localeUrl = `${remoteBase.base}third_party/lighthouse/locales/${locale}.json`;
-      localeDataTextPromise = Root.Runtime.loadResourcePromise(localeUrl);
+      localeUrl = `${remoteBase.base}third_party/lighthouse/locales/${locale}.json`;
     } else {
-      const localeUrl = new URL(`../../third_party/lighthouse/locales/${locale}.json`, import.meta.url);
-      localeDataTextPromise = Root.Runtime.loadResourcePromise(localeUrl.toString());
+      localeUrl = new URL(`../../third_party/lighthouse/locales/${locale}.json`, import.meta.url).toString();
     }
 
     const timeoutPromise = new Promise<string>(
         (resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
-    const localeDataText = await Promise.race([timeoutPromise, localeDataTextPromise]);
-    const localeData = JSON.parse(localeDataText);
+    const localeData = await Promise.race([timeoutPromise, fetch(localeUrl).then(result => result.json())]);
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
     self.registerLocaleData(locale, localeData);
     return locale;

package/front_end/entrypoints/main/MainImpl.ts

@@ -806,7 +806,7 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       dockItemElement.classList.add('flex-auto');
       dockItemElement.tabIndex = -1;
       UI.ARIAUtils.setAccessibleName(dockItemElement, UIStrings.dockSide);
-      const titleElement = dockItemElement.createChild('span', 'flex-auto');
+      const titleElement = dockItemElement.createChild('span', 'dockside-title');
       titleElement.textContent = i18nString(UIStrings.dockSide);
       const toggleDockSideShorcuts =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('main.toggle-dock');

package/front_end/models/extensions/ExtensionServer.ts

@@ -952,28 +952,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private expandResourcePath(extensionPath: string, resourcePath: string): string {
-    return extensionPath + this.normalizePath(resourcePath);
-  }
-
-  private normalizePath(path: string): string {
-    const source = path.split('/');
-    const result = [];
-
-    for (let i = 0; i < source.length; ++i) {
-      if (source[i] === '.') {
-        continue;
-      }
-      // Ignore empty path components resulting from //, as well as a leading and traling slashes.
-      if (source[i] === '') {
-        continue;
-      }
-      if (source[i] === '..') {
-        result.pop();
-      } else {
-        result.push(source[i]);
-      }
-    }
-    return '/' + result.join('/');
+    return extensionPath + '/' + Common.ParsedURL.normalizePath(resourcePath);
   }
 
   evaluate(

package/front_end/panels/console/ConsoleSidebar.ts

@@ -178,6 +178,15 @@ export class URLGroupTreeElement extends ConsoleSidebarTreeElement {
   }
 }
 
+const enum GroupName {
+  ConsoleAPI = 'user message',
+  All = 'message',
+  Error = 'error',
+  Warning = 'warning',
+  Info = 'info',
+  Verbose = 'verbose',
+}
+
 /**
  * Maps the GroupName for a filter to the UIString used to render messages.
  * Stored here so we only construct it once at runtime, rather than everytime we
@@ -274,12 +283,3 @@ export class FilterTreeElement extends ConsoleSidebarTreeElement {
     return child;
   }
 }
-
-const enum GroupName {
-  ConsoleAPI = 'user message',
-  All = 'message',
-  Error = 'error',
-  Warning = 'warning',
-  Info = 'info',
-  Verbose = 'verbose',
-}

package/front_end/panels/elements/ElementsPanel.ts

@@ -1369,7 +1369,7 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         treeOutline.duplicateNode(node);
         return true;
       case 'elements.copy-styles':
-        treeOutline.findTreeElement(node)?.copyStyles();
+        void treeOutline.findTreeElement(node)?.copyStyles();
         return true;
       case 'elements.undo':
         void SDK.DOMModel.DOMModelUndoStack.instance().undo();

package/front_end/panels/elements/components/LayoutPane.ts

@@ -8,7 +8,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type {BooleanSetting, EnumSetting, Setting} from './LayoutPaneUtils.js';
-import {LayoutElement} from './LayoutPaneUtils.js';
+import type {LayoutElement} from './LayoutPaneUtils.js';
 
 import type {NodeTextData} from './NodeText.js';
 import {NodeText} from './NodeText.js';

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/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/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/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/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/theme_support/theme_support_impl.ts

@@ -116,11 +116,7 @@ export class ThemeSupport extends EventTarget {
     this.appendStyle(element, inspectorSyntaxHighlightStyles);
   }
 
-  /**
-   * 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);

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.956401"
+  "version": "1.0.956812"
 }

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,

package/front_end/ui/legacy/utils/append-style.ts

@@ -1,9 +0,0 @@
-// Copyright 2019 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.
-
-export function appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
-  const styleElement = document.createElement('style');
-  styleElement.textContent = cssContent;
-  node.appendChild(styleElement);
-}