Invalid Firefox Add-on ActionButton not dimmed
When building a Firefox add-on ActionButton
disabled
, for example
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 is not really clickable and does not generate any events, but the icon is not greyed out as stated in the documentation .
Any ideas as to why this might be?
source to share
Try this, my button id was toggle-button--helloname-my-button1
where helloname
is my addon name and my-button1
is i id. So the dom id was toggle-button--helloname-my-button1
, you have to update it like 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 if you want to uninstall / disable your addon, sss.unregisterSheet(cssUri, sss.AUTHOR_SHEET);
source to share