Conceptual Architecture of Firefox 6.0 Rob Staalduinen Katie Tanner Gordon Krull James Brereton By Fully Optimized eXperience (FOX)

What is Firefox? No, but really…

What is Firefox? A free, open source web browser A free, open source web browser Developed and managed by the Mozilla corporation Developed and managed by the Mozilla corporation Has approximately 25% of worldwide usage share of web browsers as of September 2011 Has approximately 25% of worldwide usage share of web browsers as of September 2011 Moved to a rapid release cycle in 2011 releasing a new version every 1 to 2 months Moved to a rapid release cycle in 2011 releasing a new version every 1 to 2 months

Research Overview Began by reading reference architecture for web browsers provided in the paper “A Case Study in Architectural Analysis: The Evolution of the Modern Web Browser” by Alan Grosskurth and Michael W. Godfrey Began by reading reference architecture for web browsers provided in the paper “A Case Study in Architectural Analysis: The Evolution of the Modern Web Browser” by Alan Grosskurth and Michael W. Godfrey We did general research on Firefox as a whole before isolating different subsystems We did general research on Firefox as a whole before isolating different subsystems Then did in-depth research on each subsystem and began mapping out the architecture Then did in-depth research on each subsystem and began mapping out the architecture Important sources of Documentation Important sources of Documentation Mozilla Developers Network (MDN) Mozilla Developers Network (MDN) Mozilla Wiki Mozilla Wiki

Conceptual Architecture Initially, we were expecting a layered architecture for Firefox Initially, we were expecting a layered architecture for Firefox Within the layers, we expected that the distinct components were implemented in an object oriented architectural style Within the layers, we expected that the distinct components were implemented in an object oriented architectural style We were surprised to see that many of the elements of the lower layers were combined with the upper layer We were surprised to see that many of the elements of the lower layers were combined with the upper layer

Conceptual Architecture with Reference Architecture Image source: Figure 3 from “A Case Study in Architectural Analysis: The Evolution of the Modern Web Browser” by Alan Grosskurth and Michael W. Godfrey

XUL & XULRunner XUL = XML UI Language XUL = XML UI Language Firefox’s user interface is not hardwired into the application, but loaded from a separate UI description. XUL is the language in which these UI descriptions are built. Firefox’s user interface is not hardwired into the application, but loaded from a separate UI description. XUL is the language in which these UI descriptions are built. Based on XML (extensible markup language) Based on XML (extensible markup language) Used to communicate data between applications Used to communicate data between applications XULRunner XULRunner Runtime package that can be used to bootstrap XUL & XPCOM applications such as Firefox Runtime package that can be used to bootstrap XUL & XPCOM applications such as Firefox Its goal is to facilitate development and deployment of internet applications Its goal is to facilitate development and deployment of internet applications Includes mechanisms for installing, upgrading, and uninstalling Firefox Includes mechanisms for installing, upgrading, and uninstalling Firefox

Data Persistence Session Store API Session Store API Makes it possible for extensions to easily save and restore data across Firefox sessions Makes it possible for extensions to easily save and restore data across Firefox sessions Key scenario in which supporting this feature can be crucial for an extension: Firefox 2 and up lets users undo the closing of tabs Key scenario in which supporting this feature can be crucial for an extension: Firefox 2 and up lets users undo the closing of tabs Implemented using the nsISessionStore interface Implemented using the nsISessionStore interface nsISessionStore: provides a means for extensions and other code to store data in associations with browser sessions, tabs and windows nsISessionStore: provides a means for extensions and other code to store data in associations with browser sessions, tabs and windows nsISessionStartup: handles session restore process nsISessionStartup: handles session restore process

Data Persistence Storage (mozStorage) Storage (mozStorage) Is a SQLite database API Is a SQLite database API It is available to trusted callers, meaning extensions and Firefox components only It is available to trusted callers, meaning extensions and Firefox components only DOM Storage DOM Storage Designed to provide larger, securer, and easier-to-use alternative to storing information in cookies Designed to provide larger, securer, and easier-to-use alternative to storing information in cookies A means through which string key/value pairs can be securely stored and later retrieved for use A means through which string key/value pairs can be securely stored and later retrieved for use Useful because there are no good browser-only methods exist for persisting reasonable amounts of data for any period of time Useful because there are no good browser-only methods exist for persisting reasonable amounts of data for any period of time Allows for “working offline” for extended periods of time Allows for “working offline” for extended periods of time

Gecko Primarily it is the Browser Engine and Rendering Engine Primarily it is the Browser Engine and Rendering Engine Gecko lies at the heart of the Firefox Conceptual Architecture Gecko lies at the heart of the Firefox Conceptual Architecture Uses an Object-Orientated Architecture to implement the different components Uses an Object-Orientated Architecture to implement the different components Has support for many different standards Has support for many different standards Through evolution from previous versions, Gecko now contains more than just the tools to render pages but also contains things such as: Through evolution from previous versions, Gecko now contains more than just the tools to render pages but also contains things such as: Networking and Security Libraries Networking and Security Libraries JavaScript Interpreter JavaScript Interpreter XML Parser (Expat) is now a library in the HTML Parser XML Parser (Expat) is now a library in the HTML Parser

Gecko Conceptual Architecture

