Skip to content

Instantly share code, notes, and snippets.

@Sporif
Last active April 26, 2022 09:38
  • Star 34 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Sporif/db6b3440fba0b1bcf5477afacf93f875 to your computer and use it in GitHub Desktop.
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.
toolbarbutton#alltabs-button {
-moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IS0tIENvcHlyaWdodCAoYykgMjAxNyBIYWdnYWkgTnVjaGkNCkF2YWlsYWJsZSBmb3IgdXNlIHVuZGVyIHRoZSBNSVQgTGljZW5zZToNCmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUDQogLS0+DQoNCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPg0KPGJpbmRpbmdzIHhtbG5zPSJodHRwOi8vd3d3Lm1vemlsbGEub3JnL3hibCI+DQogICAgPGJpbmRpbmcgaWQ9ImpzIj4NCiAgICAgICAgPGltcGxlbWVudGF0aW9uPg0KICAgICAgICAgICAgPGNvbnN0cnVjdG9yPjwhW0NEQVRBWw0KICAgICAgICAgICAgICAgIGlmKHdpbmRvdy51c2VyQ2hyb21lSnNNb2QpIHJldHVybjsNCiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsNCg0KICAgICAgICAgICAgICAgIHZhciBjaHJvbWVGaWxlcyA9IEZpbGVVdGlscy5nZXREaXIoIlVDaHJtIiwgW10pLmRpcmVjdG9yeUVudHJpZXM7DQogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107DQogICAgICAgICAgICAgICAgdmFyIHNzcyA9IENjWydAbW96aWxsYS5vcmcvY29udGVudC9zdHlsZS1zaGVldC1zZXJ2aWNlOzEnXS5nZXRTZXJ2aWNlKENpLm5zSVN0eWxlU2hlZXRTZXJ2aWNlKTsNCg0KICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7DQogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlID0gY2hyb21lRmlsZXMuZ2V0TmV4dCgpLlF1ZXJ5SW50ZXJmYWNlKENpLm5zSUZpbGUpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgZmlsZVVSSSA9IFNlcnZpY2VzLmlvLm5ld0ZpbGVVUkkoZmlsZSk7DQoNCiAgICAgICAgICAgICAgICAgICAgaWYoZmlsZS5pc0ZpbGUoKSkgew0KICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJub25lIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL2pzIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL3h1bCI7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gImFnZW50c2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2Vyc2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLVwgIiArIGZpbGUubGVhZk5hbWUgKyAiICgiICsgdHlwZSArICIpIik7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJ5IHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFNlcnZpY2VzLnNjcmlwdGxvYWRlci5sb2FkU3ViU2NyaXB0V2l0aE9wdGlvbnMoZmlsZVVSSS5zcGVjLCB7dGFyZ2V0OiB3aW5kb3csIGlnbm9yZUNhY2hlOiB0cnVlfSk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHh1bEZpbGVzLnB1c2goZmlsZVVSSS5zcGVjKTsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZighc3NzLnNoZWV0UmVnaXN0ZXJlZChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYodHlwZSA9PSAidXNlcnNoZWV0Iikgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYoIXNzcy5zaGVldFJlZ2lzdGVyZWQoZmlsZVVSSSwgc3NzLlVTRVJfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IGNhdGNoKGUpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLS8gIiArIGZpbGUubGVhZk5hbWUpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAgICAgc2V0VGltZW91dChmdW5jdGlvbiBsb2FkWFVMKCkgew0KICAgICAgICAgICAgICAgICAgICBpZih4dWxGaWxlcy5sZW5ndGggPiAwKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsNCiAgICAgICAgICAgICAgICAgICAgICAgIHNldFRpbWVvdXQobG9hZFhVTCwgNSk7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9LCAwKTsNCiAgICAgICAgICAgIF1dPjwvY29uc3RydWN0b3I+DQogICAgICAgIDwvaW1wbGVtZW50YXRpb24+DQogICAgPC9iaW5kaW5nPg0KPC9iaW5kaW5ncz4=);
}
@NomDeMorte
Copy link

Dead for me in 69 also. All tabs button disappears and no files are loaded
(I was using it for the dark scrollbars in windows, the .as.css file is not loaded as it was before)
I have toolkit.legacyUserProfileCustomizations.stylesheets set to true.

Seems like the same XBL binding issue again, same behaviour of the disappearing button that the script is bound to.
chrome://global/content/bindings/toolbarbutton.xml is not there at all.

Found a fix over here. Just have to remove the extension completely now. Works OK.

@Sporif
Copy link
Author

Sporif commented May 26, 2019

@NomDeMorte Yeah this is a new bug. Thanks for the fix, I just updated it.

@TteokbokkiNari
Copy link

Thank you @NomDeMorte !!! This issue was bugging me for weeks!

@KyodaiKen
Copy link

Does not work for me in 68.0. I updated all files. Does not work at all...

@NomDeMorte
Copy link

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?

@FrankDillinger
Copy link

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

@Sporif
Copy link
Author

Sporif commented Jul 11, 2019

@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.

@NomDeMorte
Copy link

NomDeMorte commented Jul 11, 2019

@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:

image

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 :)

@abwert3a4w
Copy link

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?

@NomDeMorte
Copy link

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)

@abwert3a4w
Copy link

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.

@Sporif
Copy link
Author

Sporif commented Jul 13, 2019

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

@abwert3a4w
Copy link

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

@e-t-l
Copy link

e-t-l commented Jul 16, 2019

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

@NomDeMorte
Copy link

@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.

@BlackSails7
Copy link

thanks! 😋

@shazam19
Copy link

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)

@NomDeMorte
Copy link

NomDeMorte commented Aug 21, 2019

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.

@yesnomaybeyes
Copy link

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. :(

@jult
Copy link

jult commented Oct 7, 2019

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.

@NomDeMorte
Copy link

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.

@jult
Copy link

jult commented Oct 18, 2019

I tried them all, none of them work.

@Cerberus-tm
Copy link

Cerberus-tm commented Oct 27, 2019

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?

@astronaute77
Copy link

astronaute77 commented Mar 26, 2020

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?

@Cerberus-tm
Copy link

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

@jult
Copy link

jult commented Mar 28, 2020

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

@e-t-l
Copy link

e-t-l commented Apr 10, 2020

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

@Sporif
Copy link
Author

Sporif commented Apr 11, 2020

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

@Cerberus-tm
Copy link

@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.

@Sporif
Copy link
Author

Sporif commented Apr 11, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment