MozillaZine

Web Developer toolbar problem

Discuss application theming and theme development.
Anonymosity
 
Posts: 8452
Joined: May 7th, 2007, 12:07 pm

Post Posted August 11th, 2013, 3:19 pm

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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 11th, 2013, 4:49 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Aris

User avatar
 
Posts: 3056
Joined: February 27th, 2011, 10:14 am

Post Posted August 12th, 2013, 4:37 am

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.
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

Anonymosity
 
Posts: 8452
Joined: May 7th, 2007, 12:07 pm

Post Posted August 12th, 2013, 11:07 am

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

User avatar
 
Posts: 3056
Joined: February 27th, 2011, 10:14 am

Post Posted August 12th, 2013, 3:26 pm

'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
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

Anonymosity
 
Posts: 8452
Joined: May 7th, 2007, 12:07 pm

Post Posted August 12th, 2013, 10:28 pm

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
 
Posts: 8452
Joined: May 7th, 2007, 12:07 pm

Post Posted August 12th, 2013, 10:39 pm

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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 13th, 2013, 2:44 am

Aris wrote: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?
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Aris

User avatar
 
Posts: 3056
Joined: February 27th, 2011, 10:14 am

Post Posted August 13th, 2013, 3:57 am

Anonymosity wrote: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.

Anonymosity wrote: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;
}



patrickjdempsey wrote:
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
Last edited by Aris on August 14th, 2013, 9:25 am, edited 2 times in total.
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 13th, 2013, 11:23 am

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Aris

User avatar
 
Posts: 3056
Joined: February 27th, 2011, 10:14 am

Post Posted August 13th, 2013, 12:15 pm

I share your opinion and yes we are talking about the built-in tools that get changed with every new Fx release.
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

Anonymosity
 
Posts: 8452
Joined: May 7th, 2007, 12:07 pm

Post Posted August 13th, 2013, 12:31 pm

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

User avatar
 
Posts: 3056
Joined: February 27th, 2011, 10:14 am

Post Posted August 13th, 2013, 2:03 pm

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

Css code worked in Stylish for me.
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 13th, 2013, 6:03 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Aris

User avatar
 
Posts: 3056
Joined: February 27th, 2011, 10:14 am

Post Posted August 14th, 2013, 3:56 am

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.
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest