Beiträge von Mitleser

// JavaScript Document
// M_Translate_DeepL.uc.js

// Das Script erstellt einen neuen Menüeintrag. Beim Klick auf den Eintrag öffnet die Seite https://www.deepl.com/...in einem neuen Tab und der vorher markierte Text wird übernommen.

// Bug: Sprache erkennen funktioniert nicht.

// Das .svg-Icon kann - je nach Hover-Zustand - mit zwei unterschiedlichen Farben gefüllt werden [fill]. Beim Überfahren des Menuitems vergrößert sich das Icon [scale: 1.1].
// 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.
// 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;
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const id = 'contextDeepletranslate'; // ID des neuen menuitems
const label = 'Deepl Translate'; // Bezeichnung des neuen menuitems
const tooltiptext = 'Mit DeeplTranslate übersetzen'; 
// Icon-------------------------------------------------------
const isIcon = 1;
// const isIcon = 1; mit Icon 
// const isIcon = 0; ohne Icon; die Konstanten icon, iconPath, iconColOu und iconColOv haben dann keine Funktion und sollten unberührt bleiben
const icon = '16_deepl_logo_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
const iconColOu = 'steelblue';  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion)
const 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ü-------------------------------------------------------
const isMenu = 1; 
// const isMenu = 1; für Seitenkontextmenü; 
// const isMenu = 2; für Tabkontextmenü'; 
const isPos = 'context-translate-selection'; 
// Option A: 
// const isPos = 12; [Zahlen von -5 bis 20] 
// Menuitem an einer bestimmten Position im Menü einfügen 
// wie in CSS: [order:12!important;] 
// Option B: 
// const isPos = 'context-translate-selection'; [String] 
// Menuitem auf diesen Menüpunkt folgend einfügen 
// wie in CSS: [#context-translate-selection] 
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
const cl = 'image';
const menu1 = document.getElementById('contentAreaContextMenu');
const menu2 = document.getElementById('tabContextMenu');

const menuitem = document.createXULElement('menuitem');
      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+';scale: 1.1;transition: scale 0.2s ease-in-out 0.0s;');
});
//Icon out
menuitem.addEventListener('mouseout', () => {
	  menuitem.querySelector(cl).setAttribute('style','fill:'+iconColOu+';scale: 1.0;transition: scale 0.2s ease-in-out 0.0s;');
});

}
//Icon end
//click
menuitem.addEventListener('click', () => {
	if (event.button == 0) {
       	 translate();
            }
});
//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);
}
//----
function translate() {
const browserMM = gBrowser.selectedBrowser.messageManager;
	  browserMM.addMessageListener('getSelection', function listener(message) {
const t = (message.data !== '');
const e = (document.charset || document.characterSet);
	if (t) {
		openTrustedLinkIn('https://www.deepl.com/translator#en/de/' + encodeURIComponent(message.data), 'tab');
	} 
	else {
		openTrustedLinkIn('https://www.deepl.com/translate?u=' + encodeURIComponent(gBrowser.currentURI.spec) + '&hl=de-DE&ie=' + e + '&sl=auto&tl=de-DE', 'tab');
	};
		browserMM.removeMessageListener('getSelection', listener, true);
		});
		browserMM.loadFrameScript('data:,sendAsyncMessage("getSelection", content.document.getSelection().toString())', true);
};
//----
})();

//ScrollTopAndBottom.uc.js
(function() {

let menuitem = document.createXULElement('menuitem');
menuitem.id = 'context-to-top';
menuitem.classList.add('menuitem-iconic');
menuitem.setAttribute('tooltiptext' , '');
menuitem.style.listStyleImage='url("chrome://browser/skin/downloads/downloads.svg")';
menuitem.setAttribute('oncommand' , "ownerGlobal.gBrowser.selectedBrowser.messageManager.loadFrameScript(' data: , content.scrollTo(0,0) ' , false);");
let refItem = document.getElementById('context-reload');
refItem.parentNode.insertBefore(menuitem, refItem);

})();

(function() {

let menuitem = document.createXULElement('menuitem');
menuitem.id = 'context-to-bottom';
menuitem.classList.add('menuitem-iconic');
menuitem.setAttribute('tooltiptext' , '');
menuitem.style.listStyleImage='url("chrome://browser/skin/downloads/downloads.svg")';
let refItem = document.getElementById('context-reload');
refItem.parentNode.insertBefore(menuitem, refItem);
//click
menuitem.addEventListener('click', () => {
	if (event.button == 0) {
		ownerGlobal.gBrowser.selectedBrowser.messageManager.loadFrameScript(' data: , content.scrollTo(0,100000) ' , false);
            }
}); 

var css = '\
#context-to-top { \
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");\
  transform:rotate(180deg)!important;\
  margin-left: 0px !important;\
  margin-right: 15px !important;\
}\
}';
var cssUri = Services.io.newURI('data:text/css,' + encodeURIComponent(css), null, null);
var SSS = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
SSS.loadAndRegisterSheet(cssUri, SSS.AGENT_SHEET);
})();

(function() {

  if (location != 'chrome://browser/content/browser.xhtml')
    return;

  let menuitem = document.createXULElement('menuitem');
  menuitem.id = 'context_closeLeftTabs';
  menuitem.setAttribute('label', 'Linke Tabs schließen');
  let tabContextMenu = document.getElementById('tabContextMenu');
  let refItem = document.getElementById('context_undoCloseTab');
  tabContextMenu.insertBefore(menuitem, refItem);
  tabContextMenu.insertBefore(document.getElementById('context_closeTabsToTheEnd'), refItem);
  tabContextMenu.insertBefore(document.getElementById('context_closeOtherTabs'), refItem);
  //tabContextMenu.removeChild(document.getElementById('context_closeTabOptions'));
//click
menuitem.addEventListener('click', () => {
	if (event.button == 0) {
       	 for (let i = TabContextMenu.contextTab._tPos - 1; i >= 0; i--)gBrowser.removeTab(gBrowser.tabs[i], {animate: true});
            }
}); 

})();

// JavaScript Document
// M_contentAreaContextMenuCloseTab.uc.js

(function() {
  if (!window.gBrowser)
	return;
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const id = 'context-closetab-test'; // ID des neuen menuitems
const label = 'Aktuellen Tab schließen'; // Bezeichnung des neuen menuitems
const tooltiptext = 'Aktuellen Tab schließen'; 
// Icon-------------------------------------------------------
const icon = '16_close-box_large_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
const iconColor = 'currentColor';  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColor keine Funktion)
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//----
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----  
  var contextMenu = document.getElementById('contentAreaContextMenu');
  var menuseparator = document.createXULElement('menuseparator');
  menuseparator.id = 'context-sep-closetab';
  contextMenu.append(menuseparator);

  var menuitem = document.createXULElement('menuitem');
  menuitem.id = id;
  menuitem.setAttribute('label', label);
  menuitem.setAttribute('tooltiptext', tooltiptext);
	  menuitem.style.MozContextProperties = 'fill';
	  menuitem.style.fill = iconColor;
	  menuitem.classList.add('menuitem-iconic');
	  menuitem.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';

menuitem.addEventListener('click', () => {
	BrowserCommands.closeTabOrWindow();
});

  contextMenu.append(menuitem);

//Feld in die Iconleiste
//let ref = document.getElementById('context-bookmarkpage');
//ref.parentNode.insertBefore(menuitem, ref.nextSibling);

  var appcontent = document.getElementById('tabbrowser-tabbox');
  appcontent.addEventListener('contextmenu', event => {
    setTimeout(() => {
      if (gContextMenu && !gContextMenu.shouldDisplay) {
        for (let string of 'back forward reload bookmarkpage'.split(' ')) {
          document.getElementById('context-' + string).removeAttribute('hidden');
        }
        document.getElementById('context-stop').setAttribute('hidden', 'true');
        const A = 'navigation sep-navigation savepage sep-paste selectall sep-viewsource viewsource viewinfo sep-bidi inspect-a11y inspect sep-closetab closetab'.split(' ');
        for (let node of contextMenu.childNodes) {
          if (A.includes(node.id.substring(8)))
            node.removeAttribute('hidden');
          else
            node.setAttribute('hidden', 'true');
        }
        contextMenu.openPopupAtScreen(event.screenX, event.screenY, true, event);
      }
    }, 50);
  });

})();

// JavaScript Document
// B_UserPrefContextMenuEnabled.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 'dom.event.contextmenu.enabled, true' gesetzt. Allerdings kann die Anzeige des Kontextmenüs durch die Website manchmal unterdrückt sein. Dieses Script toggelt 'dom.event.contextmenu.enabled, true'/'dom.event.contextmenu.enabled, false', 'umgeht' die 'Sperre' und blendet das Menü wieder ein. ACHTUNG: Diese Einstellung kann (z.B. mit Mausgesten+Kontextmenü) zu Konflikten führen, deshalb ist diese Schalterstellung nur für kurzzeitigen Einsatz geeignet.   

