Closed Bug 1505578 Opened 3 years ago Closed 3 years ago

Flexbox highlighter is offset when container contains padding

Categories

(DevTools :: Inspector, defect, P2)

defect

Tracking

(firefox65+ verified)

VERIFIED FIXED
Firefox 65
Tracking Status
firefox65 + verified

People

(Reporter: miker, Assigned: miker)

References

Details

Attachments

(2 files)

Attached image iframe issue.png
Since bug 1501226 landed the Flexbox Highlighter is offset inside iframes.

See attached image.
Turns out that padding inside the container also causes issues but is related to the same calculation.
This issue is nothing to do with iframes.

When a flexbox container contains padding then everything is offset because we set our canvas origin to the content box of the container.

I agree that we should only draw in the content area we need to make our discovery of a node's coordinates much smarter to avoid situations like this.
Summary: Flexbox highlighter is offset inside iframes → Flexbox highlighter is offset when container contains padding
I found a few situations where everything is offset so I am currently testing with a bunch of different combination of margin, padding, etc.
Tracked for 65. This issue was flagged by SV as a reason for yellow sign off on "DevTools Flexbox inspector" feature.
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/01b3cf972555
Flexbox highlighter is offset when container contains padding r=gl
https://hg.mozilla.org/mozilla-central/rev/01b3cf972555
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65

I reproduced this issue using Fx 65.0a1 (2018-11-07) on Windows 10 x64.
I can confirm this issue is fixed, I verified using Fx 65.0b11, on Windows 10 x64, macOS 10.13.6 and Ubuntu 16.04 LTS.
Cheers!

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.