DevTools: Add feature to capture full-height screenshots

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

Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
index ce6aef2fe18dd3a2b95a5b1b6cb15d2951cdaedd..d01082661d9ac076cbdf0cc8a8f1500ea7b52090 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
@@ -470,6 +470,71 @@ Emulation.DeviceModeView = class extends UI.VBox {
       }
     }
   }
+
+  captureFullHeightScreenshot() {
+    var mainTarget = SDK.targetManager.mainTarget();
+    if (!mainTarget)
+      return;
+    SDK.DOMModel.muteHighlight();
+    var visiblePageRect = this._model.visiblePageRect();
+    var pageWidth = Math.floor(visiblePageRect.width);

[dgozman, 2017/01/11 01:19:25]

visiblePageRect is cropped by available space. This makes it hard to take a
screenshot of iPadPro, for example. If you move the logic into DeviceModeModel
as suggested below, we can use pageWidth from there (equals to |screenSize.width
- insets.left - insets.right|).

[ahmetemirercin, 2017/01/11 19:25:18]

After updating 'setVisibleSize' to handle width&height independently, there will
be no need for this.

+
+    var executionContext = UI.context.flavor(SDK.ExecutionContext);

[dgozman, 2017/01/11 01:19:25]

Should instead use mainTarget.runtimeModel.defaultExecutionContext()

[ahmetemirercin, 2017/01/11 19:25:17]

Done.

+    executionContext.evaluate(
+        'document.scrollingElement.scrollHeight', '', false, true, true, false, false, evaluated.bind(this));
+
+    function evaluated(result) {

[dgozman, 2017/01/11 01:19:25]

Annotate with JSDoc please.

[ahmetemirercin, 2017/01/11 19:25:17]

Done.

+      var scrollHeight = result.value;
+      mainTarget.pageAgent().getLayoutMetrics((err, layoutViewport, visualViewport) => {

[dgozman, 2017/01/11 01:19:24]

Actually, we can expose content size through getLayoutMetrics as well.

[dgozman, 2017/01/11 01:19:25]

Let's put this method (which calls into agent) into DeviceModeModel. Then it can
handle all modes (for example, I get exception when capturing full screenshot in
responsive mode).

[ahmetemirercin, 2017/01/11 19:25:18]

Checked that exception about responsive mode and fixed it with 'isMobile' in
DeviceModeModel. Is there still need to move this to DMM?

+        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, 0, this._model._device.mobile(), false, this._model.scale()));

[dgozman, 2017/01/11 01:19:25]

We should use current device scale factor applied (one from _device or set
manually) instead of zero.

[ahmetemirercin, 2017/01/11 19:25:18]

Done.

+        promises.push(mainTarget.emulationAgent().setVisibleSize(pageWidth, 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();
+      mainTarget.emulationAgent().setVisibleSize(Math.floor(visiblePageRect.width), Math.floor(visiblePageRect.height));

[dgozman, 2017/01/11 01:19:25]

We should instead pass (0, 0) and add support on backend for (0, 0) to reset to
default one.

[ahmetemirercin, 2017/01/11 19:25:18]

I think we can reset visible size from DeviceModeModel since we already know the
original emulated page width/height and use (0,0) to change w&h
independently.This will save us from fighting with
pageWidth,visiblePageRect,inset...And seems like more functional than just
reseting.What do you think?

+      SDK.DOMModel.unmuteHighlight();
+      UI.inspectorView.restore();

[dgozman, 2017/01/11 01:19:25]

Don't need this.

[ahmetemirercin, 2017/01/11 19:25:18]

Done.

+      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);

[dgozman, 2017/01/11 01:19:25]

Instead of drawing to canvas, can we just do the following?

var link = createElement('a');
link.href = 'data:image/png;base64,' + content;
link.download = fileName + '.png';
link.click();

[ahmetemirercin, 2017/01/11 19:25:18]

I tried this and because of data url size limits (afaik) it didn't work for huge
snapshots (like mobile news sites) so used blob instead.

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

Oh, I see. That's unfortunate... Thanks for explanation!

+          link.click();
+        });
+      }
+    }
+  }
 };
 
 /**