Web Developer toolbar problem

[Anonymosity]

In some themes, I found that the gearwheel icon is missing from the button that allows you to change the theme between dark and light, and enable or disable the viewing of other views (eg. inspector or debugger). The setup of that button is in common.css, but in some themes, that image is missing in spite of what is in common.css. What controls the appearance of that image on the button? Something else must be able to override its appearance.

[patrickjdempsey]

I don't have it installed but here is the most common reason why this is happening:

In Firefox, icons are matched to a button in CSS using the button's #id or .class. You cannot have more than one element with the same #id, so some developers think it's OK to point to the internal theme image. This is a bad practice because themes are not required and indeed cannot be expected to have an identical structure or even use the same names for images as the default theme. Even IF the theme uses the same name and same folder position for an image, it may be a different size than the one in the default theme, causing it to appear cut-out weird, or if they use Toolbar.png it may appear as a block of all of the main toolbar buttons. For these reasons it is always recommended that an extension either use a matching .class name where available, or supply their own images.

[Aris]

The image you are looking for is 'tool-options.png' ( chrome://browser/skin/devtools/tool-options.png ).

It is hardcoded in \modules\devtools\main.js and not changeable via css code.

Themes need a copy of it in their 'devtools' folder.

[Anonymosity]

The image I mean is called option-icon.png, and it is in browser/devtools. It looks like a little gearwheel. In the theme Blue Fox, the image is not displayed. In the theme LCARStrek, the image with the same name does appear. The code for making the image appear in the common.css file looked similar in both. Something must be overriding the code for Blue Fox, but what?

[Aris]

'option-icon.png' isn't used on Firefox 23+ developer toolbar anymore. It was changed to 'tool-options.png', which is assigned in main.js and not in common.css. (The buttons code in common.css is useless since Fx23).

Blue Fox misses the tool-options.png, LCARStrek doesn't. This is why you see the correct icon in LCARStrek theme. Anyway Blue Fox devtools are not up to date, so the missing icon is not the only devtools issue. You probably should contact the author to fix this.

To make it clear. The gearwheel icon on devtools toolbar is from tool-options.png and not option-icon.png anymore on Fx 23+ and the corresponding code inside common.css is outdated and not used anymore.

1) paste chrome://browser/skin/devtools/tool-options.png into urlbar and save the image
2) download blue fox theme, extract xpi.
3) extract chrome\blue-fox.jar
4) put downloaded image into 'browser\devtools' subfolder
5) compress jar and xpi files (both are renamed zip files) and keep folder structure as it was
6) install your modified theme

--> your gearwheel appears on devtollbar. It appears twice like the other icons, because devtools are not updated for Fx 23 in Blue Fox theme.

Here is what the result looks like:

Code: Select all

http://img801.imageshack.us/img801/4532/s898.png

[Anonymosity]

The added image works with Blue Fox, so thanks muchly. I do not see double icons. Now I have managed to patch not only Blue Fox, but also Orange Fox, Purple Fox, and Bloody Red to fix the devtools window. Incidentally, pasting that chrome URL into the addressbar results in "File not found". I extracted that file from LCARStrek and repainted it.

I could not find any mention of the name "tool-options.png" in any file within LCARStrek. I used Easyfind to look for that text inside file contents, and it found nothing. How does that image get put into the window with no stylesheet in the theme specifying where it goes?

[Anonymosity]

Do you happen to know what controls the colour of the text in the right pane in the Inspector window? It is black on a dark brown background in the Pitchdark theme, and I was unable to find what would put black text in there.

[patrickjdempsey]

The image you are looking for is 'tool-options.png' ( chrome://browser/skin/devtools/tool-options.png ).

It is hardcoded in \modules\devtools\main.js and not changeable via css code.

Themes need a copy of it in their 'devtools' folder.

That's what I thought. Not very theme-friendly. Is there some magical reason why this image isn't loaded in CSS via a .class or using an image bundled with the extension?

[Aris]

I could not find any mention of the name "tool-options.png" in any file within LCARStrek. I used Easyfind to look for that text inside file contents, and it found nothing. How does that image get put into the window with no stylesheet in the theme specifying where it goes?

The image is not set/changed/styled by the themes css, but by JavaScript in one of the devtools modules.
firefox\browser\omni.ja\modules\devtools\main.js (not part of the theme, but part of Firefox)
Theme devs can of course use own icons.

Do you happen to know what controls the colour of the text in the right pane in the Inspector window? It is black on a dark brown background in the Pitchdark theme, and I was unable to find what would put black text in there.

I know '.theme-body' (partly) controls both panes, left and right.

Code: Select all

/*.theme-body {
  background: red !important;
  color:green !important;
}*/

/* Here is some more code just for the right panel */
.theme-body .ruleview,
.theme-body .property-view,
.theme-body .font,
.theme-body #main,
.theme-body #header {
    background: red !important;
    color: green !important;
}

That's what I thought. Not very theme-friendly. Is there some magical reason why this image isn't loaded in CSS via a .class or using an image bundled with the extension?

Maybe Mozilla doesn't want add-ons to change devtools images. However it is somehow OK for themes, because a theme dev only has to include an own image (or the default one) without the need to adjust it inside a css file. IMO they should have excluded devtools from theming. Its a very frustrating job to change devtools with every new Fx version and to keep compatibility with older versions.

Edit: Updated css code

[patrickjdempsey]

Wait, are we talking about the Web Developer Toolbar extension or one of Mozilla's new built-in tools?

If we are talking about the build-in tools, it's understandable for themes to not support them. For about a year straight Mozilla was COMPLETELY redesigning this mess every other release. And judging from the reports I see of theme changes, that hasn't slowed up in the last year either. It's actually one of the major reasons why I abandoned theme development, because Mozilla kept making huge changes to this and expected themes to support every.single.change. And they bundled half of this mess into browser.css so we couldn't just copy a devtools.css from the default and be covered. It's not worth the headaches and time to keep up just because Mozilla can't figure out how to develop new features in a proper development build. I mean it's one thing to change the styling... themes don't have to keep up with styling changes, but I'm talking about total restructuring and renaming of the elements and changing the names of the icons every single release. Point blank: don't expect themes to support this cluster until Mozilla slows down on it.

And for what it's worth... it's still sloppy lazy programming and against Mozilla's guidelines to embed the image source for the button in JS.

[Aris]

I share your opinion and yes we are talking about the built-in tools that get changed with every new Fx release.

[Anonymosity]

The Web Developer Toolbar works very well. I was talking about the devtools in Firefox itself, and the way themes handle them.

The element .theme-body does not appear in any document within Pitchdark. I tried adding it to layoutview.css, and it did nothing. Maybe it is necessary to have light and dark themes now? I noticed that LCARStrek has both, even though both look alike.

[Aris]

I recommend to look into default theme to see what element belongs into what file.

Css code worked in Stylish for me.

[patrickjdempsey]

Sorry, not sure what devtools requires in terms of light and dark "themes". The place to start would be the default theme... but frankly I can't find anything in it anymore since they rearranged the entire structure... I can't even find the /browser/ stuff.

[Aris]

firefox\browser\omni.ja\chrome\browser\skin\classic\aero\browser & firefox\browser\omni.ja\chrome\browser\skin\classic\browser are the folders you are looking for.

dark-theme.css and light-theme.css only change colors on devtools inspector panes.