Mozilla development
there is no data, there is only xul

Fabien Cazenave <kaze@kompozer.net>

Update by Laurent Jouanneau <laurent@xulfr.org>

Genesis of the Mozilla technology

march 1998: first release of the Netscape Communicator source code
- victory for the open-source movement… or surrender to MSIE?
- huge and complexe code: lot of platform-specific code, little modularity
- a few non-free parts
october 1998: rewriting from scratch
- scrap the old Communicator code and rebuild from the ground up
- new lightweight layout engine: Gecko
- new interface description language: XUL
- new cross-platform user interface library: XPFE toolkit

Mozilla 1.0

first year of the Mozilla project
- new features and enhancements
- regular contributors involved in the project management / planning
- the Mozilla project becomes larger than any one company
- Mozilla becomes a platform for internet applications
2002: Mozilla 1.0 release (codename = SeaMonkey)
- many improvements on the browser and mailer (privacy, UI…)
- de facto reference implementation for W3C standards
- more than 90% of people still using Internet Explorer
- first release of Phoenix

The Mozilla Foundation

2003: AOL closes its browser division
- Netscape’s employees are laid off
- AOL keeps the Netscape brand for its portal
2003: the Mozilla project creates the Mozilla Foundation
- non-profit organization, supported by donations
  including 2M$ from Netscape, IBM, Sun Microsystems and RedHat
- the foundation manages the Mozilla project
- mission: promoting openness, innovation and opportunity on the internet

Firefox 1.0

2004: Firefox 1.0 release
- simpler, better browser
- over 100 million downloads in a year
2008: ten years
- Firefox has become a showroom for XUL developments
- Firefox reaches 20% worldwide market share
- Microsoft has to make IE work with web standards
2011: Firefox 4
- ~30% worldwide market share
- over 1 billion downloads for Firefox
- Internet Explorer drops to ~50% market share
- IE9 supports CSS3, <audio|video|canvas>, SVG, XHTML…

Questions?

Gecko

Gecko is a rendering engine:
- content (HTML, XML, SVG, images, applets…)
- + presentation (CSS, presentational HTML tags…)
- ⇒ fills the browser content area
Gecko provides:
- an HTML and XML parser
- a DOM implementation
- a CSS parser and style system
- the code for HTML+CSS based layout and rendering
Gecko also displays XUL interfaces (“chromes”)
- Firefox is a Mozilla application
- Firefox’s UI is rendered by Gecko
```
chrome://browser/content/
```
Gecko is standard-compliant, cross-platform and was embeddable (K-meleon, Camino…),

Mozilla Application Framework

Everything a good browser needs…
- Gecko: rendering engine (HTML, CSS, SVG, XUL…)
- SpiderMonkey: JavaScript engine
  TraceMonkey: tracing-JIT compiler
  JägerMonkey: method-JIT compiler
- Necko: networking library
- NSS: security library
…and a lot more:
- XUL: user interface description
- XPCOM: cross-platform Component Object Model
- Toolkit: extension manager, update, MozStorage… (replaces XPFE)
- GFX: platform-specific graphics rendering and widget sets for Win32, Xorg, and Mac
- XPInstall: cross-platform installation of small packages (extensions, themes…)
- Web Services: XML-RPC, XMLHttpRequest…
- NSPR: platform abstraction layer (Netscape Portable Runtime)
- …

The framework supports a number of open or common standards like DTD, RDF, XSLT/XPath, MathML, SVG, JavaScript, SQL, LDAP, etc.

quick overview

Mozilla Application Framework

Gecko vs Webkit

An application is built on top of Gecko
An application embed webkit. Webkit is used as a component.

Other rendering engine: Webkit (Chrome, Safari), Trident (IE), KHTML (Konqueror), Presto (Opera), Tasman (IE mac)...

Designing XUL Applications

quick overview

XUL+CSS to define the User Interface
JavaScript to handle the interactions
XPCOM to define cross-platform objects
Toolkit API
Chrome packages

User Interface

XUL: XML User interface description Language
- cross-platform interface description
- stylable with CSS
- easy to tweak: nothing to compile, scriptable in JavaScript, similar to HTML in many ways
- can include any other XML markup (MathML, SVG, XHTML…)
XBL: eXtensible Binding Language
- used to design or extend XUL objects
- supports inheritance
- describes bindings that can be attached to elements in other documents

Coding

JavaScript:
- scripting XUL elements
- calling XPCOM objects
- the JIT compiler brings good performances
XPCOM: Cross-Platform Component Object Model
- can be used with a lot of computer languages:
  JavaScript, C++, Python…
- XPIDL: Interface Description Language
  used to specify XPCOM interface classes
- XPConnect: allows to use XPCOM components from JavaScript code

Toolkit API

= set of programming interfaces (APIs) built on top of Gecko.

The Mozilla Toolkit provides advanced services to XUL applications, such as:

Profile Management
Chrome Registration
Browsing History
Extension and Theme Management
Application Update Service
Safe Mode

Questions?

XUL Overview

Introduction
Javascript, DOM, DOM Event
Chrome packages
Chrome URLs
Chrome manifests
XPI extensions
XUL applications

There is only XUL

What can be done with XUL? (that can’t be done with HTML)
- Input controls such as textboxes and checkboxes
- Toolbars with buttons or other content
- Menus on a menu bar or pop up menus
- Tabbed dialogs
- Trees for hierarchical or tabular information
- Keyboard shortcut handlers
- …
How does XUL work?
- like HTML: XUL is rendered by Gecko
- like HTML: XUL documents are styled with CSS
- unlike HTML: different box model (e.g. <hbox|vbox>, <spacer>)
- unlike HTML: allows highly extensible UIs (e.g. overlays)
How can we use XUL?
- [Firefox | Thunderbird | KompoZer…] extensions
- Standalone XulRunner applications
- Remote XUL applications (requires XUL Remote manager with Firefox 4+)
- XUL packages

XUL Elements: getting started

“XUL Periodic Table”:
http://kazhack.org/xpt/
Official reference on MDC:
https://developer.mozilla.org/en/XUL_Tutorial

Let’s have a look!

Play with XUL in real time ( on xulfr.org).

XUL box model

Flexible box model (CSS3)
Unlink classic CSS box model (HTML), it is not a "flow" based box model
each element is a box (display:-moz-box). Its position and size is relative to other elements
a box indicate how children are organized: orientation, alignment, direction
a box indicate its size, relative or not to its sibling box
See this tool: boite.xul (from xulfr)

XUL box model: orientation

Vertical boxes: children are aligned vertically
- <vbox>
- <box orient="vertical">
- -moz-box-orient: vertical
Horizontal boxes: children are aligned horizontally
- <hbox>
- <box orient="horizontal">
- -moz-box-orient: horizontal

XUL box model: direction

dir="ltr": children are displayed "Left To Right"
dir="rtl": children are displayed "Right to Left"

XUL box model: size

Four way to size a box:

automatic: size of the box is the size of its content.
flexible: size fits in context
Forced by the container: size is influenced by align, pack and crop attributes of the parent box
Fixed: with width and height attributes or css.

XUL box model: flex

flex attribute or -moz-box-flex
Indicate the ratio between the size of the box, and the total size of all sibling boxes

          <vbox id="P">
            <box id="A" flex="1"/>
            <box id="B" flex="3" />
            <box id="C" flex="2"/>
          </vbox>

height of A: 1/(1+3+2) * height of P
height of B: 3/(1+3+2) * height of P

if horizontal box -> width
flex=0: "automatic size"

XUL box model: pack

position of the children in the container:
- Horizontally if the container has orient=horizontal
- Vertically if the container has orient=vertical
pack attribute, or -moz-box-pack
possible values: start, center, end

XUL box model: align

position of the children in the container:
- Horizontally if the container has orient=vertical
- Vertically if the container has orient=horizontal
align attribute, or -moz-box-align
possible values: stretch, start, center, end, baseline

Questions?

Hello, world!

start Firefox 8 (Firebug is recommended)
Install XUL Remote manager and add <file> as a "domain" in the white list
start a decent text editor, e.g.:
- your favorite IDE (Eclipse, Komodo…)
- or Notepad++, Geany, Vim, Emacs…
keep an eye on the documentation:
- “XUL Periodic Table”: http://kazhack.org/xpt/

⇒ time to design a first XUL page!

JavaScript

