For my first week working remotely from Champaign, I focused mostly on the About:Tab sprint, but I got in some time for other Labs projects like Weave and the Design Challenge.

I’ve already written about the About:Tab initial prototype release that provides a streamlined new tab page that needs no configuration, so I’ll mention specifically what I worked on: frecency site listing, thumbnails, feeds, and predicting behavior.

About:Tab Sites

The site listing was the easiest part as I’ve already had plenty of experience with the Places database with the Location Bar for Firefox 3 and Auto Dial. The query I used is actually quite different from the existing queries as it focuses on finding top pages of sites instead of just any top-frecency pages. At one point I was tempted to also show related pages of that site similar to EdBrowser’s Site Launcher, but Beltzner set us back on track of quickly creating a prototype.

For those using About:Tab, you might have noticed you can drag the sites around, but that doesn’t actually do anything. (Actually, it’s useful for preparing screenshots..) I used jQuery UI’s Sortable [jqueryui.com] to let things get dragged around. This was actually the first time I used a framework like jQuery, so I had to do a lot of digging around the API Documentation [docs.jquery.com]. So if you look through the mercurial code repository [hg.mozilla.org], you’ll see plenty of chained $()s.

About:Tab Thumbnails

I had some trouble coding up the thumbnails as I kept thinking about how to efficiently grab thumbs and save them, but then I realized it was just a prototype, so for now it just loads the thumbnails once and saves them in memory for the session. This turns out to work pretty well as the site listing doesn’t change much and the thumbnails are just there to help remind you “yes, this is the site I want” as after a while, it should be muscle memory for going to site you want.

Testing grayscale filters on cake!

I also got to play around with SVG to make the thumbnails gray until hovered. I found roc’s post on applying SVG effects to HTML [weblogs.mozillazine.org] and quickly put together my own example. I had some troubles getting it to work in about:tab because the about: protocol doesn’t support #fragments, but because we clear out the location bar anyway, I decided to switch the page to just use the chrome:// URI.

About:Tab Feeds

A lot of the heavy lifting of automatically finding and tracking feeds was straight from Atul’s Ambient News [toolness.com]. The main part I worked on was grabbing feeds for just the corresponding sites shown instead of showing any feed from top sites. Here I used an asynchronous SQLite query to get the feed data, so that’s part of the reason why feeds slowly fade in after opening a new tab.

About:Tab Predicting Behavior

There already is some behavior predicting in the prototype like suggesting undo closed tab and searching for addresses, but I’m actually working on something separate.. predicting where you would want to go next based on where you’ve already been. The Places backend already remembers your history to help decide which pages to show in the Location Bar, so mining useful data like starting pages is totally possible.

This functionality isn’t in the initial prototype, but I’ve got some results that seem promising.. at least for my own browsing history, so we’ll figure out a way to show this information to the user. The ability for Firefox to accurately provide useful pages is pretty neat but kinda creepy at the same time..

For example, after searching for “weather champaign,” it would suggest the GPS-tracking bus results. Or after going to Air Mozilla [air.mozilla.com], it knows that I open up the Weekly Status Updates [wiki.mozilla.com]. Or when I go to one news site, I frequently go to other news sites.

Weave & Design Challenge

For Weave, I’ve got a number of patches in the pipeline for Milestone 5 such as being able to “start over” as well as automatically disabling Weave while offline and in private browsing. Other simple patches have already landed like clearing failed login notifications after a successful login as well as allowing right-clicks on the Weave statusbar icon.

In terms of the Design Challenge [labs.mozilla.com], I figured that while I’m working remotely in Champaign, it would be good for me to reach out to the University of Illinois’ HCI group. So I’ll be talking with some of my former professors like Karrie Karahalios [social.cs.uiuc.edu] who focuses on social computing.

Mozilla Labs has a new prototype for you to try out — About:Tab [people.mozilla.com]. (Make sure you’re running Firefox 3.1 [mozilla.com] or newer!)

With this add-on, you get a listing of sites you frequently visit with thumbnails and feed items instead of a blank white page on opening a new tab. These sites are shown along the far-right edge of the page to avoid interrupting your behavior if you just want to type in the site you want to go to.

You don’t need to manually bookmark sites or pick pages or even subscribe to feeds! The new tab page is smart enough to figure out which sites you frequently go to and shows related items like feeds.

Easily access your frequently visited sites along with their feed items

The sites are listed along the right edge of the page to be visible but not glaring. That’s why the thumbnails are shown in gray so that flashy sites don’t overpower the simple look. Both the thumbnail and text are faded gray until you put your mouse pointer over it to interact with it.

The page additionally will provide navigation options based on your behavior. If you’ve copied an address to map, you’ll be able easily get to the map by clicking on a link from the new tab page. Additionally, if you’ve recently closed a tab and want to get back to it, you can restore it with a single click.

Behavior-based navigation suggests actions that you'll likely want

Check out the official Mozilla Labs post describing the ideas behind the New Tab Page [labs.mozilla.com]. As pointed out there, the main themes behind the new tab page were were No Configuration, Streamlined, and Polite. Thanks everyone for the early feedback, and please continue to provide comments, criticisms, and suggestions [labs.mozilla.com].

This is an early prototype that Dan Mills initially started coding less than a week ago, but it’s pretty functional already as it has drawn from existing projects like Atul Varma’s Ambient News [toolness.com] and my Auto Dial. You can follow the development of this prototype [wiki.mozilla.org] to see what’s going on or even contribute.

