38 Part II — Getting Inside Gmail
You’ll notice when you read through this code that what look like links (the
Inbox, Starred, Sent Mail, and so on) actually aren’t. They’re just plain text
wrapped in spans that provide just enough styling to make them look like links:
They’re underlined, the mouse pointer changes, and so on. This is just another
symptom of how cunning the Gmail application is. I’ll be explaining all of this in
Chapter 5. Just so you know.The styling is simple here. After the Compose Message link (that’s not, as I just
said, a link in the sense of <a href=””></a>but rather just the plain text styled
up to look like one), there’s a table containing only the Inbox link and new mail
count and then a succession of divs with class nl, containing spans with each of
the menu options.Then there’s another non-link link to the Contacts functionality, and another table
used to produce the label box. With labels defined, as you will see later, this table
has more content. Finally, after the table, is a div called ilcontaining the invitation
link. (My bet is that ilstands for Invitation Link, but ignorance of such things
is the mark of the reverse engineer.) As you will have noticed by now, Gmail is
built with very small names for all of the divs and spans. This is also true of the
JavaScript functions covered in the next chapter. This is because Gmail is serving
these pages millions of times a day, and the bandwidth saved by dropping every-
thing down to one- or two-letter variable names is well worth the obfuscation.Onward, then, to the real meat of the page.The Activity Area
Right in the middle of the page, surrounded with a blue border, is what I’ll call
the central activity area. It’s in this section that the majority of your work within
Gmail is done: writing and reading mail, for example. It looks like Figure 4-8.FIGURE4-8: The central activity area