chrome-devtools-frontend 1.0.1679704 → 1.0.1681498

package/AUTHORS

@@ -24,6 +24,7 @@ Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>
 Axel Chong <haxatron1@gmail.com>
 Anton Bershanskyi <bershanskyi@gmail.com>
+Ashish Shrees <flowoker1@gmail.com>
 Aviv Keller <me@aviv.sh>
 Biboswan Roy <biboswan98@gmail.com>
 Boris Verkhovskiy <boris.verk@gmail.com>

package/front_end/core/platform/TypescriptUtilities.ts

@@ -17,15 +17,6 @@ export function assertNever(_type: never, message: string): never {
   throw new Error(message);
 }
 
-/**
- * This is useful to check on the type-level that the unhandled cases of
- * a switch are exactly `T` (where T is usually a union type of enum values).
- * @param caseVariable
- */
-export function assertUnhandled<T>(_caseVariable: T): T {
-  return _caseVariable;
-}
-
 export type FieldsThatExtend<Type, Selector> = {
   [Key in keyof Type]: Type[Key] extends Selector ? Key : never;
 }[keyof Type];

package/front_end/core/platform/platform.ts

@@ -24,7 +24,7 @@ import * as UserVisibleError from './UserVisibleError.js';
  * `Platform.TypeScriptUtilities.assertNotNullOrUndefined` causes a compile
  * error).
  */
-export {assertNever, assertNotNullOrUndefined, assertUnhandled} from './TypescriptUtilities.js';
+export {assertNever, assertNotNullOrUndefined} from './TypescriptUtilities.js';
 export {
   ArrayUtilities,
   Brand,

package/front_end/core/sdk/ConsoleModel.ts

@@ -34,7 +34,7 @@ import {
   RuntimeModel,
 } from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
-import {preserveConsoleLogSettingDescriptor} from './SDKSettings.js';
+import {consoleUserActivationEvalSettingDescriptor, preserveConsoleLogSettingDescriptor} from './SDKSettings.js';
 import {Capability, type Target, Type} from './Target.js';
 import type {TargetManager} from './TargetManager.js';
 
@@ -156,13 +156,16 @@ export class ConsoleModel extends SDKModel<EventTypes> {
           replMode: true,
           allowUnsafeEvalBlockedByCSP: false,
         },
-        this.target().targetManager().settings.moduleSetting('console-user-activation-eval').get(),
+        this.target().targetManager().settings.resolve(consoleUserActivationEvalSettingDescriptor).get(),
         /* awaitPromise */ false);
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.ConsoleEvaluated);
     if ('error' in result) {
       return;
     }
-    await this.#console.showPromise();
+    try {
+      await this.#console.showPromise();
+    } catch {
+    }
     this.dispatchEventToListeners(
         Events.CommandEvaluated,
         {result: result.object, commandMessage: originatingMessage, exceptionDetails: result.exceptionDetails});

package/front_end/core/sdk/DOMModel.ts

@@ -40,6 +40,7 @@ import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
+import {ConsoleModel} from './ConsoleModel.js';
 import {CSSModel} from './CSSModel.js';
 import type {FrameManager} from './FrameManager.js';
 import {OverlayModel} from './OverlayModel.js';
@@ -1066,6 +1067,102 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
         });
   }
 
