how to make your own Gecko reflow video

Last May, my colleague Doug Turner happened across some videos showing how the Gecko engine does reflow: What is a reflow? < DougT’s Blog

In fact, Doug had stumbled across the work of Satoshi Ueyama (Japanese), a programmer extraordinaire from Japan, who had presented those videos at the Mozilla 24 event in Tokyo in 2007.

Many people were rightly fascinated by watching the process by which a web page is laid out. Being an open source web page rendering engine, Gecko is one of the few platforms where one can modify the source code to do interesting applications such as this.

I asked Ueyama-san to provide additional information on how anyone could do this themselves and he’s kindly provided some instructions and updated his modified Gecko build for anyone to make such a video.

I have rewritten the animation generating program for the latest (FF3.1b3) Gecko / Shiretoko builds.

The updated video is available on YouTube:

First, build Firefox 3.1 Beta 3 with my modified layout module, which can be found under the ‘layout’ folder in the attachment.

Then run the build to output a layout progress log as C:\mozilla-build\log\out.txt.

You can change the destination with a constant in VisualizeLogger.cpp.

This time the log processing program is written in ActionScript.

Paste part of your log file in LogSource.as and compile ReflowAnimation.as with mxmlc to generate a Flash movie.

To make a movie in MPEG format, compile CaptureDump.mxml for Adobe AIR and run it.

This generates PNG files for each frame under C:\mozilla-build\log\frames.

Now you can convert them to a MPEG movie with ffmpeg.

Sorry for my rough explanation!

A big, big thank you to Satoshi for presenting on Gecko reflow back in 2007 and again for providing an update for Shiretoko as well as the files needed for anyone to do this on their own.

If you make your own Gecko reflow video, please paste a link to it in the comments of this post. Satoshi and other Mozilla developers and community members would be interested to see how Gecko reflows your website.

3 Responses to how to make your own Gecko reflow video

  1. Would love to hear what web designers/developers should do to get content to load fast. From watching these videos it seems that if content needs to be re-flowed it can slow down the overall load of the page substantially.

    Video wish list
    - Acid3
    - Amazon home page
    - CraigsList home Page
    - ESPN home page

    I’m not sure if there are many table/spacer designs still around but seeing how a pure table approach compares with a pure CSS approach would be interesting.

  2. Tried compiling it but stumbled upon a lot of compilation errors. Any chance you can provide us with a precompiled build? Thanks!

  3. Can I download modified and compiled version of Firefox instead of compiling by myself?