chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -65,163 +65,160 @@ const autoWidthSelect = Directive.directive(AutoWidthSelectDirective);
 
 const UIStrings = {
   /**
-   * @description Title of the device dimensions selection item in the Device Mode Toolbar.
-   * webpage in pixels.
+   * @description Title of the device dimensions selection item in the device mode toolbar.
    * @example {Responsive} PH1
    */
   dimensions: 'Dimensions: {PH1}',
   /**
-   * @description Title of the device pixel ratio selection item in the Device Mode Toolbar.
+   * @description Title of the device pixel ratio selection item in the device mode toolbar.
    * @example {2.0} PH1
    */
   dpr: 'DPR: {PH1}',
   /**
-   * @description Title of the width input textbox in the Device Mode Toolbar, for the width of the
+   * @description Title of the width input textbox in the device mode toolbar, for the width of the
    * webpage in pixels.
    */
   width: 'Width',
   /**
-   * @description Title of the height input textbox in the Device Mode Toolbar, for the height of the
+   * @description Title of the height input textbox in the device mode toolbar, for the height of the
    * webpage in pixels. 'leave empty for full' is an instruction to the user - the webpage will be
    * full-height if this textbox is left empty.
    */
   heightLeaveEmptyForFull: 'Height (leave empty for full)',
   /**
-   * @description Tooltip text for a drop-down menu where the user can select the zoom percentage of
+   * @description Tooltip for a drop-down menu where the user can select the zoom percentage of
    * the webpage preview.
    */
   zoom: 'Zoom',
   /**
-   * @description Tooltip tip for a drop-down menu where the user can select the device pixel ratio
-   * (the ratio between the physical pixels on a screen and CSS logical pixels) of the webpage
+   * @description Tooltip for a drop-down menu where the user can select the device pixel ratio
+   * (the ratio between physical pixels on a screen and CSS logical pixels) of the webpage
    * preview.
    */
   devicePixelRatio: 'Device pixel ratio',
   /**
-   * @description Tooltip tip for a drop-down menu where the user can select the device type e.g.
-   * Mobile, Desktop.
+   * @description Tooltip for a drop-down menu where the user can select the device type (e.g.
+   * Mobile or Desktop).
    */
   deviceType: 'Device type',
   /**
-   * @description Tooltip text for a 'three dots' style menu button which shows an expanded set of options.
+   * @description Tooltip text for a three dots menu button which shows an expanded set of options.
    */
   moreOptions: 'More options',
   /**
    * @description A menu item in the drop-down box that allows the user to select the zoom level.
-   * Labels the option to automatically fit the preview to the available window space. In the Device Mode Toolbar.
+   * Labels the option to automatically fit the preview to the available window space in the device mode toolbar.
    */
   fitToWindow: 'Fit to window',
   /**
    * @description A menu item in the drop-down box that allows the user to select the device pixel
    * ratio. Labels the default value which varies between device types, represented by the
-   * placeholder, which is a number. In the Device Mode Toolbar.
+   * placeholder, which is a number, in the device mode toolbar.
    * @example {4.3} PH1
    */
   defaultF: '{PH1} (default)',
   /**
-   * @description Command to hide the frame (like a picture frame) around the mobile device screen.
+   * @description Command to hide the frame around the mobile device screen.
    */
   hideDeviceFrame: 'Hide device frame',
   /**
-   * @description Command to show the frame (like a picture frame) around the mobile device screen.
+   * @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
+   * @description Command to hide a display in the device mode toolbar that shows the different media
    * queries for the device, above the device screen.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+   * https://web.dev/learn/design/media-queries
    */
   hideMediaQueries: 'Hide media queries',
   /**
-   * @description Command to show a display in the Device Mode Toolbar that shows the different media
+   * @description Command to show a display in the device mode toolbar that shows the different media
    * queries for the device, above the device screen.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+   * https://web.dev/learn/design/media-queries
    */
   showMediaQueries: 'Show media queries',
   /**
-   * @description Command in the Device Mode Toolbar to hide a virtual ruler (for measuring),
+   * @description Command in the device mode toolbar to hide a virtual ruler,
    * displayed above and next to the device screen.
    */
   hideRulers: 'Hide rulers',
   /**
-   * @description Command in the Device Mode Toolbar to show a virtual ruler (for measuring),
+   * @description Command in the device mode toolbar to show a virtual ruler,
    * displayed above and next to the device screen.
    */
   showRulers: 'Show rulers',
   /**
-   * @description Command in the Device Mode Toolbar to remove the drop-down menu from the toolbar
+   * @description Command in the device mode toolbar to remove the drop-down menu from the toolbar
    * that lets the user override the device pixel ratio of the emulated device.
    */
   removeDevicePixelRatio: 'Remove device pixel ratio',
   /**
-   * @description Command in the Device Mode Toolbar to add the drop-down menu to the toolbar
+   * @description Command in the device mode toolbar to add the drop-down menu to the toolbar
    * that lets the user override the device pixel ratio of the emulated device.
    */
   addDevicePixelRatio: 'Add device pixel ratio',
   /**
-   * @description Command in the Device Mode Toolbar to add the drop-down menu to the toolbar
+   * @description Command in the device mode toolbar to remove the drop-down menu from the toolbar
    * that lets the user set the device type (e.g. Desktop or Mobile).
    */
   removeDeviceType: 'Remove device type',
   /**
-   * @description Command in the Device Mode Toolbar to add the drop-down menu to the toolbar
-   * that lets the user add the device type (e.g. Desktop or Mobile).
+   * @description Command in the device mode toolbar to add the drop-down menu to the toolbar
+   * that lets the user set the device type (e.g. Desktop or Mobile).
    */
   addDeviceType: 'Add device type',
   /**
-   * @description A context menu item in the Device Mode Toolbar that resets all settings back to
+   * @description A context menu item in the device mode toolbar that resets all settings back to
    * their default values.
    */
   resetToDefaults: 'Reset to defaults',
   /**
-   * @description A menu command in the Device Mode Toolbar that closes DevTools.
+   * @description A menu command in the device mode toolbar that closes DevTools.
    */
   closeDevtools: 'Close DevTools',
   /**
-   * @description Title of the device selected in the Device Mode Toolbar. The 'response' device is
-   * not a specific phone/tablet model but a virtual device that can change its height and width
-   * dynamically by clicking and dragging the sides. 'Response' refers to response design:
-   * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+   * @description Title of the device selected in the device mode toolbar. The responsive device is
+   * not a specific phone or tablet model but a virtual device that can change its height and width
+   * dynamically by clicking and dragging the sides. Responsive refers to responsive design:
+   * https://web.dev/learn/design
    */
   responsive: 'Responsive',
   /**
-   * @description A context menu item in the Device Mode Toolbar that takes the user to a new screen
-   * where they can add/edit/remove custom devices.
+   * @description A context menu item in the device mode toolbar that takes the user to a screen
+   * where they can add, edit, or remove custom devices.
    */
   edit: 'Edit…',
   /**
-   * @description Text describing the current orientation of the phone/device (vs. landscape).
+   * @description Text describing the portrait orientation of the emulated device.
    */
   portrait: 'Portrait',
   /**
-   * @description Text describing the current orientation of the phone/device (vs. portrait).
+   * @description Text describing the landscape orientation of the emulated device.
    */
   landscape: 'Landscape',
   /**
-   * @description Title of button in the Device Mode Toolbar which rotates the device 90 degrees.
+   * @description Title of a button in the device mode toolbar which rotates the device 90 degrees.
    */
   rotate: 'Rotate',
   /**
-   * @description Tooltip of the rotate/screen orientation button.
+   * @description Tooltip of the rotate screen orientation button.
    */
   screenOrientationOptions: 'Screen orientation options',
   /**
-   * @description Tooltip shown on the rotate button when screen orientation is locked by the page
-   * via screen.orientation.lock().
+   * @description Tooltip shown on the rotate button when screen orientation is locked by the page.
    */
   screenOrientationLocked: 'Screen orientation is locked by the page',
   /**
-   * @description Tooltip for a button which turns on/off dual-screen mode, which emulates devices
-   * like tablets which have two screens.
+   * @description Tooltip for a button which toggles dual-screen mode to emulate devices with two screens.
    */
   toggleDualscreenMode: 'Toggle dual-screen mode',
   /**
-   * @description Tooltip tip for a drop-down menu where the user can select the device
-   * posture e.g. Continuous, Folded.
+   * @description Tooltip for a drop-down menu where the user can select the device
+   * posture (e.g. Continuous or Folded).
    */
   devicePosture: 'Device posture',
   /**
-   * @description Title of the network throttling selection in the Device Mode Toolbar.
+   * @description Title of the network throttling selection in the device mode toolbar.
    */
   throttling: 'Throttling',
 } as const;
