1515868 - [meta] Combined flex/grid/box-model highlighters

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

This is the meta bug to track the implementation of the new combined highlighters feature.

Elements in the page often get highlighted in devtools:

- when you click on the element picker icon in the toolbox and then hover over elements in the page,
- or you move your mouse over elements in the inspector tree,
- or move your mouse over elements in the animation inspector, or console,
- or click on the inspector icon in the rule-view next to selectors,
- ...

All of these, today, end up toggling the box-model highlighter on the hovered/selected elements, which is useful because you see how big elements are, how big their margins are, etc.

This feature is about combining the box-model highlighter with the flex and grid highlighters, so that when you do any of the above actions, and the hovered/selected element is a grid or flex container or item, then the grid or flex highlighters get displayed too.

This way, users can quickly see what type of layout various elements use.