1537670 - Feature: Hover over a CSS property/selector to highlight nodes impacted by it in page

Status: RESOLVED DUPLICATE of bug 942176

(DevTools :: Inspector, enhancement, P3)

Description

[Victoria Wang [:victoria]]

We want to increase the association between CSS rules/declarations and the effect they have in the page by adding an in-page highlight effect when hovering over the relevant CSS.

This could apply to a lot of different declarations. 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
etc

Comment 1

[Victoria Wang [:victoria]]

As part of this we'll want a hover background color for selectors/declarations. It should match the markup hover highlight.

This is somewhat related to https://bugzilla.mozilla.org/show_bug.cgi?id=1537666

Comment 2

[Sebastian Zartner [:sebo]]

This looks very much like bug 942176 (and the bugs blocking it) to me. Not all things mentioned here are covered there yet, though I could create more blocking bugs for them.
Victoria, do you agree that this is a duplicate of the other bug?

Sebastian

Comment 3

[Victoria Wang [:victoria]]

Ah yes, good point, that is very similar! I can write a comment in the other bug to mention the extra cases.