For those using my Auto Dial add-on, you can easily uninstall it and update to About:Tab [people.mozilla.com] from Tools -> Add-ons. About:Tab provides more functionality with behavior-based navigation and feed items as well as a cleaner interface with thumbnails.

I’m now a full-time software developer in Mozilla Labs working primarily on Weave [labs.mozilla.com]. I suppose that means I’ll have to pay income taxes again.. but that’s insignificant compared to helping Weave redefine web clients where users can interact with websites and friends in whole new ways. I’ll have less time to write about the EdBrowser, but being in Labs, I might get to build some of this as a bunch of ideas for that web client was built around Weave.

Most of what I worked on during the week was getting familiar with the Weave codebase and some initial debugging/hacking. I also did a little bit on optimizing the Location Bar for Firefox 3.1+.

Is 4 > 20? Yes! ?

My first task was figuring out why 4 is larger than 20 [bugzilla.mozilla.org]. This was causing problems with Weave history sync on Fennec when we set the Places sorting mode to get a number of recent pages. So to try figuring out what went wrong, I started with my Unibody Macbook and installed VMWare Fusion [vmware.com] to run Ubuntu 8.10 [ubuntu.com] for a cross-compiling scratchbox [wiki.mozilla.org] to build Fennec [wiki.mozilla.org] for the Nokia N810. (Side note: don’t run hg from the scratchbox. It’s old. Like 0.9.1 old.)

That’s just to build Fennec. Getting it to run on the Nokia N810 is just as fun. The default package is bzipped, but that doesn’t work on the device by default, so I have to repackage it as gzip. Even before then, you’ll need to jump through hoops to get Fennec onto the device, but the easiest way seems to be putting stuff on a web server and downloading it wirelessly to the device.

Long story short, I used my x86 asm experience from doing computer architecture/compiler research at UIUC, and noticed the compiled code for SetSortingMode [hg.mozilla.org] was doing a plain comparison of the input argument to the value 20.

cmp r1, #20

While the value 4 was getting passed into the unsigned short argument, the compiler was expecting a 4-byte sign extended value. Vlad gave me a quick patch that made the XPTCall magic handle smaller-than-4-byte types correctly, and all was good. 4 is now less than 20.

Initial Weave Hacking

I got a Weave account and used it for the first time. (And so can you!) [services.mozilla.org] I kept track of various small UI issues as I used the Firefox client and pushed fixes for them — small localized changes are a great way to get into the bigger project. But I eventually messed up my account by typing different passphrases from different computers.

Lucky for me, I’m working on a way for users to reset the data on their client/server [bugzilla.mozilla.org]. The general idea here is to allow the user to “start over” incase something went wrong. 1) Clean sync with the server, 2) Restart the client from server state, 3) Make other clients like the current one, 4) Have clients repopulate the server.

Before I dove too deep into coding, I got a whole look at the Weave architecture to better understand what pieces od what: A bird’s-eye view [toolness.com] and Client APIs [wiki.mozilla.org]. Also, Weave is written with a pattern called Trampolining Generators [neilmix.com]. This basically lets you use asynchronous calls synchronously and get something more like traditional threading.

Color-coded log files for easier tracking of Weave behavior

I also figured I would be looking at debug logs a bunch, so I decided to spice up the plain black/white log file [bugzilla.mozilla.org] and color code the text by the type of message (warning, info, debug, etc.) and the background by the component generating the message. Hopefully now I’ll be able to get deep into Weave hacking.

AwesomeBar Speedup

I posted about speeding up the location bar, and it’s made it into Firefox 3.2 already. On the way there, I used Andrew Sutherland’s SQLite explain parser to better understand why things were slower and faster. Basically, a query becomes a set of opcodes like how javascript code becomes an intermediate bytecode, and the engine executes this stream of instructions.

Andrew first made this tool to analyze his own query optimizations [visophyte.org], and now he’s made the code available for everyone to use and contribute [hg.mozilla.org]. Thanks!

I’ve got a change that should speed up the Location Bar in Firefox 3.1 and 3.2, but I just want to make sure it’s not only me and my computers that are seeing this benefit.

For you to take the test, you’ll need to be running a Shiretoko (Firefox 3.1) build or Minefield (Firefox 3.2) build [ftp.mozilla.org].

What you then need to do is type something that will search through all your history, such as “this page isn’t in my history yay”. Just copy/paste that into your location bar, but keep track of the time you pasted and the time the activity throbber stops spinning in the location bar. (If you do get results, it’ll still be okay, as long as the location bar didn’t find 12 results.)

Depending on how much history you keep and how long you’ve been using Firefox 3, this could take over a minute or two before the throbber stops spinning.

Once you record how many seconds it takes for the throbber to stop, repeat the same thing with the Firefox 3.2 build that includes my optimization [build.mozilla.org].

CPU Usage (1 bar/sec): Old Firefox 3.1 takes 2 minutes; New takes 20 seconds

I’ve tested this on a few Places databases with my current unibody MacBook and my old iBook, and both times it runs much faster. Some times it goes 6 times faster. With one test on a database with over 100,000 places, the location bar throbber stop spinning in 20 seconds instead of 120 seconds.

Please report back your results as comments, and if you’d like, go ahead and vote for the bug, Make location bar autocomplete even faster [bugzilla.mozilla.org], to follow its progress.