245594 - DOM Inspector should display specificity for CSS style rules

Status: VERIFIED DUPLICATE of bug 231577

(Other Applications :: DOM Inspector, enhancement)

Description

[Ron Thigpen]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040514
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040514

CSS style rulesets (sets of Property|Value pairs) are matched to DOM elements
using Selectors.  Every Selector has a calculated specificity.  The layout
engine resolves conflicts in individual style rules using a ranking of these
numeric specificities.  The rules associated with the Selector having the
highest specificity take precedence in assignment.

Debugging assigned CSS style rules is one of the most prominent use cases for
the DOM Inspector.  This debugging would be greatly aided if the DOM inspector
showed the calculated specificiy for the current element-selector pairs.  

Example:
1. Open page in DOM Inspector
2. Navigate to a node element with associated CSS style rules
3. In the Object pane, select CSS Style Rules (these are selectors)
4. Select one of the listed Style Rules

In the pane below, for each of the Style Rules (Selectors) there are listed all
of the Property|Value pairs associated with that rule.  A simple "Priority" flag
is also available for viewing.  (I believe this indicates whether the CSS
"!important" flag has been set.)  

I would like to also be able to view the calculated Specificity value.  

This could be added as an additional column in this table.  I believe the layout
engine should already be calculating this value so it should be simply an issue
of displaying an existing value



Reproducible: Always
Steps to Reproduce:
1.
2.
3.

Comment 1

[Christian :Biesinger (don't email me, ping me on IRC)]

*** This bug has been marked as a duplicate of 231577 ***