When an element is selected in the "Elements" tab, the styles shown on the right are only the ones that directly affect the particular element. For example, when inspecting a "div#first", the styles shown will only be for "#first" and "div". Firebug shows all the styles that the current element inherits as well, so you would see those two, along with "body" and any other parent element. This is very useful in figuring out where a particular style is coming from when working with complicated hierarchies. I suggest Firebug's behaviour be added to Web Inspector.
Created attachment 34199 [details] Web Inspector's display of styles for an element div#eyebrowwide
Created attachment 34200 [details] Firebug's display of styles for element div#eyebrowwide
Hyatt, what would be the best way to get this info out of the engine?
FWIW, "Show Computer Style" has an "Show Inherited" checkbox, which gets the job done for now. But it would be nice to see where a particular style is coming from (maybe as a tooltip on hover or something).
*** Bug 35073 has been marked as a duplicate of this bug. ***
Created attachment 50955 [details] [IMAGE] Screenshot while running with patch.
Created attachment 50958 [details] [PATCH] Proposed change.
Created attachment 51011 [details] [IMAGE] Updated looks. FB is grouping inherited styles by the node (i.e. style attribute and matching selectors are grouped by ancestor node). This is in fact useful, so I updated the code a tiny bit. These new groups are not expandable, styles within inherited groups are collapsed by default.
Committing to http://svn.webkit.org/repository/webkit/trunk ... M WebCore/ChangeLog M WebCore/English.lproj/localizedStrings.js M WebCore/inspector/InspectorDOMAgent.cpp M WebCore/inspector/front-end/DOMAgent.js M WebCore/inspector/front-end/InjectedScript.js M WebCore/inspector/front-end/StylesSidebarPane.js M WebCore/inspector/front-end/inspector.css Committed r56161