Firefox Addon SDK onMouseover Event for a Button

0
votes

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.

The old XUL overlay allowed for onMouseOver events for buttons. But the new addon SDK only has the one listener for click.

How can I get an onMouseOver (Hover) event for a toolbar button?

Maybe there is some way to add css (:hover) to the button element?

I found this, and am working on getting it in order, but maybe there's a better way?

Here is what I have so far:

var {Cu, Cc, Ci} = require("chrome");
Cu.import('resource://gre/modules/Services.jsm');

 var aDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
 aDOMWindow.addEventListener('mouseover', onSpatMouseover, true);

 function onMyMouseover(event){
    if (event.target.nodeName == 'toolbarbutton'){
        console.log(event.explicitOriginalTarget.nodeName);
        if(event.currentTarget.nodeName == '#MyButton'){
             console.log("found the button");
        }
    }
 }

But it does not yet find #MyButton.

2
firefox-addonfirefox-addon-sdkxul
This is coded to be much more resource intensive than you should strive for when coding a UI. It resisters to be called on every single mouseover event in the entire window instead of just the mouseover events for the single UI element in which you are interested. While this might be easier for you to code, it is often choices to do things like this (by multiple people, and/or multiple ways) which cause a user interface to become clunky and unresponsive. Events should be set to call your code the minimum number of times needed and do the minimum necessary for functionality/responsiveness. – Makyen
Yeah, I'm quite aware of that. I don't want to use this code; it's just all I came up with so far, that's why I have a question. I put this up so folks would know I've actually tried something. – bgmCoder

2 Answers

0
votes

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.

0
votes

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 );    
}