Closed Bug 1441465 Opened 7 years ago Closed 6 years ago

The grid highlighter causes the page to overflow

Categories

(DevTools :: Inspector, defect, P2)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(firefox62 verified)

Status:
VERIFIED FIXED
Milestone:
Firefox 62
Tracking Flags:
Tracking Status
firefox62 --- verified

People

(Reporter: pbro, Assigned: pbro)

References

(Blocks 1 open bug)

Details

(Whiteboard: [good first verify] [testday20180803] )

Attachments

(3 files)

scrollbars.gif
753.54 KB, image/gif
Details
frame dump after triggering this bug (with scrollable area incorrectly ~2x as wide as it should be)
4.54 KB, text/plain
Details
Bug 1441465 - Measure window dimensions on grid/flex highlighter updates when the canvas is hidden;
59 bytes, text/x-review-board-request
gl
: review+
Details
STR: - go to http://labs.jensimmons.com/2017/03-009.html - make sure the window is narrow enough so that only 2 cards are displayed on one row - open the inspector and the layout sidebar tab - click on the checkbox to overlay the grid on main.deals in the Grid section of the tab ==> A horizontal scrollbar appears Even if you uncheck the box, the scrollbar remains (it only goes away if you close devtools, or reload the page).
Attached image scrollbars.gif —
I'll see if I can help here...
Flags: needinfo?(dholbert)
Here's a dump of the frame tree when this happens. Here's the outer <html> element, showing that it wants to be 22980 app units wide (383px), but it's got scrollable overflow that is 46500 app units (775px) wide: Canvas(html)(-1)@7f69185d70b0 parent=7f69185d7158 {0,0,22980,51600} vis-overflow=0,0,46500,126720 scr-overflow=0,0,46500,126720 [state=0002006800000230] [content=7f69185e5550] [sc=7f6918542608:-moz-scrolled-canvas]< If you scroll down to the bottom (or find-in-page for 46500), you can see that this huge width comes from some abspos SVG content -- part of the overlay. We're neglecting to shrink that SVG content when the viewport shrinks, it seems.
(I think this is a version of a similar bug that we had a few years back with "modal find-in-page", where the darkened overlay would sometimes be a bit bigger than the viewport.)
Patrick says the flexbox highlighter can trigger this, too.
Priority: -- → P2
A similar overflow issue is observed in bug 1444028, but that one is with the regular box model highlighter.
See Also: → 1444028
This may also be the source of the problem in Bug 1342929. It may even be a duplicate bug.
See Also: → 1342929
The fix for this might definitely be the same as the one for bug 1444028. I've tracked it down to this function: https://searchfox.org/mozilla-central/rev/003262ae12ce937950ffb8d3b0fa520d1cc38bff/devtools/server/actors/highlighters/utils/markup.js#586 This is used by both the grid highlighter and the box-model highlighter. The way the infobar is moved creates the overflow.
I have stumbled upon a fix for this bug, and it's not what I thought in comment 8. For now I'm thinking of integrating this fix in another related bug I'm working on. So please hold off working on this one for a little while, until I figure things out. At which stage, I'll likely close this one as a duplicate.
Actually, scratch that. The fix for this is so small that I'd better get it in as soon as possible.
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Flags: needinfo?(dholbert)
Comment on attachment 8979503 [details] Bug 1441465 - Measure window dimensions on grid/flex highlighter updates when the canvas is hidden; https://reviewboard.mozilla.org/r/245678/#review252030
Attachment #8979503 - Flags: review?(gl) → review+
Pushed by pbrosset@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/a32898161ec4 Measure window dimensions on grid/flex highlighter updates when the canvas is hidden; r=gl
https://hg.mozilla.org/mozilla-central/rev/a32898161ec4
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
status-firefox62: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 62
Product: Firefox → DevTools
Whiteboard: [good first verify]
I have reproduced this bug with Nightly 61.0a1 (2018-05-01) on Windows 10, 64 Bit! This bug's fix is verified with latest Beta! Build ID 20180802174131 User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0
Whiteboard: [good first verify] → [good first verify] [testday20180803]
Marking as verified per comment 17. Thanks!
Status: RESOLVED → VERIFIED
status-firefox62: fixed → verified
Blocks: overflow-debugging
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: