1386047 - CSS Grid Inspector: cross-hash that fills the Grid gap should transform

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Jen Simmons [:jensimmons]]

When using the CSS Grid Inspector, the grid gap is filled with a lighter set of cross-hash dashed lines at a 45deg angle to the grid. This makes it clear where the gap is. Very nice:

https://monosnap.com/file/84zA1Esdvdcg6GL7fea4GlJhgZ1Juc.png

But if the Grid container is transformed, the cross-hash doesn't transform, and that can make things every confusing. For example:

https://monosnap.com/file/gir9StoUG2DtecGju0Zy156Jirh8Rk.png

The example in my screenshots is at http://labs.jensimmons.com/2017/03-004.html

Comment 1

[Erica Wright [:ewright]]

Attachment: Bug 1386047 - Grid and Flexbox inspector cross hash that fills the grid gap and flex container stays 45deg to the bounding lines on rotations.

Review commit: https://reviewboard.mozilla.org/r/229828/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/229828/

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8961075 [details]
Bug 1386047 - Grid and Flexbox inspector cross hash that fills the grid gap and flex container stays 45deg to the bounding lines on rotations.

https://reviewboard.mozilla.org/r/229828/#review235622

::: devtools/server/actors/highlighters/css-grid.js:1072
(Diff revision 1)
>          this.currentMatrix);
>      }
>  
> +    // Find current angle of grid by measuring two arbitrary points,
> +    // then rotate canvas, so the hash pattern stays 45deg to the gridlines.
> +    let p1 = apply(this.currentMatrix, [0, 0]);

Can you also do this for the flexbox highlighter and adjust the commit message as appropriate.

Comment 3

[Erica Wright [:ewright]]

Comment on attachment 8961075 [details]
Bug 1386047 - Grid and Flexbox inspector cross hash that fills the grid gap and flex container stays 45deg to the bounding lines on rotations.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/229828/diff/1-2/

Comment 4

[Erica Wright [:ewright]]

>> Can you also do this for the flexbox highlighter and adjust the commit message as appropriate.

Yes, flexbox has other issues on rotate, so it still isn't great, but at least the hash lines are correct now!

Comment 5

[Patrick Brosset <:pbro>]

Comment on attachment 8961075 [details]
Bug 1386047 - Grid and Flexbox inspector cross hash that fills the grid gap and flex container stays 45deg to the bounding lines on rotations.

https://reviewboard.mozilla.org/r/229828/#review235738

Wow, this is great. Thank you so much Erica for fixing this!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37e07672384d
Grid and Flexbox inspector cross hash that fills the grid gap and flex container stays 45deg to the bounding lines on rotations. r=pbro

Comment 7

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/37e07672384d