Anfangs...vor Jahrzehnten...war ich noch mit dem Netscape Navigator unterwegs. Wer kennt ihn noch? ;-) Darauf folgte dann irgendwann der gar nicht mal so üble Internet Explorer for Mac. Ich staune gerade selbst darüber!
2002 kam Firefox. Ich weiß schon gar nicht mehr, ob ich den effektiv nur ein Jahr verwendete, bis 2003 Apple's Safari das Licht der Welt erblickte, oder ob ich noch bis zur nächsten Safari-Version anno 2007 wartete. Das scheint schon Äonen her zu sein...

Und da wäre noch Google's Chrome, um den man leider nicht drum herum kommt, da sich einige Websites sonst nicht wirklich verwenden lassen. Hier habe ich übrigens einen echt gut geschriebenen Kommentar dazu entdeckt.

Jedenfalls habe ich mich nun 2019 absolut von der Idee verabschiedet, MacOS X 10.6 noch länger verwenden zu können. Alles läuft prima und scheiden tut weh (vor allem von der funktionierenden Hardware, auf der kein neueres System mehr läuft, aber die problemlos ihren Dienst tut), aber sowohl eine der Hauptbeschäftigungen zu Hause (Surfen im Netz) wie auch eine Nebenbeschäftigung in der Firma (Recherchieren im Netz) sind mit den für 10.6 verfügbaren Browsern einfach nicht mehr machbar. Toll, dass sich das flexbox-Modell so schnell durchgesetzt hat und viele Websites zudem irgendwelche JavaScript-Bibliotheken verwenden, die sogar die letzte 32bit-Version von Chrome überfordern.

Genervt von Chrome ("Ab sofort geben wir vor, was im Web Standard ist!") und Safari (irgendwie hässlich und Feature-arm geworden) wären da ja noch viele andere alternative Browser, die allerdings überwiegend auf WebKit (wie Safari) oder Blink (wie Chrome...mehr oder weniger auch wieder WebKit) setzen.

Sorgen wir doch lieber mal dafür, dass Firefox wieder ein bisschen Marktanteil gut macht, denn bei dem guten Feuerfuchs hat sich einiges unter der Haube getan. Ich war erstaunt, welche Anpassungsmöglichkeiten dieser Browser bietet.

Voll flexibles GUI: userChrome.css

"Chrome" lautet die Bezeichnung aller Elemente außerhalb der Website. Also Adress-Leiste, Vor-/Zurück-Buttons etc.
Eigentlich sollte "Firefox" "Chrome" heißen – nicht Googles Browser. Denn bei Firefox ist der/die/das Chrome wirklich was Besonderes und durch den Benutzer vollständig hackbar. Es lassen sich nicht nur Themes installieren, die das Aussehen der Browser-Kontrollen ändern. Über eine css-Datei lässt sich jeder Aspekt dieser nicht ganz so nebensächlichen 5% des Browser-Fensters anpassen. Hier lassen sich sogar Dinge ändern, die mich bei Google Chrome schon immer genervt hatten.

Wie kommt man an diese Datei?

Adresse about:support im Firefox öffnen, worauf unter anderem der Speicherort des Benutzer-Ordners gelistet sein sollte. Auf den Button "Im Finder öffnen" klicken.

In diesem recht vollen Verzeichnis muss ein Ordner namens chrome erstellt werden, worin man seine css-Datei namens userChrome.css ablegen kann.

Problem ist nur, wie man die einzelnen Bedienelemente nun ansprechen soll. Aber dazu kommen wir später.

Im folgenden ist meine userChrome.css-Datei gelistet. Jene führt dazu, dass die Bedienelemente des Browsers (in Verbindung mit dem Theme Brushed Metal) in etwa so aussehen:

