Schaltbare vertikale Overlay-Zusatzleiste

Mitleser

[Die Overlay-Zusatzleiste liegt über dem Seiteninhalt (und verdeckt diesen partiell), verschiebt den Content der Seite jedoch nicht.]

2025-10-25 | Es gibt ein Update der 00_VertToolbarWithButton_lite.uc.js mit neuen Features (Der On/Off-Status sowie die horizontale Position der TB werden beim Beenden des Browsers gespeichert und beim Start wiederhergestellt):

JavaScript

// JavaScript Document
// 00_FlyVertToolbarWithButton_lite.uc.js
// FF 139+
// Vers. 4

// Quelle: https://www.....

// Das Script erstellt eine - über dem Seiteninhalt liegende - vertikale Toolbar, die sich per Button ein/ausblenden lässt. Im eingeblendeten Zustand sind nur die Buttons sichtbar, beim Mouseover auf die B.'s werden die Labels aller B.'s 'ausgeklappt'. Die Verzögerungszeit vom Mouseover bis zum 'Ausklappzeitpunkt' der Labels kann konfiguriert werden [transition-delay]. Z.B so, dass die Labels der Buttons erst nach > 5.0s mouseover sichtbar sind - also eigentlich nie; oder nach < 0.5s - fast sofort.
// Die vertikale Position (oben/unten) ist prozentual einstellbar. Die TB ist in der in der Höhe flexibel (je nach Anzahl der Buttons).
// Die horizontale Position der TB (links/rechts) ist per Rechtsklick wählbar.
// Der On/Off-Status sowie die horizontale Position der TB werden beim Beenden des Browsers gespeichert und beim Start wiederhergestellt.
// Das .svg-Icon des Buttons zum Ein/Ausblenden der Bar kann - je nach Hover-Zustand - mit zwei unterschiedlichen Farben gefüllt werden [fill/stroke].

// ACHTUNG: Einige Systembuttons lassen sich in zusätzliche/eigene Tb's zwar noch verschieben, haben aber KEINE Funktion. Dazu gibt es einen Patch von @BrokenHeart:  https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
         id = 'vert_toolbar-button', // Id des Buttons
      label = 'Vertikale Overlay Toolbar', // Bezeichnung des Buttons
tooltiptext = 'Vertikale Overlay Toolbar\n\nLinksklick: ein/aus\nRechtsklick: links/rechts',
// Icon-------------------------------------------------------
       icon = '16_ci-bar-right_moz.svg', // [Name.Dateiendung] des Symbols
   iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
  iconColOu = 'currentColor', // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion)
  iconColOv = '#9aff9a', // Farbe des Icons beim Überfahren des Buttons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOv keine Funktion)
// Toolbar----------------------------------------------------
	 isPosV = '50%', // für Toolbar mittig zur Fensterhöhe;
//   isPosV = '0%',     für Toolbar am oberen Fensterrand;
//   isPosV = '100%',   für Toolbar am unteren Fensterrand;
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)),
         cl = '.toolbarbutton-icon';
//Pref '.svg.context-...' prüfen/setzen
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
//userPrefs
Services.prefs.getDefaultBranch('userchrome.flyvert-toolbar.').setBoolPref('visible', true);
Services.prefs.getDefaultBranch('userchrome.flyvert-toolbar.').setBoolPref('horizontal', true); //true=left/false=right
const
boolPrefVis = 'userchrome.flyvert-toolbar.visible',
 getPrefVis = Services.prefs.getBoolPref(boolPrefVis),
 setPrefVis = Services.prefs.setBoolPref,
boolPrefHor = 'userchrome.flyvert-toolbar.horizontal',
 getPrefHor = Services.prefs.getBoolPref(boolPrefHor),
 setPrefHor = Services.prefs.setBoolPref;
//TOOLBAR
const toolbar = document.createXULElement('toolbar');
      toolbar.id = 'vert_toolbar';
	  toolbar.setAttribute('orient', 'vertical');
      toolbar.setAttribute('customizable', true);
	  toolbar.setAttribute('mode', 'icons');
	  toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
//TOOLBOX
const toolbox = document.createXULElement('toolbox');
	  toolbox.id = 'vert_toolbox';
      toolbox.setAttribute('orient','mirror');

	  toolbox.appendChild(toolbar);

document.getElementById('browser').parentNode.appendChild(toolbox);

CustomizableUI.registerArea('vert_toolbar', {legacy: true});
CustomizableUI.registerToolbarNode(toolbar);
//start on/off
	switch (getPrefVis) {
		case true:
			toolbar.classList.toggle('button-on');
		break;
		case false:
			toolbar.classList.toggle('button-off');
		break;
	};
//start left/right
	switch (getPrefHor) {
		case true:
			isPosH = 'L';
		break;
		case false:
			isPosH = 'R';
		break;
	};
//BUTTON
CustomizableUI.createWidget({
    id: id,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    label: label,
    tooltiptext: tooltiptext,

    onCreated: (button) => {
		button.style.MozContextProperties = 'fill, stroke, fill-opacity';
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
		button.style.stroke = iconColOu;
		button.style.minWidth = 'fit-content';
//over
button.addEventListener('mouseover', () => {
		button.style.stroke = iconColOv;
});
//out
button.addEventListener('mouseout', () => {
		button.style.stroke = iconColOu;
});
//contextmenu
button.addEventListener('contextmenu', e => {
	if (event.button === 2) {
			e.preventDefault();
	}
});
//click
button.addEventListener('click', () => {
	if (event.button === 0) {
		event.target.ownerGlobal.vert_toolbar.classList.toggle('button-off');
		event.target.ownerGlobal.vert_toolbar.classList.toggle('button-on');
		const getPrefVis = Services.prefs.getBoolPref(boolPrefVis);
		switch (getPrefVis) {
			case true:
				setPrefVis(boolPrefVis, false);
			break;
			case false:
				setPrefVis(boolPrefVis, true);
			break;
		}
	}
	else
	if ((event.button === 2) && (event.target.ownerGlobal.vert_toolbar.classList.contains('button-on') === true )) {
	const getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
		switch (getPrefHor) {
			case true:
				isPosH = 'R';
			break;
			case false:
				isPosH = 'L';
			break;
		}
	horizontal();
	}
});
	}
});

function horizontal (){
	let windows = Services.wm.getEnumerator(null);
	while (windows.hasMoreElements()) {
	let win = windows.getNext();
	  const button = win.document.getElementById(id);
		switch (isPosH) {
			case 'R':
			button.querySelector(cl).style.setProperty('transform', 'scaleX(1)');
			isLeft = 'left';
			isRight = 'right';
			setPrefHor(boolPrefHor, false);
			break;
			case 'L':
			button.querySelector(cl).style.setProperty('transform', 'scaleX(-1)');
			isLeft = 'right';
			isRight = 'left';
			setPrefHor(boolPrefHor, true);
			break;
		}
	  css();
	}
};

function css (){
var css =`
	#vert_toolbar {
/* ■■ START UserConfiguration TOOLBAR ■■■■■■■■■■■■■■■■■■■■■■■ Dark Theme */
		--vt-toolbar-min-width: 32px; /*Leistenbreite bei mouseout*/
		--vt-toolbar-max-width: 260px; /*Leistenbreite bei mouseover*/
		--vt-delay_min_max-width: 1.5s; /*Verzögerung bei mouseover*/
		--vt-row-height: 32px; /*Zeilenhöhe*/
		--vt-bg-color: #3d3d3d; /*Leistenhintergrundfarbe*/
		--vt-bg-color-hover: #57575766; /*Zeilenhintergrundfarbe bei mouseover*/
		--vt-border-width: 0; /*Leistenrandbreite*/
		--vt-border-radius: 4px; /*Leistenrandeckenhalbdurchmesser*/
		--vt-border-color: purple; /*Leistenrandfarbe*/
		--vt-customizing-bg-color: #3d3d3d; /*Leistenhintergrundfarbe im Anpassenfenster*/
		--vt-customizing-border-color: #E9E9E9; /*Leistenrandfarbe im Anpassenfenster*/
		--vt-toolbarbutton-inner-padding: 8px; /*Zentrierungsmöglichkeit der eingefügten Buttons (wenn Buttonbreite < 32px => --vt-toolbarbutton-inner-padding < 8px) */
/* ■■ END UserConfiguration TOOLBAR ■■■■■■■■■■■■■■■■■■■■■■■■■ */
	}
	#vert_toolbox {
		position: fixed !important;
		display: flex !important;
		top: ${isPosV} !important;
		transform: translateY(-${isPosV}) !important;
		${isRight}: 0 !important;
		${isLeft}: unset !important;
		height: fit-content !important;
		width: fit-content !important;
		z-index: 2 !important;
	}
	#vert_toolbar {
		display: flex !important;
		width: var(--vt-toolbar-min-width) !important;
		padding: 0 !important;
		background-color: var(--vt-bg-color) !important;
		border: var(--vt-border-width) solid var(--vt-border-color) !important;
		border-top-${isRight}-radius: 0 !important;
		border-top-${isLeft}-radius: var(--vt-border-radius) !important;
		border-bottom-${isRight}-radius: 0 !important;
		border-bottom-${isLeft}-radius: var(--vt-border-radius) !important;
		transition: width 0.5s ease-in-out 0.2s !important;
	}
	#vert_toolbar:not([customizing]):hover {
		width: var(--vt-toolbar-max-width) !important;
		transition-delay: var(--vt-delay_min_max-width) !important;
	}
	#vert_toolbar.button-on {
		margin-${isRight}: unset !important;
		margin-${isLeft}: unset !important;
	}
	#vert_toolbar.button-off {
		margin-${isRight}: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-${isLeft}: unset !important;
	}
	#vert_toolbar:not([customizing]) .toolbarbutton-1  {
		justify-content: flex-start !important;
		min-width: var(--vt-toolbar-min-width) !important;
		height: var(--vt-row-height) !important;
		min-height: var(--vt-row-height) !important;
		max-height: var(--vt-row-height) !important;
		overflow: hidden !important;
		border: none !important;
		box-shadow: none !important;
		--toolbarbutton-inner-padding: var(--vt-toolbarbutton-inner-padding) !important;
	 	--toolbarbutton-outer-padding: 0 !important;
	 	--toolbarbutton-border-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]) .toolbarbutton-1:hover {
		background-color: var(--vt-bg-color-hover) !important;
	}
	#vert_toolbar:not([customizing]) .toolbarbutton-1:first-of-type {
		border-top-${isRight}-radius: 0 !important;
		border-top-${isLeft}-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar:not([customizing]) .toolbarbutton-1:last-of-type {
		border-bottom-${isRight}-radius: 0 !important;
		border-bottom-${isLeft}-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar:not([customizing]) .toolbarbutton-1 .toolbarbutton-text {
		display: flex !important;
		opacity: 0 !important;
		transition: opacity 0.5s ease-in-out 0.18s !important;
		text-overflow: ellipsis !important;
		align-items: center !important;
		padding: 0 !important;
	 	border-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
		opacity: 1 !important;
		transition: opacity 0.5s ease-in-out 0.2s !important;
	}
	#vert_toolbar[customizing] {
		min-width: 38px !important;
		max-width: 38px !important;
		margin-right: 40px !important;
		margin-left: 40px !important;
		padding-bottom: 38px !important;
		background: var(--vt-customizing-bg-color) !important;
		border: 1px dashed var(--vt-customizing-border-color) !important;
	}
`;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
};
//init
horizontal();
})();

