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

RESOLVED FIXED in Firefox 66

Status

enhancement
P2
normal
RESOLVED FIXED
5 months ago
4 months ago

People

(Reporter: pbro, Assigned: mtigley)

Tracking

(Blocks 1 bug)

unspecified
Firefox 66
Dependency tree / graph

Firefox Tracking Flags

(firefox66 fixed)

Details

Attachments

(1 attachment)

(Reporter)

Description

5 months ago
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)
Priority: -- → P2
(Assignee)

Updated

5 months ago
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
(Reporter)

Updated

5 months ago
Blocks: dt-flexbox
No longer blocks: 1478396
Attachment #9030505 - Attachment description: Bug 1508613 - Transform the flex item sizing outline to match the main/cross direction of the item on the page. r=gl → Bug 1508613 - Transform the flex item sizing outline to match the main/cross direction of the item on the page. r=pbro

Comment 3

4 months ago
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

Comment 4

4 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/b1cb2c6af0f2
Status: ASSIGNED → RESOLVED
Last Resolved: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66
(Reporter)

Updated

4 months ago
Depends on: 1514990
You need to log in before you can comment on or make changes to this bug.