Closed Bug 1501226 Opened Last year Closed 11 months ago

Support for CSS transforms in the Flexbox highlighter


(DevTools :: Inspector, defect, P2)



(firefox65 verified)

Firefox 65
Tracking Status
firefox65 --- verified


(Reporter: pbro, Assigned: miker)




(2 files)

- 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.
To fix this, we should look at how the css grid highlighter does it.
Added simple CSS transform to test file.
Assignee: nobody → mratcliffe
Depends on: 1437631
OS: Unspecified → All
Priority: -- → P2
Hardware: Unspecified → All
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).
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.
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.
(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.
Pushed by
Support for CSS transforms in the Flexbox highlighter r=gl
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+

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.

Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.