1359794 - The Grid Cell highlighting should take transformation into account

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

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

If an element with `display: grid` is highlighted by Grid Inspector and has CSS transformations applied, when hovering in the layout panel's grid outline the cell does not take the transformation into account.

Comment 1

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

Attachment: Bug 1359794 - grid cell highlighting now are properly transformed, infobars are better positioned;

The Grid Cell highlighting should take transformation into account

Added utility functions for a better handling of points and boundaries;
especially when a transformation is applied.

The SVG path description's points are now properly transformed.

Grid's infobars are now positioned in the same way of box model infobar, since
we pass a more accurate `bounds` object.

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

Comment 2

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

Comment on attachment 8874469 [details]
Bug 1359794 - grid cell highlighting now are properly transformed, infobars are better positioned;

https://reviewboard.mozilla.org/r/145842/#review149830

::: devtools/server/actors/highlighters/css-grid.js:116
(Diff revision 1)
> + * @param {Array} [matrix=identity()]
> + *        A transformation matrix to apply.
> + * @return {Array}
> + *        The rect four corners' points transformed by the matrix given.
> + */
> +function diagonalToPoints(x1, y1, x2, y2, matrix = identity()) {

s/diagonalToPoints/getPointsfromDiagonal

::: devtools/server/actors/highlighters/css-grid.js:138
(Diff revision 1)
> + * @param {Array} points
> + *        The four points.
> + * @return {Object}
> + *         A DOMRect-like object.
> + */
> +function pointsToBounds(points) {

s/pointsToBoundss/getBoundsFromPoints

::: devtools/server/actors/highlighters/css-grid.js:162
(Diff revision 1)
> + * @param {Array} points
> + *        The four points.
> + * @return {String}
> + *         A Path Description that can be used in svg's <path> element.
> + */
> +function pointsToPathDescription(points) {

s/pointsToPathDescription/getPathDescriptionFromPoints

Comment 3

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

Comment on attachment 8874469 [details]
Bug 1359794 - grid cell highlighting now are properly transformed, infobars are better positioned;

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

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dc53ed710486
grid cell highlighting now are properly transformed, infobars are better positioned; r=gl

Comment 5

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

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