Skip to content

Instantly share code, notes, and snippets.

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

This comment has been minimized.

Copy link

commented Jun 26, 2018

Thanks so much for this! Is it possible to get this working with e10s though?

@Sporif

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2018

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

@CaptaPraelium

This comment has been minimized.

Copy link

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

@r-a-y

This comment has been minimized.

Copy link

commented Jul 9, 2018

@Sporif It doesn't appear to work with e10s for me.

Perhaps it's due to the userscript that I'm using? Maybe you can help me debug it? Here's the script I'm referring to:
http://forums.mozillazine.org/viewtopic.php?p=14800361#p14800361

Once I disable e10s, my userscript starts working again.

@nov3o

This comment has been minimized.

Copy link

commented Feb 13, 2019

Thanks you a lot!

@NomDeMorte

This comment has been minimized.

Copy link

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

commented Apr 28, 2019

@NomDeMorte I updated it with a fixed version

@NomDeMorte

This comment has been minimized.

Copy link

commented Apr 29, 2019

Awesome! Thanks mate! :)

@rpolo77

This comment has been minimized.

Copy link

commented May 22, 2019

doesn't work in firefox 69

@Sporif

This comment has been minimized.

Copy link
Owner Author

commented May 23, 2019

@rpolo77 make sure toolkit.legacyUserProfileCustomizations.stylesheets is enabled

@rpolo77

This comment has been minimized.

Copy link

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

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

commented May 23, 2019

@Sporif working now, thanks

@NomDeMorte

This comment has been minimized.

Copy link

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

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

commented Jun 22, 2019

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

@KyodaiKen

This comment has been minimized.

Copy link

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

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

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

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

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

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

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

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

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

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

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

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

commented Jul 22, 2019

thanks! 😋

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.