Mozilla Technologies

Scott MacGregor

Mozilla Corporation


What Is Gecko

Gecko Overview

  • At the bottom, we have
  • The core components of gecko
  • XUL Runner
  • At the top of the stack, the application layer: Thunderbird and Firefox

Gecko Versions

Future Gecko Goals

Gecko 1.9

What is XUL?

XUL Features

XUL Example

Start Demo

XUL Example II

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin"?>

<window id="simpleTest"
  title="A Simple XUL Test">
  <script type="application/x-javascript" src="example.js"/>

  <vbox flex="1">
    <listbox id="itemList" flex="1">
      <listitem label="Item 1"/>
      <listitem label="Item 2"/>
      <textbox id="labelField" flex="1" oninput="validateUserInput();"/>
      <button id="addButton" label="Add Item"
              disabled="true" oncommand="addItem();"/>

XUL Example Continued III

function validateUserInput()
  // enable the add button if we have valid text
  if (document.getElementById('labelField').value)
    document.getElementById("addButton").disabled = false;

function addItem()
  // create a new listitem and add it to the list box
  var textInputField = document.getElementById('labelField');
  textInputField.value = ""; // clear the text box
  document.getElementById("addButton").disabled = true;

Extending XUL with XBL

Consider a XUL button:

What is a XUL Button?

<binding id="button">
    <stylesheet src="chrome://global/skin/button.css"/>
        <xul:image class="button-icon" xbl:inherits="src=image"/>
        <xul:label class="button-text" xbl:inherits="value=label,accesskey,crop"/>      

What Is a XUL Button?

A little bit of CSS:

button {
  -moz-binding: url("chrome://global/content/bindings/button.xml#button");
Back to our Example:

<button label="Click Me!" image="chrome://browser/skin/Throbber-small.png"/>

Scalable Vector Graphics

SVG Status in Gecko

SVG Example

<g transform="translate(250,150)">
<g transform="translate(-82,0)">
<rect id="square" fill="red" x="-40" y="-40" width="80" height="80"
<g transform="translate(82,0)">
<circle id="circle" fill="blue" cx="0" cy="0" r="40"
<g transform="translate(0,0)">
<polygon id="triangle" fill="green" points="-40,40 0,-40 40,40"
  • Most content is specified through markup; can use CSS to style
  • High level primitives such as circles, rects; generic polygons
  • Event handling on individual elements through normal event mechanisms "for free"

SVG Limitations


  • Originally introduced by Apple in Safari
  • Canvas is a programmable img element
  • Gives a surface with a specified size to draw into
  • Part of the WHATWG Web Apps Spec

<canvas> 2D

var ctx = canvas.getContext("2d");
with (ctx) {
  translate(canvas.width / 2, canvas.height / 2);

  save(); translate(-82, 0);
  fillStyle = "red";
  fillRect(-40, -40, 80, 80);

  save(); translate(0, 0);
  fillStyle = "green";
  moveTo(-40, 40);
  lineTo(0, -40);
  lineTo(40, 40);
  fill(); restore();

  save(); translate(82, 0);
  fillStyle = "blue";
  arc(0, 0, 40, 0, 2 * Math.PI, false);
  fill(); restore();
  • Canvas supports multiple contexts; first one is for 2D drawing
  • Fully programmatic API for drawing; the only element in the page markup is canvas
  • Supports 2D affine transforms (scaling, translation, rotation)
  • Core operation is path strokes/fills
  • Path build-up uses commands similar to PostScript (moveto, lineto, arc, closepath)

<canvas> 2D: Patterns

var pat = ctx.createPattern(img, "repeat");
with (ctx) {
  fillStyle = pat;
  beginPath();          // triangle

  moveTo(10, 90);
  lineTo(50, 10);
  lineTo(90, 90);
  lineTo(10, 90);

  scale(.2, .2);
  • Drawing images
  • Single images using drawImage
  • Resuable patterns using createPattern (including image and gradient patterns)
  • canvases can be used as images!
  • offscreen images

<canvas> 2D: Animation

with (ctx) {
  var pat = createPattern(img, "repeat");
  fillStyle = pat;
  triangle(ctx); // create our triangle path


  setInterval(function () {
      // fill with transparent white, to fade out
      ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
      // rotate and fill with our pattern

      ctx.fillStyle = pat;
    }, 100);
  • Animation in canvas is done through DOM timers, just like DHTML
  • You redraw the scene (or portion of the scene) that needs to animate
  • In this example, fade out using a transparent white wash
  • Then redraw using a new rotation

Canvas Limitations

<canvas> Examples: 3D

3D Canvas Context
  • 3D Canvas Context
  • drawWindow to create a texture from a web page
  • The Reveal Extension

    Putting it all together with the Reveal extension

    Breaking down Reveal

    Tab Preview Widget
        <html:canvas id="previewCanvas"/>
        <label id="previewLabel" crop="end"/>
    Drawing the Tab Preview
    var ctx = canvas.getContext("2d");;
    ctx.scale(x/width, y/height);
    // this.browser.contentWindow is the content window
    // for the current tab. We're going to draw that tab onto
    // our canvas, scaling it down to the width and height
    // of our canvas element.
                   sleft, stop, width, height, "rgb(255,0,255)");

    In Summary


    Questions and Answers

    Resources and Acknowledgments

    Additional Resources:
    Thanks To:

    Thank You