792387 - Rule view should highlight which sections of a css selector matches an element

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: The same feature implemented in Chrome.

e.g. Inspecting the following div in the rule view:

<div id="id"></div>

With the following css:
#id, .someselector {
  font-weight: bold;
}

#id would be in bold because it matches the node. We could also use specificity rules to determine which selector is actually applied.

Comment 1

[Dave Camp (:dcamp)]

Attachment: v1

Comment 2

[Brendan Eich [:brendan]]

Twitter ideas and enthusiasm:

https://twitter.com/csuwldcat/status/248752239596957696

/be

Comment 3

[Dave Camp (:dcamp)]

https://hg.mozilla.org/integration/fx-team/rev/dc326f5870d2

Comment 4

[Dave Camp (:dcamp)]

https://hg.mozilla.org/mozilla-central/rev/dc326f5870d2