XULRunner tips

XULRunner Frequently Asked Questions. Work in progress.

Extension Manager

To be able to install any extensions, you first need to enable the Extension Manager in application.ini. XULRunner 1.8.0 does not load extensions from the application directory; only the XULRunner directory and the user profile directory are checked. However, it seems that with XULRunner 1.9 the XULRunner directory is ignored, while the profile and application directories are checked. The following prefs must also be set to make the XPInstall dialog, extension manager, and theme manager work:

pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallConfirm.xul");
pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?type=themes");
pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=extensions");
pref("xpinstall.dialog.progress.type.skin", "Extension:Manager-themes");
pref("xpinstall.dialog.progress.type.chrome", "Extension:Manager-extensions");
pref("extensions.update.enabled", true);
pref("extensions.update.interval", 86400);
pref("extensions.dss.enabled", false);
pref("extensions.dss.switchPending", false);
pref("extensions.ignoreMTimeChanges", false);
pref("extensions.logging.enabled", false);
pref("general.skins.selectedSkin", "classic/1.0");
// NB these point at AMO
pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties");
pref("extensions.getMoreExtensionsURL", "chrome://mozapps/locale/extensions/extensions.properties");
pref("extensions.getMoreThemesURL", "chrome://mozapps/locale/extensions/extensions.properties");

If your application is based on Gecko 2.0, you need to register a component through the new component registration because the extension manager uses FUEL, namely Application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list:

1. copy files fuelApplication.js and fuelApplication.manifest from browser/fuel/src for instance into your components/ directory
2. tweak the line #include ../../../toolkit/components/exthelper/extApplication.js in your copy of fuelApplication.js as needed
3. make sure to declare the FUEL module and the two files in your components/Makefile.in as in browser/fuel/src/Makefile.in
4. rebuild...

Useful Chrome URLs

Most of these require branding.

Developer Extensions

Venkman

• Need a custom build or a compatible extension
• Need to edit compatibility in
• Needs a method to start venkman (usually by overlaying the main XUL file, similar to existing code for Firefox, Suite, etc.)
• The function toOpenWindowByType() needs to be defined. There is a working stub. Any better suggestion?
• Venkman uses "chrome://communicator/skin/" as an alias for "chrome://global/skin/" and this alias was maintained in the XULRunner toolkit until XULRunner 1.9 was released. When using XULRunner 1.9 or greater, you can create your own alias
  • in your chrome manifest add a "skin" line:

    skin communicator classic/1.0 skin/communicator/

  • add a skin folder named "communicator" and add a single CSS file named "communicator.css" with this content:

    @import url("chrome://global/skin");

DOM Inspector

To add DOM Inspector 2.0.* to your XULRunner 1.9.0.* application follow these steps:

• Download the Dom Inspector (instead of clicking the "Add to..." button, right-click and select "Save Link As...").
• Save the dom_inspector-*.xpi package to a temporary directory
• Unzip the package
• Copy the following files:
  chrome/inspector.jar to the chrome directory of your XULRunner application
  components/inspector-cmdline.js to your components directory
  defaults/preferences/inspector.js to your preferences directory
• Open your chrome.manifest file and add these lines:

content  inspector                       jar:inspector.jar!/content/inspector/ xpcnativewrappers=no
locale   inspector           en-US       jar:inspector.jar!/locale/en-US/inspector/
skin     inspector           modern/1.0  jar:inspector.jar!/skin/modern/inspector/
skin     inspector           classic/1.0 jar:inspector.jar!/skin/classic/inspector/

overlay  chrome://inspector/content/popupOverlay.xul   chrome://inspector/content/viewers/dom/popupOverlay.xul
overlay  chrome://inspector/content/commandOverlay.xul chrome://inspector/content/viewers/styleRules/commandOverlay.xul
overlay  chrome://inspector/content/keysetOverlay.xul  chrome://inspector/content/viewers/dom/keysetOverlay.xul
overlay  chrome://inspector/content/popupOverlay.xul   chrome://inspector/content/viewers/styleRules/popupOverlay.xul
overlay  chrome://inspector/content/commandOverlay.xul chrome://inspector/content/viewers/dom/commandOverlay.xul

To launch DOM Inspector in your application, you need to open its main window, with a command like this:

window.open("chrome://inspector/content/inspector.xul", "", "chrome");

Alternatively, the DOM Inspector may also be added as an extension:

1. (if you already have inspector installed for another application you can skip to the next step)
   Follow the instructions above through "Unzip the package."
2. Create a file in the extensions directory of your application with the same name as the DOM Inspector ID ([email protected]) containing one line of text -- the exact path to the root directory of DOM inspector (where the install.rdf is) like this one:

   /home/username/.mozilla/firefox/numbersandletters/extensions/[email protected]/

3. Now create a javascript file with the following code and include it in the main window of your application:

   function startDOMi()
   {
     // Load the Window DataSource so that browser windows opened subsequent to DOM
     // Inspector show up in the DOM Inspector's window list.
     var windowDS = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"]
                                      .getService(Components.interfaces.nsIWindowDataSource);
     var tmpNameSpace = {};                         
     var sl = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
       .createInstance(Components.interfaces.mozIJSSubScriptLoader);
     sl.loadSubScript("chrome://inspector/content/hooks.js", tmpNameSpace);
     tmpNameSpace.inspectDOMDocument(document);
   }
   

