Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Firefox 57 Windows 10 UWP Style Overlay Scrollbars

Mozilla is currently working to phase out the APIs used to make this theme work. I will try to maintain each version until that time but eventually there will be no workaround. When that time comes there is a new, but more limited api for applying simple themes to scrollbars. In nightly I am currently using the following userContent.css

:root{
	scrollbar-width: thin;
	scrollbar-color: rgb(82, 82, 82) rgb(31, 31, 31);
}

Preview

Installation

  • in about:config check that toolkit.legacyUserProfileCustomizations.stylesheets is set to true
  • Save each file to your Firefox profile's chrome folder, creating one if the folder does not already exist. More information: http://kb.mozillazine.org/UserChrome.css
    • If userChrome.css has already been modified in your profile add the userChrome.css rules below to that existing file. Note there should only be one xul namespace declaration, which should be the first line in the file.
  • Restart Firefox.

Notes

  • Behavior is changed. The up/down/left/right buttons are removed, and by default the feature to click a location on the scrollbar to scroll to it is disabled so that the scroll bar can be clicked through when it overlays an element on the page. Remove the pointer-events rules to restore.
  • The styles can be toggled at any time by going to the Tools menu in firefox and toggling the Windows 10 Style Scrollbars option. The page must be refreshed for the window scrollbars to update, but on-page elements should change instantly. Deprecated
  • Style may be edited in userChrome.js. For changes to take hold, clear your cache in ...\AppData\Local\Mozilla\Firefox\Profiles by deleting the folder for your profile.
  • Live debugging may be performed via Browser Toolbox console https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
    • Make edits to userChrome.js in a text editor and copy/paste the entire contents of the file into the console. Execute and refresh a page to see changes. Rules are cached so if you set a rule you need to clear your profile cache to if you want to remove the rule.
  • Known issue with hover states for window scrollbars cause transition flashing. This prevents full replication of windows 10 style scrollbar behavior, with the workaround being a simpler fade in/out rather than a full scaling animation. On-page elements do not have the hover state issues.

Changelog

  • 0.0.8
    • Integrated changes from the comments of this gist to increase compatibility.
    • The tools menu toggle has been removed.
  • 0.0.7.1
    • Addressed change with Firefox 69.0 that prevents script loading from a file by directly embedding the XML as a data url.
    • The unencoded dataurl (userChrome.xml) is found below for reference
  • 0.0.7
    • Changed how youtube is detected. The method is still inconsistent and a scroll bar will some times be displayed.
    • On youtube.com the scrollbar will be invisible except when being hovered over.
  • 0.0.6
    • Added a special case to hide scrollbars on youtube.com because google forgot what Fullscreen is supposed to be.
  • 0.0.5
    • Added z-index rule to fix compositing/click issues that came about some time after FF 57 (thanks @joshieecs)
    • Added rules to address linux/gtk compatability (thanks @axel668)
  • 0.0.4
    • Modified css string to use backticks and so not require formatting chars
  • 0.0.3
    • New transition animations
  • 0.0.2
    • Removed unused rules
    • Scrollbar width changed to 12px from 16px to better match native style

License

Reference the @notes in userChrome.js for licensing information of sourced parts. The css content provided by me is licensed as follows:

ISC License (ISC)

