Firefox Bedienelemente ausblenden

Grundsätzliches

Die Benutzeroberfläche von Firefox ist selbst webbasiert und kann daher mit dem Browser gedebuggt werden, um technische Namen von Elementen der Benutzeroberfläche in Erfahrung zu bringen. Diese Elemente können dann per CSS gezielt ausgeblendet werden.

Voraussetzung

Damit die Firefox-Oberfläche ein CSS berücksichtigt, muß auf about:config dieser Parameter gesetzt werden:

toolkit.legacyUserProfileCustomizations.stylesheets  ==>  true

Debugging aktivieren

Um den Namen des auszublendenen Elements in Erfahrung zu bringen, müssen die “Werkzeuge für Web-Entwickler” geöffnet werden und dort wiederum die Einstellungen. Zwei Einstellungen müssen aktiviert werden (unten rechts zu finden):

  • Debugging-Werkzeuge für Browser-Chrome und Add-ons aktivieren
  • Externes Debugging aktivieren

Technische Namen ermitteln

Anschließend kann über dasselbe Menü, über welches “Werkzeuge für Web-Entwickler” geöffnet wird, die Browser-Werkzeuge (“Browser-Toolbox”) geöffnet werden. Dies startet eine separate Instanz von Firefox als Debugger, welche um Erlaubnis zur Debuggingverbindung frägt. Nachdem diese zugelassen wird, kann die Oberfläche von Firefox wie eine Webseite gedebuggt und die ID der einzelnen Elemente eingesehen werden.

CSS erstellen

  • Beim ersten Mal muß eine Datei userChrome.css erstellt werden. Hierzu die Profilseite about:profiles öffnen und das Profil im Finder anzeigen lassen.
  • Alle Firefox-Instanzen beenden.
  • Innerhalb des Profilordners einen Unterordner anlegen: chrome bzw. die Datei dort ablegen.

Element ausblenden

Folgenden Text ein- bzw. anfügen und dabei TECHNISCHER_NAME durch die auszublendende ID ersetzen:

#TECHNISCHER_NAME {
    visibility: collapse !important;
}

Statt visibility: collapse !important; kann ggf. auch display:none !important; erforderlich sein.

Debugging deaktivieren

Wenn das Ausblenden erfolgreich geklappt hat, kann die Debugging-Funktion wieder deaktiviert werden, indem die “Werkzeuge für Web-Entwickler” geöffnet werden und dort wiederum die Einstellungen. Zwei Einstellungen müssen deaktiviert werden (unten rechts zu finden):

  • Debugging-Werkzeuge für Browser-Chrome und Add-ons aktivieren
  • Externes Debugging aktivieren

Mein userChrome.css

#tracking-protection-icon-container {
    visibility: collapse !important;
}

#page-action-buttons {
    visibility: collapse !important;
}

#customizableui-special-spring1 {
    display:none !important;
}

#identity-permission-box {
    visibility: collapse !important;
}

/* Pfeil oben rechts für Tabs */
/*
#alltabs-button {
    visibility: collapse !important;
}
*/

/* Grünes Suche-Hinzufügen-Plus-Icon */
.searchbar-search-icon-overlay {
    visibility: collapse !important;
}

/* Lesezeichen-Symbolleiste ohne Icons */
/*
#personal-bookmarks .bookmark-item > .toolbarbutton-icon {
    display:none !important
}
*/

/* Hintergrundbild anstatt Theme */
/*
#navigator-toolbox {
    background-image: url("aurorapersona.jpg") !important
}
*/

/* Ab Version 96 werden bei fast allen Themes ein häßlicher Rand um den aktiven Tab gemalt. Ab Version 102 auch als Outline. Ab Version 119 nicht mehr "visuallyselected", sondern nur noch "selected". Wird hiermit wieder entfernt. */
.tabbrowser-tab:is([selected="true"]) .tab-stack > .tab-background
{
    border: none !important;
    outline: none !important;
}

/* Such-Switcher ab Version 140 */
#urlbar-searchmode-switcher {
    visibility: collapse !important;
}