1501226 - Support for CSS transforms in the Flexbox highlighter

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Patrick Brosset <:pbro>]

Attachment: Screen Shot 2018-10-23 at 11.51.26.png

STR:
- open the following test case url:
data:text/html,<div style="display:flex;width:500px;border:1px solid;transform:rotate(-5deg)"><span style="flex-grow:1;flex-basis:100px;max-width:50px;">item 1</span></div>
- open the inspector
- click on the [flex] badge next to the <div> element

I'm attaching a screenshot to show the problem.

Basically, we only half support CSS transform it seems.
The white areas in the screenshots are areas we clear in the canvas to draw lines and items, and those don't seem to honour the element's transformed matrix at all.
Also the diagonal lines in the background should transform like the element.
Finally, the container does transform a bit but seems to grow taller than the element.

Comment 1

[Patrick Brosset <:pbro>]

To fix this, we should look at how the css grid highlighter does it.

Comment 2

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

Added simple CSS transform to test file.

Comment 3

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

The problem is that we use the bounds in all of our calculations but by definition this is useless when it comes to transforms... we need to use the real points (p1, p2, p3 and p4).

Comment 4

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

Attachment: Bug 1501226 - Support for CSS transforms in the Flexbox highlighter r?gl!

Comment 5

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

There are some issues with offsets and text nodes here... we need to find a reliable was to reliably get a nodes coordinates as they were **before** any transforms were applied.

Comment 6

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

Things we have tried so far:

1. Drawing transformed point to transformed point without using any transformation matrices... resulting code is very complex and for text nodes we have no API for getting the transformed points (only the bounds). Also, crossStart, crossSize etc. are all untransformed values.

2. Using offsetLeft etc. to get the untransformed positions of each node and then applying a transformation matrix... works well but historically prone to bugs.

At the moment I am favouring number 2 because there are no showstoppers, but I am going to take a look at the box model highlighter and see how it handles text nodes.

Comment 7

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

(In reply to Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe] from comment #6)
> I am going to take a look at the box model highlighter and see how it
> handles text nodes.

The box model highlighter uses method 1, which is ruled out because crossStart, crossEnd etc. are untransformed values.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fe2f73a6db0e
Support for CSS transforms in the Flexbox highlighter r=gl

Comment 9

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/fe2f73a6db0e

Comment 10

[Daniel Cicas [:dcicas], Release QA]

I reproduced this issue using Fx 65.0a1, build ID: 20181023222913, on Windows 10 x64 and Ubuntu 18.04 x64.

I can confirm this issue is fixed, I verified using Fx 65.0b9, build ID: 20190107180200, on Windows 10 x64 and Ubuntu 18.04 LTS.