(function() {
  if (!window.gBrowser)
	return;
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const id = 'UserPref-cmE-button'; // Id des neuen Buttons
const boolPref = 'dom.event.contextmenu.enabled'; // Einstellung in about:config deren boolesche Variable geschaltet werden soll
const labelT = 'Seitenkontextmenü normal anzeigen'; // Bezeichnung des neuen Buttons bei boolPref=true
const labelF = 'Durch Site "gesperrtes" Kontextmenü anzeigen'; // Bezeichnung des neuen Buttons bei boolPref=false
const tooltiptextT = 'Seitenkontextmenü normal anzeigen';
const tooltiptextF = 'Durch eine Site "unterdrücktes"\nSeitenkontextmenü anzeigen';
// Icon-------------------------------------------------------
const iconT = '16-control-panel-18_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols für boolPref=true
const iconF = '16-control-panel-20_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols für boolPref=false
//const bgImage = 'blue'; // Farbe des Indikators (zur Unterscheidung mehrerer UserPref-buttons;)
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
const iconColorT = 'firebrick';  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für boolPref=true, bei anderen Icons hat const iconColorT keine Funktion)
const 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 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//----
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----  
CustomizableUI.createWidget({
    id: id,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    onCreated: function(button) {
		button.style.MozContextProperties = 'fill';
//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);';
	}
});

const el = document.getElementById(id);
const cl = '.toolbarbutton-icon';
//start
if (Services.prefs.getBoolPref(boolPref) == false ) {
		el.querySelector(cl).style.fill = iconColorF;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconF + '")';
    	el.setAttribute('label', labelF);
    	el.setAttribute('tooltiptext', tooltiptextF);
}
else
if (Services.prefs.getBoolPref(boolPref) == true ) {
		el.querySelector(cl).style.fill = iconColorT;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconT + '")';
    	el.setAttribute('label', labelT);
    	el.setAttribute('tooltiptext', tooltiptextT);
}
//click
el.addEventListener('click', () => {
if (event.button == 0) {
	if (Services.prefs.getBoolPref(boolPref) == false ) {
		el.querySelector(cl).style.fill = iconColorT;
		Services.prefs.setBoolPref(boolPref, true);
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconT + '")';
    	el.setAttribute('label', labelT);
    	el.setAttribute('tooltiptext', tooltiptextT);
	}
	else
	if (Services.prefs.getBoolPref(boolPref) == true ) {
		el.querySelector(cl).style.fill = iconColorF;
		Services.prefs.setBoolPref(boolPref, false);
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconF + '")';
    	el.setAttribute('label', labelF);
    	el.setAttribute('tooltiptext', tooltiptextF);
	}
}
});
//----
})();

// 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;
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const id = 'UserPref-msE-button'; // Id des neuen Buttons
const 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)
const labelT = 'Mediendropdown ohne DownloadItem (Livestream)'; // Bezeichnung des neuen Buttons bei boolPref=true
const labelF = 'Mediendropdown mit DownloadItem (Youtube)'; // Bezeichnung des neuen Buttons bei boolPref=false
const tooltiptextT = 'Mediendropdown ohne DownloadItem (Livestream)';
const tooltiptextF = 'Mediendropdown mit DownloadItem (Youtube)';
// Icon-------------------------------------------------------
const iconT = '16-control-panel-18_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols für boolPref=true
const iconF = '16-control-panel-20_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols für boolPref=false
//const bgImage = 'magenta'; // Farbe des Indikators (zur Unterscheidung mehrerer UserPref-buttons;)
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
const iconColorT = 'firebrick';  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für boolPref=true, bei anderen Icons hat const iconColorT keine Funktion)
const 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 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//----
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----  
CustomizableUI.createWidget({
    id: id,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    onCreated: function(button) {
		button.style.MozContextProperties = 'fill';
//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);';
	}
});

