Design doc for this lives at bit.ly/viewport-screenshots .

Design doc for the revised approach: https://docs.google.com/document/d/1VTcYz4q_x0f1O5IVrvRX4u1DVd_K34IVUl1VULLTCWw/edit#

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7

commit 10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7
Author: eseckler <eseckler@chromium.org>
Date: Tue Aug 23 13:37:08 2016

Adds commands to get and set the frame size of a DevTools target.

This is a first step towards more flexible screenshots
(bit.ly/sized-screenshots): The size of the CompositorFrame sent from the
renderer and the screenshot size are determined by the size of the RWHV.
Combined with renderer-side Emulation overrides, this will allow us to obtain
screenshots of a configurable size.

We are planning on adding an additional Emulation override command that
allows us to scale and position the page content, which will enable
screenshots of a custom area of the page. Work-in-progress patch:
https://codereview.chromium.org/2237433004/

BUG= 625577 

Review-Url: https://codereview.chromium.org/2226323002
Cr-Commit-Position: refs/heads/master@{#413721}

[modify] https://crrev.com/10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7/content/browser/devtools/protocol/devtools_protocol_browsertest.cc
[modify] https://crrev.com/10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7/content/browser/devtools/protocol/emulation_handler.cc
[modify] https://crrev.com/10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7/content/browser/devtools/protocol/emulation_handler.h
[modify] https://crrev.com/10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7/headless/lib/headless_devtools_client_browsertest.cc
[modify] https://crrev.com/10bf0b24f8656aa2046ad92ecda2d6fc78e8f7f7/third_party/WebKit/Source/core/inspector/browser_protocol.json

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50

commit 23d8f263fccca2ef163a9c3f1592d3a51e3a2d50
Author: eseckler <eseckler@chromium.org>
Date: Thu Sep 22 12:50:53 2016

Adds DevTools commands for forced viewport override to the Emulation domain.
They are handled by the renderer's DevToolsEmulator.

This is a second step towards more flexible screenshots
(bit.ly/sized-screenshots): With this override, we can position a specific
(scaled) area of the page into the top-left corner of the frame. We can then
take a screenshot after resizing the frame (RWHV) in the browser to the scaled
area size. We are adding DevTools commands for the latter in a separate patch:
https://codereview.chromium.org/2226323002/

We enforce the override through the root layer transform of WebViewImpl.
As the given area coordinates are relative to the page origin and a page
scale of 1.0, we take the current scroll offset and page scale into account
and update the root transform when they change.

To ensure that all content in the area is recorded and shown, we override
the visible content area used in CompositedLayerMapping and disable clipping
to the visual viewport while the override is active.

BUG= 625577 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2237433004
Cr-Commit-Position: refs/heads/master@{#420314}

[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/content/browser/devtools/protocol/emulation_handler.cc
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/content/renderer/devtools/render_widget_screen_metrics_emulator.cc
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/content/renderer/gpu/render_widget_compositor.cc
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/content/renderer/gpu/render_widget_compositor.h
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-far-expected.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-far-layered-expected.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-far-layered.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-far.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-near-expected.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-near.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-reset-expected.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-reset.html
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-unobserved-expected.txt
[add] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/LayoutTests/inspector-protocol/emulation/forced-viewport-unobserved.html
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/frame/FrameView.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/frame/FrameView.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/frame/VisualViewport.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/inspector/browser_protocol.json
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/page/ChromeClient.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/platform/graphics/GraphicsLayer.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/platform/testing/WebLayerTreeViewImplForTesting.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/platform/testing/WebLayerTreeViewImplForTesting.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/ChromeClientImpl.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/ChromeClientImpl.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/DevToolsEmulator.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/DevToolsEmulator.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/InspectorEmulationAgent.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/InspectorEmulationAgent.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/WebViewImpl.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/WebViewImpl.h
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/tests/WebInputEventConversionTest.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/Source/web/tests/WebViewTest.cpp
[modify] https://crrev.com/23d8f263fccca2ef163a9c3f1592d3a51e3a2d50/third_party/WebKit/public/platform/WebLayerTreeView.h

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/503266cd434ea508d17e6698c15da481b42ab095

commit 503266cd434ea508d17e6698c15da481b42ab095
Author: eseckler <eseckler@chromium.org>
Date: Thu Sep 22 13:14:52 2016

Adds a test for screenshot area capturing.

Based on https://codereview.chromium.org/2237433004/, which adds the required forceViewport DevTools command.

Also refactors the original screenshot test and re-enables it for Android.

BUG= 625577 

Review-Url: https://codereview.chromium.org/2254923002
Cr-Commit-Position: refs/heads/master@{#420317}

[modify] https://crrev.com/503266cd434ea508d17e6698c15da481b42ab095/content/browser/devtools/protocol/devtools_protocol_browsertest.cc

It is now possible to capture screenshots of custom areas on the page (e.g. the whole page) independently of the frame/viewport dimensions by combining Emulation.setDeviceMetricsOverride, Emulation.forceViewport, Emulation.setVisibleSize, and Page.captureScreenshot. For an example, see the test from https://codereview.chromium.org/2237433004/.

Thanks much for the work on this! Is there a way with the remote debugging API to render with a given fixed width, but allow Chrome to dynamically set the height of the frame? Basically, a "full page screenshot" without needing to figure out the height manually?

#8: I don't think you'll get around having to figure out the height. For example, you can use DevTools' Runtime.evaluate command to obtain the value of document.scrollingElement.scrollHeight and use that for the screenshot.

Alternatively, you could expand the frame size to document.scrollingElement.scrollHeight before taking the screenshot - that would make sure that any fixed-pos elements (think, "this site uses cookies") aren't in the middle of the screenshot. Changing the frame size triggers layout, though, so the document height may change as a result of that.