Firefox Themes - dodawanie brakującej favikony

Intefejs graficzny Firefoksa opiera się, mówiąc w dużym skrócie, na elementach XUL, których wygląd jest opisany plikiem CSS. Także zniknięcie naszych ikonek spowodował brak elementu i / albo jakaś dzika reguła. Czas to zmienić.

Otwórzmy menu Tools i wybierzmy DOM Inspector. W okienku z menu File wybieramy Inspect a Window → nasze okno Firefoksa. Ale bajer, co? Pokazała się struktura DOM okna przeglądarki. Wszystkie jego elementy są pięknie wypisane w drzewku. Teraz należy zlokalizować feralny pasek Quick Bookmarks.

Klikając na poszczególnych węzłach drzewka, podświetlamy czerwoną obramówką ten element. W ten sposób możemy dojść do naszego paska narzędziowego:

No i mamy element - xul:image. Po prawej stronie okna odczytujemy klasę takiego obrazeczka - toolbarbutton-icon oraz xbl:inherits - validate,src=image,toolbarmode,buttonstyle. Zapisujemy sobie to gdzieś.

Weźmy na tapetę motyw iFox 1.6.3. Jeśli śliczny, gdyby nie to, że psuje nam zakładki, pajac jeden. Zainstalujmy go i przejrzyjmy okno Firefoksa DOM Inspectorem. Okaże się, że nie ma tam elementu xul:image!

Ale jest na to rada. Zapiszmy plik ifox-1.6.3-fx.jar na dysku naszego komputera. Potem używając WinRARa (bądź czegoś innego, ja preferuję ten program) otwórzmy go jak folder. Po prostu odpalmy aplikację, przejdźmy do katalogu gdzie jest plik .jar i kliknijmy na niego w eksploratorze plików w WinRARze. Ujrzymy jego zawartość.

Należy odnaleźć plik browser.xml, znajdujący się także w katalogu browser i edytować go. Ukaże się naszym oczom struktura XML okna. Odnajdujemy znajome elementy xul:spacer o klasach bookmark-image-left i -right.

1. <xul:spacer class="bookmark-image-left" xbl:inherits="accesskey,crop,toolbarmode,buttonstyle"/>
2. <xul:label class="toolbarbutton-text" crop="right" flex="1" xbl:inherits="value=label,accesskey,crop,toolbarmode,buttonstyle"/>
3. <xul:spacer class="bookmark-image-right" xbl:inherits="accesskey,crop,toolbarmode,buttonstyle"/>

Dopisujemy brakującą linijkę, odpowiadającą za obrazek, przed <xul:label/>, wypełniając je danymi z DOM Inspectora:

1. <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,toolbarmode,buttonstyle"/>

Teraz zapiszmy plik. WinRAR spyta się, czy zaktualizować archiwum. Potwierdzamy. Jesteśmy w połowie sukcesu. Teraz bowiem należy zedytować plik .css, aby ikonki się pokazały. Musimy to zrobić, ponieważ w większości skórek wyłączono dodatkowo obrazek przez regułę w arkuszu stylów.

Otwieramy przez WinRAR plik ifox-1.6.3-fx.jar/browser/browser.css, szukamy reguł dla toolbarbutton-icon i patrzymy czy gdzieś jest display: none. Wykomentowujemy feralne linijki. Zapisujemy, potwierdzamy zaktualizowanie archiwum. Możemy także dla przywrócenia starego efektu paskowi zakładek, zmienić reguły dla dwóch xul:spacerów, które będą zbytecznie rozpychały nam ikonki i pokazywały podświetlenie na :hover. Ale to już zabawa z CSSem, zostawiam to na później.

Teraz troszkę magiczna część zadania. Jak zmusić Firefoksa, żeby zainstalował plik? Co szybsi z nas pewnie już chcieli otwierać .jar przez File → Open File. No ale to nie działa. Potrzeba trochę się pomęczyć. Kliknięcie na Install na oficjalnej stronie Themes dla Firefoksa powoduje wyświetlenie się okna dialogowego z pytaniem czy zainstalować Theme. Jak spojrzymy na źródło strony, okaże się że to zwykłe hiperłącze:

1. <a href="http://releases.mozilla.org/pub/mozilla.org/themes/ifox/ifox-1.6.3-fx.jar" onclick="return installTheme(event,'iFOX 1.6.3','../images/default.png');">Install</a>

Podczas zdarzenia onclick wywoływana jest funkcja - pierwszym parametrem jest zdarzenie, drugim nazwa motywu, a trzecim link do pliku przedstawiającego ikonkę rozszerzenia. Ostatni parametr jest opcjonalny. Funkcja w kodzie strony mieści się wyżej:

1. <script type="text/javascript">
2. <!--
3. function installTheme( aEvent, extName) {
4. InstallTrigger.installChrome(InstallTrigger.SKIN, aEvent.target.href, extName);
5. return false;
6. }
7. -->
8. </script>

Stwórzmy zatem plik .html, skopiujmy ją do niego, utwórzmy hiperłącze do naszego pliku, ze zmienionym arkuszem stylów browser.css.

1. <a href="ifox-1.6.3-fx.jar" onclick="return installTheme(event,'iFOX 1.6.3');">ifox-1.6.3-fx.jar</a>

Zapisujemy plik, otwieramy go w Firefoksie i klikamy na link. Potwierdzamy pytanie o instalację motywu i restartujemy przeglądarkę. Voilà! :)