Open
Bug 942176
Opened 10 years ago
Updated 1 year ago
CSS properties highlighter
Categories
(DevTools :: Inspector, enhancement, P3)
Tracking
(Not tracked)
NEW
People
(Reporter: pbro, Unassigned)
References
(Depends on 3 open bugs, Blocks 1 open bug)
Details
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.
Reporter | ||
Comment 1•10 years ago
|
||
This needs to be a meta bug. I'll open children blocker bugs.
Updated•8 years ago
|
Severity: normal → enhancement
Updated•6 years ago
|
Blocks: devtools/highlighters
Updated•5 years ago
|
Product: Firefox → DevTools
Comment 3•2 years ago
|
||
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
Updated•1 year ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•