If you’re interested in trying what a web application would look like running inside a Thunderbird tab without modifying an extension use the following code snippet.

Open the Error Console from the Tools Menu

Copy & Paste this code into the input entry at the top:

Components.classes['@mozilla.org/appshell/window-mediator;1']
          .getService(Components.interfaces.nsIWindowMediator)
          .getMostRecentWindow("mail:3pane")
          .document.getElementById("tabmail")
          .openTab("contentTab",{contentPage:"http://tinyvid.tv/show/2h9led44g152z"})

update: here’s a text input which you can easily copy and paste the above code from.

Change the provided link ( http://tinyvid.tv/show/2h9led44g152z ) at the end to the web application you’d like to try, like http://twitter.com for example.  Click the ( Evaluate ) button.

It’s Party Time! ( if you didn’t change the link,  http://tinyvid.tv/show/2h9led44g152z )

You can continue to iterate the tab application by creating a new click handler, however at that point it might be worthwhile to start with the extension code instead of working in the error console.

Jetpack for Thunderbird

In the hopefully not too distant future Thunderbird will gain Jetpack as it’s new extension model and it will be no longer necessary for add-ons like this these be created but instead a simple Jetpack which can do the same things without restarts or complicated installs.

If you’re interested in this take a look at Andrew’s recent Jetpack in Thunderbird post.

Above code snippet courtesy of Magnus in

The Google Calendar Tab

As simple as it sounds, this adds the Google Calendar web interface as a new tab directly into Thunderbird.  Creating and viewing events works just as it would in a browser like Firefox.

If your calendar is setup to show popup alerts you’ll continue to see them from the calendar tab while in other, mail, tabs.

Here’s my family Pinochle game reminder alert showing.

There is no official release of this extension yet, however you could grab the latest XPI, download and install it into the latest (at least rc1) Shredder release.

More Extensions

It’s easy to get started integrating a web application like Twitter, Remember the Milk, and other sites into Thunderbird.  Once you get the initial pieces you can start working on better integration into your email conversations.

If you’re interested in creating an extension similar to this one, here are a couple links you probably want to check out:

• Google Calendar Tab source code
• bug 516776 – Make it possible for browser elements to navigate through links/pages
• Thunderbird 3 for Developers – Content Browsing
• Thunderbird Content Tabs

Lightning

This calendar extension only handles a single url for Google Calendar.  If you’re looking for actual calendar integration with different calendars, including google calendar, you’ll want to check out the Lightning Calendar extension which also runs inside Thunderbird tabs.

]]> http://clarkbw.net/blog/2009/11/23/google-calendar-in-thunderbird-tabs/feed/ 96 http://clarkbw.net/blog/2009/11/20/raindrop-jetpack/ http://clarkbw.net/blog/2009/11/20/raindrop-jetpack/#comments Sat, 21 Nov 2009 01:25:32 +0000 Bryan Clark http://clarkbw.net/blog/?p=706 The other day I did a quick hack using Raindrop & Jetpack to get new mail notifications from Raindrop.  In total it took me less than an hour.  It’s no Joe Shaw hack, so I don’t expect to get in the paper for this but I figured I’d share anyway.

This Jetpack checks Raindrop to see if there are new messages and bubbles them up as notifications if there are.  Here’s the source code:

var messages = {}; 

function checkMail() {
 var api="http://localhost:5984/raindrop/_api/inflow/conversations/home?limit=10";
 jQuery.getJSON(api,
               function(data, textStatus){
                 jQuery.each(data, function(i,item){
                   if (item.unread) {
                     if (!messages[item.id] || messages[item.id] != item.messages.length) {
                       var n={title: item.subject,
                              body : item.messages[0].schemas["rd.msg.body"]["body_preview"],
                              icon : 'http://localhost:5984/raindrop/inflow/i/logo.png'};
                       jetpack.notifications.show(n);
                     }
                     messages[item.id] = item.messages.length;
                   }
               });
 });
}
setInterval(checkMail, 10000);

To try this out you’ll need Raindrop installed and running and Jetpack installed in Firefox.

Go to about:jetpack and copy the above code into the Develop tab, then click the try out this code link just below the Bespin editor.

If you don’t want to do all that you can just watch the video below (no sound, so you might want to play some music)

Today Mozilla Messaging released the Raindrop project

Raindrop is an experiment in the design of a new messaging platform in the open.

What I like most about Raindrop is our process.  We started with some simple designs, created a couple iterations and now we’ve opened up the whole process to share.  This isn’t another email client or a twitter client, we have been designing for the way people communicate on the web today.  And we’re looking to make it awesome.

If you’re a developer or just have lots of patience you could grab the source code, follow the instructions and get raindrop up and running.  But that’s not what we’re launching, we’re launching the next version, the one that we design and develop in the open.  Read that again, there is no download.

Design

Starting today, new raindrop designs will be uploaded into the Raindrop Design flickr group for discussion and review.  As designs are ready to be implemented we’ll be blogging about them in the Raindrop Design Blog.

Develop

Discussion of code and extension development takes place on the Raindrop Development Google Group.  We’re currently built on CouchDB, Python, and JavaScript.  (if you’re trying to get raindrop up and running make sure you read the INSTALL doc carefully)

Extend

From the ground up Raindrop was built as a set of extensions on top of extensions.  This architecture was a design choice so that others could easily continue extend on top of our work.

There are places to add Data Miners which can search messages for regular expressions and User Interface Extensions which can modify the layout and design of messages presented.

Check out James’ video on Raindrop Software Components for more on the extensions system.

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.

Bugzilla – Air Traffic Control

For Jetpackers a mid-air collision is an especially scary thing.

So this Jetpack does a pretty simple thing to help you avoid the mid-air collision by notifying you before it’s about to happen.

For every tab you have with a bug open this Jetpack does a simple check in the background to see if someone else has modified the bug while you were looking at it.

Code

The code for this is pretty simple and in total it probably took me only an hour to get up and running and then a bunch more time polishing things off.  Here’s the break down.

I have a simple regex to find urls that are showing a bug:

var show_bug_regex = /^https:\/\/bugzilla\.mozilla\.org\/show_bug\.cgi\?id=(\d+)/;

Then I check if the url matches whenever a new page is loaded in a tab:

jetpack.tabs.onReady(function(doc) {
  // here we setup our persistent check
  var match = this.url.match(show_bug_regex);
  if (match) {
    init(this);
    this.bug_id = match[1];
    startCheckingTab(this);
  }
});

Also for good measure I do a similar check when a tab is focused, in case the Jetpack wasn’t installed or running during the original load.

jetpack.tabs.onFocus(function() {
  // here we just double check out status
  var match = this.url.match(show_bug_regex);
  if (match) {

    /* if we've already notified then we aren't checking anymore */
    if ( alreadyNotifiedTab(this) )
      return;

    if ( ! areCheckingTab(this) ) {
      // they focused a url match that we haven't been checking!
      init(this);
      this.bug_id = match[1];
      startCheckingTab(this);
    } else {
      resetCheckingTabInterval(this);
    }
  }
});

The start checking function simply runs an ajax request against the bug on an interval.  All that was needed for this was to know if the bug had changed from the last time we looked so we build a url that only retrieves the delta_ts field to create a Date object.

"https://bugzilla.mozilla.org/show_bug.cgi?id=" + bug_id +  "&ctype=xml&field=delta_ts";

That’s about it.  If you want to check out the source or install it yourself you can go to the Bugzilla – Air Traffic Control page at userscripts.

This really drove home the power of defaults in user interface choices and how it is the responsibility of good designers to default to the right behaviour, especially when the options are complex.

Dialogs aren’t the real evil, though they usually aren’t great, it’s the lack of real negotiation.  In the book Getting to Yes it states that you “Make emotions explicit and acknowledge them as legitimate…”, however don’t stop there.

A useful dialog would negotiate with your users.  Give them actions and power to change their situation.  Don’t ask users to acknowledge your troubles and stop the negotiation there.  Reconnect!  Try Again!  Even simple actions can help people correct the situation.

I’m looking to make dualbuttons always show their dropdown button with a real button like look.  This dualbutton reply button is  going to land in Thunderbird 3 soon and I’d like the style to look correct for both Linux and Windows (Mac is using its own button style).

However this doesn’t appear to be some kind of toolkit CSS hover issue. The windows CSS is decidedly worse than the Linux right now so that may be a separate issue all together; and if so we can attempt that in the same way we handled the Mac.

Hints, answers, and the like are greatly appreciated in the comments.

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.

After which transmission will continue normally, the same spotty and random posts as ever.

Upgrading from Previous Development Releases

At 12:00pm today (12:00 PDT) updates will start to be picked up by Thunderbird Alpha and Beta users.  In the following 24 – 48 hours you should be offered the update if you’re running a previous development release.

Alternatively, you can pick it quicker by going to the menu, selecting Help and then “Check for updates…”

Take a look a the Thunderbird 3.0 Beta 2 Release Notes for more information, we have one additional note for POP3 users.

However you actually can’t reserve trucks via the web site.  You have to call the locations.

When you call the location it goes something like this.

• You: I would like to reserve a truck for next week.  I have a coupon from your site.
• Them: Next week is no problem.  However the coupon is only for online reservations.
• You: Oh, I couldn’t reserve online; it said there were no places available.
• Them: No you can’t reserve online, only via phone.
• You: So…
• Them: So next week is all set!

If you haven’t seen this image before, the description of the project is amazing.  An effort to find the “People’s Choice” art award a market survey queried respondents from around the globe on what aspects of art they enjoyed.

• How much to spend? (200 – 500?)
• Busy or Simple? (turkey wants it busy)
• Naked, Partial, or Clothed? (the u.s.a. wants them fully clothed)
• What size?  (the web wants dishwasher sized)

Results were tallied for various countries and “The Web”, the paintings were created to spec with total disregard for an overall vision / goal / theme and the results are completely unappealing.  I originally found this site via the excellent email on Design from Dan Winship of years back.

Design & Choice

