chrome-devtools-frontend 1.0.954163 → 1.0.954271

package/config/gni/devtools_grd_files.gni

@@ -845,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",

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/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"

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́ûŕê"

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

@@ -26,186 +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};
-};
-
 const toHexadecimal = (charCode: number, padToLength: number): string => {
   return charCode.toString(16).toUpperCase().padStart(padToLength, '0');
 };

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/sdk-meta.ts

@@ -314,26 +314,6 @@ const UIStrings = {
   * emulates that the webpage is in auto dark mode.
   */
   emulateAutoDarkMode: 'Emulate auto dark mode',
-  /**
-  * @description Title of a setting for enabling auto dark mode.
-  */
-  enableEmulateAutoDarkMode: 'Enable auto dark mode',
-  /**
-  * @description Text to emulate enabled auto dark mode.
-  */
-  enabledDarkMode: 'Enable',
-  /**
-  * @description Title of a setting for disabling auto dark mode.
-  */
-  disableEmulateAutoDarkMode: 'Disable auto dark mode',
-  /**
-  * @description Text to emulate disabled auto dark mode.
-  */
-  disabledDarkMode: 'Disable',
-  /**
-  * @description Title of a setting for disabling dark mode emulation.
-  */
-  doNotEmulateDarkMode: 'Do not emulate auto dark mode',
 };
 const str_ = i18n.i18n.registerUIStrings('core/sdk/sdk-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -1049,24 +1029,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   title: i18nLazyString(UIStrings.emulateAutoDarkMode),
   settingName: 'emulateAutoDarkMode',
-  settingType: Common.Settings.SettingType.ENUM,
+  settingType: Common.Settings.SettingType.BOOLEAN,
   storageType: Common.Settings.SettingStorageType.Session,
-  defaultValue: 'default',
-  options: [
-    {
-      title: i18nLazyString(UIStrings.doNotEmulateDarkMode),
-      text: i18nLazyString(UIStrings.noEmulation),
-      value: 'default',
-    },
-    {
-      title: i18nLazyString(UIStrings.enableEmulateAutoDarkMode),
-      text: i18nLazyString(UIStrings.enabledDarkMode),
-      value: 'enabled',
-    },
-    {
-      title: i18nLazyString(UIStrings.disableEmulateAutoDarkMode),
-      text: i18nLazyString(UIStrings.disabledDarkMode),
-      value: 'disabled',
-    },
-  ],
+  defaultValue: false,
 });

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -124,9 +124,13 @@ const UIStrings = {
   */
   emulatesAFocusedPage: 'Emulates a focused page.',
   /**
-  * @description Explanation text for the 'Emulate a focused page' setting in the Rendering tool.
+  * @description The name of a checkbox setting in the Rendering tool. This setting enables auto dark mode emulation.
+  */
+  emulateAutoDarkMode: 'Enable automatic dark mode',
+  /**
+  * @description Explanation text for the 'Emulate automatic dark mode' setting in the Rendering tool.
   */
-  emulatesAutoDarkMode: 'Enables automatic dark mode for the inspected page.',
+  emulatesAutoDarkMode: 'Enables automatic dark mode and sets `prefers-color-scheme` to `dark`.',
   /**
   * @description Explanation text for the 'Emulate CSS media type' setting in the Rendering tool.
   * This setting overrides the CSS media type on the page:
@@ -245,14 +249,18 @@ export class RenderingOptionsView extends UI.Widget.VBox {
     this.#appendCheckbox(
         i18nString(UIStrings.emulateAFocusedPage), i18nString(UIStrings.emulatesAFocusedPage),
         Common.Settings.Settings.instance().moduleSetting('emulatePageFocus'));
+    this.#appendCheckbox(
+        i18nString(UIStrings.emulateAutoDarkMode), i18nString(UIStrings.emulatesAutoDarkMode),
+        Common.Settings.Settings.instance().moduleSetting('emulateAutoDarkMode'));
+
     this.contentElement.createChild('div').classList.add('panel-section-separator');
 
-    this.#appendSelect(
-        i18nString(UIStrings.forcesMediaTypeForTestingPrint),
-        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMedia'));
     this.#appendSelect(
         i18nString(UIStrings.forcesCssPreferscolorschemeMedia),
         Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme'));
+    this.#appendSelect(
+        i18nString(UIStrings.forcesMediaTypeForTestingPrint),
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMedia'));
     this.#appendSelect(
         i18nString(UIStrings.forcesCssForcedColors),
         Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeatureForcedColors'));
@@ -279,10 +287,6 @@ export class RenderingOptionsView extends UI.Widget.VBox {
         Common.Settings.Settings.instance().moduleSetting('emulatedVisionDeficiency'));
 
     this.contentElement.createChild('div').classList.add('panel-section-separator');
-    this.#appendSelect(
-        i18nString(UIStrings.emulatesAutoDarkMode),
-        Common.Settings.Settings.instance().moduleSetting('emulateAutoDarkMode'));
-    this.contentElement.createChild('div').classList.add('panel-section-separator');
 
     this.#appendCheckbox(
         i18nString(UIStrings.disableAvifImageFormat), i18nString(UIStrings.requiresAPageReloadToApplyAnd),

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -238,7 +238,9 @@ export class BackForwardCacheView extends HTMLElement {
       `;
       // clang-format on
     }
-    const isDisabled = this.#screenStatus === ScreenStatusType.Running;
+    const isTestRunning = (this.#screenStatus === ScreenStatusType.Running);
+    // Prevent running BFCache test on the DevTools window itself via DevTools on DevTools
+    const isTestingForbidden = this.#frame.url.startsWith('devtools://');
     // clang-format off
     return LitHtml.html`
       ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
@@ -252,11 +254,11 @@ export class BackForwardCacheView extends HTMLElement {
       </div>
       <${ReportView.ReportView.ReportSection.litTagName}>
         <${Buttons.Button.Button.litTagName}
-          .disabled=${isDisabled}
-          .spinner=${isDisabled}
+          .disabled=${isTestRunning || isTestingForbidden}
+          .spinner=${isTestRunning}
           .variant=${Buttons.Button.Variant.PRIMARY}
           @click=${this.#navigateAwayAndBack}>
-          ${isDisabled ? LitHtml.html`
+          ${isTestRunning ? LitHtml.html`
             ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
           `}

package/front_end/panels/console/ConsoleFormat.ts

@@ -0,0 +1,155 @@
+// Copyright 2021 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 SDK from '../../core/sdk/sdk.js';
+
+// TODO(crbug/1282837): This is too naive and doesn't support
+// most (anticipated) uses of the ANSI color sequences (i.e.
+// setting both foreground and background color).
+const ANSI_COLOR_CODES = new Map([
+  // Foreground codes
+  [30, 'color:black'],
+  [31, 'color:red'],
+  [32, 'color:green'],
+  [33, 'color:yellow'],
+  [34, 'color:blue'],
+  [35, 'color:magenta'],
+  [36, 'color:cyan'],
+  [37, 'color:lightGray'],
+  [39, 'color:default'],
+  [90, 'color:darkGray'],
+  [91, 'color:lightRed'],
+  [92, 'color:lightGreen'],
+  [93, 'color:lightYellow'],
+  [94, 'color:lightBlue'],
+  [95, 'color:lightMagenta'],
+  [96, 'color:lightCyan'],
+  [97, 'color:white'],
+  // Background codes
+  [40, 'background:black'],
+  [41, 'background:red'],
+  [42, 'background:green'],
+  [43, 'background:yellow'],
+  [44, 'background:blue'],
+  [45, 'background:magenta'],
+  [46, 'background:cyan'],
+  [47, 'background:lightGray'],
+  [49, 'background:default'],
+  [100, 'background:darkGray'],
+  [101, 'background:lightRed'],
+  [102, 'background:lightGreen'],
+  [103, 'background:lightYellow'],
+  [104, 'background:lightBlue'],
+  [105, 'background:lightMagenta'],
+  [106, 'background:lightCyan'],
+  [107, 'background:white'],
+]);
+
+export type FormatToken = {
+  type: 'generic'|'optimal',
+  value: SDK.RemoteObject.RemoteObject,
+}|{
+  type: 'string' | 'style',
+  value: string,
+};
+
+/**
+ * This is the front-end part of the Formatter function specified in the
+ * Console Standard (https://console.spec.whatwg.org/#formatter). Here we
+ * assume that all type conversions have already happened in V8 before and
+ * are only concerned with performing the actual substitutions and dealing
+ * with generic and optimal object formatting as well as styling.
+ *
+ * @param fmt the format string.
+ * @param args the substitution arguments for `fmt`.
+ * @returns a list of `FormatToken`s as well as the unused arguments.
+ */
+export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
+  tokens: FormatToken[],
+  args: SDK.RemoteObject.RemoteObject[],
+} => {
+  const tokens: FormatToken[] = [];
+
+  function addStringToken(value: string): void {
+    if (!value) {
+      return;
+    }
+    if (tokens.length && tokens[tokens.length - 1].type === 'string') {
+      tokens[tokens.length - 1].value += value;
+      return;
+    }
+    tokens.push({type: 'string', value});
+  }
+
+  let argIndex = 0;
+  const re = /%([%_Oocsdfi])|\x1B\[(\d+)m/;
+  for (let match = re.exec(fmt); match !== null; match = re.exec(fmt)) {
+    addStringToken(match.input.substring(0, match.index));
+    let substitution: number|string|undefined = undefined;
+    const specifier = match[1];
+    switch (specifier) {
+      case '%':
+        addStringToken('%');
+        substitution = '';
+        break;
+      case 's':
+        if (argIndex < args.length) {
+          const {description} = args[argIndex++];
+          substitution = description ?? '';
+        }
+        break;
+      case 'c':
+        if (argIndex < args.length) {
+          const type = 'style';
+          const value = args[argIndex++].description ?? '';
+          tokens.push({type, value});
+          substitution = '';
+        }
+        break;
+      case 'o':
+      case 'O':
+        if (argIndex < args.length) {
+          const type = specifier === 'O' ? 'generic' : 'optimal';
+          const value = args[argIndex++];
+          tokens.push({type, value});
+          substitution = '';
+        }
+        break;
+      case '_':
+        if (argIndex < args.length) {
+          argIndex++;
+          substitution = '';
+        }
+        break;
+      case 'd':
+      case 'f':
+      case 'i':
+        if (argIndex < args.length) {
+          const {value} = args[argIndex++];
+          substitution = typeof value !== 'number' ? NaN : value;
+          if (specifier !== 'f') {
+            substitution = Math.floor(substitution);
+          }
+        }
+        break;
+      case undefined: {
+        const value = ANSI_COLOR_CODES.get(parseInt(match[2], 10));
+        if (value !== undefined) {
+          const type = 'style';
+          tokens.push({type, value});
+          substitution = '';
+        }
+        break;
+      }
+    }
+    if (substitution === undefined) {
+      // If there's no substitution, emit the original specifier / sequence verbatim.
+      addStringToken(match[0]);
+      substitution = '';
+    }
+    fmt = substitution + match.input.substring(match.index + match[0].length);
+  }
+  addStringToken(fmt);
+  return {tokens, args: args.slice(argIndex)};
+};

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -53,6 +53,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
+import {format} from './ConsoleFormat.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import consoleViewStyles from './consoleView.css.js';
 
@@ -586,9 +587,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     // Multiple parameters with the first being a format string. Save unused substitutions.
     if (shouldFormatMessage) {
-      const result = this.formatWithSubstitutionString(
+      parameters = this.formatWithSubstitutionString(
           (parameters[0].description as string), parameters.slice(1), formattedResult);
-      parameters = Array.from(result.unusedSubstitutions || []);
       if (parameters.length) {
         UI.UIUtils.createTextChild(formattedResult, ' ');
       }
@@ -866,165 +866,64 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private formatWithSubstitutionString(
-      format: string, parameters: SDK.RemoteObject.RemoteObject[], formattedResult: HTMLElement): {
-    formattedResult: Element,
-    unusedSubstitutions: ArrayLike<SDK.RemoteObject.RemoteObject>|null,
-  } {
-    function parameterFormatter(
-        this: ConsoleViewMessage, force: boolean, includePreview: boolean,
-        obj?: string|SDK.RemoteObject.RemoteObject): string|HTMLElement|undefined {
-      if (obj instanceof SDK.RemoteObject.RemoteObject) {
-        return this.formatParameter(obj, force, includePreview);
-      }
-      return stringFormatter(obj);
-    }
-
-    function stringFormatter(obj?: string|SDK.RemoteObject.RemoteObject): string|undefined {
-      if (obj === undefined) {
-        return undefined;
-      }
-      if (typeof obj === 'string') {
-        return obj;
-      }
-      return obj.description;
-    }
-
-    function floatFormatter(obj?: string|SDK.RemoteObject.RemoteObject): number|string|undefined {
-      if (obj instanceof SDK.RemoteObject.RemoteObject) {
-        if (typeof obj.value !== 'number') {
-          return 'NaN';
-        }
-        return obj.value;
-      }
-      return undefined;
-    }
-
-    function integerFormatter(obj?: string|SDK.RemoteObject.RemoteObject): string|number|undefined {
-      if (obj instanceof SDK.RemoteObject.RemoteObject) {
-        if (obj.type === 'bigint') {
-          return obj.description;
-        }
-        if (typeof obj.value !== 'number') {
-          return 'NaN';
+      formatString: string, parameters: SDK.RemoteObject.RemoteObject[],
+      formattedResult: HTMLElement): SDK.RemoteObject.RemoteObject[] {
+    const currentStyle = new Map();
+    const {tokens, args} = format(formatString, parameters);
+    for (const token of tokens) {
+      switch (token.type) {
+        case 'generic': {
+          formattedResult.append(this.formatParameter(token.value, true /* force */, false /* includePreview */));
+          break;
         }
-        return Math.floor(obj.value);
-      }
-      return undefined;
-    }
-
-    function bypassFormatter(obj?: string|SDK.RemoteObject.RemoteObject): Node|string {
-      return (obj instanceof Node) ? obj : '';
-    }
-
-    let currentStyle: Map<string, {value: string, priority: string}>|null = null;
-    function styleFormatter(obj?: string|SDK.RemoteObject.RemoteObject): void {
-      currentStyle = new Map();
-      const buffer = document.createElement('span');
-      if (obj === undefined) {
-        return;
-      }
-      if (typeof obj === 'string' || !obj.description) {
-        return;
-      }
-      buffer.setAttribute('style', obj.description);
-      for (const property of buffer.style) {
-        if (isAllowedProperty(property)) {
-          const info = {
-            value: buffer.style.getPropertyValue(property),
-            priority: buffer.style.getPropertyPriority(property),
-          };
-          currentStyle.set(property, info);
+        case 'optimal': {
+          formattedResult.append(this.formatParameter(token.value, false /* force */, true /* includePreview */));
+          break;
         }
-      }
-    }
-
-    function isAllowedProperty(property: string): boolean {
-      // Make sure that allowed properties do not interfere with link visibility.
-      const prefixes = [
-        'background',
-        'border',
-        'color',
-        'font',
-        'line',
-        'margin',
-        'padding',
-        'text',
-        '-webkit-background',
-        '-webkit-border',
-        '-webkit-font',
-        '-webkit-margin',
-        '-webkit-padding',
-        '-webkit-text',
-      ];
-      for (const prefix of prefixes) {
-        if (property.startsWith(prefix)) {
-          return true;
+        case 'string': {
+          if (currentStyle.size === 0) {
+            formattedResult.append(this.linkifyStringAsFragment(token.value));
+          } else {
+            const lines = token.value.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+              if (i > 0) {
+                formattedResult.append(document.createElement('br'));
+              }
+              const wrapper = document.createElement('span');
+              wrapper.style.setProperty('contain', 'paint');
+              wrapper.style.setProperty('display', 'inline-block');
+              wrapper.style.setProperty('max-width', '100%');
+              wrapper.appendChild(this.linkifyStringAsFragment(lines[i]));
+              for (const [property, {value, priority}] of currentStyle) {
+                wrapper.style.setProperty(property, value, priority);
+              }
+              formattedResult.append(wrapper);
+            }
+          }
+          break;
         }
-      }
-      return false;
-    }
-
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const formatters: Record<string, Platform.StringUtilities.FormatterFunction<any>> = {};
-    // Firebug uses %o for formatting objects.
-    formatters.o = parameterFormatter.bind(this, false /* force */, true /* includePreview */);
-    formatters.s = stringFormatter;
-    formatters.f = floatFormatter;
-    // Firebug allows both %i and %d for formatting integers.
-    formatters.i = integerFormatter;
-    formatters.d = integerFormatter;
-
-    // Firebug uses %c for styling the message.
-    formatters.c = styleFormatter;
-
-    // Support %O to force object formatting, instead of the type-based %o formatting.
-    formatters.O = parameterFormatter.bind(this, true /* force */, false /* includePreview */);
-
-    formatters._ = bypassFormatter;
-
-    function append(this: ConsoleViewMessage, a: HTMLElement, b?: string|Node): HTMLElement {
-      if (b instanceof Node) {
-        a.appendChild(b);
-        return a;
-      }
-      if (typeof b === 'undefined') {
-        return a;
-      }
-      if (!currentStyle) {
-        a.appendChild(this.linkifyStringAsFragment(String(b)));
-        return a;
-      }
-      const lines = String(b).split('\n');
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        const lineFragment = this.linkifyStringAsFragment(line);
-        const wrapper = document.createElement('span');
-        wrapper.style.setProperty('contain', 'paint');
-        wrapper.style.setProperty('display', 'inline-block');
-        wrapper.style.setProperty('max-width', '100%');
-        wrapper.appendChild(lineFragment);
-        applyCurrentStyle(wrapper);
-
-        a.appendChild(wrapper);
-        if (i < lines.length - 1) {
-          a.appendChild(document.createElement('br'));
+        case 'style': {
+          // Make sure that allowed properties do not interfere with link visibility.
+          const ALLOWED_PROPERTY_PREFIXES =
+              ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
+          currentStyle.clear();
+          const buffer = document.createElement('span');
+          buffer.setAttribute('style', token.value);
+          for (const property of buffer.style) {
+            if (!ALLOWED_PROPERTY_PREFIXES.some(
+                    prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
+              continue;
+            }
+            currentStyle.set(property, {
+              value: buffer.style.getPropertyValue(property),
+              priority: buffer.style.getPropertyPriority(property),
+            });
+          }
+          break;
         }
       }
-      return a;
     }
-
-    function applyCurrentStyle(element: HTMLElement): void {
-      if (!currentStyle) {
-        return;
-      }
-      for (const [property, {value, priority}] of currentStyle.entries()) {
-        element.style.setProperty((property as string), value, priority);
-      }
-    }
-
-    // Platform.StringUtilities.format does treat formattedResult like a Builder, result is an object.
-    return Platform.StringUtilities.format(format, parameters, formatters, formattedResult, append.bind(this));
+    return args;
   }
 
   matchesFilterRegex(regexObject: RegExp): boolean {

package/front_end/panels/console/console.ts

@@ -4,6 +4,7 @@
 
 import './ConsoleContextSelector.js';
 import './ConsoleFilter.js';
+import './ConsoleFormat.js';
 import './ConsolePinPane.js';
 import './ConsoleSidebar.js';
 import './ConsoleViewport.js';
@@ -14,6 +15,7 @@ import './ConsolePanel.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
 import * as ConsoleFilter from './ConsoleFilter.js';
+import * as ConsoleFormat from './ConsoleFormat.js';
 import * as ConsolePanel from './ConsolePanel.js';
 import * as ConsolePinPane from './ConsolePinPane.js';
 import * as ConsolePrompt from './ConsolePrompt.js';
@@ -25,6 +27,7 @@ import * as ConsoleViewport from './ConsoleViewport.js';
 export {
   ConsoleContextSelector,
   ConsoleFilter,
+  ConsoleFormat,
   ConsolePanel,
   ConsolePinPane,
   ConsolePrompt,

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -104,13 +104,17 @@ export class SizeInputElement extends HTMLElement {
   }
 
   #handleModifierKeys(event: Event): void {
-    const modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
+    let modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
     if (modifiedValue === null) {
       return;
     }
 
+    modifiedValue = Math.min(modifiedValue, EmulationModel.DeviceModeModel.MaxDeviceSize);
+    modifiedValue = Math.max(modifiedValue, EmulationModel.DeviceModeModel.MinDeviceSize);
+
     event.preventDefault();
     (event.target as HTMLInputElement).value = String(modifiedValue);
+    this.dispatchEvent(new SizeChangedEvent(modifiedValue));
   }
 }
 

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -56,8 +56,9 @@ export class SettingCheckbox extends HTMLElement {
         LitHtml.html`
       <p>
         <label>
-          <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${this.#disabled} @change=${
-            this.#checkboxChanged} aria-label=${this.#setting.title()} /> ${this.#setting.title()}
+          <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${
+            this.#disabled || this.#setting.disabled()} @change=${this.#checkboxChanged} aria-label=${
+            this.#setting.title()} /> ${this.#setting.title()}
         </label>
       </p>`,
         this.#shadow, {host: this});

package/front_end/ui/legacy/SettingsUI.ts

@@ -110,6 +110,7 @@ const createSettingSelect = function(
         select.selectedIndex = i;
       }
     }
+    select.disabled = setting.disabled();
   }
 
   function selectChanged(): void {

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.954163"
+  "version": "1.0.954271"
 }