chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1188,7 +1188,7 @@ export class ElementsTreeOutline extends
     if (!treeElement) {
       return false;
     }
-    return treeElement.isEditing() || false;
+    return treeElement.isEditing || false;
   }
 
   update(): void {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1668,7 +1668,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.#elementsForSyncViewportCheck = [];
       return;
     }
-    const scrollContainer = this.contentElement.parentElement;
+    const scrollContainer = this.element.parentElement;
     if (!scrollContainer) {
       this.#elementsForSyncViewportCheck = [];
       return;

package/front_end/panels/elements/components/AdornerManager.ts

@@ -16,6 +16,7 @@ export enum RegisteredAdorners {
   FLEX = 'flex',
   GRID = 'grid',
   GRID_LANES = 'grid-lanes',
+  INTEREST = 'interest',
   MEDIA = 'media',
   POPOVER = 'popover',
   REVEAL = 'reveal',

package/front_end/panels/emulation/AdvancedApp.ts

@@ -9,14 +9,14 @@ import type * as Foundation from '../../foundation/foundation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {DeviceModeWrapper} from './DeviceModeWrapper.js';
+import {DeviceModeView} from './DeviceModeView.js';
 import {type Bounds, Events, InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let appInstance: AdvancedApp|null = null;
 
 export class AdvancedApp implements UI.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
-  private deviceModeView!: DeviceModeWrapper;
+  private deviceModeView!: DeviceModeView;
   private inspectedPagePlaceholder!: InspectedPagePlaceholder;
   private toolboxWindow?: Window|null;
   private toolboxRootView?: UI.RootView.RootView;
@@ -58,7 +58,7 @@ export class AdvancedApp implements UI.App.App {
 
     this.inspectedPagePlaceholder = InspectedPagePlaceholder.instance();
     this.inspectedPagePlaceholder.addEventListener(Events.UPDATE, this.onSetInspectedPageBounds.bind(this), this);
-    this.deviceModeView = new DeviceModeWrapper();
+    this.deviceModeView = new DeviceModeView();
 
     UI.DockController.DockController.instance().addEventListener(
         UI.DockController.Events.BEFORE_DOCK_SIDE_CHANGED, this.onBeforeDockSideChange, this);

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -117,14 +117,7 @@ const UIStrings = {
    * @example {4.3} PH1
    */
   defaultF: '{PH1} (default)',
-  /**
-   * @description Command to hide the frame around the mobile device screen.
-   */
-  hideDeviceFrame: 'Hide device frame',
-  /**
-   * @description Command to show the frame around the mobile device screen.
-   */
-  showDeviceFrame: 'Show device frame',
+
   /**
    * @description Command to hide a display in the device mode toolbar that shows the different media
    * queries for the device, above the device screen.
@@ -801,8 +794,7 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
       return;
     }
     const model = this.model;
-    appendToggleItem(contextMenu.headerSection(), model.deviceOutlineSetting(), i18nString(UIStrings.hideDeviceFrame),
-                     i18nString(UIStrings.showDeviceFrame), !model.canShowDeviceFrame(), 'device-frame');
+
     appendToggleItem(
         contextMenu.headerSection(), this.showMediaInspectorSetting, i18nString(UIStrings.hideMediaQueries),
         i18nString(UIStrings.showMediaQueries), undefined, 'media-queries');
@@ -839,7 +831,6 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private reset(): void {
-    this.model?.deviceOutlineSetting().set(false);
     this.showDeviceScaleFactorSetting.set(false);
     this.showUserAgentTypeSetting.set(false);
     this.showMediaInspectorSetting.set(false);

package/front_end/panels/emulation/DeviceModeView.ts

@@ -5,6 +5,9 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -13,6 +16,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {DeviceModeToolbar} from './DeviceModeToolbar.js';
 import deviceModeViewStyles from './deviceModeView.css.js';
+import {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 import {MediaQueryInspector} from './MediaQueryInspector.js';
 
 const {classMap, ref, styleMap} = Directives;
@@ -59,19 +63,15 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface DeviceModeViewInput {
   model: EmulationModel.DeviceModeModel.DeviceModeModel;
+  showDeviceMode: boolean;
   showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   showRulersSetting: Common.Settings.Setting<boolean>;
-  outlineImage: string;
-  outlineImageLoaded: boolean;
-  screenImage: string;
-  screenImageLoaded: boolean;
   resizable: boolean;
   showRulers: boolean;
   showMediaInspector: boolean;
   scale: number;
   cachedCssScreenRect?: EmulationModel.DeviceModeModel.Rect;
   cachedCssVisiblePageRect?: EmulationModel.DeviceModeModel.Rect;
-  cachedOutlineRect?: EmulationModel.DeviceModeModel.Rect;
   onApplyPresetSize: (size: number, e: Event) => void;
   bottomRightResizer: UI.ResizerWidget.ResizerWidget;
   bottomLeftResizer: UI.ResizerWidget.ResizerWidget;
@@ -84,8 +84,6 @@ export interface DeviceModeViewInput {
   leftResizerRef: (el?: Element) => void;
   bottomResizerRef: (el?: Element) => void;
   onDoubleclickBottomResizer: () => void;
-  onOutlineImageLoaded: (success: boolean) => void;
-  onScreenImageLoaded: (success: boolean) => void;
 }
 
 export type DeviceModeViewView = (
@@ -133,12 +131,11 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
     '4K',
   ];
   // clang-format off
-  render(html`
-    ${UI.Widget.widget(DeviceModeToolbar, {model: input.model})}
+  render(input.showDeviceMode
+    ? html`${UI.Widget.widget(DeviceModeToolbar, {model: input.model})}
     <div class=${classMap({
       'device-mode-content-clip': true,
       vbox: true,
-      'device-mode-outline-visible': Boolean(input.outlineImage),
       'device-mode-rulers-visible': input.showRulers,
     })}>
       <div class="device-mode-presets-container" jslog=${VisualLogging.responsivePresets()}>
@@ -163,17 +160,6 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
                                      }) : nothing}
       </div>
       <div class="device-mode-content-area">
-        <img class="device-mode-outline-image fill"
-             ?hidden=${!input.outlineImage || !input.outlineImageLoaded}
-             style=${styleMap(input.cachedOutlineRect ? {
-               left: `${input.cachedOutlineRect.left}px`,
-               top: `${input.cachedOutlineRect.top}px`,
-               width: `${input.cachedOutlineRect.width}px`,
-               height: `${input.cachedOutlineRect.height}px`,
-             } : {})}
-             srcset=${input.outlineImage || nothing}
-             @load=${(): void => input.onOutlineImageLoaded(true)}
-             @error=${(): void => input.onOutlineImageLoaded(false)}>
         <div class="device-mode-screen-area"
              style=${styleMap(input.cachedCssScreenRect ? {
                left: `${input.cachedCssScreenRect.left}px`,
@@ -181,11 +167,6 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
                width: `${input.cachedCssScreenRect.width}px`,
                height: `${input.cachedCssScreenRect.height}px`,
              } : {})}>
-          <img class="device-mode-screen-image"
-               ?hidden=${!input.screenImage || !input.screenImageLoaded}
-               srcset=${input.screenImage || nothing}
-               @load=${(): void => input.onScreenImageLoaded(true)}
-               @error=${(): void => input.onScreenImageLoaded(false)}>
           <div class="device-mode-resizer device-mode-bottom-right-resizer"
                ?hidden=${!input.resizable}
                jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
@@ -224,7 +205,9 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
                  top: `${input.cachedCssVisiblePageRect.top}px`,
                  width: `${input.cachedCssVisiblePageRect.width}px`,
                  height: `${input.cachedCssVisiblePageRect.height}px`,
-               } : {})}><slot></slot></div>
+               } : {})}>
+            ${widget(() => InspectedPagePlaceholder.instance(), {minimumSize: new Geometry.Size(1, 1)})}
+          </div>
         </div>
         ${input.showRulers ? html`
           <devtools-widget class="device-mode-ruler-top device-mode-ruler"
@@ -246,7 +229,9 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
         ` : nothing}
       </div>
     </div>
-  `, target, {
+  `
+  : widget(() => InspectedPagePlaceholder.instance(), {minimumSize: new Geometry.Size(150, 150)}),
+  target, {
     container: {
       classes: ['device-mode-view'],
     },
@@ -276,14 +261,11 @@ export class DeviceModeView extends UI.Widget.VBox {
   private resizeStart?: Geometry.Size;
   private cachedCssScreenRect?: EmulationModel.DeviceModeModel.Rect;
   private cachedCssVisiblePageRect?: EmulationModel.DeviceModeModel.Rect;
-  private cachedOutlineRect?: EmulationModel.DeviceModeModel.Rect;
   private cachedMediaInspectorVisible?: boolean;
   private cachedShowRulers?: boolean;
   private cachedScale?: number;
-  #outlineImageLoaded = false;
-  #lastOutlineImageSrc?: string;
-  #screenImageLoaded = false;
-  #lastScreenImageSrc?: string;
+  readonly #toggleDeviceModeAction: UI.ActionRegistration.Action;
+  readonly #showDeviceModeSetting: Common.Settings.Setting<boolean>;
   #view: DeviceModeViewView;
 
   constructor(element?: HTMLElement, view: DeviceModeViewView = DEFAULT_DEVICE_MODE_VIEW) {
@@ -300,27 +282,27 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.updateUI, this);
 
+    this.#toggleDeviceModeAction =
+        UI.ActionRegistry.ActionRegistry.instance().getAction('emulation.toggle-device-mode');
+    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+    this.#showDeviceModeSetting = model.enabledSetting();
+    this.#showDeviceModeSetting.setRequiresUserAction(Boolean(Root.Runtime.Runtime.queryParam('hasOtherClients')));
+    this.#showDeviceModeSetting.addChangeListener(this.requestUpdate.bind(this));
+    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                SDK.OverlayModel.Events.SCREENSHOT_REQUESTED,
+                                                                this.screenshotRequestedFromOverlay, this);
+
     this.performUpdate();
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.zoomChanged, this);
   }
 
   override performUpdate(): void {
-    if (this.#lastOutlineImageSrc !== this.model.outlineImage()) {
-      this.#lastOutlineImageSrc = this.model.outlineImage();
-      this.#outlineImageLoaded = false;
-    }
-    if (this.#lastScreenImageSrc !== this.model.screenImage()) {
-      this.#lastScreenImageSrc = this.model.screenImage();
-      this.#screenImageLoaded = false;
-    }
+    this.#toggleDeviceModeAction.setToggled(this.#showDeviceModeSetting.get());
     const input: DeviceModeViewInput = {
       model: this.model,
+      showDeviceMode: this.#showDeviceModeSetting.get(),
       showMediaInspectorSetting: this.showMediaInspectorSetting,
       showRulersSetting: this.showRulersSetting,
-      outlineImage: this.model.outlineImage(),
-      outlineImageLoaded: this.#outlineImageLoaded,
-      screenImage: this.model.screenImage(),
-      screenImageLoaded: this.#screenImageLoaded,
       resizable: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive,
       showRulers: this.showRulersSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None,
       showMediaInspector:
@@ -328,7 +310,6 @@ export class DeviceModeView extends UI.Widget.VBox {
       scale: this.model.scale(),
       cachedCssScreenRect: this.cachedCssScreenRect,
       cachedCssVisiblePageRect: this.cachedCssVisiblePageRect,
-      cachedOutlineRect: this.cachedOutlineRect,
       onApplyPresetSize: (width: number, e: Event): void => {
         this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
         this.model.setWidthAndScaleToFit(width);
@@ -345,24 +326,40 @@ export class DeviceModeView extends UI.Widget.VBox {
       leftResizerRef: this.leftResizerRef,
       bottomResizerRef: this.bottomResizerRef,
       onDoubleclickBottomResizer: (): void => this.model.setHeight(0),
-      onOutlineImageLoaded: (success: boolean): void => this.onOutlineImageLoaded(success),
-      onScreenImageLoaded: (success: boolean): void => this.onScreenImageLoaded(success),
     };
     this.#view(input, undefined, this.contentElement);
   }
 
-  private onOutlineImageLoaded(success: boolean): void {
-    if (this.#outlineImageLoaded !== success) {
-      this.#outlineImageLoaded = success;
-      this.requestUpdate();
+  static #setNonEmulatedAvailableSize(): void {
+    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+    if (model.type() !== EmulationModel.DeviceModeModel.Type.None) {
+      return;
     }
+
+    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
+    const rect = InspectedPagePlaceholder.instance().element.getBoundingClientRect();
+    const availableSize =
+        new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
+    model.setAvailableSize(availableSize, availableSize);
   }
 
-  private onScreenImageLoaded(success: boolean): void {
-    if (this.#screenImageLoaded !== success) {
-      this.#screenImageLoaded = success;
-      this.requestUpdate();
+  static captureScreenshot(fullSize?: boolean, clip?: Protocol.Page.Viewport): boolean {
+    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+
+    this.#setNonEmulatedAvailableSize();
+    if (fullSize) {
+      void model.captureFullSizeScreenshot();
+    } else if (clip) {
+      void model.captureAreaScreenshot(clip);
+    } else {
+      void model.captureScreenshot();
     }
+    return true;
+  }
+
+  private screenshotRequestedFromOverlay(event: Common.EventTarget.EventTargetEvent<Protocol.Page.Viewport>): void {
+    const clip = event.data;
+    DeviceModeView.captureScreenshot(false, clip);
   }
 
   private createResizer(widthFactor: number, heightFactor: number): UI.ResizerWidget.ResizerWidget {
@@ -375,10 +372,20 @@ export class DeviceModeView extends UI.Widget.VBox {
       cursor = 'nesw-resize';
     }
     resizer.setCursor(cursor);
-    resizer.addEventListener(UI.ResizerWidget.Events.RESIZE_START, this.onResizeStart, this);
     resizer.addEventListener(
-        UI.ResizerWidget.Events.RESIZE_UPDATE_XY, this.onResizeUpdate.bind(this, widthFactor, heightFactor));
-    resizer.addEventListener(UI.ResizerWidget.Events.RESIZE_END, this.onResizeEnd, this);
+        UI.ResizerWidget.Events.RESIZE_START,
+        this.onResizeStart,
+        this,
+    );
+    resizer.addEventListener(
+        UI.ResizerWidget.Events.RESIZE_UPDATE_XY,
+        this.onResizeUpdate.bind(this, widthFactor, heightFactor),
+    );
+    resizer.addEventListener(
+        UI.ResizerWidget.Events.RESIZE_END,
+        this.onResizeEnd,
+        this,
+    );
     return resizer;
   }
 
@@ -456,15 +463,6 @@ export class DeviceModeView extends UI.Widget.VBox {
       this.cachedCssVisiblePageRect = cssVisiblePageRect;
     }
 
-    const outlineRectFromModel = this.model.outlineRect();
-    if (outlineRectFromModel) {
-      const outlineRect = outlineRectFromModel.scale(1 / zoomFactor);
-      if (!this.cachedOutlineRect || !outlineRect.isEqual(this.cachedOutlineRect)) {
-        callDoResize = true;
-        this.cachedOutlineRect = outlineRect;
-      }
-    }
-
     const mediaInspectorVisible =
         this.showMediaInspectorSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None;
     if (mediaInspectorVisible !== this.cachedMediaInspectorVisible) {
@@ -485,12 +483,14 @@ export class DeviceModeView extends UI.Widget.VBox {
     }
 
     this.requestUpdate();
-    if (callDoResize) {
-      this.doResize();
-    }
-    if (contentAreaResized) {
-      this.contentAreaResized();
-    }
+    void this.updateComplete.then(() => {
+      if (callDoResize) {
+        this.doResize();
+      }
+      if (contentAreaResized) {
+        this.contentAreaResized();
+      }
+    });
   }
 
   private contentAreaResized(): void {
@@ -498,8 +498,8 @@ export class DeviceModeView extends UI.Widget.VBox {
     if (!contentArea) {
       return;
     }
-    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const rect = contentArea.getBoundingClientRect();
+    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const handleWidth = this.contentElement.querySelector<HTMLElement>('.device-mode-right-resizer')?.offsetWidth || 20;
     const handleHeight =
         this.contentElement.querySelector<HTMLElement>('.device-mode-bottom-resizer')?.offsetHeight || 20;
@@ -673,3 +673,162 @@ export class Ruler extends Common.ObjectWrapper.eventMixin<RulerEventTypes, type
     this.#view(viewInput, undefined, this.contentElement);
   }
 }
+
+export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
+  handleAction(context: UI.Context.Context, actionId: string): boolean {
+    switch (actionId) {
+      case 'emulation.capture-screenshot':
+        return DeviceModeView.captureScreenshot();
+
+      case 'emulation.capture-node-screenshot': {
+        const node = context.flavor(SDK.DOMModel.DOMNode);
+        if (!node) {
+          return true;
+        }
+        async function captureClip(): Promise<void> {
+          if (!node) {
+            return;
+          }
+
+          // Resolve to a remote object to ensure the node is alive in the context.
+          const object = await node.resolveToObject();
+          if (!object) {
+            return;
+          }
+
+          // Get the Box Model via CDP.
+          // This returns the quads relative to the target's viewport.
+          // We use the 'border' quad to include the border and padding in the screenshot,
+          // matching the 'width' and 'height' properties which are also Border Box dimensions.
+          const nodeBoxModel = await node.boxModel();
+          if (!nodeBoxModel) {
+            throw new Error(`Unable to get box model of the node: ${new Error().stack}`);
+          }
+          const nodeBorderQuad = nodeBoxModel.border;
+          // Calculate the rendered bounding box from the border quad to account for CSS scaling and transforms (e.g. zoom or transform: scale).
+          const {minX, maxX, minY, maxY} = getQuadBoundingBox(nodeBorderQuad);
+
+          // Get Layout Metrics to account for the Visual Viewport scroll and zoom.
+          const metrics = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
+          if (metrics.getError()) {
+            throw new Error(`Unable to get metrics: ${new Error().stack}`);
+          }
+
+          const scrollX = metrics.cssVisualViewport.pageX;
+          const scrollY = metrics.cssVisualViewport.pageY;
+
+          // Calculate the global offset for OOPiFs (Out-of-Process iframes).
+          // This accounts for the position of the target's frame within the main page.
+          const {x: oopifOffsetX, y: oopifOffsetY} = await getOopifOffset(node.domModel().target());
+
+          // Assemble the final Clip.
+          // The absolute coordinates are: Global (OOPiF) + Viewport Scroll + Local Node Position (Border Box).
+          const clip = {
+            x: oopifOffsetX + scrollX + minX,
+            y: oopifOffsetY + scrollY + minY,
+            width: maxX - minX,
+            height: maxY - minY,
+            scale: 1,
+          };
+
+          // Apply Zoom factor.
+          const zoom = metrics.cssVisualViewport.zoom ?? 1;
+          clip.x *= zoom;
+          clip.y *= zoom;
+          clip.width *= zoom;
+          clip.height *= zoom;
+          DeviceModeView.captureScreenshot(false, clip);
+        }
+        void captureClip();
+        return true;
+      }
+
+      case 'emulation.capture-full-height-screenshot':
+        return DeviceModeView.captureScreenshot(true);
+
+      case 'emulation.toggle-device-mode': {
+        const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+        model.toggleDeviceMode();
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+/**
+ * Calculate the offset of the "Local Root" frame relative to the "Global Root" (the main frame).
+ * This involves traversing the CDP Targets for OOPiFs.
+ */
+async function getOopifOffset(target: SDK.Target.Target|null): Promise<{x: number, y: number}> {
+  if (!target) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the parent target. If there's no parent (we are at root) or it's not a frame, we are done.
+  const parentTarget = target.parentTarget();
+  if (!parentTarget || parentTarget.type() !== SDK.Target.Type.FRAME) {
+    return {x: 0, y: 0};
+  }
+
+  // Identify the current frame's ID to find its owner in the parent.
+  const frameId = target.model(SDK.ResourceTreeModel.ResourceTreeModel)?.mainFrame?.id;
+  if (!frameId) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the DOMModel of the parent to query the frame owner element.
+  const parentDOMModel = parentTarget.model(SDK.DOMModel.DOMModel);
+  if (!parentDOMModel) {
+    return {x: 0, y: 0};
+  }
+
+  // Retrieve the frame owner node (e.g. the <iframe> element) in the parent's document.
+  const frameOwnerDeferred = await parentDOMModel.getOwnerNodeForFrame(frameId);
+  const frameOwner = await frameOwnerDeferred?.resolvePromise();
+  if (!frameOwner) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the content box of the iframe element.
+  // This is relative to the parent target's viewport.
+  const boxModel = await frameOwner.boxModel();
+  if (!boxModel) {
+    return {x: 0, y: 0};
+  }
+
+  // content is a Quad [x1, y1, x2, y2, x3, y3, x4, y4]
+  const contentQuad = boxModel.content;
+  const iframeContentX = contentQuad[0];
+  const iframeContentY = contentQuad[1];
+
+  // Get the scroll position of the parent target to convert viewport-relative coordinates
+  // to document-relative coordinates.
+  const parentMetrics = await parentTarget.pageAgent().invoke_getLayoutMetrics();
+  if (parentMetrics.getError()) {
+    return {x: 0, y: 0};
+  }
+
+  const scrollX = parentMetrics.cssVisualViewport.pageX;
+  const scrollY = parentMetrics.cssVisualViewport.pageY;
+
+  // Recursively add the offset of the parent target itself (if it is also an OOPiF).
+  const parentOffset = await getOopifOffset(parentTarget);
+
+  return {
+    x: iframeContentX + scrollX + parentOffset.x,
+    y: iframeContentY + scrollY + parentOffset.y,
+  };
+}
+
+/**
+ * Calculate the axis-aligned bounding box for a Quad [x1, y1, x2, y2, x3, y3, x4, y4].
+ * This accounts for CSS scaling and transforms (e.g. zoom, transform: scale).
+ */
+function getQuadBoundingBox(quad: Protocol.DOM.Quad): {minX: number, maxX: number, minY: number, maxY: number} {
+  const minX = Math.min(quad[0], quad[2], quad[4], quad[6]);
+  const maxX = Math.max(quad[0], quad[2], quad[4], quad[6]);
+  const minY = Math.min(quad[1], quad[3], quad[5], quad[7]);
+  const maxY = Math.max(quad[1], quad[3], quad[5], quad[7]);
+  return {minX, maxX, minY, maxY};
+}

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -20,7 +20,7 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
   }
 
   static instance(opts: {
-    forceNew: null,
+    forceNew: boolean|null,
   } = {forceNew: null}): InspectedPagePlaceholder {
     const {forceNew} = opts;
     if (!inspectedPagePlaceholderInstance || forceNew) {

package/front_end/panels/emulation/deviceModeView.css

@@ -83,7 +83,7 @@ devtools-toolbar.device-mode-toolbar-options {
   box-shadow: inset 0 -1px var(--sys-color-divider);
 }
 
-.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-media-container {
+.device-mode-content-clip .device-mode-media-container {
   margin-bottom: 20px;
 }
 
@@ -157,25 +157,17 @@ devtools-toolbar.device-mode-toolbar-options {
   background-color: var(--sys-color-inverse-surface);
 }
 
-.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {
+.device-mode-content-clip .device-mode-screen-area {
   --override-screen-area-box-shadow: hsl(240deg 3% 84%) 0 0 0 0.5px, hsl(0deg 0% 80% / 40%) 0 0 20px;
 
   box-shadow: var(--override-screen-area-box-shadow);
 }
 
-.theme-with-dark-background .device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area,
-:host-context(.theme-with-dark-background) .device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {
+.theme-with-dark-background .device-mode-content-clip .device-mode-screen-area,
+:host-context(.theme-with-dark-background) .device-mode-content-clip .device-mode-screen-area {
   --override-screen-area-box-shadow: rgb(40 40 42) 0 0 0 0.5px, rgb(51 51 51 / 40%) 0 0 20px;
 }
 
-.device-mode-screen-image {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .device-mode-resizer {
   position: absolute;
   display: flex;
@@ -316,15 +308,6 @@ devtools-toolbar.device-mode-toolbar-options {
   bottom: 0;
 }
 
-.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content {
-  border-top: 1px solid var(--sys-color-token-subtle);
-}
-
-.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content {
-  border-left: 1px solid var(--sys-color-token-subtle);
-  border-top: 1px solid var(--sys-color-token-subtle);
-}
-
 .device-mode-ruler-inner {
   position: absolute;
 }