Web page layout in Mozilla

Mozilla Online Ltd. (谋智网络), Běijīng, China

Saturday, September 8, 2007, 15:00 CST

Web standards for Layout

document formats
scripting
presentation

Web standards for Layout

document formats
scripting
presentation

Origins

earlier computer document formats (for paper)
Programming languages
Paper document presentation
User-interface design?

Origins

earlier computer document formats (for paper)
Programming languages
Paper document presentation
User-interface design?

Traditional document layout

Image of Rosetta Stone, with lines of text

Traditional document layout

Traditional document layout

Image of part of Strasbourg Oaths, with lines of text

Traditional document layout

Traditional document layout

Image of Chinese calligraphy, showing vertical lines of text

Traditional document layout

Traditional document layout, enhanced

Image of Gutenberg Bible, showing two columns of text, with some enhanced first-letter effects

Traditional document layout, on the Web

W3C HTML4 specification, showing traditional document layout

Traditional document layout, on the Web

W3C CSS2 specification, showing traditional document layout with tables

Traditional document layout for user interface

W3C TR page, showing mostly traditional document layout

User interface layout

Image of GNOME desktop background preferences, showing a dialog that behaves well when resized

User interface layout

Image of Firefox browser, showing a window that behaves well when resized

Document formats

HTML
XUL
SVG

Document formats: Trees

<html>
  <head>
    <title>A few quotes</title>
  </head>
  <body>
    <p class="emph">
      Franklin said that <q>A penny
      saved is a penny earned.</q>
    </p>
    <p>
      FDR said <q>We have nothing to
      fear but <span class="emph">fear
      itself.</span></q>
    </p>
  </body>
</html>

Document formats: Trees

		html
	↙	↓
head		body
↓		↓	↘
title		p class="emph"		p
		↓		↓
		q		q
				↓
				span class="emph"

Document formats: Trees

Parser
Content tree / Object model

Document formats: Parsing

mozilla/parser/
- Web-compatible HTML: htmlparser/
- XML: expat/
- XML: xml/
nsIContentSink (or nsISAXContentHandler) implementations actually build the data structures

Document formats: Parsing: Future

HTML5: improved interoperability of parsing
- Need better tests

Document formats: content tree

element-specific behavior (other than presentation)
Class hierarchy for APIs and what needs to be stored
exposed to scripting APIs
mozilla/content/base/
mozilla/content/html/
mozilla/content/xul/
mozilla/content/svg/

What do content nodes hold?

everything we store from the markup

<html>
  <head>
    <title>A few quotes</title>
  </head>
  <body>
    <p class="emph">
      Franklin said that <q>A penny
      saved is a penny earned.</q>
    </p>
    <p>
      FDR said <q>We have nothing to
      fear but <span class="emph">fear
      itself.</span></q>
    </p>
  </body>
</html>

What do content nodes hold?

form state

What do content nodes hold?

results of script modifications to that state

A table

What else uses content nodes?

DOM event propagation
XUL overlays, templates
CSS, and thus layout

Cascading Style Sheets

Set of W3C specifications for presentation
CSS processing model describes even how HTML that doesn't use CSS is presented
Thus, Mozilla's layout code is primarily an implementation of CSS.

Frame tree

Like the content tree, but for what we present rather than what was in the markup
Represents what CSS calls a box
class hierarchy based on what is rendered
0:1, 1:1, many:1

Layout

Style computation
Frame construction
Reflow
Painting

Style Computation

layout/style/
Implements CSS up to the computed value
But CSS also defines behavior for properties, not just computed values

Frame construction

layout/base/nsCSSFrameConstructor.cpp
layout/base/nsFrameManager.cpp
Create style context, then create frame
Manage dynamic changes

Reflow

Compute positions of frames
- every frame has a rect
intrinsic width computation is separate
Part of the frame classes (layout/generic/, etc.)

Intrinsic sizes

preferred width

Intrinsic sizes

minimum width

Painting

Build display list
- nsIFrame::BuildDisplayList
- Also used for event targeting
Render display list elements in 2-D graphics API

Graphics

Graphics API to hide differences between platforms
gfx/src/ is old graphics API
gfx/thebes/ is new graphics API, on top of cairo
gfx/cairo/ contains cairo
gfx/src/thebes/ implements old API on top of new

Scripting

Making dynamic changes to a Web page after it has loaded
Javascript language (ECMA-262) independent of Web browsers (js/src/)
DOM specs (and newer specs from Web API WG) describe object model exposed to script
Implementations of DOM interfaces done in XPCOM
XPConnect (js/src/xpconnect/) connects Javascript to XPCOM
Code specific to Web browser scripting environment (e.g., window) and glue code in dom/

Web page layout in Mozilla

L. David Baron

Mozilla Corporation

dbaron@dbaron.org

Mozilla Online Ltd. (谋智网络), Běijīng, China

Saturday, September 8, 2007, 15:00 CST

Web standards for Layout

Web standards for Layout

Origins

Origins

Traditional document layout

Traditional document layout

Traditional document layout

Traditional document layout

Traditional document layout

Traditional document layout

Traditional document layout, enhanced

Traditional document layout, on the Web

Traditional document layout, on the Web

Traditional document layout for user interface

User interface layout

User interface layout

Document formats

Document formats: Trees

Document formats: Trees

Document formats: Trees

Document formats: Parsing

Document formats: Parsing: Future

Document formats: content tree

What do content nodes hold?

What do content nodes hold?

What do content nodes hold?

What else uses content nodes?

Cascading Style Sheets

Frame tree

Layout

Style Computation

Frame construction

Reflow

Intrinsic sizes

Intrinsic sizes

Painting

Graphics

Scripting