Created by Brendan Eich for Netscape
Js engines: SpiderMonkey (Firefox), JavascriptCore (Webkit), V8 (Chrome), Carakan (Opera), Chakra (IE)
SpiderMonkey supports Javascript 1.8.5 (Firefox 4+)
Full implementation of the standard ECMAScript 5
- Oriented object language based on prototype (no class)
- if, do, while, for, for in, switch, case, break, continue, return, with
- Exceptions: try, catch, throw
- Standart built-in Objects: Object, Function, Math, Date, Array, String, Boolean, Number, Error, RegExp, JSON
Implementation of E4X: ECMAScript for XML
Non standard syntaxic features into SpiderMonkey: Iterator, Generator, Array comprehensions, let statement, destructuring assignement, Expression closures...

API in javascript

Browser vendors provide several API accessible in javascript. Contrary to the believe, these API are NOT Javascript

window, representing the "frame" that loaded the document. Javascript scripts loaded in HTML/XUL document are attached to the context of the window object.
document, is the DOM root object from which we ca n access to the document content
XMLHttpRequest, to do requests to the web server
Worker, chromeWorker, to do background tasks
WebSocket, MessageEvent.., to do low level network exchange
ArrayBuffer, Int32Array...: "typed array", to manipulate binary content.

JavaScript: DOM

DOM: standardized API to manipulate HTML/XML content
Each syntactic element of an XML document is represented by an object in memory: Node, Document, Element, Text, Attr, Entity, Processing,Instruction
As content is structured in an hierarchical way in the xml document, DOM objects are linked as a hierarchical way too
a Document object is the root of all other DOM objects representing the document content. (With firebug, see the DOM of this document)

DOM — document node

To walk the DOM tree:
- document.body
- document.documentElement
- document.getElementById(elementID)
- document.getElementsByTagName(tagName)
- document.querySelector(cssSelector) / document.querySelectorAll(cssSelector)
To create nodes:
- document.createElement(tagName)
- document.createTextNode(text)

DOM — all nodes

To walk the DOM tree:
- node.childNodes[]
- node.getElementsByTagName(tagName)
- node.querySelector(cssSelector) / node.querySelectorAll(cssSelector)
- node.parentNode
- node.firstChild / node.lastChild
- node.previousSibling / node.nextSibling
To attach/copy/remove nodes:
- node.appendChild(nodeRef)
- node.removeChild(nodeRef)
- node.replaceChild(nodeRef1, nodeRef2)
- node.insertBefore(nodeRef1, nodeRef2)
- node.cloneNode()
- ~~node.innerHTML~~
To get/set attributes:
- node.getAttribute(attrName)
- node.hasAttribute(attrName)
- node.setAttribute(attrName, attrValue)
- node.removeAttribute(attrName)

Questions?

DOM Events

= a message, representing by an Event object, sending to an element
the message is passed to each ancester elements of the target, following 3 phases
These phases are
1. The capture phase: from the document root to the target element
2. The at-target phase: the message is arriving at the target element
3. The bubble phase: from the target element to the document root
schema

DOM Event listeners

Event handler attributes:
- onclick="myFunction()"
- onmouseover="myFunction()"
- onload="myFunction()"
- …
Event handler properties:
- node.onclick = myFunction;
- node.onmouseover = myFunction;
- document.onload = myFunction;
- document.onload = function() { … };
- …

DOM Event listeners

Setting event listeners:
- node.addEventListener("click", myFunction, false);
- node.addEventListener("mouseover", myFunction, false);
- document.addEventListener("load", myFunction, false);
- document.addEventListener("DOMContentLoaded", myFunction, false);
- …
=> function myFunction(event) { }
- event.stopPropagation();
- event.preventDefault();

Questions?

Table example ++

In your first XUL page, add behaviors.

keep an eye on the documentation:
- DOM: https://developer.mozilla.org/en/XUL_Tutorial/Document_Object_Model
- DOM Events: https://developer.mozilla.org/en/XUL/Events

The end.

Questions?

Mozilla development there is no data, there is only xul

Genesis of the Mozilla technology

Mozilla 1.0

The Mozilla Foundation

Firefox 1.0

Questions?

Gecko

Mozilla Application Framework

Mozilla Application Framework

Designing XUL Applications

User Interface

Coding

Toolkit API

Questions?

XUL Overview

There is only XUL

XUL Elements: getting started

XUL box model

XUL box model: orientation

XUL box model: direction

XUL box model: size

XUL box model: flex

XUL box model: pack

XUL box model: align

Questions?

Hello, world!

JavaScript

API in javascript

JavaScript: DOM

DOM — document node

DOM — all nodes

Questions?

DOM Events

DOM Event listeners

DOM Event listeners

Questions?

Table example ++

The end.

Mozilla development
there is no data, there is only xul