Gecko reflow visulation

What is a reflow? « DougT’s Blog

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