Customizing Firefox Quantum to replace the loss of Tab Mix Plus

[#1]

Ok. I have a confession to make: Up until last week, I had been running Firefox 56 (a 2 year old browser version) because of a browser extension I couldn’t live without: Tab Mix Plus

A number of extensions in Firefox stopped working and at that time there was no clear way to make them start up again. I knew I was running on borrowed time for a while now. I had thought my time was up and I was finally forced to upgrade. I realize now that it wasn’t a forced upgrade, but due to the Expired certificate broke all firefox add-ons. And I thought it was just me. Oh well, time to update!

Backstory:

I love tabbed browsing. Those of you in the younger generation might not realize how amazing it is to have tabbed browsing. In my youth, if you wanted to leave this page open and look at a different page, it required you to launch the application again. UGH

 

About 2004-2005ish I really got deep into the web, loading lots of pages at once (it was really good for taking in lots of information, and I spent a lot of time reviewing edits in wikipedia and posting a few of my own), and stumbled across the common problems of performance, and managing my tabs. Back then, Firefox was clearly the best browser in my eyes. This was before 2008 so Chrome wasn’t around yet, and I couldn’t stand using Internet Explorer. I was all about customizing my experience, optimizing my interface for my preferences. The other browsers at the time just didn’t afford any of that.

I came across a great browser extension for Firefox called Tab Mix Plus. This allowed end users to customize all sorts of things, from what the middle mouse click does when you click on a link, to what what menus you see when right clicking on a tab, to making unread tabs have a different color/font, to what happens when you double click an existing tab (reload it!). It even had a session manager before Firefox introduced one natively. Long and short of it, I was able to customize my browser to a high degree, very easily, and I was a happy web surfer.

My list of customizations I had made to Firefox through TabMix Plus

• Single Window mode - Makes it so you don’t have multiple windows to manage,

• double click on tab = reload that tab

• unread tabs have their text in red and italics until you click on them - makes it really easy at a glance to keep track of which tabs I’ve already looked at and which I have yet to look at

• added a progress bar to the tab to show when it’s done loading (current versions seem to have this now, YAY)

• all links opened from bookmarks load in diverted tabs - You can also set this in the about:config page in Firefox

• middle click mouse button on link: opens links in a new tab and diverts that new tab so it doesn’t make me focus on it right away - good for things I want to read in a few minutes without losing my train of thought in the here and now - Found it can now be set in the about:config as well

Flashback November 2017 and Firefox 57 is released. aka Quantum and all your previous browser extensions are broken if you upgrade. Many developers are able to cope and release updates. TabMix, well not so much. It seems that the changes to Quantum are such that just about all the functionality of the previous Tabmix would require a complete rewrite of all the code. So far it hasn’t been completed.

Begin customizing v66

I updated Firefox to the latest 66.0.5. And I started trying to find alternatives for my customizations over again.

First addons

• Adblock plus - I can’t stand all the ads I see everywhere without it

• Noscript - it’s not for everyone - but gives you control over which websites your browser will load javascripts from. Really good for preventing XSS, and preventing lots of other sites from loading content you don’t want in your browser

• Load time - Some times you just need the data on how long that page load just took.

• Tab Flag - I’ll explain this one below - I wasn’t using it before, but it is very helpful in one aspect

I was ok with not getting back ALL the previous functionality I had, but there were some customizations I find that I am just too accustomed to at this point to live without. So first up was one of the big things I want in all browsers:

Double click the tab to reload it. Sounds like a simple request right? I still haven’t figured out how to make Chrome do this. I found extensions that can reload all tabs with a doubleclick, but when you have 10-15 tabs open, I almost never want to reload all of them at once. I found a reddit thread (see updated forum link below) with other users asking for what I wanted, just reloading a single tab on doubleclick. First step, setup userChrome.css from their site:

userChrome.css holds style rules for modifying Firefox's user interface. You can find users on the web offering a wide range of ready-to-paste style recipes, and communities where you can request help with rules to make your Firefox look just the way you want. And it's all free.

And using userChrome.css I also found I could load userChrome.js which lets you run any javascript you want in Firefox. I chose this script do to so https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875 userChrome.css and userChrome.js give Firefox users the ability to customize lots of aspects about their own user interface.

To get the functionality of these files, they have to go into a ‘chrome’ directory (a super misleading term, BTW) inside your user profile. On Mac that is in /Users/{yourusername}/Library/Application Support/Firefox/Profiles/{yourProfile}/chrome/

Drop those files in there, restart Firefox, done. Next up:

Make unviewed / diverted tabs look different

I found an extension to do this, but in a much more basic level that I was accustomed to. Tab Flag just adds a character or emoji to the tab of those you have not yet looked at. Not exactly what I wanted, but same idea. In mine, I just selected the asterisk * - it’s simple, it works. Good start. The upshot here is that adding this changes the tab to have a ‘titlechanged=true' value in the css. Which I found I could then correctly key off of in order to add the red color and italics to these tabs. It makes it really obvious as to which tabs you haven’t looked at yet if you use diverted tab loading a lot, which I do.

Details of contents of my userChrome.css and userChrome.js

userChrome.css

/*Add userChrome.js support to Firefox, 
from https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875 */
toolbarbutton#alltabs-button {
-moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IS0tIENvcHlyaWdodCAoYykgMjAxNyBIYWdnYWkgTnVjaGkNCkF2YWlsYWJsZSBmb3IgdXNlIHVuZGVyIHRoZSBNSVQgTGljZW5zZToNCmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUDQogLS0+DQoNCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPg0KPGJpbmRpbmdzIHhtbG5zPSJodHRwOi8vd3d3Lm1vemlsbGEub3JnL3hibCI+DQogICAgPGJpbmRpbmcgaWQ9ImpzIj4NCiAgICAgICAgPGltcGxlbWVudGF0aW9uPg0KICAgICAgICAgICAgPGNvbnN0cnVjdG9yPjwhW0NEQVRBWw0KICAgICAgICAgICAgICAgIGlmKHdpbmRvdy51c2VyQ2hyb21lSnNNb2QpIHJldHVybjsNCiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsNCg0KICAgICAgICAgICAgICAgIHZhciBjaHJvbWVGaWxlcyA9IEZpbGVVdGlscy5nZXREaXIoIlVDaHJtIiwgW10pLmRpcmVjdG9yeUVudHJpZXM7DQogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107DQogICAgICAgICAgICAgICAgdmFyIHNzcyA9IENjWydAbW96aWxsYS5vcmcvY29udGVudC9zdHlsZS1zaGVldC1zZXJ2aWNlOzEnXS5nZXRTZXJ2aWNlKENpLm5zSVN0eWxlU2hlZXRTZXJ2aWNlKTsNCg0KICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7DQogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlID0gY2hyb21lRmlsZXMuZ2V0TmV4dCgpLlF1ZXJ5SW50ZXJmYWNlKENpLm5zSUZpbGUpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgZmlsZVVSSSA9IFNlcnZpY2VzLmlvLm5ld0ZpbGVVUkkoZmlsZSk7DQoNCiAgICAgICAgICAgICAgICAgICAgaWYoZmlsZS5pc0ZpbGUoKSkgew0KICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJub25lIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL2pzIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL3h1bCI7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gImFnZW50c2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2Vyc2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLVwgIiArIGZpbGUubGVhZk5hbWUgKyAiICgiICsgdHlwZSArICIpIik7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJ5IHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFNlcnZpY2VzLnNjcmlwdGxvYWRlci5sb2FkU3ViU2NyaXB0V2l0aE9wdGlvbnMoZmlsZVVSSS5zcGVjLCB7dGFyZ2V0OiB3aW5kb3csIGlnbm9yZUNhY2hlOiB0cnVlfSk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHh1bEZpbGVzLnB1c2goZmlsZVVSSS5zcGVjKTsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZighc3NzLnNoZWV0UmVnaXN0ZXJlZChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYodHlwZSA9PSAidXNlcnNoZWV0Iikgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYoIXNzcy5zaGVldFJlZ2lzdGVyZWQoZmlsZVVSSSwgc3NzLlVTRVJfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IGNhdGNoKGUpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLS8gIiArIGZpbGUubGVhZk5hbWUpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAgICAgc2V0VGltZW91dChmdW5jdGlvbiBsb2FkWFVMKCkgew0KICAgICAgICAgICAgICAgICAgICBpZih4dWxGaWxlcy5sZW5ndGggPiAwKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsNCiAgICAgICAgICAgICAgICAgICAgICAgIHNldFRpbWVvdXQobG9hZFhVTCwgNSk7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9LCAwKTsNCiAgICAgICAgICAgIF1dPjwvY29uc3RydWN0b3I+DQogICAgICAgIDwvaW1wbGVtZW50YXRpb24+DQogICAgPC9iaW5kaW5nPg0KPC9iaW5kaW5ncz4=);
}