const el = document.getElementById(id);
const cl = '.toolbarbutton-icon';
//start
if (Services.prefs.getBoolPref(boolPref) == false ) {
		el.querySelector(cl).style.fill = iconColorF;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconF + '")';
    	el.setAttribute('label', labelF);
    	el.setAttribute('tooltiptext', tooltiptextF);
}
else
if (Services.prefs.getBoolPref(boolPref) == true ) {
		el.querySelector(cl).style.fill = iconColorT;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconT + '")';
    	el.setAttribute('label', labelT);
    	el.setAttribute('tooltiptext', tooltiptextT);
}
//click
el.addEventListener('click', () => {
if (event.button == 0) {
  BrowserCommands.reloadSkipCache();
	if (Services.prefs.getBoolPref(boolPref) == false ) {
		el.querySelector(cl).style.fill = iconColorT;
		Services.prefs.setBoolPref(boolPref, true);
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconT + '")';
    	el.setAttribute('label', labelT);
    	el.setAttribute('tooltiptext', tooltiptextT);
	}
	else
	if (Services.prefs.getBoolPref(boolPref) == true ) {
		el.querySelector(cl).style.fill = iconColorF;
		Services.prefs.setBoolPref(boolPref, false);
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconF + '")';
    	el.setAttribute('label', labelF);
    	el.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;
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const id = 'UserPref-iA_m-button'; // Id des neuen Buttons
const charPref = 'image.animation_mode'; // Einstellung in about:config deren character-Variable geschaltet werden soll
const labelNorm = 'Normale Gifanimation (Schleife)'; // Bezeichnung des neuen Buttons bei charPref=normal
const labelOnce = 'Einmalige Gifanimation'; // Bezeichnung des neuen Buttons bei charPref=once
const labelNone = 'Keine Gifanimation'; // Bezeichnung des neuen Buttons bei charPref=none
const ttTextNorm = 'Normale Gifanimation (Schleife)'; // Tooltiptext
const ttTextOnce = 'Einmalige Gifanimation';
const ttTextNone = 'Keine Gifanimation';
// Icon-------------------------------------------------------
const iconNorm = '16-control-panel-20_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols für charPref=normal
const iconOnce = '16-control-panel-19_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols charPref=once
const iconNone = '16-control-panel-18_moz.svg';  // [Name.Dateiendung] des anzuzeigenden Symbols für charPref=none
//const bgImage = '#f9f9f9'; // Farbe des Indikators (zur Unterscheidung mehrerer UserPref-buttons)
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
const iconColNorm = 'forestgreen';  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für charPref=normal, bei anderen Icons hat const iconColNorm keine Funktion)
const iconColOnce = 'goldenrod';  // Farbe des Icons (nur .svg-Datei mit [moz-context-properties] für charPref=once, bei anderen Icons hat const iconColOnce keine Funktion)
const 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 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//----
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----  
CustomizableUI.createWidget({
    id: id,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    onCreated: function(button) {
		button.style.MozContextProperties = 'fill';
//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);';
	}
});

const el = document.getElementById(id);
const cl = '.toolbarbutton-icon';
//start
if (Services.prefs.getCharPref(charPref) == 'normal' ) {
		el.querySelector(cl).style.fill = iconColNorm;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNorm + '")';
    	el.setAttribute('label', labelNorm);
    	el.setAttribute('tooltiptext', ttTextNorm);
}
else
if (Services.prefs.getCharPref(charPref) == 'once' ) {
		el.querySelector(cl).style.fill = iconColOnce;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconOnce + '")';
    	el.setAttribute('label', labelOnce);
    	el.setAttribute('tooltiptext', ttTextOnce);
}
else
if (Services.prefs.getCharPref(charPref) == 'none' ) {
		el.querySelector(cl).style.fill = iconColNone;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNone + '")';
    	el.setAttribute('label', labelNone);
    	el.setAttribute('tooltiptext', ttTextNone);
}
//click
el.addEventListener('click', () => {
if (event.button == 0) {
  BrowserCommands.reloadSkipCache();
	if (Services.prefs.getCharPref(charPref) == 'normal' ) {
		Services.prefs.setCharPref(charPref, 'once');
		el.querySelector(cl).style.fill = iconColOnce;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconOnce + '")';
    	el.setAttribute('label', labelOnce);
    	el.setAttribute('tooltiptext', ttTextOnce);
	}
	else
	if (Services.prefs.getCharPref(charPref) == 'once' ) {
		Services.prefs.setCharPref(charPref, 'none');
		el.querySelector(cl).style.fill = iconColNone;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNone + '")';
    	el.setAttribute('label', labelNone);
    	el.setAttribute('tooltiptext', ttTextNone);
	}
	else
	if (Services.prefs.getCharPref(charPref) == 'none' ) {
		Services.prefs.setCharPref(charPref, 'normal');
		el.querySelector(cl).style.fill = iconColNorm;
		el.style.listStyleImage = 'url("' + curProfDir + iconPath + iconNorm + '")';
    	el.setAttribute('label', labelNorm);
    	el.setAttribute('tooltiptext', ttTextNorm);
	}
}
});
//----
})();