Bug 28039 - Show inherited styles for a selected DOM element
Summary: Show inherited styles for a selected DOM element
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P3 Enhancement
Assignee: Pavel Feldman
URL:
Keywords:
: 35073 (view as bug list)
Depends on:
Blocks:
 
Reported: 2009-08-05 22:54 PDT by Aditya Mukherjee
Modified: 2010-03-18 08:23 PDT (History)
3 users (show)

See Also:


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+
Details | Formatted Diff | Diff
[IMAGE] Updated looks. (121.24 KB, image/png)
2010-03-18 00:14 PDT, Pavel Feldman
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Aditya Mukherjee 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.
Comment 1 Aditya Mukherjee 2009-08-05 22:56:27 PDT
Created attachment 34199 [details]
Web Inspector's display of styles for an element div#eyebrowwide
Comment 2 Aditya Mukherjee 2009-08-05 22:57:23 PDT
Created attachment 34200 [details]
Firebug's display of styles for element div#eyebrowwide
Comment 3 Timothy Hatcher 2009-08-05 23:09:43 PDT
Hyatt, what would be the best way to get this info out of the engine?
Comment 4 Aditya Mukherjee 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).
Comment 5 Pavel Feldman 2010-02-18 07:40:28 PST
*** Bug 35073 has been marked as a duplicate of this bug. ***
Comment 6 Pavel Feldman 2010-03-17 14:14:20 PDT
Created attachment 50955 [details]
[IMAGE] Screenshot while running with patch.
Comment 7 Pavel Feldman 2010-03-17 14:26:01 PDT
Created attachment 50958 [details]
[PATCH] Proposed change.
Comment 8 Pavel Feldman 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.
Comment 9 Pavel Feldman 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