How to add stylesheet to toolbar

Question

Using the Firefox Addon SDK, I am creating a toolbar with several buttons and I want to create a mouseover effect for the buttons.

At first I thought to use a mouseover event, but then I would have to create a mouseout event to return it to normal, so I figured the best way would be to use css

In my old XUL version of my addon I was able to attach the stylesheet by linking to it in the XUL code and just add css for my #buttonID, which worked perfectly.

But how do I add the css stylesheet for my toolbar using the Addon SDK?

Here's what I've tried so far (which does not produce any errors), but I think this is just for content; if this is correct, then I'm not sure how to bind to the element:

const { browserWindows } = require("sdk/windows");
const { loadSheet } = require("sdk/stylesheet/utils");


//This is how to load an external stylesheet
for(let w of browserWindows){
    loadSheet(viewFor(w), "./myStyleSheet.css","author"  );
}

I've also tried this:

var Style = require("sdk/stylesheet/style").Style;
let myStyle = Style({source:'./myStyleSheet.css'});
for(let w of browserWindows){ 
    attachTo(myStyle, viewFor(w))
};

And this:

var { attach, detach } = require('sdk/content/mod');
const { browserWindows } = require("sdk/windows");
var { Style } = require('sdk/stylesheet/style');

var stylesheet = Style({
  uri: self.data.url('myStyleSheet.css')
});

for(let w of browserWindows){ 
    attach(stylesheet, viewFor(w))
};

And here is my css:

#myButton:hover{list-style-image(url("./icon-16b.png")!important; }

Answer 1

This goes in the javascript file:

const { browserWindows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { loadSheet } = require("sdk/stylesheet/utils");
const { ActionButton } = require("sdk/ui/button/action");
var StyleUtils = require('sdk/stylesheet/utils');

var myButton = ActionButton({
    id: "mybutton",
    label: "My Button",
    icon: { "16": "./icon-16.png", "32":"./icon-32.png", "64": "./icon-64.png" },
    onClick: function(state) {
        console.log("mybutton '" + state.label + "' was clicked");
    }  
});

//this is how you attach the stylesheet to the browser window
function styleWindow(aWindow) {
    let domWin = viewFor(aWindow);
    StyleUtils.loadSheet(domWin, "chrome://myaddonname/content/myCSSfile.css", "agent");  
}
windows.on("open", function(aWindow) {
  styleWindow(aWindow);
});
styleWindow(windows.activeWindow);

And here is the css for that

//don't forget to add the .toolbarbutton-icon class at the end
#action-button--mystrippedadonid-mybuttonid .toolbarbutton-icon,{ 
    background-color: green;
}

There are several gotchas here.

• First, as of this posting, you should not use capital letters in the id for the button because they get completely removed - only lowercase letters and hyphens are allowed.
• The id of the element is not the same as the id you gave it in the button declaration. See below for how to come up with this identifier.
• To specify content in the url for the stylesheet file (in the loadSheet function call) you will also need to create a chrome.manifest in the root of your addon folder, and put this in it: content spadmintoolbar data/ where "data" is the name of a real directory in the root folder. I needed a data/ folder so I could load icons for the button declarations, but you need to declare your virtual directories in chrome.manifest which jpm init does not do for you.

How to get the element id for your css file:

The easy way to get the id for your button element for use in an external style sheet is by testing your addon and then using the browser-toolbox's inspector to locate the element, whence you can fetch the id from the outputted code.

However, if you want to figure it yourself, try this formula.

• [button-class] = the sdk class for the button. An Action Button becomes action-button
• [mybuttonid] = the id you gave the button in the sdk button declaration
• [myaddonname] = the name you gave the addon in it's package.json file.
• [strippedaddonid] = take the id you assigned the addon in the package.json file, and remove any @ symbol or dots and change it to all lowercase.

Now put it all together (don't include the square brackets):

`#[button-class]--[strippedaddonid]-[mybuttonid]]`

An example: action-button--myaddonsomewherecom-mybutton

Really simple isn't it?!

credit for the stylesheet attach code goes to mconley

Answer 2

using this code, you should be able to use the mouse over or hover to change how it looks.

#buttonID {
  //Normal state css here
}
#buttonID:hover {
  //insert css stuff here
}

Answer 3

Tested this in Browser Toolbox:

const { require } = Cu.import("resource://gre/modules/commonjs/toolkit/require.js"); // skip this in SDK
const { browserWindows: windows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { attachTo } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
let style = Style({ source: "#my-button{ display: none!important; }" });
// let self = require("sdk/self");
// let style = Style({ uri: self.data.url("style.css") });

for (let w of windows)
    attachTo(style, viewFor(w));

The commented part allows to load from a stylesheet file in the addon data directory.

Notice that you need to import SDK loader to use it in the toolbox. When in an SDK addon, just use require directly.

NB: there is a difference in spelling: self.data.url vs { uri }

See self/data documentation.

NB2: SDK uses a custom widget ID scheme for toggle and action buttons so your button ID might not be what you expect:

const toWidgetId = id => 
    ('toggle-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');

OR

const toWidgetId = id =>
    ('action-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');