chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -1,109 +1,90 @@
 // Copyright 2016 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Common from '../../core/common/common.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';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {DeviceModeView} from './DeviceModeView.js';
-import type {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
+import {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
-let deviceModeWrapperInstance: DeviceModeWrapper;
+const {widget} = UI.Widget;
+interface ViewInput {
+  showDeviceMode: boolean;
+}
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+    render(input.showDeviceMode ?
+      html`<devtools-widget ${widget(DeviceModeView)}>
+        ${widget(() => InspectedPagePlaceholder.instance(), {minimumSize: new Geometry.Size(1, 1)})}
+      </devtools-widget>` :
+      widget(() => InspectedPagePlaceholder.instance(), {minimumSize: new Geometry.Size(150, 150)}),
+      target);
+  // clang-format on
+};
 
 export class DeviceModeWrapper extends UI.Widget.VBox {
-  private readonly inspectedPagePlaceholder: InspectedPagePlaceholder;
-  private deviceModeView: DeviceModeView|null;
   private readonly toggleDeviceModeAction: UI.ActionRegistration.Action;
   private showDeviceModeSetting: Common.Settings.Setting<boolean>;
+  readonly #view: View;
 
-  private constructor(inspectedPagePlaceholder: InspectedPagePlaceholder) {
-    super();
-    this.inspectedPagePlaceholder = inspectedPagePlaceholder;
-    this.deviceModeView = null;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
     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.update.bind(this, false));
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.SCREENSHOT_REQUESTED,
-        this.screenshotRequestedFromOverlay, this);
-    this.update(true);
+    this.showDeviceModeSetting.addChangeListener(this.requestUpdate.bind(this));
+    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                SDK.OverlayModel.Events.SCREENSHOT_REQUESTED,
+                                                                this.screenshotRequestedFromOverlay, this);
+    this.requestUpdate();
   }
 
-  static instance(opts: {
-    forceNew: boolean|null,
-    inspectedPagePlaceholder: InspectedPagePlaceholder|null,
-  } = {forceNew: null, inspectedPagePlaceholder: null}): DeviceModeWrapper {
-    const {forceNew, inspectedPagePlaceholder} = opts;
-    if (!deviceModeWrapperInstance || forceNew) {
-      if (!inspectedPagePlaceholder) {
-        throw new Error(
-            `Unable to create DeviceModeWrapper: inspectedPagePlaceholder must be provided: ${new Error().stack}`);
-      }
-
-      deviceModeWrapperInstance = new DeviceModeWrapper(inspectedPagePlaceholder);
+  static #setNonEmulatedAvailableSize(): void {
+    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+    if (model.type() !== EmulationModel.DeviceModeModel.Type.None) {
+      return;
     }
 
-    return deviceModeWrapperInstance;
+    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);
   }
 
-  toggleDeviceMode(): void {
-    this.showDeviceModeSetting.set(!this.showDeviceModeSetting.get());
-  }
-
-  isDeviceModeOn(): boolean {
-    return this.showDeviceModeSetting.get();
-  }
+  static captureScreenshot(fullSize?: boolean, clip?: Protocol.Page.Viewport): boolean {
+    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
 
-  captureScreenshot(fullSize?: boolean, clip?: Protocol.Page.Viewport): boolean {
-    if (!this.deviceModeView) {
-      this.deviceModeView = new DeviceModeView();
-    }
-    this.deviceModeView.setNonEmulatedAvailableSize(this.inspectedPagePlaceholder.element);
+    this.#setNonEmulatedAvailableSize();
     if (fullSize) {
-      void this.deviceModeView.captureFullSizeScreenshot();
+      void model.captureFullSizeScreenshot();
     } else if (clip) {
-      void this.deviceModeView.captureAreaScreenshot(clip);
+      void model.captureAreaScreenshot(clip);
     } else {
-      void this.deviceModeView.captureScreenshot();
+      void model.captureScreenshot();
     }
     return true;
   }
 
   private screenshotRequestedFromOverlay(event: Common.EventTarget.EventTargetEvent<Protocol.Page.Viewport>): void {
     const clip = event.data;
-    this.captureScreenshot(false, clip);
+    DeviceModeWrapper.captureScreenshot(false, clip);
   }
 
-  update(force?: boolean): void {
+  override performUpdate(): void {
     this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());
 
-    const shouldShow = this.showDeviceModeSetting.get();
-    if (!force && shouldShow === this.deviceModeView?.isShowing()) {
-      return;
-    }
-
-    if (shouldShow) {
-      if (!this.deviceModeView) {
-        this.deviceModeView = new DeviceModeView();
-      }
-      this.deviceModeView.show(this.element);
-      this.inspectedPagePlaceholder.clearMinimumSize();
-      this.inspectedPagePlaceholder.show(this.deviceModeView.element);
-    } else {
-      if (this.deviceModeView) {
-        this.deviceModeView.exitHingeMode();
-        this.deviceModeView.detach();
-      }
-      this.inspectedPagePlaceholder.restoreMinimumSize();
-      this.inspectedPagePlaceholder.show(this.element);
-    }
+    this.#view({showDeviceMode: this.showDeviceModeSetting.get()}, undefined, this.contentElement);
   }
 }
 
