Detect double click in firefox extension button

Question

I need to detect a double click on the button of my extension and open a different website and I need that website to be opened in the current tab.

index.js:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("http://www.mozilla.org/");
}

Answer 1

I have a similar requirement in one of my extensions. Here's the code I use to determine if the button click is a single or a double:

    var clickCnt = 0;   // Click counter
    var delay = 250;    // Maximum time (milliseconds) between clicks to be considered a double-click
    var timer;
    chrome.browserAction.onClicked.addListener(function(tab){
        clickCnt++; 
        if(clickCnt > 1){
            // Double-click detected
            chrome.tabs.executeScript({
                code:   '// Code to execute on double-click'
            });
            clickCnt = 0;
            clearTimeout(timer)
        }else{
            timer = setTimeout(function(){  
                // No clicked detected within (delay)ms, so consider this a single click 
                chrome.tabs.executeScript({
                    code:   '// Code to execute on single-click'
                });
                clickCnt = 0;
            }, delay);
        }
        return true;
    });

Answer 2

The ActionButton does not have an onDoubleClick handler per se. So, you need to make some tricks to achieve the functionality you want.

You can specify a handler for the first click and in this handler, you remove itself and define a new one for the double click as the following code shows.

index.js:

var tabs = require("sdk/tabs");
var { ActionButton } = require("sdk/ui/button/action");
var { setTimeout } = require("sdk/timers");

var button = ActionButton({
    id: "my-button",
    label: "my button",
    icon: {
      "16": "./icon-16.png",
      "32": "./icon-32.png",
      "64": "./icon-64.png"
    },
    onClick: firstClick
  });

function firstClick(state) {
  button.removeListener("click", firstClick);
  button.on("click", subsequentClicks);
  tabs.activeTab.url = "http://www.mozilla.org/";
  tabs.activeTab.reload();
  setTimeout(function() { 
    console.log("remove double click after an interval");
    button.removeListener("click", subsequentClicks);
    button.on("click", firstClick);
  }, 1000);
}

function subsequentClicks(state) {
  button.removeListener("click", subsequentClicks);
  tabs.activeTab.url = "http://www.google.com/";
  tabs.activeTab.reload();
}

One other trick is that inside the firstClick handler a setTimeout function is defined to restore the things in the initial state of first click after an interval of 1 second.

In order to be sure for the functionality when subsequentClicks is executed, it will revomes itself as a listener.

As mentioned in the comments the problem with this is that when double clicking it first loads mozilla.org and then google.com