Schaltbare vertikale Overlay-Zusatzleiste

Mitleser

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

EDIT: 2025-12-05: Neue Version (Die vertikale Position der Leiste kann jetzt gescrollt werden).

Updatehistorie

EDIT: 2025-06-06: Neue Version (mit zusätzlichem Feature: Mittelklick verschiebt die Tb an den gegenüberliegenden Fensterrand; Rechtsklick wieder zurück).
EDIT: 2025-09-20: Neue Version (beim Verkleinern des Fensters bleibt die Buttongröße erhalten, außerdem wird das Kontextmenü beim Rechtsklick ausgeblendet).
EDIT: 2025-09-25: Neue Version (Der Startzustand der TB (on/off) ist in den 'UserConfigurations' einstellbar).
EDIT: 2025-10-25: Neue Version (Der On/Off-Status sowie die horizontale Position der TB werden beim Beenden des Browsers gespeichert und beim Start wiederhergestellt).
EDIT: 2025-11-07 : Neue Version (Die Links/Rechts-funktion arbeitet jetzt [ebenso wie die On/Off-funktion] in einem zweiten geöffneten Fenster unabhängig vom Ersten).
EDIT: 2025-12-05 :Neue Version (Die vertikale Position der Leiste kann jetzt gescrollt werden.)

(Die 'UserConfiguration TOOLBAR' kann mit den eigenen css-Änderungen per copy/paste überschrieben werden - hier gibt es keine Änderung des Quellcodes).

JavaScript

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

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

// Idee von Horstmann: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-men%C3%BC/?postID=1246875#post1246875

// 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 [--vt-delay_min_max-width: 1.5s; /*Verzögerung bei mouseover*/]. 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 TB ist in der in der Höhe flexibel (je nach Anzahl der Buttons).
// Die vertikale Startposition (oben/unten) ist prozentual einstellbar. Zusätzlich kann die TB mit dem Mausrad (Pointer auf Leiste) vertikal verschoben werden (temporär, wird beim Beenden des Browsers nicht gespeichert).
// 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.
// Beide Funktionen arbeiten in einem zweiten geöffneten Fenster unabhängig vom Ersten.
// Das .svg-Icon des Buttons zum Ein/Ausblenden der Bar kann - je nach Hover-Zustand - mit zwei unterschiedlichen Farben gefüllt werden [fill/stroke].
// WICHTIG: Die TB ist im 'Anpassenfenster' nur im eingeschalteten Zustand sichtbar (vermeidet Verdeckung/Überlagerung anderer Symbole).

// 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\nMausrad(Pointer auf Leiste): oben/unten',
// 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%', // Toolbar mittig zur Fensterhöhe;
//   isPosV = '0%',     Toolbar am oberen Fensterrand;
//   isPosV = '100%',   Toolbar am unteren Fensterrand;
wheelFactor = 0.2,   // Scrollfunktion (bei pointer auf Leiste), je höher der Wert desto größer der Zeilensprung (0.2 entspricht 2 Zeilen);
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//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),
    setPref = Services.prefs.setBoolPref,

boolPrefHor = 'userchrome.flyvert-toolbar.horizontal',
 getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
//TOOLBAR
const toolbar = document.createXULElement('toolbar');
      toolbar.id = 'vert_toolbar';
	  toolbar.setAttribute('orient', 'vertical');
      toolbar.setAttribute('customizable', true);
	  toolbar.setAttribute('mode', 'icons');
	  toolbar.setAttribute('context', 'toolbar-context-menu');
	  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);