@@ -111,7 +92,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
       case 'emulation.capture-screenshot':
-        return DeviceModeWrapper.instance().captureScreenshot();
+        return DeviceModeWrapper.captureScreenshot();
 
       case 'emulation.capture-node-screenshot': {
         const node = context.flavor(SDK.DOMModel.DOMNode);
@@ -170,18 +151,20 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           clip.y *= zoom;
           clip.width *= zoom;
           clip.height *= zoom;
-          DeviceModeWrapper.instance().captureScreenshot(false, clip);
+          DeviceModeWrapper.captureScreenshot(false, clip);
         }
         void captureClip();
         return true;
       }
 
       case 'emulation.capture-full-height-screenshot':
-        return DeviceModeWrapper.instance().captureScreenshot(true);
+        return DeviceModeWrapper.captureScreenshot(true);
 
-      case 'emulation.toggle-device-mode':
-        DeviceModeWrapper.instance().toggleDeviceMode();
+      case 'emulation.toggle-device-mode': {
+        const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+        model.toggleDeviceMode();
         return true;
+      }
     }
     return false;
   }

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -16,8 +16,8 @@ import mediaQueryInspectorStyles from './mediaQueryInspector.css.js';
 
 const UIStrings = {
   /**
-   * @description A context menu item/command in the Media Query Inspector of the Device Toolbar.
-   * Takes the user to the source code where this media query actually came from.
+   * @description A context menu item in the media query inspector of the device mode toolbar.
+   * Takes the user to the source code where this media query came from.
    */
   revealInSourceCode: 'Reveal in source code',
 } as const;

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

