Beiträge von Mitleser

// 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();

})();

// JavaScript Document
// M_NumOfBookmfold+Bookm_light.uc.js
// FF 139

// Fork of @BrokenHeart's code from https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

// Das Script erstellt einen Zusatz zu Menüeinträgen in Bookmark-Ordner-Dropdowns. 
// Der Zusatz besteht aus der [Anzahl der beinhaltenden Ordner sowie aus der Anzahl der beinhaltenden Lesezeichen]. Als trennendes Element zwischen Ordner und Lesezeichen wird ein Ordnersymbol als Icon eingefügt.
// Sollte kein Ordner sowie kein Lesezeichen vorhanden sein (der Ordner ist leer), erscheint ein Trashsymbol (als Aufforderung zur Löschung des leeren Ordners) und das Pfeil-Symbol(Twisty) wird ausgeblendet.

(function() {

    if (!window.gBrowser)
        return;
    
setTimeout(function() {
	setFunction();
},50);

function setFunction() {
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
       iconFold = '16SWfolder-10_moz.svg',
     iconFoldOv = '16SWfolder-12_moz.svg',
      iconTrash = '16_Trash-03_moz.svg',      
   iconFillFold = '#b0b0b0',
 iconFillFoldOv = 'currentColor',
  iconFillTrash = '#f02228',
iconFillTrashOv = 'currentColor',
        fontCol = '#b0b0b0', 
      fontColOv = 'currentColor',

     iconPath = '/chrome/icons/',
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■   
   curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir))
//const end 
const css =`
	.countClass {
		justify-content: space-between !important;
	}
	.countClass::after {
        content: attr(data-value); 
        color: ${fontCol};
		padding-right: 3px;
		background-image: url('${curProfDir}${iconPath}${iconFold}');
		fill: ${iconFillFold};
		background-repeat: no-repeat;
		background-size: 13px 13px;
		background-position: right 22px center;
		margin-right: -17px !important;
	}
	menu:hover > .countClass::after {
		color: ${fontColOv};
		fill: ${iconFillFoldOv};
	}              
	.countClass[data-value^='\xa0']::after {
		background-image: none;
	}
	menu:hover > .countClass:not([data-value^='\xa0'])::after {
		background-image: url('${curProfDir}${iconPath}${iconFoldOv}');
	}
	menu:has( > .countClass[data-value$='\xa0'][data-value^='\xa0'])::after {
    	fill-opacity: 1 !important;
		background-image: url('${curProfDir}${iconPath}${iconTrash}') !important;
		fill: ${iconFillTrash} !important;
		height: 13px !important;
		width: 13px !important;
		scale: 1.07 !important;
		margin-right: 11px !important;
	}
	menu:hover:has( > .countClass[data-value$='\xa0'][data-value^='\xa0'])::after {
    	fill: ${iconFillTrashOv} !important;
	}
         `;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
//----
const bmbMenu = document.getElementById('bookmarks-menu-button');
const bookMenu = document.getElementById('bookmarksMenu');
const persToolBar = document.getElementById('PersonalToolbar');
        
	if(bmbMenu){
		bmbMenu.addEventListener('popupshowing', onPopupShowing )
	};
	if(bookMenu){
		bookMenu.addEventListener('popupshowing', onPopupShowing )
	};
	if(persToolBar){
		persToolBar.addEventListener('popupshowing', onPopupShowing )
	}; 
};

