Bug 28039

Summary:

Show inherited styles for a selected DOM element

Product:

WebKit

Reporter:

Aditya Mukherjee <aditya.vm>

Component:

Web Inspector (Deprecated)

Assignee:

Pavel Feldman <pfeldman>

Status:

RESOLVED FIXED

Severity:

Enhancement

CC:

hyatt, pfeldman, timothy

Priority:

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Attachments:

Description	Flags
Web Inspector's display of styles for an element div#eyebrowwide	none
Firebug's display of styles for element div#eyebrowwide	none
[IMAGE] Screenshot while running with patch.	none
[PATCH] Proposed change.	timothy: review+
[IMAGE] Updated looks.	none

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+	Details Formatted Diff Diff
[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.