Add menu from extension as a popup to a button

User support for problems with custom buttons

Add menu from extension as a popup to a button

Postby Barruel » Fri Mar 30, 2018 2:56 pm

Hi.

I have this button I've got from I don't know where. It reloads the page in different ways with left, middle, right and control+left clicks:

Reload, Reload skip cache, Reload missing elements & Reload all tabs all in one

Now I want it to have a dropdown to show the "reload tab every..." TMP popup menu, whose id, according to the Attribute inspector button, is "autoreload_popup".

I'm clueless about how to do it.
Barruel
 
Posts: 11
Joined: Sat May 24, 2014 6:44 pm

Re: Add menu from extension as a popup to a button

Postby Barruel » Wed Apr 04, 2018 7:25 pm

Ok. I got the menu and got it working fine.

This is the button: Reload, Reload skip cache, Reload missing elements & Reload all tabs all in one

I got it by doing this:

Code: Select all
  var autorldpp = document.getElementById("autoreload_popup");
  var autorldppc = autorldpp.cloneNode(true);
  this.appendChild(autorldppc);
  this.type = "menu-button";
  this.orient = "horizontal";


As the name implies, it does a simple reload on left click and a full reload skipping cache on middle click. On right click it runs "BrowserCharsetReload();", which apparently reloads only the parts of the page not completely loaded. Finally, on alt+right click, it reloads all pages.

Now I have 2 things missing.

First is that my button reloads the page (left click code) when I click on the menu dropdown. It shows the menu correctly, but also runs the code from left click. I tried all sorts of things I found out there, but haven't been able to make it just show the popup and nothing else.

Second is that the default CB context menu pops up when I right click the button. This is the code I'm using for the different mouse buttons:

Code: Select all
this.leftclick = function(event) {
BrowserReload();
}

this.midclick = function(event) {
BrowserReloadSkipCache();
}

this.rightclick = function(event) {
event.preventDefault();
event.stopPropagation();
BrowserCharsetReload();
}

this.aleftclick = function(event) {
gBrowser.reloadAllTabs();
}


And I'm using this code to capture the clicks:

Code: Select all
this.setAttribute('onclick', 'gQuot(event, this)'); // Calls the Global MouseClick handler gQuot


According to my findings on Google, "event.preventDefault();" and "event.stopPropagation();" should be preventing the context menu from popping up, bur for some reason they aren't doing it.

Can anyone help?
Last edited by Barruel on Wed Apr 04, 2018 9:57 pm, edited 1 time in total.
Barruel
 
Posts: 11
Joined: Sat May 24, 2014 6:44 pm

Re: Add menu from extension as a popup to a button

Postby Barruel » Wed Apr 04, 2018 8:11 pm

Barruel wrote:Second is that the default CB context menu pops up when I right click the button. This is the code I'm using for the different mouse buttons:

Code: Select all
this.leftclick = function(event) {
BrowserReload();
}

this.midclick = function(event) {
BrowserReloadSkipCache();
}

this.rightclick = function(event) {
event.preventDefault();
event.stopPropagation();
BrowserCharsetReload();
}

this.aleftclick = function(event) {
gBrowser.reloadAllTabs();
}


And I'm using this code to capture the clicks:

Code: Select all
this.setAttribute('onclick', 'gQuot(event, this)'); // Calls the Global MouseClick handler gQuot

According to my findings on Google, "event.preventDefault();" and "event.stopPropagation();" should be preventing the context menu from popping up, bur for some reason they aren't doing it.

I've got this fixed with some code I've borrowed from here.:

Code: Select all
this.addEventListener("auxclick", function(event) {
  if (event.button == 2 && event.shiftKey == false) {
    event.preventDefault();
  }
}, false);

I've also changed the click handler to:

Code: Select all
this.setAttribute("onclick", "custombuttons.gQuot.mHandler(event, this)");

Apparently, there is an additional auxclick event to handle in Firefox and Pale Moon (also in Waterfox I guess).

The only thing missing now is the dropmarker left click.

Updated button: Reload, Reload skip cache, Reload missing elements & Reload all tabs all in one
Barruel
 
Posts: 11
Joined: Sat May 24, 2014 6:44 pm

Re: Add menu from extension as a popup to a button

Postby Barruel » Thu Apr 05, 2018 6:07 am

Barruel wrote:First is that my button reloads the page (left click code) when I click on the menu dropdown. It shows the menu correctly, but also runs the code from left click. I tried all sorts of things I found out there, but haven't been able to make it just show the popup and nothing else.

Finally I've got this sorted out as well by checking whether the menu-button is open or closed:

Code: Select all
this.leftclick = function(event) {
   if (this.open) { event.preventDefault(); }
   else { BrowserReload();}
}

This is the final version of the button:

Code: Select all
/*Initialization code*/

this.type = "menu-button";
this.orient = "horizontal";
var autorldpp = document.getElementById("autoreload_popup");
var autorldppc = autorldpp.cloneNode(true);
this.appendChild(autorldppc);
this.setAttribute("onclick", "custombuttons.gQuot.mHandler(event, this)");
this.tooltipText = "Left click: Reload"+"\n"+"Middle click: Reload skip cache"+"\n"+"Right click: Reload missing elements"+"\n"+"Alt + Left click: Reload all tabs"+"\n"+"Menu: Tab Mix Plus \"Reload Tab Every...\" menu"

//Prevent context menu popping up on right click
this.addEventListener("auxclick", function(event) {
   if (event.button == 2 && event.shiftKey == false) {
   event.preventDefault();
//   event.stopPropagation();
//   event.stopImmediatePropagation();
   }
}, false);


this.leftclick = function(event) {
   if (this.open) { event.preventDefault(); }
   else { BrowserReload();}
}

this.midclick = function(event) {
   BrowserReloadSkipCache();
}

this.rightclick = function(event) {
   event.preventDefault();
   event.stopPropagation();
   BrowserCharsetReload();
}

this.aleftclick = function(event) {
   gBrowser.reloadAllTabs();
}

The button itself: Reload, Reload skip cache, Reload missing elements & Reload all tabs all in one

Cheers.
Barruel
 
Posts: 11
Joined: Sat May 24, 2014 6:44 pm


Return to Buttons

cron