function onPopupShowing(aEvent) {
        
const popup = aEvent.originalTarget;

        for (let item of popup.children) {
            if (item.localName != 'menu' || item.id?.startsWith('history'))
                continue;
                
            setTimeout(() => {
          let itemPopup = item.menupopup;
              itemPopup.hidden = true;
              itemPopup.collapsed = true;
              itemPopup.openPopup();
              itemPopup.hidePopup();
          let menuitemCount = 0;
          let menuCount = 0;
              
              for (let subitem of itemPopup.children) {
                if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                  if (subitem.localName == 'menuitem') {
                    menuitemCount++;
                  } 
                  else 
                  if (subitem.localName == 'menu') {
                    menuCount++;
                  }
               }
              }
              itemPopup.hidden = false;
              itemPopup.collapsed = false;
   
          let label = item.childNodes[1]; //[1]links [3]rechts
              label.classList.add('countClass');
		  let menuDiv = '\xa0\xa0\xa0';
			  if (menuCount == 0) {
			    menuDiv = '\xa0\xa0';
			    menuCount ='\xa0';
			  }
			  if (menuitemCount == 0) {
			    menuitemCount ='\xa0';
			  }
			  if (menuCount > 0 && menuitemCount == 0) {
				menuitemCount ='0';
			  }
			  if (menuCount > 0 && menuitemCount == '0') {
				menuitemCount =  '\xa0‒';
			  }
		  let strCountOut = String(menuCount).padStart(2,'') + menuDiv + String(menuitemCount).padStart(2,'\xa0');
              label.setAttribute('data-value', strCountOut);
            }, 100);
        }
}
//----
})();

// JavaScript Document
// M_NumOfBookmfold+Bookm_light.uc.js

// Fork of @BrokenHeart's code from https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

// Das Script erstellt einen Zusatz zu Menüeinträgen in Bookmark-Ordner-Dropdowns. 
// Der Zusatz besteht aus der Anzahl der beinhaltenden Ordner sowie aus der Anzahl der beinhaltenden Lesezeichen. Als trennendes Element zwischen Ordner und Lesezeichen wird ein Ordnersymbol als Icon eingefügt.
// Die Anzeige für Ordner oder Bookmarks ist für maximal 2-stellige Werte ausgelegt.
// Sollte kein Ordner sowie kein Lesezeichen vorhanden sein (der Ordner ist leer), erscheint ein Trashsymbol (als Aufforderung zur Löschung des leeren Ordners) und das  Pfeil-Symbol (Twisty) wird ausgeblendet.

(function() {

    if (!window.gBrowser)
        return;
    
setTimeout(function() {
	setFunction();
},50);

function setFunction() {
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
       iconFold = '16SWfolder-10_moz.svg',
     iconFoldOv = '16SWfolder-12_moz.svg',
      iconTrash = '16_Trash-03_moz.svg',      
   iconFillFold = '#b0b0b0',
 iconFillFoldOv = 'currentColor',
  iconFillTrash = '#f02228',
iconFillTrashOv = 'currentColor',
        fontCol = '#b0b0b0', 
      fontColOv = 'currentColor',

     iconPath = '/chrome/icons/',
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■   
   curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir))
//const end 
const css =`
		 	 .countClass {
				justify-content: space-between !important;
			 }
             .countClass::after {
                content: attr(data-value); 
                color: ${fontCol};
				padding-right: 3px;
				background-image: url('${curProfDir}${iconPath}${iconFold}');
				fill: ${iconFillFold};
				background-repeat: no-repeat;
				background-size: 13px 13px;
				background-position: right 22px center;
				margin-right: -17px !important;
             }
menu:hover > .countClass::after {
				color: ${fontColOv};
				fill: ${iconFillFoldOv};
             }              
			 .countClass[data-value^='\xa0']::after {
				background-image: none;
			 }
menu:hover > .countClass:not([data-value^='\xa0'])::after {
				background-image: url('${curProfDir}${iconPath}${iconFoldOv}');
             }
             .countClass[data-value$='\xa0'][data-value^='\xa0'] ~ .menu-right image  {
            	fill-opacity: 1 !important;
				list-style-image: url('${curProfDir}${iconPath}${iconTrash}');
				fill: ${iconFillTrash};
				height: 13px;
				width: 13px;
				scale: 1.07;
				margin-right: 11px !important;
             }
menu:hover > .countClass[data-value$='\xa0'][data-value^='\xa0'] ~ .menu-right image  {
            	fill: ${iconFillTrashOv};
             }
         `;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
//----
const bmbMenu = document.getElementById('bookmarks-menu-button');
const bookMenu = document.getElementById('bookmarksMenu');
const persToolBar = document.getElementById('PersonalToolbar');
        
	if(bmbMenu){
		bmbMenu.addEventListener('popupshowing', onPopupShowing )
	}
	if(bookMenu){
		bookMenu.addEventListener('popupshowing', onPopupShowing )
	}
	if(persToolBar){
		persToolBar.addEventListener('popupshowing', onPopupShowing )
	} 
};

