New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 638281 link

Starred by 13 users

Issue metadata

Status: Fixed
Owner:
Closed: Mar 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocked on:
issue 625577


Show other hotlists

Hotlists containing this issue:
Hotlist-1


Sign in to add a comment

DevTools: Allow for full-height screenshots

Project Member Reported by paulir...@chromium.org, Aug 16 2016

Issue description

This has been one of our top feature reqeusts for a long time.

Headless folks are implementing things in  issue 625577 
Design doc: https://docs.google.com/document/d/1VTcYz4q_x0f1O5IVrvRX4u1DVd_K34IVUl1VULLTCWw/edit#heading=h.ndv831lc9uf0

Can we reuse eseckler's work for devtools users?
 
Technically, it should be possible to realize it the same way in non-headless builds. (Our prototype seems to work on normal desktop builds, too.) Off the top of my head, there are two issues we'd need to think about:

1) In our prototype, we don't support resizing the RWHV via DevTools on Android. (This is necessary for ensuring the frame sent by the renderer is of the screenshot's size.) It seems that the RWHV size can't easily be set from C++ on Android and is instead controlled from Java.

2) Taking a screenshot changes what the user sees in the browser while screenshotting. That is, the CompositorFrame that contains the screenshot is also shown in the RWHV, since that's where we take the screenshot from. That said, after the screenshot is completed, this is restored to the prior state. Would this be acceptable, or do we need to "hide" the screenshotting frame?
Is there any plan or ongoing work about this issue? If not, I can work on this and  prepared something by using eseckler's work. Please take a look at the attached video.
(I searched the codebase and didn't come across with the full-height screenshots. I'm sorry if it is already implemented)
full_screen_capture.ogv
4.1 MB View Download
Cc: ahmetemiremir@gmail.com
Video looks great! It would be awesome if you contribute this feature, nobody is working on it.
@agmet, this looks great. Go for it!
Status: Started (was: Assigned)
CL from ahmet: https://codereview.chromium.org/2612913002
Project Member

Comment 6 by bugdroid1@chromium.org, Feb 23 2017

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

commit 0936d31d01cc3ff8e9f46e47f807dbe05dffc59b
Author: dgozman <dgozman@chromium.org>
Date: Thu Feb 23 04:00:28 2017

[DevTools] Full-size screenshots in device mode.

Based on the patch https://codereview.chromium.org/2612913002/
from Ahmet Emir Ercin (ahmetemiremir@gmail.com).

BUG= 638281 

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

[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/core/inspector/InspectorPageAgent.cpp
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/core/inspector/InspectorPageAgent.h
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/core/inspector/browser_protocol.json
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeWrapper.js
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/devtools/front_end/emulation/module.json
[modify] https://crrev.com/0936d31d01cc3ff8e9f46e47f807dbe05dffc59b/third_party/WebKit/Source/devtools/front_end/sdk/ScreenCaptureModel.js

Status: Fixed (was: Started)
Status: Assigned (was: Fixed)
Project Member

Comment 9 by bugdroid1@chromium.org, Feb 27 2017

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

commit 329d64d814fc7af1b3e3673acb461599f514c5cf
Author: dgozman <dgozman@chromium.org>
Date: Mon Feb 27 19:44:08 2017

[DevTools] Remove full screenshot from UI.

It's not ready on all platforms yet.

BUG= 638281 
TBR=pfeldman

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

[modify] https://crrev.com/329d64d814fc7af1b3e3673acb461599f514c5cf/third_party/WebKit/Source/devtools/front_end/emulation/module.json

FYI, setVisibleSize, which is what this depends on, doesn't work on Android at the moment. (RWHVAndroid doesn't allow resizing, only ContentViewCore can do that from Java AFAIK.)
Yeah, but we only target desktop platforms here (it's a mobile emulation on desktop after all).
Status: Fixed (was: Assigned)
@dgozman is there any example usage of this somewhere?
Nice, thanks @kayce! Do you know if this is available in headless Chromium and if there is any example usage for that?
#16: If you connect the frontend to a headless chrome instance, this should work, yes.

If you're using a custom DevTools client, you can simply do what DeviceModeModel does [1]:
 1) Fix the window width/height that is visible to the page using Emulation.setDeviceMetricsOverride, so that the size change below doesn't affect page layout.
 2) Determine the content size using Page.getLayoutMetrics.
 3) Issue Emulation.setVisibleSize to resize to content size.
 4) Grab a screenshot using Page.captureScreenshot. 

