chrome-devtools-frontend 1.0.1669021 → 1.0.1672388

package/front_end/panels/console/ConsoleFormat.ts

@@ -2,9 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 
 // VGA color palette
 const ANSI_COLORS = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'gray'];
@@ -199,65 +198,6 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
   return {tokens, args: args.slice(argIndex)};
 };
 
-/**
- * This function converts a string into a partial regex string that
- * case-insensitively matches it in CSS, even if CSS escapes are used.
- *
- * @param cssString the target string.
- * @returns a partial regex matching the string in CSS.
- */
-const cssEscapeRegex = (cssString: string): string => {
-  return [...cssString]
-      .map(char => {
-        const charCodes = new Set([char.toLowerCase(), char.toUpperCase()].map(c => c.charCodeAt(0).toString(16)));
-        const charCodeRegex =
-            [...charCodes].map(charCode => `\\\\0{0,${6 - charCode.length}}${charCode}[ \\n\\t]?`).join('|');
-        return `\\\\?(?:${charCodeRegex}|${char})`;
-      })
-      .join('');
-};
-
 export const updateStyle = (currentStyle: Map<string, {value: string, priority: string}>, styleToAdd: string): void => {
-  const ALLOWED_PROPERTY_PREFIXES = ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
-  // We only allow data URLs with the `url()` CSS function.
-  // The capture group is not intended to grab the whole URL exactly, just enough so we can check the scheme.
-  // The regex also covers CSS hex-escaped variations of `url()`.
-  const URL_REGEX = new RegExp(`(?=${cssEscapeRegex('url')}\\(['"]?([^\\)]*))`, 'gi');
-  // We greedily capture all `image-set()`s to make sure that all of
-  // them properly use `url()`s to enforce the data URL check later.
-  const IMAGESET_REGEX = new RegExp(`(?=(${cssEscapeRegex('image-set')}\\(.*))`, 'gi');
-  const GOOD_IMAGESET_REGEX = /^image-set\((?:(?:(?:url|type)\("[^\\"]*"\)|[\d.]+(?:x|dpi|dpcm|dppx)),?\s*)+\)/i;
-
-  currentStyle.clear();
-  /* eslint-disable-next-line @devtools/no-imperative-dom-api --
-   * We're not mutating the DOM here, but just need a temporary
-   * `<span>` to parse `styleToAdd` into a `CSSStyleDeclaration`.
-   **/
-  const buffer = document.createElement('span');
-  buffer.setAttribute('style', styleToAdd);
-  for (const property of buffer.style) {
-    if (!ALLOWED_PROPERTY_PREFIXES.some(
-            prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
-      continue;
-    }
-
-    const value = buffer.style.getPropertyValue(property);
-    // We make sure every `image-set()` only uses `url()`s for its images.
-    // If any of them seem malformed, we skip the whole property.
-    const imageSets = [...value.matchAll(IMAGESET_REGEX)];
-    if (imageSets.some(match => !GOOD_IMAGESET_REGEX.test(match[1]))) {
-      continue;
-    }
-    // There could be multiple `url()` functions, so we check them all.
-    // If any of them is not a `data` URL, we skip the whole property.
-    const potentialUrls = [...value.matchAll(URL_REGEX)].map(match => match[1]);
-    if (potentialUrls.some(
-            potentialUrl => !Common.ParsedURL.schemeIs(potentialUrl as Platform.DevToolsPath.UrlString, 'data:'))) {
-      continue;
-    }
-    currentStyle.set(property, {
-      value,
-      priority: buffer.style.getPropertyPriority(property),
-    });
-  }
+  ObjectUI.CSSStyleSanitizer.sanitizeStyle(currentStyle, styleToAdd);
 };

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -880,9 +880,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (includePreview && obj.preview) {
       renderPreview(true);
     } else if (obj.type === 'function') {
-      const functionElement = titleElement.createChild('span');
-      void ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(obj, functionElement, false);
       titleElement.classList.add('object-value-function');
+      void ObjectUI.ObjectPropertiesSection.formatObjectAsFunction(obj, false).then(t => {
+        const fragment = document.createDocumentFragment();
+
+        render(t, fragment, {host: this});
+        titleElement.insertBefore(fragment, titleElement.firstChild);
+      });
     } else if (obj.subtype === 'trustedtype') {
       titleElement.appendChild(this.formatParameterAsTrustedType(obj));
     } else {
@@ -923,16 +927,19 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return result;
 
     function formatTargetFunction(this: ConsoleViewMessage, targetFunction: SDK.RemoteObject.RemoteObject): void {
-      const functionElement = document.createElement('span');
-      const promise = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(
-          targetFunction, functionElement, true, includePreview);
-      result.appendChild(functionElement);
+      const promise = ObjectUI.ObjectPropertiesSection.formatObjectAsFunction(targetFunction, true, includePreview);
       if (targetFunction !== originalFunction) {
         const note = result.createChild('span', 'object-state-note info-note');
         UI.Tooltip.Tooltip.install(note, i18nString(UIStrings.functionWasResolvedFromBound));
       }
       result.addEventListener('contextmenu', this.contextMenuEventFired.bind(this, originalFunction), false);
-      void promise.then(() => this.formattedParameterAsFunctionForTest());
+      void promise.then(t => {
+        const fragment = document.createDocumentFragment();
+
+        render(t, fragment, {host: this});
+        result.insertBefore(fragment, result.firstChild);
+        this.formattedParameterAsFunctionForTest();
+      });
     }
   }
 

package/front_end/panels/emulation/AdvancedApp.ts

@@ -58,8 +58,7 @@ export class AdvancedApp implements UI.App.App {
 
     this.inspectedPagePlaceholder = InspectedPagePlaceholder.instance();
     this.inspectedPagePlaceholder.addEventListener(Events.UPDATE, this.onSetInspectedPageBounds.bind(this), this);
-    this.deviceModeView =
-        DeviceModeWrapper.instance({inspectedPagePlaceholder: this.inspectedPagePlaceholder, forceNew: false});
+    this.deviceModeView = new DeviceModeWrapper();
 
     UI.DockController.DockController.instance().addEventListener(
         UI.DockController.Events.BEFORE_DOCK_SIDE_CHANGED, this.onBeforeDockSideChange, this);

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