1397185 - Area information is displayed way higher than the box is placed when tilting the grid at different angles

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Bogdan Maris, Desktop QA]

Attachment: Screenshot showing the issue

[Affected versions]:
- Latest Nightly 57.0a1
- Beta 56.0b9

[Affected platforms]:
- Ubuntu 16.04 64bit
- Windows 10 64bit
- macOS 10.12.6

[Steps to reproduce]:
1. Go to https://stripe.com/connect
2. Open Inspector Grid (Ctrl+Shift+C or Cmd+Alt+C)
3. From Inspector - Layout select the third Overlay Grid ('div.stripes')
4. Scroll down the page in Layout and select a box from the middle of grid outline

[Expected result]:
- Area information is displayed near the selected box.

[Actual result]:
- Area information is displayed way higher than the box is placed.

[Regression range]:
- This is not a regression because it's reproducing even on Nighlty from 2017-06-20 when grid outline was first available in Layout.

[Additional notes]:
- Not sure if there is a bug logged for this already, I checked a little bit but could not find one.
- Altering the angle (I changed to -32deg) of the grid will keep the area info way higher and out of sight. It will actually be on the same line as the higher corner of the box.

Comment 1

[Patrick Brosset <:pbro>]

Thanks for filing.

(In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> - Altering the angle (I changed to -32deg) of the grid will keep the area
> info way higher and out of sight. It will actually be on the same line as
> the higher corner of the box.
Yeah, I think this was expected. Handling CSS transforms in the CSS Grid highlighter has been a complex piece of work and we've done it for the lines/cells/areas themselves but not for the "info bar".

I would not consider this a blocker, but rather a minor bug.

Matteo, perhaps you can explain the technical solution that one would have to implement to fix this.

Comment 2

[Patrick Brosset <:pbro>]

Just to confirm: "Area information" is what we usually call the "info bar" in DevTools.

Comment 3

[Bogdan Maris, Desktop QA]

I was referring to the bubble where the box coordinates are written.

Comment 4

[Matteo Ferretti [:zer0] [:matteo]]

(In reply to Patrick Brosset <:pbro> from comment #1)
> Thanks for filing.
> 
> (In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> > - Altering the angle (I changed to -32deg) of the grid will keep the area
> > info way higher and out of sight. It will actually be on the same line as
> > the higher corner of the box.
> Yeah, I think this was expected. Handling CSS transforms in the CSS Grid
> highlighter has been a complex piece of work and we've done it for the
> lines/cells/areas themselves but not for the "info bar".
> 
> I would not consider this a blocker, but rather a minor bug.
> 
> Matteo, perhaps you can explain the technical solution that one would have
> to implement to fix this.

This is actually not a bug, it works as intended: the infobar is positioned considering the box of the element. And the box's top, where the infobar is positioned, is where the topmost quad's point is (in the screenshot, the top right corner, where "3" is displayed).
Notice that this is not a behavior of the grid per se, it's a behavior of the infobar. Open this URL on a tab, and inspect the DIV:

data:text/html,<div style="background:red; position: absolute; top: 100px; left:100px; width: 200px; height: 150px;transform:skewY(-32deg)"></div>

This is also consistent with other browsers like Chrome; so personally I would set this bug as wontfix.