mozilla

Compare Revisions

Introduction to Layout in Mozilla

Change Revisions

Revision 161942:

Revision 161942 by Kohei on

Revision 161943:

Revision 161943 by DBaron on

Title:
Introduction to Layout in Mozilla
Introduction to Layout in Mozilla
Slug:
Introduction_to_Layout_in_Mozilla
Introduction_to_Layout_in_Mozilla
Tags:
Gecko
Gecko
Content:

Revision 161942
Revision 161943
tt7    <h3 id="Overview" name="Overview">
8      Overview
9    </h3>
10    <ul>
11      <li>Basic data flow
12      </li>
13      <li>Key data structures
14      </li>
15      <li>Detailed walk-through
16      </li>
17      <li>Incrementalism
18      </li>
19      <li>Future tech-talks
20      </li>
21      <li>Wrap-up, Q&amp;A
22      </li>
23    </ul>
24    <h3 id="Basic_Data_Flow" name="Basic_Data_Flow">
25      Basic Data Flow
26    </h3>
27    <ul>
28      <li>Source document arrives via network APIs
29      </li>
30      <li>Incrementally “pumped” through the single-threaded layo
 >ut engine
31        <ul>
32          <li>Parse, compute style, render; repeat
33          </li>
34          <li>CSS used for rendering <i>all</i> content
35          </li>
36        </ul>
37      </li>
38      <li>Content theoretically separate from “presentation”
39      </li>
40    </ul>
41    <p>
42      <img alt="Image:Gecko_Overview_9.png" fileid="236" src="Fil
 >e:en/Media_Gallery/Gecko_Overview_9.png">
43    </p>
44    <h3 id="Key_Data_Structures" name="Key_Data_Structures">
45      Key Data Structures
46    </h3>
47    <p>
48      <img alt="Image:Gecko_Overview_10.png" fileid="226" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_10.png">
49    </p>
50    <ul>
51      <li>Content node
52        <ul>
53          <li>Elements, attributes, leaves
54          </li>
55          <li>DOM
56          </li>
57        </ul>
58      </li>
59      <li>Frame
60        <ul>
61          <li>Rectangular formatting primitive
62          </li>
63          <li>Geometric information
64          </li>
65          <li>{{ mediawiki.external('0..n') }} per content node
66          </li>
67          <li>2nd thru nth are “continuations”
68          </li>
69        </ul>
70      </li>
71      <li>Style context
72        <ul>
73          <li>Non-geometric information
74          </li>
75          <li>May be shared by adjacent frames
76          </li>
77          <li>Reference counted, owned by frame
78          </li>
79        </ul>
80      </li>
81      <li>View
82        <ul>
83          <li>Clipping, z-order, transparency
84          </li>
85          <li>{{ mediawiki.external('0..1') }} per frame, owned b
 >y frame
86          </li>
87        </ul>
88      </li>
89      <li>Widget
90        <ul>
91          <li>Native window
92          </li>
93          <li>{{ mediawiki.external('0..1') }} per view, owned by
 > view
94          </li>
95        </ul>
96      </li>
97    </ul>
98    <p>
99      <img alt="Image:Gecko_Overview_15.png" fileid="227" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_15.png">
100    </p>
101    <h3 id="Key_Data_Structures_2" name="Key_Data_Structures_2">
102      Key Data Structures
103    </h3>
104    <ul>
105      <li>The <i>document</i> owns the content model, and one or 
 >more <i>presentations</i>
106        <ul>
107          <li>Exposed programmatically via DOM APIs
108          </li>
109        </ul>
110      </li>
111      <li>The <i>presentation</i> owns the frame hierarchy
112        <ul>
113          <li>Frames own the style contexts, views, widgets
114          </li>
115          <li>Presentation has media type, dimensions, etc.
116          </li>
117          <li>May not be directly manipulated
118          </li>
119        </ul>
120      </li>
121    </ul>
122    <h3 id="Detailed_Walk-Through" name="Detailed_Walk-Through">
123      Detailed Walk-Through
124    </h3>
125    <ul>
126      <li>Setting up
127      </li>
128      <li>Content model construction
129      </li>
130      <li>Frame construction
131      </li>
132      <li>Style resolution
133      </li>
134      <li>Reflow
135      </li>
136      <li>Painting
137      </li>
138    </ul>
139    <h3 id="Setting_Up" name="Setting_Up">
140      Setting Up
141    </h3>
142    <ul>
143      <li>Assume basic knowledge of embedding and network APIs (d
 >oc shell, streams)
