Older blog entries for clarkbw (starting at number 180)


I’ve been experimenting with how we can use tabs inside Thunderbird.

Thunderbird Tabbing

The previous tabbing post already discussed how tabs help people to keep their current context and multi-task more flexibly.  I’ve created a number of designs that look into using tabs in Thunderbird so email users can have the same kind of power over their context.

In Tabs By Default

To keep your current context of email reading, searches will open up in a new tab by default.  Such that anytime you’re in the All Mail tab and start a search the results will open in a new tab.  Opening up the Calendar, Tasks, and Contacts will also open up by default in a new tab as well.  Tabs will need to be fast to open.

Tab Shortcuts

Much like you could want quick bookmarks to open up the web pages that you access frequently Thunderbird needs a way for users to open up different types of tabs that are unique and used frequently.

Tab shortcuts allow us to offer a default set of tab locations that users may want to open.  We can also offer this location up to extensions to enable them to add in their own shortcuts for items like CRMs, Thunderbrowse, and other elements that would want to be opened up in tabs.

With shortcuts we should also focus on some ideas for preventing people from opening up too many tabs of the same interface.  Perhaps something that (on mouse over) shows you the other tabs of that type already opened.

New Tabs / Summary Views

Sometimes you just want a new tab to start fresh, there are lots of reasons to start a new tab. For this we have a new tab button that allows Thunderbird users to open a new, empty tab.

New Tab Button

Upon opening a new tab Thunderbird could just show a blank page and focus the search bar.  However it would probably make more sense to use the opportunity to open up a summary view page while the search bar is focused.

This summary page could use the widget system that Spicebird uses or just give a static summary of your mail, events, and tasks.  Adding in items for recent searches could be good as well.  Pulling information from places like whoisi about my contacts could be another interesting element to this summary page.


There’s still lots of work to be done and issues to understand; this design work isn’t finalized.  For tracking the Thunderbird tab work that’s planned for Thunderbird 3, see bug 21899 where I’ll be posting more comments and designs.  Comments on this blog are always appreciated as well.

Syndicated 2008-09-25 23:58:47 from Bryan Clark

How to steal from a Fox

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

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

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.

Syndicated 2008-09-03 21:11:33 from Bryan Clark

A Cure For Real Estate Amnesia

Mr. Unger of The Unger Report has outdone himself this time.

“…Real Estate Amnesia (REA) is the leading cause of real estate anxiety, next to homelessness and foreclosure…” - A Cure For Real Estate Amnesia

Syndicated 2008-08-29 17:54:47 from Bryan Clark

What are Attachments?

Should links inside emails be considered attachments?  In the technical sense of an email (like rfc 2183) links wouldn’t be considered a different content type.  The question isn’t whether they are technically attachments as much as if they should be attachment-like in the user interface.


Facebook handles links in a message almost like an attachment-object and will do some additional meta work on the link to provide a default photo and short description for it.

In the message list view Facebook offers an icon to note that a link attachment was included in a messages.

In the composition view Facebook also grabs links from inside the message and shows them separately as an attachment like thing.  In the screenshot below the composition window grabbed the link inside my message and pulled down a description and number of photos from the site.

link detected in the composition area

This kind of meta data around a link can be really beneficial.  The presentation of the link is better than a person naturally would and since it’s the information is retrieved automatically it only takes extra seconds  to make sure a good image and description appear.

Beyond just the benefits of better presentation is another hot topic in the Thunderbird world of offline support.  When reading mails offline it’s far better to have a more context about the link than none at all.  Even if I can’t bring up the link in an offline state the image, description and comment can help me to recall what the link is about.


When you’re using the rich editor for composing a message in Gmail and create a link it has some nice features for recognizing a link and helping you edit it.  Here are some screen shots of what Gmail is doing right now.

Popup indicates the link has been recognized in compose window

Editing a Link

Alternatively Editing an Email link

Pretty straightforward and simple stuff when compared to the extra things Facebook is doing.  Gmail doesn’t add meta-data about the links or make their inclusion visible in the message list.

Links as Attachments

If in Thunderbird we wanted to start treating links more like we treat attachments…

  • How do we present that to the user?
    • Both in terms of composing messages and when receiving links in messages.
  • Do we grab meta data for links sent to us?
    • assuming some kind of policy about what links we can do that with
  • And should we be making links available somehow in Firefox?

Syndicated 2008-08-22 04:14:35 from Bryan Clark

Visual Field of Dreams

Not more baseball

I’m wondering what is the optimum visual field or display size for reading on a computer screen?

I haven’t been able to find an easy answer to this question for a number of reasons and what I’ve found for research indicates many conflicting studies.  One difficulty is that you have to really define what optimum means.  Are you optimizing for speed, comprehension, or satisfaction?  Also the size of the documents you are reading can change the optimizing factors for presenting it.

So here’s a compilation of research papers that I’ve found related to the Visual Field, Optimum Display Size, whatever you want to call it problem.

The Effects of Line Length on Children and Adults’ Online Reading Performance [ pdf ]

Adults were measured against children in 3 sets of line length for reading time and effective reading score yet no real differences were found.  What is interesting is the perceived results, only in adults found the narrow to medium line length (45  - 76 CPL - characters per line) to be preferred when compared to the full length (132 CPL).

The Effects of Line Length on Reading Online News [ pdf ]

Twenty college-age students were given news articles to read displaying in 35, 55, 75, or 95 characters per line from a computer monitor.  The results showed that passages formatted with 95 cpl resulted in faster reading speed with no effects for comprehension or satisfaction other than strong preferences for sizes.

The Effect of display size on reading and manipulating electronic text [ pdf ]

An attempt at more meaningful analysis of the effect of window size on reader comprehension and manipulation of “real-world” texts.  Participants were given journal articles for comprehension and a software manual for specific information.  Indications that screen size does not play a major factor in performance on either task and readers prefer larger screens. (no kidding!)

Reading and skimming from computer screens and books: the paperless office revisited?

Previous research made conclusions from the screens of the 1980s vs. paper, however when comparing against high quality CRTs speed and comprehension are equivalent.  However skimming on a CRT is still 41% slower than from a book, reasons for this finding are discussed.

Interface Design and Optimization of Reading of Continuous Text

A fantastic overview of a lot of different research that has taken place with breakdowns of key variable components of each experiment.  If you only read one paper this is likely the best one to get a handle on the situation.

Cited in several other papers but I couldn’t track down an available source for this paper.

Please leave comments for other related research articles, I’d love to be able to find more information on this topic.

Syndicated 2008-08-21 23:04:38 from Bryan Clark

This is Dialog Invasion!!

Later today I’ll be giving a summit session on UX for Thunderbird.  The Thunderbird Dialog Invasion is one of the many topics to cover.

<a href="http://clarkbw.net/blog/2008/07/30/this-is-dialog-invasion/">Follow here to view video</a> - non-flash formats available.ogg and wmv
Watch it in a High Quality format.
If you love Reggie and the Full Effect as much as I do you can grab his new album from  MySpace.com -Reggie and the Full Effect or Vagrant Records - Reggie and the Full Effect. Please don’t sue me reggie!!

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!