TABLE OF CONTENTS
1. WHAT IS GECKO………………………………………………………………………………………………….5
2. INRODUCTION TO GECKO………………………………………………………………………………………7
3. HISTORY…………………………………………………………………………………………………………..12
4. STANDARDS OF GECKO………………………………………………………………………………………..14.
5. COMPARISON BETWEEN DIFFERENT BROWSERS………………………………………………………....15
6. HISTORY OF BROWSERS……………………………………………………………………………………….19.
7. LAYOUT ENGINE TECHNICAL DOCUMENTATION………………………………………………………...25
8. MOZILLA LAYOUT ENGINE……………………………………………………………………………………30.
9. THE MOZILLA TOOLKIT………………………………………………………………………………………..33
10. USAGE AND CRITICISM OF GECKO…………………………………………………………………………..35
11. PROJECT OF GECKO…………………………………………………………………………………………….34
12. CONCLUSION…………………………………………………………………………………………………….39
13. REFERENCE………………………………………………………………………………………………………40
1
Chapter 1
What is Gecko??
The embeddable, cross-platform Gecko rendering engine is the heart of Mozilla. It has no user interface;
it just understands web content and displays it. This ability is valuable in an enormous set of
applications, some of which have little to do with a “browser.” For example, Gecko is used to display
the user interface of Mozilla applications.
Gecko began development in 1997 and has evolved into a lean, fast and robust layout engine that
features an architecture that is open, portable, extensible and customizable. It has been embedded in
a variety of third-party software and hardware products, from HTML-to-PNG converters to commercial
IDEs. Gecko serves as the rendering engine for the latest Compuserve 7.0 service, and is the engine in
the recently released Netscape 7.0 Preview Release and a beta test for the AOL service.
Gecko is the name of the layout engine developed by
the Mozilla Project. It was originally named NGLayout.
Gecko's function is to read web content, such as HTML, CSS, XUL, and
JavaScript, and render it on user's screen or print it. In XUL-based
applications Gecko is used to render the application's user interface as
well.
Gecko is used in many applications, including a few browsers, such as Firefox, Mozilla Suite, Camino,
etc. Products using the same version of Gecko have identical support for standards.
2
Versions of Gecko
Gecko version Applications based on it
Gecko 1.9.3 (under development)
Gecko 1.9.2 Firefox 3.6
Gecko 1.9.1 Firefox 3.5, Thunderbird 3, SeaMonkey 2.0
Gecko 1.9 Firefox 3
Gecko 1.8.1 Firefox 2, Thunderbird 2, SeaMonkey 1.1
Gecko 1.8 Firefox 1.5, Thunderbird 1.5, SeaMonkey 1.0
Gecko 1.7 Firefox 1.0, Thunderbird 1.0, Nvu 1.0, Mozilla Suite 1.7
Older versions of Gecko match the Mozilla Suite versions
In order to support web pages designed for legacy versions of Netscape and Internet Explorer, Gecko
supports DOCTYPE switching. Documents with a modern DOCTYPE are rendered in standards
compliance mode, which follows the W3C standards strictly. Documents that have no DOCTYPE or an
older DOCTYPE are rendered in quirks mode, which emulates some of the non-standard oddities of
Netscape Communicator 4.x; however, some of the 4.x features (such as layers) are not supported.
Gecko also has limited support for some non-standard Internet Explorer features, such as the marquee
element and the document.all property (though pages explicitly testing for document.all will be told
it is not supported). While this increases compatibility with many documents designed only for Internet
Explorer, some purists argue that it harms the cause of standards evangelism
3
Chapter 2
Introduction to Gecko
Gecko (layout engine)
Gecko
Mozilla Foundation / Mozilla
Developer(s)
Corporation
1.9.2 / January 21, 2010; 2
Stable release
months ago
Preview release none / n/a
Written in C++
Operating system Cross-platform
Type Layout engine
License Mozilla tri-license
Website devmo: Gecko
Gecko is a layout engine currently developed by Mozilla Corporation, known as the layout engine of the
Firefox web browser, Mozilla Application Suite, Nvu, Mozilla Thunderbird and many more. It is
designed to support open Internet standards, and is used by applications such as Mozilla Firefox,
Camino, Flock, SeaMonkey, K-Meleon, Netscape 9, Lunascape to display web pages and, in some
4
cases, an application's user interface itself (by rendering XUL). Gecko offers a rich programming API
that makes it suitable for a wide variety of roles in Internet-enabled applications, such as web browsers,
content presentation, and client/server. Development originated with Netscape Communications
Corporation, but soon moved to the Mozilla Foundation for the Mozilla application suite, and now used
in many applications developed by Mozilla Foundation and or the Mozilla Corporation, as well as many
other open source software projects. It was also used in later Netscape Navigator releases.
Gecko is written in C++ and is cross-platform, and runs on various operating systems including BSDs,
Linux, Mac OS X, Solaris, OS/2, AIX, OpenVMS, and Microsoft Windows. Its development is now
overseen by the Mozilla Foundation. Licensed by a tri-license of the Mozilla Public License (MPL),
GNU General Public License (GPL) and GNU Lesser General Public License (LGPL), Gecko is free
and open source software.
Gecko is the second most-popular layout engine on the World Wide Web, after Trident (used by Internet
Explorer for Windows since
What is Gecko?
Gecko is the open source browser engine designed to support open Internet standards such as HTML 4,
CSS 1/2, the W3C DOM, XML, JavaScript, and others.
Gecko is used in multiple browsers, including Mozilla Firefox, SeaMonkey, Camino, and others. Gecko
is continuously under development at mozilla.org. Gecko has been known previously by the code names
"Raptor" and "NGLayout"; the new name was chosen following a trademark infringement dispute.
What is a layout engine?
Basically, a layout engine takes content (such as HTML, XML, image files, applets, and so on) and
formatting information (such as Cascading Style Sheets, presentational HTML tags, etc.) and displays
the formatted content on the screen. It paints the browser's content area, which is the blank area inside
the browser window's chrome.
Formally, a layout engine defines the placement policy for a document and places content on a page.
Gecko's core is a very fast layout engine. Gecko also offers the ability to parse various document types
5
(HTML, XML, SVG, etc), advanced rendering capabilities including compositing and transformations,
and support for embedded JavaScript and plugins.
Gecko is so fast and so powerful that it's being used to create the user interface of some applications
("chrome") as well. In other words, Gecko will not only be displaying the document's content, but it will
also be painting the scrollbars, toolbars, and menus on the screen as well. For more information see
XUL.
How is a layout engine like Gecko different from a Web browser?
Gecko provides the foundation needed to display content on the screen, including a layout engine and a
complementary set of browser components. However, Gecko does not package all of these components
alongside other interface modules in a coherent, user-friendly application (including menus, toolbars,
etc.), such as Firefox.
Mozilla.org assembles the necessary components into its applications, such as Firefox, Thunderbird,
SeaMonkey, Camino, which are available for free download from mozilla.org. Netscape released its
own version of the browser branded as Netscape Navigator. Other companies release their own software
and hardware products that use Gecko. See XULRunner Hall of Fame for a partial list of application that
uses Gecko via XULRunner.
Third parties such as ISVs and hardware vendors will pick and choose the components they want to use
in their applications or hardware devices. Certain browser components are not provided as part of
Gecko, such as bookmarks, history, address book, etc. However, the source for all those components is
available for free download from mozilla.org.
Why was Gecko built?
The original Mozilla browser, first released as Navigator 1.0, was developed rapidly by a small team
that was passionate about creating the next killer app, and they succeeded. Now that the web has
evolved, a new generation layout engine was needed upon which future products could be built. Gecko
enables a pioneering new class of dynamic content that is more interactive and offers greater
6
presentation control to Web developers, using open and recommended Internet standards instead of
proprietary APIs. You are encouraged to join this team by getting involved.
How is mozilla.org using Gecko?
Mozilla.org will assemble the Gecko layout engine and other browser components into the Mozilla
browser application.
Use of Gecko by Mozilla
Gecko lies at the heart of Mozilla and Firefox browsers, as well as others, powering all of the individual
components. Gecko technologies will also power the display of the mozilla.com portal site, speedily
delivering more exciting content and services. Gecko's architecture will serve Mozilla well into the
future, enabling faster time to market, more innovation, less costly development, easier distribution and
updating, and better cross platform support.
How does Gecko format XML documents?
Gecko supports the use of CSS and XSLT to format XML documents.
For XML documents without associated CSS or XSLT, Gecko displays the pretty-printed source of the
document.
What is XUL?
XUL (eXtensible User-interface Language) is Mozilla’s XML-based, cross-platform user-interface
technology.
This technology enables developers to define cross-platform graphical user interfaces using a mixture of
XML, HTML, CSS and ECMAScript (JavaScript). A user can modify any aspect of the user interface of
an XUL-based Mozilla application (such as the Mozilla product itself) simply by modifying files that
use standard web-page syntax.
7
XUL uses Gecko to implement the defined user interface. The Gecko/XUL combination is the
foundation that allows a Mozilla application to extend from being as simple as a web page to being as
sophisticated as the Mozilla 1.0 product. It supports all the basic elements found in contemporary
graphical user interfaces, including menus, input controls, dialogs and tree controls (as seen, for
example, in the preferences dialog), and keyboard shortcuts.
An XUL tutorial can be found at XUL Planet. There is also a set of slides about Building Applications
with XUL and JavaScript, accompanied by some more detailed technical information (1; 2). More
information is also available at mozilla.org.
8
Chapter 3
History
Development of the layout engine now known as Gecko began at Netscape in 1997, following the
company's purchase of Digital Style. The existing Netscape rendering engine, originally written for
Netscape Navigator 1.0 and upgraded through the years, was widely considered to be inferior to the one
used in Microsoft Internet Explorer. It was slow, did not comply well with W3C standards, had limited
support for dynamic HTML and lacked features such as incremental reflow (when the layout engine
rearranges elements on the screen as new data is downloaded and added to the page). The new layout
engine was developed in parallel with the old, with the intention being to integrate it into Netscape
Communicator when it was mature and stable. At least one more major revision of Netscape was
expected to be released with the old layout engine before the switch.
After the launch of the Mozilla project in early 1998, the new layout engine code was released under an
open-source license. Originally unveiled as Raptor, the name had to be changed to NGLayout (next
generation layout) due to trademark problems. Netscape later rebranded NGLayout as Gecko. While
Mozilla Organization (the forerunner of the Mozilla Foundation) initially continued to use the
NGLayout name (Gecko was a Netscape trademark), eventually the Gecko branding won out.
In October 1998, Netscape announced that its next browser would use Gecko (which was still called
NGLayout at the time) rather than the old layout engine, requiring large parts of the application to be
rewritten. While this decision was popular with web standards advocates, it was largely unpopular with
Netscape developers, who were unhappy with the six months given for the rewrite. It also meant that
most of the work done for Netscape Communicator 5.0 (including development on the Mariner
improvements to the old layout engine) had to be abandoned. Netscape 6, the first Netscape release to
incorporate Gecko, was released in November 2000 (the name Netscape 5 was never used).
As Gecko development continued, other applications and embedders began to make use of it. America
Online, by this time Netscape's parent company, eventually adopted it for use in CompuServe 7.0 and
AOL for Mac OS X (these products had previously embedded Internet Explorer). However, with the
exception of a few betas, Gecko was never used in the main Microsoft Windows AOL client.
9
On July 15, 2003, AOL laid off the remaining Gecko developers and the Mozilla Foundation (formed on
the same day) became the main steward of Gecko development. Today, Gecko is developed by
employees of the Mozilla Corporation, employees of companies that contribute to the Mozilla project,
and volunteers.
10
Chapter 4
Standards of Gecko
From the outset, Gecko was designed to support open Internet standards. Some of the standards Gecko
supports include:
HTML4 (partial support for HTML5)
CSS Level 2.1 (partial support for CSS 3)
JavaScript 1.8 (ECMAScript 3, and partial support for ECMAScript 5)
DOM Level 1 and 2 (partial support for DOM 3)
XML 1.0
XHTML 1.0
XSLT and XPath
MathML
XForms (via an official extension)
RDF
Gecko also partially supports SVG 1.1
In order to support web pages designed for legacy versions of Netscape and Internet Explorer, Gecko
supports DOCTYPE switching. Documents with a modern DOCTYPE are rendered in standards
compliance mode, which follows the W3C standards strictly. Documents that have no DOCTYPE or an
older DOCTYPE are rendered in quirks mode, which emulates some of the non-standard oddities of
Netscape Communicator 4.x; however, some of the 4.x features (such as layers) are not supported.
Gecko also has limited support for some non-standard Internet Explorer features, such as the marquee
element and the document.all property (though pages explicitly testing for document.all will be told
it is not supported). While this increases compatibility with many documents designed only for Internet
Explorer, some purists argue that it harms the cause of standards evangelism.
11
Chapter 5
Comparison between different Browsers
Browser Wars
Most people probably associate Browser Wars with the 1995-2002 period, more or less from when
Microsoft noticed the Internet to when the US v. Microsoft antitrust suit was settled. This was also a
12
period of explosive growth in the number of Internet users. The significant rivalry in this period was
Netscape Navigator vs. Microsoft Internet Explorer (IE or MSIE).
NCSA Mosaic, released in the public domain in 1993, was the first widely popular Web browser. It was
displaced by Netscape (internal code name Mozilla) during 1995/1996. Microsoft introduced the Internet
Explorer Web browser in 1995; versions 1 and 2 were not impressive. Integration of versions 4 through
6 of Internet Explorer as the shell of the Microsoft Windows operating system, beginning in 1997/1998,
resulted in the 1998 federal antitrust suit, among other things, but helped IE displace Netscape as the
dominant browser by 1999/2000. Enough users have come to the Internet since then that there are
probably still many who think IE is the only Web browser that exists. Windows XP and IE6 were
released in October 2001.
Netscape was acquired by AOL in 1999 and subsequently switched the code base for Navigator to the
open-source layout engine Gecko. Continued Gecko-based development in the open-source community
eventually resulted in release of the open-source freeware Web browsers Mozilla 1.0 in 2002 and
Firefox 1.0 in 2004. Microsoft finally replaced IE6 with IE7 in October 2006, and IE8 in March 2009.
The original 1995-2002 Browser Wars was really the process of IE forcibly replacing Netscape as the
only Web browser, not because it was better, but because it was gratuitously made a component of
Windows. The current situation is more like a normal free market, with IE 7/8, Firefox, Opera, Safari,
and Chrome all competing for market share based on their merits.
About these charts
The charts on this page show Netscape plus Mozilla plus Firefox as a single data series labeled Mozilla,
to reflect the familial relationship. Opera has been below 2% in most recent years, and Google Chrome
has only gotten above 1% since first quarter 2009. Chrome may gain more share now that it's becoming
available for Mac and Linux, and is getting more complete as a browser.
The Wikipedia article Usage share of browsers gives numeric data on this sequence of events, and
formerly included an area chart of layout engine usage shares 1994 to present, similar to the first chart
here, along with the chart data. The format of the Wikipedia usage share article has changed, and now
features a pie chart of current usage share. The original historical area chart and data are now linked
13
from the Wikipedia Browser wars article. My charts are now based on data from the old article for 1994-
2003, and on data from a section of the current Wikipedia article with recent quarterly data from
netapplications.com for 2004 to present.
14
Chapter 6
History of browsers
The key event in this history is the Microsoft ploy in 1997-1998 in which they turned version 4 of their
Internet Explorer Web browser into the fundamental shell interface of the Windows 95/98 operating
system. This move offended a great many people in Silicon Valley, Cambridge Mass, and other places
computer geeks were to be found.
It was quickly followed by:
Web browser: Navigator's switch to the open-source Gecko layout engine and the beginnings
of Mozilla/Firefox.
Office suite: Sun Microsystems buying StarOffice, releasing it as freeware, and beginning the
OpenOffice.org project.
Operating system: heavy corporate sponsorship of the GNOME desktop environment for
Linux.
Mozilla Firefox and OpenOffice.org have so far been more widely embraced than the GNOME/Linux
OS-level alternative.
Intuitive GNOME web browser - Gecko version
Epiphany is a simple yet powerful GNOME web browser targeted at non-technical users. Its principles
are simplicity and standards compliance. Simplicity is achieved by a well designed user interface and
reliance on external applications for performing external tasks (such as reading email). Simplicity
should not mean less powerful. Standards compliance is achieved on the HTML side by using the
Gecko rendering engine, as developed for the Mozilla and Firefox browsers; and on the user interface
side by closely following the GNOME Human Interface Guidelines (HIG) and by close integration
with the GNOME desktop.
This version uses the Gecko backend to render web pages.
15
Chapter 7
Layout Engine Technical Documentation
Current documentation
Reflow
o Reflow refactoring design (2006)
o block-and-line layout cheat sheet
Space Manager high level design and Space Manager detailed design
o Table cellmap and layout strategy description
o How to debug reflow and how to debug table reflow
o running the regression tests (obsolete)
Style System (incomplete)
o Adding CSS properties
Techtalks
o DOM Implementation and Scriptability (2002-03-18, jst): video, slides
o Introduction to Layout in Mozilla (2002-06-10, waterson): slides (and original
powerpoint slides)
o Style System Overview (2002-06-24, dbaron): slides
o Table Reflow Internals (2002-08-05, karnaze): slides
o Layout debugging/triaging (2004-02-22, bernd) : slides
o Gecko and DOM architecure (2006-12-08, jst): video
o Layout (2006-12-14, dbaron): slides, video
o Gecko and Layout (2007-09-08, dbaron): slides, video
16
Design documents from 1998
Modularization
Base
Content Model
DOM
Forms
Rendering
Layout
Parser (see also: Tag Reference Chart)
Plug-ins and Java
Printing
Style
Threading
View System
WebWidget (embeddable API)
Widgets (buttons, etc.)
GLE (Graphics Layout Engine) is a graphics scripting language designed for creating publication quality
graphs, plots, diagrams, figures and slides. GLE supports various graph types (function plots,
histograms, bar graphs, scatter plots, contour lines, color maps, surface plots, ...) through a simple but
flexible set of graphing commands. More complex output can be created by relying on GLE's scripting
language, which is full featured with subroutines, variables, and logic control. GLE relies on LaTeX for
text output and supports mathematical formulea in graphs and figures. GLE's output formats include
EPS, PS, PDF, JPEG, and PNG. GLE is licenced under the BSD license. QGLE, the GLE user interface,
is licenced under the GPL license.
The Latin script, which is the most commonly used script among software developers, is also the least
complex script to display especially when it is used to write English. Using the Latin script, characters
can be displayed from left to right in the order that they are stored in memory. Some scripts require
rendering behavior that is more complicated than the Latin script. We refer to these scripts as "complex
17
scripts" and to text written in these scripts as "complex text." Examples of complex scripts are the Indic
scripts (for example, Devanagari, Tamil, Telugu, and Gujarati), Thai, and Arabic.
These complex scripts exhibit complications that are not found in the Latin script. The following lists
the main complications in complex text:
The ICU LayoutEngine is designed to handle these complications through a simple, uniform client
interface. Clients supply Unicode code points in reading or "logical" order, and the LayoutEngine
provides a list of what to display, indicates the correct order, and supplies the positioning information.
Because the ICU LayoutEngine is platform independent and text rendering is inherently platform
dependent, the LayoutEngine cannot directly display text. Instead, it uses an abstract base class to access
font files. This base class models a TrueType font at a particular point size and device resolution. The
TrueType fonts have the following characteristics:
1. A font is a collection of images, called glyphs. Each glyph in the font is referred to by a 16-bit
glyph id.
2. There is a mapping from Unicode code points to glyph ids. There may be glyphs in the font for
which there is no mapping.
3. The font contains data tables referred to by 4 byte tags. (e.g. ''GSUB'', ''cmap''). These tables can
be read into memory for processing.
4. There is a method to get the width of a glyph.
5. There is a method to get the position of a control point from a glyph.
Since many of the contextual forms, ligatures, and split characters needed to display complex text do not
have Unicode code points, they can only be referred to by their glyph indices. Because of this, the
LayoutEngine's output is a list of glyph indices. This means that the output must be displayed using an
interface where the characters are specified by glyph indices rather than code points.
A concrete instance of this base class must be written for each target platform. For a simple example
which uses the standard C library to access a TrueType font, look at the PortableFontInstance class in
icu/source/test/letest .
The ICU LayoutEngine supports complex text in the following ways:
18
1. If the font contains OpenType® tables, the LayoutEngine uses those tables.
2. If the font contains Apple Advanced Typography (AAT) tables, the LayoutEngine uses those
tables.
3. For Arabic and Hebrew text, if OpenType tables are not present, the LayoutEngine uses Unicode
presentation forms.
4. For Thai text, the LayoutEngine uses either the Microsoft or Apple Thai forms.
OpenType processing requires script-specific processing to be done before the tables are used. The ICU
LayoutEngine performs this processing for Arabic, Devanagari, Bengali, Gurmukhi, Gujarati, Oriya,
Tamil, Telegu, Kannada, and Malayalam text.
The AAT processing in the LayoutEngine is relatively basic as it only applies the default features in left-
to-right text. This processing has been tested for Devanagari text. Since AAT processing is not script-
specific, it might not work for other scripts.
Programming with the LayoutEngine
The ICU LayoutEngine is designed to process a run of text which is in a single font. It is written in a
single direction (left-to-right or right-to-left), and is written in a single script. Clients can use ICU's Bidi
processing to determine the direction of the text and use the ScriptRun class in icu/source/extra/scrptrun
to find a run of text in the same script. Since the representation of font information is application
specific, ICU cannot help clients find these runs of text.
Once the text has been broken into pieces that the LayoutEngine can handle, call the
LayoutEngineFactory method to create an instance of the LayoutEngine class that is specific to the text.
The following demonstrates a call to the LayoutEngineFactory:
LEFontInstace *font = ;
UScriptCode script = ;
LEErrorCode error = LE_NO_ERROR;
LayoutEngine *engine;
19
engine = LayoutEngine::layoutEngineFactory(font,
script,
0, // language - ignored
error);
The following example shows how to use the LayoutEngine to process the text:
LEUnicode text[] = ;
le_int32 offset = ;
le_int32 count = ;
le_int32 max = ;
le_bool rtl = ;
float x, y = ;
le_int32 glyphCount;
glyphCount = engine->layoutChars(text, offset, count, max, rtl,
x, y, error);
This previous example computes three arrays: an array of glyph indices in display order, an array of x, y
position pairs for each glyph, and an array that maps each output glyph back to the input text array. Use
the following get methods to copy these arrays:
LEGlyphID *glyphs = new LEGlyphID[glyphCount];
le_int32 *indices = new le_int32[glyphCount];
float *positions = new float[(glyphCount * 2) + 2];
engine->getGlyphs(glyphs, error);
engine->getCharIndices(indices, error);
20
engine->getGlyphPositions(positions, error);
The positions array contains (glyphCount * 2) + 2 entries. This is because there is an x and a y
position for each glyph. The extra two positions hold the x, y position of the end of the text run.
Once users have the glyph indices and positions, they can use the platform-specific code to draw the
glyphs. For example, on Windows 2000, users can call ExtTextOut with the ETO_GLYPH_INDEX
option to draw the glyphs and on Linux, users can call TT_Load_Glyph to get the bitmap for each glyph.
However, users must draw the bitmaps themselves.
The ICU LayoutEngine was developed separately from the rest of ICU and uses different coding
conventions and basic types. To use the LayoutEngine with ICU coding conventions, users can use
the ICULayoutEngine class, which is a thin wrapper around the LayoutEngine class that
incorporates ICU conventions and basic types.
For a more detailed example of how to call the LayoutEngine, look at icu/source/test/letest/letest.cpp .
This is a simple test used to verify that the LayoutEngine is working properly. It does not do any
complex text rendering.
21
Chapter 8
Mozilla Layout Engine
About Mozilla
Mozilla, an open-source project started by Netscape/AOL with an application suite of web browser, mail
& news client, HTML Editing, etc, embodied a working web suite based on the power of Gecko.
Netscape/AOL rebranded a copy of the open-source suite to provide an improvement over the now
closed classic version 4 web browser suite.
Taking over the reigns, Mozilla Foundation and now also Mozilla Corporation (a subsidiary), have
developed an improved form of the web browser as Mozilla Firefox. Mozilla Firefox is built with
improved usability, reliability, security, accessibility and Web Standards.
Improved usability includes searchable and secure Add-on Manager, autocomplete web address
suggestions from your bookmarks and history (now stored in Places), an interface for Web Storage's
sessionStorage, the old Mozilla globalStorage and Web Storage's localStorage, full page zooming and
Firefox can resume previous sessions if a crash occurred or you rebooted the computer without closing
Firefox. Plus built-in spell checking for when using forms on webpages.
Also Mozilla Messaging have taken over the development of the improved email client as Mozilla
Thunderbird. Thunderbird is an email, news and RSS/Atom Feed program that continues to bring state-
or-the-art features for organising your messages and news as well as protecting your privacy with
enterprise ready security including intuitive anti-spam filtering and phishing prevention.
AOL have now officially ended the Netscape project at version 9 for MS Windows, Mac OS X and
Linux; all based on Mozilla Firefox 2. Mozilla Firefox and SeaMonkey have succeeded Modern
Netscape
The Mozilla Application Suite now replaced and improved by the SeaMonkey Council as
SeaMonkey. SeaMonkey 2 has similar features to Mozilla Firefox 3.5 and Mozilla Thunderbird 3.
22
A trend of web browsers and other types of applications are around, basing their content processing on
the Mozilla web platform. Such applications include Flock, Camino (Mac OS X Web Browser),
Epiphany (a GNOME Web Browser), k-Meleon (Web Browser for MS Windows), Mozilla Sunbird
(Calendar built with Mozilla technology), Nvu (HTML Composer built with Mozilla technology,
sponsored by Linspire), ActiveState's Komodo IDE and Komodo Edit.
Mozilla Firefox, Mozilla Thunderbird, SeaMonkey and Flock are available for most platforms.
Features that need to be added to Mozilla
From HTML 5:
o SVG inline in text/html documents;
o section, article, aside, nav, hgroup, header, footer, mark, time, progress, meter, figure,
figcaption, details and summary elements;
From SVG:
o Support for declarative animations;
o Support for SVG Fonts and fix text on paths;
o Support for SVG Views;
o Support for 1.2 textArea and tbreak, 1.2 audio and video
Mozilla Web Browsers including Mozilla Firefox
Mozilla 1.9.2, an open-source, Crystal Level web platform provides Gecko, the layout engine, and
SpiderMonkey, the scripting engine. These engines provide robust cutting-edge web-standards support
for web browsers and a solid platform for cross-platform applications. Mozilla Gecko has support for:
HTML 4.01 (HyperText Markup Language);
HTML 5 'Subset';
HTML 5's ;
' named character reference;
contenteditable and spell checking support (but not spellcheck attribute);
canvas element (Mozilla 1.8+)
HTML 5's audio, video and source elements;
23
WAI-ARIA adds support for Accessible Rich Internet Applications;
Cascade StyleSheets (CSS) level 1, Visual & Interactive and Paged level 2.1 provide a realistic
way to add presentation and layout to your document structures;
Some main and experimental CSS level 3 features;
The ability to style and script with unknown markup (A Flow-level element bug prevented full
support but has now been fixed in Mozilla 1.9);
For image support we have GIF89a, JPEG, PNG, Icons (.ico, .png, .jpg, .gif), BMP (Windows
Bitmap), XBM (X Bitmap) and as of Mozilla 1.8, SVG 1.1
Document Object Model (DOM) level 1 (HTML, XML), most of level 2 (Core, HTML, XML,
Views, Stylesheets, CSS, CSS2, Events, MouseEvents, HTMLEvents, Range and some
Traversal, UIEvents and MutationEvents) and a little of level 3 (XPath, fragment of Core and
Load & Save), Bits of DOM 5 HTML expose the document to scripting interaction;
JavaScript 1.8.2 and ECMAScript for XML (E4X) extends user interaction for handling the extra
power of XML (Mozilla 1.8+) (JavaScript 1.5 originally, 1.6 & E4X in Mozilla 1.8, 1.7 added in
Mozilla 1.8.1 and JavaScript 1.8 in Mozilla 1.9)
Native JSON (JavaScript Object Notation) for data-interchange and Web Workers support;
GeoLocation support
Selectors API allows an easier way to access parts of the DOM using CSS-like selectors;
In Mozilla 1.8 there was the MozStorage which allows Mozilla-based applications and the
Session Store API for Mozilla-based Extenstions to both to use the embedded SQLite database
engine to store information;
Also in Mozilla 1.8, to compliment cookies and Mozilla's storage, Web Storage's sessionStorage,
the old Mozilla globalStorage and as of version 1.9.1, the current Web Storage's localStorage is
supported. These allow local database performance and capacity with SQLite to store
information beyond the abilities of cookies for webpages and web applications;
SVG support includes:
Groups, Titles, Descriptions, metadata, defs and use;
Stroke and fill colours;
Basic shapes (Rectangles, Rounded Corner Rectangles, Lines, Circles, Ellipses, Polylines and
Polygons);
Paths;
24
Opacity;
Text;
Text on a path (buggy);
Hyperlinkg;
Markers, Clipping;
Masks, Patterns (since 1.9.0);
Linear and radial gradients;
Translations, skews, rotation and scale;
Bring in pixel images;
Conditional switch;
SVG (at least 1.1) Filters (since 1.9.0);
CSS support;
Scripting support;
Scripted animation;
SVG integrates with webpage (true transparent background);
Page reorganization: The layout engine used in Mozilla (which is known by many names) started off as
a project to write a new layout engine for Mozilla and became the layout engine of Mozilla and the
foundation for a nearly-complete rewrite in late 1998. This page used to cover parts of the rewrite
project other than the layout engine, but the information here quickly became obsolete as other groups
started working on them. Thus there are now better sources of information on the cross platform front
end, embedding Mozilla, networking, and all the other parts of Mozilla. This page is now limited to the
layout engine, consisting of roughly the HTML parser and XML parser, the DOM implementation, the
CSS parser and style system, and the code for CSS-based and HTML-based layout and rendering.
Although much of the code for the cross-platform toolkit is mixed in with this code, it is described
elsewhere.
Project Overview
Frequently asked questions (slightly out of date)
Glossary of Gecko lingo
Gecko demos (old, but still good)
25
Technical information
Technical documentation on the layout engine
XML in Mozilla
The Document Object Model in Mozilla
Web developer documentation
Mozilla Technical documentation
Testing (Quality Assurance)
Reporting and finding bugs
Test cases
Coding (Development)
Good Bugs for Newbies
Running layout regression tests
Porting instructions (old, specific to layout engine porting, but probably still relevant)
Coding conventions (obsolete)
How to modularize your code (extremely out of date)
Project History
Overview of Gecko Project (October 1998)
Screen shots
Confused about names like "Gecko," "NGLayout," and "NGT?"
Gecko Community
Mailing list/newsgroup info and guidelines
The "layout" newsgroup
The "style" newsgroup
The "DOM" newsgroup
Related projects
DocZilla (an SGML/Hytime-capable browser), and a tutorial on extending Mozilla
26
Chapter 9
The Mozilla toolkit
Toolkit API
The Mozilla Toolkit is a set of programming interfaces (APIs) built on top of Gecko which provide
advanced services to XUL applications. These services include:
Profile Management
Chrome Registration
Browsing History
Extension and Theme Management
Application Update Service
Safe Mode
Official References
Structure of an Installable Bundle: describes the common structure of installable bundles,
including extensions, themes, and XULRunner applications
Extension Packaging: specific information about how to package extensions
Theme Packaging: specific information about how to package themes
Multiple-item Extension Packaging: specific information about multiple-item extension XPIs
XUL Application Packaging: specific information about how to package XULRunner
applications
Chrome Registration
Importance of JavaScript (ECMAScript) in the Mozilla toolkit
JavaScript is a widely used scripting language originally developed at Netscape; it has now been
standardized by the ECMA-262 committee as “ECMAScript.” It is ubiquitous not only on web pages but
also with server applications.
27
Mozilla provides two implementations of JavaScript: the original and most widespread implementation
is written in C and is embedded in the Mozilla browser, while the second implementation is written in
Java. Information about JavaScript implementations, standards, test suite, tutorials and newsgroups can
be found at http://mozilla.org/js/.
In terms of the Mozilla toolkit, the JavaScript debugger, Venkman, provides a powerful JavaScript
debugging environment for Mozilla-based browsers (excluding Gecko-only browsers such as K-
Meleon and Galeon).
As it has been developed to date, Venkman allows developers to do the following:
o set/clear breakpoints;
o single step into, step over, and step out;
o list stack frames;
o break/trace when an exception is thrown;
o break/trace when an error occurs (uncaught exception);
o examine local variables in any stack frame;
o enumerate properties of objects, including non-enumerable properties;
o evaluate arbitrary JavaScript in any stack frame;
o set watches;
o profile JavaScript (collect and report on call times);
o “pretty print” JavaScript (“fix” whitespace and newlines); and
o locate constructor and creation site for arbitrary objects;
Key benefits of using the Mozilla toolkit
A Mozilla application runs unchanged and fully functional on any supported Mozilla platform.
Mozilla is entirely open source/free software, which provides many consequent developer benefits. For
example, widely used open source code tends to be more robust and secure than proprietary software
And if there is a bug, a developer is empowered to inspect the code and fix the problem (and preferably
check the change in for the benefit of all: “give to the code and it will give back to you”).
Mozilla all but removes the distinction between desktop applications and web pages, which leads to
several further benefits. A developer who currently does desktop application programming, with its
pervasive reliance on elements such as components, APIs, objects, events, methods, properties and
sophisticated graphical user interfaces, will find an hospitable programming environment. However,
much more of the technology will be based on consensual standards, the full power of web design will
be directly available for enriching the user experience and the application will be cross-platform.
28
Conversely, many web designers will find that they can evolve their skills to develop full-blown
applications without needing to jump out of the territory familiar to them.
What developer tools are built in to Mozilla?
Mozilla 1.0 contains a DOM inspector (for which a tutorial is also available), JavaScript debugger, Java
and JavaScript consoles, and syntax-highlighted View Source.
Security of the toolkit
Security in Mozilla starts with NSS, the Network Security Services library written by Netscape
engineers. This library, which predates the 1998 “Free the Lizard” campaign, benefits from:
o open inspection: Security experts generally agree that good security is best achieved through
code being open.
o experience: Netscape invented the Secure Sockets Layer (SSL) protocol that is now the standard
for socket-based encryption and authentication over the web and implemented the first
widespread commercial use of X.509 v3 public key certificates.
Layered on top of NSS is the Personal Security Manager (PSM). PSM performs cryptographic
operations on behalf of a client such as Mozilla and is accessible as a component using ECMAScript
(JavaScript).
29
Chapter 10
Usage and criticism of Gecko
Gecko is primarily used in web browsers, notably Firefox. It is also used in other Mozilla web browser
derivatives such as Camino, Flock, SeaMonkey, K-Meleon, Netscape and the version of Internet
Explorer that runs under Wine.
Google's picture-organization software Picasa (for Linux) is based on Gecko.
DevHelp, a GTK+/GNOME browser for API documentation, use Gecko for rendering docs.
Gecko is also used by Sugar for the OLPC XO-1 computer.
Gecko is used as a complete implementation of the XUL (XML User Interface Language). Gecko
currently defines the XUL specification.
Criticism
One of the primary reasons for slower market share adoption is the complexity of the Gecko code which
aims to provide much more than just an HTML renderer for web browser. The Gecko engine also
provides a versatile XML-based user interface rendering framework called XUL that was used
extensively in mail, newsgroup and other programs. Another reason for much of the complexity in
Gecko is the use of XPCOM a cross-platform component model.
30
Chapter 11
Project of Gecko
NGLayout Project
NGLayout is the next-generation layout engine currently under development for Netscape
Navigator. Like the Navigator source, the source code for the NGLayout engine will be freely
available from mozilla.org under the standard NPL license agreement. This technology will be
integrated into the Mozilla open-source browser as soon as it is ready later this year.
The NGLayout engine was designed from the ground up to offer the following benefits:
o Layout
Very fast; really fast; as fast as possible
Incremental reflow, including tables and integration with DOM
Backward compatibility with Netscape Navigator 4.0;
Support for HTML 4.0, including forms.
Pagination, control over running matter
o Rendering
High-performance rendering enhancements
Double-buffered rendering on demand
High-end graphic capabilities, including alpha blending
o Style
Full HTML 3.x style support; limited HTML 4.x style support
Full CSS implementation; limited CSS 2 support
o DOM
Compatible with previous Netscape navigator releases.
Full W3C Level 1 DOM support available in JavaScript and C++, and Python
through PyXPCOM.
Most important parts of W3C DOM Level 2
o Parser
Fully backward-compatible with Navigator 4.x and Internet Explorer
31
Limited DTD support
Extensible tag handling
o Embeddable
"WebWidget" API allows developers to embed NGLayout in their own custom
applications.
o Configurable
XPCom interface support allows for run-time extensions to the underlying system
Portions of the UI are expressable as HTML
o Extensible
Dynamic tag handling, making it possible to give layout and rendering behavior
to your new tags
XML and RDF support
XPCom-based implementation permitting incremental upgrade of underlying
systems
Demo content
You must be using NGLayout to view these demos, since they rely on the W3C Level 1 DOM, CSS 1,
CSS 2, the not-yet-standardized CSS Object Model (will likely be part of DOM Level 2), and other
goodies. We'd really like your help in building additional demo content. Please check out the relevant
W3C specifications (CSS1, CSS2, HTML4, DOM) and send us URLs for your cool and snazzy demo
pages. We'd really like to include your work here - just send us a note if you're interested.
Note that some demos have been modified to work in other browsers that don't support all of these
things. For example, the "Expando" demo works in IE5B2. Because IE5B2 doesn't support much of the
W3C Level 1 DOM, we put in some backwards compatibility hacks (document.all instead of
document.getElementById).
We encourage you to write your own demos - download NGLayout, read up on your W3C specs, and
hack away! Be sure to let us know if you have something exciting to share.
32
Jump! Travel - See CSS, HTML 4.0, , XML and XML+CSS in action, all in one place. This
demo was originally shown at the C/Net Builder.Com conference in New Orleans.
Random Style - Swap styles on a test paragraph on a random basis. Shows off NGLayout's
support for CSS, the CSS object model, JavaScript and incremental reflow.
Expando - Oscillates the letter spacing between 0 and 1 em in a document with a floating DIV
element and a :first-line rule.
Netscape home page - with some funky CSS object model stuff applied to all the links in the
document.
"Book" search results, in XML - this presents some imaginary search results for books in XML.
It's displayed with XML+CSS and uses the DOM for nifty effects (you can swap which style
sheet is enabled, and use the DOM to sort the books by Author, Title, etc.)
If the link to the book doesn't work you can download it completely.
Gecko's Realm - includes some great standards based content. Very worthwhile!
Recently in the press, there have been a lot of articles about something Netscape calls "Gecko." This is
marketing hoopla around two Mozilla projects: NGLayout (formerly known as Raptor) and XPFE.
Before Netscape's marketing department named it "Gecko," they had referred to it using the code name
"NGT."
Mozilla.Org is not Netscape. So we'll keep on calling NGLayout by its name, as we will for XPFE.
Meanwhile, the press and general public will continue to hear about Gecko from the Netscape marketing
people, who are doing jumping jacks of excitement over NGLayout's standards support and high
performance, and XPFE's nifty architecture.
33
Screen shots of NGLayout
NGLayout browsing popular websites showing basic HTML layout, tables, images, links, imagemap
support, etc.
NGLayout nails an intensive CSS box test created by the Web Standards Group
34
Basic HTML 4.0 forms capabilities, including support for FIELDSET and LEGEND. Notice that CSS
properties have been applied to the legend and fieldet.
Strong support for CSS1's float: property lets us lay out this version of the W3C home page without any
tables, only DIVs and CSS
35
Conclusion
That's it for the first part. In future parts I plan on giving example code that uses Thebes to do rendering
to serve as a cookbook for anyone writing rendering code in Gecko. This should be especially useful as
legacy code slowly gets converted from nsIRenderingContext to Thebes. I also plan on discussing how
painting and invalidation are handled from the OS/widget level down to the thebes level. In addition, a
separate presentation on the text API would probably be useful --- there is significant complexity there,
especially regarding the interaction of the Thebes font code and the layout TextFrame code.
36
References
1. Embedding Mozilla
2. Mozilla CSS support chart
3. The SVG font, color profile, animation, view, and cursor modules are yet to be implemented and
the filter and text modules are only partially implemented. The extensibility module is also
implemented but is currently disabled
4. Mozilla SVG Status
5. nglayout project: identity crisis
6. Ars Technica interviews Scott Collins
7. "IE Uses Gecko Under Wine". Wine Wiki. http://wiki.winehq.org/Gecko. Retrieved 2009-09-
14.
8. "Picasa 3.0 for Linux". Google. http://picasa.google.com/linux/download.html#picasa30.
Retrieved 2008-12-28.
9. "Official package devhelp (0.19.1-6 and others) on Debian Lenny". Debian Project.
http://packages.debian.org/lenny/devhelp. Retrieved 2009-08-12.
10. Gecko - Mozilla Developer Center
11. Gecko development wiki (wiki.mozilla.org)
12. Gecko Layout Engine - Real-time Reflow Videos
13. Mozilla Product Strategy Proposal (DRAFT)
14. Web Browser Standards Support
37