1508613 - Transform the flex item sizing outline to match the main/cross direction of the item on the page

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

Right now the flex item sizing outline (aka the minimap) is either displayed in row direction or column direction.

We choose the row direction when flex-direction = row or row-reverse
We choose the column direction when flex-direction = column or column-reverse

This does not account for various writing-mode or direction settings on the page.

Instead, we should always use the mainAxisDirection and crossAxisDirection data that we already have access to in the flex inspector (see https://searchfox.org/mozilla-central/rev/b03a62c3c82316e733a3b09622c1cb7e59f64cc3/devtools/server/actors/layout.js#108-109).
These values are already sent to the client-side, and could simply be used in the FlexItemSizingOutline.js component to draw the diagram correctly.

For now (actually in bug 1508581) we're going to force direction:ltr on the outline. But when we start looking at this bug, we should find a way to orient the outline correctly. I suggest keeping direction:ltr and using CSS transform for this. This way, 90% of the CSS for the outline stays the same, and we only need to rotate it (and adapt the labels so they are still readable).
This is what we already do for switching between row and column directions today (see https://searchfox.org/mozilla-central/rev/b03a62c3c82316e733a3b09622c1cb7e59f64cc3/devtools/client/themes/layout.css#257-262)

Comment 1

[Micah [:mtigley] (she/her)]

Attachment: Bug 1508613 - Transform the flex item sizing outline to match the main/cross direction of the item on the page. r=pbro

Comment 2

[Micah [:mtigley] (she/her)]

Try Server results: https://treeherder.mozilla.org/#/jobs?repo=try&revision=7a350a86c2b0ba1b699756485365f5f33680fb5b

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b1cb2c6af0f2
Transform the flex item sizing outline to match the main/cross direction of the item on the page. r=pbro

Comment 4

[Arthur Iakab [arthur_iakab]]

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

Comment 5

[Arthur Iakab [arthur_iakab]]

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