chrome-devtools-frontend 1.0.956060 → 1.0.956975

package/config/gni/devtools_grd_files.gni

@@ -1553,7 +1553,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/inspectorCommon.css.js",
   "front_end/ui/legacy/inspectorCommon.css.legacy.js",
   "front_end/ui/legacy/inspectorSyntaxHighlight.css.legacy.js",
-  "front_end/ui/legacy/inspectorSyntaxHighlightDark.css.legacy.js",
   "front_end/ui/legacy/inspectorViewTabbedPane.css.legacy.js",
   "front_end/ui/legacy/listWidget.css.legacy.js",
   "front_end/ui/legacy/popover.css.legacy.js",
@@ -1578,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

@@ -1190,9 +1190,6 @@
   "entrypoints/main/MainImpl.ts | showConsoleDrawer": {
     "message": "Show console drawer"
   },
-  "entrypoints/main/MainImpl.ts | theSystempreferredColorSchemeHas": {
-    "message": "The system-preferred color scheme has changed. To apply this change to DevTools, reload."
-  },
   "entrypoints/main/MainImpl.ts | undockIntoSeparateWindow": {
     "message": "Undock into separate window"
   },
@@ -2174,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

@@ -1190,9 +1190,6 @@
   "entrypoints/main/MainImpl.ts | showConsoleDrawer": {
     "message": "Ŝh́ôẃ ĉón̂śôĺê d́r̂áŵér̂"
   },
-  "entrypoints/main/MainImpl.ts | theSystempreferredColorSchemeHas": {
-    "message": "T̂h́ê śŷśt̂ém̂-ṕr̂éf̂ér̂ŕêd́ ĉól̂ór̂ śĉh́êḿê h́âś ĉh́âńĝéd̂. T́ô áp̂ṕl̂ý t̂h́îś ĉh́âńĝé t̂ó D̂év̂T́ôól̂ś, r̂él̂óâd́."
-  },
   "entrypoints/main/MainImpl.ts | undockIntoSeparateWindow": {
     "message": "Ûńd̂óĉḱ îńt̂ó ŝép̂ár̂át̂é ŵín̂d́ôẃ"
   },
@@ -2174,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/formatter_worker/FormatterActions.ts

@@ -11,3 +11,13 @@ export const enum FormatterActions {
   EVALUATE_JAVASCRIPT_SUBSTRING = 'evaluatableJavaScriptSubstring',
   ARGUMENTS_LIST = 'argumentsList',
 }
+
+export interface FormatMapping {
+  original: number[];
+  formatted: number[];
+}
+
+export interface FormatResult {
+  content: string;
+  mapping: FormatMapping;
+}

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -30,7 +30,6 @@
 
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
-import type * as Formatter from '../../models/formatter/formatter.js';
 import * as Acorn from '../../third_party/acorn/acorn.js';
 import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
@@ -38,6 +37,7 @@ import {AcornTokenizer, ECMA_VERSION} from './AcornTokenizer.js';
 import {CSSFormatter} from './CSSFormatter.js';
 import {ESTreeWalker} from './ESTreeWalker.js';
 import {FormattedContentBuilder} from './FormattedContentBuilder.js';
+import type {FormatResult} from './FormatterActions.js';
 import {HTMLFormatter} from './HTMLFormatter.js';
 import {IdentityFormatter} from './IdentityFormatter.js';
 import {JavaScriptFormatter} from './JavaScriptFormatter.js';
@@ -179,12 +179,11 @@ export function javaScriptIdentifiers(content: string): {
   return identifiers.map(id => ({name: 'name' in id && id.name || undefined, offset: id.start}));
 }
 
