Video: Visualizing How Your Browser Sees the Web
The video above show how Mozilla’s reflow tool works. For the unfamiliar, here’s how Mozilla explains the reflow process:
Reflow is the process by which the geometry of the layout engine’s formatting objects are computed. The HTML formatting objects are called frames: a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. A frame is rectangular, with width, height, and an offset from the parent frame that contains it.
Sounds rather dry and boring, which is what makes the video visualization even more amazing.
The videos were highlighted by blogger Doug T, who discovered them on Google video. The videos are part of a talk at the recent Mozilla 24 event in Tokyo. A series of videos from the talk are available as well (in Japanese). There’s also a few more visualization videos available as well.
Although it may not be technically possible, the visualizations would make for a great Firefox add-on.
[via Google Blogoscoped]