chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

package/front_end/models/emulation/DeviceModeModel.ts

@@ -104,6 +104,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #availableSize: Geometry.Size;
   #preferredSize: Geometry.Size;
   #initialized: boolean;
+  #autoFitScaleOnInitialize: boolean;
   #appliedDeviceSize: Geometry.Size;
   #appliedDeviceScaleFactor: number;
   #appliedUserAgentType: UA;
@@ -113,7 +114,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #heightSetting: Common.Settings.Setting<number>;
   #uaSetting: Common.Settings.Setting<UA>;
   readonly #deviceScaleFactorSetting: Common.Settings.Setting<number>;
-  readonly #deviceOutlineSetting: Common.Settings.Setting<boolean>;
+
   readonly #toolbarControlsEnabledSetting: Common.Settings.Setting<boolean>;
   #type: Type;
   #device: EmulatedDevice|null;
@@ -123,26 +124,29 @@ 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);
     this.#preferredSize = new Geometry.Size(1, 1);
     this.#initialized = false;
+    this.#autoFitScaleOnInitialize = false;
     this.#appliedDeviceSize = new Geometry.Size(1, 1);
     this.#appliedDeviceScaleFactor = globalThis.devicePixelRatio;
     this.#appliedUserAgentType = UA.DESKTOP;
@@ -178,9 +182,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#deviceScaleFactorSetting = this.#settings.createSetting('emulation.device-scale-factor', 0);
     this.#deviceScaleFactorSetting.addChangeListener(this.deviceScaleFactorSettingChanged, this);
 
-    this.#deviceOutlineSetting = this.#settings.moduleSetting('emulation.show-device-outline');
-    this.#deviceOutlineSetting.addChangeListener(this.deviceOutlineSettingChanged, this);
-
     this.#toolbarControlsEnabledSetting = this.#settings.createSetting('emulation.toolbar-controls-enabled', true,
                                                                        Common.Settings.SettingStorageType.SESSION);
 
@@ -208,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(),
               ));
     }
 
@@ -311,10 +314,21 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#scaleSetting;
   }
 
+  #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()));
+    }
+  }
+
   setAvailableSize(availableSize: Geometry.Size, preferredSize: Geometry.Size): void {
     this.#availableSize = availableSize;
     this.#preferredSize = preferredSize;
     this.#initialized = true;
+    if (this.#autoFitScaleOnInitialize) {
+      this.#autoFitScaleOnInitialize = false;
+      this.#updateFitScale();
+    }
     this.calculateAndEmulate(false);
   }
 
@@ -326,15 +340,19 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       console.assert(Boolean(device) && Boolean(mode), 'Must pass device and mode for device emulation');
       this.#mode = mode;
       this.#device = device;
-      if (this.#initialized) {
-        const orientation = device.orientationByName(mode.orientation);
-        this.#scaleSetting.set(
-            scale ||
-            this.calculateFitScale(orientation.width, orientation.height, this.currentOutline(), this.currentInsets()));
+      if (scale !== undefined) {
+        this.#autoFitScaleOnInitialize = false;
+        this.#scaleSetting.set(scale);
+      } else if (this.#initialized) {
+        this.#autoFitScaleOnInitialize = false;
+        this.#updateFitScale();
+      } else {
+        this.#autoFitScaleOnInitialize = true;
       }
     } else {
       this.#device = null;
       this.#mode = null;
+      this.#autoFitScaleOnInitialize = false;
     }
 
     if (type !== Type.None) {
@@ -386,23 +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) : '';
-  }
-
-  outlineImage(): string {
-    return (this.#device && this.#mode && this.#deviceOutlineSetting.get()) ? this.#device.outlineImage(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;
   }
@@ -471,10 +472,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#deviceScaleFactorSetting;
   }
 
-  deviceOutlineSetting(): Common.Settings.Setting<boolean> {
-    return this.#deviceOutlineSetting;
-  }
-
   toolbarControlsEnabledSetting(): Common.Settings.Setting<boolean> {
     return this.#toolbarControlsEnabledSetting;
   }
@@ -590,10 +587,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.calculateAndEmulate(false);
   }
 
-  private deviceOutlineSettingChanged(): void {
-    this.calculateAndEmulate(false);
-  }
-
   private preferredScaledWidth(): number {
     return Math.floor(this.#preferredSize.width / (this.#scaleSetting.get() || 1));
   }
@@ -602,18 +595,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return Math.floor(this.#preferredSize.height / (this.#scaleSetting.get() || 1));
   }
 
-  private currentOutline(): Insets {
-    let outline: Insets = new Insets(0, 0, 0, 0);
-    if (this.#type !== Type.Device || !this.#device || !this.#mode) {
-      return outline;
-    }
-    const orientation = this.#device.orientationByName(this.#mode.orientation);
-    if (this.#deviceOutlineSetting.get()) {
-      outline = orientation.outlineInsets || outline;
-    }
-    return outline;
-  }
-
   private currentInsets(): Insets {
     if (this.#type !== Type.Device || !this.#mode) {
       return new Insets(0, 0, 0, 0);
@@ -666,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) {
@@ -699,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);
@@ -720,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;
@@ -760,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));
 
