Need help modifying Firefox custombutton javascript

David the H. · 08-21-2010, 11:14 AM

I've been using this custombuttons2 button in Firefox for a while now. It functions by popping up the contents of a hidden toolbar whenever the button is pressed. It's great for keeping less-commonly-used buttons at hand without taking up a ton of toolbar space. However it seems to me that it would be even better if the toolbar dropped down vertically, allowing for smoother and faster mouse access than with the current horizontal pop-up.

I've been playing around and so far I've gotten it to almost work by inserting popupToolbar.setAttribute("orient", "vertical"); into the first if statement near the beginning. This makes it drop down the way I want it to, but only by applying the vertical orientation globally. That is, if the visibility of the toolbar itself is toggled, such as when I open up the toolbar customize dialog, I get a fat toolbar with vertically-aligned buttons. Not good.

What I need, I guess, is for it to apply the vertical alignment only when the button is active, and to remove it again when it closes. but I don't understand javascript well enough to figure out where to modify it. I've tried inserting setAttribute and removeAttribute in various places with no success. Could someone help me out here?

I'm re-posting the button code here for convenience.

Code:

/*Initialization code*/
 
var popupToolbarName = "";
var popupToolbarId = "";
var popupId = "";
var contextPopupId = "popuptoolbar-contextpopup";
 
this.type = "menu";
this._init = function() {
  popupToolbarName = this.label;
  popupToolbarId = "__customToolbar_" + popupToolbarName.replace(" ", "_");
  popupId = popupToolbarName.replace(" ", "").toLowerCase() + "-" + this.type + "popup";
 
  var popupToolbar = document.getElementById(popupToolbarId);
  if (popupToolbar) {
    popupToolbar.setAttribute("collapsed", "true");
    document.persist(popupToolbarId, "collapsed");
  }
 
  var popup = document.getElementById(popupId);
  if (popup) {
    popup.hidePopup();
    popup.parentNode.removeChild(popup);
  }
 
  popup = document.getElementById("mainPopupSet").appendChild(document.createElement("menupopup"));
  popup.setAttribute("id", popupId);
  popup.setAttribute("position", "after_start");
 
  if (this.type == "menu") {
    while (this.firstChild && this.firstChild.localName == "menupopup") {
      this.firstChild.hidePopup();
      this.removeChild(this.firstChild);
    }
    this.appendChild(popup);
    popup.setAttribute("onpopupshowing", 'this.parentNode.setPopup(event);');
  }
  else {
    popup.setAttribute("onpopupshowing", 'document.popupNode.setPopup(event);');
  }
 
  popup.setAttribute("onpopupshown", '{\
    window.addEventListener("popuphidden", function(e) {\
      var popup = document.getElementById(popupId);\
      if (e.target == popup) {\
        window.removeEventListener("popuphidden", arguments.callee, false);\
        return;\
      }\
      var popupNode = document.popupNode;\
      while (popupNode && popupNode != popup) popupNode = popupNode.parentNode;\
      if (popupNode == popup) popup.hidePopup();\
    }, false);\
  }'.replace("popupId", '"' + popupId + '"'));
 
  popup.setAttribute("onpopuphidden", '{\
    var popup = event.target;\
    if (popup.firstChild && popup.firstChild.localName == "toolbar") {\
      var popupToolbar = popup.firstChild;\
      popupToolbar.removeAttribute("style");\
      popupToolbar.setAttribute("collapsed", "true");\
      document.persist(popupToolbar.id, "collapsed");\
      var navbox = document.getElementById("navigator-toolbox");\
      var nextElement = navbox.firstChild;\
      while (nextElement && nextElement.localName != "toolbarset") {\
        if (Number(nextElement.getAttribute("customindex")) > Number(popupToolbar.getAttribute("customindex")))\
          break;\
        nextElement = nextElement.nextSibling;\
      }\
      navbox.insertBefore(popupToolbar, nextElement);\
      popupToolbar.firstPermanentChild = null;\
      popupToolbar.lastPermanentChild = null;\
      popupToolbar.currentSet = popupToolbar.getAttribute("currentset");\
    }\
    while (popup.lastChild && popup.lastChild.localName == "menuitem")\
      popup.removeChild(popup.lastChild);\
  }');
 
  var contextPopup = document.getElementById(contextPopupId);
  if (contextPopup) {
    contextPopup.hidePopup();
    contextPopup.parentNode.removeChild(contextPopup);
  }
 
  contextPopup = document.getElementById("mainPopupSet").appendChild(document.createElement("menupopup"));
  contextPopup.setAttribute("id", contextPopupId);
  contextPopup.setAttribute("position", "at_pointer");
  contextPopup.setAttribute("onpopupshowing", 'document.popupNode.setContextPopup(event);');
 
  var menuitem = document.createElement("menuitem");
  menuitem.setAttribute("label", "Show Context Menu With Toolbar");
  menuitem.setAttribute("type", "checkbox");
  menuitem.setAttribute("checked", this.getBoolPref('showContextWithToolbar'));
  menuitem.setAttribute("oncommand", "document.popupNode.setBoolPref('showContextWithToolbar', this.getAttribute('checked') == 'true');");
  contextPopup.appendChild(menuitem);
  contextPopup.appendChild(document.createElement("menuseparator"));
 
  this.tooltipText = this.label;
}
 
