canmove, Confirmed users, Bureaucrats and Sysops emeriti
2,798
edits
Mobile/Fennec/Architecture: Difference between revisions
no edit summary
MarkFinkle (talk | contribs) |
MarkFinkle (talk | contribs) No edit summary |
||
| Line 21: | Line 21: | ||
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. | 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. | ||
=== | ===Chrome 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. | 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. | ||
| Line 29: | Line 29: | ||
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. | 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. | ||
Fennec tries to not use any dialogs. There are still some, used by the platform, but we are working to removing them all. Instead of dialogs, Fennec uses other UI to interact with the user. Firefox does similar things with modeless notification boxes and error pages in content. | |||
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><panel></code> elements, as those tend to cause performance issues. Instead, a <code><vbox></code> containing the desired UI is brought into view. The boxes are children of the <code><stack></code>, can be positioned as needed, and are hidden until needed - also to improve startup performance. | |||
Some examples are Bookmark List, Bookmark Editor and the Tools Panel (Add-ons, Preferences and Downloads). These elements are very similar to the toolstrips, but they are not managed by the WidgetStack. | |||
=== | ===Panning/Zooming=== | ||
Pannning moves the entire UI, not just the content area. The toolstrips and the content move as a single entity. It should feel as though the entire browser is being moved by your finger. | |||
The <code><canvas></code> display surface displays the visible part of the web content. However, a little more than the visible area is actually drawn into the <code><canvas></code>. This allows panning to immediately show parts just "off screen" as the area moves. Also note, the entire web content is never drawn into the <code><canvas></code>. That would seriously slow down performance. | |||
While panning moves the entire UI, zooming only affects the content area. However, the content are does "grow" when zoomed, so the right toolstrip seems farther to the right then when the content is not zoomed. | |||
==Performance Related Coding Guidelines== | ==Performance Related Coding Guidelines== | ||