Visual reflow

Reflow is the process of calculating the size of the composite blocks of a Web page.

Satoshi visualized this process taking place in the depths of the Gecko engine. In short, he made "beautiful."


')

Technical details

Satoshi compiled Mozilla so that the latter writes all of its actions to a file in a specific format, like this:

 {"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}}},

Further, he made a video-animation of the whole action.

What happened?

Calculations for wikipedia.org:



Calculations for mozilla.org:



Calculations for the Japanese google.com localization



Visualization plays a significant role in the process of understanding and understanding the mechanisms of operation of a particular system.