Alles anzeigen

Rootbeitrag

Horstmann

Funktioniert hier am Mac.

Zwei Dinge:

Ich hatte inzwischen mal kurz in meiner Toolbarversion diese Arislösung für nicht funktionierende Buttons angetestet in Fx 144, schien hier zu klappen.

Zeile 133 bis 151, für bar in Zeile 148 hatte ich halt meine eigene toolbar ID eingesetzt => document.getElementById("newtoolbar").addEventListener...etc .

Dein Button funktioniert hier nicht mit dem Elchtest, wie auch in der alten Version von deinem Script, s. Beschreibung der Problematik im Link.

Mitleser

Horstmann , danke fürs Testen!

Zitat von Horstmann

Ich hatte inzwischen mal kurz in meiner Toolbarversion diese Arislösung für nicht funktionierende Buttons angetestet in Fx 144, schien hier zu klappen.

Die Lsg. von Aris hatte ich auch in Betracht gezogen, die macht den Quellcode aber noch anfälliger für Veränderungen durch Updates. Deshalb bin ich bei der Patchlsg. geblieben.

Zitat von Horstmann

Dein Button funktioniert hier nicht mit dem Elchtest

Mit der Elchtestproblematik kann ich leben, diese Konstellation ist wohl eher selten. Die On/Off-funktion funktioniert ja in einem zweiten geöffneten Fenster unabhängig vom Ersten. Die Links/Rechts-funktion leider nicht (Vorschläge??).

Zitat von Horstmann

Zeile 133 bis 151, für bar in Zeile 148 hatte ich halt meine eigene toolbar ID eingesetzt

Verstehe ich nicht???

Horstmann

Zitat von Mitleser

Zitat von Horstmann

Ich hatte inzwischen mal kurz in meiner Toolbarversion diese Arislösung für nicht funktionierende Buttons angetestet in Fx 144, schien hier zu klappen.

Die Lsg. von Aris hatte ich auch in Betracht gezogen, die macht den Quellcode aber noch anfälliger für Veränderungen durch Updates. Deshalb bin ich bei der Patchlsg. geblieben.

Zitat von Horstmann

Zeile 133 bis 151, für bar in Zeile 148 hatte ich halt meine eigene toolbar ID eingesetzt

Verstehe ich nicht???

Der zweite Teil bezieht sich nur auf die davor erwähnte Aris Lösung und seinen Code, hatte ich evtl. nicht klar zusammengefasst.

Zitat von Mitleser

Zitat von Horstmann

Dein Button funktioniert hier nicht mit dem Elchtest

Mit der Elchtestproblematik kann ich leben, diese Konstellation ist wohl eher selten. Die On/Off-funktion funktioniert ja in einem zweiten geöffneten Fenster unabhängig vom Ersten. Die Links/Rechts-funktion leider nicht (Vorschläge??

Dein Button scheint in bestimmten Konstellationen die on/off und links/rechts Funktionen bei mehreren offenen Fenster durcheinander zu bringen, wobei ich das Problem leider nicht exakt reproduzieren kann.
Beides funktioniert hier generell in mehreren offenen Fenstern, aber nicht immer konsistent.

event.target.ownerGlobal könnte damit zusammenhängen, wobei ich offengestanden immer noch nicht weiß was das bewirkt.

Evtl. müssen die beiden Funktionen oder deren Präferenzen klarer getrennt/im Zusammenhang definiert werden?

Bzgl. Elchtestproblematik, bei mir am Mac kann ich damit nicht leben, eben weil Fx als Programm sich nicht beendet wenn alle Fenster geschlossen sind, und ein Button ohne den Fix dann nur nach Neustart von Fx wieder funktioniert.

Mitleser

Zitat von Horstmann

funktioniert hier generell in mehreren offenen Fenstern, aber nicht immer konsistent

Kann ich hier auf Linux nicht bestätigen. Leider schaltet links/rechts in sämtlichen offenen Fenstern gleichzeitig (Vorschläge erwünscht). On/off schaltet im jeweils aktivem Fenster (durch event.target.ownerGlobal). In der Zeile 138 müsste es etwas vergleichbares geben. event.target.ownerGlobal.horizontal(); funktioniert jedenfalls nicht.

Vielleicht irgendetwas mit Windows.window...

Horstmann

Zitat von Mitleser

Vielleicht irgendetwas mit Windows.window...

Bei meinen sehr beschränkten JS Kenntnissen kann ich dich leider nur wieder auf Aris verweisen, und gewagterweise auf mein eigenes Script.

Beide benutzen Services.wm.getEnumerator um die Button Funktion auf alle Fenster zu erweitern bzw. in meinem Fall optional auch einzuschränken. Bei Aris funktioniert übrigens auch der Elchtest, sein Button ist aber nur für Funktion in allen Fenstern angelegt.

Ich hab ein paar Dinge probiert, aber in deinem Script kann ich als armer Laie die Variablen und Zusammenhänge nicht komplett nachvollziehen.

Mitleser

Zitat von Horstmann

Beide benutzen Services.wm.getEnumerator um die Button Funktion auf alle Fenster zu erweitern bzw. in meinem Fall optional auch einzuschränken.

Diese Lsg. hatte ich schon gesehen, aber - als zu kompliziert - ersteinmal verworfen. Eine einfachere Lsg. habe ich bisher nicht gefunden/gibt es wohl auch nicht. Ich werde diese Woche die von Aris abschreiben/ableiten und einfügen und dann an dieser Stelle posten..

Horstmann

Es bringt für deine Zwecke wohl nicht viel, aber hier ist eine momentane grobe Testversion von mir mit separatem Button für den Positionswechsel der Leiste; bezogen auf meine feststehende Leiste, aber das gleiche Prinzip.

Mit der Entwicklung ist momentan leider hier nichts los im Forum.

00-toolbar_test-54-RC5-B-width+button-4.uc.js.zip

Mitleser

Zitat von Horstmann

von mir mit separatem Button für den Positionswechsel der Leiste

Das wirst du sicherlich in der finalen Version noch ändern (Dropdown oder freie Maustasten). Ich werde das Thema auf 'erledigt' setzen, denn das Script aus Beitrag #1 funktioniert ja. Um den 🫎️ werde ich mich später kümmern, denn das ist eine globale Problematik bei diesem Typ des Buttons. Muss jetzt ersteinmal in die reale Welt zurück, meinen gerade gelieferten Kick-E-Scooter 🛴 testen.
EDIT: Ich habe das Script in Beitrag #1 angepasst (vereinfacht/kleinere Fehler [Iconanzeige im zweiten Fenster] behoben).

Horstmann

Zitat von Mitleser

Zitat von Horstmann

von mir mit separatem Button für den Positionswechsel der Leiste

Das wirst du sicherlich in der finalen Version noch ändern (Dropdown oder freie Maustasten).

Mir gefällt die Idee mit dem separatem Button für Position, eigentlich nur damit der User den dann in irgenwo hinschieben kann bei Bedarf, oder rausziehen und gar nicht benutzen kann. Den Rechtsklick will ich auch nicht verändern.
Angesichts der zurückhaltenden Respons habe ich aber eh keine Releasepläne momentan, wenn's eh kaum jemand benutzt ; deine Variante hat ja wenigstens keine Alternative von Aris etc..

Jetzt aber erstmal viel Spaß mit dem Scooter!