Bug 20691 – Inspector: know and display the source of the rule that causes computed properties

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Rowan Beentje]

Currently the web inspector displays the "computed style" section at the top of the "Styles" panel.  When moused over, the tooltip for each displayed style rule is the same as that shown on the interface; this is useful for interface-truncated styles, but in most cases it would be more useful to see where the computed rule is coming from.

xenon mentioned that much of the parsing to report this information is already present as it is used to cross out rules which are superceded by more specific rules.

In an ideal world, this doesn't even need to be displayed in a tooltip; dreaming here, but as normal stylesheet sections show the toggle-tickbox when moused over, "computed styles" could show the origin of each style in grey next to the style.  Even better - when double-clicked to edit, a process which currently does nothing in the computed style section (causing user confusion [for me and other dumb people]), the appropriate style could be jumped to and edited.

[Pavel Feldman]

Created attachment 60608 [details]
[IMAGE] IE's Trace Styles panel.

[Idan Gazit]

I'm interested in hacking on this, based on guidance received from pfeldman.

The approach I envision is more like the one chosen by IE -- computed styles are list nodes, and relevant rules can be displayed by expanding the node for a given property.

[Timothy Hatcher]

I like IE's approch. But making them expandable prevents us from synthezizing shorthands in the computed style in the future, if that is important. But we haven't done that yet, so it might not be.

[Rob Colburn]

Is this complete now?