Interface design is hard work, so it’s really nice when someone else has done much of the heavy lifting for you and left their labor open to cherry picking.    The Mozilla platform has been getting a number of upgrades in large part due to the work of the Firefox team and thankfully I have no shame in stealing the work of our compatriots.  Here’s how you can do it too.

What to Steal

I started in the Preferences area because we (TB & FF) share many of the same mechanisms used to change preferences.  Also it’s difficult to get preferences done right so it’s nice to be able to take all the hard work someone else did there and make it our own.

In Bug 451620 — “Remove the Advanced Preference for Connection timeout” we are cleaning up a preference mostly used for debugging and therefore doesn’t really belong in the main interface.  While working on the patch I took a look at FIrefox’s preferences to see what they were doing in that area and noticed they have the exact same preference, but it looked cleaner and nicer.  So I took it.

In Bug 452711 — “Use firefox default font chooser for display” I wanted to improve a users ability to change their font preferences.  Currently Thunderbird requires a user to change fonts with the daunting font dialog now available from the Advanced button.  In making this patch I went straight over to the Firefox font preferences and ported it over to our code.  Again, I have no shame about taking this either.

How You Can Steal Too!

Stealing code for preferences is easy, so easy, that I (not a programmer) can do this in a fairly short amount of time.  It only takes a reasonable knowledge of HTML/XML (XUL can help) and Javascript.

There are lots of this kind of preferences work to be done and it’s a great way for a new person who wants to submit a patch into the codebase to get a sense of the process.

Here’s a step by step on how I’ve been borrowing their code such that anyone should be able to do it.

Step 1 – Source Code

Get the source code from steps in the Comm-Central source code wiki page.  This step takes a little while as it downloads all the necessary components to build Thunderbird.

Step 2 – Initial Build

Build Thunderbird initially, you should only need to build it entirely once.  Follow the steps to create your .mozconfig or you could just try mine, which gives you a debug build.

export MOZCONFIG=~/tbsrc/comm-central/mozilla/browser/config/mozconfig
. $topsrcdir/mozilla/browser/config/mozconfig
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/tbird-debug
mk_add_options MOZ_CO_PROJECT=mail,calendar
ac_add_options --enable-application=mail
ac_add_options --disable-optimize
ac_add_options --enable-debug

Then run the build command as they describe.  Now go get some coffee or something.

Step 3 – Start Stealing

Time to start stealing!  Move into the Mail Preferences code and open up one of the files (check out Prime Places to Steal for ideas).

(from src)
cd mail/components/preferences/

Then at the same time go into the Firefox preferences and open up the preferences file that has the component pieces you’re looking to steal.

(from src)
cd mozilla/browser/components/preferences/

Step 4 – Building Your Theft

Now as you viciously swap pieces from the Firefox preferences over to Thunderbird preferences you don’t need to rebuild the entire Thunderbird source code, just the preferences component you’re changing.

Move into the preferences component on the build directory.  (this assumes you have a tbird-debug directory, which you’d get if you used my .mozconfig file)  There should only be a Makefile in this directory so type “make” and it will build up the preferences component.

(from src)
cd tbird-debug/mail/components/preferences
make

If you were to change any of the strings (preferences DTD files) used in the DTD that the XUL file references then you’ll need to rebuild the locales jar, which is just as easy.

(from src)
cd tbird-debug/mail/locales
make

Step 5 – Testing Your Theft

Now you’re ready to run your new version of Thunderbird!  You’ll likely want to create a different profile than your normal profile.

(from src)
./tbird-debug/mozilla/dist/bin/thunderbird -P test

Common Gotchas I Encountered

Here are some common errors I hit that were annoying to work through.

Parse Error: If you add code with references to DTD entities ( often labels like “&colors.label” ) that don’t exist you’ll get a parse error that’s pretty difficult to understand.  Check that your DTD has the correct entity ( <ENTITY colors.label “Colors:”> ) and that you’ve built the jar from the locales directory.

Adding New Files: If you’ve added new XUL and DTD files you’ll need to add references to those files in the “.mn” file.  Don’t ask me why!  I just work here.  See the preferences jar.mn and the locales jar.mn files, the format is pretty obvious.

Prime Places to Steal

Bug 451599 — “Add preferences UI for disk cache size and clearing the cache“.  To implement this bug you really just need to grab the Firefox Preference code from line 221 to line 233 and copy it just after line 216 of the Thunderbird Preferences code.  You’ll need to poke around at the related Javascript code for hooking it up.   And don’t forget to copy the strings from Firefox advanced.dtd file into the Thunderbird advanced.dtd file.  See, no shame at all!

Another one is the continuation of Bug 452711 — “Use firefox default font chooser for display” where you can copy over the color chooser.  First apply the patch provided in the bug. Copy the Firefox colors.xul file over to the Thunderbird preferences directory and the colors.dtd over to the Thunderbird preferences locale directory. Don’t forget to update both jar.mn files (and build the jars) as mentioned in the Gotchas section.

Then have a look at the code for the Firefox Content Preference and grab the row from line 195 to line 201, the button which launches the color chooser dialog.  You’ll also need to grab the content.js configureColors function and add it to the display.js code.  Don’t forget to change “chrome://browser/…” to “chrome://messenger/…”.

Making and Submitting Your Patch

Once you’ve made your changes and tested them out you’ll want to open a new bug, and upload your patch to that bug.  Use the hg diff command to make your patch, I generally do something like this.

hg diff --git > ~/Desktop/stealing-ff-preferences.patch

Make sure the new bug is against Thunderbird Preferences, use this link to get the product/component entries correct, and attach your patch along with that new bug.

Don’t forget to CC me on that bug!  Use my email: clarkbw at gnome . org

Legitimate Sharing

Stealing isn’t right.  It’s not that we want to copy all this code, which can create known issues of code sharing.  However I defend this especially for something like the preferences UI which goes under a considerable amount of churn each release; making it difficult to place those elements in a lower layer like toolkit for optimum sharing.

Once we’ve played catch up for a bit I hope that Thunderbird can start sharing code back as we create new improvements on the current systems.