function onPopupShowing(aEvent) {
        
const popup = aEvent.originalTarget;

        for (let item of popup.children) {
            if (item.localName != 'menu' || item.id?.startsWith('history'))
                continue;
                
            setTimeout(() => {
              let itemPopup = item.menupopup;
              itemPopup.hidden = true;
              itemPopup.collapsed = true;
              itemPopup.openPopup();
              itemPopup.hidePopup();
              let menuitemCount = 0;
              let menuCount = 0;
              
              for (let subitem of itemPopup.children) {
                if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                  if (subitem.localName == 'menuitem') {
                    menuitemCount++;
                  } 
                  else 
                  if (subitem.localName == 'menu') {
                    menuCount++;
                  }
               }
              }
              itemPopup.hidden = false;
              itemPopup.collapsed = false;
   
	          let label = item.childNodes[1]; //[1]links [3]rechts
     
              label.classList.add('countClass');

			  let menuDiv = '\xa0\xa0\xa0';
			  
			  if (menuCount == 0) {
			    menuDiv = '\xa0\xa0';
			    menuCount ='\xa0';
			  }
			  
			  if (menuitemCount == 0) {
			    menuitemCount ='\xa0';
			  }
		  
			  if (menuCount > 0 && menuitemCount == 0) {
				menuitemCount ='0';
			  }

			  if (menuCount > 0 && menuitemCount == '0') {
				menuitemCount =  '\xa0‒';
			  }
 
			  let strCountOut = String(menuCount).padStart(2,'') + menuDiv + String(menuitemCount).padStart(2,'\xa0');

              label.setAttribute('data-value', strCountOut);
            }, 100);
        }
}
//----
})();

// JavaScript Document
// M_Quit_Firefox.uc.js

// Das Script erstellt einen neuen Menüeintrag, der ein einzelnes Firefox-Fenster separat schließt (Linksklick) oder Firefox beendet (Mittel-/Rechtsklick). Das .svg-Icon kann - je nach Hover-Zustand - mit zwei unterschiedlichen Farben gefüllt werden [fill]. Beim Überfahren des Menuitems rotiert das Icon um 180deg [rotate: 180deg].
// Das Menü für den Menüeintrag kann selektiert werden (Seitenkontextmenü oder Tabkontextmenü).
// Die Position des Menüeintrags innerhalb des Menüs kann bestimmt werden.
// Eine Darstellung des Menüeintrags mit/ohne Icon kann gewählt werden.
// Für das mitgelieferte Icon als .svg-Datei mit [moz-context-properties] ändert das Script - bei gewählter Iconanzeige [const isIcon = 1;] -  die Einstellung [svg.context-properties.content.enabled] in about:config auf 'true'.

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
         id = 'contextQuit', // ID des neuen menuitems
      label = 'Fenster schließen/Firefox beenden', // Bezeichnung des neuen menuitems
tooltiptext = 'Fenster schließen/Firefox beenden\n\nLinksklick: Fenster schließen\nMittel-/Rechtsklick: Firefox beenden', 
// Icon-------------------------------------------------------
     isIcon = 1,
//   isIcon = 1, mit Icon 
//   isIcon = 0, ohne Icon; die Konstanten icon, iconPath, iconColOu und iconColOv haben dann keine Funktion und sollten unberührt bleiben
       icon = 'quit-16.svg',  // [Name.Dateiendung] des anzuzeigenden Symbols
   iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
  iconColOu = 'red',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion)
  iconColOv = 'currentColor',  // Farbe des Icons beim Überfahren des Items (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOv keine Funktion)
// Menü-------------------------------------------------------
     isMenu = 2, 
//   isMenu = 1, für Seitenkontextmenü; 
//   isMenu = 2, für Tabkontextmenü'; 
      isPos = 12, 
