CSS properties are all grouped under 'Other' in Computed side panel #8018

Closed
SebastianZ opened this Issue Apr 29, 2016 · 24 comments

Projects

None yet
@SebastianZ
Member

Using Firebug 2.0.16 the Computed side panel lists all CSS properties under the Other group starting from Firefox 46.0.

Sebastian

@maguijo
maguijo commented May 1, 2016

Yes, please fix. Would hate to have to wait until Firebug 3 comes out to get these grouped properly again.

@SebastianZ
Member

Fixed this with the above commit.

@janodvarko Maybe you could do a new release?

Sebastian

@SebastianZ SebastianZ closed this May 2, 2016
@maguijo
maguijo commented May 3, 2016

Still looking for the new release that fixes this.... thanks so much.

@deltafactory

Does this also address the missing list of cascaded/overridden styles?

@SebastianZ SebastianZ self-assigned this May 3, 2016
@SebastianZ
Member

@deltafactory Yes, that also fixes the computed style traces.

Sebastian

@l0co
l0co commented May 6, 2016

@SebastianZ nice fix, I can confirm it works well. Thanks.

@SebastianZ
Member

For everyone that can't wait for the official release, I've attached a fixed version here.

firebug@software.joehewitt.com.zip

Just rename the file extension to xpi and then drag & drop it into your browser. You should then be able to install it. In case the installation fails, you need to set the preference xpinstall.signatures.required in about:config to false.

Sebastian

@dancoding

SebastianZ, thank you for restoring sanity to my life! I rely heavily on this feature of Firebug in my work as a developer.

I'm not experienced at installing browser extensions, so it took me a few minutes to figure out the steps involved (even after reading SebastianZ's reply to RouninMedia). In case anyone else is in the same situation, here are the steps I had to go through on a Windows machine:

  1. Click on SebastianZ's link above (link text: firebug@software.joehewitt.com.zip).
  2. Choose "Save File" and save the .zip file to someplace easily accessible, such as your desktop.
  3. Open a new Firefox tab and type "about:config" in the address bar.
  4. If necessary, confirm that you know that altering the about:config file could void your warranty.
  5. Type "xpi" in the search box (or scroll all the way down till you get to "xpinstall.signatures.required").
  6. Next to "xpinstall.signatures.required," if it says "false" under the "Value" column, you're all set to install SebastianZ's fix. If it says "true," you need to click on it so that it toggles to "false."
  7. Go to wherever you saved the firebug@software.joehewitt.com.zip file. Rename it, changing the ".zip" at the end to ".xpi"
  8. On my computer, a window popped up asking what file to use to open the program. I choose Firefox. If this doesn't happen and the file simply renames itself firebug@software.joehewitt.com.xpi as you asked, then drag the renamed file into Firefox in an empty tab.
  9. Voila! The Computed Styles panel works again, and sanity is restored.

Thanks again, SebastianZ!

@jdcohan
jdcohan commented May 15, 2016

@SebastianZ and @dancoding - Thank you both so much. Back to sanity.

@gnysek
gnysek commented May 16, 2016

@dancoding you can drag & drop .xpi file as new tab into Firefox, then you don't need to assign this extension with Firefox on Windows (on Linux there is no functionality like this I think).

@dancoding

You raise a good point, @gnysek. I saved SebastianZ's file to my desktop under its original name (ending in .zip) and then renamed it, changing the extension to .xpi. It was the second of those two steps (renaming the file) that brought up the dialog box about which program I wanted to associate the .xpi extension with. If had just saved the file as .xpi in the first place (via the "Save as Type" drop-down menu in the "Save As" dialog box), I wouldn't have had to go through that extra step. I could have just saved the file as .xpi, then dragged it from my desktop and dropped it into Firefox.

@DaveyD
DaveyD commented Jun 17, 2016

@SebastianZ - Thank you so much for creating this! I was going crazy!
@dancoding - Thanks for the detailed instructions

I'm back on my way again...!

@geotonics
geotonics commented Jun 19, 2016 edited

I didn't install the extension and it looks like this is fixed. I have Firebug 2.0.17 I can see the computed style details again so I guess it was in an update. Thanks to whoever fixed it. I find the computed tab in Firebug much more convenient than using the Firefox inspector.

@geotonics

This bug is back. I'm using Firefox 50 and Firebug 2.0.1.8. Any idea how I can get the computed styles back to normal?

