Jason Barnabe

There used to be a bug in Gecko where calling removeChild on a node with an event listener attached makes the node lose the event listener. This bug is present in Firefox 2.0, but won’t be in Firefox 3.0. One unexpected result of this bug is that if the user customizes their toolbar, all event listeners on all the toolbar and menu items will be lost, even if the user didn’t do anything to them. The simplest way to get around this is to set the onwhatever attribute on the elements rather than attaching event listeners. This is what the Firefox UI does. However, there are special challenges we face coding from extensions. We’ll often want to not only add new items, but modify the behaviour of existing items that likely already have onwhatever attributes. We could do something like

element.setAttribute("oncommand", element.getAttribute("oncommand") + ";myExtension.foo()");

but that’s terribly ugly and is prone to break if the existing oncommand throws an error or something else changes it.

The best way I can think of to deal with this situation is to have a different event set the event listener. For example, Stylish puts additional items in the View -> Page Style menu. I want to run a function when the Page Style menu opens to create these additional items. I can’t do it with an event listener on Page Style, because that gets wiped when the toolbar’s customized. Page Style’s menupopup already has an onpopupshowing attribute. So what I could do is add onpopupshowing and onpopuphiding attributes to the View menupopup that add and remove my event listener on the Page Style menupopup.

var stylishBrowserOverlay = {
  (...)

  init: function() {
    (...)
    var viewMenuPopup = document.getElementById("view-menu").firstChild;
    viewMenu.setAttribute("popupshowing", "stylishBrowserOverlay.addPageStyleListener()");
    viewMenu.setAttribute("popuphiding", "stylishBrowserOverlay.addPageStyleListener()");
    (...)
  },

  (...)

  addPageStyleListener: function() {
    document.getElementById("pageStyleMenu").addEventListener("popupshowing", stylishBrowserOverlay.showPageStyleMenu, false);
  },

  removePageStyleListener: function() {
    document.getElementById("pageStyleMenu").removeEventListener("popupshowing", stylishBrowserOverlay.showPageStyleMenu, false);
  },

  (...)
}

In reality, I just let the bug exist. Customizing the toolbar doesn’t happen very often and doesn’t warrant a hackish solution like this for such minor functionality.

This entry was posted Wednesday, July 18th, 2007 at 8:32 am and is filed under Extension Development. You can leave a response, or trackback from your own site.