My favorites | Sign in
Project Home Wiki Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 223: Only show applied styles in Style side panel
10 people starred this issue and may be notified of changes. Back to list
 
Reported by arjenwar...@gmail.com, Jun 20, 2007
It would be nice if there would be an option in the "Style" tab of an
inspected element to only show the applied styles. It currently has a lot
of "Inherited from ..." blocks where all the styles are dashed out. It
would be neat if you could hide all these style rules so it's clearer to
see WHAT is actually applied.

Maybe an option under "Show Computed Style" ?
Jul 6, 2007
Project Member #1 johnjbar...@gmail.com
(No comment was entered for this change.)
Labels: -Type-Defect Type-Enhancement
Oct 16, 2009
#2 kexianbi...@gtempaccount.com
Yes, i wish the same feature "Show Applied Style", currently i can realize it by
modify firebug code:

1.C:\Documents and Settings\<user>\Application
Data\Mozilla\Firefox\Profiles\<random>.default\extensions\firebug@software.joehewitt.com\content\firebug\css.js
(commented 3 places):
        cascadedTag:
            DIV({},
                FOR("rule", "$rules",
                    TAG("$ruleTag", {rule: "$rule"})
                ),
                FOR("section", "$inherited",
                    /*H1({class: "cssInheritHeader groupHeader"},
                        SPAN({class: "cssInheritLabel"}, "$inheritLabel"),
                        TAG(FirebugReps.Element.shortTag, {object: "$section.element"})
                    ),*/
                    FOR("rule", "$section.rules",
                        TAG("$ruleTag", {rule: "$rule"})
                    )
                )
            ),

        ruleTag:
            DIV({class: "cssRule insertInto", $cssInheritedRule: "$rule.inherited",
                 _repObject: "$rule.rule.style", "ruleId": "$rule.id"},
                /*DIV({class: "cssHead"},
                    SPAN({class: "cssSelector"}, "$rule.selector"), " {",
                    TAG(FirebugReps.SourceLink.tag, {object: "$rule.sourceLink"})
                ),*/
                FOR("prop", "$rule.props",
                    DIV({class: "cssProp editGroup", $disabledStyle: "$prop.disabled",
                            $cssOverridden: "$prop.overridden"},
                        SPAN({class: "cssPropName editable"}, "$prop.name"),
                        SPAN({class: "cssColon"}, ":"),
                        SPAN({class: "cssPropValue editable"},
"$prop.value$prop.important"),
                        SPAN({class: "cssSemi"}, ";")
                    )
                )/*,
                DIV({class: "editable insertBefore"}, "}")*/
            ),

2.C:\Documents and Settings\<user>\Application
Data\Mozilla\Firefox\Profiles\<random>.default\extensions\firebug@software.joehewitt.com\skin\classic\css.css:

.cssOverridden{...} modified to 'display:none;'
Jun 30, 2010
#3 sebastia...@gmx.de
See  issue 2916 . Would that solve your problem?
Jun 30, 2010
#5 kexianbi...@gtempaccount.com
Yeah,  issue 2916  is the same with  issue 223 .

DIYism
Jul 1, 2010
Project Member #6 odva...@gmail.com
(No comment was entered for this change.)
Cc: odvarko
Jul 1, 2010
#7 sebastia...@gmx.de
kexianbin, because you're saying, this is the same as  issue 2916 , I'll mark this one as duplicate of it, because it's having more info.
Status: Duplicate
Mergedinto: 2916
Jul 2, 2010
#8 kexianbi...@gtempaccount.com
sebastianzartner, 

sabine.michael.ratcliffe refuse to merge issuse 223 into  issue 2916 ,
so please restore the issuse 223 status.

https://code.google.com/p/fbug/issues/detail?id=2916#c12
For the Trace Styles feature it is important to see:
1. The order of a particular style attributes overrides
2. Which stylesheet the style attribute has come from

Jul 2, 2010
Project Member #9 sabine.m...@gmail.com
@sebastian - this is not a duplicate.

