Overlay browser preferences from firefox extension

Question

I'm trying to add a overlay to the preferences of the browser from my extension without success. Nothing is displayed when my plugin is installed. Other xul files show correctly (for example a preferences dialog of the plugin. I tried to adapt this tutorial to my needs.

I register the overlay in chrome.manifest:

content smime chrome/content/
overlay chrome://browser/content/preferences/preferences.xul chrome://smime/content/preferences.xul

The preferences.xul:

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<!-- Merge with the BrowserPreferences Window -->
<prefwindow id="BrowserPreferences">

  <!-- Create a new pane (tab) for HP Scheduler. -->
  <prefpane id="hpschedPane" label="&prefpane.label;"
            image="chrome://smime/content/sogo-48.png">

    <!-- Intermediary between GUI and preferences system -->
    <preferences>
    <preference id="sodgeItSmimeKeyfile" name="extensions.sodgeItSmime.keyfile" type="text"/>

    </preferences>
    <!-- GUI Elements... -->
    <groupbox>
        <caption label="Settings"/>
        <grid>
            <columns>
                <column flex="4"/>

                <column flex="1"/>
            </columns>
            <rows>
                <row>
                    <label control="keyfile" value="Keyfile"/>
                    <textbox id="keyfile" preference="sodgeItSmimeKeyfile"/>

                </row>
            </rows>
        </grid>
    </groupbox>
    </prefpane>
</prefwindow>
</overlay>

This is what I want to do - add a tab in the Firefox settings dialog.

enter image description here

Edit: added image to describe what I'm trying to do

Is this the one?? [url=postimage.org/image/l7jopntxz/][img]http://s15.postimage.org/… — linguini
edited the question and added a image with what I want to do. — David Feurle

Matthew Gertner Matthew Gertner · Accepted Answer · 2012-11-12T14:07:24

It's trickier to get this to work than it should be. You might try the following approach, which we use in our FireTorrent extension:

Overlay the Firefox preference window as shown:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://firetorrent/skin/firetorrent-prefs.css" type="text/css"?>

<overlay id="FiretorrentPaneOverlay"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <prefwindow id="BrowserPreferences">
        <prefpane id="paneFiretorrent" label="FireTorrent"
            src="chrome://firetorrent/content/optionsOverlay.xul"/>
    </prefwindow>
</overlay>

Add the following to your CSS file (firetorrent-prefs.css in the example):

#BrowserPreferences radio[pane="paneFiretorrent"] {
  list-style-image: url("chrome://firetorrent/skin/firetorrent-icon-32.png");
}

Contents of optionsOverlay.xul as follows:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<?xml-stylesheet href="chrome://global/skin/preferences.css" type="text/css"?>
<?xml-stylesheet href="chrome://firetorrent/skin/options.css" type="text/css"?>

<!DOCTYPE overlay SYSTEM "chrome://firetorrent/locale/optionsOverlay.dtd">

<overlay id="firetorrentOptionsOverlay"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <prefpane id="paneFiretorrent" onpaneload="loadOptions();" flex="1">

        <preferences>
            <preference id="firetorrent.options.port" name="extensions.firetorrent.port" type="int"/>
            ...etc...
        </preferences>

        <script type="application/x-javascript" src="chrome://firetorrent/content/optionsOverlay.js"/>

        ...all your prefpane XUL here...
    </prefpane>
</overlay>

It's been a long time since I wrote this, but I believe the important things to note are that the overlay for preferences.xul (point 1 in my example) references another XUL overlay that contains the actual prefpane (optionsOverlay.xul) and that you need to use the list-style-image style in CSS to specify the icon for your new tab.

Overlay browser preferences from firefox extension

1 Answers