Ich hänge mich mal an (eine andere Art der Einbindung von --menuitem-icon in Zeile 59):
Beispiel:
JavaScript
// 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.setAttribute('style','--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);
}
//----
})();
