chrome-devtools-frontend 1.0.1681091 → 1.0.1681498

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';
@@ -1334,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) {

package/front_end/core/sdk/NetworkManager.ts

@@ -26,7 +26,12 @@ import {
 } from './NetworkRequest.js';
 import {type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
-import {cacheDisabledSettingDescriptor, requestBlockingEnabledSettingDescriptor} from './SDKSettings.js';
+import {
+  cacheDisabledSettingDescriptor,
+  monitoringXHREnabledSettingDescriptor,
+  preserveNetworkLogSettingDescriptor,
+  requestBlockingEnabledSettingDescriptor,
+} from './SDKSettings.js';
 import {Capability, type Target} from './Target.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
 
@@ -199,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);
     }
@@ -557,7 +562,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
   override dispose(): void {
     const settings = this.target().targetManager().settings;
     settings.resolve(cacheDisabledSettingDescriptor).removeChangeListener(this.cacheDisabledSettingChanged, this);
-    settings.moduleSetting('network-log.preserve-log').removeChangeListener(this.preserveLogChanged, this);
+    settings.resolve(preserveNetworkLogSettingDescriptor).removeChangeListener(this.preserveLogChanged, this);
   }
 
   private bypassServiceWorkerChanged(): void {
@@ -1405,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();

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/SDKSettings.ts

@@ -312,3 +312,22 @@ export const consoleUserActivationEvalSettingDescriptor: Common.Settings.Setting
   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/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',

package/front_end/entrypoints/shell/shell.ts

@@ -16,13 +16,10 @@ import '../../panels/changes/changes-meta.js';
 import '../../panels/linear_memory_inspector/linear_memory_inspector-meta.js';
 import '../../panels/settings/settings-meta.js';
 import '../../panels/protocol_monitor/protocol_monitor-meta.js';
-import '../../models/persistence/persistence-meta.js';
 import '../../models/logs/logs-meta.js';
-import '../../models/badges/badges-meta.js';
 import '../main/main-meta.js';
 import '../../ui/legacy/components/perf_ui/perf_ui-meta.js';
 import '../../ui/legacy/components/quick_open/quick_open-meta.js';
-import '../../core/sdk/sdk-meta.js';
 import '../../models/workspace/workspace-meta.js';
 import '../../ui/legacy/components/source_frame/source_frame-meta.js';
 import '../../panels/console_counters/console_counters-meta.js';

package/front_end/entrypoints/trace_app/trace_app.ts

@@ -4,7 +4,6 @@
 // found in the LICENSE file.
 import '../main/main-meta.js';
 import '../inspector_main/inspector_main-meta.js';
-import '../../core/sdk/sdk-meta.js';
 import '../../models/workspace/workspace-meta.js';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: tsc 6.0 does not support side-effect imports without a type definition.
@@ -12,8 +11,6 @@ import '../../models/workspace/workspace-meta.js';
 // when bundling the application (which doesn't error) and only errors in unbundled builds.
 import '../../Images/Images.js';
 import '../../models/logs/logs-meta.js';
-import '../../models/persistence/persistence-meta.js';
-import '../../models/badges/badges-meta.js';
 import '../../panels/browser_debugger/browser_debugger-meta.js';
 import '../../panels/developer_resources/developer_resources-meta.js';
 // panels/timeline depends on mobile_throttling for settings UI

package/front_end/models/ai_code_completion/debug.ts

@@ -6,8 +6,10 @@
  * @file Local debugging utilities.
  */
 
+import * as Platform from '../../core/platform/platform.js';
+
 export function isDebugMode(): boolean {
-  return Boolean(localStorage.getItem('debugAiCodeCompletionEnabled'));
+  return Boolean(Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('debugAiCodeCompletionEnabled'));
 }
 
 export function debugLog(...log: unknown[]): void {
@@ -20,10 +22,11 @@ export function debugLog(...log: unknown[]): void {
 }
 
 function setDebugAiCodeCompletionEnabled(enabled: boolean): void {
+  const localStorage = Platform.HostRuntime.HOST_RUNTIME.getLocalStorage();
   if (enabled) {
-    localStorage.setItem('debugAiCodeCompletionEnabled', 'true');
+    localStorage?.setItem('debugAiCodeCompletionEnabled', 'true');
   } else {
-    localStorage.removeItem('debugAiCodeCompletionEnabled');
+    localStorage?.removeItem('debugAiCodeCompletionEnabled');
   }
 }
 // @ts-expect-error

package/front_end/models/ai_code_generation/debug.ts

@@ -6,8 +6,10 @@
  * @file Local debugging utilities.
  */
 
+import * as Platform from '../../core/platform/platform.js';
+
 export function isDebugMode(): boolean {
-  return Boolean(localStorage.getItem('debugAiCodeGenerationEnabled'));
+  return Boolean(Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('debugAiCodeGenerationEnabled'));
 }
 
 export function debugLog(...log: unknown[]): void {
@@ -20,10 +22,11 @@ export function debugLog(...log: unknown[]): void {
 }
 
 function setDebugAiCodeGenerationEnabled(enabled: boolean): void {
+  const localStorage = Platform.HostRuntime.HOST_RUNTIME.getLocalStorage();
   if (enabled) {
-    localStorage.setItem('debugAiCodeGenerationEnabled', 'true');
+    localStorage?.setItem('debugAiCodeGenerationEnabled', 'true');
   } else {
-    localStorage.removeItem('debugAiCodeGenerationEnabled');
+    localStorage?.removeItem('debugAiCodeGenerationEnabled');
   }
 }
 // @ts-expect-error

package/front_end/models/badges/UserBadges.ts

@@ -13,6 +13,13 @@ import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
 import {StarterBadge} from './StarterBadge.js';
 
+export const receiveGdpBadgesSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'receive-gdp-badges',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
 type BadgeClass = new (badgeContext: BadgeContext) => Badge;
 
 export const enum BadgeTriggerReason {
@@ -36,7 +43,7 @@ const DELAY_BEFORE_TRIGGER = 1500;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #badgeActionEventTarget = new Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>();
 
-  #receiveBadgesSetting: Common.Settings.Setting<Boolean>;
+  #receiveBadgesSetting: Common.Settings.Setting<boolean>;
   #allBadges: Badge[];
 
   #starterBadgeSnoozeCount: Common.Settings.Setting<number>;
@@ -66,7 +73,7 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#gdpClient = gdpClient;
     this.#inspectorFrontendHost = inspectorFrontendHost;
 
-    this.#receiveBadgesSetting = this.#settings.moduleSetting('receive-gdp-badges');
+    this.#receiveBadgesSetting = this.#settings.resolve(receiveGdpBadgesSettingDescriptor);
     if (!Host.GdpClient.isBadgesEnabled()) {
       this.#receiveBadgesSetting.set(false);
     }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -317,7 +317,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #updateFitScale(): void {
     if (this.#type === Type.Device && this.#device && this.#mode) {
       const orientation = this.#device.orientationByName(this.#mode.orientation);
-      this.#scaleSetting.set(this.calculateFitScale(orientation.width, orientation.height, this.currentInsets()));
+      this.#scaleSetting.set(this.calculateFitScale(orientation.width, orientation.height));
     }
   }
 
@@ -595,13 +595,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return Math.floor(this.#preferredSize.height / (this.#scaleSetting.get() || 1));
   }
 
-  private currentInsets(): Insets {
-    if (this.#type !== Type.Device || !this.#mode) {
-      return new Insets(0, 0, 0, 0);
-    }
-    return this.#mode.insets;
-  }
-
   private currentSafeAreaInsets(): Insets|null {
     if (!Root.Runtime.hostConfig.devToolsMobileSafeAreaEmulation?.enabled) {
       return null;
@@ -650,22 +643,21 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     if (this.#type === Type.Device && this.#device && this.#mode) {
       const orientation = this.#device.orientationByName(this.#mode.orientation);
-      const insets = this.currentInsets();
-      this.#fitScale = this.calculateFitScale(orientation.width, orientation.height, insets);
+      this.#fitScale = this.calculateFitScale(orientation.width, orientation.height);
       if (mobile) {
         this.#appliedUserAgentType = this.#device.touch() ? UA.MOBILE : UA.MOBILE_NO_TOUCH;
       } else {
         this.#appliedUserAgentType = this.#device.touch() ? UA.DESKTOP_TOUCH : UA.DESKTOP;
       }
-      this.applyDeviceMetrics(new Geometry.Size(orientation.width, orientation.height), insets,
-                              this.#scaleSetting.get(), this.#device.deviceScaleFactor, mobile,
-                              this.getScreenOrientationType(), resetPageScaleFactor);
+      this.applyDeviceMetrics(new Geometry.Size(orientation.width, orientation.height), this.#scaleSetting.get(),
+                              this.#device.deviceScaleFactor, mobile, this.getScreenOrientationType(),
+                              resetPageScaleFactor);
       this.applyUserAgent(this.#device.userAgent, this.#device.userAgentMetadata);
       this.applyTouch(this.#device.touch(), mobile);
     } else if (this.#type === Type.None) {
       this.#fitScale = this.calculateFitScale(this.#availableSize.width, this.#availableSize.height);
       this.#appliedUserAgentType = UA.DESKTOP;
-      this.applyDeviceMetrics(this.#availableSize, new Insets(0, 0, 0, 0), 1, 0, mobile, null, resetPageScaleFactor);
+      this.applyDeviceMetrics(this.#availableSize, 1, 0, mobile, null, resetPageScaleFactor);
       this.applyUserAgent('', null);
       this.applyTouch(false, false);
     } else if (this.#type === Type.Responsive) {
@@ -680,8 +672,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const defaultDeviceScaleFactor = mobile ? defaultMobileScaleFactor : 0;
       this.#fitScale = this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get());
       this.#appliedUserAgentType = this.#uaSetting.get();
-      this.applyDeviceMetrics(new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0),
-                              this.#scaleSetting.get(),
+      this.applyDeviceMetrics(new Geometry.Size(screenWidth, screenHeight), this.#scaleSetting.get(),
                               this.#deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile,
                               screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
                                                             Protocol.Emulation.ScreenOrientationType.LandscapePrimary,
@@ -701,9 +692,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.UPDATED);
   }
 
-  private calculateFitScale(screenWidth: number, screenHeight: number, insets?: Insets): number {
-    const insetsWidth = insets ? insets.left + insets.right : 0;
-    const insetsHeight = insets ? insets.top + insets.bottom : 0;
+  private calculateFitScale(screenWidth: number, screenHeight: number): number {
     let scale = Math.min(screenWidth ? this.#preferredSize.width / screenWidth : 1,
                          screenHeight ? this.#preferredSize.height / screenHeight : 1);
     scale = Math.min(Math.floor(scale * 100), 100);
@@ -712,10 +701,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     while (sharpScale > scale * 0.7) {
       let sharp = true;
       if (screenWidth) {
-        sharp = sharp && Number.isInteger((screenWidth - insetsWidth) * sharpScale / 100);
+        sharp = sharp && Number.isInteger(screenWidth * sharpScale / 100);
       }
       if (screenHeight) {
-        sharp = sharp && Number.isInteger((screenHeight - insetsHeight) * sharpScale / 100);
+        sharp = sharp && Number.isInteger(screenHeight * sharpScale / 100);
       }
       if (sharp) {
         return sharpScale / 100;
@@ -738,17 +727,17 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#multitargetNetworkManager.setUserAgentOverride(userAgent, userAgent ? userAgentMetadata : null);
   }
 
-  private applyDeviceMetrics(screenSize: Geometry.Size, insets: Insets, scale: number, deviceScaleFactor: number,
-                             mobile: boolean, screenOrientation: Protocol.Emulation.ScreenOrientationType|null,
+  private applyDeviceMetrics(screenSize: Geometry.Size, scale: number, deviceScaleFactor: number, mobile: boolean,
+                             screenOrientation: Protocol.Emulation.ScreenOrientationType|null,
                              resetPageScaleFactor: boolean): void {
     screenSize.width = Math.max(1, Math.floor(screenSize.width));
     screenSize.height = Math.max(1, Math.floor(screenSize.height));
 
-    let pageWidth: 0|number = screenSize.width - insets.left - insets.right;
-    let pageHeight: 0|number = screenSize.height - insets.top - insets.bottom;
+    let pageWidth: 0|number = screenSize.width;
+    let pageHeight: 0|number = screenSize.height;
 
-    const positionX = insets.left;
-    const positionY = insets.top;
+    const positionX = 0;
+    const positionY = 0;
     const screenOrientationAngle =
         screenOrientation === Protocol.Emulation.ScreenOrientationType.LandscapePrimary ? 90 : 0;