How do you open the preference pane for a Firefox AddOn via Toolbar Button XUL?

Question

The Preference Pane for my FireFox AddOn is an XUL document (XML User Interface Language). The file is called options.xul.

In browser.xul, I have created a toolbar with a button for Options. When the Options button is clicked, it should bring up the Preference Pane defined by the options.xul. But I do not know how to call the Preference Pane from oncommand.

Calling a Javascript function is straight forward. But how does one call the AddOn's Preference Pane? Below is an oncommand calling a javascript function but how does one call the Preferene Pane?

If someone could please post the alteration to the following in browser.xul:

    <menupopup>
    <menuitem label="Options" tooltiptext="Options" oncommand="example.LoadURL('http://www.google.com/')" />
    </menupopup>

Answer 1

You can not open a pane as such. A preference pane is a part of a preference window. Your option.xul should look at least something like this

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <prefpane id="myOptions" label="My Options">
        <preferences>
            <preference id="pref-option1" name="myapp.myoption1" type="bool"/>
            <preference id="pref-option2" name="myapp.myoption2" type="int"/>
        </preferences>
        <checkbox label="Option Checkbox" preference="pref-option1"/>
        <textbox label="Duration:" preference="pref-option2"/>
    </prefpane>
</prefwindow>

In the browser.xul your oncommand could open the preference window using :

oncommand = "window.openDialog('chrome://whatever_location/option.xul',' My Option Dialog','chrome,toolbar');"

(or whatever method in your javascript that you would like to do the openDialog)

Additional information about prefwindows and panes can be found on

https://developer.mozilla.org/en/XUL/prefwindow or

https://developer.mozilla.org/en/XUL/prefpane

Answer 2

I assume that by "Preference Pane" you actually mean the Option Dialog window for your add-on, not just a single <prefpane> within the <prefwindow>. I also assume that you have an options.xul which is fully functional for use as a options dialog using the normal option button from the add-on tab.

I found that somewhat different options than tazyDevel shows above were needed to have the options dialog open so that it appears as if it was opened from the add-ons tab. I am not sure if this is a difference from 2012 to 2014 (when I wrote the code below), or if it is just an implementation difference. If I recall correctly, when I wrote this, I checked to see how Firefox was launching the options dialog windows and copied the options that were being used there.

I use the following code to open the options dialog for one of my add-ons from a button in the add-on's main dialog window (in addition to having it available through the add-ons tab):

XUL (the button that opens the options dialog):

<button label="Options" id="optionsButtonId"
        onclick="myExtension.optionsButton();"
        tooltiptext="Open the options window."
        hidden="false" />

JavaScript:

/**
 * The Options button.
 */
optionsButton : function() {
     window.openDialog('chrome://myExtension/content/options.xul', '',
                       'chrome,titlebar,toolbar,centerscreen,modal');
},

Depending on how your code is organized, you may need to manually apply some preferences and/or have preference observer(s) which propagate the changes to what needs to know about them.

myExtension is a placeholder for whatever you are using to call your extension. A single object variable containing functions is assumed, as is myExtension being what you use to identify your content in your chrome.manifest file.