Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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=);
}
@Sporif

This comment has been minimized.

Copy link
Owner Author

Sporif commented Jul 2, 2018

@r-a-y But this works with e10s?

@CaptaPraelium

This comment has been minimized.

Copy link

CaptaPraelium commented Jul 3, 2018

In recent builds (>=62.x) The above code breaks the all tabs list button. Clicking on the button just does nothing.
For now, I seem to have worked around this with
#PanelUI-menu-button { ...
In other words, I've had this script attach itself to the hamburger button, rather than the alltabs button. Seems to be working. Not sure if this is the best approach....?

@nov3o

This comment has been minimized.

Copy link

nov3o commented Feb 13, 2019

Thanks you a lot!

@NomDeMorte

This comment has been minimized.

Copy link

NomDeMorte commented Apr 25, 2019

As of today's nightly builds (68.0a1 24/4/2019), the hamburger button disappears if this is used. Same behaviour when using the xml file version. Tried attaching it to a different button and that button will disappear in the same fashion.

I fear the day has come when mozilla killed userchromejs. Any advice appreciated.

@Sporif

This comment has been minimized.

Copy link
Owner Author

Sporif commented Apr 28, 2019

@NomDeMorte I updated it with a fixed version

@NomDeMorte

This comment has been minimized.

Copy link

NomDeMorte commented Apr 29, 2019

Awesome! Thanks mate! :)

@rpolo77

This comment has been minimized.

Copy link

rpolo77 commented May 22, 2019

doesn't work in firefox 69

@Sporif

This comment has been minimized.

Copy link
Owner Author

Sporif commented May 23, 2019

@rpolo77 make sure toolkit.legacyUserProfileCustomizations.stylesheets is enabled

@rpolo77

This comment has been minimized.

Copy link

rpolo77 commented May 23, 2019

@Sporif yes, it is enabled but no button
works fine in 68

@Sporif

This comment has been minimized.

Copy link
Owner Author

Sporif commented May 23, 2019

@rpolo77 What do you mean no button? If you're talking about the restart button script I just updated it.

@rpolo77

This comment has been minimized.

Copy link

rpolo77 commented May 23, 2019

@Sporif working now, thanks

@NomDeMorte

This comment has been minimized.

Copy link

NomDeMorte commented May 26, 2019

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

This comment has been minimized.

Copy link
Owner Author

Sporif commented May 26, 2019

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

@TheSweetLily

This comment has been minimized.

Copy link

TheSweetLily commented Jun 22, 2019

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

@KyodaiKen

This comment has been minimized.

Copy link

KyodaiKen commented Jul 10, 2019

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

@NomDeMorte

This comment has been minimized.

Copy link

NomDeMorte commented Jul 10, 2019

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

This comment has been minimized.

Copy link

FrankDillinger commented Jul 11, 2019

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

@Sporif

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

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

This comment has been minimized.

Copy link

abwert3a4w commented Jul 13, 2019

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

This comment has been minimized.

Copy link

NomDeMorte commented Jul 13, 2019

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

This comment has been minimized.

Copy link

abwert3a4w commented Jul 13, 2019

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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link

abwert3a4w commented Jul 13, 2019

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

@e-t-l

This comment has been minimized.

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

This comment has been minimized.

Copy link

NomDeMorte commented Jul 18, 2019

@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

This comment has been minimized.

Copy link

BlackSails7 commented Jul 22, 2019

thanks! 😋

@shazam19

This comment has been minimized.

Copy link

shazam19 commented Aug 20, 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)

@NomDeMorte

This comment has been minimized.

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

This comment has been minimized.

Copy link

yesnomaybeyes commented Sep 10, 2019

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

NomDeMorte commented Oct 9, 2019

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

This comment has been minimized.

Copy link

jult commented Oct 18, 2019

I tried them all, none of them work.

@Cerberus-tm

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

Cerberus-tm commented Mar 28, 2020

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

@jult

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link

Cerberus-tm commented Apr 11, 2020

@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

This comment has been minimized.

Copy link
Owner 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
You can’t perform that action at this time.