How to change the label of widget(Firefox Add-on SDK)

Question

I want to change the label of a widget when user click it, then I write the code looks like this:

var widgets = require("sdk/widget");
var statusBar = widgets.Widget({
    id: "patchouliStatus",
    label: "Wait Page Loading...",
    contentURL: "http://www.mozilla.org/favicon.ico",
    onClick: function(){
        this.contentURL = "http://www.google.com/favicon.ico";
        this.label = "Clicked";
    }
});

When I click the widget, the icon has changed, but nothing happen to the label.I move the mouse to the widget and it still show "Wait Page Loading...".Is there a way to dynamically change the label?

Firefox: v27.0.1

Add-on SDK: v1.15

Answer 1

Widget's label is read-only. You must use tooltip attribute to show the user a text on mouse hover, this way:

var widgets = require("sdk/widget");
var statusBar = widgets.Widget({
    id: "patchouliStatus",
    label: "Wait Page Loading...",
    contentURL: "http://www.mozilla.org/favicon.ico",
    onClick: function(){
        this.contentURL = "http://www.google.com/favicon.ico";
        this.tooltip = "Clicked";
    }
});

As docs says somewhere in this section -I think it could be more clearly documented-, tooltip value is an "optional text to show when the user's mouse hovers over the widget. If not given, the label is used". Also, examples in that section don't make it clear enough as I think they should.

Answer 2

Ok man thanks for the XPI, change changeLabel function to this, my above was really bugged.

function changeLabel(str){
    var DOMWindows = Services.wm.getEnumerator('navigator:browser');
    while (DOMWindows.hasMoreElements()) {
        var aDOMWindow = DOMWindows.getNext();
        var myWidget = aDOMWindow.document.getElementById('widget:jid1-njALX8gXKY872g@jetpack-patchouliStatus');
        if (myWidget) {
            Services.appShell.hiddenDOMWindow.console.info('myWidget:', myWidget);
            myWidget.setAttribute('label', str);
            myWidget.setAttribute('tooltiptext', 'tooltip changed');
        } else {
            Services.appShell.hiddenDOMWindow.console.info('myWidget null:', myWidget);
        }
    }
}

It also seems that the id of your widget starts with tyour addon id name.

Now I gave you the enumerator function because that goes over all windows and you can add event listener. But really if you just want to target the one that was clicked just get the most recent window, as that will obviously hold the correct window with your widget as we just clicked there and the event listener fires on click.

Change changeLabel to this:

function changeLabel(str){
    var aDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
    var myWidget = aDOMWindow.document.getElementById('widget:jid1-njALX8gXKY872g@jetpack-patchouliStatus');
    if (myWidget) {
        Services.appShell.hiddenDOMWindow.console.info('myWidget:', myWidget);
        myWidget.setAttribute('label', str);
        myWidget.setAttribute('tooltiptext', 'tooltip changed');
    } else {
        Services.appShell.hiddenDOMWindow.console.info('myWidget null:', myWidget);
    }
}

Also that Services.appShell.hiddenDOMWindow.console.info is just something nice to debug, I left it in there so you can see how it works. It logs to "Browser Console" (Ctrl+Shift+J).

As a final note I used a non-sdk solution by requiring chrome. they advise you not to do that because they want you to use the SDK functions I don't know about SDK but you can use the getEnumerator and recentWindow function by requiring window/utils it looks like:

Read window/utils article here

Answer 3

I'll give you non-sdk solution here but someone will have to help convert it to sdk solution. You can paste this in your code it will work though.

Im not sure how the element is inserted into the dom but I guessed.

var {Cu, Ci} = require('chrome'); //if you want to paste this into scratchpad with with Environemnt set to Browser than dont need this line, this line is for sdk
var DOMWindows = Services.wm.getWindowEnumerator(null);
while (DOMWindows.hasMoreElements()) {
var aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
  var myWidget = aDOMWindow.querySelector('#patchouliStatus'); //im not exactly sure how the element is inserted in the dom but im guessing here
  if (myWidget) {
    myWidget.label = 'rawr';
  }
}