1849802 - Screenshot node incomplete if the container is in overflow

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[exekutive]

Attachment: Screen Shot 2023-08-22 at 22.24.05.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0

Steps to reproduce:

Screenshot a table from inspector view

Actual results:

Saved screenshot contains only the part of the table that was visible in the browser window

Expected results:

Should have gotten the whole table.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Julian Descottes [:jdescottes]]

Hi,

Do you have a link to a page where we can reproduce the issue? Screenshot node should normally be able to screenshot the whole element. There are technical issues when the node is huge, eg > 10000px, but it does not seem to be the case here.

Thanks!

Comment 3

[exekutive]

it's on a private network, not a public page. But I'll attach the html of the page. You can try taking a screenshot of the large table under X305.

Comment 4

[exekutive]

Attachment: Document ID 1956607.html

Comment 5

[exekutive]

Attachment: X305.png

Comment 6

[Julian Descottes [:jdescottes]]

Thanks for adding a test case, but do you reproduce the bug with this page as well?
I took a Node screenshot of the table, and it seems correct (will upload it afterwards).
I am wondering if some CSS/JS from the real page is causing the issue here, and we can't see it on the HTML example.

To make sure we are doing the same thing, you are opening the inspector, finding the right table element and then right click > Screenshot Node, right?

Comment 7

[Julian Descottes [:jdescottes]]

Attachment: Screen Shot 2023-08-25 at 09.07.20.png

Comment 8

[exekutive]

(In reply to Julian Descottes [:jdescottes] from comment #6)

you are opening the inspector, finding the right table element and then right click > Screenshot Node, right?
yes

I am wondering if some CSS/JS from the real page is causing the issue here, and we can't see it on the HTML example.
well that's interesting... the html works fine. The original does not.

attaching the associated CSS/JS ...

Comment 9

[exekutive]

Attachment: si.css

Comment 10

[exekutive]

Attachment: siDocPrint.css

Comment 11

[exekutive]

Attachment: x.js

Comment 12

[exekutive]

So, does screenshot node not work when theres css/js?

Comment 13

[Julian Descottes [:jdescottes]]

(In reply to exekutive from comment #12)

So, does screenshot node not work when theres css/js?

I need to try the complete example, will do that today. But it's possible that the JS/CSS puts the table in an overflowed container, and in that case screenshot node is unable to capture the whole element.

Comment 14

[Julian Descottes [:jdescottes]]

I still can't reproduce, even when applying the script and CSS. There is a missing script, /si/gsiFunctions.js. Is this something you could share?

Comment 15

[exekutive]

(In reply to Julian Descottes [:jdescottes] from comment #14)

I still can't reproduce, even when applying the script and CSS. There is a missing script, /si/gsiFunctions.js. Is this something you could share?

Yup. Here we are ...

Comment 16

[exekutive]

Attachment: gsiFunctions.js

Comment 17

[Julian Descottes [:jdescottes]]

Ok thanks, that's what we were missing. So it's indeed a scrolled container issue. I'll isolate a simpler testcase.

Comment 18

[Julian Descottes [:jdescottes]]

Attachment: test_case.html

Comment 19

[Julian Descottes [:jdescottes]]

STRs:

• open a tab on https://bug1849802.bmoattachments.org/attachment.cgi?id=9350615
• open devtools > inspector
• find the UL
• screenshot node

Expected result: the whole node should be visible in the screenshot
Actual result: the node is cropped to its container

Now I'm not sure this is actionable. In order to see the whole node, we would need to change the style of the container, which might also change the style of the node itself. I'll keep the bug open for now, but it might not have a straightforward solution.

As a work around, you can toggle print media simulation on your page. You won't have the overflowing container anymore and you'll be able to take your node screenshot.

Comment 20

[exekutive]

when you say "toggle print media simulation on your page" are you talking about Reader View?

Comment 21

[Julian Descottes [:jdescottes]]

Attachment: print_media_simulation.png

No I'm talking about the print media simulation button in the rule view. See screenshot

Comment 22

[exekutive]

Nice. Thank you.