this.setBoolPref = function(name, value) {
  var prefs = Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
  prefs.setBoolPref("custombuttons.popuptoolbar." + name, value);
}
 
this.getBoolPref = function(name) {
  var prefs = Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
  return prefs.getPrefType("custombuttons.popuptoolbar." + name)
        && prefs.getBoolPref("custombuttons.popuptoolbar." + name);
}
 
this.setPopup = function(event) {
  if (this.getBoolPref('showContextWithToolbar')) {
    document.popupNode = this;
    this.setContextPopup(event);
  }
 
  var popup = event.target;
  var popupToolbar = document.getElementById(popupToolbarId);
  if (popupToolbar && popupToolbar.parentNode != popup && this.parentNode != popupToolbar) {
    popup.insertBefore(popupToolbar, popup.firstChild);
    popupToolbar.setAttribute("collapsed", "false");
    if (!this.getBoolPref('showContextWithToolbar'))
      popupToolbar.setAttribute("style", "border: none !important;");
  }
 
  if (!popup.firstChild) {
    document.popupNode = this;
    this.setContextPopup(event);
  }
}
 
this.setContextPopup = function(event) {
  var contextPopup = event.target;
  while (contextPopup.lastChild && contextPopup.lastChild.localName == "menuitem")
    contextPopup.removeChild(contextPopup.lastChild);
 
  var toolbars = document.getElementById("navigator-toolbox").getElementsByTagName("toolbar");
  for (var i=0; i<toolbars.length; i++) {
    var toolbarname = toolbars[i].getAttribute("toolbarname");
    var toolbarid = toolbars[i].getAttribute("id");
    var menuitem = contextPopup.appendChild(document.createElement("menuitem"));
    menuitem.setAttribute("label", toolbarname);
    menuitem.setAttribute("type", "radio");
    menuitem.setAttribute("name", "toolbars-radio");
    menuitem.setAttribute("checked", (this.label == toolbarname));
    menuitem.setAttribute("disabled", ("__customToolbar_" + toolbarname.replace(" ", "_") != toolbarid) || (this.parentNode == toolbars[i]));
    menuitem.setAttribute("oncommand", "document.popupNode.setToolbar(this.label.toString());");
  }
}
 
this.setToolbar = function(toolbarname) {
  var toolbar = document.getElementById("__customToolbar_" + toolbarname.replace(" ", "_"));
  if (toolbar && toolbar != this.parentNode) {
    this.label = toolbarname;
    if (toolbar.firstChild && toolbar.firstChild.image)
      this.image = toolbar.firstChild.image;
 
    this._init();
  }
}
 
var that = this;
this.hideDropMarker = function() {
  var dropMarker = document.getAnonymousElementByAttribute(that, "class", "toolbarbutton-menu-dropmarker");
  if (dropMarker) {
    dropMarker.setAttribute("hidden", "true");
  } else {
    setTimeout(that.hideDropMarker, 10);
  }
}
 
this.showPopup = function(event) {
  document.popupNode = this;
  document.getElementById(popupId).showPopup(this, -1, -1, "popup", "bottomleft", "topleft");
}
 
this.showContextPopup = function(event) {
  document.popupNode = this;
  document.getElementById(contextPopupId).showPopup(this, event.screenX, event.screenY, "context", "none", "none");
}
 
this.leftclick = this.showPopup;
this.rightclick = this.showContextPopup;
 
if (this.type == "menu") {
  this.leftclick = this.hideDropMarker;
  this.hideDropMarker();
}
 
this._init();
 
this.setAttribute('onclick', 'if (event.target == event.currentTarget) gQuot(event, this);');
 
this.setAttribute('author','ithinc');
this.setAttribute('version','20080322.05');
this.setAttribute('homepage', 'http://custombuttons2.com/forum/buttons/buttons-database/popup-toolbar.html');
this.setAttribute('dependency','FF2.0*, CB2 2.0.5*');
this.setAttribute('status','Development');
this.setAttribute('public',true);