chrome-devtools-frontend 1.0.956812 → 1.0.957983

package/extension-api/ExtensionAPI.d.ts

@@ -69,6 +69,13 @@ export namespace Chrome {
 
       create(title: string, iconPath: string, pagePath: string, callback?: (panel: ExtensionPanel) => unknown): void;
       openResource(url: string, lineNumber: number, columnNumber?: number, callback?: () => unknown): void;
+
+      /**
+       * Fired when the theme changes in DevTools.
+       *
+       * @param callback The handler callback to register and be invoked on theme changes.
+       */
+      setThemeChangeHandler(callback?: (themeName: string) => unknown): void;
     }
 
     export interface Request {

package/front_end/Tests.js

@@ -1572,6 +1572,20 @@
         `console.log(1) //# sourceMappingURL=chrome-extension://${extensionId}/source.map`, () => {});
   };
 
+  TestSuite.prototype.testSourceMapsFromDevtools = function() {
+    this.takeControl();
+    const debuggerModel = self.SDK.targetManager.mainTarget().model(SDK.DebuggerModel);
+    debuggerModel.sourceMapManager().addEventListener(
+        SDK.SourceMapManager.Events.SourceMapWillAttach, this.releaseControl.bind(this));
+
+    this.evaluateInConsole_(
+        'console.log(1) //# sourceMappingURL=devtools://devtools/bundled/devtools_compatibility.js', () => {});
+  };
+
+  TestSuite.prototype.testDoesNotCrashOnSourceMapsFromUnknownScheme = function() {
+    this.evaluateInConsole_('console.log(1) //# sourceMappingURL=invalid-scheme://source.map', () => {});
+  };
+
   /**
    * Returns all loaded non anonymous uiSourceCodes.
    * @return {!Array.<!Workspace.UISourceCode>}

package/front_end/core/common/Debouncer.ts

@@ -9,7 +9,7 @@ export const debounce = function(func: Function, delay: number): Function {
   let timer = 0;
   const debounced = (): void => {
     clearTimeout(timer);
-    timer = setTimeout(() => func(), delay);
+    timer = window.setTimeout(() => func(), delay);
   };
   return debounced;
 };

package/front_end/core/common/Settings.ts

@@ -197,6 +197,7 @@ export class Settings {
 
 export interface SettingsBackingStore {
   register(setting: string): void;
+  get(setting: string): Promise<string>;
   set(setting: string, value: string): void;
   remove(setting: string): void;
   clear(): void;
@@ -205,6 +206,7 @@ export interface SettingsBackingStore {
 export const NOOP_STORAGE: SettingsBackingStore = {
   register: () => {},
   set: () => {},
+  get: () => Promise.resolve(''),
   remove: () => {},
   clear: () => {},
 };
@@ -236,6 +238,17 @@ export class SettingsStorage {
     return this.object[name];
   }
 
+  async forceGet(originalName: string): Promise<string> {
+    const name = this.storagePrefix + originalName;
+    const value = await this.backingStore.get(name);
+    if (value && value !== this.object[name]) {
+      this.set(originalName, value);
+    } else if (!value) {
+      this.remove(originalName);
+    }
+    return value;
+  }
+
   remove(name: string): void {
     name = this.storagePrefix + name;
     delete this.object[name];
@@ -363,6 +376,26 @@ export class Setting<V> {
     return this.#value;
   }
 
+  async forceGet(): Promise<V> {
+    const name = this.name;
+    const oldValue = this.storage.get(name);
+    const value = await this.storage.forceGet(name);
+    this.#value = this.defaultValue;
+    if (value) {
+      try {
+        this.#value = this.#serializer.parse(value);
+      } catch (e) {
+        this.storage.remove(this.name);
+      }
+    }
+
+    if (oldValue !== value) {
+      this.eventSupport.dispatchEventToListeners(this.name, this.#value);
+    }
+
+    return this.#value;
+  }
+
   set(value: V): void {
     this.#hadUserAction = true;
     this.#value = value;

package/front_end/core/host/InspectorFrontendHost.ts

@@ -94,15 +94,15 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   }
 
   setIsDocked(isDocked: boolean, callback: () => void): void {
-    setTimeout(callback, 0);
+    window.setTimeout(callback, 0);
   }
 
   showSurvey(trigger: string, callback: (arg0: ShowSurveyResult) => void): void {
-    setTimeout(() => callback({surveyShown: false}), 0);
+    window.setTimeout(() => callback({surveyShown: false}), 0);
   }
 
   canShowSurvey(trigger: string, callback: (arg0: CanShowSurveyResult) => void): void {
-    setTimeout(() => callback({canShowSurvey: false}), 0);
+    window.setTimeout(() => callback({canShowSurvey: false}), 0);
   }
 
   /**
@@ -260,6 +260,10 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
     callback(prefs);
   }
 
+  getPreference(name: string, callback: (arg0: string) => void): void {
+    callback(window.localStorage[name]);
+  }
+
   setPreference(name: string, value: string): void {
     window.localStorage[name] = value;
   }

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -234,6 +234,8 @@ export interface InspectorFrontendHostAPI {
                    [x: string]: string,
                  }) => void): void;
 
+  getPreference(name: string, callback: (arg0: string) => void): void;
+
   setPreference(name: string, value: string): void;
 
   removePreference(name: string): void;

package/front_end/core/host/UserMetrics.ts

@@ -78,10 +78,10 @@ export class UserMetrics {
     }
 
     this.#firedLaunchHistogram = true;
-    // Use rAF and setTimeout to ensure the marker is fired after layout and rendering.
+    // Use rAF and window.setTimeout to ensure the marker is fired after layout and rendering.
     // This will give the most accurate representation of the tool being ready for a user.
     requestAnimationFrame(() => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         // Mark the load time so that we can pinpoint it more easily in a trace.
         performance.mark(histogramName);
         // If the user has switched panel before we finished loading, ignore the histogram,

package/front_end/core/i18n/i18nImpl.ts

@@ -58,7 +58,7 @@ function getLocaleFetchUrl(locale: Intl.UnicodeBCP47LocaleIdentifier): string {
 export async function fetchAndRegisterLocaleData(locale: Intl.UnicodeBCP47LocaleIdentifier): Promise<void> {
   const localeDataTextPromise = fetch(getLocaleFetchUrl(locale)).then(result => result.json());
   const timeoutPromise =
-      new Promise((resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
+      new Promise((resolve, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
   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/protocol_client/InspectorBackend.ts

@@ -442,7 +442,7 @@ export class SessionRouter {
     }
 
     // Execute all promises.
-    setTimeout(() => {
+    window.setTimeout(() => {
       if (!this.hasOutstandingNonLongPollingRequests()) {
         this.executeAfterPendingDispatches();
       } else {
@@ -467,7 +467,7 @@ export class SessionRouter {
       code: ConnectionClosedErrorCode,
       data: null,
     };
-    setTimeout(() => callback(error, null), 0);
+    window.setTimeout(() => callback(error, null), 0);
   }
 
   static dispatchUnregisterSessionError({callback, method}: CallbackWithDebugInfo): void {
@@ -476,7 +476,7 @@ export class SessionRouter {
       code: ConnectionClosedErrorCode,
       data: null,
     };
-    setTimeout(() => callback(error, null), 0);
+    window.setTimeout(() => callback(error, null), 0);
   }
 }
 

package/front_end/core/sdk/Connections.ts

@@ -189,7 +189,7 @@ export class StubConnection implements ProtocolClient.InspectorBackend.Connectio
   }
 
   sendRawMessage(message: string): void {
-    setTimeout(this.respondWithError.bind(this, message), 0);
+    window.setTimeout(this.respondWithError.bind(this, message), 0);
   }
 
   private respondWithError(message: string): void {

package/front_end/core/sdk/IsolateManager.ts

@@ -126,7 +126,7 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     const pollId = this.#pollId;
     while (pollId === this.#pollId) {
       await Promise.all(Array.from(this.isolates(), isolate => isolate.update()));
-      await new Promise(r => setTimeout(r, PollIntervalMs));
+      await new Promise(r => window.setTimeout(r, PollIntervalMs));
     }
   }
 }

package/front_end/core/sdk/PageResourceLoader.ts

@@ -163,7 +163,8 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
 
   static async withTimeout<T>(promise: Promise<T>, timeout: number): Promise<T> {
     const timeoutPromise = new Promise<T>(
-        (_, reject) => setTimeout(reject, timeout, new Error(i18nString(UIStrings.loadCanceledDueToLoadTimeout))));
+        (_, reject) =>
+            window.setTimeout(reject, timeout, new Error(i18nString(UIStrings.loadCanceledDueToLoadTimeout))));
     return Promise.race([promise, timeoutPromise]);
   }
 
@@ -219,7 +220,8 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       return this.#loadOverride(url);
     }
     const parsedURL = new Common.ParsedURL.ParsedURL(url);
-    const eligibleForLoadFromTarget = getLoadThroughTargetSetting().get() && parsedURL && parsedURL.isHttpOrHttps();
+    const eligibleForLoadFromTarget = getLoadThroughTargetSetting().get() && parsedURL && parsedURL.scheme !== 'file' &&
+        parsedURL.scheme !== 'data' && parsedURL.scheme !== 'devtools';
     Host.userMetrics.developerResourceScheme(this.getDeveloperResourceScheme(parsedURL));
     if (eligibleForLoadFromTarget) {
       try {

package/front_end/devtools_compatibility.js

@@ -542,6 +542,15 @@
       DevToolsAPI.sendMessageToEmbedder('getPreferences', [], /** @type {function(?Object)} */ (callback));
     }
 
