Mobile/Fennec/Architecture

Background

Fennec is a XUL-based web browser designed for mobile-class devices, especially those with touchscreen support. Fennec shares much of it's platform support with Firefox. In fact the two browsers use the exact same HTML rendering engine. The similarities go deeper than that: Add-on support, Download management, Places bookmarking & history, JavaScript engine (including JIT support) is all based on the same source code.

Although the underlying platform is the same, the front-end UI is very different. Fennec is designed for smaller screens, lower CPU & memory specs, non-qwerty keyboards and touchscreens. Because of the large UI differences, add-ons that overlay the Firefox UI would need to be ported to work in Fennec. The focus on acceptable performance while running on mobile-class devices coupled with some of the finger-based UI features, has resulted in some unique XUL structure.

Application Structure

Browsing

Fennec and Firefox are very different when it comes to the way HTML is presented. Firefox uses a <tabbrowser> XUL element to create a tabbed browsing environment. The <tabbrowser> is a composite control, made up of <browser> elements contained inside a modified <tabbox> element. Primary interaction is done through the <browser>.

Fennec takes a different approach. While <browser> elements are still used to render the HTML, they are hidden offscreen. The rendered HTML is drawn into a <canvas> element, which acts as the primary display surface. This is primarily done for the ease in which panning and zooming can be done at acceptable levels of performance. A tabbed browsing environment is created by using an additional strip of thumbnails representing the currently opened <browser> elements.

The contents of the <browser> is copied to the <canvas>. The thumbnail used to represent the "tab" is updated either from the display <canvas>, for speed, or from the <browser> if the display <canvas> is stale.

Fennec uses the new MozAfterPaint event to optimize all DHTML updates to the the primary <canvas> 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/Zooming

All of the primary UI elements are children of a <stack>. This allows the UI elements to be absolutely positioned relative to each other, but mostly, relative to the primary <canvas> 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 is moves with the growing content. The result is: wider web pages require more pans to get to the right toolstrip.

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 <canvas> display surface displays the visible part of the web content. However, a little more than the visible area is actually drawn into the <canvas></canvas>. 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 <canvas></canvas>. 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.

Chrome Elements

[talk about the stack and the toolbars]

[talk about the use of boxes instead of panels]

Performance Related Coding Guidelines

[talk about what's slow and how to work around it]