Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items

RESOLVED FIXED in Firefox 66

Status

enhancement
P3
normal
RESOLVED FIXED
7 months ago
4 months ago

People

(Reporter: pbro, Assigned: miker)

Tracking

(Blocks 2 bugs)

unspecified
Firefox 66
Dependency tree / graph

Firefox Tracking Flags

(firefox66 fixed)

Details

(Whiteboard: [qa-66b-p2])

Attachments

(2 attachments)

Reporter

Description

7 months ago
When hovering elements in the markup-view, or in the page (in pick mode), then the flexbox highlighter should appear automatically when highlighting flex containers or items.

The idea is to make flexbox layouts more easily discoverable this way.

To be discussed: does the usual box-model highlighter still appear in this case?
I believe it would be useful for it to keep on appearing, but the guides (the lines that stretch all the way to the bottom/top/left/right sides might get in the way).
Priority: -- → P3
@Victoria I am planning on working on this next... do we have any idea what it should look like.

I am assuming that highlighting a flex container would show the highlighter's padding, border and margin but the content would be shown.

Not sure what we should show when hovering a flex item though.
Flags: needinfo?(victoria)
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
Posted image Mockup
@Victoria This is what I would suggest.
The code for this should be similar to Bug 1297100.
Hi Mike! Yes, it's similar to your mockup.

This is the design that shows what I was thinking for this: https://mozilla.invisionapp.com/share/MZNA228P5WB#/311896913_flexbox_2

Here's what I suggest to emphasize the flexbox a bit more for the container:

- Flex container's dotted purple outline should be showing instead of the blue dotted line
- I toned down the yellow and purple to half of the current opacity, so it's less distracting/clashing


---
Re: Flex item highlight:

I assume this is what would show up when: the user has already switched on the flexbox overlay, and then hovers over one of the child items?

I was originally thinking of a simpler design like this .3 opacity solid overlay: https://mozilla.invisionapp.com/share/MZNA228P5WB#/319386528_flexbox_4-5

But now that I see your mockup I think that's a better idea because there's a ton of info there that would be useful!

I would suggest we again do half of regular opacity for all the bg colors. In this case, it would look nicer to remove the extending part of the blue dotted lines, but maybe that could actually be useful for lining things up? I'm not sure about this.
Flags: needinfo?(victoria)
Removing this as a blocker for M1. Probably requires more user testing to get the experience right.
No longer blocks: 1470379
What user testing question do you think we need to answer?

One more benefit for this is that we add consistency with Chrome's grid highlight. Seems helpful for choosing the actual flex element in the middle of everything else, especially in nested flex layouts.
I spoke to pbro about whether or not we should consider landing this for 65, and since this is the code freeze period, we will instead move this to landing in 66.
Reporter

Updated

5 months ago
Blocks: 1515868
Attachment #9025420 - Attachment description: Bug 1504743 - Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items → Bug 1504743 - Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items r?gl
Attachment #9025420 - Attachment description: Bug 1504743 - Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items r?gl → Bug 1504743 - Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items r?gl!

Comment 9

4 months ago
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c63fdb43c80c
Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items r=gl

Comment 10

4 months ago
bugherder
Status: ASSIGNED → RESOLVED
Last Resolved: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66
Whiteboard: [qa-66b-p2]
You need to log in before you can comment on or make changes to this bug.