Extending Gecko
with XBL and XTF

Brian Ryner

Software Engineer, Google

What is Gecko?

Adding to Gecko

Ways to extend Gecko

Anonymous Content

Simple Anonymous Content Example: Scrollbar

XBL Terminology

Structure of a Binding

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
  <binding id="mybinding">
      <method name="update">
        <body> ... </body>
      <property name="enabled">

Structure of a Binding, continued

    <html:img inherits="src=imagesrc"/>
  <handler event="mouseover" action="showTooltip();"/>

Attaching a Binding

Advanced XBL features

Advanced XBL features, continued

XBL Demo

Start demo

Demo source
Bindings file source
CSS file source


Start demo

Demo source
Bindings file source
CSS file source

XTF Overview

XTF Terminology

Structure of an XTFElement

class MyElement : public XTFXMLVisual // : XTFVisual : XTFElement
  // XTFElement
  void onDestroyed();
  unsigned long getElementType() { return ELEMENT_TYPE_XML_VISUAL; }
  bool getIsAttributeHandler() { return false; }
  void getScriptingInterfaces(....);

  void willChangeDocument(DOMDocument *newDoc);
  void documentChanged(DOMDocument *newDoc);

  void willChangeParent(DOMElement *newParent);
  void parentChanged(DOMElement *newParent);
  bool handleDefault(DOMEvent *event);

Structure of an XTFElement, continued

  // XTFVisual
  DOMElement* getVisualContent();
  DOMElement* getInsertionPoint();
  bool getApplyDocumentStyleSheets() { return true; }

  void didLayout();

  const char* getClassAttributeName() { return "class"; }

  // XTFXMLVisual
  void onCreated(XTFXMLVisualWrapper *wrapper);

XTF Example: XForms

XForms Example

What else could be implemented this way?

Future Direction