chrome-devtools-frontend 1.0.953446 → 1.0.954271

package/config/gni/devtools_grd_files.gni

@@ -461,6 +461,7 @@ grd_files_release_sources = [
   "front_end/ui/components/expandable_list/expandable_list.js",
   "front_end/ui/components/helpers/helpers.js",
   "front_end/ui/components/icon_button/icon_button.js",
+  "front_end/ui/components/input/input.js",
   "front_end/ui/components/issue_counter/issue_counter.js",
   "front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.js",
   "front_end/ui/components/linear_memory_inspector/linear_memory_inspector.js",
@@ -844,6 +845,7 @@ grd_files_debug_sources = [
   "front_end/panels/changes/changesView.css.js",
   "front_end/panels/console/ConsoleContextSelector.js",
   "front_end/panels/console/ConsoleFilter.js",
+  "front_end/panels/console/ConsoleFormat.js",
   "front_end/panels/console/ConsolePanel.js",
   "front_end/panels/console/ConsolePinPane.js",
   "front_end/panels/console/ConsolePrompt.js",
@@ -1322,6 +1324,8 @@ grd_files_debug_sources = [
   "front_end/ui/components/icon_button/IconButton.js",
   "front_end/ui/components/icon_button/icon.css.js",
   "front_end/ui/components/icon_button/iconButton.css.js",
+  "front_end/ui/components/input/checkbox.css.js",
+  "front_end/ui/components/input/textInput.css.js",
   "front_end/ui/components/issue_counter/IssueCounter.js",
   "front_end/ui/components/issue_counter/IssueLinkIcon.js",
   "front_end/ui/components/issue_counter/issueCounter.css.js",

package/front_end/core/common/Settings.ts

@@ -290,6 +290,7 @@ export class Setting<V> {
   // TODO(crbug.com/1172300) Type cannot be inferred without changes to consumers. See above.
   #serializer: Serializer<unknown, V> = JSON;
   #hadUserAction?: boolean;
+  #disabled?: boolean;
 
   constructor(
       readonly name: string, readonly defaultValue: V, private readonly eventSupport: ObjectWrapper<GenericEvents>,
@@ -333,6 +334,15 @@ export class Setting<V> {
     this.#requiresUserAction = requiresUserAction;
   }
 
+  disabled(): boolean {
+    return this.#disabled || false;
+  }
+
+  setDisabled(disabled: boolean): void {
+    this.#disabled = disabled;
+    this.eventSupport.dispatchEventToListeners(this.name);
+  }
+
   get(): V {
     if (this.#requiresUserAction && !this.#hadUserAction) {
       return this.defaultValue;

package/front_end/core/i18n/i18nImpl.ts

@@ -104,40 +104,18 @@ export function getFormatLocalizedString(
   const formatter =
       registeredStrings.getLocalizedStringSetFor(DevToolsLocale.instance().locale).getMessageFormatterFor(stringId);
 
-  const icuElements = formatter.getAst();
-  const args: Array<Object> = [];
-  let formattedString = '';
-  for (const element of icuElements) {
-    if (element.type === /* argumentElement */ 1) {
-      const placeholderValue = placeholders[element.value];
+  const element = document.createElement('span');
+  for (const icuElement of formatter.getAst()) {
+    if (icuElement.type === /* argumentElement */ 1) {
+      const placeholderValue = placeholders[icuElement.value];
       if (placeholderValue) {
-        args.push(placeholderValue);
-        element.value = '%s';  // convert the {PH} back to %s to use Platform.UIString
+        element.append(placeholderValue as Node | string);
       }
+    } else if ('value' in icuElement) {
+      element.append(String(icuElement.value));
     }
-    if ('value' in element) {
-      formattedString += element.value;
-    }
-  }
-  return formatLocalized(formattedString, args);
-}
-
-export function formatLocalized(formattedString: string, args: Array<Object>): Element {
-  const substitution: Platform.StringUtilities.FormatterFunction<Object> = substitution => {
-    return substitution;
-  };
-
-  function append(a: Element, b: undefined|string|Node): Element {
-    if (b) {
-      a.appendChild(typeof b === 'string' ? document.createTextNode(b) : b);
-    }
-
-    return a;
   }
-
-  const formatters = {s: substitution};
-  return Platform.StringUtilities.format(formattedString, args, formatters, document.createElement('span'), append)
-      .formattedResult;
+  return element;
 }
 
 export function serializeUIString(string: string, values: Record<string, Object> = {}): string {

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

@@ -581,12 +581,6 @@
   "core/sdk/sdk-meta.ts | disableCache": {
     "message": "Disable cache (while DevTools is open)"
   },
-  "core/sdk/sdk-meta.ts | disabledDarkMode": {
-    "message": "Disable"
-  },
-  "core/sdk/sdk-meta.ts | disableEmulateAutoDarkMode": {
-    "message": "Disable auto dark mode"
-  },
   "core/sdk/sdk-meta.ts | disableJavascript": {
     "message": "Disable JavaScript"
   },
@@ -617,9 +611,6 @@
   "core/sdk/sdk-meta.ts | doNotEmulateCssMediaType": {
     "message": "Do not emulate CSS media type"
   },
-  "core/sdk/sdk-meta.ts | doNotEmulateDarkMode": {
-    "message": "Do not emulate auto dark mode"
-  },
   "core/sdk/sdk-meta.ts | doNotExtendGridLines": {
     "message": "Do not extend grid lines"
   },
@@ -689,12 +680,6 @@
   "core/sdk/sdk-meta.ts | enableCustomFormatters": {
     "message": "Enable custom formatters"
   },
-  "core/sdk/sdk-meta.ts | enabledDarkMode": {
-    "message": "Enable"
-  },
-  "core/sdk/sdk-meta.ts | enableEmulateAutoDarkMode": {
-    "message": "Enable auto dark mode"
-  },
   "core/sdk/sdk-meta.ts | enableJavascript": {
     "message": "Enable JavaScript"
   },
@@ -947,11 +932,14 @@
   "entrypoints/inspector_main/RenderingOptions.ts | emulateAFocusedPage": {
     "message": "Emulate a focused page"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | emulateAutoDarkMode": {
+    "message": "Enable automatic dark mode"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | emulatesAFocusedPage": {
     "message": "Emulates a focused page."
   },
   "entrypoints/inspector_main/RenderingOptions.ts | emulatesAutoDarkMode": {
-    "message": "Enables automatic dark mode for the inspected page."
+    "message": "Enables automatic dark mode and sets prefers-color-scheme to dark."
   },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "Forces CSS color-gamut media feature"
@@ -12176,6 +12164,9 @@
   "ui/legacy/ListWidget.ts | saveString": {
     "message": "Save"
   },
+  "ui/legacy/RemoteDebuggingTerminatedScreen.ts | debuggingConnectionWasClosed": {
+    "message": "Debugging connection was closed. Reason: "
+  },
   "ui/legacy/RemoteDebuggingTerminatedScreen.ts | reconnectDevtools": {
     "message": "Reconnect DevTools"
   },

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

@@ -581,12 +581,6 @@
   "core/sdk/sdk-meta.ts | disableCache": {
     "message": "D̂íŝáb̂ĺê ćâćĥé (ŵh́îĺê D́êv́T̂óôĺŝ íŝ óp̂én̂)"
   },
-  "core/sdk/sdk-meta.ts | disabledDarkMode": {
-    "message": "D̂íŝáb̂ĺê"
-  },
-  "core/sdk/sdk-meta.ts | disableEmulateAutoDarkMode": {
-    "message": "D̂íŝáb̂ĺê áût́ô d́âŕk̂ ḿôd́ê"
-  },
   "core/sdk/sdk-meta.ts | disableJavascript": {
     "message": "D̂íŝáb̂ĺê J́âv́âŚĉŕîṕt̂"
   },
@@ -617,9 +611,6 @@
   "core/sdk/sdk-meta.ts | doNotEmulateCssMediaType": {
     "message": "D̂ó n̂ót̂ ém̂úl̂át̂é ĈŚŜ ḿêd́îá t̂ýp̂é"
   },
-  "core/sdk/sdk-meta.ts | doNotEmulateDarkMode": {
-    "message": "D̂ó n̂ót̂ ém̂úl̂át̂é âút̂ó d̂ár̂ḱ m̂ód̂é"
-  },
   "core/sdk/sdk-meta.ts | doNotExtendGridLines": {
     "message": "D̂ó n̂ót̂ éx̂t́êńd̂ ǵr̂íd̂ ĺîńêś"
   },
@@ -689,12 +680,6 @@
   "core/sdk/sdk-meta.ts | enableCustomFormatters": {
     "message": "Êńâb́l̂é ĉúŝt́ôḿ f̂ór̂ḿât́t̂ér̂ś"
   },
-  "core/sdk/sdk-meta.ts | enabledDarkMode": {
-    "message": "Êńâb́l̂é"
-  },
-  "core/sdk/sdk-meta.ts | enableEmulateAutoDarkMode": {
-    "message": "Êńâb́l̂é âút̂ó d̂ár̂ḱ m̂ód̂é"
-  },
   "core/sdk/sdk-meta.ts | enableJavascript": {
     "message": "Êńâb́l̂é Ĵáv̂áŜćr̂íp̂t́"
   },
@@ -947,11 +932,14 @@
   "entrypoints/inspector_main/RenderingOptions.ts | emulateAFocusedPage": {
     "message": "Êḿûĺât́ê á f̂óĉúŝéd̂ ṕâǵê"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | emulateAutoDarkMode": {
+    "message": "Êńâb́l̂é âút̂óm̂át̂íĉ d́âŕk̂ ḿôd́ê"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | emulatesAFocusedPage": {
     "message": "Êḿûĺât́êś â f́ôćûśêd́ p̂áĝé."
   },
   "entrypoints/inspector_main/RenderingOptions.ts | emulatesAutoDarkMode": {
-    "message": "Êńâb́l̂éŝ áût́ôḿât́îć d̂ár̂ḱ m̂ód̂é f̂ór̂ t́ĥé îńŝṕêćt̂éd̂ ṕâǵê."
+    "message": "Êńâb́l̂éŝ áût́ôḿât́îć d̂ár̂ḱ m̂ód̂é âńd̂ śêt́ŝ prefers-color-scheme t́ô dark."
   },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "F̂ór̂ćêś ĈŚŜ color-gamut ḿêd́îá f̂éât́ûŕê"
@@ -12176,6 +12164,9 @@
   "ui/legacy/ListWidget.ts | saveString": {
     "message": "Ŝáv̂é"
   },
+  "ui/legacy/RemoteDebuggingTerminatedScreen.ts | debuggingConnectionWasClosed": {
+    "message": "D̂éb̂úĝǵîńĝ ćôńn̂éĉt́îón̂ ẃâś ĉĺôśêd́. R̂éâśôń: "
+  },
   "ui/legacy/RemoteDebuggingTerminatedScreen.ts | reconnectDevtools": {
     "message": "R̂éĉón̂ńêćt̂ DevTools"
   },

package/front_end/core/platform/number-utilities.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as StringUtilities from './string-utilities.js';
-
 export const clamp = (num: number, min: number, max: number): number => {
   let clampedNumber = num;
   if (num < min) {
@@ -20,22 +18,22 @@ export const mod = (m: number, n: number): number => {
 
 export const bytesToString = (bytes: number): string => {
   if (bytes < 1000) {
-    return StringUtilities.vsprintf('%.0f\xA0B', [bytes]);
+    return `${bytes.toFixed(0)}\xA0B`;
   }
 
   const kilobytes = bytes / 1000;
   if (kilobytes < 100) {
-    return StringUtilities.vsprintf('%.1f\xA0kB', [kilobytes]);
+    return `${kilobytes.toFixed(1)}\xA0kB`;
   }
   if (kilobytes < 1000) {
-    return StringUtilities.vsprintf('%.0f\xA0kB', [kilobytes]);
+    return `${kilobytes.toFixed(0)}\xA0kB`;
   }
 
   const megabytes = kilobytes / 1000;
   if (megabytes < 100) {
-    return StringUtilities.vsprintf('%.1f\xA0MB', [megabytes]);
+    return `${megabytes.toFixed(1)}\xA0MB`;
   }
-  return StringUtilities.vsprintf('%.0f\xA0MB', [megabytes]);
+  return `${megabytes.toFixed(0)}\xA0MB`;
 };
 
 export const toFixedIfFloating = (value: string): string => {

package/front_end/core/platform/string-utilities.ts

@@ -26,205 +26,6 @@ export const escapeCharacters = (inputString: string, charsToEscape: string): st
   return result;
 };
 
-export const enum FormatterType {
-  STRING = 'string',
-  SPECIFIER = 'specifier',
-}
-
-export interface FormatterToken {
-  type: FormatterType;
-  value?: string|{description: string};
-  specifier?: string;
-  precision?: number;
-  substitutionIndex?: number;
-}
-
-export const tokenizeFormatString = function(
-    formatString: string, formatters: Record<string, Function>): FormatterToken[] {
-  const tokens: FormatterToken[] = [];
-
-  function addStringToken(str: string): void {
-    if (!str) {
-      return;
-    }
-    if (tokens.length && tokens[tokens.length - 1].type === FormatterType.STRING) {
-      tokens[tokens.length - 1].value += str;
-    } else {
-      tokens.push({
-        type: FormatterType.STRING,
-        value: str,
-      });
-    }
-  }
-
-  function addSpecifierToken(specifier: string, precision: number, substitutionIndex: number): void {
-    tokens.push({type: FormatterType.SPECIFIER, specifier, precision, substitutionIndex, value: undefined});
-  }
-
-  function addAnsiColor(code: number): void {
-    type ColorType = 'color'|'colorLight'|'bgColor'|'bgColorLight';
-
-    const types: Record<number, ColorType> = {3: 'color', 9: 'colorLight', 4: 'bgColor', 10: 'bgColorLight'};
-    const colorCodes = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'lightGray', '', 'default'];
-    const colorCodesLight =
-        ['darkGray', 'lightRed', 'lightGreen', 'lightYellow', 'lightBlue', 'lightMagenta', 'lightCyan', 'white', ''];
-    const colors: Record<ColorType, string[]> =
-        {color: colorCodes, colorLight: colorCodesLight, bgColor: colorCodes, bgColorLight: colorCodesLight};
-    const type = types[Math.floor(code / 10)] as ColorType;
-    if (!type) {
-      return;
-    }
-    const color = colors[type][code % 10];
-    if (!color) {
-      return;
-    }
-    tokens.push({
-      type: FormatterType.SPECIFIER,
-      specifier: 'c',
-      value: {description: (type.startsWith('bg') ? 'background : ' : 'color: ') + color},
-      precision: undefined,
-      substitutionIndex: undefined,
-    });
-  }
-
-  let textStart = 0;
-  let substitutionIndex = 0;
-  const re =
-      new RegExp(`%%|%(?:(\\d+)\\$)?(?:\\.(\\d*))?([${Object.keys(formatters).join('')}])|\\u001b\\[(\\d+)m`, 'g');
-  for (let match = re.exec(formatString); match !== null; match = re.exec(formatString)) {
-    const matchStart = match.index;
-    if (matchStart > textStart) {
-      addStringToken(formatString.substring(textStart, matchStart));
-    }
-
-    if (match[0] === '%%') {
-      addStringToken('%');
-    } else if (match[0].startsWith('%')) {
-      const [, substitionString, precisionString, specifierString] = match;
-      if (substitionString && Number(substitionString) > 0) {
-        substitutionIndex = Number(substitionString) - 1;
-      }
-      const precision = precisionString ? Number(precisionString) : -1;
-      addSpecifierToken(specifierString, precision, substitutionIndex);
-      ++substitutionIndex;
-    } else {
-      const code = Number(match[4]);
-      addAnsiColor(code);
-    }
-    textStart = matchStart + match[0].length;
-  }
-  addStringToken(formatString.substring(textStart));
-  return tokens;
-};
-
-export type FormatterFunction<T> = (input: string|{description: string}|undefined|T, token: FormatterToken) => unknown;
-
-export const format = function<T, U>(
-    formatString: string, substitutions: ArrayLike<U>|null, formatters: Record<string, FormatterFunction<U>>,
-    initialValue: T, append: (initialValue: T, newString: string) => T, tokenizedFormat?: FormatterToken[]): {
-  formattedResult: T,
-  unusedSubstitutions: ArrayLike<U>|null,
-} {
-  if (!formatString || ((!substitutions || !substitutions.length) && formatString.search(/\u001b\[(\d+)m/) === -1)) {
-    return {formattedResult: append(initialValue, formatString), unusedSubstitutions: substitutions};
-  }
-
-  function prettyFunctionName(): string {
-    return 'String.format("' + formatString + '", "' + Array.prototype.join.call(substitutions, '", "') + '")';
-  }
-
-  function warn(msg: string): void {
-    console.warn(prettyFunctionName() + ': ' + msg);
-  }
-
-  function error(msg: string): void {
-    console.error(prettyFunctionName() + ': ' + msg);
-  }
-
-  let result = initialValue;
-  const tokens = tokenizedFormat || tokenizeFormatString(formatString, formatters);
-  const usedSubstitutionIndexes: Record<number, boolean> = {};
-  const actualSubstitutions: ArrayLike<U> = substitutions || [];
-
-  for (const token of tokens) {
-    if (token.type === FormatterType.STRING) {
-      result = append(result, token.value as string);
-      continue;
-    }
-
-    if (token.type !== FormatterType.SPECIFIER) {
-      error('Unknown token type "' + token.type + '" found.');
-      continue;
-    }
-
-    if (!token.value && token.substitutionIndex !== undefined &&
-        token.substitutionIndex >= actualSubstitutions.length) {
-      // If there are not enough substitutions for the current substitutionIndex
-      // just output the format specifier literally and move on.
-      error(
-          'not enough substitution arguments. Had ' + actualSubstitutions.length + ' but needed ' +
-          (token.substitutionIndex + 1) + ', so substitution was skipped.');
-      result = append(
-          result,
-          '%' + ((token.precision !== undefined && token.precision > -1) ? token.precision : '') + token.specifier);
-      continue;
-    }
-
-    if (!token.value && token.substitutionIndex !== undefined) {
-      usedSubstitutionIndexes[token.substitutionIndex] = true;
-    }
-
-    if (token.specifier === undefined || !(token.specifier in formatters)) {
-      // Encountered an unsupported format character, treat as a string.
-      warn('unsupported format character \u201C' + token.specifier + '\u201D. Treating as a string.');
-      const stringToAppend = (token.value || token.substitutionIndex === undefined) ?
-          '' :
-          String(actualSubstitutions[token.substitutionIndex]);
-      result = append(result, stringToAppend);
-      continue;
-    }
-
-    const formatter = formatters[token.specifier];
-    const valueToFormat = token.value ||
-        (token.substitutionIndex !== undefined ? actualSubstitutions[token.substitutionIndex] : undefined);
-    const stringToAppend = formatter(valueToFormat, token);
-
-    result = append(
-        result,
-        stringToAppend as string,
-    );
-  }
-
-  const unusedSubstitutions = [];
-  for (let i = 0; i < actualSubstitutions.length; ++i) {
-    if (i in usedSubstitutionIndexes) {
-      continue;
-    }
-    unusedSubstitutions.push(actualSubstitutions[i]);
-  }
-
-  return {formattedResult: result, unusedSubstitutions: unusedSubstitutions};
-};
-
-export const standardFormatters = {
-  d: function(substitution: unknown): number {
-    return (!isNaN(substitution as number) ? substitution as number : 0);
-  },
-
-  f: function(substitution: unknown, token: FormatterToken): string {
-    if (substitution && typeof substitution === 'number' && token.precision !== undefined && token.precision > -1) {
-      substitution = substitution.toFixed(token.precision);
-    }
-    const precision =
-        (token.precision !== undefined && token.precision > -1) ? Number(0).toFixed(token.precision) : '0';
-    return !isNaN(substitution as number) ? substitution as string : precision;
-  },
-
-  s: function(substitution: unknown): string {
-    return substitution as string;
-  },
-};
-
 const toHexadecimal = (charCode: number, padToLength: number): string => {
   return charCode.toString(16).toUpperCase().padStart(padToLength, '0');
 };
@@ -285,12 +86,51 @@ export const formatAsJSLiteral = (content: string): string => {
   return `${quote}${escapedContent}${quote}`;
 };
 
-export const vsprintf = function(formatString: string, substitutions: unknown[]): string {
-  return format(formatString, substitutions, standardFormatters, '', (a, b) => a + b).formattedResult;
-};
-
-export const sprintf = function(format: string, ...varArg: unknown[]): string {
-  return vsprintf(format, varArg);
+/**
+ * This implements a subset of the sprintf() function described in the Single UNIX
+ * Specification. It supports the %s, %f, %d, and %% formatting specifiers, and
+ * understands the %m$d notation to select the m-th parameter for this substitution,
+ * as well as the optional precision for %s, %f, and %d.
+ *
+ * @param fmt format string.
+ * @param args parameters to the format string.
+ * @returns the formatted output string.
+ */
+export const sprintf = (fmt: string, ...args: unknown[]): string => {
+  let argIndex = 0;
+  const RE = /%(?:(\d+)\$)?(?:\.(\d*))?([%dfs])/g;
+  return fmt.replaceAll(RE, (_: string, index?: string, precision?: string, specifier?: string): string => {
+    if (specifier === '%') {
+      return '%';
+    }
+    if (index !== undefined) {
+      argIndex = parseInt(index, 10) - 1;
+      if (argIndex < 0) {
+        throw new RangeError(`Invalid parameter index ${argIndex + 1}`);
+      }
+    }
+    if (argIndex >= args.length) {
+      throw new RangeError(`Expected at least ${argIndex + 1} format parameters, but only ${args.length} where given.`);
+    }
+    if (specifier === 's') {
+      const argValue = String(args[argIndex++]);
+      if (precision !== undefined) {
+        return argValue.substring(0, Number(precision));
+      }
+      return argValue;
+    }
+    let argValue = Number(args[argIndex++]);
+    if (isNaN(argValue)) {
+      argValue = 0;
+    }
+    if (specifier === 'd') {
+      return String(Math.floor(argValue)).padStart(Number(precision), '0');
+    }
+    if (precision !== undefined) {
+      return argValue.toFixed(Number(precision));
+    }
+    return String(argValue);
+  });
 };
 
 export const toBase64 = (inputString: string): string => {

package/front_end/core/sdk/EmulationModel.ts

@@ -126,9 +126,16 @@ export class EmulationModel extends SDKModel<void> {
     this.updateCssMedia();
 
     const autoDarkModeSetting = Common.Settings.Settings.instance().moduleSetting('emulateAutoDarkMode');
-    autoDarkModeSetting.addChangeListener(() => this.emulateAutoDarkMode(autoDarkModeSetting.get()));
+    autoDarkModeSetting.addChangeListener(() => {
+      const enabled = autoDarkModeSetting.get();
+      mediaFeaturePrefersColorSchemeSetting.setDisabled(enabled);
+      mediaFeaturePrefersColorSchemeSetting.set(enabled ? 'dark' : '');
+      this.emulateAutoDarkMode(enabled);
+    });
     if (autoDarkModeSetting.get()) {
-      this.emulateAutoDarkMode(autoDarkModeSetting.get());
+      mediaFeaturePrefersColorSchemeSetting.setDisabled(true);
+      mediaFeaturePrefersColorSchemeSetting.set('dark');
+      this.emulateAutoDarkMode(true);
     }
 
     const visionDeficiencySetting = Common.Settings.Settings.instance().moduleSetting('emulatedVisionDeficiency');
@@ -277,22 +284,14 @@ export class EmulationModel extends SDKModel<void> {
     }
   }
 
-  private static parseAutoDarkModeSetting(setting: string): boolean|undefined {
-    switch (setting) {
-      case 'default':
-        return undefined;
-      case 'enabled':
-        return true;
-      case 'disabled':
-        return false;
-      default:
-        throw Error('unrecognized auto dark mode setting');
+  private async emulateAutoDarkMode(enabled: boolean): Promise<void> {
+    if (enabled) {
+      this.#mediaConfiguration.set('prefers-color-scheme', 'dark');
+      await this.updateCssMedia();
     }
-  }
-
-  private async emulateAutoDarkMode(setting: string): Promise<void> {
-    const enabled = EmulationModel.parseAutoDarkModeSetting(setting);
-    await this.#emulationAgent.invoke_setAutoDarkModeOverride({enabled});
+    // We never send `enabled: false` since that would explicitly disable
+    // autodark mode. We either enable it or clear any existing override.
+    await this.#emulationAgent.invoke_setAutoDarkModeOverride({enabled: enabled || undefined});
   }
 
   private async emulateVisionDeficiency(type: Protocol.Emulation.SetEmulatedVisionDeficiencyRequestType):
@@ -360,7 +359,7 @@ export class EmulationModel extends SDKModel<void> {
         {enabled: configuration.enabled, configuration: configuration.configuration});
   }
 
-  private updateCssMedia(): void {
+  private async updateCssMedia(): Promise<void> {
     // See the note above, where this.#mediaConfiguration is defined.
     const type = this.#mediaConfiguration.get('type') ?? '';
     const features = [
@@ -389,7 +388,7 @@ export class EmulationModel extends SDKModel<void> {
         value: this.#mediaConfiguration.get('prefers-reduced-motion') ?? '',
       },
     ];
-    this.emulateCSSMedia(type, features);
+    return this.emulateCSSMedia(type, features);
   }
 }
 

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -616,7 +616,12 @@ export class ResourceTreeFrame {
   backForwardCacheDetails: {
     restoredFromCache: boolean|undefined,
     explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[],
-  } = {restoredFromCache: undefined, explanations: []};
+    explanationsTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|undefined,
+  } = {
+    restoredFromCache: undefined,
+    explanations: [],
+    explanationsTree: undefined,
+  };
 
   constructor(
       model: ResourceTreeModel, parentFrame: ResourceTreeFrame|null, frameId: Protocol.Page.FrameId,
@@ -688,7 +693,11 @@ export class ResourceTreeFrame {
     this.#secureContextType = framePayload.secureContextType;
     this.#crossOriginIsolatedContextType = framePayload.crossOriginIsolatedContextType;
     this.#gatedAPIFeatures = framePayload.gatedAPIFeatures;
-    this.backForwardCacheDetails = {restoredFromCache: undefined, explanations: []};
+    this.backForwardCacheDetails = {
+      restoredFromCache: undefined,
+      explanations: [],
+      explanationsTree: undefined,
+    };
 
     const mainResource = this.resourcesMap.get(this.#urlInternal);
     this.resourcesMap.clear();
@@ -963,6 +972,7 @@ export class ResourceTreeFrame {
   setBackForwardCacheDetails(event: Protocol.Page.BackForwardCacheNotUsedEvent): void {
     this.backForwardCacheDetails.restoredFromCache = false;
     this.backForwardCacheDetails.explanations = event.notRestoredExplanations;
+    this.backForwardCacheDetails.explanationsTree = event.notRestoredExplanationsTree;
   }
 
   getResourcesMap(): Map<string, Resource> {