[1] https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js?l=631
Yes this was actually originally implemented for headless.. :)

Usually I like to use this technique of sniffing the protocol to see how DevTools does this: https://developer.chrome.com/devtools/docs/debugger-protocol#sniffing-the protocol

.. but in this case, it doesn't work so hot because the "hosted mode" of devtools doesn't easily provide access to the device toolbar.


So AFAICT, the best way to solve this is looking at the DevTools impl for hints about the protocol methods to use:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js?type=cs&sq=package:chromium&q=f:DeviceModeModel.js+captureScreenshot&l=630

Basically it looks like this sequence of method calls:

Emulation.setVisibleSize
Emulation.forceViewport
Emulation.setDeviceMetricsOverride
Page.captureScreenshot
---
Emulation.setVisibleSize
Emulation.resetViewport

But you'll want to follow what parameters are passed to them all. I know that headless does require the `fromSurface` set to true.

Comment 19 by kayce@google.com, Apr 3 2017

Labels: DevTools-Release-Notes-Feature
Thanks, got this to work. There seems to be a height limit (and, less importantly, width limit) of 16384 pixels in the image returned by Page.captureScreenshot -- which causes relatively average-sized pages to get cut off, especially when rendering small responsive widths since the pages get long quickly. Before I go hunting to implement a one-off stitching mechanism, does anyone know if this limit is easily changed and where, or if it's baked in in a harder way?
Copy/paste from headless-dev:

The 16384px limit stems from the maximum texture size used by the compositor. For GL rendering, this is actually read from the GL context, so a limitation of the GL backend (GPU, software GL, etc.) that can't be changed. For the software GL backend we use with headless, this limit is 16384px.

If you're using pure software rendering (without GL support), chromium currently sets the max texture size to 16384px, too. You could change that constant in the implementation to something larger, and run with --disable-gpu to force software rending (I tried this, it does seem to work). But note that software rendering doesn't support WebGL content (and probably also any CSS that requires GL to render correctly).

As you mentioned, you could alternatively grab multiple screenshots at different viewport offsets (using Emulation.forceViewport) and stitch them together yourself.
Here's a link to the software-mode limit: https://cs.chromium.org/chromium/src/cc/resources/resource_provider.cc?l=387
Project Member

Comment 23 by bugdroid1@chromium.org, Apr 13 2017

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

commit a95ba76f368fba30b23363b7692cae2da92cb062
Author: dgozman <dgozman@chromium.org>
Date: Thu Apr 13 01:53:18 2017

[DevTools] Account for host device pixel ratio in Device Mode screenshots

BUG= 638281 

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

[modify] https://crrev.com/a95ba76f368fba30b23363b7692cae2da92cb062/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

Comment 24 by pdk...@gmail.com, Apr 18 2017

​Where can I toggle device mode screenshots? (I assume this means you can
take a screenshot from a connected device.) I don't have it in M57 it seems.
This is not a remote debugging feature (where you connect to a device), but rather a device mode feature (where you emulate a mobile device).

Comment 26 by rhour...@gmail.com, Jul 12 2017

Is it possible to provide the captureFullSizeScreenshot as a command that could be used in an extension using the debugger API? 
I don't mind the limitation of the debugger API, I just want to be able to get a full screenshot without playing around with the Emulation API as I'm already modifying that for a different purpose. 

Sign in to add a comment