Beiträge von Mitleser

Mitleser

Phil L. Herold (44) ist gestorben.

Mitleser

Zitat von grisu2099

Scrollbarbreite geht doch mit Bordmitteln...

Ich habe mein Script aus Beitrag #5 mal fit gemacht für die kommenden Versionen, und es auch genauso gelöst:

JavaScript

// JavaScript Document
// B_ScrollbarToggle.uc.js
(function() {
 if (!window.gBrowser)
    return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
        id = 'sb-toggle-button', // Id des Buttons
     label = 'Toggle Scrollbar', // Bezeichnung des Buttons
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]',
// Icons------------------------------------------------------
   iconOff = '16_scroll-area-box-without-bar_moz.svg', // [Name.Dateiendung] des Symbols bei 'Scrollbar verbergen'
    iconOn = '16_scroll-area-box-with-bar_moz.svg', // [Name.Dateiendung] des Symbols bei 'Scrollbar anzeigen'
  iconPath = '/chrome/icons/', // Pfad zum Ordner der die Icons beinhaltet
iconColOff = 'firebrick',  // Farbe des Icons bei 'Scrollbar verbergen' (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOff keine Funktion)
 iconColOn = 'goldenrod',  // Farbe des Icons bei Scrollbar 'nur bei Hover anzeigen' (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOn keine Funktion)
iconColLock = 'forestgreen',  // Farbe des Icons bei 'Scrollbar immer anzeigen' (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColLock keine Funktion)
 iconColOv = 'currentColor',  // Farbe des Icons beim Überfahren des Buttons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOv keine Funktion)
// Scrollbar--(Änderungen erfordern Neustart des Browsers)----
  thumbCol = '#F60',  // Farbe des Thumbs(Slider)
   barSize = '8',  // Breite der Scrollbar in px
  barStyle = '0',  // Änderung ist nur erforderlich, wenn die CSS unter 'start()' z.B. mit der von ARIS ersetzt/ergänzt wird
// barStyle = '0' Standard-Stil der Plattform
// barStyle = '1' macOS
// barStyle = '2' GTK
// barStyle = '3' Android
// barStyle = '4' Windows 10
// barStyle = '5' Windows 11
// ■■ 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 );
    }
//scrollbarPrefs
Services.prefs.setIntPref('widget.non-native-theme.scrollbar.size.override', barSize);
Services.prefs.setIntPref('widget.non-native-theme.scrollbar.style', barStyle);
//start initiieren
start();
//button start
CustomizableUI.createWidget({
   id: id,
   defaultArea: CustomizableUI.AREA_NAVBAR,
   label: label,
   tooltiptext: tooltiptext,
   onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-opacity';
        button.style.minWidth = 'fit-content';
//click
button.addEventListener('click', () => {
if (event.button === 0) {
           if(g2_scrollb_b == '')  {
              g2_scrollb_b = '1';
            sbon();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
           }
   else if(g2_scrollb_b == '0') {
              g2_scrollb_b = '1';
            sbon();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
           }
   else if(g2_scrollb_b == '1') {
              g2_scrollb_b = '0';
            sboff();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '2') {
              g2_scrollb_b = '0';
            sboff();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
   }
} else
if (event.button == 1) {
           if(g2_scrollb_b == '')  {
              g2_scrollb_b = '2';
            sblockon();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
           }
   else if(g2_scrollb_b == '0') {
              g2_scrollb_b = '2';
            sblockon();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
           }
   else if(g2_scrollb_b == '2') {
              g2_scrollb_b = '0';
            sboff();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
            }
   else if(g2_scrollb_b == '1') {
              g2_scrollb_b = '0';
            sboff();
            event.target.ownerGlobal.BrowserCommands.reloadSkipCache();
            }
    }
else {
alert("ERROR: B_ScrollbarToggle.uc.js");
     };
//----
});//click END
    }//onCreated END
});//button END
/*1. Verhalten der Scrollbar beim start (ausgeschaltet/opacity:0/g2_scrollb_b = "0";)->*/
function start() {
g2_scrollb_b = '0';
    let css = `
:not(select) > scrollbar {
    position: relative !important;
    z-index: 3516351316854 !important;
    opacity: 0 !important;
}
/*-------------------------------------------------*/
:not(select) > scrollbar thumb {
    appearance: none !important;
    background-color: ${thumbCol} !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease-in-out;
}
:not(select) > scrollbar:hover thumb {
    opacity: 0.5 !important;
    transition: opacity 0.1s ease-in-out;
}
:not(select) > scrollbar:active thumb {
    opacity: 0.9 !important;
    transition: opacity 0.06s ease-in-out;
}
:not(select) > scrollbar thumb {
    border-top-left-radius: calc(0.5 * ${barSize}px) !important;
    border-top-right-radius: calc(0.5 * ${barSize}px) !important;
    border-bottom-left-radius: calc(0.5 * ${barSize}px) !important;
    border-bottom-right-radius: calc(0.5 * ${barSize}px) !important;
}
/*------------Button-------------------------------*/
#${id} .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOff});
    fill: ${iconColOff} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:hover .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOn});
    fill: ${iconColOv} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:active .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOn});
    fill: ${iconColOn} !important;
    transition: fill 0.0s ease-in-out !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);
    };//start END
/*2. Einschalten der Scrollbar per Button (opacity:1/g2_scrollb_b = "1";)->*/
function sbon() {
g2_scrollb_b = '1';
    let css = `
:not(select) > scrollbar {
    opacity: 1 !important;
}
/*------------Button-------------------------------*/
#${id} .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOn});
    fill: ${iconColOn} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:hover .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOff});
    fill: ${iconColOv} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:active .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOff});
    fill: ${iconColOff} !important;
    transition: fill 0.0s ease-in-out !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);
    };//sbon END
