Firefox Addon SDK onMouseover Event for a Button

Question

With the coming of multi-process Firefox, I have decided to revamp my addon. It is a toolbar addon that was built on XUL. Now I want to build it using the Addon SDK.

Answer 1

First of all, error message you're getting already tells you how to make it work.

But it's not necessarily what you need anyway, usually sdk/view/core provides access to the underlying XUL elements through one of its 3 methods.

Answer 2

Here is a complete example of how to do this. There are two functions, actually, one for mouseover and one for mouseout. If you change the icon of a button using mouseover, you need mouseout to change it back to normal.

const { browserWindows } = require("sdk/windows");
const { CustomizableUI } = require('resource:///modules/CustomizableUI.jsm');
const { viewFor } = require("sdk/view/core");
const { ActionButton } = require("sdk/ui/button/action");

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("My Button was clicked");
    }  
});


//create a mouseover effect for a control
exports.MouseOver = (whatbutton, whatwindow, whatfunction) =>{
    CustomizableUI.getWidget( viewFor(whatbutton).id ).forWindow(whatwindow).node.addEventListener('mouseover', whatfunction, true);
};
exports.MouseOut = (whatbutton, whatwindow, whatfunction) =>{
    CustomizableUI.getWidget( viewFor(whatbutton).id ).forWindow(whatwindow).node.addEventListener('mouseout', whatfunction, true);
};    


function myMouseOverFunction(){
  console.log("mousing over...");
}
function myMouseOutFunction(){
  console.log("mousing out...");
}



//add events to the browser window
for(let w of browserWindows){
    exports.MouseOver(mybutton, viewFor(w), myMouseOverFunction);   
    exports.MouseOut(mybutton, viewFor(w), onMouseOutFunction );    
}