DevTools: Add feature to capture full-height screenshots

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.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.
 /**
  * @unrestricted
  */
 Emulation.DeviceModeView = class extends UI.VBox {
   constructor() {
     super(true);
     this.setMinimumSize(150, 150);
@@ skipping 452 matching lines @@
             fileName += Common.UIString('(%s)', this._model.device().title);
           // Trigger download.
           var link = createElement('a');
           link.download = fileName + '.png';
           link.href = canvas.toDataURL('image/png');
           link.click();
         };
       }
     }
   }
+
+  captureFullHeightScreenshot() {
+    var mainTarget = SDK.targetManager.mainTarget();
+    if (!mainTarget)
+      return;
+    SDK.DOMModel.muteHighlight();
+
+    var executionContext = mainTarget.runtimeModel.defaultExecutionContext();
+    executionContext.evaluate(
+        'document.scrollingElement.scrollHeight', '', false, true, true, false, false, evaluated.bind(this));
+
+    /**
+     * @param  {?SDK.RemoteObject} result
+     * @this {Emulation.DeviceModeView}
+     */
+    function evaluated(result) {
+      var scrollHeight = result.value;

[dgozman, 2017/01/12 21:49:36]

I still think we should expose this through getLayoutMetrics by adding one more
output parameter |contentSize|.

[ahmetemirercin, 2017/01/13 01:49:23]

Done.

+      mainTarget.pageAgent().getLayoutMetrics((err, layoutViewport, visualViewport) => {

[dgozman, 2017/01/12 21:49:35]

I still think this should be in DeviceModeModel. View should not operate
emulationAgent() at all.

[ahmetemirercin, 2017/01/13 01:49:23]

Done.

+        var promises = [];
+        var scaledScrollHeight = Math.floor(scrollHeight * visualViewport.scale * this._model.scale());
+        promises.push(mainTarget.emulationAgent().forceViewport(0, 0, visualViewport.scale));
+        promises.push(mainTarget.emulationAgent().setDeviceMetricsOverride(
+            0, 0, this._model.appliedDeviceScaleFactor(), this._model.isMobile(), false, this._model.scale()));
+        promises.push(mainTarget.emulationAgent().setVisibleSize(0, scaledScrollHeight));
+        Promise.all(promises).then(() => {
+          mainTarget.pageAgent().captureScreenshot(screenshotCaptured.bind(this));
+        })
+      })
+    }
+
+    /**
+     * @param {?Protocol.Error} error
+     * @param {string} content
+     * @this {Emulation.DeviceModeView}
+     */
+    function screenshotCaptured(error, content) {
+      mainTarget.emulationAgent().resetViewport();

[ahmetemirercin, 2017/01/13 01:49:23]

This is also done according to comment above.

+      this._model.resetVisibleSize();
+      SDK.DOMModel.unmuteHighlight();
+      if (error) {
+        console.error(error);
+        return;
+      }
+
+      var canvas = createElement('canvas');
+      var pageImage = new Image();
+      pageImage.src = 'data:image/png;base64,' + content;
+      pageImage.onload = () => {
+        var ctx = canvas.getContext('2d');
+        ctx.imageSmoothingEnabled = false;
+        canvas.width = pageImage.width;
+        canvas.height = pageImage.height;
+        ctx.drawImage(pageImage, 0, 0, pageImage.width, pageImage.height);
+        var url = mainTarget && mainTarget.inspectedURL();
+        var fileName = url ? url.trimURL().removeURLFragment() : '';
+        if (this._model.type() === Emulation.DeviceModeModel.Type.Device)
+          fileName += Common.UIString('(%s)', this._model.device().title);
+        var link = createElement('a');
+        link.download = fileName + '.png';
+        canvas.toBlob(function(blob) {
+          link.href = URL.createObjectURL(blob);
+          link.click();
+        });
+      }
+    }
+  }
 };
 
 /**
  * @unrestricted
  */
 Emulation.DeviceModeView.Ruler = class extends UI.VBox {
   /**
    * @param {boolean} horizontal
    * @param {function(number)} applyCallback
    */
@@ skipping 82 matching lines @@
     return Promise.resolve();
   }
 
   /**
    * @param {number} size
    */
   _onMarkerClick(size) {
     this._applyCallback.call(null, size);
   }
 };