The “Break it Down” Blog

Thanks to Grant Gochnauer for sending in a sweet link with some awesome animations by Satoshi Ueyama that show how the Gecko web page rendering engine (used in Mozilla/Firefox) reflows a webpage and essentially renders it on the fly as the HTML streams down the engine positions it and makes heads or tails of it.

Here’s a quick example:

The badass part was how Satoshi went about creating these animations, here’s a snippet (minus the code) to get an idea of how hardcore this was:

First, he builds Mozilla so that the layout portions (nsIFrame::SetRect, nsIFrame::SetSize, nsIFrame;;SetPosition, PresShell::DoReflow, etc) are set to output to the log file.

He then gives an example of the log of each of the frame movements from Reflow.

He then makes the video animation (for Google Video he suggests Ruby+Ruby/SDL, for the video from Mozilla 24 he used C+++Direct3d.) As memory address is outputted to the log each frame can be distinct.

The behavior of each frame in chronological order is reproducible as the log has each frame’s memory. (For instance, in tracking the frame “address”:”0×04FE41A8?, you can reproduce that frame’s behavior chronologically.

So yea… Satoshi essentially wins at the internet for that one. I probably just would have resorted to recording my screen with a high speed video camera and playing it back as the best idea I would have to create these… fortunately Satoshi created them, and not me

Thanks DougT!