Thursday, March 24, 2011

Racing Gmail Superstars

The Problem
Something happened in the last few weeks and my Gmail accounts started locking up and becoming totally unresponsive. All of a sudden:
  • Some keyboard commands worked (the "/" to go to the search bar, "g-l" to go to the search bar pre-populated with "label:" --> actually entering a label and hitting return didn't work though)
  • opening messages failed
  • navigating message lists with the keys (j/k) wasn't showing the cursor moving
  • using the "g-" combo keyboard commands (to navigate to other labels, inbox, buzz, etc.) wasn't working,
  • using the mouse to click around didn't work at all
The Hunt for the Cure

At first I thought it might be connection problems, or something specific to one of my accounts or browser. But it was happening in both Chrome and Firefox, and with multiple Google accounts... so I knew something was really wrong.

I loaded up a Gmail in Firefox and turned on Firebug. Sure enough, after the lock-up, when clicking around, I was getting script errors.

I tried posting to the Gmail Help forum, but the specifics of the bug were so odd and vague that (understandably) nobody was interested in looking into the issue.

So, all that was left to me was to try to hone in on the bug myself. After hours and hours of careful observation, I finally figured out a sequence that was reliably causing the problem.

Reproducing The Bug
1) Navigate to a label or inbox (any list of multiple messages)

2) Use the "j" and "k" keys to navigate to the 2nd message in the list (note: this step is probably not strictly necessary)

3. Use the "s" shortcut to unstar the message

4. Use the "x" key to select the just-unstarred message

5. Use the "y" key to archive the message

6. Try clicking on one of the other two emails, or using the "o" key to open and see script error:

The Conclusion

My hunch was that the problem was probably related to a labs feature (or it would have already been reported).

I tried disabling the Superstars labs feature and repeating the above steps.... no script error!

Postlude: Race Condition (Out of my league?)

Having figured this out, I noticed a couple of other things:

1) If I perform the above steps slowly, I don't get the lockup.
2) Starring and Refreshing:
  • Fast: If I use the keyboard to star a bunch of messages and then immediately hit F5, Gmail refreshes, and the messages I'd starred are not starred.
  • Medium: If I use the keyboard to star a bunch of messages, wait a few seconds, then hit F5, Chrome warns me that Gmail is working and that I should stay on the page.
  • Slow: If I use the keyboard to star a bunch of messages and then wait a while, then hit F5, Gmail refreshes, and the messages I'd starred are starred.
My guess from the above is that on un-starring the message, an AJAX call goes out... but performing an action on the message before the response comes back causes an inconsistency, which causes the lock up.


27/3 - Bug now seems to be fixed. :-)

Tuesday, March 8, 2011

Styling/Skinning Our Application

The styling of our application was a unique design/architectural challenge for the team at TravelTripper.... read all about it in our guest post on the Google's GWT Blog:

At TravelTripper, we make hotel reservation software. Our main product is a "booking engine" called RezTrip, a web based application that allows visitors of a hotel’s website to directly book a stay with that hotel.

As GWT applications go, we think RezTrip, when it comes to the question of styling, presents an interesting departure from traditional development. As a "white label" application, we needed to create our app in such a way that allows our hotel clients the ability to customize not only the "frame" around the application, but also the internal style of the application itself, such as fonts, colors, etc.

In other words, each hotel needs the ability to create their own custom header, footer, or sidebar and have it wrap the booking "application" portion of the page. Furthermore, each hotel needs to be able to change all the colors, fonts, and even some icons within the application.

The desired end result is a single booking engine application, running on multiple web sites, but always mimicking the look and feel of each individual hotel site.

Read the whole article at: Styling and Skinning Your Apps With GWT