Weird image on toolbarbutton

I spent a whole day on something so trivial as this one, still can't
make this work.

My basic XUL, contains a simple toolbarbutton on the
BrowseToolbarPalette palette:

<?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 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:
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:
http://i.imgur.com/uy3Iq.png

Totally not the same icon I made. My icon looks like this (this is the
large one):
http://i.imgur.com/2pdAF.png

==========================
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.