Disabled Firefox Add-on ActionButton not grayed out

Question

When creating a Firefox Add-on ActionButton disabled, e.g.,

var button = new ActionButton({
  id: 'my-link',
  label: 'My label',
  icon: {
    '16': './icon-16.png',
    '32': './icon-32.png',
    '64': './icon-64.png'
  },
  onClick: handleClick,
  disabled: true
});

the button indeed isn't clickable and doesn't produce any events, but the icon does not appear grayed out as advertised in the documentation.

Any ideas as to why this might be?

Nice catch. This should be reported as a bug as on documentation it shows disabled icon has some opacity like 50%. — Noitidart, May 21 '15 at 22:36
It's reported now. https://bugzilla.mozilla.org/show_bug.cgi?id=1167559 — Nico Schlömer, May 22 '15 at 12:09
Thanks @Nico :) Until they fix it though, you can use the style registration i posted below — Noitidart, May 22 '15 at 19:29

Noitidart · Answer 1 · 2015-05-22T22:32:58.453

Try this, the id of my button was toggle-button--helloname-my-button1 where helloname is the name of my addon and my-button1 was the id i set. So the dom id was toggle-button--helloname-my-button1 you should update this to be toggle-button--YOUR_ADDON_NAME-my-link:

// globals
Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);

var cssUri;
var svgFilterUrl;
// end globals

if (Services.vc.compare(Services.appinfo.version, 34) < 0) {
    // for less then firefox v34
    if (!svgFilterUrl) {
        Cu.importGlobalProperties(['URL']);
        var oFileBody = '<svg xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><feColorMatrix type="saturate" values="0"/></filter></svg>';
        var {Blob} = Cu.import("resource://gre/modules/Services.jsm", {});
        var oBlob = Blob([oFileBody], {
            type: "text/xml"
        });
        svgFilterUrl = URL.createObjectURL(oBlob);
        console.log(url)
    }
    var css = '#toggle-button--helloname-my-button1[disabled] { filter: url(' + url + '#grayscale); }';
} else {
    // for less then firefox >= v34
    var css = '#toggle-button--helloname-my-button1[disabled] { filter:grayscale(1) }';
}
var newURIParam = {
    aURL: 'data:text/css,' + encodeURIComponent(css),
    aOriginCharset: null,
    aBaseURI: null
};
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.AUTHOR_SHEET);

and when you want to uninstall/disable your addon do sss.unregisterSheet(cssUri, sss.AUTHOR_SHEET);

Disabled Firefox Add-on ActionButton not grayed out

1 Answers1