-export function format(
-    mimeType: string, text: string, indentString?: string): Formatter.FormatterWorkerPool.FormatResult {
+export function format(mimeType: string, text: string, indentString?: string): FormatResult {
   // Default to a 4-space indent.
   indentString = indentString || '    ';
 
-  let result: Formatter.FormatterWorkerPool.FormatResult;
+  let result: FormatResult;
   const builder = new FormattedContentBuilder(indentString);
   const lineEndings = Platform.StringUtilities.findLineEndingIndexes(text);
   try {

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

@@ -51,16 +51,12 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.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 {ExecutionContextSelector} from './ExecutionContextSelector.js';
 
 const UIStrings = {
   /**
-  *@description A message to display prompting the user to reload DevTools if the OS color scheme changes.
-  */
-  theSystempreferredColorSchemeHas:
-      'The system-preferred color scheme has changed. To apply this change to DevTools, reload.',
-  /**
   *@description Title of item in main
   */
   customizeAndControlDevtools: 'Customize and control DevTools',
@@ -408,14 +404,26 @@ export class MainImpl {
 
     const defaultThemeSetting = 'systemPreferred';
     const themeSetting = Common.Settings.Settings.instance().createSetting('uiTheme', defaultThemeSetting);
-    UI.UIUtils.initializeUIUtils(document, themeSetting);
-    if (themeSetting.get() === defaultThemeSetting) {
-      const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      darkThemeMediaQuery.addEventListener('change', () => {
-        UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-            i18nString(UIStrings.theSystempreferredColorSchemeHas));
-      });
+    UI.UIUtils.initializeUIUtils(document);
+
+    // Initialize theme support and apply it.
+    if (!ThemeSupport.ThemeSupport.hasInstance()) {
+      ThemeSupport.ThemeSupport.instance({forceNew: true, setting: themeSetting});
     }
+
+    ThemeSupport.ThemeSupport.instance().applyTheme(document);
+
+    const onThemeChange = (): void => {
+      ThemeSupport.ThemeSupport.instance().applyTheme(document);
+    };
+
+    // When the theme changes we instantiate a new theme support and reapply.
+    // Equally if the user has set to match the system and the OS preference changes
+    // we perform the same change.
+    const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkThemeMediaQuery.addEventListener('change', onThemeChange);
+    themeSetting.addChangeListener(onThemeChange);
+
     UI.UIUtils.installComponentRootStyles((document.body as Element));
 
     this.#addMainEventListeners(document);
@@ -798,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/entrypoints/main/main-meta.ts

@@ -588,7 +588,7 @@ Common.Settings.registerSettingExtension({
   settingName: 'uiTheme',
   settingType: Common.Settings.SettingType.ENUM,
   defaultValue: 'systemPreferred',
-  reloadRequired: true,
+  reloadRequired: false,
   options: [
     {
       title: i18nLazyString(UIStrings.switchToSystemPreferredColor),

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/models/formatter/FormatterWorkerPool.ts

@@ -119,9 +119,9 @@ export class FormatterWorkerPool {
     });
   }
 
-  format(mimeType: string, content: string, indentString: string): Promise<FormatResult> {
+  format(mimeType: string, content: string, indentString: string): Promise<FormatterActions.FormatResult> {
     const parameters = {mimeType: mimeType, content: content, indentString: indentString};
-    return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatResult>;
+    return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatterActions.FormatResult>;
   }
 
   javaScriptIdentifiers(content: string): Promise<{
@@ -195,11 +195,6 @@ class Task {
   }
 }
 
-export interface FormatResult {
-  content: string;
-  mapping: FormatMapping;
-}
-
 interface CSSProperty {
   name: string;
   nameRange: TextRange;
@@ -220,11 +215,6 @@ export interface OutlineItem {
   subtitle?: string;
 }
 
-export interface FormatMapping {
-  original: number[];
-  formatted: number[];
-}
-
 export interface CSSStyleRule {
   selectorText: string;
   styleRange: TextRange;

package/front_end/models/formatter/ScriptFormatter.ts

@@ -30,8 +30,8 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import type * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js'; // eslint-disable-line rulesdir/es_modules_import
 
-import type {FormatMapping} from './FormatterWorkerPool.js';
 import {formatterWorkerPool} from './FormatterWorkerPool.js';
 
 function locationToPosition(lineEndings: number[], lineNumber: number, columnNumber: number): number {
@@ -102,9 +102,9 @@ class IdentityFormatterSourceMapping implements FormatterSourceMapping {
 class FormatterSourceMappingImpl implements FormatterSourceMapping {
   private readonly originalLineEndings: number[];
   private readonly formattedLineEndings: number[];
-  private readonly mapping: FormatMapping;
+  private readonly mapping: FormatterActions.FormatMapping;
 
-  constructor(originalLineEndings: number[], formattedLineEndings: number[], mapping: FormatMapping) {
+  constructor(originalLineEndings: number[], formattedLineEndings: number[], mapping: FormatterActions.FormatMapping) {
     this.originalLineEndings = originalLineEndings;
     this.formattedLineEndings = formattedLineEndings;
     this.mapping = mapping;

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/emulation/AdvancedApp.ts

@@ -77,8 +77,8 @@ export class AdvancedApp implements Common.App.App {
   }
 
   deviceModeEmulationFrameLoaded(toolboxDocument: Document): void {
-    UI.UIUtils.initializeUIUtils(
-        toolboxDocument, Common.Settings.Settings.instance().createSetting('uiTheme', 'default'));
+    Common.Settings.Settings.instance().createSetting('uiTheme', 'default');
+    UI.UIUtils.initializeUIUtils(toolboxDocument);
     UI.UIUtils.installComponentRootStyles((toolboxDocument.body as Element));
     UI.ContextMenu.ContextMenu.installHandler(toolboxDocument);
 

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()) {