144      </li>
145      <li>Content DLL auto-registers a <i>Document Loader Factory
 > (DLF)</i>
146        <ul>
147          <li>
148            <code>@mozilla.org/content-viewer-factory/view;1?type
 >=text/html</code>
149          </li>
150          <li>All MIME types mapped to the same class, nsContentD
 >LF
151          </li>
152        </ul>
153      </li>
154      <li>
155        <code>nsDocShell</code>
156        <ul>
157          <li>Receives inbound content via <code>nsDSURIContentLi
 >stener</code>
158          </li>
159          <li>Invokes <code>nsIDLF::CreateInstance</code>, passes
 > MIME type to DLF
160          </li>
161        </ul>
162      </li>
163      <li>nsContentDLF
164        <ul>
165          <li>Creates a <code>nsHTMLDocument</code> object, invok
 >es <code>StartDocumentLoad</code>.
166            <ul>
167              <li>Creates a parser, returned as <code>nsIStreamLi
 >stener</code> back to the docshell
168              </li>
169              <li>Creates a content sink, which is linked to the 
 >parser and the document
170              </li>
171            </ul>
172          </li>
173          <li>Creates a <code>DocumentViewerImpl</code> object, w
 >hich is returned as <code>nsIContentViewer</code> back to the doc
 >shell
174          </li>
175        </ul>
176      </li>
177      <li>
178        <code>DocumentViewerImpl</code> creates pres context and 
 >pres shell
179      </li>
180    </ul>
181    <p>
182      <img alt="Image:Gecko_Overview_19.png" fileid="228" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_19.png">
183    </p>
184    <h3 id="Content_Model_Construction" name="Content_Model_Const
 >ruction">
185      Content Model Construction
186    </h3>
187    <ul>
188      <li>Content arrives from network via <code>nsIStreamListene
 >r::OnDataAvailable</code>
189      </li>
190      <li>Parser tokenizes &amp; processes content; invokes metho
 >ds on <code>nsIContentSink</code> with <i>parser node</i> objects
191        <ul>
192          <li>Some buffering and fixup occurs here
193          </li>
194          <li>
195            <code>OpenContainer</code>, <code>CloseContainer</cod
 >e>, <code>AddLeaf</code>
196          </li>
197        </ul>
198      </li>
199      <li>Content sink creates and attaches content nodes using <
 >code>nsIContent</code> interface
200        <ul>
201          <li>Content sink maintains stack of “live” elements
202          </li>
203          <li>More buffering and fixup occurs here
204          </li>
205          <li>
206            <code>InsertChildAt</code>, <code>AppendChildTo</code
 >>, <code>RemoveChildAt</code>
207          </li>
208        </ul>
209      </li>
210    </ul>
211    <p>
212      <img alt="Image:Gecko_Overview_21.png" fileid="229" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_21.png">
213    </p>
214    <h3 id="Frame_Construction" name="Frame_Construction">
215      Frame Construction
216    </h3>
217    <ul>
218      <li>Content sink uses <code>nsIDocument</code> interface to
 > notify of Δs in content model
219        <ul>
220          <li>
221            <code>ContentAppended</code>, <code>ContentInserted</
 >code>, <code>ContentRemoved</code>
222          </li>
223        </ul>
224      </li>
225      <li>
226        <code>PresShell</code> is registered as document observer
227        <ul>
228          <li>Receives <code>ContentAppended</code>, etc. notific
 >ations
229          </li>
230          <li>Passes these to the style set object, who in turn p
 >asses to the frame constructor
231          </li>
232        </ul>
233      </li>
234      <li>Frame constructor creates frames
235        <ul>
236          <li>
237            <code>ConstructFrameInternal</code> recursively walks
 > content tree, resolves style and creates frames
238          </li>
239          <li>Either created by tag (<code>&lt;select&gt;</code>)
 > or by display type (<code>&lt;p&gt;</code>)
240          </li>
241        </ul>
242      </li>
243      <li>Frame manager maintains mapping from content to frame
244      </li>
245    </ul>
246    <p>
247      <img alt="Image:Gecko_Overview_23.png" fileid="230" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_23.png">
248    </p>
249    <h3 id="Style_Resolution" name="Style_Resolution">
250      Style Resolution
251    </h3>
252    <ul>
253      <li>Compute stylistic information based on the style rules 
 >that apply for the frame’s content node