+    /**
+     * @override
+     * @param {string} name
+     * @param {function(string)} callback
+     */
+    getPreference(name, callback) {
+      DevToolsAPI.sendMessageToEmbedder('getPreference', [name], /** @type {function(string)} */ (callback));
+    }
+
     /**
      * @override
      * @param {string} name

package/front_end/entrypoints/main/MainImpl.ts

@@ -233,6 +233,11 @@ export class MainImpl {
       register: (name: string) =>
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.registerPreference(name, {synced: false}),
       set: Host.InspectorFrontendHost.InspectorFrontendHostInstance.setPreference,
+      get: (name: string) => {
+        return new Promise(resolve => {
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.getPreference(name, resolve);
+        });
+      },
       remove: Host.InspectorFrontendHost.InspectorFrontendHostInstance.removePreference,
       clear: Host.InspectorFrontendHost.InspectorFrontendHostInstance.clearPreferences,
     };
@@ -571,7 +576,7 @@ export class MainImpl {
     UI.ARIAUtils.alertElementInstance();
 
     // Allow UI cycles to repaint prior to creating connection.
-    setTimeout(this.#initializeTarget.bind(this), 0);
+    window.setTimeout(this.#initializeTarget.bind(this), 0);
     MainImpl.timeEnd('Main._showAppUI');
   }
 
@@ -587,7 +592,7 @@ export class MainImpl {
     // Used for browser tests.
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.readyForTest();
     // Asynchronously run the extensions.
-    setTimeout(this.#lateInitialization.bind(this), 100);
+    window.setTimeout(this.#lateInitialization.bind(this), 100);
     MainImpl.timeEnd('Main._initializeTarget');
   }
 

package/front_end/models/extensions/ExtensionAPI.ts

@@ -55,6 +55,7 @@ export namespace PrivateAPI {
     ResourceContentCommitted = 'resource-content-committed',
     ViewShown = 'view-shown-',
     ViewHidden = 'view-hidden,',
+    ThemeChange = 'host-theme-change',
   }
 
   export const enum Commands {
@@ -75,6 +76,7 @@ export namespace PrivateAPI {
     Reload = 'Reload',
     Subscribe = 'subscribe',
     SetOpenResourceHandler = 'setOpenResourceHandler',
+    SetThemeChangeHandler = 'setThemeChangeHandler',
     SetResourceContent = 'setResourceContent',
     SetSidebarContent = 'setSidebarContent',
     SetSidebarHeight = 'setSidebarHeight',
@@ -151,6 +153,7 @@ export namespace PrivateAPI {
   type SetSidebarPageRequest = {command: Commands.SetSidebarPage, id: string, page: string};
   type OpenResourceRequest = {command: Commands.OpenResource, url: string, lineNumber: number, columnNumber: number};
   type SetOpenResourceHandlerRequest = {command: Commands.SetOpenResourceHandler, handlerPresent: boolean};
+  type SetThemeChangeHandlerRequest = {command: Commands.SetThemeChangeHandler, handlerPresent: boolean};
   type ReloadRequest = {
     command: Commands.Reload,
     options: null|{
@@ -180,9 +183,10 @@ export namespace PrivateAPI {
   export type ServerRequests = RegisterLanguageExtensionPluginRequest|SubscribeRequest|UnsubscribeRequest|
       AddRequestHeadersRequest|ApplyStyleSheetRequest|CreatePanelRequest|ShowPanelRequest|CreateToolbarButtonRequest|
       UpdateButtonRequest|CompleteTraceSessionRequest|CreateSidebarPaneRequest|SetSidebarHeightRequest|
-      SetSidebarContentRequest|SetSidebarPageRequest|OpenResourceRequest|SetOpenResourceHandlerRequest|ReloadRequest|
-      EvaluateOnInspectedPageRequest|GetRequestContentRequest|GetResourceContentRequest|SetResourceContentRequest|
-      AddTraceProviderRequest|ForwardKeyboardEventRequest|GetHARRequest|GetPageResourcesRequest;
+      SetSidebarContentRequest|SetSidebarPageRequest|OpenResourceRequest|SetOpenResourceHandlerRequest|
+      SetThemeChangeHandlerRequest|ReloadRequest|EvaluateOnInspectedPageRequest|GetRequestContentRequest|
+      GetResourceContentRequest|SetResourceContentRequest|AddTraceProviderRequest|ForwardKeyboardEventRequest|
+      GetHARRequest|GetPageResourcesRequest;
   export type ExtensionServerRequestMessage = PrivateAPI.ServerRequests&{requestId?: number};
 
   type AddRawModuleRequest = {
@@ -330,6 +334,7 @@ namespace APIImpl {
     applyStyleSheet(styleSheet: string): void;
     setOpenResourceHandler(callback?: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number) => unknown):
         void;
+    setThemeChangeHandler(callback?: (themeName: string) => unknown): void;
   }
 
   export interface ExtensionView extends PublicAPI.Chrome.DevTools.ExtensionView {
@@ -539,7 +544,8 @@ self.injectedExtensionAPI = function(
     };
   }
 
-  (Panels.prototype as Pick<APIImpl.Panels, 'create'|'setOpenResourceHandler'|'openResource'|'SearchAction'>) = {
+  (Panels.prototype as
+   Pick<APIImpl.Panels, 'create'|'setOpenResourceHandler'|'openResource'|'SearchAction'|'setThemeChangeHandler'>) = {
     create: function(
         title: string, icon: string, page: string,
         callback: (panel: PublicAPI.Chrome.DevTools.ExtensionPanel) => unknown): void {
@@ -577,6 +583,28 @@ self.injectedExtensionAPI = function(
       }
     },
 
+    setThemeChangeHandler: function(callback: (themeName: string) => unknown): void {
+      const hadHandler = extensionServer.hasHandler(PrivateAPI.Events.ThemeChange);
+
+      function callbackWrapper(message: unknown): void {
+        const {themeName} = message as {themeName: string};
+        chrome.devtools.panels.themeName = themeName;
+        callback.call(null, themeName);
+      }
+
+      if (!callback) {
+        extensionServer.unregisterHandler(PrivateAPI.Events.ThemeChange);
+      } else {
+        extensionServer.registerHandler(PrivateAPI.Events.ThemeChange, callbackWrapper);
+      }
+
+      // Only send command if we either removed an existing handler or added handler and had none before.
+      if (hadHandler === !callback) {
+        extensionServer.sendRequest(
+            {command: PrivateAPI.Commands.SetThemeChangeHandler, 'handlerPresent': Boolean(callback)});
+      }
+    },
+
     openResource: function(
         url: string, lineNumber: number, columnNumber?: number, _callback?: (response: unknown) => unknown): void {
       const callbackArg = extractCallbackArgument(arguments);
@@ -1084,7 +1112,7 @@ self.injectedExtensionAPI = function(
     };
     keyboardEventRequestQueue.push(requestPayload);
     if (!forwardTimer) {
-      forwardTimer = setTimeout(forwardEventQueue, 0);
+      forwardTimer = window.setTimeout(forwardEventQueue, 0);
     }
   }
 

package/front_end/models/extensions/ExtensionServer.ts

@@ -89,6 +89,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private extensionsEnabled: boolean;
   private inspectedTabId?: string;
   private readonly extensionAPITestHook?: (server: unknown, api: unknown) => unknown;
+  private themeChangeHandlers: Map<string, MessagePort> = new Map();
 
   private constructor() {
     super();
@@ -124,6 +125,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.registerHandler(PrivateAPI.Commands.GetResourceContent, this.onGetResourceContent.bind(this));
     this.registerHandler(PrivateAPI.Commands.Reload, this.onReload.bind(this));
     this.registerHandler(PrivateAPI.Commands.SetOpenResourceHandler, this.onSetOpenResourceHandler.bind(this));
+    this.registerHandler(PrivateAPI.Commands.SetThemeChangeHandler, this.onSetThemeChangeHandler.bind(this));
     this.registerHandler(PrivateAPI.Commands.SetResourceContent, this.onSetResourceContent.bind(this));
     this.registerHandler(PrivateAPI.Commands.SetSidebarHeight, this.onSetSidebarHeight.bind(this));
     this.registerHandler(PrivateAPI.Commands.SetSidebarContent, this.onSetSidebarContent.bind(this));
@@ -147,6 +149,13 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         Host.InspectorFrontendHostAPI.Events.SetInspectedTabId, this.setInspectedTabId, this);
 
     this.initExtensions();
+
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const themeName = ThemeSupport.ThemeSupport.instance().themeName();
+      for (const port of this.themeChangeHandlers.values()) {
+        port.postMessage({command: PrivateAPI.Events.ThemeChange, themeName});
+      }
+    });
   }
 
   static instance(opts: {
@@ -530,6 +539,25 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return undefined;
   }
 
+  private onSetThemeChangeHandler(message: PrivateAPI.ExtensionServerRequestMessage, port: MessagePort): Record
+      |undefined {
+    if (message.command !== PrivateAPI.Commands.SetThemeChangeHandler) {
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.SetThemeChangeHandler}`);
+    }
+    const extensionOrigin = this.getExtensionOrigin(port);
+    const extension = this.registeredExtensions.get(extensionOrigin);
+    if (!extension) {
+      throw new Error('Received a message from an unregistered extension');
+    }
+
+    if (message.handlerPresent) {
+      this.themeChangeHandlers.set(extensionOrigin, port);
+    } else {
+      this.themeChangeHandlers.delete(extensionOrigin);
+    }
+    return undefined;
+  }
+
   private handleOpenURL(
       port: MessagePort, contentProvider: TextUtils.ContentProvider.ContentProvider, lineNumber: number): void {
     port.postMessage(

package/front_end/models/logs/LogManager.ts

@@ -67,7 +67,7 @@ export class LogManager implements SDK.TargetManager.SDKModelObserver<SDK.LogMod
       if (SDK.TargetManager.TargetManager.instance().targetById(workerId)) {
         return;
       }
-      setTimeout(() => {
+      window.setTimeout(() => {
         if (!SDK.TargetManager.TargetManager.instance().targetById(workerId)) {
           SDK.ConsoleModel.ConsoleModel.instance().addMessage(consoleMessage);
         }

package/front_end/models/persistence/FileSystemWorkspaceBinding.ts

@@ -331,7 +331,7 @@ export class FileSystem extends Workspace.Workspace.ProjectStore implements Work
         this.addFile(filePaths[i]);
       }
       if (to < filePaths.length) {
-        setTimeout(reportFileChunk.bind(this, to), 100);
+        window.setTimeout(reportFileChunk.bind(this, to), 100);
       }
     }
   }

package/front_end/models/workspace/UISourceCode.ts

@@ -277,7 +277,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     await Common.Revealer.reveal(this);
 
     // Make sure we are in the next frame before stopping the world with confirm
-    await new Promise(resolve => setTimeout(resolve, 0));
+    await new Promise(resolve => window.setTimeout(resolve, 0));
 
     const shouldUpdate = window.confirm(i18nString(UIStrings.thisFileWasChangedExternally));
     if (shouldUpdate) {

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

@@ -381,7 +381,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.clearButton.disabled = true;
     const label = this.clearButton.textContent;
     this.clearButton.textContent = i18nString(UIStrings.clearing);
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.clearButton.disabled = false;
       this.clearButton.textContent = label;
       this.clearButton.focus();

package/front_end/panels/console/ConsoleView.ts

@@ -1390,7 +1390,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
 
     if (index === this.visibleViewMessages.length) {
       this.cleanupAfterSearch();
-      setTimeout(this.searchFinishedForTests.bind(this), 0);
+      window.setTimeout(this.searchFinishedForTests.bind(this), 0);
       return;
     }
 

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -83,7 +83,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
       clearTimeout(this.frameResizedTimer);
     }
 
-    this.frameResizedTimer = setTimeout(refreshContents.bind(this), 100);
+    this.frameResizedTimer = window.setTimeout(refreshContents.bind(this), 100);
   }
 
   private elementNode(): SDK.DOMModel.DOMNode|null {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -590,7 +590,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   async doUpdate(): Promise<void> {
     if (!this.initialUpdateCompleted) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         if (!this.initialUpdateCompleted) {
           // the spinner will get automatically removed when innerRebuildUpdate is called
           this.sectionsContainer.createChild('span', 'spinner');
@@ -1650,7 +1650,7 @@ export class StylePropertiesSection {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    this.hoverTimer = setTimeout(this.highlight.bind(this), 300);
+    this.hoverTimer = window.setTimeout(this.highlight.bind(this), 300);
   }
 
   highlight(mode: string|undefined = 'all'): void {

package/front_end/panels/network/NetworkItemView.ts

@@ -275,7 +275,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     if (!this.selectTab(tabId)) {
       // maybeAppendPayloadPanel might cause payload tab to appear asynchronously, so
       // it makes sense to retry on the next tick
-      setTimeout(() => {
+      window.setTimeout(() => {
         if (!this.selectTab(tabId)) {
           this.selectTab('headers');
         }

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 {