How to add an icon on addon bar at first install?

Question

I followed this doc Mozilla Developer Network: Creating toolbar buttons to create a button for my addon. It does work, but when I install the addon the first time the icon doesn't show on the addon bar.

How can I make the icon appear on the addon bar right after the user install my addon and then keep his location preference?

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="chrome://.../content/firefox/browser.css"?>

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="text/javascript" src="chrome://...../content/firefox/browser.js" />

  <toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton id=".....-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
      label="...." tooltiptext="Facebook Manager"
      oncommand="System.......Toolbar.Show(event)" />
  </toolbarpalette>

</overlay>

How can I add the button automatically to addon bar only once?

I found this code to add the button programmatically, it shows my button, but it messes up with the other buttons.

var myId    = "myaddon-button";
var navBar  = document.getElementById("addon-bar");
var curSet  = navBar.currentSet.split(",");

if (curSet.indexOf(myId) == -1) {
    var set = curSet.slice(0, curSet.length).concat(myId).concat(curSet.slice(curSet.length));

    navBar.setAttribute("currentset", set.join(","));
    navBar.currentSet = set.join(",");
    document.persist(navBar.id, "currentset");
    try {
        BrowserToolboxCustomizeDone(true);
    }
    catch (e) {}
}

Answer 1

addon-bar is working fine.

you just have to put your elements inside the toolbar and give it an id of addon-bar example:

your js goes here

    <toolbar id="addon-bar">
        <menulist>
            <your dropdown blah blah blah>
        </menulist>
    </toolbar
</overlay>