What is a reflow?

Reflow is the process by which the geometry of the layout engine’s formatting objects are computed.  Last week, I was searching around and stumbled on these really cool visuals of what a reflow looks like.  If you’re a visual person, you will dig these:

Reflow of Mozilla.org:

[googlevideo=http://video.google.com/googleplayer.swf?docid=1020647662203348823]

Reflow of Google.co.jp:

[googlevideo=http://video.google.com/googleplayer.swf?docid=-1471976166301235697]

Reflow of Wikipedia:

[googlevideo=http://video.google.com/googleplayer.swf?docid=-5863446593724321515]

If you produced these, kudos!  If you know how to produce such things, please drop a note!

Update:

Satoshi Ueyama is the author of this cool demo.  He sent Gen a note on how he did it:

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:

{"event": "MoveFrame", "frame": {"address": "0x04FE41A8", "type":
"TextFrame", "content": {"address": "0x05014150", "type": "other"},
"rect": {"x": 0, "y": 0, "w": 0, "h": 0}}},
{"event": "MoveFrame", "frame": {"address": "0x04FE41A8", "type":
"TextFrame", "content": {"address": "0x05014150", "type": "other"},
"rect": {"x": 0, "y": 0, "w": 0, "h": 0}}},

Here is an example of dump from the termination of the tree structure.

{"event": "FinishReflow", frame:
 {"address": "0x04FE3E28", "type": "ViewportFrame", "content": null,
"children":[
     {"address": "0x04FE4000", "type": "ScrollFrame", "content":
{"address": "0x04FD4858", "type": "element", "tagName": "HTML"},
"children":[
         {"address": "0x04FE43EC", "type": "ScrollbarFrame",
"content": {"address": "0x04FFEFF8", "type": "element", "tagName":
"scrollbar"}, "children":[
             {"address": "0x04FE4578", "type": "BoxFrame", "content":
{"address": "0x04FFE0F8", "type": "element", "tagName":
"xul:scrollbarbutton"} }
     ,
       {"address": "0x04FE47BC", "type": "sliderFrame", "content":
{"address": "0x04FFE278", "type": "element", "tagName": "xul:slider"},
"children":[
                 {"address": "0x05004E6C", "type": "BoxFrame",
"content": {"address": "0x050030E8", "type": "element", "tagName":
"xul:thumb"}, "children":[
                     {"address": "0x05004FDC", "type": "BoxFrame",
"content": {"address": "0x050013F0", "type": "element", "tagName":
"xul:gripper"} }
         ] }

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”:”0x04FE41A8″, you can reproduce that frame’s behavior chronologically.

UPDATE:

New links for the videos (thanks Gen!):

http://www.youtube.com/watch?v=nJtBUHyNBxs
http://www.youtube.com/watch?v=ZTnIxIA5KGw
http://www.youtube.com/watch?v=dndeRnzkJDU