1463129 - Make the screenshot button auto expand page with internal scrollbars so the full page is actually getting captured

Status: NEW

(DevTools :: Framework, enhancement, P2)

Description

[Soledad Penades [:sole] [:spenades]]

Developers expect the button to take a screenshot of the entire page. If there's overflow and scrollbars are present, they expect to see a big long image.

But the "Take a screenshot of the entire page" button doesn't actually work as expected 
1) it is actually a screenshot of the current viewport, not the full page
2) the viewport is smaller than it should when DevTools are open and not docked

The correct and expected behaviour is the behaviour the GCLI screenshot --fullpage had.

Comment 1

[Julian Descottes [:jdescottes]]

I don't think GCLI did what is described in the summary. I just tried a version of Firefox that still has GCLI, and `screenshot --fullpage` has the same behavior as the button.

Eg on a bugzilla page, the scrollbar is on a a subelement, so --fullpage doesn't give any interesting output.

That being said, I would love to have a fullpage screenshot tool that is smart enough to simulate a huge viewport and get a real full page screenshot. Maybe something that increases the height of the viewport until scrollbars are either all gone or no longer changing ?

Comment 2

[Julian Descottes [:jdescottes]]

And just for reference, you can try the screenshot button with a page that is scrolled: https://hg.mozilla.org/integration/mozilla-inbound/rev/93516631d63527d285b518f7d5e3b8aa800b627a

This will give you a proper full page screenshot (same as gcli --fullpage or :screenshot --fullpage)

Comment 3

[Patrick Brosset <:pbro>]

Just to clarify a bit: the screenshot button does take full page captures. It just doesn't do anything special on pages that have internal scrollbars such as bugzilla.
As Julian said in comment 1, it would be great if it was smart enough to simulate a huge page size so internal scrollbars did not need to hide anything.

Comment 4

[Edouard Oger [:eoger]]

Alternatively if expanding everything proves too hard or full of edge cases, it would be nice if the "element picker" screenshot feature could capture the whole element even what's outside of the viewport.
For example on https://jira.mozilla.com/browse/SYNC-561 the "Issues in Epic" block is impossible to capture in its entirety in Firefox since my screen can't fit the whole height of it.

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

A really quick fix would be to scroll to the bottom of the page before taking the screenshot... that way you will get a screenshot of the full node.