I wrote in a previous note ( You’ve heard of “Browser Wars” this is my “Browser Woes” (An Aspie Brain Coping With Change for Change’s Sake) about my battle with change for change’s sake when it comes to browsers / FireFox specifically. I won’t rehash that here. But what I will do here is tell you the “must have” changes I need to make to tame that wild FireFox into a friendly companion.

Must-Have Extensions / Add-ons

NoScript

For my main browser, I MUST have this.. I may dislike Chrome but it has its uses.. when I run into a site that needs a bunch of scripting that is too complex to sort out with NoScript, if I trust the site, I’ll use Chrome to open it. I also use Chrome to open YouTube and other places where I actually want video

The Internet is dangerous – so many web sites end up with malicious code .. sometimes embedded in ads (see uBlock Origin below for more on that) and sometimes you just accidentally click on a link to a deliberately bad site (or typo a link – do not go to micorsfot dot com for instance… )

NoScript disables all scripts on a page and lets you manually pick which to allow. This is pretty heady stuff.. it’s NOT EASY these days to see the 30+ script sources on a given page and determine which are OK to allow and which should stay blocked for maximum usability without ads or over aggressive tracking etc.

Usage note: the interface in Quantum is a bit unintuitive.. by default, all scripts are blocked. you visit a site and see all the script sources and you have a few choices. From left to right they are:

default (deny) | Temp: Trusted (this session Only) | Trusted (Always trust) | Untrusted (Always deny) | Custom When I’m testing out a site, I use temp trusted.. I only click trusted (always) if I have determined a particular script url is trustworthy

So, the process takes a bit of tweaking – most sites just don’t look/work right at the default level of untrusted. I will (if I trust the site) allow the site itself and then see if there are dependencies I can trust (jquery.com, GoogleTags, GoogleAssets, cloudflare instances etc) but I NEVER allow known advertisers (ads.anything, doubleclick.net, GoogleAdServices, etc..) and I am particularly suspicious of other stuff I have never seen before.

uBlock Origin (or AdBlock Plus)

Simply put, I need an Ad blocker. I used to use AdBlock Plus but they got kind of “sold out” ish in their behavior, taking money from advertisers who “met their standards” to not block… however, my whole point in blocking ads is that I don’t trust any advertisers. I’ve seen too many “legit” ad services get scammed into delivering ransomware and other malicious crap.. so NOPE.

uBlock Origin is my preferred Ad Blocker now. Do NOT confuse this with uBlock which was taken over by another dev and exploited for profit by the person who took it over.. the original uBlock author forked their pre-takeover version as uBlock Origin.

Disconnect for Facebook

It’s ironic that I moved to FireFox from PaleMoon in part because of PaleMoon not working correctly with Facebook.. and yet here I am using an add-on that disconnects one from Facebook. Let me tell you why I use this.

Facebook is “free” to use but like the axiom goes: when the product is free, the payment is often your privacy/data. Facebook is all about advertising, tracking and selling/curating your data. What a lot of users don’t realize is that part of how they do this is making sure that “partner websites” put bits of script in them pointing back to Facebook. The convenience can be that you log in to a site with your Facebook account and it knows you / links back. However I personally find the privacy implications to be .. horrific. I generally block facebook.net scripts on other (non Facebook) sites, but still, I just generally do not want the hassle of constantly having to log out of FB every time I want to browse without being connected back to my FB profile.

Enter “Disconnect for Facebook” this extension ensures that while I am directly using Facebook, it works as intended, but it stops Facebook and “partner sites” from exchanging data in ways I find unacceptable. Mostly, I just install this and forget about it. I’ve rarely if ever wanted/needed to disable it for a specific site, though it is possible if you have a site you’re explicitly using FB login to access.

FlashBlock (Plus)

I used to use this to block videos from playing. This is because before HTML5 video, there were only a few options for video on the web – MS Silverlight and Adobe (formerly Macromedia) Flash. With HTML5 video now, there’s a way for video to play that doesn’t use flash and this add-on does not block them (there are options for blocking all video, but my goal was more specifically flash-related.. read on).

Flash has (in my opinion) a lot of security concerns so I prefer to block it unless I EXPLICITLY trust the site in question. FlashBlock (Plus) does exactly what I want it to – blocks Flash from playing unless I explicitly allow it on a site. The extension has a low rating because folks seem to think it’s going to block all video… that’s not its purpose.

Features I Need / Used to get from Add-ons

So, I’ve got those add-ons but there are some things that I need that are either original FireFox features that are no longer present in Quantum or were from Add-ons which are not available for Quantum

TabMix Plus

TabMix Plus was an add-on which collected a lot of really useful features related to tabbed browsing into one. It had a “session manager” to also deal with restoring tabs when restarting but I always disabled that – I always like my browser to start fresh.

Sadly, when Quantum came out, it really broke this add-on in many many ways. The author seems to have gotten discouraged that so many API calls they relied upon were not available. It’s possible they’ll get it working and I’ll happily go back but in the meantime I found workarounds to my MUST HAVE items:

Open URLs Typed in Address Bar in a New Tab I don’t know about you, but when I type a new URL, I want it in a new tab. I can’t tell you how many times I’d be on a given site and need to look up something else and type in a new URL or search and realize I’d just left the site I was on. Yeah I can go back in history but.. COME ON this is literally one of the best things about tabbed browser interfaces. How to fix:

  • Go to the url about:config
  • Search for: browser.urlbar.openintab
  • set it to true

Open URLs From Bookmarks in a New Tab Similar to the address bar… sometimes I would be on a site and need to go to another to look something up.. I really HATE that the default behavior of FireFox is to just use the current tab when opening typed urls and bookmarks.. So to fix it so bookmarks always open in new tabs as well:

  • Go to the url about: config
  • Search for: browser.tabs.loadBookmarksInTabs
  • Set it to true

Use Blank Page for New Tabs / Home I hate the default “new tab” page – it’s got ads hidden as “suggested sites” and these don’t get blocked by my ad blockers. Also, I want empty/clean content till I am ready for it. TabMix Plus offered the ability to set new tabs and home page to blanks. It turns out this is actually now just a base setting in the browser. How to get this:

  • Go to the URL about:preferences#home
  • Find the setting homepage and new windows:
  • set it to blank page
  • Find the setting New Tabs:
  • set it to blank page

NOTE: in about:config there are ways to control the new tab page and maybe you’d prefer that – I like blank but you can search for browser.newtabpage.activity-stream and see the many options you have to really lock that down

Open Links in Tabs Instead of New Windows Another annoyance: I have a tabbed browser. This means I do NOT want new windows opening up .. use new tabs FFS. Luckily this is now a base app configuration.. which is not on by default. To fix it:

  • Go to the URL about:preferences
  • Under Tabs: Check the option for Open links in tabs instead of new windows

Prevent Closing of Last Tab from Closing FireFox Another small annoyance: when you close the last open tab, FireFox default behavior is to exit. I want to just go back to empty/blank browser. To fix this:

  • Go to the URL about:config
  • Search for: browser.tabs.closeWindowWithLastTab
  • Set it to false

Place Browser Tabs Underneath the Address Bar This is a small pet peeve but I really want the top-to-bottom order of my browser to be

  1. Menu bar
  2. Toolbar with Url bar and search bar, navigation tools and controls for extensions
  3. Favorites bar
  4. Tab bar (with multiple rows of tabs
  5. Main browser window
  6. Status bar

The old Firefox (pre v 28) and PaleMoon both have this.. there is no add-on that can do it that I’m aware of. However, there’s a really useful feature of FirefoxQuantum called “user chrome” and with the correct User Chrome settings, this is doable

  • Go to the url about:support
  • find the Profile Folder listing and click the Open Folder button
  • In that folder, look to see if there’s a folder named “chrome”
    • If not, Create it
    • Inside that folder, create a file named userChrome.css
  • Edit userChrome.css
  • Paste in the following CSS code
/* ************************************************************************** */
/* TABS BELOW BOOKMARKS   https://support.mozilla.org/en-US/questions/1207891 */
/* ************************************************************************** */

/* Tab bar below Navigation & Bookmarks Toolbars
   For Firefox 57-64 -- No longer works in Firefox 65
   See https://www.userchrome.org/what-is-userchrome-css.html#movetabbar
*/
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Vertical space for min/max/close buttons above the main toolbar */
/* On Mac, if not showing title bar, allow 20 pixels */
#main-window[tabsintitlebar="true"]:not([inFullscreen="true"]) #toolbar-menubar:not([accesskey]) ~  #nav-bar {
  margin-top: 20px !important;
}
/* On Windows, if not showing title bar or menu bar, allow 20 pixels */
#main-window[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
  margin-top: 20px !important; /* More px may be better on Win10 */
}
/* Sorry, Linux users, I don't know the best approach for you! */

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar,
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}

