Open Bug 942176 Opened 10 years ago Updated 1 year ago

CSS properties highlighter


(DevTools :: Inspector, enhancement, P3)



(Not tracked)


(Reporter: pbro, Unassigned)


(Depends on 3 open bugs, Blocks 1 open bug)


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.
This needs to be a meta bug.
I'll open children blocker bugs.
Depends on: 945167
Depends on: 946198
Depends on: 948364
Depends on: 1014547
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Product: Firefox → DevTools

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
media queries
alignment properties

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.