// Option A: 
//    isPos = 12, [Zahlen von -5 bis 20] 
// Menuitem an einer bestimmten Position im Menü einfügen 
// wie in CSS: [order:12!important;] 
// Option B: 
//    isPos = 'context-inspect'; [String] 
// Menuitem auf diesen Menüpunkt folgend einfügen 
// wie in CSS: [#context-inspect] 
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)),
         cl = 'image',
      menu1 = document.getElementById('contentAreaContextMenu'),
      menu2 = document.getElementById('tabContextMenu'),
   menuitem = document.createXULElement('menuitem');
//const end
      menuitem.id = id;
      menuitem.setAttribute('label', label);
      menuitem.setAttribute('tooltiptext', tooltiptext);
//mit Icon	  
if (isIcon ===  1) {
//----
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----   
	  menuitem.classList.add('menuitem-iconic');
	  menuitem.style.MozContextProperties = 'fill';
	  menuitem.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
//Icon start
switch (isMenu) {
	case 1:
	menu1.addEventListener('popupshowing', () => {
	menuitem.querySelector(cl).style.fill = iconColOu;
});
	break;
	case 2:
	menu2.addEventListener('popupshowing', () => {
	menuitem.querySelector(cl).style.fill = iconColOu;
});
	break;
}
//Icon over
menuitem.addEventListener('mouseover', () => {
	  menuitem.querySelector(cl).setAttribute('style','fill:'+iconColOv+';rotate: 180deg; transition: rotate 0.2s ease-in-out 0.1s;');
});
//Icon out
menuitem.addEventListener('mouseout', () => {
	  menuitem.querySelector(cl).setAttribute('style','fill:'+iconColOu+';rotate: 0deg; transition: rotate 0.2s ease-in-out 0.1s;');
});

}
//Icon end
//click
menuitem.addEventListener('click', () => {
	if (event.button === 0) {
        	event.target.ownerGlobal.BrowserCommands.tryToCloseWindow(event);
	}
	else
	if (event.button === 1 || event.button === 2) {
			event.target.ownerGlobal.goQuitApplication(event);
	} 	
});
//Position order
if (isPos > -6 && isPos < 21) {
	if (isMenu === 1) {
		  menu1.append(menuitem);
	} 
	else
	if (isMenu === 2) {
	  	  menu2.append(menuitem);
	}
menuitem.style.order = isPos;
}
//Position reference
else {
const refItem = document.getElementById(isPos); 
 	  refItem.parentNode.insertBefore(menuitem, refItem.nextSibling);
}
//----
})();

// JavaScript Document
// M_Quit_Firefox.uc.js
// FF 143
// Quelle: https://www...

// Das Script erstellt einen neuen Menüeintrag, der ein einzelnes Firefox-Fenster separat schließt (Linksklick) oder Firefox beendet (Mittel-/Rechtsklick). Das .svg-Icon kann - je nach Hover-Zustand - mit zwei unterschiedlichen Farben gefüllt werden [fill]. Beim Überfahren des Menuitems rotiert das Icon um 180deg [rotate: 180deg].
// Das Menü für den Menüeintrag kann selektiert werden (Seitenkontextmenü oder Tabkontextmenü).
// Die Position des Menüeintrags innerhalb des Menüs kann bestimmt werden.
// Eine Darstellung des Menüeintrags mit/ohne Icon kann gewählt werden.
// Für das mitgelieferte Icon als .svg-Datei mit [moz-context-properties] ändert das Script - bei gewählter Iconanzeige [const isIcon = 1;] -  die Einstellung [svg.context-properties.content.enabled] in about:config auf 'true'.

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
         id = 'contextQuit', // ID des neuen menuitems
      label = 'Fenster schließen/Firefox beenden', // Bezeichnung des neuen menuitems
tooltiptext = 'Fenster schließen/Firefox beenden\n\nLinksklick: Fenster schließen\nMittel-/Rechtsklick: Firefox beenden',
// Icon-------------------------------------------------------
     isIcon = 1,
//   isIcon = 1, mit Icon
//   isIcon = 0, ohne Icon; die Konstanten icon, iconPath, iconColOu und iconColOv haben dann keine Funktion und sollten unberührt bleiben
       icon = 'quit-16.svg',  // [Name.Dateiendung] des Symbols
   iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
  iconColOu = 'firebrick',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion)
  iconColOv = 'currentColor',  // Farbe des Icons beim Überfahren des Items (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOv keine Funktion)
