Debugging Table Reflow

  • Revision slug: Debugging_Table_Reflow
  • Revision title: Debugging Table Reflow
  • Revision id: 161889
  • Created:
  • Creator: Kohei
  • Is current revision? No
  • Comment Fixed spaces

Revision Content

Reflow

The most efficient tool to claim that html-table code is the victim and not the source of layout bugs is a frame reflow debug log. Look there especially how the maxElementsize (MES) and desired size are propagated.

Block Reflow

Another way to debug the reflow process is implemented inside {{template.Source("layout/html/base/src/nsBlockFrame.cpp", "nsBlockFrame.cpp")}}. It can be invoked by

set GECKO_BLOCK_DEBUG_FLAGS=reflow

The available options are:

  • reflow
  • really-noisy-reflow
  • max-element-size
  • space-manager
  • verify-lines
  • damage-repair
  • lame-paint-metrics
  • lame-reflow-metrics
  • disable-resize-opt

These options can be combined with a comma separated list Messages generated by the reflow switch:

  • Block(div)(1)@00BE5AC4: reflowing dirty lines computedWidth=9000 computedHeight=1500
    • this message is generated inside of nsresult nsBlockFrame::ReflowDirtyLines(nsBlockReflowState& aState)
    • it first shows the Block ID and Address
    • and then the computed width and Height from the HTMLReflowState.

DEBUG_TABLE_STRATEGY

Editor's Note: the following examples are not shown correctly due to the wiki's technical constraint.

The table layout strategy can be visualized by defining in the {{template.Source("layout/html/table/src/Makefile.in", "makefiles")}} the constant DEBUG_TABLE_STRATEGY.If one takes for instance the following table

Code:

<table border width="300">
 <colgroup>
  <col>
  <col width="50%">
  <col width="1*">
  <col>
 </colgroup>
 <tr>
  <td style="width:80px">cell 1</td>
  <td>cell 2</td>
  <td>cell 3</td>
  <td>cell 4</td>
 </tr>
</table>

Rendering:

<colgroup><col><col width="50%"><col width="1*"><col></colgroup>
cell 1cell 2cell 3cell 4

It will produce the following log at the entrance of AssignNonPctColWidths:

AssignNonPctColWidths en max=4500 count=0 
***START TABLE DUMP*** 
mColWidths=-1 -1 -1 -1 

 col frame cache ->
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP**
***END TABLE DUMP***

The en stands for entrance (ex for leaving a routine). The first line of the data dump shows that no width has yet been assigned to the columns mColWidths=-1 -1 -1 -1, -1 stands for:

#define WIDTH_NOT_SET   -1

This is followed by a reference to the column frame pointers:

col frame cache ->
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 

This is followed by the information which width has been set for each column. The index of the column, whether it is anonymous and what kind of constrained has been appliedcolIndex=0 isAnonymous=0 constraint=0. The following constraint types are known:

eNoConstraint          = 0,
ePixelConstraint       = 1,      // pixel width 
ePercentConstraint     = 2,      // percent width
eProportionConstraint  = 3,      // 1*, 2*, etc. cols attribute assigns 1*
e0ProportionConstraint = 4       // 0*, means to force to min width

After this follows the width information for each column:

widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 

The table code knows ten different width's:

#define NUM_WIDTHS       10
#define NUM_MAJOR_WIDTHS 3 // MIN, DES, FIX
#define MIN_CON          0 // minimum width required of the content + padding
#define DES_CON          1 // desired width of the content + padding
#define FIX              2 // fixed width either from the content or cell, col, etc. + padding
#define MIN_ADJ          3 // minimum width + padding due to col spans
#define DES_ADJ          4 // desired width + padding due to col spans
#define FIX_ADJ          5 // fixed width + padding due to col spans
#define PCT              6 // percent width of cell or col 
#define PCT_ADJ          7 // percent width of cell or col from percent colspan
#define MIN_PRO          8 // desired width due to proportional <col>s or cols attribute
#define FINAL            9 // width after the table has been balanced, considering all of the others

In the last log snippet none of these width's has been set. Leaving AssignNonPctColWidths shows that already to all columns a width of 360 twips has been assigned

AssignNonPctColWidths ex
***START TABLE DUMP*** 
mColWidths=360 360 360 360 

 col frame cache ->
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=360 540 1230 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=3
  widths=360 540 -1 -1 -1 -1 -1 -1 540 360  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP**
***END TABLE DUMP***

The first column has already the minimum content width, the table column can't shrink below that, the desired content width of 540 twips, that's the space to layout cell 1 without wrapping the text and the 1230 which correspond to the style="width:80px" at the first cell. At this step the final size is 360 twips.

