RESOLVED FIXED 28039
Show inherited styles for a selected DOM element 
https://bugs.webkit.org/show_bug.cgi?id=28039
Summary Show inherited styles for a selected DOM element
Aditya Mukherjee
Reported 2009-08-05 22:54:52 PDT
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.
Attachments
Web Inspector's display of styles for an element div#eyebrowwide (22.55 KB, image/png)
2009-08-05 22:56 PDT, Aditya Mukherjee 		no flags
Details
Firebug's display of styles for element div#eyebrowwide (32.12 KB, image/png)
2009-08-05 22:57 PDT, Aditya Mukherjee 		no flags
Details
[IMAGE] Screenshot while running with patch. (117.72 KB, image/png)
2010-03-17 14:14 PDT, Pavel Feldman 		no flags
Details
[PATCH] Proposed change. (13.21 KB, patch)
2010-03-17 14:26 PDT, Pavel Feldman 		timothy: review+
DetailsFormatted DiffDiff
[IMAGE] Updated looks. (121.24 KB, image/png)
2010-03-18 00:14 PDT, Pavel Feldman 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Aditya Mukherjee
Comment 1 2009-08-05 22:56:27 PDT
Created attachment 34199 [details] Web Inspector's display of styles for an element div#eyebrowwide
Aditya Mukherjee
Comment 2 2009-08-05 22:57:23 PDT
Created attachment 34200 [details] Firebug's display of styles for element div#eyebrowwide
Timothy Hatcher
Comment 3 2009-08-05 23:09:43 PDT
Hyatt, what would be the best way to get this info out of the engine?
Aditya Mukherjee
Comment 4 2009-09-11 21:56:53 PDT
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).
Pavel Feldman
Comment 5 2010-02-18 07:40:28 PST
*** Bug 35073 has been marked as a duplicate of this bug. ***
Pavel Feldman
Comment 6 2010-03-17 14:14:20 PDT
Created attachment 50955 [details] [IMAGE] Screenshot while running with patch.
Pavel Feldman
Comment 7 2010-03-17 14:26:01 PDT
Created attachment 50958 [details] [PATCH] Proposed change.
Pavel Feldman
Comment 8 2010-03-18 00:14:11 PDT
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.
Pavel Feldman
Comment 9 2010-03-18 08:23:55 PDT
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
Note You need to log in before you can comment on or make changes to this bug.