1505578 - Flexbox highlighter is offset when container contains padding

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P2)

Description

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

Attachment: iframe issue.png

Since bug 1501226 landed the Flexbox Highlighter is offset inside iframes.

See attached image.

Comment 1

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

Turns out that padding inside the container also causes issues but is related to the same calculation.

Comment 2

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

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.

Comment 3

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

Attachment: Bug 1505578 - Flexbox highlighter is offset when container contains padding

Comment 4

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

I found a few situations where everything is offset so I am currently testing with a bunch of different combination of margin, padding, etc.

Comment 5

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Tracked for 65. This issue was flagged by SV as a reason for yellow sign off on "DevTools Flexbox inspector" feature.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/01b3cf972555
Flexbox highlighter is offset when container contains padding r=gl

Comment 7

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/01b3cf972555

Comment 8

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

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!