chrome-devtools-frontend 1.0.1665921 → 1.0.1667564

package/front_end/panels/emulation/DeviceModeView.ts

@@ -18,7 +18,8 @@ import {DeviceModeToolbar} from './DeviceModeToolbar.js';
 import deviceModeViewStyles from './deviceModeView.css.js';
 import {MediaQueryInspector} from './MediaQueryInspector.js';
 
-const {classMap, styleMap} = Directives;
+const {classMap, ref, styleMap} = Directives;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -59,29 +60,230 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface DeviceModeViewRefs {
+  toolbar: DeviceModeToolbar;
+  bottomRightResizerElement: HTMLElement;
+  bottomLeftResizerElement: HTMLElement;
+  rightResizerElement: HTMLElement;
+  leftResizerElement: HTMLElement;
+  bottomResizerElement: HTMLElement;
+  pageArea: HTMLElement;
+}
+
+export interface DeviceModeViewInput {
+  model: EmulationModel.DeviceModeModel.DeviceModeModel;
+  showMediaInspectorSetting: Common.Settings.Setting<boolean>;
+  showRulersSetting: Common.Settings.Setting<boolean>;
+  outlineImage: string;
+  outlineImageLoaded: boolean;
+  screenImage: string;
+  screenImageLoaded: boolean;
+  showRulers: boolean;
+  showMediaInspector: boolean;
+  scale: number;
+  cachedCssScreenRect?: EmulationModel.DeviceModeModel.Rect;
+  cachedOutlineRect?: EmulationModel.DeviceModeModel.Rect;
+  onApplyPresetSize: (size: number, e: Event) => void;
+  bottomRightResizer: UI.ResizerWidget.ResizerWidget;
+  bottomLeftResizer: UI.ResizerWidget.ResizerWidget;
+  rightResizer: UI.ResizerWidget.ResizerWidget;
+  leftResizer: UI.ResizerWidget.ResizerWidget;
+  bottomResizer: UI.ResizerWidget.ResizerWidget;
+  bottomRightResizerRef: (el?: Element) => void;
+  bottomLeftResizerRef: (el?: Element) => void;
+  rightResizerRef: (el?: Element) => void;
+  leftResizerRef: (el?: Element) => void;
+  bottomResizerRef: (el?: Element) => void;
+  onDoubleclickBottomResizer: () => void;
+  onOutlineImageLoaded: (success: boolean) => void;
+  onScreenImageLoaded: (success: boolean) => void;
+}
+
+export type DeviceModeViewView = (
+    input: DeviceModeViewInput,
+    output: DeviceModeViewRefs,
+    target: HTMLElement,
+    ) => void;
+
+function resizerRef(
+    resizer: UI.ResizerWidget.ResizerWidget,
+    onConnect?: (el: HTMLElement) => void,
+    ): (el?: Element) => void {
+  let oldEl: HTMLElement|undefined;
+  return (el?: Element) => {
+    if (el instanceof HTMLElement) {
+      if (oldEl === el) {
+        return;
+      }
+      if (oldEl) {
+        resizer.removeElement(oldEl);
+      }
+      oldEl = el;
+      resizer.addElement(el);
+      onConnect?.(el);
+    } else if (oldEl) {
+      resizer.removeElement(oldEl);
+      oldEl = undefined;
+    }
+  };
+}
+
+export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
+    input: DeviceModeViewInput,
+    output: DeviceModeViewRefs,
+    target: HTMLElement,
+    ): void => {
+  const sizes = [320, 375, 425, 768, 1024, 1440, 2560];
+  const titles = [
+    i18nString(UIStrings.mobileS),
+    i18nString(UIStrings.mobileM),
+    i18nString(UIStrings.mobileL),
+    i18nString(UIStrings.tablet),
+    i18nString(UIStrings.laptop),
+    i18nString(UIStrings.laptopL),
+    '4K',
+  ];
+  // clang-format off
+  render(html`
+    <devtools-widget ${UI.Widget.widget(DeviceModeToolbar, {model: input.model})}
+       ${UI.Widget.widgetRef(DeviceModeToolbar, t => { output.toolbar = t; })}></devtools-widget>
+    <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()}>
+        <div class="device-mode-presets-container-inner">
+          ${sizes.map((size, idx) => html`
+            <div class="fill device-mode-preset-bar-outer">
+              <div class="device-mode-preset-bar"
+                   style="width: ${size * input.scale}px;"
+                   jslog=${VisualLogging.action().track({click: true}).context(`device-mode-preset-${size}px`)}
+                   @click=${(e: Event) => input.onApplyPresetSize(size, e)}>
+                <span>${titles[idx]} – ${size}px</span>
+              </div>
+            </div>
+          `).reverse()}
+        </div>
+      </div>
+      <div class="device-mode-media-container">
+        ${input.showMediaInspector ? widget(MediaQueryInspector, {
+                                       scale: input.scale,
+                                       getWidthCallback: () => input.model.appliedDeviceSize().width,
+                                       setWidthCallback:  input.model.setWidth.bind(input.model),
+                                     }) : 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`,
+               top: `${input.cachedCssScreenRect.top}px`,
+               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"
+               jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
+               ${ref(input.bottomRightResizerRef)}>
+            <div></div>
+          </div>
+          <div class="device-mode-resizer device-mode-bottom-left-resizer"
+               jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
+               ${ref(input.bottomLeftResizerRef)}>
+            <div></div>
+          </div>
+          <div class="device-mode-resizer device-mode-right-resizer"
+               jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
+               ${ref(input.rightResizerRef)}>
+            <div></div>
+          </div>
+          <div class="device-mode-resizer device-mode-left-resizer"
+               jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
+               ${ref(input.leftResizerRef)}>
+            <div></div>
+          </div>
+          <div class="device-mode-resizer device-mode-bottom-resizer"
+               jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
+               title=${i18nString(UIStrings.doubleclickForFullHeight)}
+               ${ref(input.bottomResizerRef)}
+               @dblclick=${input.onDoubleclickBottomResizer}>
+            <div></div>
+          </div>
+          <div class="device-mode-page-area" ${ref((el?: Element) => { if (el instanceof HTMLElement) { output.pageArea = el; } })}><slot></slot></div>
+        </div>
+        ${input.showRulers ? html`
+          <devtools-widget class="device-mode-ruler-top device-mode-ruler"
+              style=${styleMap({left: `${input.cachedCssScreenRect?.left ?? 0}px`, top: `${input.cachedCssScreenRect?.top ?? 0}px`})}
+              ${UI.Widget.widget(Ruler, {
+                scale: input.scale,
+                horizontal: true,
+              })}
+              @device-mode-ruler-marker-selected=${(e: CustomEvent<number>): void => input.model.setWidthAndScaleToFit(e.detail)}>
+          </devtools-widget>
+          <devtools-widget class="device-mode-ruler-left device-mode-ruler"
+              style=${styleMap({left: `${input.cachedCssScreenRect?.left ?? 0}px`, top: `${input.cachedCssScreenRect?.top ?? 0}px`})}
+              ${UI.Widget.widget(Ruler, {
+                scale: input.scale,
+                horizontal: false,
+              })}
+              @device-mode-ruler-marker-selected=${(e: CustomEvent<number>): void => input.model.setHeightAndScaleToFit(e.detail)}>
+          </devtools-widget>
+        ` : nothing}
+      </div>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class DeviceModeView extends UI.Widget.VBox {
   wrapperInstance!: UI.Widget.VBox|null;
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
-  private readonly mediaInspector: MediaQueryInspector;
   private showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private showRulersSetting: Common.Settings.Setting<boolean>;
-  private readonly topRuler: Ruler;
-  private readonly leftRuler: Ruler;
-  private responsivePresetsContainer!: HTMLElement;
-  private screenArea!: HTMLElement;
-  private pageArea!: HTMLElement;
-  private outlineImage!: HTMLElement;
-  private contentClip!: HTMLElement;
-  private contentArea!: HTMLElement;
-  private rightResizerElement!: HTMLElement;
-  private leftResizerElement!: HTMLElement;
-  private bottomResizerElement!: HTMLElement;
-  private bottomRightResizerElement!: HTMLElement;
-  private bottomLeftResizerElement!: HTMLElement;
+  pageArea!: HTMLElement;
+  rightResizerElement!: HTMLElement;
+  leftResizerElement!: HTMLElement;
+  bottomResizerElement!: HTMLElement;
+  bottomRightResizerElement!: HTMLElement;
+  bottomLeftResizerElement!: HTMLElement;
+  private readonly bottomRightResizer = this.createResizer(2, 1);
+  private readonly bottomLeftResizer = this.createResizer(-2, 1);
+  private readonly rightResizer = this.createResizer(2, 0);
+  private readonly leftResizer = this.createResizer(-2, 0);
+  private readonly bottomResizer = this.createResizer(0, 1);
+  private readonly bottomRightResizerRef = resizerRef(this.bottomRightResizer, el => {
+    this.bottomRightResizerElement = el;
+  });
+  private readonly bottomLeftResizerRef = resizerRef(this.bottomLeftResizer, el => {
+    this.bottomLeftResizerElement = el;
+  });
+  private readonly rightResizerRef = resizerRef(this.rightResizer, el => {
+    this.rightResizerElement = el;
+  });
+  private readonly leftResizerRef = resizerRef(this.leftResizer, el => {
+    this.leftResizerElement = el;
+  });
+  private readonly bottomResizerRef = resizerRef(this.bottomResizer, el => {
+    this.bottomResizerElement = el;
+  });
   private cachedResizable!: boolean|undefined;
-  private mediaInspectorContainer!: HTMLElement;
-  private screenImage!: HTMLElement;
-  private toolbar!: DeviceModeToolbar;
+  toolbar!: DeviceModeToolbar;
   private slowPositionStart?: {
     x: number,
     y: number,
@@ -95,9 +297,15 @@ export class DeviceModeView extends UI.Widget.VBox {
   private cachedScale?: number;
   private handleWidth?: number;
   private handleHeight?: number;
+  #outlineImageLoaded = false;
+  #lastOutlineImageSrc?: string;
+  #screenImageLoaded = false;
+  #lastScreenImageSrc?: string;
+  #view: DeviceModeViewView;
 
-  constructor() {
+  constructor(view: DeviceModeViewView = DEFAULT_DEVICE_MODE_VIEW) {
     super({useShadowDom: true});
+    this.#view = view;
 
     this.setMinimumSize(150, 150);
     this.element.classList.add('device-mode-view');
@@ -105,112 +313,75 @@ export class DeviceModeView extends UI.Widget.VBox {
 
     this.model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.updateUI, this);
-    this.mediaInspector = new MediaQueryInspector();
-    this.mediaInspector.getWidthCallback = () => this.model.appliedDeviceSize().width;
-    this.mediaInspector.setWidthCallback = this.model.setWidth.bind(this.model);
     this.showMediaInspectorSetting = Common.Settings.Settings.instance().moduleSetting('show-media-query-inspector');
     this.showMediaInspectorSetting.addChangeListener(this.updateUI, this);
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.updateUI, this);
 
-    this.topRuler = new Ruler();
-    this.topRuler.horizontal = true;
-    this.topRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
-      this.model.setWidthAndScaleToFit(event.data);
-    });
-    this.topRuler.element.classList.add('device-mode-ruler-top');
-    this.leftRuler = new Ruler();
-    this.leftRuler.horizontal = false;
-    this.leftRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
-      this.model.setHeightAndScaleToFit(event.data);
-    });
-    this.leftRuler.element.classList.add('device-mode-ruler-left');
-    this.createUI();
+    this.performUpdate();
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.zoomChanged, this);
   }
 
