1517043 - Flexbox highlighter: When hovering over the diagram or selector in the Flex Item pane, related element should be highlighted in page

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Victoria Wang [:victoria]]

Currently the Flexbox Container view does a great job of emphasizing context by displaying in-page highlights when hovering over any of the element names. 

Once you click into a Flex item however, it feels like this in-page context goes missing. I suggest that when the Flex item pane is in use, we also highlight the in-age element (box model highlight). (Originally the mockups had the flex item diagram overlaid in page, but I think the box model highlight is fine too, and maybe better because it shows margin/padding).

I think it'd be best if this highlight only shows when hovering over the name/selector or diagram, to match other behaviors and to emphasize the connection.

Bonus: When hovering the sibling names in the open selector menu, also highlight those siblings. Might be hard with the native menu?

Comment 1

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

Unassigning due to inactivity