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
