Changes

Jump to: navigation, search

Mobile/Fennec/Architecture

2,146 bytes added, 06:03, 3 February 2009
New page: ==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...
==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 <code><tabbrowser></code> XUL element to create a tabbed browsing environment. The <code><tabbrowser></code> is a composite control, made up of <code><browser></code> elements contained inside a modified <code><tabbox></code> element. Primary interaction is done through the <code><browser></code>.

[[Image: Mobile-typical-structure.png]]

Fennec takes a different approach. While <code><browser></code> elements are still used to render the HTML, they are hidden offscreen. The rendered HTML is drawn into a <code><canvas></code> element, which acts as the primary interaction UI. 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 <code><browser></code> elements.

[[Image: Mobile-fennec-structure.png]]

===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]
Canmove, confirm, emeritus
2,798
edits

Navigation menu