a.xul

Per reposicionar el botó de tancar pestanya del Firefox 2.0 i passar-lo de la dreta a l’esquerra el que cal fer bàsicament és jugar amb l’ordre dels elements que composen la pestanya.

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.

Com han fet tots els programadors al llarg dels anys quan aprenien un nou lleguatge de programació, anem a fer el famòs “Hello World” amb XUL.

Agafant l’estructura bàsica que vem veure a l’article anterior, afegirem el codi necessari per mostrar una cadena de text. En aquest cas sense utilitzar cap widget (botons, textos, menus, etc.) de XUL, sino amb elements XUL.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="helloworld" title="Hellow World!!" orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<description>Hello, world!!</description>
	<label value='Hello World!!' />
</window>

<label> i <description> són els dos únics elements que tenim per mostrar text en una aplicació XUL i el seu ús es molt senzill, com es pot veure amb l’exemple.