/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}
  • Save userChrome.css
  • Restart FireFox

This gets you the tab bar underneath the browser favorites bar

Tab Block Multiple Rows Another minor thing: the tab bar on FireFox by default is one row and any overflow kind of shuffles off to the right. I really do have a LOT of tabs open often …

This is how my browser currently looks with both tabs below bookmarks and multi rows – I told you I kept a lot of tabs open. This is just the tabs while I was editing this article.

This is another thing that is not possible currently with add-ons or built in settings, but can be accomplished through userChrome.css. So, here’s how:

  • Go to the url about:support
  • find the Profile Folder listing and click the Open Folder button
  • In that folder, look to see if there’s a folder named “chrome”
    • If not, Create it
    • Inside that folder, create a file named userChrome.css
  • Edit userChrome.css
  • Paste in the following CSS code
/* ************************************************************************** */
/* MULTIPLE ROWS OF TABS   https://wrw.is/multiple-tab-rows-in-firefox/       */
/* ************************************************************************** */
.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:35px;}
.tabbrowser-tab,.tab-background {height:var(--tab-min-height);}
.tab-stack {width: 100%;}
#tabbrowser-tabs .scrollbox-innerbox {display: flex;flex-wrap: wrap;}
#tabbrowser-tabs .arrowscrollbox-scrollbox {overflow: visible;display: block;}
#titlebar,#titlebar-buttonbox{height:var(--tab-min-height) !important;}
#titlebar{margin-bottom:calc(var(--tab-min-height)*-1) !important;}
#main-window[sizemode="maximized"] #titlebar{margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;}
#main-window[sizemode="maximized"] #TabsToolbar{margin-left:var(--tab-min-height);}
#titlebar:active{margin-bottom:0 !important;}
#titlebar:active #titlebar-content{margin-bottom:var(--tab-min-height) !important;}
#tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-but
  • Save userChrome.css
  • Restart FireFox