/* Change color of any tab with a changed title. 
Tab Flag ext. does this for pages loaded in diverted tabs*/
.tabbrowser-tab[titlechanged="true"]
{ color: #f45042 !important; 
 font-style: italic !important;
}

/* Change color of visited, inactive tabs */
.tabbrowser-tab[visited="true"] {
 color: #03f !important;
 font-style: normal !important;
}

/* Change color of selected tab */
.tabbrowser-tab[selected="true"] {
 color: inherit !important;
 font-style: normal !important;
}

userChrome.js - Updated for Firefox 69+

Credit goes to user abroix on https://www.camp-firefox.de/forum/thema/127999-double-click-reload-tab-funkioniert-nicht-mehr/

/* Allows you to double click on a tab to reload that tab */
(function() {
if (!window.gBrowser)
return;
gBrowser.tabContainer.addEventListener('dblclick', function(event) {
if (event.button != 0)
return;
let element = event.target.parentNode;
while (element) {
if (element.localName == 'tab') {
element.linkedBrowser.reload();
return;
};
element = element.parentNode;
};
});
})();

about:config modifications:

• browser.tabs.loadBookmarksInBackground;true

• browser.tabs.loadBookmarksInTabs;true

• browser.tabs.loadDivertedInBackground;true

• toolkit.legacyUserProfileCustomizations.stylesheets;true