The request here is to "Only show applied styles" whereas  issue 2916  is about adding the IE Dev Tools "Trace Styles" Feature.

The "Only show applied styles" feature (this issue) would be an option on the styles tab as it only requires the removal of inherited styles in that tab.

The "Trace Styles" feature involves showing inheritance of styles by attribute rather than by class (see https://code.google.com/p/fbug/issues/detail?id=2916#c8)
Status: Triaged
Cc: sabine.michael.ratcliffe sebastia...@gmx.de
Labels: -Priority-Medium css
Mergedinto: -2916
Jul 2, 2010
#10 sebastia...@gmx.de
Sorry for the mistake! I was seeing both issues as the same. Now it's clear, that these are two different issues.
Feb 19, 2011
#11 sebastia...@gmx.de
It took a long time, but now this feature is finally implemented in r9426.
Summary: Only show applied styles
Status: Commit
Owner: sebastia...@gmx.de
Cc: -sebastia...@gmx.de
Labels: release-note-wanted
Feb 20, 2011
#12 kexianbi...@gtempaccount.com
Thanks sebastianzartner for your great job.

Now i get the firebug from http://fbug.googlecode.com/svn/branches/firebug1.7
and i can see the option "Only show applied styles" under tab "Style", it shows the sytles:

textarea {
    padding-left: 1px;
    padding-right: 1px;
}

Could you do me a favor to add option "Only show applied styles" under tab "Computed Style"? And it should only show the styles and without the selectors:

    padding-left: 1px;
    padding-right: 1px;
Feb 20, 2011
#13 sebastia...@gmx.de
I agree with you, that the Computed side panel should also have this option. Though I created a separate  issue 4132  for that feature, because these changes need some more investigation and would probably delay the new feature implemented here for the next (alpha) release.
Therefore I renamed this issue to reflect the changes made here.
Summary: Only show applied styles in Style side panel
Feb 21, 2011
#14 kexianbi...@gtempaccount.com
Maybe we shouldn't add "Only show applied styles" in Computed Style side panel, but should add "Only show applied styles(without selectors)" in Style side panel.
Feb 21, 2011
#15 sebastia...@gmx.de
kexianbin, it's enough when you post your comments about your suggestion to  issue 4132 , since this issue here is just covering the applied styles part as described in the issue description.
Feb 21, 2011
#17 kexianbi...@gtempaccount.com
Yes, i just need the function "Only show applied styles(without selectors)" in Style side panel which realized in "https://code.google.com/p/fbug/issues/detail?id=223#c2".

You know, in the era of web 2.0, very often we need embed small parts web pages of other sites into our web sites through AJAX etc. In my mind, in these cases, we need no separate styles(such as in <style>...</style> or in css files), we just need inline styles(in style="..."). Since the whole web page parts along with inline styles are being reused, we need not reuse the separate styles.

So, we could copy the pure styles by "Only show applied styles(without selectors)" into my sites.
Mar 4, 2011
Project Member #18 odva...@gmail.com
This is one of 26 issues fixed in Firebug 1.7b1, please install:
http://getfirebug.com/releases/firebug/1.7X/firebug-1.7X.0b1.xpi

and let us know if it works for you!

Thanks!
Honza
Status: Fixed
Labels: fixed1.7b1
Mar 4, 2011
#19 normanpa...@googlemail.com
Works perfectly for me, nice addition I may add.
Mozilla/5.0 (Windows NT 6.1; rv:2.0b13pre) Gecko/20110303 Firefox/4.0b13pre
Mar 7, 2011
Project Member #20 odva...@gmail.com
Thanks for the update!
Honza
Status: Verified
Jun 5, 2012
Project Member #21 sebastia...@gmail.com
(No comment was entered for this change.)
Labels: fixed-1.7-b1
Jun 11, 2013
Project Member #22 sebastia...@gmail.com
(No comment was entered for this change.)
Owner: sebastia...@gmail.com
Sign in to add a comment

Powered by Google Project Hosting