Overlay browser preferences from firefox extension - firefox

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.
Edit: added image to describe what I'm trying to do

Answer 1

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.