FireFox Toolbar Prefwindow unload/acceptdialog Event to Update the toolbar

Question

I'm trying to develop a firefox toolbar ;)

so my structure is

In the options.xul is an PrefWindow which i'm opening over an

  <toolbarbutton oncommand="esbTb_OpenPreferences()"/>
    function esbTb_OpenPreferences() {
 window.openDialog("chrome://Toolbar/content/options.xul", "einstellungen", "chrome,titlebar,toolbar,centerscreen,modal", this);}

so in my preferences i can set some checkboxes which indicates what links are presented in my toolbar. So when the preferences window is Closed or the "Ok" button is hitted I want to raise an event or an function which updates via DOM my toolbar.

So this is the function which is called when the toolbar is loaded. It sets the links visibility of the toolbar.

 function esbTB_LoadMenue() {
  var MenuItemNews = document.getElementById("esbTb_rss_reader");
  var MenuItemEservice = document.getElementById("esbTb_estv");

  if (!(prefManager.getBoolPref("extensions.esbtoolbar.ShowNews"))) {
    MenuItemNews.style.display = 'none';
  }

  if (!(prefManager.getBoolPref("extensions.esbtoolbar.ShowEservice"))) {
    MenuItemEservice.style.display = 'none';
  }
}

So I tried some thinks like adding an eventlistener to the dialog which doesn't work... in the way I tried... And i also tried to hand over the window object from the root window( the toolbar) as an argument of the opendialog function changed the function to this.

    function esbTB_LoadMenue(RootWindow) {
  var MenuItemNews = RootWindow.getElementById("esbTb_rss_reader");
  var MenuItemEservice = RootWindow.getElementById("esbTb_estv");}

And then tried to Access the elements over the handover object, but this also not changed my toolbar at runtime.

So what i'm trying to do is to change the visibile links in my toolbar during the runtime and I don't get it how I should do that...

thanks in advance

-------edit-------

    var prefManager = {
    prefs: null,

    start: function()
    {

        this.prefs = Components.classes["@mozilla.org/preferences-service;1"]
                .getService(Components.interfaces.nsIPrefService)
                .getBranch("extensions.esbtoolbar.");
        this.prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
        this.prefs.addObserver("", this, false);

    },


    end: function()
    {
        this.prefs.removeObserver("", this);
    },


    observe: function(subject, topic, data)
    {
        if (topic != "nsPref:changed")
        {
            return;
        }
        //Stuff what is done when Prefs have changed
        esbTB_LoadMenue();

    },

    SetBoolPref: function(pref,value)
    {
        this.prefs.setBoolPref(pref,value);
    },

    GetBoolPref: function(pref)
    {
        this.prefs.getBoolPref(pref);
    }
}

So this is my implementation.

Answer 1

The trick is to listen to preference changes. That way your toolbar updates whenever the prefs change -- regardless if it happened through your PrefWindow, about:config or some other mechanism.

In Toolbar.js you do the following

var esbTB_observe = function(subject, topic, data) {
   if (topic != "nsPref:changed") {
     return;
   }

   // find out which pref changed and do stuff
}

var esbTB_init = function() {
  prefs =
    Components.classes["@mozilla.org/preferences-service;1"]
              .getService(Components.interfaces.nsIPrefService)
              .getBranch("extensions.esbtoolbar.");
  prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
  prefs.addObserver("", esbTB_observe, false);
}

// Init addin after window loaded
window.addEventListener("load", esbTB_init, false);

Now, when the window loads, the esbTB_init() function is called in which the observer to the pref branch "extensions.esbtoolbar." is added. Later, when a pref in the branch is changed, the esbTB_observe() function is automatically called.

In esbTB_observe() you have to read the values of your prefs and adjust the toolbar.