Änderungen im Gegensatz zum Standard sind:

  • Keine Favicons in Tabs und der Lesezeichen-Leiste, außer es handelt sich um angeheftete/pinned Tabs
  • Tabs leicht gerundet und kein hässlicher Balken über dem aktiven Tab
  • X-Icon, um Tab zu schließen, auf der für Mac üblichen linken Seite. Nur bei Mouseover eingeblendet
  • +-Icon, um neuen Tab zu erstellen nur bei Mouseover über die Tab-Leiste
  • Kleines Dropdown-Icon für Lesezeichen-Ordner in der Lesezeichen-Leiste

Das ganze erinnert natürlich stark an das minimalistische Safari-UI ;-)

userChrome.css (v3)
/* Schließen X bei Tabs auf der linken Seite und nur bei hover sichtbar */
.tabbrowser-tab:not([pinned="true"]) .tab-close-button {
  display:-moz-box!important;
  -moz-box-ordinal-group:0!important;
  margin-right:3px!important;
  cursor:pointer;
  }
.tabbrowser-tab:not([pinned="true"]) .tab-close-button {
  visibility:hidden;
  }
.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  visibility:visible;
  }

/* "Neuer-Tab"-Button nicht so präsent */
.tabs-newtab-button {
  display:none;
  cursor:pointer;
  }
#TabsToolbar:hover .tabs-newtab-button {
  display:inline;
  }

/* Keine Icons auf Tabs */
.tabbrowser-tab:not([pinned="true"]) .tab-icon-image {
  display:none;
  }

/* Inaktive Tabs etwas heller/transparenter */
#tabbrowser-tabs .tabbrowser-tab:not([visuallyselected="true"]) {
  opacity:0.3;
  }
 
/* Blauen Balken über aktivem Tab entfernen */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-line {
  display:none;
  }
/* Aktiven Tab mit selber Linie links, rechts und oben wie ganze Tabs-Bar */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
  border-left: rgb(150,150,150) 2px solid;
  border-right: rgb(150,150,150) 2px solid;
  border-top: rgb(150,150,150) 1px solid;
  box-shadow: #000000 0px 0px 2px;
  }

/* Unnötigen Strich ganz links der Browser-Leiste entfernen */
#TabsToolbar .titlebar-placeholder[type="pre-tabs"] {
  border-inline-end:none !important;
  }
.titlebar-spacer[type="pre-tabs"] {
  border-inline-end:none !important;
  }
.titlebar-spacer {
  border-inline-end:none !important;
  }

/* Dropdown-Icon bei Ordner-Bookmarks */
#personal-bookmarks .bookmark-item[container="true"] > .toolbarbutton-menu-dropmarker {
  display: -moz-box !important;
  }
/* Icon bei Bookmarks-Leiste entfernen */
#personal-bookmarks .toolbarbutton-icon {
  display:none;
  }
/* Etwas mehr Abstand zwischen Bookmarks in Bookmarks-Leiste */
#personal-bookmarks .bookmark-item {
  margin-right:10px !important;
  }


/* Tabs mit abgerundeten Ecken */
.tabbrowser-tab {
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
  }
.tabbrowser-tab .tab-background[selected="true"] {
  margin-left: -1px !important;
  margin-right: -1px !important;
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
  }
.tab-line {
  margin-left: 9px !important;
  margin-right: 9px !important;
  }
.tabbrowser-tab::before, .tabbrowser-tab::after {
  margin-top: 9px !important;
  }
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
  border: 1px solid rgba(0,0,0,.1) !important;
  border-bottom-color: transparent !important;
  margin-right: -1px !important;
  }
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
  #main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
  border: none !important;
  }

/* Footer mit allen Suchmaschinen aus der SearchSuggestions-Liste entfernen */
#PopupAutoCompleteRichResult .search-one-offs, #PopupSearchAutoComplete .search-one-offs {
        display:none !important;
        }

Elemente identifizieren

Snippets für diese userChrome.css findet man zu genüge. Doch stellt sich die große Frage, wie die Leute darauf kommen, dass das Favicon im Tab .tabbrowser-tab .tab-icon-image benannt ist.

Wie man mit dem Webinspektor den Inhalt von Websiten analysieren kann, kann man das über Umwege auch mit dem restlichen Browser-Chrome von Firefox machen.

