Open
Bug 942176
Opened 12 years ago
Updated 3 years 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•12 years ago
|
||
This needs to be a meta bug.
I'll open children blocker bugs.
Updated•9 years ago
|
Severity: normal → enhancement
Updated•8 years ago
|
Blocks: devtools/highlighters
Updated•7 years ago
|
Product: Firefox → DevTools
Comment 3•4 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•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•