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