@SebastianZ
Member

This is obviously caused by the css-logic.js file being moved again, this time to devtools/server/css-logic

So, if you want to fix this, you need to add the path above to extension/content/firebug/css/computedPanel.js

Though as Firebug is now merged into the Firefox DevTools as a theme and the extension breaks once multi-process Firefox is enabled, the development on Firebug as an extension is discontinued. So I rather suggest to slowly switch over to the DevTools.

Sebastian

@geotonics

When I overide a style, I need to use the same css as the style I'm
overiding. Firebug->computed used to be able to display the the css
with a link to the source. I've tried many times but I've never been
able to figure out how to do that in dev tools.

On 11/19/2016 8:03 AM, Sebastian Zartner wrote:

This is obviously caused by the css-logic.js file being moved again,
this time to devtools/server/css-logic
https://dxr.mozilla.org/mozilla-central/source/devtools/server/css-logic.js.

So, if you want to fix this, you need to add the path above to
extension/content/firebug/css/computedPanel.js
https://github.com/firebug/firebug/blob/c06baa0e18d6fd357fa9b67ed313e7e71563a115/extension/content/firebug/css/computedPanel.js#L46

Though as Firebug is now merged
https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools/
into the Firefox DevTools
https://developer.mozilla.org/en-US/docs/Tools as a theme and the
extension breaks once multi-process Firefox
https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox is
enabled, the development on Firebug as an extension is discontinued.
So I rather suggest to slowly switch over to the DevTools.

Sebastian


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#8018 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJHQF8KkIxgJHwtAdp0WcD7jD56vNp1jks5q_vO_gaJpZM4ITP42.

@SebastianZ
Member

The computed styles are displayed similarily to the ones in Firebug. The only difference is that they are always sorted alphabetically - there is no option to group them by category.
You just need to expand a property to see the style trace with links to the related CSS rules. See the related MDN page for more info.

Sebastian

@geotonics

OK, thanks I think I get it now at long last. The styles are below the box model. I had looked at the box model at the top of the Computed tab and assumed that was all there was so I never scrolled down.

@pinta83
pinta83 commented Nov 23, 2016

I'm having problems with Firebug since FF version 48 (if i recall right)....

From version 49+ the computed panel is not working right... There are problems happening to me (Curently FB 2.0.18 + FF 50 on Ubuntu and Win7)....

  1. Computed color can now only be viewed if you are on an element that explicitly has it set, if i go to a child element - there is no Color property in the computed tab - thus making it completly useless...
  2. Since today (FF 50) all properties are once again grouped under - Other....

Seriously considering bout dumping Firebug 4evar... Within the last month I've had more problems then the use of it...

@deltafactory

@pinta83 see Sebastian's comment (#8018 (comment)) about Firebug development ending in favor of DevTools. If it's not working for you, it's time to transition away now.

@pinta83
pinta83 commented Nov 23, 2016

Y I've read about it, but i'm a slave of habits :(
I was working for a few days with Firefox dev tools, and ended up with Firebug again :(
But I guess there's not much I can do :)

@RouninMedia

I feel your pain, pinta83... I've been through the same process:

  1. Realised Firebug isn't going to get well again
  2. Switched to Firefox Dev Tools
  3. Repeatedly tried to use Firefox Dev Tools but found it really awkward and uncomfortable
  4. Given up and gone back to using broken Firebug
  5. Tried and failed to find a Github fork of Firebug where "Unofficial Firebug" continues

and then... rather unexpectedly, I have chanced upon the solution. It's not perfect, but I suspect it's as close to perfect as I'm going to get.

The Solution is... you can change the theme of Dev Tools to "Firebug Theme"
See: https://developer.mozilla.org/en-US/docs/Tools/Settings#Choose_DevTools_theme

@maguijo
maguijo commented Dec 2, 2016

@RouninMedia , you are my new hero!

@pinta83
pinta83 commented Dec 2, 2016

@RouninMedia Yeah i figured that out awhile ago, but that's just a skin... I miss

  1. going through different css property values with just arrow keys (this works only for numeric values in devtools)
  2. Multi line console - on the side....
  3. Actually remembering my multiline console input code
  4. The view that FireBug has for console.log() objects in the console is far more easier to read....
    U could go on for days.... Devtools is good, and since "FireBug" is becoming just "Bug" i gave to use devtools...
    But to be honest, it's rly pissing me off on hourly basis :(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment