chrome-devtools-frontend 1.0.953446 → 1.0.954271

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/generated/InspectorBackendCommands.js

@@ -2262,7 +2262,9 @@ export function registerCommands(inspectorBackend) {
   inspectorBackend.registerEvent(
       'Page.javascriptDialogOpening', ['url', 'message', 'type', 'hasBrowserHandler', 'defaultPrompt']);
   inspectorBackend.registerEvent('Page.lifecycleEvent', ['frameId', 'loaderId', 'name', 'timestamp']);
-  inspectorBackend.registerEvent('Page.backForwardCacheNotUsed', ['loaderId', 'frameId', 'notRestoredExplanations']);
+  inspectorBackend.registerEvent(
+      'Page.backForwardCacheNotUsed',
+      ['loaderId', 'frameId', 'notRestoredExplanations', 'notRestoredExplanationsTree']);
   inspectorBackend.registerEvent('Page.loadEventFired', ['timestamp']);
   inspectorBackend.registerEvent('Page.navigatedWithinDocument', ['frameId', 'url']);
   inspectorBackend.registerEvent('Page.screencastFrame', ['data', 'metadata', 'sessionId']);

package/front_end/generated/protocol.d.ts

@@ -10719,6 +10719,21 @@ declare namespace Protocol {
       reason: BackForwardCacheNotRestoredReason;
     }
 
+    export interface BackForwardCacheNotRestoredExplanationTree {
+      /**
+       * URL of each frame
+       */
+      url: string;
+      /**
+       * Not restored reasons of each frame
+       */
+      explanations: BackForwardCacheNotRestoredExplanation[];
+      /**
+       * Array of children frame
+       */
+      children: BackForwardCacheNotRestoredExplanationTree[];
+    }
+
     export interface AddScriptToEvaluateOnLoadRequest {
       scriptSource: string;
     }
@@ -11708,6 +11723,10 @@ declare namespace Protocol {
        * Array of reasons why the page could not be cached. This must not be empty.
        */
       notRestoredExplanations: BackForwardCacheNotRestoredExplanation[];
+      /**
+       * Tree structure of reasons why the page could not be cached for each frame.
+       */
+      notRestoredExplanationsTree?: BackForwardCacheNotRestoredExplanationTree;
     }
 
     export interface LoadEventFiredEvent {

package/front_end/models/extensions/ExtensionServer.ts

@@ -1145,12 +1145,11 @@ export class ExtensionStatus {
   E_FAILED: (...args: unknown[]) => Record;
 
   constructor() {
-    function makeStatus(code: string, description: string): Record {
-      const details = Array.prototype.slice.call(arguments, 2);
+    function makeStatus(code: string, description: string, ...details: unknown[]): Record {
       const status: Record = {code, description, details};
       if (code !== 'OK') {
         status.isError = true;
-        console.error('Extension server error: ' + Platform.StringUtilities.vsprintf(description, details));
+        console.error('Extension server error: ' + Platform.StringUtilities.sprintf(description, ...details));
       }
       return status;
     }

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

@@ -86,7 +86,7 @@ export class EndpointsGrid extends HTMLElement {
           </div>
         `}
       </div>
-    `, this.#shadow);
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 

package/front_end/panels/application/storageView.css

@@ -30,7 +30,7 @@
 }
 
 .quota-override-notification-editor {
-  border: solid 1px var(--color-background-highlight);
+  border: solid 1px var(--color-details-hairline);
   display: flex;
   flex: auto;
   margin-right: 4px;

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/elements/components/AdornerSettingsPane.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Input from '../../../ui/components/input/input.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import adornerSettingsPaneStyles from './adornerSettingsPane.css.js';
 
@@ -48,7 +49,7 @@ export class AdornerSettingsPane extends HTMLElement {
   #settings: AdornerSettingsMap = new Map();
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [adornerSettingsPaneStyles];
+    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, adornerSettingsPaneStyles];
   }
 
   set data(data: AdornerSettingsPaneData) {

package/front_end/panels/elements/components/LayoutPane.ts

@@ -13,6 +13,7 @@ import {LayoutElement} from './LayoutPaneUtils.js';
 import type {NodeTextData} from './NodeText.js';
 import {NodeText} from './NodeText.js';
 import layoutPaneStyles from '../layoutPane.css.js';
+import * as Input from '../../../ui/components/input/input.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 
@@ -103,6 +104,7 @@ export class LayoutPane extends HTMLElement {
   constructor() {
     super();
     this.#shadow.adoptedStyleSheets = [
+      Input.checkboxStyles,
       layoutPaneStyles,
       inspectorCommonStyles,
     ];