Mira_Belle , eine Idee hätte ich noch:
Deine .svg-Icons haben kein fill-opacity. Wenn du im Js oder Css Bezug auf fill-opacity nimmst, wird das schiefgehen. Leider ist mir das Thema bereits zu komplex, deshalb konnte ich ohne Links auf die Scripts nicht weiterkommen.
Beiträge von Mitleser
-
-
-
Externer Inhalt www.youtube.comInhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
-
hätte es gerne ausprobiert
So, oder fehlt noch was?
EDIT: meine about:config Einstellungen:
widget.non-native-theme.scrollbar.style, 0
widget.non-native-theme.scrollbar.size.override, 10
layout.testing.overlay-scrollbars.always-visible, falseEDIT: Neue Version hier
JavaScript
Alles anzeigen// B_Scrollbar_toggle.uc.js (function () { // ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ const buttonIcon1 = '16-scroll-area-box-text_off.svg'; // Name & Dateiendung des anzuzeigenden Symbols const buttonIcon1ov = '16-scroll-area-box-text_off_ov.svg'; // Name & Dateiendung des anzuzeigenden Symbols const buttonIcon2 = '16-scroll-area-box-text_over.svg'; // Name & Dateiendung des anzuzeigenden Symbols const buttonIcon3 = '16-scroll-area-box-text_lock.svg'; // Name & Dateiendung des anzuzeigenden Symbols const iconPath = '/chrome/icons/'; // Pfad zum Ordner der die Icons beinhaltet const label = 'Toggle Scrollbar'; const tooltiptext = 'Scrollbar on/off\n\nLinksklick: nur bei Hover anzeigen(gelb)/verbergen(rot)\nMittelklick: immer anzeigen(grün)/verbergen(rot)\n\n[Site/Content wird beim Umschalten neu geladen]'; // ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); if (location.href !== 'chrome://browser/content/browser.xhtml') return; // load on start start(); /*0. Button Tooltip on/off (g2_scrollb_b = "1/0";)->*/ try { CustomizableUI.createWidget({ id: 'toggle-sb-button', type: 'custom', defaultArea: CustomizableUI.AREA_NAVBAR, onBuild: function(aDocument) { let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton'); var props = { id: 'toggle-sb-button', class: 'toolbarbutton-1 chromeclass-toolbar-additional', removable: 'true', label: label, accesskey: '', tooltiptext: tooltiptext }; for(var p in props) toolbaritem.setAttribute(p, props[p]); return toolbaritem; } }); } catch(e) { }; document.getElementById('toggle-sb-button').addEventListener( "click", onClick ); function onClick(event) { if (event.button === 0) { if(g2_scrollb_b == '') { g2_scrollb_b = '1'; sbon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '0') { g2_scrollb_b = '1'; sbon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '1') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '2') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } } else if (event.button == 1) { if(g2_scrollb_b == '') { g2_scrollb_b = '2'; sblockon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '0') { g2_scrollb_b = '2'; sblockon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '2') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '1') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } } else if (event.button === 2) { alert("Rechtsklick wird nicht unterstützt"); } else { alert("ERROR: B_Scrollbar_toggle.uc.js"); }; } /*1. Verhalten der Scrollbar beim start (ausgeschaltet/opacity:0/g2_scrollb_b = "0";)->*/ function start() { g2_scrollb_b = '0'; let css = ` .hidevscroll-scrollbar { appearance: none !important; border: none !important; position: relative !important; background-color: transparent !important; background-image: none !important; padding: 0px !important; z-index: 3516351316854 !important; opacity: 0 !important; } .hidevscroll-scrollbar[orient="vertical"] { margin-inline-start: -8px !important; min-width: 7px; width: 7px; max-width: 7px; } .hidevscroll-scrollbar[orient="horizontal"] thumb, .hidevscroll-scrollbar[orient="vertical"] thumb { min-height: 20px!important; } .hidevscroll-scrollbar thumb { appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; /**/ opacity: 0 !important; transition: opacity 0.4s ease-in-out !important; } .hidevscroll-scrollbar:hover thumb { background-color: #f60 !important; opacity: 0.5 !important; transition: opacity 0.06s ease-in-out !important; } .hidevscroll-scrollbar thumb:active { background-color: #f60 !important; opacity: 0.9 !important; transition: opacity 0.06s ease-in-out !important; } .hidevscroll-scrollbar scrollbarbutton, .hidevscroll-scrollbar gripper { display: none !important; } /*-------------------------------------------------*/ /*-------------------------------------------------*/ :not(select):not(hbox) > scrollbar { /* appearance: none !important;*/ border: none !important; position: relative !important; background-color: transparent !important; background-image: none !important; padding: 0px !important; z-index: 3516351316854 !important; opacity: 0 !important; } :not(select):not(hbox) > scrollbar[orient="vertical"] thumb { min-height: 20px; } :not(select):not(hbox) > scrollbar[orient="horizontal"] thumb { min-width: 20px; } /*------------------------------------------------- :not(select):not(hbox) > scrollbar[orient="vertical"] { margin-inline-start: -5px !important; min-width: 5px !important; width: 5px !important; max-width: 5px !important; } :not(select):not(hbox) > scrollbar[orient="horizontal"] { margin-top: -5px !important; min-height: 5px !important; height: 5px !important; max-height: 5px !important; } ---------------------------------------------------*/ :not(select):not(hbox) > scrollbar thumb { appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; /**/ opacity: 0 !important; transition: opacity 0.4s ease-in-out; } :not(select):not(hbox) > scrollbar:hover thumb { background-color: #f60 !important; opacity: 0.5 !important; transition: opacity 0.1s ease-in-out; } :not(select):not(hbox) > scrollbar thumb:active { background-color: #f60 !important; opacity: 0.9 !important; transition: opacity 0.06s ease-in-out; } /*-------------------------------------------------*/ :not(select):not(hbox) > scrollbar scrollbarbutton, :not(select):not(hbox) > scrollbar gripper { display: none; } /*-------------------------------------------------*/ #toggle-sb-button .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.4s ease-in-out 0.0s !important; padding-top: 7px !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; padding-top: 7px !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: #eabb00 !important; transition: fill 0.0s ease-in-out 0.0s !important; padding-top: 7px !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } /*2. Einschalten der Scrollbar per Button (opacity:1/g2_scrollb_b = "1";)->*/ function sbon() { g2_scrollb_b = '1'; let css = ` .hidevscroll-scrollbar, :not(select):not(hbox) > scrollbar { opacity: 1 !important; } #toggle-sb-button .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: #eabb00 !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.0s ease-in-out 0.0s !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } /*3. Einschalten und Lock der Scrollbar per Button (opacity:1/g2_scrollb_b = "2";)->*/ function sblockon() { g2_scrollb_b = '2'; let css = ` .hidevscroll-scrollbar, :not(select):not(hbox) > scrollbar { opacity: 1 !important; } .hidevscroll-scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out !important; opacity: 0.35 !important; } :not(select):not(hbox) > scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out; opacity: 0.4 !important; } #toggle-sb-button .toolbarbutton-icon { list-style-image:url(${curProfDir}${iconPath}${buttonIcon3}); fill: #72a572 !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon3}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.0s ease-in-out 0.0s !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } /*4. Ausschalten der Scrollbar per Button (opacity:0/g2_scrollb_b = "0";)->*/ function sboff() { g2_scrollb_b = '0'; let css = ` .hidevscroll-scrollbar, :not(select):not(hbox) > scrollbar { opacity: 0 !important; } .hidevscroll-scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out !important; opacity: 0 !important; } :not(select):not(hbox) > scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out; opacity: 0 !important; } #toggle-sb-button .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: #eabb00 !important; transition: fill 0.0s ease-in-out 0.0s !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } })(); -
Das ist für mich DIE Gelegenheit für einen Neuanfang bezogen auf die Scrolleisten!
Mein Script funzt leider ab 143 überhaupt nicht mehr (In 142 läuft das ohne Probs; ich füge in diesem Beitrag keine Icons ein, ändere keine Pfade und Variablen - Das Script ist nur zu Ansicht, nicht zum Gebrauch):
EDIT: Neue Version hier
JavaScript
Alles anzeigen// B_Scrollbar_toggle.uc.js (function () { // ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ const buttonIcon1 = '16-scroll-area-box-text_off.svg'; // Name & Dateiendung des anzuzeigenden Symbols const buttonIcon1ov = '16-scroll-area-box-text_off_ov.svg'; // Name & Dateiendung des anzuzeigenden Symbols const buttonIcon2 = '16-scroll-area-box-text_over.svg'; // Name & Dateiendung des anzuzeigenden Symbols const buttonIcon3 = '16-scroll-area-box-text_lock.svg'; // Name & Dateiendung des anzuzeigenden Symbols const iconPath = '/chrome/css/image/'; // Pfad zum Ordner der die Icons beinhaltet const label = 'Toggle Scrollbar'; const tooltiptext = 'Scrollbar on/off\n\nLinksklick: nur bei Hover anzeigen(gelb)/verbergen(rot)\nMittelklick: immer anzeigen(grün)/verbergen(rot)\n\n[Site/Content wird beim Umschalten neu geladen]'; // ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); if (location.href !== 'chrome://browser/content/browser.xhtml') return; // load on start start(); /*0. Button Tooltip on/off (g2_scrollb_b = "1/0";)->*/ try { CustomizableUI.createWidget({ id: 'toggle-sb-button', type: 'custom', defaultArea: CustomizableUI.AREA_NAVBAR, onBuild: function(aDocument) { let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton'); var props = { id: 'toggle-sb-button', class: 'toolbarbutton-1 chromeclass-toolbar-additional', removable: 'true', label: label, accesskey: '', tooltiptext: tooltiptext }; for(var p in props) toolbaritem.setAttribute(p, props[p]); return toolbaritem; } }); } catch(e) { }; document.getElementById('toggle-sb-button').addEventListener( "click", onClick ); function onClick(event) { if (event.button === 0) { if(g2_scrollb_b == '') { g2_scrollb_b = '1'; sbon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '0') { g2_scrollb_b = '1'; sbon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '1') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '2') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } } else if (event.button == 1) { if(g2_scrollb_b == '') { g2_scrollb_b = '2'; sblockon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '0') { g2_scrollb_b = '2'; sblockon(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '2') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } else if(g2_scrollb_b == '1') { g2_scrollb_b = '0'; sboff(); BrowserCommands.reloadSkipCache(); } } else if (event.button === 2) { alert("Rechtsklick wird nicht unterstützt"); } else { alert("ERROR: B_Scrollbar_toggle.uc.js"); }; } /*1. Verhalten der Scrollbar beim start (ausgeschaltet/opacity:0/g2_scrollb_b = "0";)->*/ function start() { g2_scrollb_b = '0'; let css = ` .hidevscroll-scrollbar { appearance: none !important; border: none !important; position: relative !important; background-color: transparent !important; background-image: none !important; padding: 0px !important; z-index: 3516351316854 !important; opacity: 0 !important; } .hidevscroll-scrollbar[orient="vertical"] { margin-inline-start: -8px !important; min-width: 7px; width: 7px; max-width: 7px; } .hidevscroll-scrollbar[orient="horizontal"] thumb, .hidevscroll-scrollbar[orient="vertical"] thumb { min-height: 20px!important; } .hidevscroll-scrollbar thumb { appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; /**/ opacity: 0 !important; transition: opacity 0.4s ease-in-out !important; } .hidevscroll-scrollbar:hover thumb { background-color: #f60 !important; opacity: 0.5 !important; transition: opacity 0.06s ease-in-out !important; } .hidevscroll-scrollbar thumb:active { background-color: #f60 !important; opacity: 0.9 !important; transition: opacity 0.06s ease-in-out !important; } .hidevscroll-scrollbar scrollbarbutton, .hidevscroll-scrollbar gripper { display: none !important; } /*-------------------------------------------------*/ /*-------------------------------------------------*/ :not(select):not(hbox) > scrollbar { /* appearance: none !important;*/ border: none !important; position: relative !important; background-color: transparent !important; background-image: none !important; padding: 0px !important; z-index: 3516351316854 !important; opacity: 0 !important; } :not(select):not(hbox) > scrollbar[orient="vertical"] thumb { min-height: 20px; } :not(select):not(hbox) > scrollbar[orient="horizontal"] thumb { min-width: 20px; } /*------------------------------------------------- :not(select):not(hbox) > scrollbar[orient="vertical"] { margin-inline-start: -5px !important; min-width: 5px !important; width: 5px !important; max-width: 5px !important; } :not(select):not(hbox) > scrollbar[orient="horizontal"] { margin-top: -5px !important; min-height: 5px !important; height: 5px !important; max-height: 5px !important; } ---------------------------------------------------*/ :not(select):not(hbox) > scrollbar thumb { appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; /**/ opacity: 0 !important; transition: opacity 0.4s ease-in-out; } :not(select):not(hbox) > scrollbar:hover thumb { background-color: #f60 !important; opacity: 0.5 !important; transition: opacity 0.1s ease-in-out; } :not(select):not(hbox) > scrollbar thumb:active { background-color: #f60 !important; opacity: 0.9 !important; transition: opacity 0.06s ease-in-out; } /*-------------------------------------------------*/ :not(select):not(hbox) > scrollbar scrollbarbutton, :not(select):not(hbox) > scrollbar gripper { display: none; } /*-------------------------------------------------*/ #toggle-sb-button .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.4s ease-in-out 0.0s !important; padding-top: 7px !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; padding-top: 7px !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: var(--uc-color-gold-button) !important; transition: fill 0.0s ease-in-out 0.0s !important; padding-top: 7px !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } /*2. Einschalten der Scrollbar per Button (opacity:1/g2_scrollb_b = "1";)->*/ function sbon() { g2_scrollb_b = '1'; let css = ` .hidevscroll-scrollbar, :not(select):not(hbox) > scrollbar { opacity: 1 !important; } #toggle-sb-button .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: var(--uc-color-gold-button) !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.0s ease-in-out 0.0s !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } /*3. Einschalten und Lock der Scrollbar per Button (opacity:1/g2_scrollb_b = "2";)->*/ function sblockon() { g2_scrollb_b = '2'; let css = ` .hidevscroll-scrollbar, :not(select):not(hbox) > scrollbar { opacity: 1 !important; } .hidevscroll-scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out !important; opacity: 0.35 !important; } :not(select):not(hbox) > scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out; opacity: 0.4 !important; } #toggle-sb-button .toolbarbutton-icon { list-style-image:url(${curProfDir}${iconPath}${buttonIcon3}); fill: #72a572 !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon3}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.0s ease-in-out 0.0s !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } /*4. Ausschalten der Scrollbar per Button (opacity:0/g2_scrollb_b = "0";)->*/ function sboff() { g2_scrollb_b = '0'; let css = ` .hidevscroll-scrollbar, :not(select):not(hbox) > scrollbar { opacity: 0 !important; } .hidevscroll-scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out !important; opacity: 0 !important; } :not(select):not(hbox) > scrollbar thumb { /**/ appearance: none !important; border-width: 0px !important; border-radius: 0px !important; background-color: #f60 !important; transition: opacity 0.4s ease-in-out; opacity: 0 !important; } #toggle-sb-button .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}); fill: #cd0e14 !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:hover .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov}); fill: #dddddd !important; transition: fill 0.4s ease-in-out 0.0s !important; } #toggle-sb-button:active .toolbarbutton-icon { list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}); fill: var(--uc-color-Mein Script funzt leider ab 143 überhaupt nicht mehr (In 142 läuft das ohne Probs; ich füge keine Icons ein ,ändere die Pfade und Variablen nicht nicht - nur zu Ansicht):gold-button) !important; transition: fill 0.0s ease-in-out 0.0s !important; } `; let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } })(); -
Ja, genau
siehe: So geht es auch, und beachte bitte den folgenden Beitrag. -
Vergleiche bittte selber die zwei Dateien (aber es läuft auf das hinaus):
JavaScript
Alles anzeigen// JavaScript Document // M_Quit_Firefox.uc.js // FF 142 // 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 anzuzeigenden Symbols iconPath = '/chrome/css/image/ff_svg/', // Pfad zum Ordner der das Icon beinhaltet iconColOu = 'var(--uc-color-redorange-button)', // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion) iconColOv = 'var(--uc-color-white-icons)', // Farbe des Icons beim Überfahren des Items (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOv keine Funktion) // Menü------------------------------------------------------- isMenu = 1, // 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','list-style-image: 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 // 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/css/image/ff_svg/', // Pfad zum Ordner der das Icon beinhaltet iconColOu = 'var(--uc-color-redorange-button)', // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion) iconColOv = 'var(--uc-color-white-icons)', // 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); } //---- })(); -
Ich habe gerade festgestellt, dass sich in meinen hier publizierten 'Menuscripts' ab Firefox 143 die Iconeinbindung obsolet ist. Deshalb hier schon einmal ein vorausschauendes Update (ab 143.0) für diese Scripts:
M_Quit_Firefox.uc.js,
M_Translate_DeepL.uc.js.
JavaScript
Alles anzeigen// 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
Alles anzeigen// JavaScript Document // M_Translate_DeepL.uc.js // FF 143 // Quelle: https://www... // 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; const // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ id = 'contextDeepletranslate', // ID des neuen menuitems label = 'Deepl Translate', // Bezeichnung des neuen menuitems tooltiptext = 'Mit DeeplTranslate übersetzen', // 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 = '16_deepl_logo_moz.svg', // [Name.Dateiendung] des Symbols iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet iconColOu = 'steelblue', // 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 = 1, // isMenu = 1, für Seitenkontextmenü; // isMenu = 2, für Tabkontextmenü'; isPos = 'context-translate-selection', // 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-translate-selection'; [String] // Menuitem auf diesen Menüpunkt folgend einfügen // wie in CSS: [#context-translate-selection] // ■■ 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); //with 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+';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); }; //---- })();Goodie: ab 143 -- Scrollbar im Lesezeichenseitenmenü verbergen? So gehts: --
stack.tree-stack hbox.tree-rows > scrollbar {
display: none !important;
} -
mkpcxxl , das Auskommentieren von itemPopup.hidden = true; ist keine Lösung, sondern nur eine Verlagerung des Problems. Aber BrokenHeart - dem Urheber des Scripts - wird sicherlich dazu noch etwas einfallen?.
-
-
Horstmann , viel Spass beim Löschen Deines Beitrags morgen früh, so wie immer ...
-
Off Topic:
Der Zusammenhang mit Benimmregeln erschliesst sich mir nicht
Zu den Benimmregeln in einem Forum gehört - meiner Meinung nach - unter anderem eine möglichst fehlerfreie Schreibweise (aus Wertschätzung gegenüber dem Gesprächspartner) sowie alles zu tun um die Helfenden zu unterstützen.
Bin dann mal weg, eigentlich war ich nie da.
-
-
Es verstößt gegen keine Forenregel.
Alternative: Einfach nicht mehr antworten, dann verschwindet der Thread eh in der Versenkung.
Ja, es gibt auch noch andere 'Regeln' außerhalb der Forenregeln, dass sind zum Beispiel die Benimmregeln. 'Einfach nicht mehr Antworten' funzt bei Dir oder mir, alle ANDEREN werden das Thema trotzdem nach vorne treiben...
-
-
Stream: delta radio UNPLUGGED [mp3 | 192 kbps]
Für Online-Radio oder zum direkt hören im Browser.
Edit: Meine bevorzugte I-Net-Radio-Software unter Linux: Shortwave (aus der Anwendungsverwaltung [Flatpack]).
-
Externer Inhalt www.youtube.comInhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
-
Future Sound Of Egypt 829
?
-
-
Ich hänge mich mal an (eine andere Art der Einbindung von --menuitem-icon in Zeile 59):
Beispiel:JavaScript
Alles anzeigen// 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); } //---- })();