Part II — Getting Inside Gmail F IGURE 4-7: The Gmail navigation menu The code that produces this import part of the page is here, in Listing 4-2.
Listing 4-2: The HTML That Produces the Gmail Navigation Menu
“color: rgb(170, 0, 0);” class=”ilc” id=”il”>Invite 4
friends
to Gmail
09_59611x ch04.qxp 11/28/05 11:12 PM Page 37
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
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
il
containing the invitation
link. (My bet is that
il
stands 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.
F IGURE 4-8: The central activity area 09_59611x ch04.qxp 11/28/05 11:12 PM Page 38
39 Chapter 4 — Skinning Gmail The central activity area is controlled by the code in Listing 4-3.
Listing 4-3: The Central Activity Area in HTML
