942176 - CSS properties highlighter

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

This is a rough idea for a new feature of the inspector that would help a lot understanding WHY css applies the way it does:

- like the normal highlighter but for individual css properties
- appears on the selected content element when hovering over a property in the rule view/computed view/style editor
- shows highlighter region and/or overlayed info depending on the property:
  - for border: highlight its region + draw border-radius info
  - for  background images: reveal the whole background image, even it's partly  hidden (as in sprites) and overlay background size info, and element  size info
  - padding and margin: highlight the regions
  - line height: draw lines
  - for width, height, any measures...: draw rulers
  - Box-shadow: overlaying info to explain where each number has been used
  - etc.

Comment 1

[Patrick Brosset <:pbro>]

This needs to be a meta bug.
I'll open children blocker bugs.

Comment 2

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 3

[Victoria Wang [:victoria]]

In a duplicate bug I suggested the following related features:

It would be great to start with these:

selector (highlight all matching elements)
margin (use yellow color from box model)
padding (use purple color from box model)

Other possibilities:

font-family - highlight all text using the active font
display:flex - show flex container overlay
width/height
media queries
alignment properties