MIN_CON DES_CON FIX MIN_ADJ DES_ADJ FIX_ADJ PCT PCT_ADJ MIN_PRO FINAL
360 540 1230 -1 -1 -1 -1 -1 -1 360

There was no change till the entrance of BalanceColumnWidths

BalanceColumnWidths en count=1
***START TABLE DUMP*** 
mColWidths=360 360 360 360 

 col frame cache ->
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=360 540 1230 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=3
  widths=360 540 -1 -1 -1 -1 -1 -1 540 360  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP**
***END TABLE DUMP***

But at the end the final distribution between the columns has been reached.

BalanceColumnWidths ex
***START TABLE DUMP*** 
mColWidths=1230 2160 465 465 

 col frame cache ->
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=360 540 1230 -1 -1 -1 -1 -1 -1 1230  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 2160 -1 -1 2160  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=3
  widths=360 540 -1 -1 -1 -1 -1 -1 540 465  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 465  **END COL DUMP**
***END TABLE DUMP***

The column dump is implemented in nsTableColFrame.cpp in the routine:void nsTableColFrame::Dump(PRInt32 aIndent).

DEBUG_TABLE_REFLOW_TIMING

needs to be written

Original Document Information

  • Author(s): Bernd Mielke
  • Other Contributors: Bernd Mielke, Josh Soref
  • Last Updated Date: November 20, 2005

Revision Source

<h3 name="Reflow"> Reflow </h3>
<p>The most efficient tool to claim that html-table code is the victim and not the source of layout bugs is a <a href="en/Debugging_Frame_Reflow">frame reflow debug log</a>. Look there especially how the maxElementsize (MES) and desired size are propagated.
</p>
<h3 name="Block_Reflow"> Block Reflow </h3>
<p>Another way to debug the reflow process is implemented inside {{template.Source("layout/html/base/src/nsBlockFrame.cpp", "nsBlockFrame.cpp")}}. It can be invoked by
</p><p><code>set GECKO_BLOCK_DEBUG_FLAGS=reflow</code>
</p><p>The available options are:
</p>
<ul><li> <code>reflow</code>
</li><li> <code>really-noisy-reflow</code>
</li><li> <code>max-element-size</code>
</li><li> <code> space-manager</code>
</li><li> <code>verify-lines</code>
</li><li> <code>damage-repair</code>
</li><li> <code>lame-paint-metrics</code>
</li><li> <code>lame-reflow-metrics</code>
</li><li> <code>disable-resize-opt</code>
</li></ul>
<p>These options can be combined with a comma separated list Messages generated by the <code>reflow</code> switch:
</p>
<ul><li> <code> Block(div)(1)@00BE5AC4: reflowing dirty lines computedWidth=9000 computedHeight=1500</code>
<ul><li> this message is generated inside of <code>nsresult nsBlockFrame::ReflowDirtyLines(nsBlockReflowState&amp; aState)</code>
</li><li> it first shows the Block ID and Address
</li><li> and then the computed width and Height from the HTMLReflowState.
</li></ul>
</li></ul>
<h3 name="DEBUG_TABLE_STRATEGY"> DEBUG_TABLE_STRATEGY </h3>
<div class="note">
<p>Editor's Note: the following examples are not shown correctly due to the wiki's technical constraint.
</p>
</div>
<p>The table layout strategy can be visualized by defining in the {{template.Source("layout/html/table/src/Makefile.in", "makefiles")}} the constant DEBUG_TABLE_STRATEGY.If one takes for instance the following table
</p><p>Code:
</p>
<pre>&lt;table border width="300"&gt;
 &lt;colgroup&gt;
  &lt;col&gt;
  &lt;col width="50%"&gt;
  &lt;col width="1*"&gt;
  &lt;col&gt;
 &lt;/colgroup&gt;
 &lt;tr&gt;
  &lt;td style="width:80px"&gt;cell 1&lt;/td&gt;
  &lt;td&gt;cell 2&lt;/td&gt;
  &lt;td&gt;cell 3&lt;/td&gt;
  &lt;td&gt;cell 4&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>Rendering:
