A més a més posen a disposició del públic l’extensió XUL Accessibility Tool que permet validar de forma automàtica alguns dels critèris descrits a les pautes.

D’aquesta manera obtenim l’arbre sencer i, per exemple, cercar la jerarquia de nodes per crear una regla CSS per poder afegir al userChrome.css.

Es pot executar el DOM Inspector des del menú d’eines.

Per fer-ho els CSS de Mozilla tenen la propietat -moz-box-ordinal-group

El codi de les pestanyes es pot veure al fitxer del theme globalBindings.xml i el binding que ens interessa és:

<binding id="tabbrowser-tab" extends="chrome://global/content/bindings/tabbrowser.xml#tabbrowser-tab">
  <content chromedir="&locale.dir;" closetabtext="&closeTab.label;">
    <xul:hbox class="tab-image-left" xbl:inherits="selected"/>
    <xul:hbox flex="1" class="tab-image-middle" align="center" xbl:inherits="selected">
      <xul:stack class="tab-icon">
        <xul:image xbl:inherits="validate,src=image" class="tab-icon-image"/>
        <xul:image class="tab-extra-status"/>
      </xul:stack>
      <xul:label flex="1" xbl:inherits="value=label,crop,accesskey" crop="right" class="tab-text"/>
    </xul:hbox>
    <xul:toolbarbutton anonid="close-button" class="tab-close-button" tabindex="-1"/>
      <xul:hbox class="tab-image-right" xbl:inherits="selected"/>
  </content>
</binding>

Aquest fitxer pot canviar en funció del theme usat.

Afegint el següent codi a l’userChrome.css s’aconsegueix el resultat desitjat:

.tabbrowser-tabs {
  -moz-box-ordinal-group: 2;
}
.tab-image-middle {
  -moz-box-ordinal-group: 2;
}
.tab-image-right {
  -moz-box-ordinal-group: 3;
}
.tab-image-left {
  -moz-padding-start: 12px;
}
.tab-icon  {
  -moz-padding-start: 10px;
  margin-right: -10px;
}

Per gestionar l’userChrome.css es pot utilitzar l’extensió Stylish evitant haver d’entrar al profile.

De moment per fer funcionar Mango, cal:

1. Instal·lar Xulrunner.
2. Descarregar el paquet encara anomenat Mozchat.
3. Muntar el paquet segons les instruccions de Deploying XULRunner.

L’opció que mostra l’exemple, afegir el codi SVG en línia amb el XUL, tot i demostrar una de les gràcies de poder mesclar dialectes XML, és un problema ja que no permet una fàcil manipulació dels skins.

Font: Xulfr

Aquesta extensió afegeix unes quantes eines per desenvolupar comodament una extensió en XUL:

Constructor d’extensions

Permet muntar els paquets d’una extensió (jar i xpi) i instal·lar-la rapidament

Editor de install.rdf

Formulari per omplir les dades necessaries del fitxer install.rdf

Javascript Shell

Permet executar javascript de forma interactiva. Al tenir permisos d’execució al chrome es pot experimentar amb XPCOM.

Entorn Javascript

Permet executar fragments de codi. Igual que la Shell de Javascript té permisos d’execució al chrome

Editor XUL

Permet editar fitxers XUL i veure’n el resultat a l’instant.

Editor HTML

Permet editar HTML i veure’n el resultat a l’instant

Recàrrega del chrome

Permet recarregar el chrome sense haver de reiniciar el navegador.

Font: Benjamin Smedberg

Un llistat de funcionalitats a tenir en compte pels desenvolupaments basats en Firefox 1.5.

Font: Asa Dotzler - Firefox and More

Com que XUL no és res més que una sintàxi XML ens podem aprofitar de la funcionalitat extensiva d’aquest format i mesclar XUL i XHTML per tal de formatejar adequadament fragments de text dins la nostra aplicació.

Per poder emprar elements XHTML dins un document XUL s’ha de:

1. Declarar el namespace de l’XHTML
2. Escriure els elements XHTML amb el prefix escollit pel namespace

És a dir, donat un XUL tal com

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="loremIpsum" title="Lorem Ipsum" orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <description>Lorem Ipsum dolor sit amet...</description>
</window>

Podriem considerar substituir l’element description per un paràgraf XHTML o, fins hi tot afegir un títol de secció mitjançant un h1. El codi quedaria així:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="loremIpsum" title="Lorem Ipsum" orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html=”http://w3.org/1999/xhtml”>
   <html:h1>Un lorem ipsum qualsevol</html:h1>
   <html:p>Lorem ipsum dolor sit amet…</html:p>
</window>

D’aquesta manera podriem arribar a combinar la potència de XUL amb XHTML, SVG, MathML, XForms, etc. sense límit.