chrome-devtools-frontend 1.0.1672388 → 1.0.1674545

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;
 }

package/front_end/panels/emulation/emulation-meta.ts

@@ -51,14 +51,6 @@ const UIStrings = {
    * @description Command that hides measuring rulers next to the emulated device.
    */
   hideRulers: 'Hide rulers in the device mode toolbar',
-  /**
-   * @description Command that shows a frame around the emulated device.
-   */
-  showDeviceFrame: 'Show device frame',
-  /**
-   * @description Command that hides a frame around the emulated device.
-   */
-  hideDeviceFrame: 'Hide device frame',
 
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/emulation-meta.ts', UIStrings);
@@ -79,7 +71,7 @@ UI.ActionRegistration.registerActionExtension({
   toggleable: true,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.toggleDeviceToolbar),
@@ -101,7 +93,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.SCREENSHOT,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureScreenshot),
@@ -112,7 +104,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.SCREENSHOT,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureFullSizeScreenshot),
@@ -123,7 +115,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.SCREENSHOT,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureNodeScreenshot),
@@ -165,24 +157,6 @@ Common.Settings.registerSettingExtension({
   tags: [i18nLazyString(UIStrings.device)],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.MOBILE,
-  settingName: 'emulation.show-device-outline',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.showDeviceFrame),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.hideDeviceFrame),
-    },
-  ],
-  tags: [i18nLazyString(UIStrings.device)],
-});
-
 UI.Toolbar.registerToolbarItem({
   actionId: 'emulation.toggle-device-mode',
   condition: Root.Runtime.conditions.canDock,

package/front_end/panels/emulation/emulation.ts

@@ -7,12 +7,10 @@ import './InspectedPagePlaceholder.js';
 import './MediaQueryInspector.js';
 import './DeviceModeToolbar.js';
 import './DeviceModeView.js';
-import './DeviceModeWrapper.js';
 
 import * as AdvancedApp from './AdvancedApp.js';
 import * as DeviceModeToolbar from './DeviceModeToolbar.js';
 import * as DeviceModeView from './DeviceModeView.js';
-import * as DeviceModeWrapper from './DeviceModeWrapper.js';
 import * as InspectedPagePlaceholder from './InspectedPagePlaceholder.js';
 import * as MediaQueryInspector from './MediaQueryInspector.js';
 
@@ -20,7 +18,6 @@ export {
   AdvancedApp,
   DeviceModeToolbar,
   DeviceModeView,
-  DeviceModeWrapper,
   InspectedPagePlaceholder,
   MediaQueryInspector,
 };

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -780,7 +780,7 @@ export class ConsoleInsight extends UI.Widget.Widget {
   // Rating sub-form state.
   #selectedRating?: boolean;
 
-  #consoleInsightsEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #consoleInsightsEnabledSetting: AiAssistanceModel.AiSetting.AiSetting<boolean>;
   #aidaPreconditions: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange:
       (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
@@ -861,10 +861,12 @@ export class ConsoleInsight extends UI.Widget.Widget {
 
   // off -> entrypoints are shown, and point to the AI setting panel where the setting can be turned on
   // on -> entrypoints are shown, and console insights can be generated
-  #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
-    const result = Common.Settings.Settings.instance().maybeResolve(
-        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor);
-    return 'setting' in result ? (result.setting as Common.Settings.Setting<boolean>) : undefined;
+  #getConsoleInsightsEnabledSetting(): AiAssistanceModel.AiSetting.AiSetting<boolean> {
+    return new AiAssistanceModel.AiSetting.AiSetting(
+        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor,
+        Host.AidaClient.HostConfigTracker.instance(),
+        Common.Settings.Settings.instance(),
+    );
   }
 
   // off -> consent reminder is shown, unless the 'console-insights-enabled'-setting has been enabled in the current DevTools session
@@ -876,7 +878,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
   override wasShown(): void {
     super.wasShown();
     this.focus();
-    this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    this.#consoleInsightsEnabledSetting.addEventListener(AiAssistanceModel.AiSetting.Events.CHANGED,
+                                                         this.#onConsoleInsightsSettingChanged, this);
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
     if (this.#state.type === State.LOADING && this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true &&
         !blockedByAge && this.#state.consentOnboardingCompleted) {
@@ -899,7 +902,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
 
   override willHide(): void {
     super.willHide();
-    this.#consoleInsightsEnabledSetting?.removeChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    this.#consoleInsightsEnabledSetting.removeEventListener(AiAssistanceModel.AiSetting.Events.CHANGED,
+                                                            this.#onConsoleInsightsSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
   }

package/front_end/panels/layers/LayersPanel.ts

@@ -14,11 +14,11 @@ import {Events, LayerTreeModel} from './LayerTreeModel.js';
 
 const UIStrings = {
   /**
-   * @description Text for the details of something
+   * @description Title of the details tab in the Layers panel.
    */
   details: 'Details',
   /**
-   * @description Title of the Profiler tool
+   * @description Title of the profiler tab in the Layers panel.
    */
   profiler: 'Profiler',
 } as const;