layout/doc/frame_reflow_debug.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   2 <html>
   3  <head>
   4  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
   5   <style type="text/css">
   6   body {font-family:arial}
   7 .log {background-color:silver; color:blue}
   8   </style>
   9   <title> Debugging Frame Reflow</title>
  10  </head>
  11  <body>
  12 <h1>Debugging Frame Reflow HowTo</h1>
  13 <h2>General Overview</h2>
  14 <p> The frame reflow can be logged with the debug capabilities implemented in <a href="http://lxr.mozilla.org/seamonkey/source/layout/html/base/src/nsFrame.cpp"><code>nsFrame.cpp</code></a>.
  15 It provides the following information for each frame at the
  16 start of its reflow
  17 <ul>
  18 <li>reflow reason
  19 <li>available width, available height
  20 <li>computed width, computed height
  21 <li>the previous and the next frame in flow
  22 <li>and a count number.
  23 </ul>
  24 <p>When the frame's reflow is finished the following information is displayed :</p>
  25 <ul>
  26 <li>reflow metric (desired)  width, height
  27 <li>max. element size (MES) width
  28 <li>maximum Width
  29 <li>frame status
  30 <li>overflow area
  31 </ul>
  32
  33 <h2>Getting the log</h2>
  34 <ul>
  35 <li>Make sure that your build is a <b>debug</b> build.
  36 <li>Create a text file (for instance <code>reflow_rules.txt</code>).
  37 <li>Enter this line  in the text file <pre>* 1</pre>
  38 <li>Save the text file in the <code>%DIST%</code> directory
  39 <li>Go to the <code>%DIST%</code> directory
  40 <li>enter from command line: <code>set GECKO_DISPLAY_REFLOW_RULES_FILE=reflow_rules.txt</code>
  41 <li> Run <code>viewer &gt; logfile.txt</code> and load your testcase. The
  42 logfile will contain all the promised information.
  43 </ul>
  44 <h2>Log File analyis</h2>
  45 <p>The logfile for a simple table like</p>
  46 <pre>
  47 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  48 &lt;html&gt;
  49 &lt;head&gt;
  50   &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;
  51 &lt;/head&gt;
  52 &lt;body&gt;
  53 &lt;table width="100"&gt;
  54   &lt;tbody&gt;
  55     &lt;tr&gt;
  56       &lt;td&gt;foo&lt;/td&gt;
  57     &lt;/tr&gt;
  58   &lt;/tbody&gt;
  59 &lt;/table&gt;
  60 &lt;/body&gt;
  61 &lt;/html&gt;
  62 </pre>
  63
  64 <p> will create the following log:</p>
  65 <table class="log"><tr><td>
  66 <pre>
  67 VP 00B97C30 r=0 a=9180,4470 c=9180,4470 cnt=856
  68  scroll 00B97EE0 r=0 a=9180,4470 c=9180,4470 cnt=857
  69  scroll 00B97EE0 r=0 a=9180,4470 c=9180,4470 cnt=858
  70   canvas 00B97C6C r=0 a=9180,UC c=9180,4470 cnt=859
  71    area 02D7AFE4 r=0 a=9180,UC c=9180,UC cnt=860
  72     text 02D7B150 r=0 a=9180,UC c=UC,UC cnt=861
  73     text 02D7B150 d=0,0
  74     block 02D7B210 r=0 a=9180,UC c=8940,UC cnt=862
  75     block 02D7B210 d=8940,0
  76    area 02D7AFE4 d=9180,120
  77   canvas 00B97C6C d=9180,4470
  78  scroll 00B97EE0 d=9180,4470
  79  scroll 00B97EE0 d=9180,4470
  80 VP 00B97C30 d=9180,4470
  81 VP 00B97C30 r=1 a=9180,4470 c=9180,4470 cnt=863
  82  scroll 00B97EE0 r=1 a=9180,4470 c=9180,4470 cnt=864
  83  scroll 00B97EE0 r=1 a=9180,4470 c=9180,4470 cnt=865
  84   canvas 00B97C6C r=1 a=9180,UC c=9180,4470 cnt=866
  85    area 02D7AFE4 r=1 a=9180,UC c=9180,UC cnt=867
  86     block 02D7B210 r=1 a=9180,UC c=8940,UC cnt=868
  87      text 02D7B3F8 r=0 a=8940,UC c=UC,UC cnt=869
  88      text 02D7B3F8 d=0,0
  89      tblO 02D7B5F0 r=0 a=8940,UC c=0,0 cnt=870
  90       tbl 02D7B7EC r=0 a=8940,UC c=1500,UC cnt=871
  91        rowG 00B984A4 r=0 a=UC,UC c=UC,UC cnt=872
  92         row 02D7BAF8 r=0 a=UC,UC c=UC,UC cnt=873
  93          cell 02D7BC98 r=0 a=UC,UC c=UC,UC cnt=874
  94           block 02D7BCF8 r=0 a=UC,UC c=UC,UC cnt=875
  95            text 02D7BE84 r=0 a=UC,UC c=UC,UC cnt=876
  96            text 02D7BE84 d=300,285 me=300
  97           block 02D7BCF8 d=300,300 me=300
  98          cell 02D7BC98 d=330,330 me=330
  99         row 02D7BAF8 d=UC,330
 100        rowG 00B984A4 d=UC,330
 101        colG 02D7BFB0 r=0 a=UC,UC c=UC,UC cnt=877
 102         col 02D7C0D8 r=0 a=0,0 c=1500,UC cnt=878
 103         col 02D7C0D8 d=0,0
 104        colG 02D7BFB0 d=0,0
 105        rowG 00B984A4 r=2 a=1500,UC c=1500,UC cnt=879
 106         row 02D7BAF8 r=2 a=1500,UC c=1500,UC cnt=880
 107          cell 02D7BC98 r=2 a=1440,UC c=1410,UC cnt=881
 108           block 02D7BCF8 r=2 a=1410,UC c=1410,UC cnt=882
 109           block 02D7BCF8 d=1410,300
 110          cell 02D7BC98 d=1440,330
 111         row 02D7BAF8 d=1500,330
 112        rowG 00B984A4 d=1500,330
 113        colG 02D7BFB0 r=2 a=1500,UC c=1500,UC cnt=883
 114         col 02D7C0D8 r=0 a=0,0 c=1500,UC cnt=884
 115         col 02D7C0D8 d=0,0
 116        colG 02D7BFB0 d=0,0
 117       tbl 02D7B7EC d=1500,390
 118      tblO 02D7B5F0 d=1500,390
 119      text 02D7C130 r=0 a=8940,UC c=UC,UC cnt=885
 120      text 02D7C130 d=0,0
 121     block 02D7B210 d=8940,390
 122    area 02D7AFE4 d=9180,630
 123   canvas 00B97C6C d=9180,4470
 124  scroll 00B97EE0 d=9180,4470
 125  scroll 00B97EE0 d=9180,4470
 126 VP 00B97C30 d=9180,4470
 127 </pre>
 128 </td></tr></table>
 129 <p>
 130 The first line shows the reflow of the viewport (<code class="log">VP</code>). This viewport has the address <code class="log">00B97C30</code>. It is the initial reflow: <code class="log">r=0</code>. Other reflow reasons are: </p>
 131 <table>
 132 <tr><td>1</td><td>incremental reflow</td></tr>
 133 <tr><td>2</td><td>resize reflow</td></tr>
 134 <tr><td>3</td><td>style change reflow</td></tr>
 135 <tr><td>4</td><td>dirty reflow.</td></tr>
 136 </table>
 137
 138 <p>The available width is 9180 twips. The available height is 4470 twips (<code class="log">a=9180,4470</code>). The computed width is 9180 twips. The computed height is 4470 twips (<code class="log">c=9180,4470</code>). The line count is 856 (<code  class="log">cnt=856</code>).
 139 <p>
 140 Below this is a line that reads:<p><code class="log">tblO 02D7B5F0 r=0 a=8940,UC c=0,0 cnt=870</code></p><p> Here the <code class="log">UC</code> shows that on initial reflow the available height for the outer table frame is unconstrained.
 141 <p>
 142 The table cell requires its children to compute the MES. It is reported back from the block as:
 143 <p><code class="log">block 02D7BCF8 d=300,300 me=300</code></p>
 144 <p>The  block max. element size is 300 twips.
 145 <p> The second table reflow is started at
 146 <p><code class="log">rowG 00B984A4 r=2 a=1500,UC c=1500,UC cnt=879</code></p>
 147 <p>where the previous information is used.
 148 The block has been required to compute the max. element size only once and it reports now:
 149 <p> <code class="log">block 02D7BCF8 d=1410,300</code></p>
 150 <p>The block shows the same address as the previous one.
 151 <p>Frames with children that overflow  the parent will return <code>PR_TRUE</code> from <code>HasOverflowRect()</code>. For these frames
 152 the overflow area  is displayed as  <code class="log">block 025ED8F0 d=8940,1020 o=(0,0) 9180 x 1020</code>. The overflow area is specified as (x,y) origin and width x height.
 153 <p> The reflow finishes at the same level where it started.
 154
 155 <h2>Advanced reflow debugging</h2>
 156 <p>The previously described technique dumps the data for every frame. Sometimes the log is clearer if only the main frames are shown.
 157 The entries in the reflow log can be controlled on a frame level.  For instance adding <code>text 0</code> to the rules in <code>reflow_rules.txt</code> would hide the text entries from the reflow. The display of the following frames can be turned on by adding a line with the frame name and  <code>1</code>  or turned off by adding a line with the frame name and <code>0</code>:</p>
 158 <table cellspacing="5">
 159  <tr><th style="text-align:left">short name</th><th style="text-align:left">layout tag</th></tr>
 160  <tr><td>area</td><td>area</td></tr>
 161  <tr><td>block</td><td>block</td></tr>
 162  <tr><td>br</td><td>br</td></tr>
 163  <tr><td>bullet</td><td>bullet</td></tr>
 164  <tr><td>button</td><td>gfxButtonControl</td></tr>
 165  <tr><td>hr</td><td>hr</td></tr>
 166  <tr><td>frameI</td><td>htmlFrameInner</td></tr>
 167  <tr><td>frameO</td><td>htmlFrameOuter</td></tr>
 168  <tr><td>img</td><td>image</td></tr>
 169  <tr><td>inline</td><td>inline</td></tr>
 170  <tr><td>letter</td><td>letter</td></tr>
 171  <tr><td>line</td><td>line</td></tr>
 172  <tr><td>select</td><td>select</td></tr>
 173  <tr><td>obj</td><td>object</td></tr>
 174  <tr><td>page</td><td>page</td></tr>
 175  <tr><td>place</td><td>placeholder</td></tr>
 176  <tr><td>posInline</td><td>positionedInline</td></tr>
 177  <tr><td>canvas</td><td>canvas</td></tr>
 178  <tr><td>root</td><td>root</td></tr>
 179  <tr><td>scroll</td><td>scroll</td></tr>
 180  <tr><td>caption</td><td>tableCaption</td></tr>
 181  <tr><td>cell</td><td>tableCell</td></tr>
 182  <tr><td>bcCell</td><td>bcTableCell</td></tr>
 183  <tr><td>col</td><td>tableCol</td></tr>
 184  <tr><td>colG</td><td>tableColGroup</td></tr>
 185  <tr><td> tbl</td><td>table</td></tr>
 186  <tr><td>tblO</td><td>tableOuter</td></tr>
 187  <tr><td>rowG</td><td>tableRowGroup</td></tr>
 188  <tr><td>row</td><td>tableRow</td></tr>
 189  <tr><td>textCtl</td><td>textInput</td></tr>
 190  <tr><td>text</td><td>text</td></tr>
 191  <tr><td>VP</td><td>viewport</td></tr>
 192 </table>
 193 <p>Once the problem is reduced to a single frame level, placing a breakpoint at <code>DisplayReflowEnterPrint</code> in <a href="http://lxr.mozilla.org/seamonkey/source/layout/html/base/src/nsFrame.cpp"><code>nsFrame.cpp</code></a> is a very efficient way to step through
 194  the reflow tree.
 195
 196 <h2>Other reflow debug options</h2>
 197
 198 <h3>GECKO_DISPLAY_REFLOW_FLAG_PIXEL_ERRORS</h3>
 199 <p>
 200 Setting this option via <code>set GECKO_DISPLAY_REFLOW_FLAG_PIXEL_ERRORS = 1</code> enables a verification for each coordinate value that the coordinates are aligned at pixel boundaries.
 201 <table class="log"><tr><td>
 202 <pre>
 203               row 0268A594 r=0 a=UC,UC c=UC,20 cnt=870
 204 VALUE 20 is not a whole pixel
 205                cell 0268A6C0 r=0 a=UC,UC c=UC,15 cnt=871
 206                 block 0268A764 r=0 a=UC,UC c=UC,UC cnt=872
 207                 block 0268A764 d=0,0 me=0
 208                cell 0268A6C0 d=0,0 me=0
 209               row 0268A594 d=UC,20
 210 VALUE 20 is not a whole pixel
 211              rowG 0268A02C d=UC,695
 212 VALUE 695 is not a whole pixel</pre>
 213 </td></tr></table>
 214 <p>
 215 While unaligned values at the entrance of a frame reflow can be ignored,  when they appear at the exit of a routine this can cause display errors like stray lines. OS2 is very vulnerable to pixel alignement errors as text is drawn on pixel boundaries.
 216
 217 <h3>GECKO_DISPLAY_REFLOW_INDENT_UNDISPLAYED_FRAMES</h3>
 218 <p>
 219 Setting this option via <code>set GECKO_DISPLAY_REFLOW_INDENT_UNDISPLAYED_FRAMES = 1</code> will cause an advance of the indent even for frames which are blocked via the reflow rules file.
 220  </body>
 221 </html>