DevTools: Allow for full-height screenshots |
||||||
Issue descriptionThis 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?
,
Dec 27 2016
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)
,
Dec 29 2016
Video looks great! It would be awesome if you contribute this feature, nobody is working on it.
,
Dec 29 2016
@agmet, this looks great. Go for it!
,
Jan 11 2017
,
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
,
Feb 23 2017
,
Feb 24 2017
,
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
,
Mar 30 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/0d7958ef3d03590b0063fe6d284763132e718b3f commit 0d7958ef3d03590b0063fe6d284763132e718b3f Author: dgozman <dgozman@chromium.org> Date: Thu Mar 30 00:11:23 2017 [DevTools] Enable full-size screenshots With new fromSurface parameter, this should work on all OSes. BUG= 638281 Review-Url: https://codereview.chromium.org/2773173002 Cr-Commit-Position: refs/heads/master@{#460589} [modify] https://crrev.com/0d7958ef3d03590b0063fe6d284763132e718b3f/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js [modify] https://crrev.com/0d7958ef3d03590b0063fe6d284763132e718b3f/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js [modify] https://crrev.com/0d7958ef3d03590b0063fe6d284763132e718b3f/third_party/WebKit/Source/devtools/front_end/emulation/module.json [add] https://crrev.com/0d7958ef3d03590b0063fe6d284763132e718b3f/third_party/WebKit/Source/devtools/front_end/help/features.txt [modify] https://crrev.com/0d7958ef3d03590b0063fe6d284763132e718b3f/third_party/WebKit/Source/devtools/front_end/sdk/ScreenCaptureModel.js [modify] https://crrev.com/0d7958ef3d03590b0063fe6d284763132e718b3f/third_party/WebKit/Source/devtools/front_end/ui/Geometry.js
,
Mar 30 2017
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.)
,
Mar 30 2017
Yeah, but we only target desktop platforms here (it's a mobile emulation on desktop after all).
,
Mar 30 2017
,
Mar 30 2017
@dgozman is there any example usage of this somewhere?
,
Mar 30 2017
Hey mike.fotinakis@gmail.com, check out the video in this tweet https://twitter.com/kaycebasques/status/847567726646132736
,
Mar 31 2017
Nice, thanks @kayce! Do you know if this is available in headless Chromium and if there is any example usage for that?
,
Mar 31 2017
#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
,
Mar 31 2017
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.
,
Apr 3 2017
,
Apr 9 2017
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?
,
Apr 10 2017
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.
,
Apr 10 2017
Here's a link to the software-mode limit: https://cs.chromium.org/chromium/src/cc/resources/resource_provider.cc?l=387
,
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
,
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.
,
Apr 18 2017
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).
,
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 |
||||||
Comment 1 by eseckler@chromium.org
, Aug 17 2016