NOTE: Doesn't work with Firefox 72+. Add userChrome.js support to Firefox with just userChrome.css. A compact version of https://github.com/Sporif/firefox-quantum-userchromejs. Instead of loading userChrome.xml file it uses a data URI.

userChrome.css

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

Hi Ken,

I'm on nightly 70 now and although I have had to update the script twice through different firefox versions, I have always been able to get it working, so I'm sure we can work it out.

If you can let me know a few things we'll figure out what's wrong.
Has it worked for you previously? Now when it is not working, has your all tabs button disappeared?

I have no idea what I'm doing, can someone explain this in layman's terms?

@FrankDillinger Within Firefox go to about:config and enable toolkit.legacyUserProfileCustomizations.stylesheets. Then go to about:profiles and open your profile directory (the profile should be called something like default-release). Inside the profile folder create a folder called chrome and in that folder create a file called userChrome.css. Paste the contents of this gist. Restart Firefox.

@FrankDillinger

If you want to do this, you just copy/paste the above code into your userChrome.css file, and then create files with the javascript you need in that same directory.

The above code, as part of the userChrome.css, makes an element of the user interface (the 'List all tabs' button) contain some javascript, and subsequently runs other javascript (our userscripts).
The userscripts can enable us to cause the browser to behave differently than normal, beyond what is usually possible with CSS. For example, I use it to modify the scrollbars in Windows, which is otherwise not possible. Eg: Image of transparent scrollbar:

Because this is not supported behaviour, it sometimes breaks when firefox is updated (see above) so you might need to tinker with it a little, to get it working.

Hope that helps.

Edit: Beaten! Sorry sporif :)

I'm still getting the bug where whichever part of the UI is specified vanishes, e.g. toolbarbutton#alltabs-button or #PanelUI-menu-button.
Does anyone know how to stop this from happening?

I'm still getting the bug where whichever part of the UI is specified vanishes, e.g. toolbarbutton#alltabs-button or #PanelUI-menu-button.
Does anyone know how to stop this from happening?

Trick is to use the appropriate version of the script for your browser version.... Check out the revisions listing here and the commits to the unencoded multi file version here will give you hints (because the commits have a description)

I'm using Firefox 68.0, so I assume I need the 28 Apr revision of this. However, I can't find a way to get that 28 Apr version of the compact userChrome.css found on this page.

@abwert3a4w Here you go. You get this link on the revisions page by clicking on the three dot button, then view file. See image.

Brilliant, works perfectly. Thank you both so much. Have yourselves a nice weekend.

This fix worked perfectly for me as well. By the way, @NomDeMorte, where can I find the code for that awesome transparent scrollbar?

@elijahtlang It's not published online just yet, I'm still kinda working on it. The problem with having a transparent scrollbar is that the background is effectively set by the page, and that means that any colour I choose for the scrollbar might just happen to be the same as the background, and then the scrollbar is invisible. When I get it working acceptably, I'll @ you here and post a gist.

thanks! 😋

I have created the chrome folder added userChrome.css with the above code; enabled toolkit.legacyUserProfileCustomizations.stylesheets. But still by scrollbar is grey. Using firefox quantam 68.0.2 (32-bit)

I have created the chrome folder added userChrome.css with the above code; enabled toolkit.legacyUserProfileCustomizations.stylesheets. But still by scrollbar is grey. Using firefox quantam 68.0.2 (32-bit)

Make sure you are using the correct version for your firefox. See the conversation above here.

Hm, I can't get this working on Firefox 71, tried the darkscrollbars.as.css and RestartFirefoxButton_Movable.uc.js, to no effect, the scroll bars stay the same and no button is made. :(

Same here. I tried almost all 'solutions', none of them seem to fix that ridiculous hardly visible scrollbar button issue.
For crying out loud, what total IDIOT designed it like this? He/she should be shot, right after having been forced to change the scrollbar button color to something contrasting the bar itself.

It's definitely working guys. I'm using latest nightly and have been since before version 60 and it works in all versions. Have a scroll up and see the problems and solutions posted above, see if you can find something which matches your situation.

I tried them all, none of them work.

Thank you, all! The first couple of times, somehow it had no effect.

But, when I removed all contents of UserChrome.css, then added them back in again (without changing them at all), while restarting the browser a couple of times, at some point it suddenly worked. And then any change I made in dark-scrollbar.as.css worked immediately as I restarted the browser. So now I am happy.

So there was some temporary problem which I cannot comprehend. Could it have been something to do with caching?

Hi, I know this worked on my old computer but I forgot how I made it work.
Now with the coronavirus I’m not home and I have another computer with FF 74 x64, and this doesn’t work at all.

Steps I’ve done:

1. toolkit.legacyUserProfileCustomizations.stylesheets to true
2. copied files to: %AppData%\Mozilla\Firefox\Profiles\xxxxxxxxx.default-release\chrome:

• userChrome.css
• dark-scrollbar.as.css

Can someone confirm it still works in FF 74 please?

Hmm this has stopped working for me as well. I don't know when that happened. I am now on FF 74.

What is the source of this ridiculous issue? Why can't Mozilla fix this globally, for all windows users?

It's still not working on FF 75. @Sporif any idea what's going on?

@astronaute77 @Cerberus-tm @jult @e-t-l This method stopped working with Firefox 72. Since XBL was removed the -moz-binding rule does nothing.

@Sporif Oh, dear, thanks for the information. Now I wonder whether there is another way to give the scrollbar button a more contrastive (darker) colour.

@Cerberus-tm There are other methods of using custom scripts: https://github.com/Aris-t2/CustomJSforFx