I was talking with someone about Design about a year ago and we go into the topic of choice vs. decisions, we debated this.

Committees make decisions

Making decisions is the process of evaluating and understanding the options from various possibilities and then merging and pruning the list of possible options until only 1 option remains; which could be a hybrid of the original possible options.

Design makes choices

Making choices is the process of evaluating and understanding the options from various possibilities, then selecting one of the options.  The design process suggests that this selection be iterated on and further choices made.  Part of design choices means knowing that other options are valid but possibly lack a clear expression or vision.

Decisions vs. Choices

The difference between choices and decisions is subtle , some of it has to do with the quality of your ingredients and some of it has to do with compromise at the wrong stage of development.  Is the process all that matters?  A process that is used to constantly create new possible options and choose from those instead of making Frankenstein out of the options given?  The design process will constantly emphasize the goal in the iteration of options leading to a choice.  I don’t think that definition clear, but it’s the best we came up with.

Allowing More Choice

If design requires choices that defines a vision and other designers incorporate that design with their own vision…  How do we create this space where design can make choices according to a single vision and still allow other designers [1] to continue making further choices toward their own vision?  And further, how do you have a meaningful community other designers can make their own?

[1] As in, “Everyone is a designer”, by choice or by accident.

Search

With some needed changes to the Thunderbird platform it has become possible to provide efficient full text search over messages and their headers.  This will enable Thunderbird to offer a much improved search experience over the previous search methods.  Search can start over the full text of a message and then be filtered against specific attributes like sender or subject to narrow down the set of results.  We can also offer auto-complete on subjects and people in the search entry to help prevent spelling mistakes and partial matches from slowing down the search process.

Tabs

We’ve been doing a lot of thinking about how people use tabs which lead us to a tab mail implementation that should improve searching, reading, and processing; hopefully also saving that state.  Currently a search over mail will destroy the state of your message list by filtering down the messages in the exposed view.  With searches opening in new tabs your current view can remain intact while you explore your mailboxes in new tabs.   Messages can be opened with a middle click, just like in Firefox, to help you process mail quickly by queuing the messages you’d like to read later in tabs; later you can close your opened tabs as you read each message.

Account Auto Configuration

When trying to setup Thunderbird the details of your email accounts host, port, and security settings are so 2008, lets evolve.  Long in the works has been a better, easier way to setup an email account.  Our design goal was to get an email account setup with absolute the minimal number of questions.

• Name
• Email Address
• Password

With those 3 items Thunderbird can infer all other details automatically, with exception cases handled gracefully.  It has been difficult work to make this happen, but we are well on our way and we know that when we finish it will have been worth it.

Message Archive

Thanks to the recent improvements to enabling cross-folder search we are able to implement an archive system for IMAP and  POP clients.  With a single button Thunderbird users can automatically file messages from their Inbox and other folders into the archive folder system.  We’ve pushed the Archives folder into the list of special folders such that it will sort with your Inbox, Sent Mail, and Drafts.  If you’re interested, take a look at the archive bug for more of the technical details, otherwise just take a deep breath… its coming.

Activity Manager

Notifications and download progress concerning your mail accounts are important events, however they aren’t events that require your full attention.  Earlier last year we looked at how we could reduce the amount of dialog noise Thunderbird generates in order to handle your account details in a more civilized manner.  We took a good look at the Firefox Download Manager and created, what we called, an Activity Manager.   Recent activity on the activity manager has lead to new patches in the review cycle headed toward a coming release.

Theme Improvements

With recent steps forward Thunderbird has finally made room for the Linux Desktop theme space.  I don’t even need to say much else about this change, this list says it all.

• gnomestripe theme space
• menu icons
• application icons ( the indomitable scrapper Michael Monreal has provided his userChrome for checking out that screenshot )
• tango palette for messages ( screenshot )

And of course lots more

There are many more changes, from the auto-sync offline work to preference cleanups that have happened and/or are still in the works; this list is just a grouping of major areas.  We’ve come a long way, but have an even longer road ahead.

Emre recently landed a new “work in progress” patch ( check out the patch in bug 257942 ).  Also there has been a lot of work put into documenting the Activity Manger Interfaces to help other developers properly hook into it and use it.  Please take a look over the interface docs and if you’re so inclined you could grab the patch and apply to a current release, beta or later, to see the current activity manager in action.

Beta 1 Released

David Ascher has a great post about our recent Thunderbird 3 Beta 1 release with info on where you can get it and what it involves.

For a long time Thunderbird has been using the same theme for Linux and Windows, resulting in an ugly and out of place Linux theme.  However now Magnus has a patch is up to create a gnomestripe theme space.  Magnus already moved Thunderbird menus over to using the gtk stock icons.

Here’s a screenshot (courtesy of Michael Monreal) of Thunderbird using the desktop icon spec.

Now we can start the move over to using the Tango icon set!

But there’s no time to lose!  We’re already talking about how to handle tab session restore to keep all your opened mail tabs around for future sessions.

I’ve put up a partial mockup already, but it’s still early.  As always please leave comments below!

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.

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.

Progress

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.