我的firefox插件代码正在破坏导航栏

Question

I want to add a toolbar button before the firefox search container in my addon. But it is completely clearing my navigation bar. I suspect the offending code is due to an empty array or something but i cant be certain.

//insert before search container
if(navBar && navBar.currentSet.indexOf("mybutton-id")== -1 )//navBar exist and our button doesnt
{
    var arrayCurrentSet= navBar.currentSet.split(',');
    var arrayFinalSet= [];//empty at first
    if(arrayCurrentSet.indexOf("search-container") != -1)//if search-container exists in current set
    {
        // check item by item in current set
        var i= null;
        while(i=arrayCurrentSet.shift() != undefined)
        {
            if(i == "search-container")//"search-container" found !!
            {
                /*insert our button after it but only if our button does not already exist*/
                if(arrayFinalSet.indexOf("mybutton-id") == -1) arrayFinalSet.push("mybutton-id");
            }
            arrayFinalSet.push(i); 
            dump("arrayFinalSet "+ i);
        }
    }
    else //damn search-container doesnt exist
    {
        arrayFinalSet= arrayCurrentSet;
        arrayFinalSet.push("mybutton-id");//add our button to the end of whatever is available in nav bar
    }
    //set new navBar
    navBar.currentSet= arrayFinalSet.join(',');  
}

The full code is available

https://builder.addons.mozilla.org/addon/1052494/latest/

http://jsfiddle.net/CQ4wA/

Answer 1

I'm not too sure why the navigation bar has been removed, but I think it would be better to approach this from a different angle. Rather than messing around with an array of strings, try using DOM methods instead.

eg

var sC=navBar.querySelector("#search-container");
navBar.insertBefore(btn, sC);

Answer 2

The code you have here seems to work - but the toolbar needs to find your button somehow. Your current code doesn't even insert the button into the document, meaning that the toolbar has no chance to find it by its ID. It should be in the toolbar palette palette however, the palette also determines which buttons the user can choose from when customizing the toolbar. So you probably want to do something like this first:

var toolbox = navBar.toolbox;
toolbox.palette.appendChild(btn);

You might also want to simplify your code:

var arrayCurrentSet = navBar.currentSet.split(',');
var insertionPoint = arrayCurrentSet.indexOf("search-container");
if (insertionPoint >= 0)
  arrayCurrentSet.splice(insertionPoint, 0, "mybutton-id");
else
  arrayCurrentSet.push("mybutton-id");
navBar.currentSet = arrayCurrentSet.join(',');

And finally, you probably want to make the browser remember the current button set, it doesn't happen automatically:

document.persist(navBar.id, "currentset");

Note that the button that will be inserted into the toolbar is not the same as the button you added to the palette - the toolbar code clones the button, with one copy being left in the palette. So event listeners added via addEventListener will sadly be lost. It is better to use a command attribute and insert a <command> element into the document that you will attach your listener to.

Note : in XUL you usually want the command and not the click event - unless you are really interested in mouse clicks only and want to ignore the button being triggered by keyboard or other means.