+  duplicate(): void {
+    if (this.isInShadowTree()) {
+      return;
+    }
+
+    const parentNode = this.parentNode ? this.parentNode : this;
+    if (parentNode.nodeName() === '#document') {
+      return;
+    }
+
+    this.copyTo(parentNode, this.nextSibling);
+  }
+
+  /**
+   * Runs a script on the node's remote object that toggles a class name on
+   * the node and injects a stylesheet into the head of the node's document
+   * containing a rule to set "visibility: hidden" on the class and all it's
+   * ancestors.
+   */
+  async toggleHideElement(): Promise<void> {
+    let pseudoElementName = this.pseudoType() ? this.nodeName() : null;
+    if (pseudoElementName && this.pseudoIdentifier()) {
+      pseudoElementName += `(${this.pseudoIdentifier()})`;
+    }
+
+    let effectiveNode: DOMNode|null = this;
+    while (effectiveNode?.pseudoType()) {
+      if (effectiveNode !== this && effectiveNode.pseudoType() === 'column') {
+        // Ideally we would select the specific column pseudo element, but
+        // we don't have a way to do that at the moment.
+        pseudoElementName = '::column' + pseudoElementName;
+      }
+      effectiveNode = effectiveNode.parentNode;
+    }
+    if (!effectiveNode) {
+      return;
+    }
+
+    const hidden = this.marker('hidden-marker');
+    const object = await effectiveNode.resolveToObject('');
+
+    if (!object) {
+      return;
+    }
+
+    await object.callFunction((toggleClassAndInjectStyleRule as (this: Object, ...arg1: unknown[]) => void),
+                              [{value: pseudoElementName}, {value: !hidden}]);
+    object.release();
+    this.setMarker('hidden-marker', hidden ? null : true);
+
+    function toggleClassAndInjectStyleRule(this: Element, pseudoElementName: string|null, hidden: boolean): void {
+      const classNamePrefix = '__web-inspector-hide';
+      const classNameSuffix = '-shortcut__';
+      const styleTagId = '__web-inspector-hide-shortcut-style__';
+      const pseudoElementNameEscaped = pseudoElementName ? pseudoElementName.replace(/[\(\)\:]/g, '_') : '';
+      const className = classNamePrefix + pseudoElementNameEscaped + classNameSuffix;
+      this.classList.toggle(className, hidden);
+
+      let localRoot: Element|HTMLHeadElement = this;
+      while (localRoot.parentNode) {
+        localRoot = (localRoot.parentNode as Element);
+      }
+      if (localRoot.nodeType === Node.DOCUMENT_NODE) {
+        localRoot = document.head;
+      }
+
+      let style = localRoot.querySelector('style#' + styleTagId);
+      if (!style) {
+        const selectors = [];
+        selectors.push('.__web-inspector-hide-shortcut__');
+        selectors.push('.__web-inspector-hide-shortcut__ *');
+        const selector = selectors.join(', ');
+        const ruleBody = '    visibility: hidden !important;';
+        const rule = '\n' + selector + '\n{\n' + ruleBody + '\n}\n';
+
+        style = document.createElement('style');
+        style.id = styleTagId;
+        style.textContent = rule;
+
+        localRoot.appendChild(style);
+      }
+
+      // In addition to putting them on the element we want to hide, we will
+      // also add pseudo element classes to the style element to keep track of
+      // which pseudo elements we have style rules for.
+      if (pseudoElementName && !style.classList.contains(className)) {
+        style.classList.add(className);
+        style.textContent = `.${className}${pseudoElementName}, ${style.textContent}`;
+      }
+    }
+  }
+
+  isToggledToHidden(): boolean {
+    return Boolean(this.marker('hidden-marker'));
+  }
+
   isXMLNode(): boolean {
     return Boolean(this.#xmlVersion);
   }
@@ -1238,6 +1335,13 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     };
   }
 