// Menü-------------------------------------------------------
     isMenu = 2,
//   isMenu = 1, für Seitenkontextmenü;
//   isMenu = 2, für Tabkontextmenü';
      isPos = 12,
// Option A:
//    isPos = 12, [Zahlen von -5 bis 20]
// Menuitem an einer bestimmten Position im Menü einfügen
// wie in CSS: [order:12!important;]
// Option B:
//    isPos = 'context-inspect'; [String]
// Menuitem auf diesen Menüpunkt folgend einfügen
// wie in CSS: [#context-inspect]
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)),
         cl = '.menu-icon',
      menu1 = document.getElementById('contentAreaContextMenu'),
      menu2 = document.getElementById('tabContextMenu'),
   menuitem = document.createXULElement('menuitem');
//const end
      menuitem.id = id;
      menuitem.setAttribute('label', label);
      menuitem.setAttribute('tooltiptext', tooltiptext);
//mit Icon
if (isIcon ===  1) {
//----
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----
	  menuitem.classList.add('menuitem-iconic');
	  menuitem.style.setProperty('--menuitem-icon', 'url("' + curProfDir + iconPath + icon + '")');
	  menuitem.style.MozContextProperties = 'fill, stroke, fill-opacity';

//Icon start
switch (isMenu) {
	case 1:
	menu1.addEventListener('popupshowing', () => {
	menuitem.querySelector(cl).style.fill = iconColOu;
});
	break;
	case 2:
	menu2.addEventListener('popupshowing', () => {
	menuitem.querySelector(cl).style.fill = iconColOu;
});
	break;
}
//Icon over
menuitem.addEventListener('mouseover', () => {
	  menuitem.querySelector(cl).setAttribute('style','fill:'+iconColOv+';rotate: 180deg; transition: rotate 0.2s ease-in-out 0.1s;');
});
//Icon out
menuitem.addEventListener('mouseout', () => {
	  menuitem.querySelector(cl).setAttribute('style','fill:'+iconColOu+';rotate: 0deg; transition: rotate 0.2s ease-in-out 0.1s;');
});
}
//Icon end
//click
menuitem.addEventListener('click', () => {
	if (event.button === 0) {
        	event.target.ownerGlobal.BrowserCommands.tryToCloseWindow(event);
	}
	else
	if (event.button === 1 || event.button === 2) {
			event.target.ownerGlobal.goQuitApplication(event);
	}
});
//Position order
if (isPos > -6 && isPos < 21) {
	if (isMenu === 1) {
		  menu1.append(menuitem);
	}
	else
	if (isMenu === 2) {
	  	  menu2.append(menuitem);
	}
menuitem.style.order = isPos;
}
//Position reference
else {
const refItem = document.getElementById(isPos);
 	  refItem.parentNode.insertBefore(menuitem, refItem.nextSibling);
}
//----
})();

// JavaScript Document
// B_UserPrefMediaSource.uc.js

// Das Script erstellt einen Button, der in about:config boolsche Werte ändert. In der UserConfiguration unter 'const boolPref' kann die zu ändernde Einstellung festgelegt werden. Das icon/label/tooltiptext kann in der UserConfiguration dem jeweiligen Zustand angepasst werden (true/false).
// Für das mitgelieferte Icon als .svg-Datei mit [moz-context-properties] ändert das Script die Einstellung [svg.context-properties.content.enabled] in about:config auf 'true'.
// In einem neuen Profil ist die Einstellung in about:config 'media.mediasource.enabled, true' gesetzt. Allerdings werden einige Menuitems im Mediendropdown nicht angezeigt z.B.:'Video speichern unter'. Dieses Script toggelt 'media.mediasource.enabled, true'/'media.mediasource.enabled, false'. Die Einstellung 'media.mediasource.enabled, false' könnte z.B.: auf 'youtube.com' interessant sein ( =>'Video speichern unter'). Bei Livestreams (z.b.: 'ardmediathek.de/live/') kann es bei der Einstellung 'media.mediasource.enabled, false' zu Fehlermeldungen der Seite (Wiedergabefehler) kommen. Beim Umschalten wird der Seiteninhalt des AKTIVEN Tabs neu geladen.

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
          id = 'UserPref-msE-button', // Id des neuen Buttons
    boolPref = 'media.mediasource.enabled', // Einstellung in about:config deren boolesche Variable geschaltet werden soll (Wichtig: Beim Umschalten wird der Seiteninhalt des aktiven Tabs neu geladen)
      labelT = 'Mediendropdown ohne DL-Item (Live-TV)', // Bezeichnung des neuen Buttons bei boolPref=true
      labelF = 'Mediendropdown mit Dl-Item (Youtube)', // Bezeichnung des neuen Buttons bei boolPref=false
