Firefox extension programming: build a button for the tool bar

I just finished a tool bar button for my extension Invert Input. It was not difficult and not too much code were written. But there were some pitfalls which cost me some time.

1. In the overlay.xul file, we added our tool bar button.

   <?xml-stylesheet type="text/css" href="chrome://invertinput12/skin/invertinput.css"?>

    <toolbarpalette id="BrowserToolbarPalette">
       <toolbarbutton id="invertinput12button"
          label="&invertInput12CM.invertInput;"
          tooltiptext="&invertInput12CM.invertInput;"
          oncommand="invertInput12.invert()"
          class="toolbarbutton-1"
       />
    </toolbarpalette>

   The "toolbarbutton-1" class was kind of important. Without it, the icon and text were aligned horizontally which were different from the existing buttons. I don't know why the default is not made vertically as the rest buttons.

2. In the invertinput.css file, we listed where the icons were. We needed to prepare a regular icon (24x24) and a small icon (16x16).

   #invertinput12button
   {
      list-style-image: url("chrome://invertinput12/skin/icon24.png");
   }

   toolbar[iconsize="small"] #invertinput12button
   {
      list-style-image: url("chrome://invertinput12/skin/icon16.png");
   }

3. In chrome.manifest, added this:

   style chrome://global/content/customizeToolbar.xul chrome://invertinput12/skin/invertinput.css

   Without this line, our icon did not show when it was in the palette, but it showed up when the button was added to the tool bar. It puzzled me quite sometime.

This article shows the important places to look at when you want to add your own tool bar button to Firefox. Don't just copy and paste the code. You need to make changes to those strings or file names which are specific for Invert Input.