DevTools: Add feature to capture full-height screenshots

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @implements {SDK.TargetManager.Observer}
  * @unrestricted
  */
 Emulation.DeviceModeModel = class {
   /**
    * @param {function()} updateCallback
@@ skipping 255 matching lines @@
   }
 
   /**
    * @return {boolean}
    */
   isFullHeight() {
     return !this._heightSetting.get();
   }
 
   /**
+   * @return {boolean}
+   */
+  _isMobile() {
+    switch (this._type) {
+      case Emulation.DeviceModeModel.Type.Device:
+        return this._device.mobile();
+
+      case Emulation.DeviceModeModel.Type.None:
+        return false;
+
+      case Emulation.DeviceModeModel.Type.Responsive:
+        return this._uaSetting.get() === Emulation.DeviceModeModel.UA.Mobile ||
+            this._uaSetting.get() === Emulation.DeviceModeModel.UA.MobileNoTouch;
+    }
+  }
+
+  /**
    * @return {!Common.Setting}
    */
   scaleSetting() {
     return this._scaleSetting;
   }
 
   /**
    * @return {!Common.Setting}
    */
   uaSetting() {
@@ skipping 105 matching lines @@
       return new UI.Insets(0, 0, 0, 0);
     return this._mode.insets;
   }
 
   /**
    * @param {boolean} resetPageScaleFactor
    */
   _calculateAndEmulate(resetPageScaleFactor) {
     if (!this._target)
       this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageScaleFactor);
-
+    var mobile = this._isMobile();
     if (this._type === Emulation.DeviceModeModel.Type.Device) {
       var orientation = this._device.orientationByName(this._mode.orientation);
       var outline = this._currentOutline();
       var insets = this._currentInsets();
       this._fitScale = this._calculateFitScale(orientation.width, orientation.height, outline, insets);
-      if (this._device.mobile()) {
+      if (mobile) {
         this._appliedUserAgentType =
             this._device.touch() ? Emulation.DeviceModeModel.UA.Mobile : Emulation.DeviceModeModel.UA.MobileNoTouch;
       } else {
         this._appliedUserAgentType =
             this._device.touch() ? Emulation.DeviceModeModel.UA.DesktopTouch : Emulation.DeviceModeModel.UA.Desktop;
       }
       this._applyDeviceMetrics(
           new UI.Size(orientation.width, orientation.height), insets, outline, this._scaleSetting.get(),
-          this._device.deviceScaleFactor, this._device.mobile(),
+          this._device.deviceScaleFactor, mobile,
           this._mode.orientation === Emulation.EmulatedDevice.Horizontal ? 'landscapePrimary' : 'portraitPrimary',
           resetPageScaleFactor);
       this._applyUserAgent(this._device.userAgent);
-      this._applyTouch(this._device.touch(), this._device.mobile());
+      this._applyTouch(this._device.touch(), mobile);
     } else if (this._type === Emulation.DeviceModeModel.Type.None) {
       this._fitScale = this._calculateFitScale(this._availableSize.width, this._availableSize.height);
       this._appliedUserAgentType = Emulation.DeviceModeModel.UA.Desktop;
       this._applyDeviceMetrics(
-          this._availableSize, new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0), 1, 0, false, '',
+          this._availableSize, new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0), 1, 0, mobile, '',
           resetPageScaleFactor);
       this._applyUserAgent('');
       this._applyTouch(false, false);
     } else if (this._type === Emulation.DeviceModeModel.Type.Responsive) {
       var screenWidth = this._widthSetting.get();
       if (!screenWidth || screenWidth > this._preferredScaledWidth())
         screenWidth = this._preferredScaledWidth();
       var screenHeight = this._heightSetting.get();
       if (!screenHeight || screenHeight > this._preferredScaledHeight())
         screenHeight = this._preferredScaledHeight();
-      var mobile = this._uaSetting.get() === Emulation.DeviceModeModel.UA.Mobile ||
-          this._uaSetting.get() === Emulation.DeviceModeModel.UA.MobileNoTouch;
       var defaultDeviceScaleFactor = mobile ? Emulation.DeviceModeModel.defaultMobileScaleFactor : 0;
       this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._heightSetting.get());
       this._appliedUserAgentType = this._uaSetting.get();
       this._applyDeviceMetrics(
           new UI.Size(screenWidth, screenHeight), new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0),
           this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile,
           screenHeight >= screenWidth ? 'portraitPrimary' : 'landscapePrimary', resetPageScaleFactor);
       this._applyUserAgent(mobile ? Emulation.DeviceModeModel._defaultMobileUserAgent : '');
       this._applyTouch(
           this._uaSetting.get() === Emulation.DeviceModeModel.UA.DesktopTouch ||
@@ skipping 69 matching lines @@
       scale,
       deviceScaleFactor,
       mobile,
       screenOrientation,
       resetPageScaleFactor) {
     screenSize.width = Math.max(1, Math.floor(screenSize.width));
     screenSize.height = Math.max(1, Math.floor(screenSize.height));
 
     var pageWidth = screenSize.width - insets.left - insets.right;
     var pageHeight = screenSize.height - insets.top - insets.bottom;
+    this._emulatedPageSize = new UI.Size(Math.floor(pageWidth * scale), Math.floor(pageHeight * scale));
 
     var positionX = insets.left;
     var positionY = insets.top;
     var screenOrientationAngle = screenOrientation === 'landscapePrimary' ? 90 : 0;
 
     this._appliedDeviceSize = screenSize;
     this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRatio;
     this._screenRect = new UI.Rect(
         Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2), outline.top * scale,
         screenSize.width * scale, screenSize.height * scale);
