Changing erik vold toolbarbutton image on the fly

Question

I'm trying to make a firefox extension with the SDK. (if I can avoid XUL i'm happy)

I'm using erik vold toolbarbutton

But I need to change the toolbar image on the fly.

My lib/main.js (background page) is :

var tbb = require("toolbarbutton").ToolbarButton({
  id: "My-button",
  label: "My menu",
  image: Data.url('off.png'),
  onCommand: function(){
    Tabs.open(Data.url("signin.html"));
  }
});

tbb.setIcon({image:Data.url('on.png')});
console.log(tbb.image);

tbb.moveTo({
  toolbarID: "nav-bar",
  forceMove: false // only move once
});

tbb.image is correct, but the button isn't refreshed.

I tried to change packages/toolbarbutton-jplib/lib/toolbarbutton.js

function setIcon(aOptions) {
  options.image = aOptions.image || aOptions.url;
  getToolbarButtons(function(tbb) {
    tbb.image = options.image;
    tbb.setAttribute("image", options.image); // added line
  }, options.id);
  return options.image;
}

But it doesn't seem to refresh... Is erik vold lib enough for this kind of need ?

Answer 1

also be sure to update with this fix https://github.com/voldsoftware/toolbarbutton-jplib/pull/13/files

Answer 2

there is a setIcon method and a image setter that you can use to update the toolbar button's image

Answer 3

I had the same problem so I just wrote the code my self using this tutorial: http://kendsnyder.com/posts/firefox-extensions-add-button-to-nav-bar

Try this, I rewrote my code to fit your needs:

var btn = null;
var btnId = 'My-button';
var btnLabel = 'My menu';
var btnIconOn = 'on.png';
var btnIconOff = 'off.png';

var {Cc, Ci} = require('chrome');
var self = require("sdk/self");
var mediator = Cc['@mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);

// exports.main is called when extension is installed or re-enabled
exports.main = function(options, callbacks) {
    btn = addToolbarButton();
    // do other stuff
};

// exports.onUnload is called when Firefox starts and when the extension is disabled or uninstalled
exports.onUnload = function(reason) {
    removeToolbarButton();
    // do other stuff
};

// add our button
function addToolbarButton() {
    // this document is an XUL document
    var document = mediator.getMostRecentWindow('navigator:browser').document;      
    var navBar = document.getElementById('nav-bar');
    if (!navBar) {
        return;
    }
    var btn = document.createElement('toolbarbutton');  
    btn.setAttribute('id', btnId);
    btn.setAttribute('type', 'button');
    // the toolbarbutton-1 class makes it look like a traditional button
    btn.setAttribute('class', 'toolbarbutton-1');
    // the data.url is relative to the data folder
    btn.setAttribute('image', self.data.url(btnIconOff));
    btn.setAttribute('orient', 'horizontal');
    // this text will be shown when the toolbar is set to text or text and iconss
    btn.setAttribute('label', btnLabel);

    navBar.appendChild(btn);
    return btn;
}

function removeToolbarButton() {
    // this document is an XUL document
    var document = mediator.getMostRecentWindow('navigator:browser').document;      
    var navBar = document.getElementById('nav-bar');
    var btn = document.getElementById(btnId);
    if (navBar && btn) {
        navBar.removeChild(btn);
    }
}

btn.addEventListener('click', function() {
    Tabs.open(Data.url("signin.html"));
}, false);

tbb.setIcon({image:self.data.url(btnIconOn)});