</p>
&lt;colgroup&gt;&lt;col&gt;&lt;col width="50%"&gt;&lt;col width="1*"&gt;&lt;col&gt;&lt;/colgroup&gt;<table border="border" width="300"><tbody><tr><td style="width:80px">cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td></tr></tbody></table>
<p>It will produce the following log at the entrance of <code>AssignNonPctColWidths</code>:
</p>
<pre>AssignNonPctColWidths en max=4500 count=0 
***START TABLE DUMP*** 
mColWidths=-1 -1 -1 -1 

 col frame cache -&gt;
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP**
***END TABLE DUMP***
</pre>
<p>The <code>en</code> stands for entrance (<code>ex</code> for leaving a routine). The first line of the data dump shows that no width has yet been assigned to the columns <code>mColWidths=-1 -1 -1 -1</code>, <code>-1</code> stands for:
</p>
<pre>#define WIDTH_NOT_SET   -1
</pre>
<p>This is followed by a reference to the column frame pointers:
</p>
<pre>col frame cache -&gt;
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
</pre>
<p>This is followed by the information which width has been set for each column. The index of the column, whether it is anonymous and what kind of constrained has been applied<code>colIndex=0 isAnonymous=0 constraint=0</code>. The following constraint types are known:
</p>
<pre>eNoConstraint          = 0,
ePixelConstraint       = 1,      // pixel width 
ePercentConstraint     = 2,      // percent width
eProportionConstraint  = 3,      // 1*, 2*, etc. cols attribute assigns 1*
e0ProportionConstraint = 4       // 0*, means to force to min width
</pre>
<p>After this follows the width information for each column:
</p>
<pre>widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 
</pre>
<p>The table code knows ten different width's:
</p>
<pre>#define NUM_WIDTHS       10
#define NUM_MAJOR_WIDTHS 3 // MIN, DES, FIX
#define MIN_CON          0 // minimum width required of the content + padding
#define DES_CON          1 // desired width of the content + padding
#define FIX              2 // fixed width either from the content or cell, col, etc. + padding
#define MIN_ADJ          3 // minimum width + padding due to col spans
#define DES_ADJ          4 // desired width + padding due to col spans
#define FIX_ADJ          5 // fixed width + padding due to col spans
#define PCT              6 // percent width of cell or col 
#define PCT_ADJ          7 // percent width of cell or col from percent colspan
#define MIN_PRO          8 // desired width due to proportional &lt;col&gt;s or cols attribute
#define FINAL            9 // width after the table has been balanced, considering all of the others
</pre>
<p>In the last log snippet none of these width's has been set. Leaving AssignNonPctColWidths shows that already to all columns a width of 360 twips has been assigned
</p>
<pre>AssignNonPctColWidths ex
***START TABLE DUMP*** 
mColWidths=360 360 360 360 

 col frame cache -&gt;
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=360 540 1230 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=3
  widths=360 540 -1 -1 -1 -1 -1 -1 540 360  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP**
***END TABLE DUMP***
</pre>
<p>The first column has already the minimum content width, the table column can't shrink below that, the desired content width of <code>540</code> twips, that's the space to layout <code>cell 1</code> without wrapping the text and the <code>1230</code> which correspond to the <code>style="width:80px"</code> at the first cell. At this step the final size is <code>360</code> twips.
</p>
<table cellpadding="8">
<tbody><tr>
<th> MIN_CON
</th><th> DES_CON
</th><th> FIX
</th><th> MIN_ADJ
</th><th> DES_ADJ
</th><th> FIX_ADJ
</th><th> PCT
</th><th> PCT_ADJ
</th><th> MIN_PRO
</th><th> FINAL
</th></tr>
<tr align="center">
<td> 360
</td><td> 540
</td><td> 1230
</td><td> -1
</td><td> -1
</td><td> -1
</td><td> -1
</td><td> -1
</td><td> -1
</td><td> 360
</td></tr></tbody></table>
<p>There was no change till the entrance of <code>BalanceColumnWidths</code>
</p>
<pre>BalanceColumnWidths en count=1
***START TABLE DUMP*** 
mColWidths=360 360 360 360 

 col frame cache -&gt;
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=360 540 1230 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=3
  widths=360 540 -1 -1 -1 -1 -1 -1 540 360  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 360  **END COL DUMP**
***END TABLE DUMP***
</pre>
<p>But at the end the final distribution between the columns has been reached.
</p>
<pre>BalanceColumnWidths ex
***START TABLE DUMP*** 
mColWidths=1230 2160 465 465 

 col frame cache -&gt;
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=360 540 1230 -1 -1 -1 -1 -1 -1 1230  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 2160 -1 -1 2160  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=3
  widths=360 540 -1 -1 -1 -1 -1 -1 540 465  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=360 540 -1 -1 -1 -1 -1 -1 -1 465  **END COL DUMP**
***END TABLE DUMP***
</pre>
<p>The column dump is implemented in <code>nsTableColFrame.cpp</code> in the routine:<code>void nsTableColFrame::Dump(PRInt32 aIndent)</code>.
</p>
<h3 name="DEBUG_TABLE_REFLOW_TIMING"> DEBUG_TABLE_REFLOW_TIMING </h3>
<p>needs to be written
</p>
<div class="originaldocinfo">
<h2 name="Original_Document_Information"> Original Document Information </h2>
<ul><li> Author(s): Bernd Mielke
</li><li> Other Contributors: Bernd Mielke, Josh Soref
</li><li> Last Updated Date: November 20, 2005
</li></ul>
</div>
Revert to this revision