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

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

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).

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

@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.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Mockup

@Victoria This is what I would suggest.

Comment 3

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

The code for this should be similar to Bug 1297100.

Comment 4

[Victoria Wang [:victoria]]

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.

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1504743 - Combine the box-model highlighter and the flexbox highlighter when highlighting flex containers/items r?gl!

Comment 6

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

Removing this as a blocker for M1. Probably requires more user testing to get the experience right.

Comment 7

[Victoria Wang [:victoria]]

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.

Comment 8

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

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.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
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

[Natalia Csoregi [:nataliaCs]]

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