To get into the user experience of an add-on developer I recently made a Jetpack, Bugzilla Air Traffic Control, to examine what it is like to develop inside Jetpack.  I’ve also been creating a number of example extensions that take advantage of the new code that has landed in Thunderbird recently and learn the pitfalls of extension development.

So in honor of the hacks.mozilla.org recent article called 3D transforms in Firefox 3.5 – the isocube I added a similar hack to my tabbed message example extension.  I give you…

Cubed Email Messages

To demonstrate the awesome interactiveness that I didn’t add to my email extension I also have a pure HTML demo available.   Try out the email cube test demo for yourself.  This demo requires Firefox 3.5, go get it if you don’t have it.

If you’re asking “why email in a cube,?” then I’ll ask you why not?  This demo reminds me that Thunderbird has all the same Firefox goodness that’s coming out in 3.5 but we have yet to take advantage of much of it.  Hopefully as we make more progress in the coming months we’ll do just that.

And if you’re asking yourself… Is this what Bryan gets paid to do?  Well then we’re asking ourselves the same question; though I don’t think I’m referring to myself in the third person.

Here are some notes I have from my limited experience working to test application UI in both LTR and RTL.  Please drop a comment if you have better experiences, I’d love to be able to save a bit of time.

GNOME RTL

In the GNOME world to do a simple test of an RTL language you could start up the application with the LANG environment variable set to an appropriate language.  For instance:

LANG=he_IL eog

Thunderbird RTL

With Thunderbird I’ve found a number of options to make this happen.

The UILocale flag can be added your command arguments.

thunderbird -UILocale he

However Thunderbird, as compiled from hg, or download nightly likely doesn’t contain the translations needed to run that test successfully.

For the nightly build you’ll want to grab a translation XPI from the comm-central-l10n nightly builds.  You can drag any of those XPI links into the Thunderbird add-on manager window to install them.  (saves a bit of time compared to downloading and installing)

For your compiled builds the process seems a bit longer and more difficult getting the translations from l10n-central built in.  I gave up half way through as there is an easy method out there already, at least for simple testing.

Force RTL Extension

An easy alternative approach is to use the Force RTL extension, which I only just found out about today.  The extension provides an option in the tools menu to trigger RTL mode, which is really a lot better than trying a language you don’t understand.  If all you need is to test layout in an RTL this works really well.

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.

Last week I began some work on some ideas for a richer, interactive user notification system for Thunderbird.

Status Bar

Currently the status bar acts as one of the only notification systems to the user.  However the status bar is a steady stream of temporal plain text messages.  The messages are helpful if you understand what they are indicating, otherwise to most people they only convey general activity happening.  In general the messages end up lacking meaning because there is too much information running by.

A First Approach

Initially I took an approach of an interactive status bar that looked a little bit like the awesome bar replacing the status bar.  Instead of just giving plain text messages we could make richer messages with visualizations.

• Linked Messages
• Progress Meters

The linked message could open thunderbird up to the account or message they were referring to.  Next is to add some access to status history where people can see a list of what Thunderbird had done and perform actions (like restart) on those past activities.

• History of Activity
• Interactive History Items

The New Download

After seeing the amazing work that has been done on the download manager in firefox it seemed like a good second approach to the problem could be to reuse much of what they’ve done.

The download manager in firefox is solving a similar set of problems.  We want to allow people to watch the progress of a specific set of (likely asynchronous) activities. We also want to ensure that people can view the list of past activities in case they want to manage them.

Should we continue using a simple text status message?  The progress bar included in the status bar gives a visualization for time to complete an action.  But do we need to help people visualize what is happening in the background?

And then instead of an inline popup for the history list we open up the download manager window which allows for searching and management of items inside the list.

Nothing is set yet, most likely a final version will be taking bits of both approaches.  Still lots of work to go, more comments and ideas are always appreciated!

So here’s a bit of what I’ve found people claim to use tabs for.  I’ve arranged the information into what I felt were 4 distinct types of usage.  I’d love to hear about other usage that doesn’t fit into these categories or other categories people have observed.

Defer Action

Often people want to defer an action until a later time.  In a web browser they will open a link in tab that they’d like to read a little bit later.  This was reported to occur on news or information sites where a person is reading a single page but wants to branch off to other links after reading.  After completing the tab in their current focus the person would begin processing the other tabs lined up for later.

Lightweight Bookmark

Similar to deferring an action, people mentioned that tabs were a way of keeping certain pages around for an indefinite period of time.  These pages weren’t necessarily going to be processed right away but they didn’t want to be lost.  When asked if they bookmarked these page people responded that these pages were transitive reference type pages (i.e. they needed them to continuously use them for a certain project) and so tabbing seemed to be a way to bookmark things in a lightweight fashion.  This especially made sense when tabs are saved within a session; people reported opening lots of tabs (hundreds) and then closing Firefox down completely only to reopen them all later.

Collect Related Information

Many people cited using tabs specifically to collect information on the same subject.  Often this kind of collection was research for a composition like a blog post.  Some people claimed to do this in a very formal fashion of opening up a fresh window for a blog post and then creating new tabs in that window for research related to the blog post.  While others referenced doing an important activity in one window and having a set of windows with tabs in them for researching ideas around that important activity.  This type of collection is similar to the lightweight bookmark except that most of the tabs were intended for a very finite period of time such as using the page to link to.

Switch Context and Keep Current State

Many people also talked about how they would “Adventure off” into other tabs to follow something that was either more important or more interesting but they really wanted to keep their exact place they were.  This  is very similar to the defer action, you could say this is the after state of the defer action.  The only difference here is that the person is intentionally keeping the first tab around in it’s exact state where the defer might lead to closing tabs as they are finished.  A common example was a quick interruption that called for searching for something unrelated to what they were doing.  People would open a new tab, complete their search and then close that tab to go back to what they were doing.

Some Related Links for you to open up in Tabs

• Initial support for tabbed e-mail in today’s trunkbuild
• Tabbed 3-pane UI in TB
• Thunderbird earns its tabs
• Mozilla Thunderbird Gets Tabs
• Latest TBird 3.0a1pre Nightly has Tabs!
• tabbed message browsing in Thunderbird: updated patch and test builds
• Mozilla Thunderbird Gets Firefox-style Tabs
• Opera M2 and Thunderbird: tabs (wow!)
• Tabs in Thunderbird – Status Update

What does this mean for Thunderbird?

This information isn’t for figuring out how tabs work in firefox and then squeezing that idea into thunderbird.  It is merely here to create a common language reference for talking about tabs and their usage.  Hopefully people could see new ideas on how tabs can be used from understanding how they are used in other contexts.  There currently exists an implementation of tabs in Thunderbird but it will not be the same as it is now by the 3.0 release.