Gecko Components Document Parser (HTML & XML Parser) Document Parser (HTML & XML Parser) Parses both the HTML code and XML code and passes it on to the Content Model for further use Parses both the HTML code and XML code and passes it on to the Content Model for further use Style System Style System The Style System contains the CSS Parser and is responsible for getting the CSS data from Necko and parsing it before sending it to the frame constructor The Style System contains the CSS Parser and is responsible for getting the CSS data from Necko and parsing it before sending it to the frame constructor Platform-Specific Rendering and Widgets Platform-Specific Rendering and Widgets Acts as a Library for the frame constructor to call upon specifics of the platform the browser is running on using the GTK+/X11 libraries before passing it on to the UI Acts as a Library for the frame constructor to call upon specifics of the platform the browser is running on using the GTK+/X11 libraries before passing it on to the UI Image Library Image Library Interacts with Necko in order to retrieve image data before sending it to the Frame Constructor Interacts with Necko in order to retrieve image data before sending it to the Frame Constructor

Gecko Components Content Model Content Model Interacts with the various components of Gecko, DOM Storage to gather all the data needed before sending it to the frame constructor Interacts with the various components of Gecko, DOM Storage to gather all the data needed before sending it to the frame constructor Frame Constructor Frame Constructor Carries out the task of piece together all the information and actually from the rendered web page before sending it back to the UI through the Platform- Specific Rendering subsystem Carries out the task of piece together all the information and actually from the rendered web page before sending it back to the UI through the Platform- Specific Rendering subsystem

SpiderMonkey SpiderMonkey, contained within Gecko, is Firefox’s JavaScript engine, written in C/C++ SpiderMonkey, contained within Gecko, is Firefox’s JavaScript engine, written in C/C++ Its components are a compiler, interpreter, 2 just-in- time (JIT) compilers, a decompiler, garbage collection, and a standard library Its components are a compiler, interpreter, 2 just-in- time (JIT) compilers, a decompiler, garbage collection, and a standard library Also contains a few public APIs Also contains a few public APIs

Necko Necko is the main networking library for Mozilla Firefox Necko is the main networking library for Mozilla Firefox This library is platform independent, allowing Firefox to be versatile, true to its open source nature This library is platform independent, allowing Firefox to be versatile, true to its open source nature Necko itself is split into a layered architecture, with a pipe-and-filter style flow of execution Necko itself is split into a layered architecture, with a pipe-and-filter style flow of execution It relies heavily on the XPCOM library, and uses the NSS library for its network security It relies heavily on the XPCOM library, and uses the NSS library for its network security

Necko Conceptual Architecture

NSS & PSM NSS NSS Network Security Services Network Security Services Set of libraries, APIs, utilities and documentation designed to support cross-platform development of security-enabled client and server applications Set of libraries, APIs, utilities and documentation designed to support cross-platform development of security-enabled client and server applications PSM PSM Personal Security Manager Personal Security Manager Consists of a set of libraries that perform cryptographic operations on behalf of a client application Consists of a set of libraries that perform cryptographic operations on behalf of a client application Built on top of NSS Built on top of NSS

XPCOM XPCOM = Cross-Platform Component Object Module XPCOM = Cross-Platform Component Object Module Breaks up large software projects into modular components, which are reassembled at runtime Breaks up large software projects into modular components, which are reassembled at runtime Provides tools and libraries that enable the loading and manipulation of these components Provides tools and libraries that enable the loading and manipulation of these components XPCOM provides the means of accessing the Gecko library functionality and embedding or extending Gecko XPCOM provides the means of accessing the Gecko library functionality and embedding or extending Gecko This modular programming benefits the reuse, updates, performance, and maintenance of software This modular programming benefits the reuse, updates, performance, and maintenance of software

GTK+/X11 Libraries GTK+ and X11 are used to create Graphical User Interfaces (GUIs) on multiple platforms GTK+ and X11 are used to create Graphical User Interfaces (GUIs) on multiple platforms Form the Display Backend of the Architecture Form the Display Backend of the Architecture They are used by Gecko (specifically the Frame Constructor) to provide platform specific data They are used by Gecko (specifically the Frame Constructor) to provide platform specific data The User Interface (XUL) calls upon the libraries along with Gecko to display the page in the format for each platform The User Interface (XUL) calls upon the libraries along with Gecko to display the page in the format for each platform

Rendering a cached webpage (Sequence Diagram) NeckoGeckoSpiderMonkeyDisplay BackendData Persistence UI Check for cached page (found) Send page to Javascript interpreter Send page to Display Backend to be rendered

Summary Firefox overall is implemented in a layered architectural style with Gecko containing most of the subsystems Firefox overall is implemented in a layered architectural style with Gecko containing most of the subsystems Gecko uses an Object Oriented Architecture to organize and implement the components needed to render web pages Gecko uses an Object Oriented Architecture to organize and implement the components needed to render web pages Necko is now within Gecko along with the security protocols it relies on. Necko is now within Gecko along with the security protocols it relies on. The documentation was largely out-of-date or incomplete which made extracting the architecture difficult, due to the nature of open-source projects The documentation was largely out-of-date or incomplete which made extracting the architecture difficult, due to the nature of open-source projects

Resources of_XPCOM of_XPCOM of_XPCOM of_XPCOM browserRefArch.pdf browserRefArch.pdf browserRefArch.pdf browserRefArch.pdf