/*3. Einschalten und Lock der Scrollbar per Button (opacity:1/g2_scrollb_b = "2";)->*/
function sblockon() {
g2_scrollb_b = '2';
    let css = `
:not(select) > scrollbar {
    opacity: 1 !important;
}
:not(select) > scrollbar thumb {
    transition: opacity 0.4s ease-in-out;
    opacity: 0.4 !important;
}
/*------------Button-------------------------------*/
#${id} .toolbarbutton-icon {
    list-style-image:url(${curProfDir}${iconPath}${iconOn});
    fill: ${iconColLock} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:hover .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOff});
    fill: ${iconColOv} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:active .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOff});
    fill: ${iconColOff} !important;
    transition: fill 0.0s ease-in-out !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);
    };//sblockon END
/*4. Ausschalten der Scrollbar per Button (opacity:0/g2_scrollb_b = "0";)->*/
function sboff() {
g2_scrollb_b = '0';
    let css = `
:not(select) > scrollbar {
    opacity: 0 !important;
}
:not(select) > scrollbar thumb {
    transition: opacity 0.4s ease-in-out;
    opacity: 0 !important;
}
/*------------Button-------------------------------*/
#${id} .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOff});
    fill: ${iconColOff} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:hover .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOn});
    fill: ${iconColOv} !important;
    transition: fill 0.4s ease-in-out !important;
}
#${id}:active .toolbarbutton-icon {
    list-style-image: url(${curProfDir}${iconPath}${iconOn});
    fill: ${iconColOn} !important;
    transition: fill 0.0s ease-in-out !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);
    };//sboff END
})();//function END

Alles anzeigen

Mitleser

Oder hier mal reinschauen; ob diese Icons aktuell sind, weiß ich allerdings nicht. Aber dir geht es ja hauptsächlich um die FF-internen Pfade, die sich ab und zu auch mal ändern...Das gibt die Seite wohl nicht her...

Mitleser

Zitat von Mira_Belle

denn ich verstehe Deine Aussage gerade nicht

In jedem .svg-Standarticon ist das Attribut fill-opacity = 1 gesetzt, du machst das aber nicht um im Fileexplorer unter Windows eine Anzeige zu erreichen, sondern du erwähnst es nicht einmal. Zumindest sollte fill-opacity="context-fill-opacity" in der Syntax des Icons vorhanden sein. Sollte das nicht so sein, kann das zu Fehlern führen, ob das in diesem Fall überhaupt relevant ist weiß ich nicht...

Mitleser

Zitat von milupo

Mira_Belle hat fill-opacity auf 1 gesetzt und das sogar mit !important. Der Wert 1 ist aber der Standardwert und m. E. braucht dann fill-opacity gar nicht angegeben werden.

Ja , das geht aber auch nur, weil der Standartwert im Icon auf fill-opacity = 1 gesetzt wird, wenn der Wert nicht vorhanden ist, passiert in der Js/Css nichts....

Mitleser

Zitat von Mira_Belle

aber das wird ja im CSS nachgeholt!

Falsch! Ob dass das Prob ist weiß ich allerdings nicht...

Mitleser

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.

Mitleser

Zitat von Mira_Belle

Wären manche SVG-Grafiken bei vielen Nutzern ohne Probleme angezeigt werden,
habe andere Nutzer damit Probleme

Könnte daran liegen?:
svg.context-properties.content.enabled steht auf false

Mitleser

Externer Inhalt www.youtube.com

Inhalte 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.

Mitleser

Zitat von Mira_Belle

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, false

EDIT: Neue Version hier

JavaScript

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

	}
})();

Alles anzeigen

Mitleser

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

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

	}
})();

Alles anzeigen

Mitleser

Ja, genau
siehe: So geht es auch, und beachte bitte den folgenden Beitrag.

Mitleser

Vergleiche bittte selber die zwei Dateien (aber es läuft auf das hinaus):

Code

menuitem.style.setProperty('--menuitem-icon', 'url("' + curProfDir + iconPath + icon + '")');

JavaScript

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

Alles anzeigen

Mitleser

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

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

Alles anzeigen

JavaScript

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

Alles anzeigen

Goodie: ab 143 -- Scrollbar im Lesezeichenseitenmenü verbergen? So gehts: --
stack.tree-stack hbox.tree-rows > scrollbar {
display: none !important;
}

Mitleser

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?.

Mitleser

mkpcxxl , versuche mal Zeile 298

Zitat von mkpcxxl

itemPopup.hidden = true;

auszukommentieren...

Mitleser

Horstmann , viel Spass beim Löschen Deines Beitrags morgen früh, so wie immer ...

Mitleser

Off Topic:

Zitat von Horstmann

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.

Mitleser

Horstmann aka @hansmn

Diese Regel aus reddit sollte Dir bekannt sein:

Post your code and/or the link to the theme you're using. For posting code, do one of the following:

Würde ich gut finden, dass zu übernehmen...

Mitleser

Zitat von 2002Andreas

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...

Beiträge von Mitleser

In memoriam

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Firefox eigene Symbole

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Was schaut ihr gerade?

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

[ab 143.0] Update meiner Menuscripts + Goodie

[ab 143.0] Update meiner Menuscripts + Goodie

[ab 143.0] Update meiner Menuscripts + Goodie

Probleme mit einem "Hover" Popup und dem Script bookmark-count.uc.js

Probleme mit einem "Hover" Popup und dem Script bookmark-count.uc.js

Wie lässt sich die Schrift in den Tab stets vertikal zentriert halten?

Wie lässt sich die Schrift in den Tab stets vertikal zentriert halten?

Wie lässt sich die Schrift in den Tab stets vertikal zentriert halten?

Wie lässt sich die Schrift in den Tab stets vertikal zentriert halten?