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)

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

Pushed by mtigley@mozilla.com: 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