Now, your tabs will open in a big huge block with up to 3 rows as needed.

Close All Tabs Button Yet another thing TabMix Plus offered. In this case, we can get this from an add-on though.

  • Install Close All Tabs Button extension
  • (optional) I like mine to appear at the right of the tab bar. To do this right click on an empty space in the toolbar and choose customize. You can then drag/drop the button to where you want it

Status-4-evar

The extension Status-4-evar was needed after some random FireFox change removed the status bar at the bottom of the browser. The status bar is super useful – it’s where URLs preview when you mouse over them .. this is super helpful in sanity checking before you click a link.

This is another one that can be fixed using userChrome.css:

  • Go to the url about:support
  • find the Profile Folder listing and click the Open Folder button
  • In that folder, look to see if there’s a folder named “chrome”
    • If not, Create it
    • Inside that folder, create a file named userChrome.css
  • Edit userChrome.css
  • Paste in the following CSS code
/* ************************************************************************** */
/* STATUS BAR   http://www.optimiced.com/en/2018/02/11/restore-status-bar-in-firefox-quantum/ */
/* http://www.optimiced.com/wp-uploads/2018/06/userChromeLight61.css */
/* ************************************************************************** */

/*
    Display the status bar in Firefox Quantum (version 61+)
    permanently at the bottom of the browser window.
    Code below works best for the Light Firefox theme and is based on:
    https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
    This userChrome.css file was last modified on: 28-Jun-2018.
    Tested to work with Firefox 61 on Windows.
    Related blog post: http://www.optimiced.com/en/?p=1727
*/

#browser-bottombox { height: 20px; border-top: solid 1px #CCC; }

.browserContainer>#statuspanel { left: 4px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; }
.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0px !important; }

window[inFullscreen="true"] #browser-bottombox { display:none !important; }
window[inFullscreen="true"] .browserContainer>#statuspanel[type="overLink"] #statuspanel-label { display:none !important; }
  • Save userChrome.css
  • Restart FireFox

This puts back a status bar

Conclusion

You may not be as resistant to change as I am.. or you may not be bothered by some of the behaviors I was bothered by, but I hope this has served as a useful guide to getting FireFox Quantum to behave for those of you who either liked the old original layout or who have become disappointed with PaleMoon

~Tananda

UPDATE 2019-01-23: fixed up link in opening graph and spelling
UPDATE 2019-03-31: de-facebooked the links (originally I posted this as a FB note.. )