+  async saveNodeToTempVariable(): Promise<void> {
+    const remoteObjectForConsole = await this.resolveToObject();
+    const consoleModel = this.#domModel.target().model(ConsoleModel);
+    await consoleModel?.saveToTempVariable(remoteObjectForConsole?.runtimeModel().defaultExecutionContext() ?? null,
+                                           remoteObjectForConsole);
+  }
+
   async scrollIntoView(): Promise<void> {
     const node = this.enclosingElementOrSelf();
     if (!node) {
@@ -2425,6 +2529,9 @@ export class DOMNodeSnapshot extends DOMNode {
       _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
   }
 
+  override duplicate(): void {
+  }
+
   override canInspectNode(): boolean {
     return false;
   }
@@ -2474,6 +2581,9 @@ export class DOMDocumentSnapshot extends DOMDocument {
       _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
   }
 
+  override duplicate(): void {
+  }
+
   override canInspectNode(): boolean {
     return false;
   }

package/front_end/core/sdk/EmulationModel.ts

@@ -12,6 +12,7 @@ import {SDKModel} from './SDKModel.js';
 import {
   avifFormatDisabledSettingDescriptor,
   cpuPressureSettingDescriptor,
+  emulateAutoDarkModeSettingDescriptor,
   emulatedCSSMediaFeatureColorGamutSettingDescriptor,
   emulatedCSSMediaFeatureForcedColorsSettingDescriptor,
   emulatedCSSMediaFeaturePrefersColorSchemeSettingDescriptor,
@@ -27,6 +28,7 @@ import {
   jpegXlFormatDisabledSettingDescriptor,
   localFontsDisabledSettingDescriptor,
   touchSettingDescriptor,
+  webpFormatDisabledSettingDescriptor,
 } from './SDKSettings.js';
 import {Capability, type Target} from './Target.js';
 
@@ -180,7 +182,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
     });
     void this.updateCssMedia();
 
-    const autoDarkModeSetting = settings.moduleSetting('emulate-auto-dark-mode');
+    const autoDarkModeSetting = settings.resolve(emulateAutoDarkModeSettingDescriptor);
     autoDarkModeSetting.addChangeListener(() => {
       const enabled = autoDarkModeSetting.get();
       mediaFeaturePrefersColorSchemeSetting.set(enabled ? 'dark' : '');
@@ -213,7 +215,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
 
     const avifFormatDisabledSetting = settings.resolve(avifFormatDisabledSettingDescriptor);
     const jpegXlFormatDisabledSetting = settings.resolve(jpegXlFormatDisabledSettingDescriptor);
-    const webpFormatDisabledSetting = settings.moduleSetting('webp-format-disabled');
+    const webpFormatDisabledSetting = settings.resolve(webpFormatDisabledSettingDescriptor);
 
     const updateDisabledImageFormats = (): void => {
       const types = [];

package/front_end/core/sdk/NetworkManager.ts

@@ -26,6 +26,12 @@ import {
 } from './NetworkRequest.js';
 import {type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
+import {
+  cacheDisabledSettingDescriptor,
+  monitoringXHREnabledSettingDescriptor,
+  preserveNetworkLogSettingDescriptor,
+  requestBlockingEnabledSettingDescriptor,
+} from './SDKSettings.js';
 import {Capability, type Target} from './Target.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
 
@@ -187,7 +193,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
     const settings = this.target().targetManager().settings;
     this.activeNetworkThrottlingKey = activeNetworkThrottlingKeySetting(settings);
 
-    if (settings.moduleSetting('cache-disabled').get()) {
+    if (settings.resolve(cacheDisabledSettingDescriptor).get()) {
       void this.#networkAgent.invoke_setCacheDisabled({cacheDisabled: true});
     }
 
@@ -198,7 +204,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
     });
 
     if (Root.Runtime.hostConfig.devToolsEnableDurableMessages?.enabled) {
-      const preserveLogSetting = settings.moduleSetting('network-log.preserve-log');
+      const preserveLogSetting = settings.resolve(preserveNetworkLogSettingDescriptor);
       this.#updateDurableMessages(preserveLogSetting.get());
       preserveLogSetting.addChangeListener(this.preserveLogChanged, this);
     }
@@ -211,7 +217,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
     }
     this.#bypassServiceWorkerSetting.addChangeListener(this.bypassServiceWorkerChanged, this);
 
-    settings.moduleSetting('cache-disabled').addChangeListener(this.cacheDisabledSettingChanged, this);
+    settings.resolve(cacheDisabledSettingDescriptor).addChangeListener(this.cacheDisabledSettingChanged, this);
   }
 
   static forRequest(request: NetworkRequest): NetworkManager|null {
@@ -555,8 +561,8 @@ export class NetworkManager extends SDKModel<EventTypes> {
 
   override dispose(): void {
     const settings = this.target().targetManager().settings;
-    settings.moduleSetting('cache-disabled').removeChangeListener(this.cacheDisabledSettingChanged, this);
-    settings.moduleSetting('network-log.preserve-log').removeChangeListener(this.preserveLogChanged, this);
+    settings.resolve(cacheDisabledSettingDescriptor).removeChangeListener(this.cacheDisabledSettingChanged, this);
+    settings.resolve(preserveNetworkLogSettingDescriptor).removeChangeListener(this.preserveLogChanged, this);
   }
 
   private bypassServiceWorkerChanged(): void {
@@ -1404,7 +1410,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     this.#multitargetNetworkManager.inflightMainResourceRequests.delete(networkRequest.requestId());
 
     const settings = this.#manager.target().targetManager().settings;
-    if (settings.moduleSetting('monitoring-xhr-enabled').get() &&
+    if (settings.resolve(monitoringXHREnabledSettingDescriptor).get() &&
         networkRequest.resourceType().category() === Common.ResourceType.resourceCategories.XHR) {
       let message;
       const failedToLoad = networkRequest.failed || networkRequest.hasErrorStatusCode();
@@ -1992,7 +1998,7 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
   constructor(settings: Common.Settings.Settings) {
     super();
     this.#setting = settings.createSetting<RequestConditionsSetting[]>('network-blocked-patterns', []);
-    this.#conditionsEnabledSetting = settings.moduleSetting<boolean>('request-blocking-enabled');
+    this.#conditionsEnabledSetting = settings.resolve(requestBlockingEnabledSettingDescriptor);
     for (const condition of this.#setting.get()) {
       try {
         this.#conditions.push(RequestCondition.createFromSetting(condition, settings));
@@ -2433,8 +2439,8 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
 
   private async updateInterceptionPatterns(): Promise<void> {
     const settings = this.#targetManager.settings;
-    if (!settings.moduleSetting('cache-disabled').get()) {
-      settings.moduleSetting('cache-disabled').set(true);
+    if (!settings.resolve(cacheDisabledSettingDescriptor).get()) {
+      settings.resolve(cacheDisabledSettingDescriptor).set(true);
     }
     this.#updatingInterceptionPatternsPromise = null;
     const promises = ([] as Array<Promise<unknown>>);

package/front_end/core/sdk/OverlayModel.ts

@@ -16,6 +16,7 @@ import type {RemoteObject} from './RemoteObject.js';
 import {SDKModel} from './SDKModel.js';
 import {
   apcaSettingDescriptor,
+  disablePausedStateOverlaySettingDescriptor,
   showAdHighlightsSettingDescriptor,
   showDebugBordersSettingDescriptor,
   showFPSCounterSettingDescriptor,
@@ -122,7 +123,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     const settings = this.target().targetManager().settings;
     this.#debuggerModel = target.model(DebuggerModel);
     if (this.#debuggerModel) {
-      settings.moduleSetting('disable-paused-state-overlay')
+      settings.resolve(disablePausedStateOverlaySettingDescriptor)
           .addChangeListener(this.updatePausedInDebuggerMessage, this);
       this.#debuggerModel.addEventListener(
           DebuggerModelEvents.DebuggerPaused, this.updatePausedInDebuggerMessage, this);
@@ -313,7 +314,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     }
     const settings = this.target().targetManager().settings;
     const message = this.#debuggerModel && this.#debuggerModel.isPaused() &&
-            !settings.moduleSetting('disable-paused-state-overlay').get() ?
+            !settings.resolve(disablePausedStateOverlaySettingDescriptor).get() ?
         i18nString(UIStrings.pausedInDebugger) :
         undefined;
     void this.overlayAgent.invoke_setPausedInDebuggerMessage({message});

package/front_end/core/sdk/PageResourceLoader.ts

@@ -17,6 +17,7 @@ import {
   type ResourceTreeFrame,
   ResourceTreeModel,
 } from './ResourceTreeModel.js';
+import {cacheDisabledSettingDescriptor, enableRemoteFileLoadingSettingDescriptor} from './SDKSettings.js';
 import type {Target} from './Target.js';
 import {TargetManager} from './TargetManager.js';
 
@@ -433,7 +434,7 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
   }> {
     const networkManager = (target.model(NetworkManager) as NetworkManager);
     const ioModel = (target.model(IOModel) as IOModel);
-    const disableCache = this.#settings.moduleSetting('cache-disabled').get();
+    const disableCache = this.#settings.resolve(cacheDisabledSettingDescriptor).get();
     const resource = await networkManager.loadNetworkResource(frameId, url, {disableCache, includeCredentials: true});
     try {
       const content = resource.stream ?
@@ -470,11 +471,11 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       headers['User-Agent'] = currentUserAgent;
     }
 
-    if (this.#settings.moduleSetting('cache-disabled').get()) {
+    if (this.#settings.resolve(cacheDisabledSettingDescriptor).get()) {
       headers['Cache-Control'] = 'no-cache';
     }
 
-    const allowRemoteFilePaths = this.#settings.moduleSetting('network.enable-remote-file-loading').get();
+    const allowRemoteFilePaths = this.#settings.resolve(enableRemoteFileLoadingSettingDescriptor).get();
 
     return await new Promise(
         resolve => Host.ResourceLoader.load(url, headers, (success, _responseHeaders, content, errorDescription) => {

package/front_end/core/sdk/RuntimeModel.ts

@@ -19,6 +19,7 @@ import {
   ScopeRemoteObject,
 } from './RemoteObject.js';
 import {SDKModel} from './SDKModel.js';
+import {customFormattersSettingDescriptor} from './SDKSettings.js';
 import {Capability, type Target, Type} from './Target.js';
 
 export class RuntimeModel extends SDKModel<EventTypes> {
@@ -32,12 +33,13 @@ export class RuntimeModel extends SDKModel<EventTypes> {
     this.target().registerRuntimeDispatcher(new RuntimeDispatcher(this));
     void this.agent.invoke_enable();
 
-    const settings = this.target().targetManager().context.get(Common.Settings.Settings);
-    if (settings.moduleSetting('custom-formatters').get()) {
+    const customFormattersSetting =
+        this.target().targetManager().context.get(Common.Settings.Settings).resolve(customFormattersSettingDescriptor);
+    if (customFormattersSetting.get()) {
       void this.agent.invoke_setCustomObjectFormatterEnabled({enabled: true});
     }
 
-    settings.moduleSetting('custom-formatters').addChangeListener(this.customFormattersStateChanged.bind(this));
+    customFormattersSetting.addChangeListener(this.customFormattersStateChanged.bind(this));
   }
 
   static isSideEffectFailure(response: Protocol.Runtime.EvaluateResponse|EvaluationResult): boolean {

package/front_end/core/sdk/SDKSettings.ts

@@ -265,3 +265,69 @@ export const jpegXlFormatDisabledSettingDescriptor: Common.Settings.SettingDescr
   defaultValue: false,
   storageType: Common.Settings.SettingStorageType.SESSION,
 };
+
+export const webpFormatDisabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'webp-format-disabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const customFormattersSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'custom-formatters',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+};
+
+export const requestBlockingEnabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'request-blocking-enabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.LOCAL,
+};
+
+export const cacheDisabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'cache-disabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+};
+
+export const emulateAutoDarkModeSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'emulate-auto-dark-mode',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const enableRemoteFileLoadingSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'network.enable-remote-file-loading',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const consoleUserActivationEvalSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'console-user-activation-eval',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+export const monitoringXHREnabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'monitoring-xhr-enabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const disablePausedStateOverlaySettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'disable-paused-state-overlay',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const preserveNetworkLogSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'network-log.preserve-log',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+};

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -230,7 +230,8 @@ export class RenderingOptionsView extends UI.Widget.VBox {
     this.#appendCheckbox(i18nString(UIStrings.emulateAFocusedPage), i18nString(UIStrings.emulatesAFocusedPage),
                          Common.Settings.Settings.instance().resolve(SDK.SDKSettings.emulatePageFocusSettingDescriptor),
                          {toggle: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromRenderingTab});
-    const autoDarkModeSetting = Common.Settings.Settings.instance().moduleSetting('emulate-auto-dark-mode');
+    const autoDarkModeSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.emulateAutoDarkModeSettingDescriptor);
     this.#appendCheckbox(i18nString(UIStrings.emulateAutoDarkMode), i18nString(UIStrings.emulatesAutoDarkMode),
                          autoDarkModeSetting);
 
@@ -284,7 +285,8 @@ export class RenderingOptionsView extends UI.Widget.VBox {
         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.avifFormatDisabledSettingDescriptor);
     const jpegXlFormatDisabledSetting =
         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.jpegXlFormatDisabledSettingDescriptor);
-    const webpFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('webp-format-disabled');
+    const webpFormatDisabledSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.webpFormatDisabledSettingDescriptor);
 
     this.#appendCheckbox(
         i18nString(UIStrings.disableAvifImageFormat), i18nString(UIStrings.requiresAPageReloadToApplyAnd),

package/front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -11,6 +11,11 @@ import * as SettingsUI from '../../ui/settings/settings.js';
 import type * as InspectorMain from './inspector_main.js';
 
 const UIStrings = {
+  /**
+   * @description The name of a checkbox setting in the Rendering tool. This setting
+   * emulates that the webpage is in auto dark mode.
+   */
+  emulateAutoDarkMode: 'Emulate auto dark mode',
   /**
    * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
    */
@@ -296,6 +301,14 @@ const UIStrings = {
    * @description Title of a setting that enables JPEG XL format.
    */
   enableJpegXlFormat: 'Enable `JPEG XL` format',
+  /**
+   * @description Title of a setting that disables WebP format.
+   */
+  disableWebpFormat: 'Disable `WebP` format',
+  /**
+   * @description Title of a setting that enables WebP format.
+   */
+  enableWebpFormat: 'Enable `WebP` format',
   /**
    * @description Title of an action that reloads the inspected page.
    */
@@ -938,3 +951,22 @@ SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.jpegXlFormatDisabledSe
     },
   ],
 });
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.webpFormatDisabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.disableWebpFormat),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.enableWebpFormat),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.emulateAutoDarkModeSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  title: i18nLazyString(UIStrings.emulateAutoDarkMode),
+});

package/front_end/entrypoints/main/MainImpl.ts

@@ -216,7 +216,7 @@ export class MainImpl {
 
     // Mark 'cache-disabled' as requiring user interaction when multiple CDP clients are attached.
     if (Root.Runtime.Runtime.queryParam('hasOtherClients')) {
-      this.#universe.settings.moduleSetting('cache-disabled').setRequiresUserAction(true);
+      this.#universe.settings.resolve(SDK.SDKSettings.cacheDisabledSettingDescriptor).setRequiresUserAction(true);
     }
 
     Root.Runtime.experiments.removeAllExperimentsFromLocalStorage();

package/front_end/entrypoints/main/main-meta.ts

@@ -8,14 +8,62 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Badges from '../../models/badges/badges.js';
+import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 import type * as InspectorMain from '../inspector_main/inspector_main.js';
 
 import type * as Main from './main.js';
 
 const UIStrings = {
+  /**
+   * @description Title of a setting under the Persistence category in Settings.
+   */
+  localOverrides: 'Local overrides',
+  /**
+   * @description A tag of enable local overrides setting that can be searched in the command menu.
+   */
+  interception: 'interception',
+  /**
+   * @description A tag of enable local overrides setting that can be searched in the command menu.
+   */
+  override: 'override',
+  /**
+   * @description A tag of group network by frame setting that can be searched in the command menu.
+   */
+  network: 'network',
+  /**
+   * @description A tag of enable local overrides setting that can be searched in the command menu.
+   */
+  rewrite: 'rewrite',
+  /**
+   * @description A tag of enable local overrides setting that can be searched in the command menu.
+   * Noun for network request.
+   */
+  request: 'request',
+  /**
+   * @description Title of an option under the Persistence category that can be invoked through the command menu.
+   */
+  enableOverrideNetworkRequests: 'Enable override network requests',
+  /**
+   * @description Title of an option under the Persistence category that can be invoked through the command menu.
+   */
+  disableOverrideNetworkRequests: 'Disable override network requests',
+  /**
+   * @description Label for a checkbox in the settings UI. Allows developers to opt-in/opt-out
+   * of receiving Google Developer Program (GDP) badges based on their activity in Chrome DevTools.
+   */
+  earnBadges: 'Earn badges',
+  /**
+   * @description Title of a setting under the Appearance category in Settings. When the webpage is
+   * paused by devtools, an overlay is shown on top of the page to indicate that it is paused. The
+   * overlay is a pause/unpause button and some text, which appears on top of the paused page. This
+   * setting turns off this overlay.
+   */
+  disablePaused: 'Disable paused state overlay',
   /**
    * @description Action title to focus the page being debugged.
    */
@@ -719,6 +767,11 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.disablePausedStateOverlaySettingDescriptor, {
+  category: Common.Settings.SettingCategory.APPEARANCE,
+  title: i18nLazyString(UIStrings.disablePaused),
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.GLOBAL,
   settingName: 'currentDockState',
@@ -790,6 +843,35 @@ Common.Settings.registerSettingExtension({
   reloadRequired: true,
 });
 
+SettingsUI.SettingUIRegistration.register(Badges.receiveGdpBadgesSettingDescriptor, {
+  category: Common.Settings.SettingCategory.ACCOUNT,
+  title: i18nLazyString(UIStrings.earnBadges),
+  reloadRequired: true,
+});
+
+SettingsUI.SettingUIRegistration.register(
+    Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor, {
+      category: Common.Settings.SettingCategory.PERSISTENCE,
+      title: i18nLazyString(UIStrings.localOverrides),
+      tags: [
+        i18nLazyString(UIStrings.interception),
+        i18nLazyString(UIStrings.override),
+        i18nLazyString(UIStrings.network),
+        i18nLazyString(UIStrings.rewrite),
+        i18nLazyString(UIStrings.request),
+      ],
+      options: [
+        {
+          value: true,
+          title: i18nLazyString(UIStrings.enableOverrideNetworkRequests),
+        },
+        {
+          value: false,
+          title: i18nLazyString(UIStrings.disableOverrideNetworkRequests),
+        },
+      ],
+    });
+
 Common.Settings.registerSettingExtension({
   storageType: Common.Settings.SettingStorageType.SYNCED,
   settingName: 'user-shortcuts',