chrome-devtools-frontend 1.0.956401 → 1.0.957495

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/i18n/locales/en-US.json

@@ -2171,6 +2171,12 @@
   "panels/application/AppManifestView.ts | couldNotDownloadARequiredIcon": {
     "message": "Could not download a required icon from the manifest"
   },
+  "panels/application/AppManifestView.ts | darkBackgroundColor": {
+    "message": "Dark background color"
+  },
+  "panels/application/AppManifestView.ts | darkThemeColor": {
+    "message": "Dark theme color"
+  },
   "panels/application/AppManifestView.ts | description": {
     "message": "Description"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -2171,6 +2171,12 @@
   "panels/application/AppManifestView.ts | couldNotDownloadARequiredIcon": {
     "message": "Ĉóûĺd̂ ńôt́ d̂óŵńl̂óâd́ â ŕêq́ûír̂éd̂ íĉón̂ f́r̂óm̂ t́ĥé m̂án̂íf̂éŝt́"
   },
+  "panels/application/AppManifestView.ts | darkBackgroundColor": {
+    "message": "D̂ár̂ḱ b̂áĉḱĝŕôún̂d́ ĉól̂ór̂"
+  },
+  "panels/application/AppManifestView.ts | darkThemeColor": {
+    "message": "D̂ár̂ḱ t̂h́êḿê ćôĺôŕ"
+  },
   "panels/application/AppManifestView.ts | description": {
     "message": "D̂éŝćr̂íp̂t́îón̂"
   },

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/application/AppManifestView.ts

@@ -102,6 +102,14 @@ const UIStrings = {
   */
   backgroundColor: 'Background color',
   /**
+  *@description Text in App Manifest View of the Application panel
+  */
+  darkThemeColor: 'Dark theme color',
+  /**
+  *@description Text in App Manifest View of the Application panel
+  */
+  darkBackgroundColor: 'Dark background color',
+  /**
   *@description Text for the orientation of something
   */
   orientation: 'Orientation',
@@ -403,6 +411,10 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
   private readonly startURLField: HTMLElement;
   private readonly themeColorSwatch: InlineEditor.ColorSwatch.ColorSwatch;
   private readonly backgroundColorSwatch: InlineEditor.ColorSwatch.ColorSwatch;
+  private readonly darkThemeColorField: HTMLElement;
+  private readonly darkThemeColorSwatch: InlineEditor.ColorSwatch.ColorSwatch;
+  private readonly darkBackgroundColorField: HTMLElement;
+  private readonly darkBackgroundColorSwatch: InlineEditor.ColorSwatch.ColorSwatch;
   private orientationField: HTMLElement;
   private displayField: HTMLElement;
   private readonly newNoteUrlField: HTMLElement;
@@ -456,6 +468,14 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.backgroundColorSwatch = new InlineEditor.ColorSwatch.ColorSwatch();
     backgroundColorField.appendChild(this.backgroundColorSwatch);
 
+    this.darkThemeColorField = this.presentationSection.appendField(i18nString(UIStrings.darkThemeColor));
+    this.darkThemeColorSwatch = new InlineEditor.ColorSwatch.ColorSwatch();
+    this.darkThemeColorField.appendChild(this.darkThemeColorSwatch);
+
+    this.darkBackgroundColorField = this.presentationSection.appendField(i18nString(UIStrings.darkBackgroundColor));
+    this.darkBackgroundColorSwatch = new InlineEditor.ColorSwatch.ColorSwatch();
+    this.darkBackgroundColorField.appendChild(this.darkBackgroundColorSwatch);
+
     this.orientationField = this.presentationSection.appendField(i18nString(UIStrings.orientation));
     this.displayField = this.presentationSection.appendField(i18nString(UIStrings.display));
 
@@ -634,6 +654,27 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
       this.backgroundColorSwatch.renderColor(backgroundColor, true);
     }
 
+    const userPreferences = parsedManifest['user_preferences'] || {};
+    const colorSchemeDark = userPreferences['color_scheme_dark'] || {};
+    const darkThemeColorString = colorSchemeDark['theme_color'];
+    const hasDarkThemeColor = typeof darkThemeColorString === 'string';
+    this.darkThemeColorField.parentElement?.classList.toggle('hidden', !hasDarkThemeColor);
+    if (hasDarkThemeColor) {
+      const darkThemeColor = Common.Color.Color.parse(darkThemeColorString);
+      if (darkThemeColor) {
+        this.darkThemeColorSwatch.renderColor(darkThemeColor, true);
+      }
+    }
+    const darkBackgroundColorString = colorSchemeDark['background_color'];
+    const hasDarkBackgroundColor = typeof darkBackgroundColorString === 'string';
+    this.darkBackgroundColorField.parentElement?.classList.toggle('hidden', !hasDarkBackgroundColor);
+    if (hasDarkBackgroundColor) {
+      const darkBackgroundColor = Common.Color.Color.parse(darkBackgroundColorString);
+      if (darkBackgroundColor) {
+        this.darkBackgroundColorSwatch.renderColor(darkBackgroundColor, true);
+      }
+    }
+
     this.orientationField.textContent = stringProperty('orientation');
     const displayType = stringProperty('display');
     this.displayField.textContent = displayType;

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/network/NetworkLogViewColumns.ts

@@ -8,6 +8,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import type {NetworkNode} from './NetworkDataGridNode.js';
 import {NetworkRequestNode} from './NetworkDataGridNode.js';
@@ -205,6 +206,10 @@ export class NetworkLogViewColumns {
 
     this.setupDataGrid();
     this.setupWaterfall();
+
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.scheduleRefresh();
+    });
   }
 
   private static convertToDataGridDescriptor(columnConfig: Descriptor): DataGrid.DataGrid.ColumnDescriptor {

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/components/text_editor/theme.ts

@@ -127,6 +127,7 @@ export const editorTheme = CM.EditorView.theme({
 
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
     backgroundColor: 'var(--color-background)',
+    maxHeight: '25em',
     minWidth: '16em',
     '& > li.cm-secondaryCompletion': {
       display: 'flex',

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

@@ -42,7 +42,7 @@ let themeSupportInstance: ThemeSupport;
 const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
 export class ThemeSupport extends EventTarget {
-  private themeNameInternal = 'systemPreferred';
+  private themeNameInternal = 'default';
   private customSheets: Set<string> = new Set();
   private computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
 
@@ -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.957495"
 }

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/third_party/codemirror/README.md

@@ -1,3 +0,0 @@
-Treat `codemirror.css` like a rolled-in upstream dependency. Instead of changing it directly, consider changing `front_end/text_editor/cmdevtools.css` instead.
-
-[Issue #1076825](https://bugs.chromium.org/p/chromium/issues/detail?id=1076825) tracks the effort to use the upstream file more directly.

package/front_end/third_party/codemirror/codemirror.css

@@ -1,283 +0,0 @@
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  position: relative;
-  overflow: hidden;
-  background: var(--color-background);
-}
-
-.CodeMirror-scroll {
-  overflow: scroll !important; /* Things will break if this is overridden */
-  /* 50px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -50px;
-  margin-right: -50px;
-  padding-bottom: 50px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-}
-
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 50px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar,
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-  outline: none;
-}
-
-.CodeMirror-vscrollbar {
-  right: 0;
-  top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.CodeMirror-hscrollbar {
-  bottom: 0;
-  left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-
-.CodeMirror-scrollbar-filler {
-  right: 0;
-  bottom: 0;
-}
-
-.CodeMirror-gutter-filler {
-  left: 0;
-  bottom: 0;
-}
-
-.CodeMirror-gutters {
-  position: absolute;
-  left: 0;
-  top: 0;
-  min-height: 100%;
-  z-index: 3;
-}
-
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  display: inline-block;
-  vertical-align: top;
-  margin-bottom: -50px;
-}
-
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-
-.CodeMirror-gutter-wrapper ::selection {
-  background-color: transparent;
-}
-
-.CodeMirror-gutter-wrapper ::-moz-selection {
-  background-color: transparent;
-}
-
-.CodeMirror-lines {
-  cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
-}
-
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  /* Reset some styles that the rest of the page might have set */
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -moz-border-radius: 0;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-  -webkit-tap-highlight-color: transparent;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: contextual;
-}
-
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-rtl pre {
-  direction: rtl;
-}
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-cursor {
-  position: absolute;
-  pointer-events: none;
-}
-
-.CodeMirror-measure pre {
-  position: static;
-}
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected {
-  --override-cm-selected-background-color: #d9d9d9;
-
-  background: var(--override-cm-selected-background-color);
-}
-
-.-theme-with-dark-background .CodeMirror-selected,
-:host-context(.-theme-with-dark-background) .CodeMirror-selected {
-  --override-cm-selected-background-color: rgb(38 38 38);
-}
-
-.CodeMirror-focused .CodeMirror-selected {
-  --override-cm-selected-background-color: #d7d4f0;
-}
-
-.-theme-with-dark-background .CodeMirror-focused .CodeMirror-selected,
-:host-context(.-theme-with-dark-background) .CodeMirror-focused .CodeMirror-selected {
-  --override-cm-selected-background-color: rgb(18 15 43);
-}
-
-.CodeMirror-crosshair {
-  cursor: crosshair;
-}
-
-.CodeMirror-line {
-  --override-line-selection-background-color: #d7d4f0;
-}
-
-.CodeMirror-line::selection,
-.CodeMirror-line > span::selection,
-.CodeMirror-line > span > span::selection {
-  background:var(--override-line-selection-background-color);
-}
-
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
-  background: var(--override-line-selection-background-color);
-}
-
-.-theme-with-dark-background .CodeMirror-line,
-:host-context(.-theme-with-dark-background) .CodeMirror-line {
-  --override-line-selection-background-color: rgb(18 15 43);
-
-}
-
-.cm-searching {
-  --override-searching-background-color: rgb(255 255 0 / 40%);
-
-  background-color: var(--override-searching-background-color);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border {
-  padding-right: 0.1px;
-}
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack::after {
-  content: "";
-}
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext {
-  background: none;
-}

package/front_end/third_party/codemirror/codemirror.ts

@@ -1,19 +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.
-
-import type * as CodeMirrorLegacy from './codemirror-legacy';
-export {CodeMirrorLegacy};
-
-import './package/lib/codemirror.js';
-import './package/addon/comment/comment.js';
-import './package/addon/edit/closebrackets.js';
-import './package/addon/edit/matchbrackets.js';
-import './package/addon/mode/multiplex.js';
-import './package/addon/mode/overlay.js';
-import './package/addon/mode/simple.js';
-import './package/addon/selection/active-line.js';
-import './package/addon/selection/mark-selection.js';
-import './package/addon/fold/foldcode.js';
-import './package/addon/fold/foldgutter.js';
-import './package/addon/fold/brace-fold.js';

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);
-}