Hacking Gmail

F
IGURE
4-1: A simple Gmail Inbox
09_59611x ch04.qxp  11/28/05  11:12 PM  Page 30

---

31
Chapter 4 — Skinning Gmail
F
IGURE
4-2: What the DOM 
inspector tells you about the Inbox
F
IGURE
4-3: The first frame’s structure showing 
class names
There’s a great deal going on here, much of which will be revisited over the
course of this book. For now, you need to keep drilling down to the interface itself.
09_59611x ch04.qxp  11/28/05  11:12 PM  Page 31

---

32
Part II — Getting Inside Gmail
To see which of these divs is the mother lode, use the Web Developer Extension
to Firefox to turn off the styling (click on the Disable menu, the first on the left,
and then Disable Styles), outline the block level elements in red, and display
their names. Doing this, you get the horrible Figure 4-4.
It’s very plain from Figure 4-4 that the div called 
d_tlist2
is the one you’re
really interested in. It’s the one that isn’t empty, which is something of a giveaway.
Using the DOM inspector, you can drill down further. Notice that 
d_tlist2
contains an iframe, called 
tlist
, and that that iframe, when opened in a new
DOM inspector, looks like Figure 4-5.
You can also see from the DOM inspector that the iframe that makes
up this interface is addressed as follows:
http://gmail.google.
com/gmail?search=inbox&view=tl&start=0&init=1&zx=3177c401850460
90895581735
.
F
IGURE
4-4: Gmail with no styling . . . quite ugly
09_59611x ch04.qxp  11/28/05  11:12 PM  Page 32

---

33
Chapter 4 — Skinning Gmail
F
IGURE
4-5: Gmail’s Inbox exposed in 
the DOM inspector
Ferret that bit of information away for the moment. It will come in handy.
Meanwhile, back at the browser, you can dump the contents of this page from
the DOM inspector to a text editor. Remember that although this all seems a bit
long-winded, you cannot do it just by using View Source: Most of the markup is
created by JavaScript, and you’ll get to see only some of the JavaScript if you do
that. You needed to use the DOM inspector to get to the actual code that the
browser is rendering and displaying on your screen. Rather than subject you, dear
readers, to the horrors of 14 pages of HTML here, I’ve placed the entire listing in
Appendix A. Before moving on to the style sheet’s nuts and bolts, consider turn-
ing to Appendix A and perusing Listing A-1 first.
To make things a bit easier, let me strip out the JavaScript and isolate the style
sheet, tidy the whole thing up a bit, and walk through the document showing you
what each section does. From the top, then.
The Top Section
Figure 4-6 shows the top section of the Gmail Inbox, with the table elements arti-
ficially outlined with dotted lines.
F
IGURE
4-6: The Gmail Inbox’s top section, showing table elements
09_59611x ch04.qxp  11/28/05  11:12 PM  Page 33

---

34