1495775 - The flex items of a flex container are not highlighted when hovered over in the Flexbox Inspector

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Paul_B]

Attachment: Short video of the issue

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0 
Build ID: 20181002100236

STR:

1. Launch Firefox and navigate to a random page (e.g. nytimes.com)
2. Enable the element inspector.
3. Select a Flex Container with multiple flex items.
4. Navigate to the Felexbox Inspector section and hover over the flex container.
5. Observe the highlight of the container on the webpage.
6. Now hover over the flex items that are part of the container.
7. Observe the highlight on the webpage.

Actual result:

Nothing happens. The Flex items are not highlighted as the parent is. 

Expected result:

The flex items are highlighted as the flex container is when hovered over in the Flexbox Inspector for a better consistency and visualization of each item.

Comment 1

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

Attachment: 1495775.patch

Comment 2

[Patrick Brosset <:pbro>]

Comment on attachment 9016143 [details] [diff] [review]
1495775.patch

Review of attachment 9016143 [details] [diff] [review]:
-----------------------------------------------------------------

Great, let's land this.
I think we'll want to refine this later based on the new mockup seen in bug 1498115 (don't show the guides, highlight with the same overlay color, ...). Also, I think we will want to also highlight from the flex item accordion header (the selector). But we can do those things later. This is already a good improvement.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/1d69413fd484
Flex items should be highlighted when hovered over in the flex item list. r=pbro

Comment 4

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/1d69413fd484