tooltiptextT = 'Mediendropdown ohne DownloadItem (Livestream)',
tooltiptextF = 'Mediendropdown mit DownloadItem (Youtube)',
// Icon-------------------------------------------------------
       iconT = '16-control-panel-18_moz.svg',  // [Name.Dateiendung] des anzuzeigenden Symbols für boolPref=true
       iconF = '16-control-panel-20_moz.svg',  // [Name.Dateiendung] des anzuzeigenden Symbols für boolPref=false
     bgImage = 'magenta', // Farbe des Indikators (zur Unterscheidung mehrerer UserPref-buttons,)
    iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
  iconColorT = 'firebrick',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für boolPref=true, bei anderen Icons hat const iconColorT keine Funktion)
  iconColorF = 'forestgreen',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für boolPref=false, bei anderen Icons hat const iconColorF keine Funktion)
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//const end
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----  
CustomizableUI.createWidget({
    id: id,
	type: 'button',
    defaultArea: CustomizableUI.AREA_NAVBAR,
 
    onCreated: (button) => {
		button.style.MozContextProperties = 'fill, stroke, fill-opacity';
//bgImage
		button.style = 'background-image:linear-gradient('+bgImage+','+bgImage+'); background-repeat: no-repeat; background-size: 4px 4px; background-position: left 2px top calc(50% - 8px);';
//start
if (Services.prefs.getBoolPref(boolPref) == false ) {
		button.style.fill = iconColorF;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconF + '")';
    	button.setAttribute('label', labelF);
    	button.setAttribute('tooltiptext', tooltiptextF);
}
else
if (Services.prefs.getBoolPref(boolPref) == true ) {
		button.style.fill = iconColorT;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconT + '")';
    	button.setAttribute('label', labelT);
    	button.setAttribute('tooltiptext', tooltiptextT);
}
//click
button.addEventListener('click', () => {
if (event.button == 0) {
  event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
	if (Services.prefs.getBoolPref(boolPref) == false ) {
		button.style.fill = iconColorT;
		Services.prefs.setBoolPref(boolPref, true);
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconT + '")';
    	button.setAttribute('label', labelT);
    	button.setAttribute('tooltiptext', tooltiptextT);
	}
	else
	if (Services.prefs.getBoolPref(boolPref) == true ) {
		button.style.fill = iconColorF;
		Services.prefs.setBoolPref(boolPref, false);
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconF + '")';
    	button.setAttribute('label', labelF);
    	button.setAttribute('tooltiptext', tooltiptextF);
	}
}
});
//----
	}
});
//----
})();

// JavaScript Document
// B_UserPrefAnimationMode.uc.js