@@ -11,11 +11,11 @@ import type * as Emulation from './emulation.js';
 
 const UIStrings = {
   /**
-   * @description Title of an action in the emulation tool to toggle device mode
+   * @description Title of an action in the emulation tool to toggle device mode.
    */
   toggleDeviceToolbar: 'Toggle device toolbar',
   /**
-   * @description Title of an action in the emulation tool to capture screenshot
+   * @description Title of an action in the emulation tool to capture screenshot.
    */
   captureScreenshot: 'Capture screenshot',
   /**
@@ -25,38 +25,38 @@ const UIStrings = {
   captureFullSizeScreenshot: 'Capture full size screenshot',
   /**
    * @description Title of an action in the emulation tool to capture a screenshot of just this node.
-   * Node refers to a HTML element/node.
+   * Node refers to an HTML element/node.
    */
   captureNodeScreenshot: 'Capture node screenshot',
   /**
-   * @description Command in the Device Mode Toolbar, to show media query boundaries in the UI.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+   * @description Command in the device mode toolbar to show media query boundaries in the UI.
+   * https://web.dev/learn/design/media-queries
    */
   showMediaQueries: 'Show media queries',
   /**
-   * @description A tag of Mobile related settings that can be searched in the command menu if the
+   * @description A tag of mobile-related settings that can be searched in the command menu if the
    * user doesn't know the exact name of the tool. Device refers to e.g. phone/tablet.
    */
   device: 'device',
   /**
-   * @description Command in the Device Mode Toolbar, to hide media query boundaries in the UI.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+   * @description Command in the device mode toolbar to hide media query boundaries in the UI.
+   * https://web.dev/learn/design/media-queries
    */
   hideMediaQueries: 'Hide media queries',
   /**
    * @description Command that shows measuring rulers next to the emulated device.
    */
-  showRulers: 'Show rulers in the Device Mode toolbar',
+  showRulers: 'Show rulers in the device mode toolbar',
   /**
    * @description Command that hides measuring rulers next to the emulated device.
    */
-  hideRulers: 'Hide rulers in the Device Mode toolbar',
+  hideRulers: 'Hide rulers in the device mode toolbar',
   /**
-   * @description Command that shows a frame (like a picture frame) around the emulated device.
+   * @description Command that shows a frame around the emulated device.
    */
   showDeviceFrame: 'Show device frame',
   /**
-   * @description Command that hides a frame (like a picture frame) around the emulated device.
+   * @description Command that hides a frame around the emulated device.
    */
   hideDeviceFrame: 'Hide device frame',
 

package/front_end/panels/issues/IssuesPane.ts

@@ -274,7 +274,9 @@ export class IssuesPane extends UI.Widget.VBox {
     const issueCounter = new IssueCounter.IssueCounter.IssueCounter();
     issueCounter.data = {
       clickHandler: () => {
-        this.focus();
+        const summary = IssueCounter.IssueCounter.getIssueCountsEnumeration(
+            IssuesManager.IssuesManager.IssuesManager.instance(), false);
+        UI.ARIAUtils.LiveAnnouncer.alert(summary);
       },
       tooltipCallback: () => {
         const issueEnumeration = IssueCounter.IssueCounter.getIssueCountsEnumeration(

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -10,6 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
+import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
 import type {LighthouseRun as LighthouseRunType, ProtocolService} from './LighthouseProtocolService.js';
@@ -298,6 +299,11 @@ class LighthouseRun {
       emulationModel.enabledSetting().set(true);
       emulationModel.deviceOutlineSetting().set(true);
 
+      // The emulation model is currently coupled to the UI.
+      // We must wait for the device mode view to render so that it can
+      // initialize the model with the available spatial constraints.
+      await UI.Widget.Widget.allUpdatesComplete;
+
       for (const device of EmulationModel.EmulatedDevices.EmulatedDevicesList.instance().standard()) {
         if (device.title === 'Moto G Power') {
           emulationModel.emulate(EmulationModel.DeviceModeModel.Type.Device, device, device.modes[0], 1);

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -13,11 +13,9 @@ import {LinearMemoryHighlightChipList} from './LinearMemoryHighlightChipList.js'
 import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import {
-  type AddressInputChangedEvent,
-  type HistoryNavigationEvent,
+  LinearMemoryNavigator,
   Mode,
   Navigation,
-  type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
 import {LinearMemoryValueInterpreter} from './LinearMemoryValueInterpreter.js';
 import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
@@ -117,9 +115,9 @@ export interface ViewInput {
   canGoBackInHistory: boolean;
   canGoForwardInHistory: boolean;
   onRefreshRequest: () => void;
-  onAddressChange: (e: AddressInputChangedEvent) => void;
-  onNavigatePage: (e: PageNavigationEvent) => void;
-  onNavigateHistory: (e: HistoryNavigationEvent) => boolean;
+  onAddressChange: (address: string, mode: Mode) => void;
+  onNavigatePage: (navigation: Navigation) => void;
+  onNavigateHistory: (navigation: Navigation) => boolean;
   onJumpToAddress: (address: number) => void;
   onDeleteMemoryHighlight: (info: HighlightInfo) => void;
   onByteSelected: (e: ByteSelectedEvent) => void;
@@ -148,20 +146,19 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
   render(html`
     <style>${linearMemoryInspectorStyles}</style>
     <div class="view">
-      <devtools-linear-memory-inspector-navigator
-        .data=${
-      {
+      <devtools-widget class="navigator-widget"
+        ${widget(LinearMemoryNavigator, {
         address: navigatorAddressToShow,
         valid: navigatorAddressIsValid,
         mode: input.currentNavigatorMode,
         error: errorMsg,
         canGoBackInHistory: input.canGoBackInHistory,
         canGoForwardInHistory: input.canGoForwardInHistory,
-      }}
-        @refreshrequested=${input.onRefreshRequest}
-        @addressinputchanged=${input.onAddressChange}
-        @pagenavigation=${input.onNavigatePage}
-        @historynavigation=${input.onNavigateHistory}></devtools-linear-memory-inspector-navigator>
+        onRefreshRequest: input.onRefreshRequest,
+        onAddressChange: input.onAddressChange,
+        onNavigatePage: input.onNavigatePage,
+        onNavigateHistory: input.onNavigateHistory,
+      })}></devtools-widget>
       ${widget(LinearMemoryHighlightChipList, {
         highlightInfos: highlightedMemoryAreas,
         focusedMemoryHighlight,
@@ -403,8 +400,7 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     void this.requestUpdate();
   }
 
-  #onAddressChange(e: AddressInputChangedEvent): void {
-    const {address, mode} = e.data;
+  #onAddressChange(address: string, mode: Mode): void {
     const isValid = isValidAddress(address, this.#outerMemoryLength);
     const newAddress = parseAddress(address);
     this.#currentNavigatorAddressLine = address;
@@ -444,13 +440,13 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     void this.requestUpdate();
   }
 
-  #navigateHistory(e: HistoryNavigationEvent): boolean {
-    return e.data === Navigation.FORWARD ? this.#history.rollover() : this.#history.rollback();
+  #navigateHistory(navigation: Navigation): boolean {
+    return navigation === Navigation.FORWARD ? this.#history.rollover() : this.#history.rollback();
   }
 
-  #navigatePage(e: PageNavigationEvent): void {
-    const newAddress =
-        e.data === Navigation.FORWARD ? this.#address + this.#numBytesPerPage : this.#address - this.#numBytesPerPage;
+  #navigatePage(navigation: Navigation): void {
+    const newAddress = navigation === Navigation.FORWARD ? this.#address + this.#numBytesPerPage :
+                                                           this.#address - this.#numBytesPerPage;
     const addressInRange = Math.max(0, Math.min(newAddress, this.#outerMemoryLength - 1));
     this.#jumpToAddress(addressInRange);
   }