At the Mozilla All Hands last week, and we held a discussion to brainstorm various ideas to try out in the Prospector family of experiments. A couple of the current experiments like Speak Words and Instant Preview help users get back to top sites almost instantly with just one key stroke, but these mainly help for the relatively small set of sites that users frequent and not so much the remainder of the history available in Firefox.

So the next set of experiments will focus on improving the experience of searching for pages in Firefox. Interesting findings from Query Stats could help identify relevant pages or help build a better view of your past browsing behavior. Additional data about each page could be tracked by Firefox such as unique phrases from the page or how long a tab was opened and interacted with.

Displaying the search results also received some attention as to how to add all this extra information in a clean way. Some ideas ranged from being more space efficient by showing location bar results on one line to taking up more vertical space as one might not need to use the page when searching. This led to ideas of using the whole tab content area to show rich results and provide interaction such as grouping/switching of types of results like pages, apps, videos, etc.

– Prepare search bar -> button demo

Along the lines of combining the location bar and the search bar, I’ve been hacking together a Prospector experiment that changes the search bar into a list of buttons. This allows for explicit control for the user to decide when searching should be local to Firefox’s history or over the web. It also makes it apparent that there are multiple search engines to choose from and clicking another button switches the current search request to another provider.

When clicking a button, it inserts a keyword and focuses the location bar, so it’s like doing a smart bookmark keyword search with the first location bar suggestion being the search. Combined with Instant Preview, it’ll automatically update the results immediately as you type more words or switch engines.

– Attend Open Web App discussions

I was curious what kind of web-apps were being created in general across the various web-app stores available today because I wanted to see if the search bar -> button experiment above could add to the types of available apps. This is because generally speaking, these search buttons processes some words from the user and converts it to a url or a set of results.

From the screenshot above, the last button is actually for Google Translate, so when I click the button and type “hola mis amigos”, Google translates it immediately as I type to “hello my friends“. This somewhat feels Ubiquity-like, which had all sorts of commands, so potentially allowing the web app manifest to describe these “searches” or “actions” could lead to web-apps that are more than just bookmarks.

– Push restartless code examples to GitHub

I’ve been hacking on restartless add-ons for a while now and noticed that I copy/paste some useful helper functions for when I start a new add-on. Other people hacking on these bootstrapped add-ons could make use of them as well, so I created a “restartless” repository on GitHub. I’ll write a post going into more detail later, but briefly, it’s a collection of git branches where each branch contains a helper function or provides an example usage or pattern.

– Tracking down flash crashes

I’ve been running into Flash crashes on OS X for a while and noticed other people were in a similar situation. So to help resolve it, I started tracking down the various flash crash reports, and I’ve posted about my findings and issues that I ran into.

We released Weave 0.3 M5 last week March 12th, so I got in a bit of hacking for the first half of the week. This initially involved more deleting code than adding code though, but I’m probably just being obsessive-compulsive about keeping things clean and orderly. But the more interesting part is finally getting some initial UI for helping users get out of a “broken state”. I then got to fixing things up for the new text view for About:Tab by refactoring code from the thumbnail view.

Weave Debugging Sync UI

The initial debugging sync UI is to help users get out of situations where the server might contain incorrectly encrypted data (perhaps you accidentally used two different passphrases) or some other reason your local data isn’t syncing to the weave server. So for now, you can use the buttons to wipe the server data, wipe local data and resync with the server, or wipe remote data and have them resync with the server.

Initial Weave debugging UI to control syncing

It’s kind of neat watching the local wipe clear out the bookmarks toolbar and then have it fill in with the bookmarks encrypted on the server. But don’t get too attached to the interface. We’ll be switching it to be more user friendly such as having diagrams of which way you’re syncing data (two-way sync, one way to your machine, one way to other machines) as well as being able to select which pieces of data to push out.

But this initial step is just getting the right logic to perform the various syncs. For example, I created a way to have each data engine reset their local temporary data without completely wiping out permanent data. Previously, there was just a single resetEngine method, but some engines treated that as wiping. There’s a whole set of service calls to reset and wipe the local/remote client and server now.

Weave Refactoring

The first thing I cleaned up was the syncing logic of choosing which engines to sync. Right now weave syncs all engines, but some previous version used to sync engines by thresholds. The threshold syncing was actually handled by a separate code path, but it did pretty much the same thing as a full sync. So I just combined the two and cleaned up the callers and fixed some divergences in the code. There were potential bugs in the unused threshold sync because we’ve only been updating the full sync code.

Another refactoring was deciding if a sync should run and if we should schedule a sync. Both of these were basically checking a number of statuses such as logged in, enabled, etc.; so I just combined them to simplify the logic for the two. This made me feel much cleaner about making weave not try syncing when in private browsing or offline — I only had to make changes to the unified “check sync” logic instead of duplicating code all over the place.

One last cleanup I got in was switching code to use the lazy services attached to the Weave.Svc object. Instead of having each object differently implementing their own lazy services, they could just re-use the lazy property that might already have gotten the service. Some of the original code checked if a “private” instance existed and returned that, others had a getter define another getter with a local closure to capture the instance, and some just grabbed the service directly. Instead of having all these class ids and interfaces scattered throughout the code, the centralized code can efficiently implement laziness as well as simplify debugging.

New Tab Text View

After looking through the initial feedback for the new tab page, Aza made a text-focused view for the new tab page, which got rid of all the thumbnails that were slow and not too useful. This was a whole separate page that had its own logic, but I cleaned things up by refactoring the shared data logic between the thumbnail and text views.

It turns out this is a good way to figure out how code should be structured to be reusable with different views. For example, the code for picking out which sites to show as well as their accompanying feeds were already in their own separate modules, but various clean-up code that could be used by both could be pushed to the data source as well.

However, I did run into an issue moving <script> code into a Cu.import module. Apparently plain unicode characters work just fine in the script code, but when imported, they need to be escaped like \u2013 for –. So I just escaped them when sharing the subtitle trimming code between the two views.

New Tab Customization

Another feature added recently was the ability to persist site removal. A lot of people want to customize their site list, so now you can just keep removing sites until you find the one you want. This actually ended up being fairly simple to implement as the back-end site storage just kept an array of sites to use, so modifying that structure allowed it to persist across new tabs.

Also, by reusing that site storage, we allow configuration of the number of feeds (or none) for each site, and that gets persisted across new tabs. With all this data in that shared storage, it shouldn’t be hard to get cross-browser data. All that needs to be done is to write the data out to disk, perhaps in a preference. Javascript now has a handy JSON object to stringify and parse json objects, so writing and reading the array is easy.

New Tab Performance

One last thing in terms of performance is that both sites and feeds are being prefetched on browser load. This is done asynchronously (yay Shawn!) so it doesn’t block the main thread which handles drawing and UI. The sites fetching code needed to be switched to use async queries, but that just needed some code restructuring. Instead of using a return value right away, pass the site getter a callback that gives the result. So for prefetching, the callback is used to trigger yet another async query, but this time for feeds. 🙂

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.

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.

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.