chrome-devtools-frontend 1.0.1674545 → 1.0.1676824

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -3,12 +3,9 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as i18n from '../../core/i18n/i18n.js';
 import * 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 TextUtils from '../../core/text_utils/text_utils.js';
-import * as Protocol from '../../generated/protocol.js';
 import * as Formatter from '../formatter/formatter.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -17,21 +14,6 @@ import {type DebuggerSourceMapping, DebuggerWorkspaceBinding} from './DebuggerWo
 import {NetworkProject} from './NetworkProject.js';
 import {metadataForURL} from './ResourceUtils.js';
 
-const UIStrings = {
-  /**
-   * @description Error text displayed in the Console panel when editing a live script fails. LiveEdit is the name of the feature for editing code that is already running.
-   * @example {warning} PH1
-   */
-  liveEditFailed: '`LiveEdit` failed: {PH1}',
-  /**
-   * @description Error text displayed in the Console panel when compiling a live-edited script fails. LiveEdit is the name of the feature for editing code that is already running.
-   * @example {connection lost} PH1
-   */
-  liveEditCompileFailed: '`LiveEdit` compile failed: {PH1}',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('models/bindings/ResourceScriptMapping.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export class ResourceScriptMapping implements DebuggerSourceMapping {
   readonly debuggerModel: SDK.DebuggerModel.DebuggerModel;
   #workspace: Workspace.Workspace.WorkspaceImpl;
@@ -96,9 +78,6 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     if (!scriptFile) {
       return null;
     }
-    if ((scriptFile.hasDivergedFromVM() && !scriptFile.isMergingToVM()) || scriptFile.isDivergingFromVM()) {
-      return null;
-    }
     if (scriptFile.script !== script) {
       return null;
     }
@@ -205,8 +184,7 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
   }
 
   private addScript(script: SDK.Script.Script): void {
-    // Ignore live edit scripts here.
-    if (script.isLiveEdit() || script.isBreakpointCondition) {
+    if (script.isBreakpointCondition) {
       return;
     }
 
@@ -272,10 +250,6 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
       if (!uiSourceCode) {
         continue;
       }
-      const scriptFile = this.#uiSourceCodeToScriptFile.get(uiSourceCode);
-      if (scriptFile) {
-        scriptFile.dispose();
-      }
 
       this.#uiSourceCodeToScriptFile.delete(uiSourceCode);
       this.#scriptToUISourceCode.delete(script);
@@ -325,177 +299,17 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
   }
 }
 
-export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<ResourceScriptFile.EventTypes> {
+export class ResourceScriptFile {
   readonly #resourceScriptMapping: ResourceScriptMapping;
   readonly uiSourceCode: Workspace.UISourceCode.UISourceCode;
   readonly script: SDK.Script.Script|null;
-  #scriptSource?: string|null;
-  #isDivergingFromVM?: boolean;
-  #hasDivergedFromVM?: boolean;
-  #isMergingToVM?: boolean;
-  #updateMutex = new Common.Mutex.Mutex();
+
   constructor(
       resourceScriptMapping: ResourceScriptMapping, uiSourceCode: Workspace.UISourceCode.UISourceCode,
       script: SDK.Script.Script) {
-    super();
     this.#resourceScriptMapping = resourceScriptMapping;
     this.uiSourceCode = uiSourceCode;
     this.script = this.uiSourceCode.contentType().isScript() ? script : null;
-
-    this.uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.workingCopyChanged, this);
-    this.uiSourceCode.addEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
-  }
-
-  private isDiverged(): boolean {
-    if (this.uiSourceCode.isDirty()) {
-      return true;
-    }
-    if (!this.script) {
-      return false;
-    }
-    if (typeof this.#scriptSource === 'undefined' || this.#scriptSource === null) {
-      return false;
-    }
-    const workingCopy = this.uiSourceCode.workingCopy();
-    if (!workingCopy) {
-      return false;
-    }
-
-    // Match ignoring sourceURL.
-    if (!workingCopy.startsWith(this.#scriptSource.trimEnd())) {
-      return true;
-    }
-    const suffix = this.uiSourceCode.workingCopy().substr(this.#scriptSource.length);
-    return Boolean(suffix.length) && !suffix.match(SDK.Script.sourceURLRegex);
-  }
-
-  private workingCopyChanged(): void {
-    void this.update();
-  }
-
-  private workingCopyCommitted(): void {
-    // This feature flag is for turning down live edit. If it's not present, we keep the feature enabled.
-    if (Root.Runtime.hostConfig.devToolsLiveEdit?.enabled === false) {
-      return;
-    }
-
-    if (this.uiSourceCode.project().canSetFileContent()) {
-      return;
-    }
-    if (!this.script) {
-      return;
-    }
-
-    const source = this.uiSourceCode.workingCopy();
-    void this.script.editSource(source).then(({status, exceptionDetails}) => {
-      void this.scriptSourceWasSet(source, status, exceptionDetails);
-    });
-  }
-
-  async scriptSourceWasSet(
-      source: string, status: Protocol.Debugger.SetScriptSourceResponseStatus,
-      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<void> {
-    if (status === Protocol.Debugger.SetScriptSourceResponseStatus.Ok) {
-      this.#scriptSource = source;
-    }
-    await this.update();
-
-    if (status === Protocol.Debugger.SetScriptSourceResponseStatus.Ok) {
-      return;
-    }
-
-    if (!exceptionDetails) {
-      // TODO(crbug.com/1334484): Instead of to the console, report these errors in an "info bar" at the bottom
-      //                          of the text editor, similar to e.g. source mapping errors.
-      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-      Common.Console.Console.instance().addMessage(
-          i18nString(UIStrings.liveEditFailed, {PH1: getErrorText(status)}), Common.Console.MessageLevel.WARNING);
-      return;
-    }
-    const messageText = i18nString(UIStrings.liveEditCompileFailed, {PH1: exceptionDetails.text});
-    this.uiSourceCode.addLineMessage(
-        Workspace.UISourceCode.Message.Level.ERROR, messageText, exceptionDetails.lineNumber,
-        exceptionDetails.columnNumber);
-
-    function getErrorText(status: Protocol.Debugger.SetScriptSourceResponseStatus): string {
-      switch (status) {
-        case Protocol.Debugger.SetScriptSourceResponseStatus.BlockedByActiveFunction:
-          return 'Functions that are on the stack (currently being executed) can’t be edited';
-        case Protocol.Debugger.SetScriptSourceResponseStatus.BlockedByActiveGenerator:
-          return 'Async functions/generators that are active can’t be edited';
-        case Protocol.Debugger.SetScriptSourceResponseStatus.BlockedByTopLevelEsModuleChange:
-          return 'The top level of JavaScript modules can’t be edited';
-        case Protocol.Debugger.SetScriptSourceResponseStatus.CompileError:
-        case Protocol.Debugger.SetScriptSourceResponseStatus.Ok:
-          throw new Error('Compile errors and Ok status must not be reported on the console');
-      }
-    }
-  }
-
-  private async update(): Promise<void> {
-    // Do not interleave "divergeFromVM" with "mergeToVM" calls.
-    const release = await this.#updateMutex.acquire();
-    const diverged = this.isDiverged();
-    if (diverged && !this.#hasDivergedFromVM) {
-      await this.divergeFromVM();
-    } else if (!diverged && this.#hasDivergedFromVM) {
-      await this.mergeToVM();
-    }
-    release();
-  }
-
-  private async divergeFromVM(): Promise<void> {
-    if (this.script) {
-      this.#isDivergingFromVM = true;
-      await this.#resourceScriptMapping.debuggerWorkspaceBinding.updateLocations(this.script);
-      this.#isDivergingFromVM = undefined;
-      this.#hasDivergedFromVM = true;
-      this.dispatchEventToListeners(ResourceScriptFile.Events.DID_DIVERGE_FROM_VM);
-    }
-  }
-
-  private async mergeToVM(): Promise<void> {
-    if (this.script) {
-      this.#hasDivergedFromVM = undefined;
-      this.#isMergingToVM = true;
-      await this.#resourceScriptMapping.debuggerWorkspaceBinding.updateLocations(this.script);
-      this.#isMergingToVM = undefined;
-      this.dispatchEventToListeners(ResourceScriptFile.Events.DID_MERGE_TO_VM);
-    }
-  }
-
-  hasDivergedFromVM(): boolean {
-    return Boolean(this.#hasDivergedFromVM);
-  }
-
-  isDivergingFromVM(): boolean {
-    return Boolean(this.#isDivergingFromVM);
-  }
-
-  isMergingToVM(): boolean {
-    return Boolean(this.#isMergingToVM);
-  }
-
-  checkMapping(): void {
-    if (!this.script || typeof this.#scriptSource !== 'undefined') {
-      this.mappingCheckedForTest();
-      return;
-    }
-    void this.script.requestContentData().then(content => {
-      this.#scriptSource = TextUtils.ContentData.ContentData.textOr(content, null);
-      void this.update().then(() => this.mappingCheckedForTest());
-    });
-  }
-
-  private mappingCheckedForTest(): void {
-  }
-
-  dispose(): void {
-    this.uiSourceCode.removeEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyChanged, this.workingCopyChanged, this);
-    this.uiSourceCode.removeEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
   }
 
   addSourceMapURL(sourceMapURL: Platform.DevToolsPath.UrlString): void {
@@ -527,15 +341,3 @@ export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<Resou
     return sources && 'missingSymbolFiles' in sources ? sources.missingSymbolFiles : null;
   }
 }
-
-export namespace ResourceScriptFile {
-  export const enum Events {
-    DID_MERGE_TO_VM = 'DidMergeToVM',
-    DID_DIVERGE_FROM_VM = 'DidDivergeFromVM',
-  }
-
-  export interface EventTypes {
-    [Events.DID_MERGE_TO_VM]: void;
-    [Events.DID_DIVERGE_FROM_VM]: void;
-  }
-}

package/front_end/models/bindings/SASSSourceMapping.ts

@@ -140,6 +140,12 @@ export class SASSSourceMapping implements SourceMapping {
     return [];
   }
 
+  static sourceMapURLsForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode):
+      Platform.DevToolsPath.UrlString[] {
+    const binding = uiSourceCodeToBinding.get(uiSourceCode);
+    return binding?.getReferringSourceMaps().map(sourceMap => sourceMap.url()) ?? [];
+  }
+
   dispose(): void {
     Common.EventTarget.removeEventListeners(this.#eventListeners);
     this.#project.dispose();

package/front_end/models/breakpoints/BreakpointManager.ts

@@ -8,7 +8,7 @@ import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as TextUtils from '../../core/text_utils/text_utils.js';
-import * as Protocol from '../../generated/protocol.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
 import * as SourceMapScopes from '../source_map_scopes/source_map_scopes.js';
@@ -608,7 +608,6 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
 
     debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerWasEnabled, this.#onDebuggerEnabled, this);
     debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerWasDisabled, this.#onDebuggerDisabled, this);
-    debuggerModel.addEventListener(SDK.DebuggerModel.Events.ScriptSourceWasEdited, this.#onScriptWasEdited, this);
   }
 
   modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
@@ -622,7 +621,6 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   #removeDebuggerModelListeners(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
     debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebuggerWasEnabled, this.#onDebuggerEnabled, this);
     debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebuggerWasDisabled, this.#onDebuggerDisabled, this);
-    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.ScriptSourceWasEdited, this.#onScriptWasEdited, this);
   }
 
   #onDebuggerEnabled(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {
@@ -639,29 +637,6 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
     model?.cleanUpAfterDebuggerIsGone();
   }
 
-  async #onScriptWasEdited(
-      event: Common.EventTarget
-          .EventTargetEvent<{script: SDK.Script.Script, status: Protocol.Debugger.SetScriptSourceResponseStatus}>):
-      Promise<void> {
-    const {source: debuggerModel, data: {script, status}} = event;
-    if (status !== Protocol.Debugger.SetScriptSourceResponseStatus.Ok) {
-      return;
-    }
-
-    // V8 throws away breakpoints on all functions in a live edited script. Here we attempt to re-set them again at the
-    // same position. This is because we don't know what was edited and how the breakpoint should move, e.g. if the file
-    // was originally changed on the filesystem (via workspace).
-    // If the live edit originated in DevTools (in CodeMirror), then the `DebuggerPlugin` will remove the breakpoint
-    // wholesale and re-apply based on the diff.
-
-    console.assert(debuggerModel instanceof SDK.DebuggerModel.DebuggerModel);
-    const model = this.#modelBreakpoints.get(debuggerModel as SDK.DebuggerModel.DebuggerModel);
-    if (model?.wasSetIn(script.scriptId)) {
-      await model.resetBreakpoint();
-      void this.#updateModel(model);
-    }
-  }
-
   modelBreakpoint(debuggerModel: SDK.DebuggerModel.DebuggerModel): ModelBreakpoint|undefined {
     return this.#modelBreakpoints.get(debuggerModel);
   }
@@ -966,11 +941,6 @@ export class ModelBreakpoint {
   #cancelCallback = false;
   #currentState: Breakpoint.State|null = null;
   #breakpointIds: Protocol.Debugger.BreakpointId[] = [];
-  /**
-   * We track all the script IDs this ModelBreakpoint was actually set in. This allows us
-   * to properly reset this ModelBreakpoint after a script was live edited.
-   */
-  #resolvedScriptIds = new Set<Protocol.Runtime.ScriptId>();
 
   constructor(
       debuggerModel: SDK.DebuggerModel.DebuggerModel, breakpoint: Breakpoint,
@@ -991,7 +961,6 @@ export class ModelBreakpoint {
 
     this.#uiLocations.clear();
     this.#liveLocations.disposeAll();
-    this.#resolvedScriptIds.clear();
   }
 
   async scheduleUpdateInDebugger(): Promise<ScheduleUpdateResult> {
@@ -1021,16 +990,6 @@ export class ModelBreakpoint {
     return result;
   }
 
-  private scriptDiverged(): boolean {
-    for (const uiSourceCode of this.#breakpoint.getUiSourceCodes()) {
-      const scriptFile = this.#debuggerWorkspaceBinding.scriptFile(uiSourceCode, this.#debuggerModel);
-      if (scriptFile?.hasDivergedFromVM()) {
-        return true;
-      }
-    }
-    return false;
-  }
-
   async #updateInDebugger(): Promise<DebuggerUpdateResult> {
     if (this.#debuggerModel.target().isDisposed()) {
       this.cleanUpAfterDebuggerIsGone();
@@ -1042,7 +1001,7 @@ export class ModelBreakpoint {
 
     // Calculate the new state.
     let newState: Breakpoint.State|null = null;
-    if (!this.#breakpoint.getIsRemoved() && this.#breakpoint.enabled() && !this.scriptDiverged()) {
+    if (!this.#breakpoint.getIsRemoved() && this.#breakpoint.enabled()) {
       let debuggerLocations: SDK.DebuggerModel.Location[] = [];
       for (const uiSourceCode of this.#breakpoint.getUiSourceCodes()) {
         const {lineNumber: uiLineNumber, columnNumber: uiColumnNumber} =
@@ -1226,7 +1185,6 @@ export class ModelBreakpoint {
   }
 
   private async addResolvedLocation(location: SDK.DebuggerModel.Location): Promise<ResolveLocationResult> {
-    this.#resolvedScriptIds.add(location.scriptId);
     const uiLocation = await this.#debuggerWorkspaceBinding.rawLocationToUILocation(location);
     if (!uiLocation) {
       return ResolveLocationResult.OK;
@@ -1249,11 +1207,6 @@ export class ModelBreakpoint {
       this.didRemoveFromDebugger();
     }
   }
-
-  /** @returns true, iff this `ModelBreakpoint` was set (at some point) in `scriptId` */
-  wasSetIn(scriptId: Protocol.Runtime.ScriptId): boolean {
-    return this.#resolvedScriptIds.has(scriptId);
-  }
 }
 
 /**

package/front_end/models/emulation/DeviceModeModel.ts

@@ -124,21 +124,23 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #touchMobile: boolean;
   #emulationModel: SDK.EmulationModel.EmulationModel|null;
   #onModelAvailable: (() => void)|null;
-  #outlineRect?: Rect;
   #screenOrientationLocked: boolean;
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #settings: Common.Settings.Settings;
   readonly #multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager;
+  readonly #fileManager: Workspace.FileManager.FileManager;
 
   constructor(
       targetManager: SDK.TargetManager.TargetManager,
       settings: Common.Settings.Settings,
       multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager,
+      fileManager: Workspace.FileManager.FileManager,
   ) {
     super();
     this.#targetManager = targetManager;
     this.#settings = settings;
     this.#multitargetNetworkManager = multitargetNetworkManager;
+    this.#fileManager = fileManager;
     this.#screenRect = new Rect(0, 0, 1, 1);
     this.#visiblePageRect = new Rect(0, 0, 1, 1);
     this.#availableSize = new Geometry.Size(1, 1);
@@ -207,6 +209,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
               Common.Settings.Settings.instance(),
               // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               SDK.NetworkManager.MultitargetNetworkManager.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+              Workspace.FileManager.FileManager.instance(),
               ));
     }
 
@@ -313,8 +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.currentOutline(), this.currentInsets()));
+      this.#scaleSetting.set(this.calculateFitScale(orientation.width, orientation.height, this.currentInsets()));
     }
   }
 
@@ -401,18 +404,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#type;
   }
 
-  screenImage(): string {
-    return (this.#device && this.#mode) ? this.#device.modeImage(this.#mode) : '';
-  }
-
-  canShowDeviceFrame(): boolean {
-    return Boolean(this.#device && this.#mode && this.#device.outlineImage(this.#mode));
-  }
-
-  outlineRect(): Rect|null {
-    return this.#outlineRect || null;
-  }
-
   screenRect(): Rect {
     return this.#screenRect;
   }
@@ -604,10 +595,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return Math.floor(this.#preferredSize.height / (this.#scaleSetting.get() || 1));
   }
 
-  private currentOutline(): Insets {
-    return new Insets(0, 0, 0, 0);
-  }
-
   private currentInsets(): Insets {
     if (this.#type !== Type.Device || !this.#mode) {
       return new Insets(0, 0, 0, 0);
@@ -660,25 +647,22 @@ 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 outline = this.currentOutline();
       const insets = this.currentInsets();
-      this.#fitScale = this.calculateFitScale(orientation.width, orientation.height, outline, insets);
+      this.#fitScale = this.calculateFitScale(orientation.width, orientation.height, insets);
       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, outline, this.#scaleSetting.get(),
-          this.#device.deviceScaleFactor, mobile, this.getScreenOrientationType(), resetPageScaleFactor);
+      this.applyDeviceMetrics(new Geometry.Size(orientation.width, orientation.height), insets,
+                              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), new Insets(0, 0, 0, 0), 1, 0, mobile, null,
-          resetPageScaleFactor);
+      this.applyDeviceMetrics(this.#availableSize, new Insets(0, 0, 0, 0), 1, 0, mobile, null, resetPageScaleFactor);
       this.applyUserAgent('', null);
       this.applyTouch(false, false);
     } else if (this.#type === Type.Responsive) {
@@ -693,12 +677,12 @@ 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), new Insets(0, 0, 0, 0),
-          this.#scaleSetting.get(), this.#deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile,
-          screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
-                                        Protocol.Emulation.ScreenOrientationType.LandscapePrimary,
-          resetPageScaleFactor);
+      this.applyDeviceMetrics(new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0),
+                              this.#scaleSetting.get(),
+                              this.#deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile,
+                              screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
+                                                            Protocol.Emulation.ScreenOrientationType.LandscapePrimary,
+                              resetPageScaleFactor);
       this.applyUserAgent(
           mobile ? DeviceModeModel.defaultMobileUserAgent() : '',
           mobile ? DeviceModeModel.defaultMobileUserAgentMetadata() : null);
@@ -714,14 +698,11 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.UPDATED);
   }
 
-  private calculateFitScale(screenWidth: number, screenHeight: number, outline?: Insets, insets?: Insets): number {
-    const outlineWidth = outline ? outline.left + outline.right : 0;
-    const outlineHeight = outline ? outline.top + outline.bottom : 0;
+  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;
-    let scale = Math.min(
-        screenWidth ? this.#preferredSize.width / (screenWidth + outlineWidth) : 1,
-        screenHeight ? this.#preferredSize.height / (screenHeight + outlineHeight) : 1);
+    let scale = Math.min(screenWidth ? this.#preferredSize.width / screenWidth : 1,
+                         screenHeight ? this.#preferredSize.height / screenHeight : 1);
     scale = Math.min(Math.floor(scale * 100), 100);
 
     let sharpScale = scale;
@@ -754,10 +735,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#multitargetNetworkManager.setUserAgentOverride(userAgent, userAgent ? userAgentMetadata : null);
   }
 
-  private applyDeviceMetrics(
-      screenSize: Geometry.Size, insets: Insets, outline: Insets, scale: number, deviceScaleFactor: number,
-      mobile: boolean, screenOrientation: Protocol.Emulation.ScreenOrientationType|null,
-      resetPageScaleFactor: boolean): void {
+  private applyDeviceMetrics(screenSize: Geometry.Size, insets: Insets, 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));
 
@@ -771,12 +751,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.#appliedDeviceSize = screenSize;
     this.#appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRatio;
-    this.#screenRect = new Rect(
-        Math.max(0, (this.#availableSize.width - screenSize.width * scale) / 2), outline.top * scale,
-        screenSize.width * scale, screenSize.height * scale);
-    this.#outlineRect = new Rect(
-        this.#screenRect.left - outline.left * scale, 0, (outline.left + screenSize.width + outline.right) * scale,
-        (outline.top + screenSize.height + outline.bottom) * scale);
+    this.#screenRect = new Rect(Math.max(0, (this.#availableSize.width - screenSize.width * scale) / 2), 0,
+                                screenSize.width * scale, screenSize.height * scale);
     this.#visiblePageRect = new Rect(
         positionX * scale, positionY * scale,
         Math.min(pageWidth * scale, this.#availableSize.width - this.#screenRect.left - positionX * scale),
@@ -898,29 +874,21 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     pageImage.src = 'data:image/png;base64,' + screenshot;
     pageImage.onload = async () => {
       const scale = pageImage.naturalWidth / this.screenRect().width;
-      const outlineRectFromModel = this.outlineRect();
-      if (!outlineRectFromModel) {
-        throw new Error('Unable to take screenshot: no outlineRect available.');
-      }
-      const outlineRect = outlineRectFromModel.scale(scale);
       const screenRect = this.screenRect().scale(scale);
       const visiblePageRect = this.visiblePageRect().scale(scale);
-      const contentLeft = screenRect.left + visiblePageRect.left - outlineRect.left;
-      const contentTop = screenRect.top + visiblePageRect.top - outlineRect.top;
+      const contentLeft = visiblePageRect.left;
+      const contentTop = visiblePageRect.top;
 
-      const canvas = new OffscreenCanvas(Math.floor(outlineRect.width),
+      const canvas = new OffscreenCanvas(Math.floor(screenRect.width),
                                          // Cap the height to not hit the GPU limit.
                                          // https://crbug.com/1260828
-                                         Math.min((1 << 14), Math.floor(outlineRect.height)));
+                                         Math.min((1 << 14), Math.floor(screenRect.height)));
       const ctx = canvas.getContext('2d', {willReadFrequently: true});
       if (!ctx) {
         throw new Error('Could not get 2d context from canvas.');
       }
       ctx.imageSmoothingEnabled = false;
 
-      if (this.screenImage()) {
-        await this.paintImage(ctx, this.screenImage(), screenRect.relativeTo(outlineRect));
-      }
       ctx.drawImage(pageImage, Math.floor(contentLeft), Math.floor(contentTop));
       void this.saveScreenshot(canvas);
     };
@@ -976,17 +944,41 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   private async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
     const url = this.inspectedURL();
-    let fileName = '';
+    let baseName = '';
     if (url) {
-      const withoutFragment = Platform.StringUtilities.removeURLFragment(url);
-      fileName = Platform.StringUtilities.trimURL(withoutFragment);
+      const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
+      if (parsedURL) {
+        const host = parsedURL.host;
+        const path = parsedURL.path.replace(/^\/+/, '').replace(/\/+$/, '');
+        baseName = host;
+        if (path) {
+          baseName += '-' + path.replaceAll('/', '-');
+        }
+        baseName = baseName.replace(/[^a-z0-9._-]/gi, '_');
+      }
     }
 
+    if (!baseName) {
+      baseName = 'screenshot';
+    }
+
+    let suffix = '';
     const device = this.device();
     if (device && this.type() === Type.Device) {
-      fileName += `(${device.title})`;
+      suffix += `(${device.title})`;
+    }
+    suffix += '.png';
+
+    // The Windows save dialog / Chrome wrapper limits the suggested filename
+    // to 63 characters (due to a 64-byte null-terminated buffer).
+    // Capping the total filename length at 63 avoids truncation of the extension.
+    const maxBaseNameLength = Math.max(0, 63 - suffix.length);
+    baseName = Platform.StringUtilities.truncateToCodeUnitLength(baseName, maxBaseNameLength);
+
+    let fileName = baseName + suffix;
+    if (fileName.length > 63) {
+      fileName = Platform.StringUtilities.truncateToCodeUnitLength(fileName, 59) + '.png';
     }
-    fileName += '.png';
     const blob = await canvas.convertToBlob({type: 'image/png'});
     const dataUrl = await new Promise<string>((resolve, reject) => {
       const reader = new FileReader();
@@ -996,11 +988,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     });
     const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);
     const contentData = new TextUtils.ContentData.ContentData(base64, /* isBase64=*/ true, 'image/png');
-    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-    await Workspace.FileManager.FileManager.instance().save(fileName as Platform.DevToolsPath.RawPathString,
-                                                            contentData, /* forceSaveAs=*/ true);
-    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-    Workspace.FileManager.FileManager.instance().close(fileName as Platform.DevToolsPath.RawPathString);
+    await this.#fileManager.save(fileName as Platform.DevToolsPath.RawPathString, contentData, /* forceSaveAs=*/ true);
+    this.#fileManager.close(fileName as Platform.DevToolsPath.RawPathString);
   }
 
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {