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) {
		horizontal();
		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) {
		const getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
		switch (getPrefHor) {
			case true:
				isPosH = 'R';
				horizontal();
			break;
			case false:
				isPosH = 'L';
				horizontal();
			break;
		}
	}
});
	}
});
//init
horizontal();

function horizontal (){
	switch (isPosH) {
		case 'R':
			setPrefHor(boolPrefHor, false);
			right();
			css();
		break;
		case 'L':
			setPrefHor(boolPrefHor, true);
			left();
			css();
		break;
	}
};

function left (){
const vtButton = document.getElementById(id);
	  vtButton.querySelector(cl).style.transform = 'scaleX(-1)';
		isLeft = 'right';
		isRight = 'left';
};

function right (){
const vtButton = document.getElementById(id);
	  vtButton.querySelector(cl).style.transform = 'scaleX(1)';
		isLeft = 'left';
		isRight = 'right';
};

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);
};

})();

Alles anzeigen

Funzt das auch auch auf 'Win'?

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.