Copyright 2018 @MrKwatz

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
toolbarbutton#alltabs-button {
-moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IS0tIENvcHlyaWdodCAoYykgMjAxNyBIYWdnYWkgTnVjaGkNCkF2YWlsYWJsZSBmb3IgdXNlIHVuZGVyIHRoZSBNSVQgTGljZW5zZToNCmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUDQogLS0+DQoNCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPg0KPGJpbmRpbmdzIHhtbG5zPSJodHRwOi8vd3d3Lm1vemlsbGEub3JnL3hibCI+DQogICAgPGJpbmRpbmcgaWQ9ImpzIj4NCiAgICAgICAgPGltcGxlbWVudGF0aW9uPg0KICAgICAgICAgICAgPGNvbnN0cnVjdG9yPjwhW0NEQVRBWw0KICAgICAgICAgICAgICAgIGlmKHdpbmRvdy51c2VyQ2hyb21lSnNNb2QpIHJldHVybjsNCiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsNCg0KICAgICAgICAgICAgICAgIHZhciBjaHJvbWVGaWxlcyA9IEZpbGVVdGlscy5nZXREaXIoIlVDaHJtIiwgW10pLmRpcmVjdG9yeUVudHJpZXM7DQogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107DQogICAgICAgICAgICAgICAgdmFyIHNzcyA9IENjWydAbW96aWxsYS5vcmcvY29udGVudC9zdHlsZS1zaGVldC1zZXJ2aWNlOzEnXS5nZXRTZXJ2aWNlKENpLm5zSVN0eWxlU2hlZXRTZXJ2aWNlKTsNCg0KICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7DQogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlID0gY2hyb21lRmlsZXMuZ2V0TmV4dCgpLlF1ZXJ5SW50ZXJmYWNlKENpLm5zSUZpbGUpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgZmlsZVVSSSA9IFNlcnZpY2VzLmlvLm5ld0ZpbGVVUkkoZmlsZSk7DQoNCiAgICAgICAgICAgICAgICAgICAgaWYoZmlsZS5pc0ZpbGUoKSkgew0KICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJub25lIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL2pzIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL3h1bCI7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gImFnZW50c2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2Vyc2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLVwgIiArIGZpbGUubGVhZk5hbWUgKyAiICgiICsgdHlwZSArICIpIik7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJ5IHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFNlcnZpY2VzLnNjcmlwdGxvYWRlci5sb2FkU3ViU2NyaXB0V2l0aE9wdGlvbnMoZmlsZVVSSS5zcGVjLCB7dGFyZ2V0OiB3aW5kb3csIGlnbm9yZUNhY2hlOiB0cnVlfSk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHh1bEZpbGVzLnB1c2goZmlsZVVSSS5zcGVjKTsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZighc3NzLnNoZWV0UmVnaXN0ZXJlZChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYodHlwZSA9PSAidXNlcnNoZWV0Iikgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYoIXNzcy5zaGVldFJlZ2lzdGVyZWQoZmlsZVVSSSwgc3NzLlVTRVJfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IGNhdGNoKGUpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLS8gIiArIGZpbGUubGVhZk5hbWUpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAgICAgc2V0VGltZW91dChmdW5jdGlvbiBsb2FkWFVMKCkgew0KICAgICAgICAgICAgICAgICAgICBpZih4dWxGaWxlcy5sZW5ndGggPiAwKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsNCiAgICAgICAgICAgICAgICAgICAgICAgIHNldFRpbWVvdXQobG9hZFhVTCwgNSk7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9LCAwKTsNCiAgICAgICAgICAgIF1dPjwvY29uc3RydWN0b3I+DQogICAgICAgIDwvaW1wbGVtZW50YXRpb24+DQogICAgPC9iaW5kaW5nPg0KPC9iaW5kaW5ncz4=);
}
// ==UserScript==
// @name userChrome.js
// @namespace scrollbars_win10
// @version 0.0.8
// @note Windows 10 style by /u/mrkwatz https://www.reddit.com/r/FirefoxCSS/comments/7fkha6/firefox_57_windows_10_uwp_style_overlay_scrollbars/
// @note Brought to Firefox 57 by /u/Wiidesire https://www.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/
// @note userChrome.js https://github.com/nuchi/firefox-quantum-userchromejs
// @note Forked from https://github.com/Endor8/userChrome.js/blob/master/floatingscrollbar/FloatingScrollbar.uc.js
// ==/UserScript==
(function () {
var css = `
:not(select):not(hbox) > scrollbar {
-moz-appearance: none!important;
position: relative!important;
background-color: transparent;
pointer-events: none;
z-index: 2147483647;
}
:not(select):not(hbox) > scrollbar * {
-moz-appearance: none!important;
background-color: transparent!important;
pointer-events: none;
}
:not(select):not(hbox) > scrollbar thumb {
-moz-appearance: none!important;
background-color: transparent;
pointer-events: auto;
}
:not(select):not(hbox) > scrollbar[orient = "vertical"] {
min-width: 12px!important;
-moz-margin-start: -12px;/*margin to fill the whole render window with content and overlay the scrollbars*/
}
:not(select):not(hbox) > scrollbar[orient = "horizontal"] {
height: 12px!important;
margin-top: -12px;
}
:not(select):not(hbox) > scrollbar[orient = "vertical"] thumb {
border-right: 2px solid rgba(133, 132, 131, 1);
width: 12px;
min-height: 12px;
transition: border 0.1s ease-in;
}
:not(select):not(hbox) > scrollbar[orient = "horizontal"] thumb {
border-bottom: 2px solid rgba(133, 132, 131, 1);
min-width: 12px;
transition: border 0.1s ease-in;
}
:not(select):not(hbox) > scrollbar:hover {
background-color: rgba(0, 0, 0, 0.25);
max-width: 12px!important;
point-events: auto;
}
:not(select):not(hbox) > scrollbar:hover thumb {
border-width: 12px;
transition: border 0s linear;
}
:not(select):not(hbox) > scrollbar scrollbarbutton, :not(select):not(hbox) > scrollbar gripper {
/*display: none;*/
}
@-moz-document domain("youtube.com") {
:not(select):not(hbox) > scrollbar[orient = "vertical"]:not(:hover) thumb {
opacity: 0 !important;
}
}
`;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
<?xml version=\"1.0\"?>
<!-- Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
-->
<!-- Run userChrome.js/userChrome.xul and .uc.js/.uc.xul/.css files -->
<bindings xmlns=\"http://www.mozilla.org/xbl\">
<binding id=\"js\">
<implementation>
<constructor><![CDATA[
if(window.userChromeJsMod) return;
window.userChromeJsMod = true;
var chromeFiles = FileUtils.getDir(\"UChrm\", []).directoryEntries;
var xulFiles = [];
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
while(chromeFiles.hasMoreElements()) {
var file = chromeFiles.getNext().QueryInterface(Ci.nsIFile);
var fileURI = Services.io.newFileURI(file);
if(file.isFile()) {
type = \"none\";
if(/(^userChrome|.uc).js$/i.test(file.leafName)) {
type = \"userchrome/js\";
}
else if(/(^userChrome|.uc).xul$/i.test(file.leafName)) {
type = \"userchrome/xul\";
}
else if(/.as.css$/i.test(file.leafName)) {
type = \"agentsheet\";
}
else if(/^(?!(userChrome|userContent).css$).+.css$/i.test(file.leafName)) {
type = \"usersheet\";
}
if(type != \"none\") {
console.log(\"----------\\ \" + file.leafName + \" (\" + type + \")\");
try {
if(type == \"userchrome/js\") {
Services.scriptloader.loadSubScriptWithOptions(fileURI.spec, {target: window, ignoreCache: true});
}
else if(type == \"userchrome/xul\") {
xulFiles.push(fileURI.spec);
}
else if(type == \"agentsheet\") {
if(!sss.sheetRegistered(fileURI, sss.AGENT_SHEET))
sss.loadAndRegisterSheet(fileURI, sss.AGENT_SHEET);
}
else if(type == \"usersheet\") {
if(!sss.sheetRegistered(fileURI, sss.USER_SHEET))
sss.loadAndRegisterSheet(fileURI, sss.USER_SHEET);
}
} catch(e) {
console.log(\"########## ERROR: \" + e + \" at \" + e.lineNumber + \":\" + e.columnNumber);
}
console.log(\"----------/ \" + file.leafName);
}
}
}
setTimeout(function loadXUL() {
if(xulFiles.length > 0) {
document.loadOverlay(xulFiles.shift(), null);
setTimeout(loadXUL, 5);
}
}, 0);
]]></constructor>
</implementation>
</binding>
</bindings>
@Risengan

This comment has been minimized.

Copy link

Risengan commented May 21, 2018

Nice work!
Do you know if there is a way to hide the scrollbar and display it only when scrolling? (like the experimental Overlay Scrollbars in Chrome)
Thanks!

@joshieecs

This comment has been minimized.

Copy link

joshieecs commented Jun 15, 2018

Had to add a hacky line to userChrome.js after 25:
z-index: 2147483647;
Or the scollbar overlay would appear behind some elements like nav headers on reddit.com/r/FirefoxCSS and all of youtube.

@ItsHarvey

This comment has been minimized.

Copy link

ItsHarvey commented Jun 18, 2018

@joshieecs I tried using your suggestion to hide things like this on pages; Facebook, Twitch, but they're still showing up, this is literally the only thing holding me back from switching to Firefox. Any suggestions?

@axel668

This comment has been minimized.

Copy link

axel668 commented Aug 2, 2018

Great work, been using this successfully in Win10 for a couple of weeks !
After switching to Linux, however, I had a small issue, the GTK scrollbar background was still visible.

After some testing, I found a solution by adding another section to the script:

:not(select):not(hbox) > scrollbar * {
-moz-appearance: none!important;
background-color: transparent!important;
pointer-events: auto;
}

This removes the GTK scrollbar completely for Linux - feel free to add this to the script.

@clp3z

This comment has been minimized.

Copy link

clp3z commented Aug 3, 2018

Hi @axel668.
I tested this on arch linux and it doesn't work. I copied and saved them both on .~/.mozilla/chrome.
Is that the correct path? Thank you!

@axel668

This comment has been minimized.

Copy link

axel668 commented Aug 7, 2018

@clp3z it's ~/.mozilla/firefox/PROFILE_FOLDER/chrome
(profile folder usually contains some cryptic ID)

@TheRealDadbeard

This comment has been minimized.

Copy link

TheRealDadbeard commented Sep 18, 2018

Is it somehiw possible to autohide the scrollbars when the window is not active?

@hbRRR

This comment has been minimized.

Copy link

hbRRR commented Oct 18, 2018

I've tried to make wider the default scrollbar (no hover) but change does't take the effect?
Help anyone?

btw GREAT addon, GREAT!

@mthw0

This comment has been minimized.

Copy link

mthw0 commented Nov 15, 2018

Does anyone else noticed that the scrollbar sometimes goes under some page elements = is not on the topmost layer?

@abg88

This comment has been minimized.

Copy link

abg88 commented Nov 26, 2018

I just can't get it to work in FX 63.0.3.
I deleted Appdata/local.../profile all the times.
Does anyone have any idea how to get it working?

@Asinin3

This comment has been minimized.

Copy link

Asinin3 commented Nov 28, 2018

Even with 0.0.6 scroll-bar is still showing up when youtube is in fullscreen. Also always shows up on any website when FF is in full-screen.

@mrDMG89

This comment has been minimized.

Copy link

mrDMG89 commented Dec 9, 2018

Even with 0.0.6 scroll-bar is still showing up when youtube is in fullscreen. Also always shows up on any website when FF is in full-screen.

Yes, I have this issue too.

@scorthyn

This comment has been minimized.

Copy link

scorthyn commented Dec 12, 2018

Even with 0.0.6 scroll-bar is still showing up when youtube is in fullscreen. Also always shows up on any website when FF is in full-screen.

Yes, I have this issue too.

same issue here, using nightly tho but its the same with stable version

@mrkwatz

This comment has been minimized.

Copy link
Owner Author

mrkwatz commented Jan 18, 2019

Even with 0.0.6 scroll-bar is still showing up when youtube is in fullscreen. Also always shows up on any website when FF is in full-screen.

Sorry about not noticing that due to profile caching, v7 should address it but I'm not happy with how this is solved so will look in to other ways.

@gund

This comment has been minimized.

Copy link

gund commented Feb 15, 2019

Does not work for me on FF 65.0.1, Windows 10 1803. Scrollbar always visible everywhere...

@DylanDisparu

This comment has been minimized.

Copy link

DylanDisparu commented Feb 15, 2019

Does not work for me on FF 65.0.1, Windows 10 1803. Scrollbar always visible everywhere...

Works quite well here on FF 65.0.1 and Windows 10 1803. The script auto-hides both the vertical and horizontal scroll bars. There are however some glitches:

The list of all tabs does not open after installing this add-on

Had the same problem, i.e. the "list all tabs button" to the right of the "new tab button" seized to function after applying the script. I snatched the remedy provided by user CaptaPraelium to a similar problem in this thread, and it works. What needs to be done is to attach the script to something else than the all tabs button. In this regard the hamburger button seems to be a reliable host… Just like the user who provided the solution, I don't know if this is the best approach, but it works for now.

In userChrome.css replace the line
toolbarbutton#alltabs-button {
with
toolbarbutton#PanelUI-menu-button {

Even with 0.0.6 scroll-bar is still showing up when youtube is in fullscreen. Also always shows up on any website when FF is in full-screen.

Sorry about not noticing that due to profile caching, v7 should address it but I'm not happy with how this is solved so will look in to other ways.

For me the auto-hiding works fine in full-screen. However, v.7 does not remedy that the thumb is visible in Youtube when videos are watched in full-screen. The rule in the js-script for Youtube does not apply or do not work, even after layout.css.moz-document.content.enabledis set to true in about:config (which probably needs to be done since a few versions back of FF). Tried to mess a bit with the code, but to no avail.

Thanks for a great addon nonetheless!

@Chaython

This comment has been minimized.

Copy link

Chaython commented Mar 26, 2019

the margin of which the mouse must be in to make the scrollbar appear is very low; how do I increase it? if I mouse over the single pixel line it doesn't make the scrollbar appear...

@ReekyMarko

This comment has been minimized.

Copy link

ReekyMarko commented Apr 29, 2019

Doesn't seem to have an effect on the latest Nightly. Worked quite well before the last few builds

@UaHummer

This comment has been minimized.

@ReekyMarko

This comment has been minimized.

Copy link

ReekyMarko commented Apr 30, 2019

Thanks a lot, working again now!

@Gigobitto

This comment has been minimized.

Copy link

Gigobitto commented May 25, 2019

Not working since the latest Nightly, even with toolkit.legacyUserProfileCustomizations.stylesheets set to true

69.0a1 (2019-05-25) (64-bit)

@thanuj10

This comment has been minimized.

Copy link

thanuj10 commented Jul 5, 2019

Yes. Not working with latest Firefox 69.

@KyodaiKen

This comment has been minimized.

Copy link

KyodaiKen commented Jul 10, 2019

Does not work anymore since Firefox 68. What did they break again?

@sfmict

This comment has been minimized.

Copy link

sfmict commented Jul 11, 2019

you have to change the userChrome.xml at:
<binding id="js" extends="chrome://global/content/bindings/toolbarbutton.xml#menu">
to:
<binding id="js" extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged">

@KyodaiKen

This comment has been minimized.

Copy link

KyodaiKen commented Jul 12, 2019

The "extends" attribute was completely missing. I added it but it still does not work.
I also made sure everything is the latest version and I deleted the cache, too. :/

@sfmict

This comment has been minimized.

Copy link

sfmict commented Jul 12, 2019

The "extends" attribute was completely missing. I added it but it still does not work.
I also made sure everything is the latest version and I deleted the cache, too. :/

My file:

<?xml version="1.0"?>

<bindings id="generalBindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="js" extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged">
    <implementation>
        <constructor><![CDATA[
            function makeRelativePathURI(name) {
              let absolutePath = Components.stack.filename;
              return absolutePath.substring(0, absolutePath.lastIndexOf("/") + 1) + name;
            }

            // The following code executes in the browser context,
            // i.e. chrome://browser/content/browser.xul
            try {
              Services.scriptloader.loadSubScriptWithOptions(makeRelativePathURI("userChrome.js"), {target: window, ignoreCache: true});
            } catch(e) {
              console.error(e);
            }
        ]]></constructor>
    </implementation>
  </binding>
</bindings>
@KyodaiKen

This comment has been minimized.

Copy link

KyodaiKen commented Jul 12, 2019

Thx but it still doesn't work. :C

It says:
Invalid chrome URI: /

@Chibicon

This comment has been minimized.

Copy link

Chibicon commented Jul 16, 2019

Had to change the userChrome.css to get mine working again

toolbarbutton#alltabs-button {
    -moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IS0tIENvcHlyaWdodCAoYykgMjAxNyBIYWdnYWkgTnVjaGkNCkF2YWlsYWJsZSBmb3IgdXNlIHVuZGVyIHRoZSBNSVQgTGljZW5zZToNCmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUDQogLS0+DQoNCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPg0KPGJpbmRpbmdzIHhtbG5zPSJodHRwOi8vd3d3Lm1vemlsbGEub3JnL3hibCI+DQogICAgPGJpbmRpbmcgaWQ9ImpzIj4NCiAgICAgICAgPGltcGxlbWVudGF0aW9uPg0KICAgICAgICAgICAgPGNvbnN0cnVjdG9yPjwhW0NEQVRBWw0KICAgICAgICAgICAgICAgIGlmKHdpbmRvdy51c2VyQ2hyb21lSnNNb2QpIHJldHVybjsNCiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsNCg0KICAgICAgICAgICAgICAgIHZhciBjaHJvbWVGaWxlcyA9IEZpbGVVdGlscy5nZXREaXIoIlVDaHJtIiwgW10pLmRpcmVjdG9yeUVudHJpZXM7DQogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107DQogICAgICAgICAgICAgICAgdmFyIHNzcyA9IENjWydAbW96aWxsYS5vcmcvY29udGVudC9zdHlsZS1zaGVldC1zZXJ2aWNlOzEnXS5nZXRTZXJ2aWNlKENpLm5zSVN0eWxlU2hlZXRTZXJ2aWNlKTsNCg0KICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7DQogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlID0gY2hyb21lRmlsZXMuZ2V0TmV4dCgpLlF1ZXJ5SW50ZXJmYWNlKENpLm5zSUZpbGUpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgZmlsZVVSSSA9IFNlcnZpY2VzLmlvLm5ld0ZpbGVVUkkoZmlsZSk7DQoNCiAgICAgICAgICAgICAgICAgICAgaWYoZmlsZS5pc0ZpbGUoKSkgew0KICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJub25lIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL2pzIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL3h1bCI7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gImFnZW50c2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2Vyc2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLVwgIiArIGZpbGUubGVhZk5hbWUgKyAiICgiICsgdHlwZSArICIpIik7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJ5IHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFNlcnZpY2VzLnNjcmlwdGxvYWRlci5sb2FkU3ViU2NyaXB0V2l0aE9wdGlvbnMoZmlsZVVSSS5zcGVjLCB7dGFyZ2V0OiB3aW5kb3csIGlnbm9yZUNhY2hlOiB0cnVlfSk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHh1bEZpbGVzLnB1c2goZmlsZVVSSS5zcGVjKTsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZighc3NzLnNoZWV0UmVnaXN0ZXJlZChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYodHlwZSA9PSAidXNlcnNoZWV0Iikgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYoIXNzcy5zaGVldFJlZ2lzdGVyZWQoZmlsZVVSSSwgc3NzLlVTRVJfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IGNhdGNoKGUpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLS8gIiArIGZpbGUubGVhZk5hbWUpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAgICAgc2V0VGltZW91dChmdW5jdGlvbiBsb2FkWFVMKCkgew0KICAgICAgICAgICAgICAgICAgICBpZih4dWxGaWxlcy5sZW5ndGggPiAwKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsNCiAgICAgICAgICAgICAgICAgICAgICAgIHNldFRpbWVvdXQobG9hZFhVTCwgNSk7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9LCAwKTsNCiAgICAgICAgICAgIF1dPjwvY29uc3RydWN0b3I+DQogICAgICAgIDwvaW1wbGVtZW50YXRpb24+DQogICAgPC9iaW5kaW5nPg0KPC9iaW5kaW5ncz4=);
}
@KyodaiKen

This comment has been minimized.

Copy link

KyodaiKen commented Jul 17, 2019

Nope also does not work. Nothing works for me.

@Gigobitto

This comment has been minimized.

Copy link

Gigobitto commented Jul 19, 2019

Change <binding id="js" extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged"> in userChrome.xml to <binding id="js">

@KyodaiKen

This comment has been minimized.

Copy link

KyodaiKen commented Jul 20, 2019

Nope. Unfortunately nothing. :/

@garulovilla

This comment has been minimized.

Copy link

garulovilla commented Jul 20, 2019

I use this firefox-overlay-scrollbars-win10 and it works for me 😉

@Gigobitto

This comment has been minimized.

Copy link

Gigobitto commented Jul 20, 2019

This is my userChrome.xml:

<?xml version="1.0"?>

<bindings id="generalBindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="js">
    <implementation>
        <constructor><![CDATA[
            function makeRelativePathURI(name) {
              let absolutePath = Components.stack.filename;
              return absolutePath.substring(0, absolutePath.lastIndexOf("/") + 1) + name;
            }

            // The following code executes in the browser context,
            // i.e. chrome://browser/content/browser.xul
            Services.scriptloader.loadSubScript(makeRelativePathURI("userChrome.js"), window);
        ]]></constructor>
    </implementation>
  </binding>
</bindings>
@VinnikPavel

This comment has been minimized.

Copy link

VinnikPavel commented Aug 5, 2019

I am using this code without changes and it works everywhere except sidebar's scrollbar (Windows 10, Firefox 69 Beta). Before 67 or 68 it applied to it. Starting from this versions it became show standard, but dark sidebar's scrollbar. And from 69Beta uses standard light windows scrollbar in sidebar. Do you have any thoughts where to look to fix it?

@loopy750

This comment has been minimized.

Copy link

loopy750 commented Sep 4, 2019

This crashes Firefox 70 when viewing the "Page Info"/Security information window. Fixed if you comment out line 69 of userChrome.js v0.0.7, which is display: none;

@seascape

This comment has been minimized.

Copy link

seascape commented Sep 5, 2019

Thanks for this.

The toolbar menu modification this contains seems to create a buggy result in my heavily userChrome-customized Win10 FF69:
Untitled

In addition I would just rather not have it change my menus. Is there an easy way to disable the tools menu modification?

@Netherspark

This comment has been minimized.

Copy link

Netherspark commented Sep 5, 2019

How do I make the thumb button grow out slowly instead of just popping to full size?

The settings are there to control the speed it retracts, but I can't get it to work for the other way.

@neekt

This comment has been minimized.

Copy link

neekt commented Sep 7, 2019

I'm having the same issue as @seascape, using Linux; this breaks my Tools menu:

Screenshot from 2019-09-07 09-57-39

@LeLobster

This comment has been minimized.

Copy link

LeLobster commented Sep 10, 2019

@seascape @neekt

it's conflicting with this snippet from firefox's menu.js while rendering the menu

      e.originalTarget.setAttribute("hasbeenopened", "true");
      for (let el of e.originalTarget.querySelectorAll("menuitem, menu")) {
        el.render();
      }

Easy fix, because who cares about the toggleable checkbox in the menu
Comment out #87 in userChrome.js so the script no longer messes with the menu

#87 p.parentNode.insertBefore(m, p);

@seascape

This comment has been minimized.

Copy link

seascape commented Sep 11, 2019

@LeLobster Thank you for the fix!

@echuber2

This comment has been minimized.

Copy link

echuber2 commented Sep 16, 2019

I think you [I mean, whoever maintains this script] need to remove this line to avoid confusion in the future:

@namespace url(http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

Note the mysterious space in http: // there. This is not allowed in a CSS raw URL token, according to the CSS spec: https://drafts.csswg.org/css-syntax-3/#consume-a-url-token In other words, this namespace URL is parsed as a bad URL and not even applied. I noticed that if I tried to correct the URL there, it broke things, whereas leaving the illegal space or simply removing the line entirely works.

I don't know where else to point this out, but this line appears in a lot of Firefox userscripts that have been floating around GitHub, pastebins, Reddit, etc.! Wish we could find who originated that and let them know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.