Icons for CustomizableUI instances

Add-ons Add-on Support
#1

Hello. First time poster here.

I am trying to create an add-on using the new API. Here’s the problem I have encountered. I am looking at the basic example from CustomizableUI.jsm page, this one:

var myWidgetListener = {
onWidgetAdded: function(aWidgetId, aArea, aPosition) {
console.log(‘a widget moved to an area, arguments:’, arguments);
if (aWidgetId != ‘noida’) {
return
}
console.log(‘my widget moved’);

        var useIcon;
        if (aArea == CustomizableUI.AREA_PANEL) {
            useIcon = 'chrome://branding/content/icon32.png';
        } else {
            useIcon = 'chrome://branding/content/icon16.png';
        }
        
        var myInstances = CustomizableUI.getWidget('noida').instances;
        for (var i=0; i<myInstances.length; i++) {
            myInstances[i].node.setAttribute('image', useIcon);
        }

    },
    onWidgetDestroyed: function(aWidgetId) {
        console.log('a widget destroyed so removing listener, arguments:', arguments);
        if (aWidgetId != 'noida') {
            return
        }
        console.log('my widget destoryed');
        CustomizableUI.removeListener(myWidgetListener);
    }
}
CustomizableUI.addListener(myWidgetListener);
CustomizableUI.createWidget({
    id: 'noida',
    defaultArea: CustomizableUI.AREA_NAVBAR,
    label: 'My Widget',
    tooltiptext: 'This is my widget created with CUI.jsm'
});

However, there’s a problem with it - the icon will be added only on the first window, when the widget is added. If I open a new window, the “onWidgetAdded” event is not triggered any more and thus the button has no icon. As a workaround, I added a listener for “onWidgetAfterDOMChange” which would execute the same code as “onWidgetAdded” listener currently does. It does seem to get triggered when I open a new window, but it has its own problem - when I get to the part that looks for widget instances, it doesn’t always pick up a correct number of them. I sometimes get 1 instance for two windows, sometimes get 2. The only way for me to consistently pick up a number of instances equal to the number of open windows is if I do an instance lookup after a small timeout, say 10msec. It feels hacky to me.

Alternatively, I can create a custom type widget, but that also feels like an overkill just to make sure the icon is there in every window.

My question is, did I miss something in the docs or is it an oversight in the API code? Is there a cleaner solution to make sure that the icon is attached in every window?

Thanks!
Luka

#2

First, please note that the new API is WebExtensions, and not CustomizableUI. If you’re making a new add-on, I strongly suggest you try WebExtensions first.

I wrote a tutorial a while ago about CustomizableUI, here. I don’t know if that answers your question, but maybe give it a look.

#3

Your blog was very helpful. I ended up registering a css sheet, and that seemed to have propagated to all new windows, so I’m going with that for now.

Thanks!
Luka