chrome-devtools-frontend 1.0.1676824 → 1.0.1678416

package/AUTHORS

@@ -112,6 +112,7 @@ Varun Varada <varuncvarada@gmail.com>
 Vishwa Kalubowila <vishwa.kalubowila@codimite.com>
 Vitali Zaidman <vzaidman@gmail.com>
 Will Hernandez <w.hernandez.code@gmail.com>
+Yao Wu <ywu16212@gmail.com>
 Yeol Park <peary2@gmail.com>
 Yisi(一丝) <yiorsi@gmail.com>
 Yoichiro Hibara <hibarayoichiro871@gmail.com>

package/front_end/core/common/EventTarget.ts

@@ -40,11 +40,6 @@ export interface EventTarget<Events> {
       ...[eventData]: EventPayloadToRestParameters<Events, T>): void;
 }
 
-export function fireEvent(name: string, detail: unknown = {}, target: HTMLElement|Window = window): void {
-  const evt = new CustomEvent(name, {bubbles: true, cancelable: true, detail});
-  target.dispatchEvent(evt);
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface EventTargetEvent<T, Events = any> {
   data: T;

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -557,5 +557,6 @@ export const enum EnumeratedHistogram {
   SwatchActivated = 'DevTools.SwatchActivated',
   BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
   ResendRequest = 'DevTools.ResendRequest',
+  EditResendRequest = 'DevTools.EditResendRequest',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/UserMetrics.ts

@@ -36,6 +36,11 @@ export class UserMetrics {
                                                             ResendRequestType.MAX_VALUE);
   }
 
+  editResendRequest(type: ResendRequestType): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.EditResendRequest, type,
+                                                            ResendRequestType.MAX_VALUE);
+  }
+
   keybindSetSettingChanged(keybindSet: string): void {
     const value = KeybindSetSettings[keybindSet as keyof typeof KeybindSetSettings] || 0;
     InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.KeybindSetSettingChanged, value,

package/front_end/core/root/Runtime.ts

@@ -540,6 +540,10 @@ interface HostConfigDevToolsComments {
   enabled: boolean;
 }
 
+interface DevToolsAriaLiveRecording {
+  enabled: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -595,6 +599,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAdsPanel: DevToolsAdsPanel,
   devToolsUseGcaApi: UseGcaApi,
   devToolsPlusButton: DevToolsPlusButton,
+  devToolsAriaLiveRecording: DevToolsAriaLiveRecording,
   devToolsInstrumentationBreakpoints: DevToolsInstrumentationBreakpoints,
   extensionsOnChromeUrls: ExtensionsOnChromeUrls,
   devToolsComments: HostConfigDevToolsComments,

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -456,13 +456,14 @@ export class ColorMixMatcher extends matcherBase(ColorMixMatch) {
       return null;
     }
     const computedValueArgs = ASTUtils.callArgs(value);
-    if (computedValueArgs.length !== 3) {
+    if (computedValueArgs.length !== 2 && computedValueArgs.length !== 3) {
       return null;
     }
 
-    const [space, color1, color2] = computedValueArgs;
-    // Verify that all arguments are there, and that the space starts with a literal `in`.
-    if (space.length < 2 || computedValueTree.text(ASTUtils.stripComments(space).next().value) !== 'in' ||
+    const [space, color1, color2] = computedValueArgs.length === 3 ? computedValueArgs : [[], ...computedValueArgs];
+    // Verify that all arguments are there, and that an optional interpolation method starts with a literal `in`.
+    if ((space.length > 0 &&
+         (space.length < 2 || computedValueTree.text(ASTUtils.stripComments(space).next().value) !== 'in')) ||
         color1.length < 1 || color2.length < 1) {
       return null;
     }
@@ -483,10 +484,11 @@ export class ColorMixMatcher extends matcherBase(ColorMixMatch) {
     }
 
     const args = ASTUtils.callArgs(node);
-    if (args.length !== 3) {
+    if (args.length !== computedValueArgs.length) {
       return null;
     }
-    return new ColorMixMatch(matching.ast.text(node), node, args[0], args[1], args[2]);
+    const [authoredSpace, authoredColor1, authoredColor2] = args.length === 3 ? args : [[], ...args];
+    return new ColorMixMatch(matching.ast.text(node), node, authoredSpace, authoredColor1, authoredColor2);
   }
 }
 

package/front_end/core/sdk/DebuggerModel.ts

@@ -16,9 +16,12 @@ import {type EvaluationOptions, type EvaluationResult, type ExecutionContext, Ru
 import {Script} from './Script.js';
 import {SDKModel} from './SDKModel.js';
 import {
+  breakpointsActiveSettingDescriptor,
+  disableAsyncStackTracesSettingDescriptor,
   jsSourceMapsEnabledSettingDescriptor,
   pauseOnCaughtExceptionSettingDescriptor,
   pauseOnExceptionEnabledSettingDescriptor,
+  pauseOnUncaughtExceptionSettingDescriptor,
 } from './SDKSettings.js';
 import {SourceMap} from './SourceMap.js';
 import {SourceMapManager} from './SourceMapManager.js';
@@ -155,6 +158,12 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   #selectedCallFrame: CallFrame|null = null;
   #debuggerEnabled = false;
   #debuggerId: string|null = null;
+  readonly #pauseOnExceptionEnabledSetting: Common.Settings.Setting<boolean>;
+  readonly #pauseOnCaughtExceptionSetting: Common.Settings.Setting<boolean>;
+  readonly #pauseOnUncaughtExceptionSetting: Common.Settings.Setting<boolean>;
+  readonly #disableAsyncStackTracesSetting: Common.Settings.Setting<boolean>;
+  readonly #breakpointsActiveSetting: Common.Settings.Setting<boolean>;
+  readonly #jsSourceMapsEnabledSetting: Common.Settings.Setting<boolean>;
   readonly #skipAllPausesSetting: Common.Settings.Setting<boolean>;
   #skipAllPausesTimeout?: ReturnType<typeof setTimeout>;
   #beforePausedCallback: ((arg0: DebuggerPausedDetails, stepOver: Location|null) => Promise<boolean>)|null = null;
@@ -186,24 +195,27 @@ export class DebuggerModel extends SDKModel<EventTypes> {
                                  compiledURL, sourceMappingURL, payload, target.targetManager().getConsole(), script));
 
     const settings = this.target().targetManager().settings;
+    this.#pauseOnExceptionEnabledSetting = settings.resolve(pauseOnExceptionEnabledSettingDescriptor);
+    this.#pauseOnExceptionEnabledSetting.addChangeListener(this.pauseOnExceptionStateChanged, this);
+    this.#pauseOnCaughtExceptionSetting = settings.resolve(pauseOnCaughtExceptionSettingDescriptor);
+    this.#pauseOnCaughtExceptionSetting.addChangeListener(this.pauseOnExceptionStateChanged, this);
+    this.#pauseOnUncaughtExceptionSetting = settings.resolve(pauseOnUncaughtExceptionSettingDescriptor);
+    this.#pauseOnUncaughtExceptionSetting.addChangeListener(this.pauseOnExceptionStateChanged, this);
+    this.#disableAsyncStackTracesSetting = settings.resolve(disableAsyncStackTracesSettingDescriptor);
+    this.#disableAsyncStackTracesSetting.addChangeListener(this.asyncStackTracesStateChanged, this);
+    this.#breakpointsActiveSetting = settings.resolve(breakpointsActiveSettingDescriptor);
+    this.#breakpointsActiveSetting.addChangeListener(this.breakpointsActiveChanged, this);
     this.#skipAllPausesSetting = settings.resolve(skipAllPausesSettingDescriptor);
-    settings.resolve(pauseOnExceptionEnabledSettingDescriptor)
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    settings.resolve(pauseOnCaughtExceptionSettingDescriptor)
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
     this.#skipAllPausesSetting.addChangeListener(this.skipAllPausesChanged, this);
-    settings.moduleSetting('pause-on-uncaught-exception').addChangeListener(this.pauseOnExceptionStateChanged, this);
-    settings.moduleSetting('disable-async-stack-traces').addChangeListener(this.asyncStackTracesStateChanged, this);
-    settings.moduleSetting('breakpoints-active').addChangeListener(this.breakpointsActiveChanged, this);
+
+    this.#jsSourceMapsEnabledSetting = settings.resolve(jsSourceMapsEnabledSettingDescriptor);
+    this.#jsSourceMapsEnabledSetting.addChangeListener(this.jsSourceMapsStateChanged, this);
+    this.#sourceMapManager.setEnabled(this.#jsSourceMapsEnabledSetting.get());
 
     if (!target.suspended()) {
       void this.enableDebugger();
     }
 
-    this.#sourceMapManager.setEnabled(settings.resolve(jsSourceMapsEnabledSettingDescriptor).get());
-    settings.resolve(jsSourceMapsEnabledSettingDescriptor)
-        .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
-
     const resourceTreeModel = (target.model(ResourceTreeModel) as ResourceTreeModel);
     if (resourceTreeModel) {
       resourceTreeModel.addEventListener(ResourceTreeModelEvents.FrameNavigated, this.onFrameNavigated, this);
@@ -281,10 +293,9 @@ export class DebuggerModel extends SDKModel<EventTypes> {
         instrumentation: Protocol.Debugger.SetInstrumentationBreakpointRequestInstrumentation.BeforeScriptExecution,
       });
     }
-    const settings = this.target().targetManager().settings;
     this.pauseOnExceptionStateChanged();
     void this.asyncStackTracesStateChanged();
-    if (!settings.moduleSetting('breakpoints-active').get()) {
+    if (!this.#breakpointsActiveSetting.get()) {
       this.breakpointsActiveChanged();
     }
     this.dispatchEventToListeners(Events.DebuggerWasEnabled, this);
@@ -386,12 +397,15 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     );
   }
 
+  private jsSourceMapsStateChanged(): void {
+    this.#sourceMapManager.setEnabled(this.#jsSourceMapsEnabledSetting.get());
+  }
+
   private pauseOnExceptionStateChanged(): void {
-    const settings = this.target().targetManager().settings;
-    const pauseOnCaughtEnabled = settings.resolve(pauseOnCaughtExceptionSettingDescriptor).get();
+    const pauseOnCaughtEnabled = this.#pauseOnCaughtExceptionSetting.get();
     let state: Protocol.Debugger.SetPauseOnExceptionsRequestState;
 
-    const pauseOnUncaughtEnabled = settings.moduleSetting('pause-on-uncaught-exception').get();
+    const pauseOnUncaughtEnabled = this.#pauseOnUncaughtExceptionSetting.get();
     if (pauseOnCaughtEnabled && pauseOnUncaughtEnabled) {
       state = Protocol.Debugger.SetPauseOnExceptionsRequestState.All;
     } else if (pauseOnCaughtEnabled) {
@@ -406,15 +420,13 @@ export class DebuggerModel extends SDKModel<EventTypes> {
 
   private asyncStackTracesStateChanged(): Promise<Protocol.ProtocolResponseWithError> {
     const maxAsyncStackChainDepth = 32;
-    const settings = this.target().targetManager().settings;
-    const enabled = !settings.moduleSetting('disable-async-stack-traces').get() && this.#debuggerEnabled;
+    const enabled = !this.#disableAsyncStackTracesSetting.get() && this.#debuggerEnabled;
     const maxDepth = enabled ? maxAsyncStackChainDepth : 0;
     return this.agent.invoke_setAsyncCallStackDepth({maxDepth});
   }
 
   private breakpointsActiveChanged(): void {
-    const settings = this.target().targetManager().settings;
-    void this.agent.invoke_setBreakpointsActive({active: settings.moduleSetting('breakpoints-active').get()});
+    void this.agent.invoke_setBreakpointsActive({active: this.#breakpointsActiveSetting.get()});
   }
 
   setComputeAutoStepRangesCallback(callback: ((arg0: StepMode, arg1: CallFrame) => Promise<LocationRange[]>)|null):
@@ -648,6 +660,11 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       return;
     }
 
+    if (this.#skipAllPausesSetting.get()) {
+      this.resume();
+      return;
+    }
+
     const pausedDetails =
         new DebuggerPausedDetails(this, callFrames, reason, auxData, breakpointIds, asyncStackTrace, asyncStackTraceId);
 
@@ -665,8 +682,6 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       } else {
         void this.stepInto();
       }
-    } else {
-      Common.EventTarget.fireEvent('DevTools.DebuggerPaused');
     }
   }
 
@@ -898,13 +913,13 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     if (this.#debuggerId) {
       debuggerIdToModel.delete(this.#debuggerId);
     }
-    const settings = this.target().targetManager().settings;
-    settings.resolve(pauseOnExceptionEnabledSettingDescriptor)
-        .removeChangeListener(this.pauseOnExceptionStateChanged, this);
-    settings.resolve(pauseOnCaughtExceptionSettingDescriptor)
-        .removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    this.#pauseOnExceptionEnabledSetting.removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    this.#pauseOnCaughtExceptionSetting.removeChangeListener(this.pauseOnExceptionStateChanged, this);
     this.#skipAllPausesSetting.removeChangeListener(this.skipAllPausesChanged, this);
-    settings.moduleSetting('disable-async-stack-traces').removeChangeListener(this.asyncStackTracesStateChanged, this);
+    this.#pauseOnUncaughtExceptionSetting.removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    this.#disableAsyncStackTracesSetting.removeChangeListener(this.asyncStackTracesStateChanged, this);
+    this.#breakpointsActiveSetting.removeChangeListener(this.breakpointsActiveChanged, this);
+    this.#jsSourceMapsEnabledSetting.removeChangeListener(this.jsSourceMapsStateChanged, this);
   }
 
   override async suspendModel(): Promise<void> {

package/front_end/core/sdk/EmulationModel.ts

@@ -9,6 +9,7 @@ import {CSSModel} from './CSSModel.js';
 import type {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events, OverlayModel} from './OverlayModel.js';
 import {SDKModel} from './SDKModel.js';
+import {javaScriptDisabledSettingDescriptor} from './SDKSettings.js';
 import {Capability, type Target} from './Target.js';
 
 export const enum DataSaverOverride {
@@ -52,7 +53,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
     }
 
     const settings = this.target().targetManager().settings;
-    const disableJavascriptSetting = settings.moduleSetting('java-script-disabled');
+    const disableJavascriptSetting = settings.resolve(javaScriptDisabledSettingDescriptor);
     disableJavascriptSetting.addChangeListener(
         async () =>
             await this.#emulationAgent.invoke_setScriptExecutionDisabled({value: disableJavascriptSetting.get()}));

package/front_end/core/sdk/NetworkManager.ts

@@ -134,6 +134,13 @@ const FULL_FIDELITY_RESEND_TYPES = new Set([
   Common.ResourceType.resourceTypes.SourceMapStyleSheet,
 ]);
 
+/** Resource types eligible for resend but with reduced fidelity. */
+const PARTIAL_FIDELITY_RESEND_TYPES = new Set([
+  Common.ResourceType.resourceTypes.Document,
+  Common.ResourceType.resourceTypes.Prefetch,
+  Common.ResourceType.resourceTypes.Ping,
+]);
+
 const CONNECTION_TYPES = new Map([
   ['2g', Protocol.Network.ConnectionType.Cellular2g],
   ['3g', Protocol.Network.ConnectionType.Cellular3g],
@@ -211,11 +218,18 @@ export class NetworkManager extends SDKModel<EventTypes> {
     return requestToManagerMap.get(request) || null;
   }
 
-  static canResendRequest(request: NetworkRequest): boolean {
+  static canResendRequest(request: NetworkRequest, fullFidelity: boolean): boolean {
     if (!requestToManagerMap.get(request) || !request.backendRequestId() || request.isRedirect()) {
       return false;
     }
-    return FULL_FIDELITY_RESEND_TYPES.has(request.resourceType());
+    const type = request.resourceType();
+    if (FULL_FIDELITY_RESEND_TYPES.has(type)) {
+      return true;
+    }
+    if (!fullFidelity && PARTIAL_FIDELITY_RESEND_TYPES.has(type)) {
+      return true;
+    }
+    return false;
   }
 
   static replayRequest(request: NetworkRequest): void {

package/front_end/core/sdk/OverlayModel.ts

@@ -14,6 +14,16 @@ import {DeferredDOMNode, DOMModel, type DOMNode, DOMNodeEvents, Events as DOMMod
 import {OverlayPersistentHighlighter} from './OverlayPersistentHighlighter.js';
 import type {RemoteObject} from './RemoteObject.js';
 import {SDKModel} from './SDKModel.js';
+import {
+  apcaSettingDescriptor,
+  showAdHighlightsSettingDescriptor,
+  showDebugBordersSettingDescriptor,
+  showFPSCounterSettingDescriptor,
+  showLayoutShiftRegionsSettingDescriptor,
+  showMetricsRulersSettingDescriptor,
+  showPaintRectsSettingDescriptor,
+  showScrollBottleneckRectsSettingDescriptor,
+} from './SDKSettings.js';
 import {Capability, type Target} from './Target.js';
 import type {TargetManager} from './TargetManager.js';
 
@@ -126,12 +136,12 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     this.#defaultHighlighter = new DefaultHighlighter(this);
     this.#highlighter = this.#defaultHighlighter;
 
-    this.#showPaintRectsSetting = settings.moduleSetting<boolean>('show-paint-rects');
-    this.#showLayoutShiftRegionsSetting = settings.moduleSetting<boolean>('show-layout-shift-regions');
-    this.#showAdHighlightsSetting = settings.moduleSetting<boolean>('show-ad-highlights');
-    this.#showDebugBordersSetting = settings.moduleSetting<boolean>('show-debug-borders');
-    this.#showFPSCounterSetting = settings.moduleSetting<boolean>('show-fps-counter');
-    this.#showScrollBottleneckRectsSetting = settings.moduleSetting<boolean>('show-scroll-bottleneck-rects');
+    this.#showPaintRectsSetting = settings.resolve(showPaintRectsSettingDescriptor);
+    this.#showLayoutShiftRegionsSetting = settings.resolve(showLayoutShiftRegionsSettingDescriptor);
+    this.#showAdHighlightsSetting = settings.resolve(showAdHighlightsSettingDescriptor);
+    this.#showDebugBordersSetting = settings.resolve(showDebugBordersSettingDescriptor);
+    this.#showFPSCounterSetting = settings.resolve(showFPSCounterSettingDescriptor);
+    this.#showScrollBottleneckRectsSetting = settings.resolve(showScrollBottleneckRectsSettingDescriptor);
 
     if (!target.suspended()) {
       void this.overlayAgent.invoke_enable();
@@ -563,7 +573,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   private buildHighlightConfig(mode: string|undefined = 'all', showDetailedToolip: boolean|undefined = false):
       Protocol.Overlay.HighlightConfig {
     const settings = this.target().targetManager().settings;
-    const showRulers = settings.moduleSetting('show-metrics-rulers').get();
+    const showRulers = settings.resolve(showMetricsRulersSettingDescriptor).get();
     const highlightConfig: Protocol.Overlay.HighlightConfig = {
       showInfo: mode === 'all' || mode === 'container-outline',
       showRulers,
@@ -573,8 +583,8 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
       gridHighlightConfig: {},
       flexContainerHighlightConfig: {},
       flexItemHighlightConfig: {},
-      contrastAlgorithm: settings.moduleSetting('apca').get() ? Protocol.Overlay.ContrastAlgorithm.Apca :
-                                                                Protocol.Overlay.ContrastAlgorithm.Aa,
+      contrastAlgorithm: settings.resolve(apcaSettingDescriptor).get() ? Protocol.Overlay.ContrastAlgorithm.Apca :
+                                                                         Protocol.Overlay.ContrastAlgorithm.Aa,
     };
 
     if (mode === 'all' || mode === 'content') {

package/front_end/core/sdk/OverlayPersistentHighlighter.ts

@@ -8,6 +8,12 @@ import * as Platform from '../platform/platform.js';
 
 import type {DOMModel} from './DOMModel.js';
 import {OverlayColorGenerator} from './OverlayColorGenerator.js';
+import {
+  extendGridLinesSettingDescriptor,
+  showGridAreasSettingDescriptor,
+  showGridLineLabelsSettingDescriptor,
+  showGridTrackSizesSettingDescriptor,
+} from './SDKSettings.js';
 
 export const enum HighlightType {
   FLEX = 'FLEX',
@@ -57,10 +63,10 @@ export class OverlayPersistentHighlighter {
 
     this.#persistentHighlightSetting =
         settings.createLocalSetting<PersistentHighlightSettingItem[]>('persistent-highlight-setting', []);
-    this.#showGridLineLabelsSetting = settings.moduleSetting<string>('show-grid-line-labels');
-    this.#extendGridLinesSetting = settings.moduleSetting<boolean>('extend-grid-lines');
-    this.#showGridAreasSetting = settings.moduleSetting<boolean>('show-grid-areas');
-    this.#showGridTrackSizesSetting = settings.moduleSetting<boolean>('show-grid-track-sizes');
+    this.#showGridLineLabelsSetting = settings.resolve(showGridLineLabelsSettingDescriptor);
+    this.#extendGridLinesSetting = settings.resolve(extendGridLinesSettingDescriptor);
+    this.#showGridAreasSetting = settings.resolve(showGridAreasSettingDescriptor);
+    this.#showGridTrackSizesSetting = settings.resolve(showGridTrackSizesSettingDescriptor);
 
     this.#showGridLineLabelsSetting.addChangeListener(this.onSettingChange, this);
     this.#extendGridLinesSetting.addChangeListener(this.onSettingChange, this);

package/front_end/core/sdk/SDKSettings.ts

@@ -36,3 +36,120 @@ export const pauseOnCaughtExceptionSettingDescriptor: Common.Settings.SettingDes
   type: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
 };
+
+export const pauseOnUncaughtExceptionSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'pause-on-uncaught-exception',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+};
+
+export const javaScriptDisabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'java-script-disabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const disableAsyncStackTracesSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'disable-async-stack-traces',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+};
+
+export const breakpointsActiveSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'breakpoints-active',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const showMetricsRulersSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-metrics-rulers',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const apcaSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'apca',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const showGridAreasSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-grid-areas',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const showGridTrackSizesSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-grid-track-sizes',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const extendGridLinesSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'extend-grid-lines',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const showGridLineLabelsSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'show-grid-line-labels',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: 'lineNumbers',
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const showPaintRectsSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-paint-rects',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const showLayoutShiftRegionsSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-layout-shift-regions',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const showAdHighlightsSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-ad-highlights',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const showDebugBordersSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-debug-borders',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const showFPSCounterSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-fps-counter',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const showScrollBottleneckRectsSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'show-scroll-bottleneck-rects',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatePageFocusSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'emulate-page-focus',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.LOCAL,
+};