Fennec uses the new [https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint MozAfterPaint] event to optimize all DHTML updates to the the primary <code><canvas></code> display surface. Whenever the contents of the web page changes, for whatever reason, we only update the areas that actually changed. We don’t repaint the entire surface unless it's absolutely required.
===Panning/ZoomingChrome Elements===
All of the primary UI elements are children of a <code><stack></code>. This allows the UI elements to be absolutely positioned relative to each other, but mostly, relative to the primary <code><canvas></code> display surface.
Fennec uses a JavaScript helper object, WidgetStack.js, to coordinate panning the individual UI elements. WidgetStack also manages the size to the content viewport. For the most part, the left and right toolstrips are "glued" to the sides of the content display surface. Different web pages are different widths (and heights) and as the width changes, the right toolstrip moves with the growing content. This means wider web pages require more pans to get to the right toolstrip.
Pannning moves Fennec tries to not use any dialogs. There are still some, used by the entire platform, but we are working to removing them all. Instead of dialogs, Fennec uses other UI, not just to interact with the content areauser. The toolstrips Firefox does similar things with modeless notification boxes and the error pages in content move as a single entity. It should feel as though the entire browser is being moved by your finger.
The In those situations where a dialog or secondary window would be used, Fennec typically brings a pseudo-panel into view. Fennec does not use real <code><canvaspanel></code> display surface displays the visible part of the web contentelements, as those tend to cause performance issues. HoweverInstead, a little more than the visible area is actually drawn into the <code><canvasvbox></code>. This allows panning to immediately show parts just "off screen" as the area moves. Also note, containing the entire web content desired UI is never drawn brought into view. The boxes are children of the <code><canvasstack></code>. That would seriously slow down , can be positioned as needed, and are hidden until needed - also to improve startup performance.
While panning moves Some examples are Bookmark List, Bookmark Editor and the entire UITools Panel (Add-ons, zooming only affects the content areaPreferences and Downloads). However, the content These elements are does "grow" when zoomed, so the right toolstrip seems farther very similar to the right then when toolstrips, but they are not managed by the content is not zoomedWidgetStack.
===Chrome ElementsPanning/Zooming===
Fennec tries to not use any dialogs. There are still some, used by Pannning moves the platformentire UI, but we are working to removing them all. Instead of dialogs, Fennec uses other UI to interact with not just the usercontent area. Firefox does similar things with modeless notification boxes The toolstrips and error pages in the contentmove as a single entity. It should feel as though the entire browser is being moved by your finger.
In those situations where a dialog or secondary window would be used, Fennec typically brings a pseudo-panel into view. Fennec does not use real The <code><panelcanvas></code> elements, as those tend to cause performance issuesdisplay surface displays the visible part of the web content. InsteadHowever, a little more than the visible area is actually drawn into the <code><vboxcanvas></code> containing . This allows panning to immediately show parts just "off screen" as the area moves. Also note, the desired UI entire web content is brought never drawn into view. The boxes are children of the <code><stackcanvas></code>, can be positioned as needed, and are hidden until needed - also to improve startup . That would seriously slow down performance.
Some examples are Bookmark ListWhile panning moves the entire UI, Bookmark Editor and zooming only affects the Tools Panel (Add-onscontent area. However, Preferences and Downloads). These elements the content are very similar does "grow" when zoomed, so the right toolstrip seems farther to the toolstrips, but they are right then when the content is not managed by the WidgetStackzoomed.
==Performance Related Coding Guidelines==