// Das Script erstellt einen Button, der in about:config character/string-Variablen ändert. In der UserConfiguration unter 'const charPref' kann die zu ändernde Einstellung festgelegt werden. Das icon/label/tooltiptext kann in der UserConfiguration dem jeweiligen Zustand angepasst werden (normal/once/none).
// Für das mitgelieferte Icon als .svg-Datei mit [moz-context-properties] ändert das Script die Einstellung [svg.context-properties.content.enabled] in about:config auf 'true'.
// In einem neuen Profil ist die Einstellung in about:config 'image.animation_mode, normal' gesetzt. Der Button schaltet per Linksklick einen Zustand weiter (von 'image.animation_mode, normal' auf 'once', von 'once' auf 'none' und von 'none' auf 'normal'. Beim Umschalten wird der Seiteninhalt des AKTIVEN Tabs neu geladen.

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
		 id = 'UserPref-iA_m-button', // Id des neuen Buttons
   charPref = 'image.animation_mode', // Einstellung in about:config deren character-Variable geschaltet werden soll
  labelNorm = 'Normale Gifanimation (Schleife)', // Bezeichnung des neuen Buttons bei charPref=normal
  labelOnce = 'Einmalige Gifanimation', // Bezeichnung des neuen Buttons bei charPref=once
  labelNone = 'Keine Gifanimation', // Bezeichnung des neuen Buttons bei charPref=none
 ttTextNorm = 'Normale Gifanimation (Schleife)', // Tooltiptext
 ttTextOnce = 'Einmalige Gifanimation',
 ttTextNone = 'Keine Gifanimation',
// Icon-------------------------------------------------------
   iconNorm = '16-control-panel-20_moz.svg',  // [Name.Dateiendung] des anzuzeigenden Symbols für charPref=normal
   iconOnce = '16-control-panel-19_moz.svg',  // [Name.Dateiendung] des anzuzeigenden Symbols charPref=once
   iconNone = '16-control-panel-18_moz.svg',  // [Name.Dateiendung] des anzuzeigenden Symbols für charPref=none
    bgImage = '#f9f9f9', // Farbe des Indikators (zur Unterscheidung mehrerer UserPref-buttons)
   iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
iconColNorm = 'forestgreen',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für charPref=normal, bei anderen Icons hat const iconColNorm keine Funktion)
iconColOnce = 'goldenrod',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für charPref=once, bei anderen Icons hat const iconColOnce keine Funktion)
iconColNone = 'firebrick',  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für charPref=none, bei anderen Icons hat const iconColNone keine Funktion)
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//const end
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----  
CustomizableUI.createWidget({
    id: id,
	type: 'button',
    defaultArea: CustomizableUI.AREA_NAVBAR,
 
    onCreated: (button) => {
		button.style.MozContextProperties = 'fill, stroke, fill-opacity';
//bgImage
		button.style = 'background-image:linear-gradient('+bgImage+','+bgImage+'); background-repeat: no-repeat; background-size: 4px 4px; background-position: left 2px top calc(50% - 8px);';
//start
if (Services.prefs.getCharPref(charPref) == 'normal' ) {
		button.style.fill = iconColNorm;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNorm + '")';
    	button.setAttribute('label', labelNorm);
    	button.setAttribute('tooltiptext', ttTextNorm);
}
else
if (Services.prefs.getCharPref(charPref) == 'once' ) {
		button.style.fill = iconColOnce;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconOnce + '")';
    	button.setAttribute('label', labelOnce);
    	button.setAttribute('tooltiptext', ttTextOnce);
}
else
if (Services.prefs.getCharPref(charPref) == 'none' ) {
		button.style.fill = iconColNone;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNone + '")';
    	button.setAttribute('label', labelNone);
    	button.setAttribute('tooltiptext', ttTextNone);
}
//click
button.addEventListener('click', () => {
if (event.button == 0) {
  event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
	if (Services.prefs.getCharPref(charPref) == 'normal' ) {
		Services.prefs.setCharPref(charPref, 'once');
		button.style.fill = iconColOnce;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconOnce + '")';
    	button.setAttribute('label', labelOnce);
    	button.setAttribute('tooltiptext', ttTextOnce);
	}
	else
	if (Services.prefs.getCharPref(charPref) == 'once' ) {
		Services.prefs.setCharPref(charPref, 'none');
		button.style.fill = iconColNone;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNone + '")';
    	button.setAttribute('label', labelNone);
    	button.setAttribute('tooltiptext', ttTextNone);
	}
	else
	if (Services.prefs.getCharPref(charPref) == 'none' ) {
		Services.prefs.setCharPref(charPref, 'normal');
		button.style.fill = iconColNorm;
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNorm + '")';
    	button.setAttribute('label', labelNorm);
    	button.setAttribute('tooltiptext', ttTextNorm);
	}
}
});
//----
	}
});
//----
})();