xul - no or wrong toolbarbutton image

Question

I spent a whole day on something so trivial as this one, still can't make this work. A huge weird image appears instead of my icon. If I take out the toolbarbutton-1 class no image will appear at all. Here are all the stuff that matters: (This is going to be an awfully long post...)

My XUL contains only a toolbarbutton on the toolbarpalette:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://ytweaks/skin/style.css" type="text/
css"?>
<overlay id="yTweaks" xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
    <script src="main.js" />
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="ytweaks-main-button" class="toolbarbutton-1
chromeclass-toolbar-additional"
            type="menu"
            label="yTweaks"
            tooltiptext="yTweaks"
            state="enabled">
        </toolbarbutton>
    </toolbarpalette>
</overlay>

And the CSS is the same as the one in the MDN tutorial:

#ytweaks-main-button {
  list-style-image: url("chrome://ytweaks/skin/icon.large.png");
}

toolbar[iconsize="small"] #ytweaks-main-button {
  list-style-image: url("chrome://ytweaks/skin/icon.small.png");
}

The manifest file looks like this:

content ytweaks chrome/content/
overlay chrome://browser/content/browser.xul chrome://ytweaks/content/ui.xul

skin ytweaks classic/1.0 skin/classic/ytweaks/
style chrome://global/content/customizeToolbar.xul chrome://ytweaks/skin/style.css

And the folder structure:

chrome
|-- content
|   |-- ui.xul
|   |-- main.js
|-- skin
    |-- classic
        |-- ytweaks
            |-- icon.large.png
            |-- icon.small.png
            |-- style.css

And finally, the result looks like this: enter image description here

Totally not the same icon I made. This is my icon that should appear (the large one): enter image description here

Also, how can I debug these stuff? For example, how can I browse the chrome registry. If I type a chrome URI in firefox nothing happens. Except for the browser's main XUL file which loads another full browser.

Nickolay Nickolay · Accepted Answer · 2011-12-05T22:36:59

This turned out to be due to invalid path here:

skin ytweaks classic/1.0 skin/classic/ytweaks/

..which should be:

skin ytweaks classic/1.0 chrome/skin/classic/ytweaks/

Re: debugging. I'd test 3 things:

Use the simplest rules that you know must match, then check the styles on the element in question with the DOM inspector to see if your rules match. If they don't your stylesheet didn't get applied for some reason.
Look really close at the line that applies the stylesheet (in your case it's the style line in your chrome.manifest). I don't know how you can debug typos here.
Check that the chrome:// URL to the stylesheet is working when you open it via the Location bar. It's supposed to display the text of your css file.
- If you get No chrome package registered for chrome://aaa/skin/aaa.css message in the Error Console, your skin declaration in chrome.manifest didn't get processed or the 'provider' name (aaa in my example above) doesn't match the 'provider' name specified after "skin"
- If you get an in-content error page saying File not found. Firefox can't find the file at chrome://aaa/skin/bbb.css (as in your case), it means the path part of the skin declaration is incorrect. It should be relative to the chrome.manifest (and iirc ending with a /)

xul - no or wrong toolbarbutton image

2 Answers