-  private createUI(): void {
-    this.toolbar = new DeviceModeToolbar();
-    this.toolbar.model = this.model;
-    this.toolbar.show(this.contentElement);
-    this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
-    this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');
-    this.responsivePresetsContainer.setAttribute('jslog', `${VisualLogging.responsivePresets()}`);
-    this.renderPresets();
-    this.mediaInspectorContainer = this.contentClip.createChild('div', 'device-mode-media-container');
-    this.contentArea = this.contentClip.createChild('div', 'device-mode-content-area');
-    this.outlineImage = this.contentArea.createChild('img', 'device-mode-outline-image hidden fill');
-    this.outlineImage.addEventListener('load', this.onImageLoaded.bind(this, this.outlineImage, true), false);
-    this.outlineImage.addEventListener('error', this.onImageLoaded.bind(this, this.outlineImage, false), false);
-    this.screenArea = this.contentArea.createChild('div', 'device-mode-screen-area');
-    this.screenImage = this.screenArea.createChild('img', 'device-mode-screen-image hidden');
-    this.screenImage.addEventListener('load', this.onImageLoaded.bind(this, this.screenImage, true), false);
-    this.screenImage.addEventListener('error', this.onImageLoaded.bind(this, this.screenImage, false), false);
-    this.bottomRightResizerElement =
-        this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-right-resizer');
-    this.bottomRightResizerElement.createChild('div', '');
-    this.createResizer(this.bottomRightResizerElement, 2, 1);
-    this.bottomLeftResizerElement =
-        this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-left-resizer');
-    this.bottomLeftResizerElement.createChild('div', '');
-    this.createResizer(this.bottomLeftResizerElement, -2, 1);
-    this.rightResizerElement = this.screenArea.createChild('div', 'device-mode-resizer device-mode-right-resizer');
-    this.rightResizerElement.createChild('div', '');
-    this.createResizer(this.rightResizerElement, 2, 0);
-    this.leftResizerElement = this.screenArea.createChild('div', 'device-mode-resizer device-mode-left-resizer');
-    this.leftResizerElement.createChild('div', '');
-    this.createResizer(this.leftResizerElement, -2, 0);
-    this.bottomResizerElement = this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-resizer');
-    this.bottomResizerElement.createChild('div', '');
-    this.createResizer(this.bottomResizerElement, 0, 1);
-    this.bottomResizerElement.addEventListener('dblclick', this.model.setHeight.bind(this.model, 0), false);
-    UI.Tooltip.Tooltip.install(this.bottomResizerElement, i18nString(UIStrings.doubleclickForFullHeight));
-    this.pageArea = this.screenArea.createChild('div', 'device-mode-page-area');
-    this.pageArea.createChild('slot');
-  }
-
-  private renderPresets(): void {
-    const scale = this.model.scale();
-    const sizes = [320, 375, 425, 768, 1024, 1440, 2560];
-    const titles = [
-      i18nString(UIStrings.mobileS),
-      i18nString(UIStrings.mobileM),
-      i18nString(UIStrings.mobileL),
-      i18nString(UIStrings.tablet),
-      i18nString(UIStrings.laptop),
-      i18nString(UIStrings.laptopL),
-      '4K',
-    ];
-
-    const applySize = (width: number, e: Event): void => {
-      this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
-      this.model.setWidthAndScaleToFit(width);
-      e.consume();
+  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;
+    }
+    const input: DeviceModeViewInput = {
+      model: this.model,
+      showMediaInspectorSetting: this.showMediaInspectorSetting,
+      showRulersSetting: this.showRulersSetting,
+      outlineImage: this.model.outlineImage(),
+      outlineImageLoaded: this.#outlineImageLoaded,
+      screenImage: this.model.screenImage(),
+      screenImageLoaded: this.#screenImageLoaded,
+      showRulers: this.showRulersSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None,
+      showMediaInspector:
+          this.showMediaInspectorSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None,
+      scale: this.model.scale(),
+      cachedCssScreenRect: this.cachedCssScreenRect,
+      cachedOutlineRect: this.cachedOutlineRect,
+      onApplyPresetSize: (width: number, e: Event): void => {
+        this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
+        this.model.setWidthAndScaleToFit(width);
+        e.consume();
+      },
+      bottomRightResizer: this.bottomRightResizer,
+      bottomLeftResizer: this.bottomLeftResizer,
+      rightResizer: this.rightResizer,
+      leftResizer: this.leftResizer,
+      bottomResizer: this.bottomResizer,
+      bottomRightResizerRef: this.bottomRightResizerRef,
+      bottomLeftResizerRef: this.bottomLeftResizerRef,
+      rightResizerRef: this.rightResizerRef,
+      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, this, this.contentElement);
+  }
 
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(html`
-      <div class="device-mode-presets-container-inner">
-        ${sizes.map((size, idx) => html`
-          <div class="fill device-mode-preset-bar-outer">
-            <div class="device-mode-preset-bar"
-                 style="width: ${size * scale}px;"
-                 jslog=${VisualLogging.action().track({click: true}).context(`device-mode-preset-${size}px`)}
-                 @click=${(e: Event) => applySize(size, e)}>
-              <span>${titles[idx]} – ${size}px</span>
-            </div>
-          </div>
-        `).reverse()}
-      </div>
-    `,
-           this.responsivePresetsContainer);
+  private onOutlineImageLoaded(success: boolean): void {
+    if (this.#outlineImageLoaded !== success) {
+      this.#outlineImageLoaded = success;
+      this.requestUpdate();
+    }
   }
 
-  private createResizer(element: HTMLElement, widthFactor: number, heightFactor: number):
-      UI.ResizerWidget.ResizerWidget {
+  private onScreenImageLoaded(success: boolean): void {
+    if (this.#screenImageLoaded !== success) {
+      this.#screenImageLoaded = success;
+      this.requestUpdate();
+    }
+  }
+  private createResizer(widthFactor: number, heightFactor: number): UI.ResizerWidget.ResizerWidget {
     const resizer = new UI.ResizerWidget.ResizerWidget();
-    element.setAttribute('jslog', `${VisualLogging.slider('device-mode-resizer').track({drag: true})}`);
-    resizer.addElement(element);
     let cursor: 'nwse-resize'|'nesw-resize'|('ew-resize' | 'ns-resize') = widthFactor ? 'ew-resize' : 'ns-resize';
     if (widthFactor * heightFactor > 0) {
       cursor = 'nwse-resize';
@@ -294,12 +465,9 @@ export class DeviceModeView extends UI.Widget.VBox {
     let callDoResize = false;
     const showRulers = this.showRulersSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None;
     let contentAreaResized = false;
-    let updateRulers = false;
 
     const cssScreenRect = this.model.screenRect().scale(1 / zoomFactor);
     if (!this.cachedCssScreenRect || !cssScreenRect.isEqual(this.cachedCssScreenRect)) {
-      applyRect(this.screenArea, cssScreenRect);
-      updateRulers = true;
       callDoResize = true;
       this.cachedCssScreenRect = cssScreenRect;
     }
@@ -315,12 +483,10 @@ export class DeviceModeView extends UI.Widget.VBox {
     if (outlineRectFromModel) {
       const outlineRect = outlineRectFromModel.scale(1 / zoomFactor);
       if (!this.cachedOutlineRect || !outlineRect.isEqual(this.cachedOutlineRect)) {
-        applyRect(this.outlineImage, outlineRect);
         callDoResize = true;
         this.cachedOutlineRect = outlineRect;
       }
     }
-    this.contentClip.classList.toggle('device-mode-outline-visible', Boolean(this.model.outlineImage()));
 
     const resizable = this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive;
     if (resizable !== this.cachedResizable) {
@@ -335,73 +501,32 @@ export class DeviceModeView extends UI.Widget.VBox {
     const mediaInspectorVisible =
         this.showMediaInspectorSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None;
     if (mediaInspectorVisible !== this.cachedMediaInspectorVisible) {
-      if (mediaInspectorVisible) {
-        this.mediaInspector.show(this.mediaInspectorContainer);
-      } else {
-        this.mediaInspector.detach();
-      }
       contentAreaResized = true;
       callDoResize = true;
       this.cachedMediaInspectorVisible = mediaInspectorVisible;
     }
 
     if (showRulers !== this.cachedShowRulers) {
-      this.contentClip.classList.toggle('device-mode-rulers-visible', showRulers);
-      if (showRulers) {
-        this.topRuler.show(this.contentArea);
-        this.leftRuler.show(this.contentArea);
-      } else {
-        this.topRuler.detach();
-        this.leftRuler.detach();
-      }
       contentAreaResized = true;
       callDoResize = true;
       this.cachedShowRulers = showRulers;
     }
 
     if (this.model.scale() !== this.cachedScale) {
-      updateRulers = true;
       callDoResize = true;
-      this.renderPresets();
       this.cachedScale = this.model.scale();
     }
 
+    this.requestUpdate();
     this.toolbar.requestUpdate();
-    this.loadImage(this.screenImage, this.model.screenImage());
-    this.loadImage(this.outlineImage, this.model.outlineImage());
-    this.mediaInspector.setAxisTransform(this.model.scale());
     if (callDoResize) {
       this.doResize();
     }
-    if (updateRulers) {
-      this.topRuler.render(this.model.scale());
-      this.leftRuler.render(this.model.scale());
-      this.topRuler.element.positionAt(
-          this.cachedCssScreenRect ? this.cachedCssScreenRect.left : 0,
-          this.cachedCssScreenRect ? this.cachedCssScreenRect.top : 0);
-      this.leftRuler.element.positionAt(
-          this.cachedCssScreenRect ? this.cachedCssScreenRect.left : 0,
-          this.cachedCssScreenRect ? this.cachedCssScreenRect.top : 0);
-    }
     if (contentAreaResized) {
       this.contentAreaResized();
     }
   }
 
-  private loadImage(element: Element, srcset: string): void {
-    if (element.getAttribute('srcset') === srcset) {
-      return;
-    }
-    element.setAttribute('srcset', srcset);
-    if (!srcset) {
-      element.classList.toggle('hidden', true);
-    }
-  }
-
-  private onImageLoaded(element: Element, success: boolean): void {
-    element.classList.toggle('hidden', !success);
-  }
-
   setNonEmulatedAvailableSize(element: Element): void {
     if (this.model.type() !== EmulationModel.DeviceModeModel.Type.None) {
       return;
@@ -414,8 +539,12 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 
   private contentAreaResized(): void {
+    const contentArea = this.contentElement.querySelector<HTMLElement>('.device-mode-content-area');
+    if (!contentArea) {
+      return;
+    }
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const rect = this.contentArea.getBoundingClientRect();
+    const rect = contentArea.getBoundingClientRect();
     const availableSize =
         new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
     const preferredSize = new Geometry.Size(
@@ -689,10 +818,6 @@ export class Ruler extends Common.ObjectWrapper.eventMixin<RulerEventTypes, type
     this.requestUpdate();
   }
 
-  render(scale: number): void {
-    this.scale = scale;
-  }
-
   override wasShown(): void {
     super.wasShown();
     this.requestUpdate();

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -161,14 +161,14 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
   readonly mediaThrottler: Common.Throttler.Throttler = new Common.Throttler.Throttler(0);
   #getWidthCallback?: () => number;
   #setWidthCallback?: (arg0: number) => void;
-  private scale: number;
+  #scale: number;
   private cssModel?: SDK.CSSModel.CSSModel;
   private cachedQueryModels?: MediaQueryUIModel[];
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: 'pure'});
     this.view = view;
-    this.scale = 1;
+    this.#scale = 1;
 
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel, this);
     UI.ZoomManager.ZoomManager.instance().addEventListener(
@@ -217,11 +217,15 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
     delete this.cssModel;
   }
 
-  setAxisTransform(scale: number): void {
-    if (Math.abs(this.scale - scale) < 1e-8) {
+  get scale(): number {
+    return this.#scale;
+  }
+
+  set scale(scale: number) {
+    if (Math.abs(this.#scale - scale) < 1e-8) {
       return;
     }
-    this.scale = scale;
+    this.#scale = scale;
     this.requestUpdate();
   }
 
@@ -368,7 +372,7 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
   }
 
   private zoomFactor(): number {
-    return UI.ZoomManager.ZoomManager.instance().zoomFactor() / this.scale;
+    return UI.ZoomManager.ZoomManager.instance().zoomFactor() / this.#scale;
   }
 
   override wasShown(): void {

package/front_end/panels/emulation/deviceModeView.css

@@ -280,6 +280,7 @@ devtools-toolbar.device-mode-toolbar-options {
 }
 
 .device-mode-ruler {
+  display: block;
   position: absolute;
   overflow: visible;
 }

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -21,31 +21,31 @@ import eventListenersViewStyles from './eventListenersView.css.js';
 
 const UIStrings = {
   /**
-   * @description Empty holder text content in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Empty holder text content in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
   noEventListeners: 'No event listeners',
   /**
-   * @description Empty holder text content in Event Listeners View of the Event Listener Debugging pane in the Elements panel
+   * @description Empty holder text content in Event Listeners view of the Event Listeners sidebar in the Elements panel.
    */
   eventListenersExplanation: 'On this page you will find registered event listeners',
   /**
-   * @description Delete button title in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Delete button title in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
   deleteEventListener: 'Delete event listener',
   /**
-   * @description Passive button text content in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Passive button text content in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
-  togglePassive: 'Toggle Passive',
+  togglePassive: 'Toggle passive',
   /**
-   * @description Passive button title in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Passive button title in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
   toggleWhetherEventListenerIs: 'Toggle whether event listener is passive or blocking',
   /**
-   * @description A context menu item to reveal a node in the DOM tree of the Elements Panel
+   * @description A context menu item to reveal a node in the DOM tree of the Elements panel.
    */
   openInElementsPanel: 'Open in Elements panel',
   /**
-   * @description Text in Event Listeners Widget of the Elements panel
+   * @description Text in Event Listeners widget of the Elements panel.
    */
   passive: 'Passive',
 } as const;