@@ -237,6 +234,11 @@ export interface DeviceModeOption {
   jslogContext: string;
 }
 
+export interface DeviceGroup {
+  category: EmulationModel.EmulatedDevices.Category;
+  options: DeviceModeOption[];
+}
+
 export interface ViewInput {
   isResponsive: boolean;
   isFullHeight: boolean;
@@ -249,7 +251,7 @@ export interface ViewInput {
   showPostureItem: boolean;
   deviceModeOptions: {
     responsive: {title: string, selected: boolean, jslogContext: string},
-    standard: DeviceModeOption[],
+    standard: DeviceGroup[],
     custom: DeviceModeOption[],
     edit: {title: string, jslogContext: string},
   };
@@ -325,11 +327,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <option value="Responsive" ?selected=${input.deviceModeOptions.responsive.selected} jslog=${VisualLogging.item(input.deviceModeOptions.responsive.jslogContext).track({click: true})}>
             ${input.deviceModeOptions.responsive.title}
           </option>
-          ${input.deviceModeOptions.standard.length > 0 ? html`
-            <optgroup label="Standard">
-              ${input.deviceModeOptions.standard.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
+          ${input.deviceModeOptions.standard.map(group => html`
+            <optgroup label=${EmulationModel.EmulatedDevices.getCategoryTitle(group.category)}>
+              ${group.options.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
             </optgroup>
-          ` : ''}
+          `)}
           ${input.deviceModeOptions.custom.length > 0 ? html`
             <optgroup label="Custom">
               ${input.deviceModeOptions.custom.map(o => html`<option value=${o.title} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
@@ -571,9 +573,10 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     const uaOptions = this.getUserAgentOptions();
     const postureOptions = this.getDevicePostureOptions();
 
+    const standardOptions = deviceModeOptions.standard.flatMap(g => g.options);
     const selectedDeviceOption = [
       deviceModeOptions.responsive,
-      ...deviceModeOptions.standard,
+      ...standardOptions,
       ...deviceModeOptions.custom,
     ].find(o => o.selected);
     const deviceText = selectedDeviceOption ? selectedDeviceOption.title : deviceModeOptions.responsive.title;
@@ -880,18 +883,8 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
   private getDeviceModeOptions(): {
     responsive: {title: string, selected: boolean, jslogContext: string},
-    standard: Array<{
-      device: EmulationModel.EmulatedDevices.EmulatedDevice,
-      title: string,
-      selected: boolean,
-      jslogContext: string,
-    }>,
-    custom: Array<{
-      device: EmulationModel.EmulatedDevices.EmulatedDevice,
-      title: string,
-      selected: boolean,
-      jslogContext: string,
-    }>,
+    standard: DeviceGroup[],
+    custom: DeviceModeOption[],
     edit: {title: string, jslogContext: string},
   } {
     if (!this.model) {
@@ -902,18 +895,39 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
         edit: {title: i18nString(UIStrings.edit), jslogContext: 'edit'},
       };
     }
+    const currentDevice = this.model.device();
+    const optionsByCategory = new Map<EmulationModel.EmulatedDevices.Category, DeviceModeOption[]>();
+
+    for (const device of this.standardDevices()) {
+      const cat = EmulationModel.EmulatedDevices.deviceCategory(device);
+      let list = optionsByCategory.get(cat);
+      if (!list) {
+        list = [];
+        optionsByCategory.set(cat, list);
+      }
+      list.push({
+        device,
+        title: device.title,
+        selected: currentDevice === device,
+        jslogContext: Platform.StringUtilities.toKebabCase(device.title),
+      });
+    }
+
+    const groupedStandard: DeviceGroup[] = [];
+    for (const category of EmulationModel.EmulatedDevices.CATEGORY_ORDER) {
+      const options = optionsByCategory.get(category);
+      if (options && options.length > 0) {
+        groupedStandard.push({category, options});
+      }
+    }
+
     return {
       responsive: {
         title: i18nString(UIStrings.responsive),
         selected: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive,
         jslogContext: 'responsive',
       },
-      standard: this.standardDevices().map(device => ({
-                                             device,
-                                             title: device.title,
-                                             selected: this.model?.device() === device,
-                                             jslogContext: Platform.StringUtilities.toKebabCase(device.title),
-                                           })),
+      standard: groupedStandard,
       custom: this.customDevices().map(device => ({
                                          device,
                                          title: device.title,

package/front_end/panels/emulation/DeviceModeView.ts

@@ -5,12 +5,8 @@
 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 Platform from '../../core/platform/platform.js';
-import * as TextUtils from '../../core/text_utils/text_utils.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 Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -24,7 +20,7 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Bottom resizer element title in Device Mode View of the Device Toolbar
+   * @description Title of the bottom resizer element in the device mode view of the device mode toolbar.
    */
   doubleclickForFullHeight: 'Double-click for full height',
   /**
@@ -290,8 +286,8 @@ export class DeviceModeView extends UI.Widget.VBox {
   #lastScreenImageSrc?: string;
   #view: DeviceModeViewView;
 
-  constructor(view: DeviceModeViewView = DEFAULT_DEVICE_MODE_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: DeviceModeViewView = DEFAULT_DEVICE_MODE_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
 
     this.setMinimumSize(150, 150);
@@ -497,17 +493,6 @@ export class DeviceModeView extends UI.Widget.VBox {
     }
   }
 
-  setNonEmulatedAvailableSize(element: Element): void {
-    if (this.model.type() !== EmulationModel.DeviceModeModel.Type.None) {
-      return;
-    }
-    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const rect = element.getBoundingClientRect();
-    const availableSize =
-        new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
-    this.model.setAvailableSize(availableSize, availableSize);
-  }
-
   private contentAreaResized(): void {
     const contentArea = this.contentElement.querySelector<HTMLElement>('.device-mode-content-area');
     if (!contentArea) {
@@ -544,122 +529,7 @@ export class DeviceModeView extends UI.Widget.VBox {
   override willHide(): void {
     super.willHide();
     this.model.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
-  }
-
-  async captureScreenshot(): Promise<void> {
-    const screenshot = await this.model.captureScreenshot(false);
-    if (screenshot === null) {
-      return;
-    }
-
-    const pageImage = new Image();
-    pageImage.src = 'data:image/png;base64,' + screenshot;
-    pageImage.onload = async () => {
-      const scale = pageImage.naturalWidth / this.model.screenRect().width;
-      const outlineRectFromModel = this.model.outlineRect();
-      if (!outlineRectFromModel) {
-        throw new Error('Unable to take screenshot: no outlineRect available.');
-      }
-      const outlineRect = outlineRectFromModel.scale(scale);
-      const screenRect = this.model.screenRect().scale(scale);
-      const visiblePageRect = this.model.visiblePageRect().scale(scale);
-      const contentLeft = screenRect.left + visiblePageRect.left - outlineRect.left;
-      const contentTop = screenRect.top + visiblePageRect.top - outlineRect.top;
-
-      const canvas = new OffscreenCanvas(Math.floor(outlineRect.width),
-                                         // Cap the height to not hit the GPU limit.
-                                         // https://crbug.com/1260828
-                                         Math.min((1 << 14), Math.floor(outlineRect.height)));
-      const ctx = canvas.getContext('2d', {willReadFrequently: true});
-      if (!ctx) {
-        throw new Error('Could not get 2d context from canvas.');
-      }
-      ctx.imageSmoothingEnabled = false;
-
-      if (this.model.outlineImage()) {
-        await this.paintImage(ctx, this.model.outlineImage(), outlineRect.relativeTo(outlineRect));
-      }
-      if (this.model.screenImage()) {
-        await this.paintImage(ctx, this.model.screenImage(), screenRect.relativeTo(outlineRect));
-      }
-      ctx.drawImage(pageImage, Math.floor(contentLeft), Math.floor(contentTop));
-      void this.saveScreenshot(canvas);
-    };
-  }
-
-  async captureFullSizeScreenshot(): Promise<void> {
-    const screenshot = await this.model.captureScreenshot(true);
-    if (screenshot === null) {
-      return;
-    }
-    return this.saveScreenshotBase64(screenshot);
-  }
-
-  async captureAreaScreenshot(clip?: Protocol.Page.Viewport): Promise<void> {
-    const screenshot = await this.model.captureScreenshot(false, clip);
-    if (screenshot === null) {
-      return;
-    }
-    return this.saveScreenshotBase64(screenshot);
-  }
-
-  private saveScreenshotBase64(screenshot: string): void {
-    const pageImage = new Image();
-    pageImage.src = 'data:image/png;base64,' + screenshot;
-    pageImage.onload = () => {
-      const canvas = new OffscreenCanvas(pageImage.naturalWidth,
-                                         // Cap the height to not hit the GPU limit.
-                                         // https://crbug.com/1260828
-                                         Math.min((1 << 14), Math.floor(pageImage.naturalHeight)));
-      const ctx = canvas.getContext('2d', {willReadFrequently: true});
-      if (!ctx) {
-        throw new Error('Could not get 2d context for base64 screenshot.');
-      }
-      ctx.imageSmoothingEnabled = false;
-      ctx.drawImage(pageImage, 0, 0);
-      void this.saveScreenshot(canvas);
-    };
-  }
-
-  private paintImage(ctx: OffscreenCanvasRenderingContext2D|CanvasRenderingContext2D, src: string,
-                     rect: EmulationModel.DeviceModeModel.Rect): Promise<void> {
-    return new Promise(resolve => {
-      const image = new Image();
-      image.crossOrigin = 'Anonymous';
-      image.srcset = src;
-      image.onerror = () => resolve();
-      image.onload = () => {
-        ctx.drawImage(image, rect.left, rect.top, rect.width, rect.height);
-        resolve();
-      };
-    });
-  }
-
-  private async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
-    const url = this.model.inspectedURL();
-    let fileName = '';
-    if (url) {
-      const withoutFragment = Platform.StringUtilities.removeURLFragment(url);
-      fileName = Platform.StringUtilities.trimURL(withoutFragment);
-    }
-
-    const device = this.model.device();
-    if (device && this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
-      fileName += `(${device.title})`;
-    }
-    fileName += '.png';
-    const blob = await canvas.convertToBlob({type: 'image/png'});
-    const dataUrl = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-    const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);
-    const contentData = new TextUtils.ContentData.ContentData(base64, /* isBase64=*/ true, 'image/png');
-    await Workspace.FileManager.FileManager.instance().save(fileName as Platform.DevToolsPath.RawPathString,
-                                                            contentData, /* forceSaveAs=*/ true);
-    Workspace.FileManager.FileManager.instance().close(fileName as Platform.DevToolsPath.RawPathString);
+    this.model.exitHingeMode();
   }
 }