dynamically change the image of toolbarbutton? -- using Erik Vold's toolbarbutton.js

Question

var self = require("sdk/self");
var toolbarbutton = require("toolbarbutton");

var toolbarbutton = toolbarbutton.ToolbarButton({
  id: "annotator_toolbar_button",
  label: "Web Annotator 2013",
  image: self.data.url("stop.png"),
});

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

toolbarbutton.image = self.data.url("start.png");// this command

I cannot change the image property of Erik Vold's toolbarbutton library for the Firefox addon sdk.

Any help would be appreciated.

Answer 1

You could use the library Toolbar Button Complete, which is my fork of toolbarbutton.js.

Using the library

You can use this library the same way as the original toolbarbutton.js, but it also has more options and features.

In your main.js file:

var self = require("sdk/self");
var toolbarbutton = require("toolbarbutton");

var button = toolbarbutton.ToolbarButton({
  id: "annotator_toolbar_button",
  label: "Web Annotator 2013",
  image: self.data.url("stop.png"),
});

/* Only move button if installing for first time */
var forceMove = (self.loadReason === "install");

button.moveTo({
  toolbarID: "nav-bar",
  insertbefore: "home-button",
  forceMove: forceMove
}); 

button.button().setAttribute( "image", self.data.url("start.png") );

You can find a working example of the library here. (Currently it is a little out of date, though.)

Installing the Library

If you are using the add-on SDK on your computer:

1. Download Toolbar Button Complete.
2. add it to your packages directory. (Either under your SDK directory or under your add-on's directory.)

If you are using the Add-on Builder to create your add-on:

1. Click the plus button next to your library folder:

   

2. Type in Toolbar Button Complete.

3. Click on the Add Library button:

   

Updating the Library

The library is hosted on github here.

If you are using the Add-on Builder for your add-on, you can simply click the little refresh button when there is an update available.