Javascript ist Toll!

Wie kann man im firefox die Vorschau beim Mausover über den Tabreitern entfernen?

Firefox entfernt nicht nur nützliches (sie haben die Möglichkeit des sortieren der Werte nicht mehr eingeführt), sondern bringt auch hin und wieder neues überaschendes. Ab der Version 129.0 (und endgültig in 131.0) des Firefox gibt es eine Funktion, die der ein oder andere vielleicht nützlich findet. Wenn man mehrere Tabs geöffnet hat erscheint beim überfahren der nicht aktiven Tabs mit der Maus ein Popup, dass je nach Einstellung, entweder nur die URL oder auch ein Vorschaubild anzeigt.

Deaktivieren mit about:config

Im ersten Moment eine nützliche Funktion kann sie aber auf Dauer auch nerven. Zumindest mir ging es so. Das Vorschaubild läßt sich in der normalen Konfiguration deaktivieren, aber dann wird immer noch der Titel und die URL der Seite angezeigt. Daher deaktiviere ich sie ganz, in dem ich in about:config die beiden Werte auf false schalte.

browser.tabs.hoverPreview.enabled
browser.tabs.hoverPreview.showThumbnails

Animierte Tabellen Sortierung

Aufgrund einer Frage unter dem Artikel Tabellensortierer-Skript wurde ich auf ein Sortierskript von Stackexchange aufmerksam gemacht. Die Besucherin wollte wissen, ob das von mir auch animiert werden kann? Daher habe ich einen genaueren Blick auf das Skript geworfen und versucht dessen Funktionalität zu übertragen.

Das Skript ist grundsätzlich effektiv und auch bei großen Tabellen sehr schnell. Es sortiert nicht - wie ich das umgesetzt habe - in dem die Reihen in der Tabelle innerhalb des DOM umgehängt werden, sondern es tauscht lediglich die Positionen der Reihen. Darüber wird eine CSS Transition gelegt die den Positionstausch animiert. Der Stackexchange User Redu, von dem das Skript stammt, beschreibt dort auch die Schwierigkeiten die diese Methode hat.

Zunächst müssen die Reihen alle eine definierte Höhe haben und das sortieren von "gestreiften" Tabellen, z.b. mit nth-child, ist nicht möglich bzw. müsste die Tabelle irgendwie nach der Sortierung wieder neu gefärbt werden. Das Anzeigen von Rahmen um Zellen oder Reihen ist in den Browsern nicht konsistent und kann durch das Sortieren zu Lücken führen. Ein einfacher border um die einzelnen Zellen ist aber möglich und wird auch nach dem sortieren in allen Browsern ordnungsgemäß angezeigt. Doch den Rahmen um das Tr oder Table-Element zeigt der eine Browser an, der andere nicht und z.T. werden sie erst nach dem sortieren sichtbar, was widerrum vom dem Inhalt und der davon abgeleiteten Höhe abhängt. Es gilt also, je weniger umso besser. Aber für eine visuelle Sortierung ist diese Methode gut geeignet wenn die Tabelle nicht zu komplex gestaltet wurde.

Firefox Tableiste anpassen

Mal wieder ein Beitrag aus der Kategorie: "Firefox entfernt Dinge". Wobei das in diesem Falle kein entfernen war, sondern man fühlte sich dazu berufen die Gestaltung und damit die Benutzung des Firefox zu verändern, in dem die Tableiste neu angeordnet wurde.

Und zugegeben, das ist nichts neues, das mir erst Anfang 2024 aufgefallen ist, aber ich nutze den Firefox nur noch selten, da ich mittlerweile Palemoon bevorzuge und ich daher nur am Rande davon betroffen war (im Palemoon sind die Tabs noch an der Stelle, wo sie hingehören).

Aber ich vermute durch eine Desginveränderung (ich habe keine Lust das auch noch zu recherchieren, aber mein Eindruck ist, da ist alles grauer geworden) hat sich die Navigationsregion im Firefox verändert und ist gleichförmiger geworden. Deshalb ist mir aufgefallen, dass ich in letzter Zeit immer daneben geklickt habe. Statt eines geöffneten Tabs erwischte ich oft ein Lesezeichen, was mir nun zuviel wurde.

Glücklicherweise läßt sich das tatsächlich noch mit userChroms.css anpassen (ähnlich wie bei Thunderbird) und ich habe dafür auf Heise eine funktionierende Anweisung für FX 122 gefunden. Dazu muss der folgende Code in einer userChroms.css Datei im Nutzerverzeichnis des Firefox eingeben werden:

#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
}
#tabbrowser-tabs {
width: 100vw;
}
#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 8px );
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
height: 36px;
}
.titlebar-buttonbox-container {
position: fixed;
right: 0;
visibility: visible;
display: block;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
}

Eine kleine Ergänzung: Das funktioniert nur, wenn der Wert toolkit.legacyUserProfilCustomizations.stylesheets (about:config ) auf true steht. via Technikshavo

und noch eine kleine Ergänzung: Da man die Tabs nicht mehr so gut unterscheiden kann, habe ich diese auch noch etwas benutzerfreundlicher gestaltet.

.tabbrowser-tab:not([selected]) .tab-content {
  border:1px ridge gray;
  background-color:#eee;
}