Una manera de navegar facilment pel DOM del navegador és emprant el DOM Inspector i cridant: chrome://browser/content/browser.xul.
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 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.