How to Create XUL Toolbar via Javascript?

Question

With the coming of multi-process Firefox I have decided to re-write my addon using the Addon-SDK.

My addon is mainly a toolbar with an extensive set of menus.

The addonsdk does not provide any way to build menus. So I found this method by which I can add them to an existing toolbar. However, I cannot find any way to create menus like this and add them to an Addon-SDK toolbar. So I thought I would just create the toolbar the same way I am creating the menus.

So, I am basically trying to create an XUL toolbar via javascript (I think):

var MyDelegate = {
    onTrack: function(window){
        //don't add this to other windows, just the browser window
        if(window.location != "chrome://browser/content/browser.xul") {
            // console.log("=> win location false");
            return;
        }
        var document = window.document; //we need this to attach the XUL elements

        var MyBar = window.document.createElement('toolbar');
        MyBar.setAttribute('id', 'MyToolbarID');
        MyBar.setAttribute('toolbarname', 'MyTitle');
        MyBar.setAttribute('class', 'chromeclass-toolbar');
        MyBar.setAttribute('mode', 'full');     
        MyBar.setAttribute('hidden', 'false');      
        MyBar.setAttribute('insertafter', 'PersonalToolbar');   
    }
}
let utils = require('sdk/deprecated/window-utils'); // for new style sdk
utils.WindowTracker(spatDelegate);

What do I have to do to make this toolbar actually get built and display in the browser?

[update]

The reason I don't use an SDK toolbar is because the toolbar is created async and does not exist in time to get a handle on it's html id. Even if I fish the html id using the browser toolbox, it doesn't get added to the window.

Answer 1

You need to add MyBar to the toolbox:

window.document.getElementById("navigator-toolbox").appendChild(MyBar);