Chapter 4 — Skinning Gmail 33
FIGURE4-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.
FIGURE4-6: The Gmail Inbox’s top section, showing table elements