//reg
CustomizableUI.registerArea('vert_toolbar', {legacy: true});
CustomizableUI.registerToolbarNode(toolbar);
//start on/off
switch (getPrefVis) {
	case true:
		vert_toolbar.classList.toggle('button-on');
	break;
	case false:
		vert_toolbar.classList.toggle('button-off');
	break;
};
//start left/right(A)
switch (getPrefHor) {
	case true:
		vert_toolbar.classList.toggle('bar-left');
		vert_toolbox.classList.toggle('bar-left');
	break;
	case false:
		vert_toolbar.classList.toggle('bar-right');
		vert_toolbox.classList.toggle('bar-right');
	break;
};
//BUTTON
try {
	CustomizableUI.createWidget({
		id: id,
		defaultArea: CustomizableUI.AREA_NAVBAR,
		label: label,
		tooltiptext: tooltiptext,

		onCreated: (button) => {
			button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
			button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
			button.style.stroke = iconColOu;
			button.style.minWidth = 'fit-content';
		}
	});
} catch(e) {};

const button = document.getElementById(id);
//start left/right(B)
switch (getPrefHor) {
	case true:
		button.classList.toggle('bar-left');
	break;
	case false:
		button.classList.toggle('bar-right');
	break;
};
//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:
					setPref(boolPrefVis, false);
				break;
				case false:
					setPref(boolPrefVis, true);
				break;
			}
	}
	else
	if ((event.button === 2) && (event.target.ownerGlobal.vert_toolbar.classList.contains('button-on') === true )) {
		event.target.ownerGlobal.vert_toolbar.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbar.classList.toggle('bar-right');
		event.target.ownerGlobal.vert_toolbox.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbox.classList.toggle('bar-right');
		event.target.ownerGlobal.vert_toolbar_button.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbar_button.classList.toggle('bar-right');

			const getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
			switch (getPrefHor) {
				case true:
					setPref(boolPrefHor, false);
				break;
				case false:
					setPref(boolPrefHor, true);
				break;
			}
		css();
	}
});
//wheel
toolbox.addEventListener('wheel', (event) => {
	event.preventDefault();

	let curPos = toolbox.offsetTop;
		curPos = parseInt(curPos)-(event.wheelDelta*wheelFactor);

	toolbox.style.top = curPos + 'px';
});

function css (){
let 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};
		transform: translateY(-${isPosV});
		height: fit-content !important;
		width: fit-content !important;
		z-index: 6516516511 !important;
	}

	#vert_toolbox.bar-left {
		left: 0 !important;
		right: unset !important;
	}
	#vert_toolbox.bar-right {
		right: 0 !important;
		left: unset !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;
		transition: width .5s ease-in-out .2s !important;
	}

	#vert_toolbar.bar-right {
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius) !important;
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: var(--vt-border-radius) !important;
		margin-left: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-right: unset !important;
	}
	#vert_toolbar.bar-left {
		border-top-left-radius: 0 !important;
		border-top-right-radius: var(--vt-border-radius) !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: var(--vt-border-radius) !important;
		margin-right: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-left: unset !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 {
		display: flex !important;
	}
	#vert_toolbar.button-off  {
		display: none !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]).bar-left .toolbarbutton-1:first-of-type {
		border-top-right-radius: var(--vt-border-radius) !important;
		border-top-left-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]).bar-right .toolbarbutton-1:first-of-type {
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius)!important;
	}
	#vert_toolbar:not([customizing]).bar-left .toolbarbutton-1:last-of-type {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar:not([customizing]).bar-right .toolbarbutton-1:last-of-type {
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: var(--vt-border-radius) !important;
		}

	#vert_toolbar:not([customizing]) .toolbarbutton-1 .toolbarbutton-text {
		display: flex !important;
		opacity: 0 !important;
		transition: opacity .5s ease-in-out .2s !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 .5s ease-in-out var(--vt-delay_min_max-width) !important;
	}
	#vert_toolbar[customizing] {
		min-height: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-bottom: 38px !important;
		background: var(--vt-customizing-bg-color) !important;
		border: 1px dashed var(--vt-customizing-border-color) !important;
	}

	#vert_toolbar_button.bar-left .toolbarbutton-icon {
		transform: scaleX(-1) !important;
	}
	#vert_toolbar_button.bar-right .toolbarbutton-icon {
		transform: scaleX(1) !important;
	}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
};

css();

})();

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!

Mitleser

Zitat von Mitleser

2025-11-07 | Es gibt ein Update der 00_FlyVertToolbarWithButton_lite.uc.js mit neuem Feature (Die Links/Rechts-funktion arbeitet jetzt [ebenso wie die On/Off-funktion] in einem zweiten geöffneten Fenster unabhängig vom Ersten)

Horstmann : Und ja, wieder den 🫎️-Test nicht bestanden!

Horstmann

Zitat von Mitleser

Und ja, wieder den 🫎️-Test nicht bestanden!

Hmm, nur mal grob getestet (Änderungen in Zeilen 96-112, 176/177):

JavaScript

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

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

// Idee von Horstmann: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-men%C3%BC/?postID=1246875#post1246875

// 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.
// Beide Funktionen arbeiten in einem zweiten geöffneten Fenster unabhängig vom Ersten.
// 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));

//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),
 setPref = Services.prefs.setBoolPref,

boolPrefHor = 'userchrome.flyvert-toolbar.horizontal',
 getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
//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:
		vert_toolbar.classList.toggle('button-on');
	break;
	case false:
		vert_toolbar.classList.toggle('button-off');
	break;
};
//start1 left/right
switch (getPrefHor) {
	case true:
		isPosH = 'L';
		vert_toolbar.classList.toggle('bar-left');
		vert_toolbox.classList.toggle('bar-left');
	break;
	case false:
		isPosH = 'R';
		vert_toolbar.classList.toggle('bar-right');
		vert_toolbox.classList.toggle('bar-right');
	break;
};
//BUTTON

try {
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';
    return button;
    }
    });
  } catch(e) { }

let button = document.getElementById('vert_toolbar_button');

//start2 left/right
switch (getPrefHor) {
	case true:
		button.classList.toggle('bar-left');
	break;
	case false:
		button.classList.toggle('bar-right');
	break;
};
//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:
					setPref(boolPrefVis, false);
				break;
				case false:
					setPref(boolPrefVis, true);
				break;
			}
	}
	else
	if ((event.button === 2) && (event.target.ownerGlobal.vert_toolbar.classList.contains('button-on') === true )) {
		event.target.ownerGlobal.vert_toolbar.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbar.classList.toggle('bar-right');
		event.target.ownerGlobal.vert_toolbox.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbox.classList.toggle('bar-right');
		event.target.ownerGlobal.vert_toolbar_button.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbar_button.classList.toggle('bar-right');

			const getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
			switch (getPrefHor) {
				case true:
					isPosH = 'R';
					setPref(boolPrefHor, false);
				break;
				case false:
					isPosH = 'L';
					setPref(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: orange; /*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: orange; /*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;
		height: fit-content !important;
		width: fit-content !important;
		z-index: 2 !important;
	}

	#vert_toolbox.bar-left {
		left: 0 !important;
		right: unset !important;
	}
	#vert_toolbox.bar-right {
		right: 0 !important;
		left: unset !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;
		transition: width 0.5s ease-in-out 0.2s !important;
	}

	#vert_toolbar.bar-right {
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius) !important;
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar.bar-left {
		border-top-left-radius: 0 !important;
		border-top-right-radius: var(--vt-border-radius) !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: var(--vt-border-radius) !important;
	}

	#vert_toolbar:not([customizing]):hover {
		width: var(--vt-toolbar-max-width) !important;
		transition-delay: var(--vt-delay_min_max-width) !important;
	}

	#vert_toolbar.bar-left {
		margin-right: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-left: unset !important;
	}
	#vert_toolbar.bar-right {
		margin-left: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-right: unset !important;
	}

	#vert_toolbar.button-on {
		display: flex !important;
	}
	#vert_toolbar.button-off  {
		display: none !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]).bar-left .toolbarbutton-1:first-of-type {
		border-top-right-radius: var(--vt-border-radius) !important;
		border-top-left-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]).bar-right .toolbarbutton-1:first-of-type {
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius)!important;
	}
	#vert_toolbar:not([customizing]).bar-left .toolbarbutton-1:last-of-type {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar:not([customizing]).bar-right .toolbarbutton-1:last-of-type {
		border-bottom-left-radius: var(--vt-border-radius) !important;
		border-bottom-right-radius: 0 !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;
	}

	#vert_toolbar_button.bar-left .toolbarbutton-icon {
		transform: scaleX(-1) !important;
	}
	#vert_toolbar_button.bar-right .toolbarbutton-icon {
		transform: scaleX(1) !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);
};

css();

})();

Alles anzeigen

Mitleser

Zitat von Horstmann

Hmm, nur mal grob getestet (Änderungen in Zeilen 96-112, 176/177):

Genau diese Lsg. wollte ich ja eigentlich nicht! Aber anders geht es wohl nicht. Habe es also so übernommen. Danke!
EDIT: Wobei sich mir das return button; nicht erschließt.

Horstmann

Zitat von Mitleser

EDIT: Wobei sich mir das return button; nicht erschließt.

Gut erkannt, die Zeile macht nichts, ist nur übriggeblieben beim (groben) Test.

FuchsFan

Gefällt mir auch!

Mitleser

Zitat von FuchsFan

Gefällt mir auch

Freut mich und Danke fürs Testen!
Für Buttons, die in der Breite von den Standardbuttons abweichen kann in der '■UserConfiguration TOOLBAR■' --vt-toolbar-min-width: 32px; /*Leistenbreite bei mouseout*/ angepasst werden. Dann würde auch der rechte Rand des Buttons sichtbar sein.

FuchsFan

Zitat von Mitleser

Für Buttons, die in der Breite von den Standardbuttons abweichen kann in der '■UserConfiguration TOOLBAR■' --vt-toolbar-min-width: 32px; /*Leistenbreite bei mouseout*/ angepasst werden. Dann würde auch der rechte Rand des Buttons sichtbar sein.

Die Breite hatte ich schon geändert, aber das sind nicht die einzelnen Button. Das sieht so aus:

Mitleser

Zitat von FuchsFan

aber das sind nicht die einzelnen Button

Irrtum meinerseits, ich dachte der Rahmen wäre nur um die einzelnen Buttons. Das war auf dem Screen leider nicht ersichtlich.

Horstmann

Zitat von FuchsFan

Zitat von Mitleser

Für Buttons, die in der Breite von den Standardbuttons abweichen kann in der '■UserConfiguration TOOLBAR■' --vt-toolbar-min-width: 32px; /*Leistenbreite bei mouseout*/ angepasst werden. Dann würde auch der rechte Rand des Buttons sichtbar sein.

Die Breite hatte ich schon geändert, aber das sind nicht die einzelnen Button. Das sieht so aus:

Mir ist das auch hier schon aufgefallen; meine Vermutung war aber dass du einfach den Screenshot rechts zu stark angeschnitten hattest.
Die Buttons sollten horizontal zentriert sein, in beiden Scripts.

Falls du CSS benutzt, das generell die horizontale Position von Buttons und/oder Toolbarinhalten manipuliert, dann wäre das evtl. nicht kompatibel mit vertikalen Toolbars.
Kann man korrigieren, dazu müsste man aber deinen entsprechenden Code kennen.

FuchsFan

Zitat von Horstmann

Mir ist das auch hier schon aufgefallen; meine Vermutung war aber dass du einfach den Screenshot rechts zu stark angeschnitten hattest.

Nein, hier hatte ich das Script getestet, nur den Hintergrund geändert, sonst nichts. So ist es jetzt mit ein paar Änderungen, Breite kann ja beliebig angepasst werden.