In this case, I was able to get my doubleclick reload tab back, and see unviewed tabs in a different text color again. And I don’t need the TabMix Plus extension any more to do it. And I’m now using a supported browser again.

Finished look

You can easily see which tabs haven’t been looked at yet.

Ok, all done. Just wanted to share how I use Firefox. I hope that others will find it useful, but even if you don’t, I needed to write this down because right now it feels a little complicated set of steps to use just to get back the customizations I used to have. Also, I don’t want to forget how I did this in case another Firefox update breaks all this, which it very well could.

[Michiel Schuijer]

Thanks for the tips. I also miss TabMix Plus and made a donation (again) to the creator when it disappeared just because of all the years of service it did me.

I still miss the tab restore function which I find more extensive and user-friendly then the current built-in one and several other features like you described I find a big miss as well.

To be honest I can't be bothered to make changes in the `about:config` as this is per installed browser and not as friendly as I'd like and also difficult to remember so would mean I have to write down somewhere I did this, why and where, etc. so for me personally I don't find this a good solution and I simply try to live without some of those features until they are available once again through some other method.

By the way, I use OneTab to quickly move a bunch / all my tabs to just one list in a tab to conserve a lot of system resources by not having to have those tabs open. If I am in need to have an empty browser but don't want to loose my open tabs I can use that to save them all and restore the one-by-one or all-at-once.

Thanks for sharing your story and experience!

Kind regards

[Gelf]

Thanks for posting this! I'd given up on Quantum because of TMP and other addon restrictions.

So I stuck with Waterfox, but now it seems to have go-slows and hangs for me. I tried Vivaldi, but the strange link in new tab behaviour made it unusable for me.

I agree that having unread tabs a different colour is an absolute no-brainer and I cannot understand why others don't seem bothered!

So I am now running Firefox nightly with your tab colour tweak and I've also installed Paxmod for multi-row tabs - another must have for me.

I also added Auto-sort bookmarks - it looks like a great replacement for the old Sortplaces, which I sadly missed.

So I think I have a useable Firefox again!

Cheers!

[Adrian Stancescu]

Waterfox Classic has just died with the release of macOS 11 Big Sur.

I'm currently using Paxmod with the latest Firefox Dev release and while it worked great for a few days, it suddenly stopped scrolling my rows of tabs when using the trackpad gesture..

No other alternative in sight. Hopefully it's a bug that will be fixed soon..

[Gelf]

There are several css hacks that do similar to Paxmod. Paxmod stopped working for quite a while recently and while users waited for Numirias to find the time to update it I installed this one:

https://github.com/MrOtherGuy/firefox-csshacks 

It works very well and actually works concurrently with Paxmod. Perhaps it would solve your problem?

Lance

[Adrian Stancescu]

@Gelf I was wondering if it was just me where Paxmod was no longer allowing me to scroll the multiple rows of tabs..

Do you know what is the last version of Firefox Dev where Paxmod was actually working ok ?

[Gelf]

To be honest I am currently using MrOtherGuy css, though I do have paxmod 3.4 active as well, so my install is currently atypical.