254      </li>
255      <li>Style data broken into different structures
256        <ul>
257          <li>Display, visibility, font, color, background, …
258          </li>
259          <li>Inherit vs. reset
260          </li>
261        </ul>
262      </li>
263      <li>Style context object is a placeholder for partially com
 >puted stylistic data
264        <ul>
265          <li>Style data is computed lazily, as it is asked for
266          </li>
267        </ul>
268      </li>
269    </ul>
270    <h3 id="Reflow" name="Reflow">
271      Reflow
272    </h3>
273    <ul>
274      <li>Recursively compute geometry (<i>x</i>, <i>y</i>, <i>w<
 >/i>, <i>h</i>) for frames, views, and widgets
275        <ul>
276          <li>Given w &amp; h constraints of “root frame” compute
 > (<i>x</i>, <i>y</i>, <i>w</i>, <i>h</i>) for all children
277          </li>
278          <li>Constraints propagated “down” via <code>nsHTMLReflo
 >wState</code>
279          </li>
280          <li>Desired size returned “up” via <code>nsHTMLReflowMe
 >trics</code>
281          </li>
282        </ul>
283      </li>
284      <li>Basic pattern
285        <ul>
286          <li>Parent frame initializes child reflow state (availa
 >ble <i>w</i>, <i>h</i>); places child frame (<i>x</i>, <i>y</i>);
 > invokes child’s <code>Reflow</code> method
287          </li>
288          <li>Child frame computes desired (<i>w</i>, <i>h</i>), 
 >returns via reflow metrics
289          </li>
290          <li>Parent frame sizes child frame and view based on ch
 >ild’s metrics
291          </li>
292        </ul>
293      </li>
294      <li>N.B. many <i>don’t</i> work like this! (Tables, blocks,
 > XUL boxes)
295      </li>
296    </ul>
297    <h3 id="Reflow_2" name="Reflow_2">
298      Reflow
299    </h3>
300    <ul>
301      <li>“Global” reflows
302        <ul>
303          <li>
304            <i>Initial, resize, style-change</i>
305          </li>
306          <li>Processed immediately via <code>PresShell</code> me
 >thod
307          </li>
308        </ul>
309      </li>
310      <li>Incremental reflows
311        <ul>
312          <li>Targeted at a specific frame
313          </li>
314          <li>
315            <i>Dirty</i>, <i>content-changed</i>, <i>style-change
 >d</i>, <i>user-defined</i>
316          </li>
317          <li>
318            <code>nsHTMLReflowCommand</code> object encapsulates 
 >info
319          </li>
320          <li>Queued and processed asynchronously, <code>nsIPress
 >Shell::AppendReflowCommand</code>, <code>ProcessReflowCommands</c
 >ode>
321          </li>
322        </ul>
323      </li>
324    </ul>
325    <h3 id="Incremental_Reflow" name="Incremental_Reflow">
326      Incremental Reflow
327    </h3>
328    <p>
329      <img alt="Image:Gecko_Overview_28.png" fileid="231" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_28.png">
330    </p>
331    <ul>
332      <li>Recursively descend to target <i>recovering reflow stat
 >e</i>
333        <ul>
334          <li>Child rs.reason set to <i>incremental</i>
335          </li>
336        </ul>
337      </li>
338    </ul>
339    <h3 id="Incremental_Reflow_2" name="Incremental_Reflow_2">
340      Incremental Reflow
341    </h3>
342    <p>
343      <img alt="Image:Gecko_Overview_29.png" fileid="232" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_29.png">
344    </p>
345    <ul>
346      <li>Process reflow “normally” at target frame
347        <ul>
348          <li>Child rs.reason set based on rc’s <i>type</i>
349          </li>
350        </ul>
351      </li>
352    </ul>
353    <h3 id="Incremental_Reflow_3" name="Incremental_Reflow_3">
354      Incremental Reflow
355    </h3>
356    <p>
357      <img alt="Image:Gecko_Overview_30.png" fileid="233" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_30.png">
358    </p>
359    <ul>
360      <li>
361        <i>Propagate damage</i> to frames later “in the flow”
362      </li>
363    </ul>
364    <h3 id="Incremental_Reflow_4" name="Incremental_Reflow_4">
365      Incremental Reflow
366    </h3>
367    <p>
368      <img alt="Image:Gecko_Overview_31.png" fileid="234" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_31.png">
369    </p>
370    <ul>
371      <li>Multiple reflow commands are batched
372        <ul>
373          <li>
374            <code>nsReflowPath</code> maintains a tree of target 
 >frames
