What is the correct usage of Firefox ToggleButton?

Question

I'm writing and debugging a Firefox Addon using the SDK (version 1.16, Firefox version 31).

I've been using the ToggleButton widget. I've noticed that when my extension is disabled in the about:addons menu, I see several 'TypeError: can't access dead object' message in toolbox console. These messages show up when I activate, and open tabs.

The following is the simple code from the example that will demonstrate this issue:

var ui = require("sdk/ui");

var button = ui.ToggleButton({
    id: "my-button",
    label: "my button",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onClick: handleClick
});

function handleClick(state) {
  require("sdk/tabs").open("https://www.mozilla.org/");
}

exports.onUnload = function (reason) {
    console.log("onUnload", reason);
    button.destroy();   
}

Do I need to do something differently (other than destroy) in the onUnload function?

Answer 1

exports.onUnload is rather problematic, i.e. there are a lot of bugs and a lot of things where it doesn't work correctly. Avoid it if possible (at least for now).

Fortunately, you don't actually need to destroy the button on unload: The SDK will do that automatically for you. The .destroy() instance method is meant for code that needs to destroy a button long before the add-on is unloaded (e.g. a "login" button that gets destroyed once the user logs in).

In your particular example, a ToggleButton is the wrong choice. Such a button is meant for things that are basically a checkbox (have two states, e.g. on and off).

Instead an ActionButton might be better suited, seeing that a click actually performs a certain action (opens some site in a new tab).

Edit: Turns out this is a bug in the SDK, that apparently got fixed already as it is not present. In the current Firefox 31 release it is still present, however, and can be triggered with as little code as:

var ui = require("sdk/ui");

var button = ui.ActionButton({
    id: "my-button",
    label: "my button",
    icon: "./icon-16.png"
});

Since it is an SDK bug and does not really impact you while running your add-on, you should just ignore it for now and in future Firefox versions it isn't a problem anymore.