As far as I am aware the time has come and as of Firefox 72 XUL has been stripped from firefox and so the method used to inject this scrollbar theme is no longer supported -- reference the following for future scroll themes:
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);
}
- in
about:configcheck thattoolkit.legacyUserProfileCustomizations.stylesheetsis set totrue- 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.csshas already been modified in your profile add theuserChrome.cssrules 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.
- 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 theDeprecatedToolsmenu in firefox and toggling theWindows 10 Style Scrollbarsoption. The page must be refreshed for the window scrollbars to update, but on-page elements should change instantly.- Style may be edited in userChrome.js. For changes to take hold, clear your cache in
...\AppData\Local\Mozilla\Firefox\Profilesby 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.
- 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
Reference the @notes in userChrome.js for licensing information of sourced parts. The css content provided by me is licensed as follows:
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.
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.