375          </li>
376          <li>Amortize state recovery and damage propagation cost
377          </li>
378        </ul>
379      </li>
380    </ul>
381    <h3 id="Painting" name="Painting">
382      Painting
383    </h3>
384    <ul>
385      <li>As reflow proceeds through the frame hierarchy, areas a
 >re <i>invalidated</i> via <code>nsIViewManager::UpdateView</code>
386      </li>
387      <li>Unless <i>immediate</i>, invalid areas are coalesced an
 >d processed asynchronously via OS <i>expose</i> event
388      </li>
389      <li>Native expose event dispatched to widget; widget delega
 >tes to the view manager
390      </li>
391      <li>View manager paints views back-to-front, invoking <code
 >>PresShell</code>’s <code>Paint</code> method
392      </li>
393      <li>
394        <code>PresShell::Paint</code> walks from the view to the 
 >frame; invokes <code>nsIFrame::Paint</code> for each <i>layer</i>
395      </li>
396    </ul>
397    <h3 id="Incrementalism" name="Incrementalism">
398      Incrementalism
399    </h3>
400    <ul>
401      <li>Single-threaded
402        <ul>
403          <li>Simple (no locking)
404          </li>
405          <li>Can’t leave event queue unattended
406          </li>
407        </ul>
408      </li>
409      <li>Content construction unwinds “at will”
410        <ul>
411          <li>Parser and content sink do some buffering
412          </li>
413          <li>Content sink has “notification limits”
414          </li>
415          <li>Efficiency vs. responsiveness trade-off
416          </li>
417        </ul>
418      </li>
419      <li>Frame construction runs to completion
420      </li>
421      <li>CSS parsing runs to completion
422      </li>
423      <li>Reflow runs to completion (mostly)
424      </li>
425      <li>Painting runs to completion
426      </li>
427    </ul>
428    <p>
429      <img alt="Image:Gecko_Overview_34.png" fileid="235" src="Fi
 >le:en/Media_Gallery/Gecko_Overview_34.png">
430    </p>
431    <h3 id="Future_.28.3F.29_Tech_Talks" name="Future_.28.3F.29_T
 >ech_Talks">
432      Future (?) Tech Talks
433    </h3>
434    <ul>
435      <li>Content model and DOM - <i>jst</i>, <i>jkeiser</i>
436      </li>
437      <li>Parser and content sink (esp. invalid content) - <i>har
 >ishd</i>
438      </li>
439      <li>Events - <i>saari</i>, <i>joki</i>
440      </li>
441      <li>Block-and-line reflow - <i>waterson</i>, <i>dbaron</i>
442      </li>
443      <li>Table reflow - <i>karnaze</i>
444      </li>
445      <li>Form controls - <i>rods</i>, <i>bryner</i>
446      </li>
447      <li>Style resolution and rule tree - <i>dbaron</i>
448      </li>
449      <li>Views, widgets, and painting - <i>roc</i>, <i>kmcclusk<
 >/i>
450      </li>
451      <li>Editor - <i>kin</i>, <i>jfrancis</i>
452      </li>
453      <li>XUL and box layout - <i>hewitt</i>, <i>ben</i>
454      </li>
455      <li>XBL - <i>hewitt</i>, <i>ben</i>
456      </li>
457    </ul>
458    <h3 id="Conclusion" name="Conclusion">
459      Conclusion
460    </h3>
461    <ul>
462      <li>Data flow
463      </li>
464      <li>Key data structures
465      </li>
466      <li>Detailed walk-through
467      </li>
468      <li>Incrementalism
469      </li>
470      <li>Q &amp; A?
471      </li>
472    </ul>
473    <div class="originaldocinfo">
474      <h2 id="Original_Document_Information" name="Original_Docum
 >ent_Information">
475        Original Document Information
476      </h2>
477      <ul>
478        <li>Author(s): <a class="link-mailto" href="mailto:waters
 >on@netscape.com">Chris Waterson</a>
479        </li>
480        <li>Last Updated Date: June 10, 2002
481        </li>
482        <li>Copyright Information: Portions of this content are ©
 > 1998–2007 by individual mozilla.org contributors; content availa
 >ble under a Creative Commons license | <a class="external" href="
 >http://www.mozilla.org/foundation/licensing/website-content.html"
 >>Details</a>.
483        </li>
484      </ul>
485    </div>

Back to History