@@ -777,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),
@@ -904,32 +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.outlineImage()) {
-        await this.paintImage(ctx, this.outlineImage(), outlineRect.relativeTo(outlineRect));
-      }
-      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);
     };
@@ -985,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();
@@ -1005,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 {

package/front_end/models/emulation/EmulatedDevices.ts

@@ -48,12 +48,6 @@ const str_ = i18n.i18n.registerUIStrings('models/emulation/EmulatedDevices.ts',
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export function computeRelativeImageURL(cssURLValue: string): string {
-  return cssURLValue.replace(/@url\(([^\)]*?)\)/g, (_match: string, url: string) => {
-    return new URL(`../../emulated_devices/${url}`, import.meta.url).toString();
-  });
-}
-
 export class EmulatedDevice {
   title: string;
   type: Type;
@@ -75,8 +69,8 @@ export class EmulatedDevice {
   constructor() {
     this.title = '';
     this.type = Type.Unknown;
-    this.vertical = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
-    this.horizontal = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
+    this.vertical = {width: 0, height: 0, hinge: null};
+    this.horizontal = {width: 0, height: 0, hinge: null};
     this.deviceScaleFactor = 1;
     this.capabilities = [Capability.TOUCH, Capability.MOBILE];
     this.userAgent = '';
@@ -85,8 +79,8 @@ export class EmulatedDevice {
 
     this.isDualScreen = false;
     this.isFoldableScreen = false;
-    this.verticalSpanned = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
-    this.horizontalSpanned = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
+    this.verticalSpanned = {width: 0, height: 0, hinge: null};
+    this.horizontalSpanned = {width: 0, height: 0, hinge: null};
 
     this.#show = Show.Default;
     this.#showByDefault = true;
@@ -202,15 +196,6 @@ export class EmulatedDevice {
           throw new Error('Emulated device has wrong height: ' + result.height);
         }
 
-        const outlineInsets = parseValue(json['outline'], 'insets', 'object', null);
-        if (outlineInsets) {
-          result.outlineInsets = parseInsets(outlineInsets);
-          if (result.outlineInsets.left < 0 || result.outlineInsets.top < 0) {
-            throw new Error('Emulated device has wrong outline insets');
-          }
-          result.outlineImage = (parseValue(json['outline'], 'image', 'string') as string);
-        }
-
         if (json['hinge']) {
           result.hinge = parseHinge(parseValue(json, 'hinge', 'object', undefined));
         }
@@ -282,9 +267,10 @@ export class EmulatedDevice {
         if (mode.insets.top < 0 || mode.insets.left < 0 || mode.insets.right < 0 || mode.insets.bottom < 0 ||
             mode.insets.top + mode.insets.bottom > orientation.height ||
             mode.insets.left + mode.insets.right > orientation.width) {
-          throw new Error('Emulated device mode \'' + mode.title + '\'has wrong mode insets');
+          throw new Error(
+              'Emulated device mode \'' + mode.title + '\'has wrong mode insets',
+          );
         }
-        mode.image = (parseValue(modes[i], 'image', 'string', null) as string);
         const safeAreaInsets = parseValue(modes[i], 'safe-area-insets', 'object', null);
         if (safeAreaInsets) {
           mode.safeAreaInsets = parseInsets(safeAreaInsets);
@@ -419,7 +405,6 @@ export class EmulatedDevice {
           right: this.modes[i].insets.right,
           bottom: this.modes[i].insets.bottom,
         },
-        image: this.modes[i].image || undefined,
       };
       const safeAreaInsets = this.modes[i].safeAreaInsets;
       if (safeAreaInsets) {
@@ -469,17 +454,7 @@ export class EmulatedDevice {
     const json = {} as any;
     json['width'] = orientation.width;
     json['height'] = orientation.height;
-    if (orientation.outlineInsets) {
-      json.outline = {
-        insets: {
-          left: orientation.outlineInsets.left,
-          top: orientation.outlineInsets.top,
-          right: orientation.outlineInsets.right,
-          bottom: orientation.outlineInsets.bottom,
-        },
-        image: orientation.outlineImage,
-      } as {image: string | null, insets: {left: number, right: number, top: number, bottom: number}};
-    }
+
     if (orientation.hinge) {
       json.hinge = {
         width: orientation.hinge.width,
@@ -515,21 +490,6 @@ export class EmulatedDevice {
     return json;
   }
 
-  modeImage(mode: Mode): string {
-    if (!mode.image) {
-      return '';
-    }
-    return computeRelativeImageURL(mode.image);
-  }
-
-  outlineImage(mode: Mode): string {
-    const orientation = this.orientationByName(mode.orientation);
-    if (!orientation.outlineImage) {
-      return '';
-    }
-    return computeRelativeImageURL(orientation.outlineImage);
-  }
-
   orientationByName(name: string): Orientation {
     switch (name) {
       case VerticalSpanned:
@@ -688,8 +648,16 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
       if (device) {
         result.add(device);
         if (!device.modes.length) {
-          device.modes.push({title: '', orientation: Horizontal, insets: new Insets(0, 0, 0, 0), image: null});
-          device.modes.push({title: '', orientation: Vertical, insets: new Insets(0, 0, 0, 0), image: null});
+          device.modes.push({
+            title: '',
+            orientation: Horizontal,
+            insets: new Insets(0, 0, 0, 0),
+          });
+          device.modes.push({
+            title: '',
+            orientation: Vertical,
+            insets: new Insets(0, 0, 0, 0),
+          });
         }
       } else {
         success = false;
@@ -769,7 +737,6 @@ export interface Mode {
   title: string;
   orientation: string;
   insets: Insets;
-  image: string|null;
   safeAreaInsets?: Insets;
   cutout?: Cutout;
 }
@@ -791,14 +758,11 @@ export type Cutout = BaseCutout&({shape: CutoutShape.RECTANGLE}|{shape: CutoutSh
 export interface Orientation {
   width: number;
   height: number;
-  outlineInsets: Insets|null;
-  outlineImage: string|null;
   hinge: SDK.OverlayModel.Hinge|null;
 }
 export interface JSONMode {
   title: string;
   orientation: string;
-  image?: string;
   insets: {
     left: number,
     right: number,
@@ -2136,10 +2100,6 @@ const emulatedDevices = [
     'title': 'Nest Hub Max',
     'screen': {
       'horizontal': {
-        'outline': {
-          'image': '@url(optimized/google-nest-hub-max-horizontal.avif)',
-          'insets': {'left': 92, 'top': 96, 'right': 91, 'bottom': 248},
-        },
         'width': 1280,
         'height': 800,
       },
@@ -2249,19 +2209,11 @@ const emulatedDevices = [
     'title': 'Moto G4',
     'screen': {
       'horizontal': {
-        'outline': {
-          'image': '@url(optimized/MotoG4-landscape.avif)',
-          'insets': {'left': 91, 'top': 30, 'right': 74, 'bottom': 30},
-        },
         'width': 640,
         'height': 360,
       },
       'device-pixel-ratio': 3,
       'vertical': {
-        'outline': {
-          'image': '@url(optimized/MotoG4-portrait.avif)',
-          'insets': {'left': 30, 'top': 91, 'right': 30, 'bottom': 74},
-        },
         'width': 360,
         'height': 640,
       },

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7810,6 +7810,10 @@ export const NativeFunctions = [
     name: "MediaStreamTrackEvent",
     signatures: [["type","eventInitDict"]]
   },
+  {
+    name: "setConstraints",
+    signatures: [["?constraints"]]
+  },
   {
     name: "webkitGetUserMedia",
     signatures: [["constraints","successCallback","errorCallback"]]
@@ -7818,10 +7822,6 @@ export const NativeFunctions = [
     name: "OverconstrainedError",
     signatures: [["constraint","?message"]]
   },
-  {
-    name: "setConstraints",
-    signatures: [["?constraints"]]
-  },
   {
     name: "appendEncodedChunks",
     signatures: [["chunks"]]

package/front_end/models/persistence/AutomaticFileSystemManager.ts

@@ -113,12 +113,12 @@ export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapp
    */
   static removeInstance(): void {
     if (Root.DevToolsContext.globalInstance().has(AutomaticFileSystemManager)) {
-      Root.DevToolsContext.globalInstance().get(AutomaticFileSystemManager).#dispose();
+      Root.DevToolsContext.globalInstance().get(AutomaticFileSystemManager).dispose();
       Root.DevToolsContext.globalInstance().delete(AutomaticFileSystemManager);
     }
   }
 
-  #dispose(): void {
+  dispose(): void {
     this.#inspectorFrontendHost.events.removeEventListener(
         Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.#fileSystemRemoved, this);
     this.#projectSettingsModel.removeEventListener(