@@ skipping 53 matching lines @@
         if (screenOrientation)
           params.screenOrientation = {type: screenOrientation, angle: screenOrientationAngle};
         setDevicePromise = this._target.emulationAgent().invoke_setDeviceMetricsOverride(
             params, this._deviceMetricsOverrideAppliedForTest.bind(this));
       }
       allPromises.push(setDevicePromise);
       return Promise.all(allPromises);
     }
   }
 
+  /**
+   * @param {function(?Protocol.Error, string) callback
+   */
+  captureFullHeightScreenshot(callback) {
+    this._target.pageAgent().getLayoutMetrics((err, layoutViewport, visualViewport, contentSize) => {
+      var promises = [];
+      var scaledPageSize =
+          new UI.Rect(0, 0, contentSize.width, contentSize.height).scale(visualViewport.scale * this._scale);
+      var params = {
+        width: 0,
+        height: 0,
+        deviceScaleFactor: this._appliedDeviceScaleFactor,
+        mobile: this._isMobile(),
+        fitWindow: false,
+        scale: this._scale,
+      };
+      promises.push(this._target.emulationAgent().forceViewport(0, 0, visualViewport.scale));

[dgozman, 2017/01/19 23:40:42]

I tried this out: with 150% scale in dropdown and manual scale (Shift+Drag), the
image is cropped. Now I think that we should ignore the viewport.scale entirely
and force 1.0 since we account for the whole content size anyway. WDYT?

+      promises.push(this._target.emulationAgent().invoke_setDeviceMetricsOverride(params));
+      promises.push(this._target.emulationAgent().setVisibleSize(scaledPageSize.width, scaledPageSize.height));

[dgozman, 2017/01/19 23:40:42]

You have to Math.floor() these to send integers.

+      Promise.all(promises).then(() => {
+        this._target.pageAgent().captureScreenshot(screenshotCaptured.bind(this));
+      });
+
+      /**
+       * @param {?Protocol.Error} error
+       * @param {string} content
+       * @this {Emulation.DeviceModeModel}
+       */
+      function screenshotCaptured(error, content) {
+        this._target.emulationAgent().setVisibleSize(this._emulatedPageSize.width, this._emulatedPageSize.height);
+        this._target.emulationAgent().resetViewport();
+        callback(error, content);
+      }
+    });
+  }
+
   _deviceMetricsOverrideAppliedForTest() {
     // Used for sniffing in tests.
   }
 
   /**
    * @param {boolean} touchEnabled
    * @param {boolean} mobile
    */
   _applyTouch(touchEnabled, mobile) {
     Emulation.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mobile);
@@ skipping 17 matching lines @@
 
 Emulation.DeviceModeModel.MinDeviceSize = 50;
 Emulation.DeviceModeModel.MaxDeviceSize = 9999;
 
 
 Emulation.DeviceModeModel._defaultMobileUserAgent =
     'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36';
 Emulation.DeviceModeModel._defaultMobileUserAgent =
     SDK.MultitargetNetworkManager.patchUserAgentWithChromeVersion(Emulation.DeviceModeModel._defaultMobileUserAgent);
 Emulation.DeviceModeModel.defaultMobileScaleFactor = 2;