Closed Bug 1478481 Opened 3 years ago Closed 3 years ago

Flexbox highlighter overlay is wrong size, in page with full-page-zoom applied


(DevTools :: Inspector, defect, P3)



(firefox64 verified)

Firefox 64
Tracking Status
firefox64 --- verified


(Reporter: dholbert, Assigned: miker)


(Blocks 1 open bug)


(Whiteboard: [dt-q])


(2 files)

0. enable about:config prefs:

 1. View some page with a flex container, e.g.:
data:text/html,<div style="display:flex;width:100px;height:100px; border: 1px solid black"><span>InspectMe

 2. Zoom in with Ctrl+ as much as possible (or as much as you like)

 3. Right-click the flex container and choose "Inspect", and click the flex badge in the inspector to activate the overlay.

ACTUAL RESULTS: The overlay boxes are much bigger than the boxes that they correspond to.  It looks like the zoom factor has been applied twice to the overlay, or something like that.

EXPECTED RESULTS: Overlay should accurately highlight the area of the flex container & its flex item.

It looks like we get this correct for the grid overlay (e.g. if I change the data URL above to use "grid" instead of "flex" and activate that overlay). So whatever's broken here must be in some sizing piece that is different between the two.

I'm using Nightly 63.0a1 (2018-07-25) (64-bit)
Component: Computed Styles Inspector → Inspector
Priority: -- → P3
Assignee: nobody → mratcliffe
I keep getting pulled away from this to fix telemetry issues.

My original thought was simply to multiply by a zoom factor throughout the flexbox code but after doing that and then trying to tweek the rest it became clear that this is the wrong approach.

I am now going through the flexbox.js methods changing one line at a time, which has the advantage that I become much more familiar with the code.

I need to fix bug 1488835 then I will get back to this.
Whiteboard: dt-q
Whiteboard: dt-q → [dt-q]
Can you describe the scrolling issue and why your fix will resolve it? I mostly want to make sure we can somehow document the issue and the fix. It might even be better if we simply spin up a new bug for the scroll issue since this patch really solves like 3 different things. I would also like to see the justify-content fix either in a separate patch or bug including a description of the problem, STR, etc since it's kinda magical right now.

Ideally, I would like to see this patch split into 3 different patches or bugs - one for addressing each issue.
Attachment #9013997 - Flags: review?(gl)
Attachment #9013997 - Flags: review?(gl)
Pushed by
Flexbox highlighter overlay is wrong size, in page with full-page-zoom applied r=gl
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
Confirmed issue with 63.0a1 (2018-07-25) on Windows 10.
Verified with 64.0b9 on Win10, macOS10.13, Ubuntu16.04
You need to log in before you can comment on or make changes to this bug.