Dazu im Webentwickler-Menü erst die Werkzeuge einblenden lassen (oberster Menüpunkt)...
 
...und dann die Webentwickler-Einstellungen öffnen.
 
Die untersten beiden Punkte der erweiterten Einstellungen, "Debugging-Werkzeuge für Browser-Chrome und Add-ons aktivieren" und "Externes Debugging aktivieren" aktivieren.
Dies ist eine einmalige Geschichte.

Um das Debugging zu starten...

...muss man im Webentwickler-Menü die Browser-Werkzeuge öffnen. (Nicht zu verwechseln mit Werkzeuge ein-/ausblenden oder Browser-Inhaltswerkzeuge)

Darauf sollte sich eine zweite Firefox-Instanz öffnen, in welcher man nun mit dem Objekt-Auswahl-Pfeil nicht nur auf Website-Inhalte sondern auch auf Browser-Chrome-Elemente klicken kann.

Hat bei mir allerdings immer zu einer Fehlermeldung Component returned failure code: 0x804b000d geführt.

Hier half nur, den Debugging-Vorgang manuell zu starten:

Firefox beenden und per Kommandozeile mit extra-Option öffnen.
Ich gehe hier davon aus, dass das Programm direkt im Programme-Ordner liegt und nicht umbenannt wurde:

/Applications/Firefox.app/Contents/MacOS/firefox --start-debugger-server 6000

Nun öffnet sich der Browser wieder und das Debugging wird auf Port 6000 gestartet. Es kann natürlich auch ein anderer Port gewählt werden.

Nun im Webentwickler-Menü den Menüpunkt "Verbinden..." wählen.
 
Es sollte sich wieder eine zweite Firefox-Instanz öffnen, in der man die Verbindungsdaten eingeben muss.
Natürlich auf localhost und in diesem Fall Port 6000

Das Debugging des Browser-Chromes sollte nun möglich sein.

Seltsamerweise funktionierte es bei mir nach dieser einen erfolgreichen Verbindung auch über den vorher beschriebenen einfacheren Weg mit den "Browser-Werkzeugen".

Andere UI-"Verbesserungen"

Extra Such-Eingabefeld statt Omnibox

Was ich außerdem an Firefox schätze: Während alle anderen "großen" Browser die Adress- und Such-Felder zu einer "Omibox" verschmolzen haben, kann man bei Firefox selbst entscheiden, ob man ein separates Eingabefeld für Suchbegriffe haben möchte oder nicht.
Das hat mich in Chrome und Safari oft genug genervt, dass die eingegebene IP-Adresse manchmal in Google gesucht wurde, statt dass sie einfach geöffnet wurde...also her damit!

Dummerweise sucht Firefox auch bei aktiviertem separaten Such-Feld in Google, wenn man in das URL-Eingabefeld etwas eingibt, was Firefox nicht für eine URL hält.
Das ist etwas...inkonsequent.
Kann man aber in den versteckten Einstellungen de-aktivieren.

Dafür gibt man in das URL-Eingabefeld die Adresse about:config ein, sucht nach dem Schlüsselwort keyword.enabled und setzt dieses von vermeintlich true auf false

Website-Zoom durch Scrollen deaktivieren

Auch stellte sich schnell als lästig heraus, dass Firefox die angezeigte Website zoomt, wenn man die Apfel-Taste (cmd) gedrückt hält, während man scrollt. Das passierte mir doch sehr häufig, wenn ich einen Link in einem anderen Fenster öffnen möchte, aber gerade noch etwas am scrollen bin, während ich schon die Apfel-Taste drücke.
Lässt sich ebenso über about:config deaktivieren: mousewheel.with_meta.action auf den Wert 0 setzen.

Mögliche Werte neben der Null, also was passieren soll, wenn man die Apfel-Taste festhält und scrollt, wären übrigens:

0 nichts
1 Scrollen              (fragt mich nicht, was der Unterschied zur 0 sein soll)
2 Im Verlauf vor/zurück
3 Hinein/hinaus-zoomen  (Standardeinstellung)