4. Now create a hook in your application window to start DOM Inspector, like this one:

   <button label="Start Inpector" oncommand="startDOMi()"/>

5. Start your application and DOM Inspector will be installed.

Note: I use this method of installing extensions into all of my Mozilla applications. This way I have one directory where I keep all my Mozilla extensions, and each application (Firefox, Thunderbird) simply contains a few small, one line files pointing to the location of the extensions. (I keep them in source control to be sure I can maintain compatibility)

Component Viewer

Need custom build, first of all. What else?

Extension Developer's Extension

Extension Developer's Extension is a useful tool, featuring Live XUL Editor and JavaScript Shell. To install the extension into your application you'll need to hack its install.rdf (see above). You'll probably also want to create menuitems that let you open the JS Shell and other tools provided by the extension.

Branding

Branding is a chrome package containing product-specific information (e.g. the product name, vendor, and logo). Some XULRunner components (in particular, the Extension Manager) depend on branding, in the sense that they expect to find certain strings in chrome://branding/locale/brand.dtd and chrome://branding/locale/brand.properties. In order to satisfy these dependencies, you can save Firefox's brand.dtd/brand.properties to chrome/locale/branding folder, modify them appropriately, and register a locale provider for branding by adding the following line to your chrome manifest:

locale branding en-US chrome/locale/branding/

The location you put the branding files in doesn't matter, as long as you register it appropriately in the manifest. In addition, a branding content package must be registered to include the application logos:

content branding chrome/branding/

3 files should be provided in this folder: about.png, icon48.png and icon64.png. See Firefox for example.

Making Windows display correct application name and icon when buttons are grouped

By default, the task bar on Windows might group windows belonging to the same process into one button to save space. This button is usually called "xulrunner.exe" and has XULRunner's icon. There are two approaches to display the branding of your application instead:

• When compiling XULRunner yourself: create a file module.ver in the directory mozilla/xulrunner/app with the contents:

  WIN32_MODULE_DESCRIPTION=MyApplication

  MyApplication should be replaced by whatever you want to see as title of the button. You can also replace xulrunner.ico in the same directory to change XULRunner's icon to the icon of your application.

• With a precompiled XULRunner: use xulrunner-stub.exe to start your application but rename it into MyApplication.exe. With XULRunner 1.9 this will make the desired name appear in the task bar (not with XULRunner 1.8 however). Your application's icon can also be added to this executable with a tool like Resource Hacker. To change icon of specific window, see Window icons.

Reading command line arguments

See Chrome: Command Line and XULRunner:CommandLine. Command line arguments are handled via nsICommandLineHandler.

Preferences needed for file download dialogs

To use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following prefs:

pref("browser.download.useDownloadDir", true);
pref("browser.download.folderList", 0);
pref("browser.download.manager.showAlertOnComplete", true);
pref("browser.download.manager.showAlertInterval", 2000);
pref("browser.download.manager.retention", 2);
pref("browser.download.manager.showWhenStarting", true);
pref("browser.download.manager.useWindow", true);
pref("browser.download.manager.closeWhenDone", true);
pref("browser.download.manager.openDelay", 0);
pref("browser.download.manager.focusWhenStarting", false);
pref("browser.download.manager.flashCount", 2);
//
pref("alerts.slideIncrement", 1);
pref("alerts.slideIncrementTime", 10);
pref("alerts.totalOpenTime", 4000);
pref("alerts.height", 50);

If you are missing preferences that a dialog requires, you will get the following errors:

Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPrefBranch.getBoolPref]

Error: dialog has no properties
Source File: chrome://mozapps/content/downloads/u...ontentType.xul
Line: 1

Enabling Password Manager

These preferences seem to be the default in Firefox, however, they are missing in XULRunner. Without these settings Password Manager will not store login details.

pref("signon.rememberSignons", true);
pref("signon.expireMasterPassword", false);
pref("signon.SignonFileName", "signons.txt");

You also need to get an instance of the login manager service, which internally initializes the system:

Components.classes["@mozilla.org/login-manager;1"].getService(Components.interfaces.nsILoginManager);

Using Firefox to run XULRunner applications

Firefox 3 and up contain the XULRunner runtime. It has an -app command-line switch to run a specified XUL application instead of starting the browser.

On Windows:

  firefox.exe -app path\to\application.ini

On Linux:

  firefox -app path/to/application.ini

On the Mac:

  /Applications/Firefox.app/Contents/MacOS/firefox-bin -app /path/to/application.ini

Note that at least on the Mac, you need to use a full path. Partial paths don't seem to work.

Troubleshooting

Window title missing

If the title of your XUL <window> is blank, even though you specified a title attribute, make sure the extension on your XUL file is .xul rather than .xml

Default Theme

To create a default theme you need to create a folder in the extensions folder with an install.rdf in it.  As of Oct. 2008, the folder needs to have the same name as the one in Firefox 3.0. 

\MyApp\Extensions{972ce4c6-7e08-4474-a285-3208198ce6fd}\install.rdf

It should also have an <em:internalName>classic/1.0</em:internalName> as that is the default theme in Firefox.