A Better Firefox Experience

Table of Contents
Screenshot of my Firefox Setup

Firefox is my Including its derivatives Pale Moon and Waterfox internet browser. I’ve stuck with it for a long time. Firefox’s market share has dropped considerably, but that doesn’t Chromium and by extension, Google Chrome may be headed down the path of Internet Explorer. Here’s my take on a better Firefox experience. This list includes my favorite addons and interface My workflow changes every so often, so this list might change with time.

Step 1: Hide the tab bar

Wait what? Yes. The tab bar interface is somewhat of an anti-pattern. It’s extremely distracting, unproductive, and usually results in 200+ open tabs. In your Firefox profile directory create a folder named chrome, then inside that folder create the file userChrome.css and paste the following code Recent versions of Firefox will need toolkit.legacyUserProfileCustomizations.stylesheets set to true in the about:config. 

@-moz-document url("chrome://browser/content/browser.xul") {
  #TabsToolbar {
    visibility: collapse !important;
    margin-bottom: 21px !important;
  }
}

On Firefox 69 and later the following changes are needed.

@@ -1,4 +1,4 @@
-@-moz-document url("chrome://browser/content/browser.xul") {
+@-moz-document url("chrome://browser/content/browser.xhtml") {
   #TabsToolbar {
     visibility: collapse !important;
     margin-bottom: 21px !important;

Clueless about the location of your Firefox profile? Read this helpful guide. Good, onto the next step.

Step 2: Install Sidebery

Sidebery are what tabs should be. Your tabs will now be displayed in a sidebar and assembled in a Honourable mention: Tree Style Tab like format. Every link opened in a new tab will become a branch from the root. Take a look at the image below.

Tree Style Tabs

See how the tabs naturally form many branches related to the root topic Elm? This is a visually succinct and useful way of displaying tabs. Let’s make that new tab linking behavior the default.

Install the Open Link With New Tab addon and set it to open a new tab only when the target link is different from the website you are currently browsing. This should be the second option in its settings. The tree style tabs can now build up with very little friction.

Step 4: Make DuckDuckGo the Default

Congratulations, you now have direct access to almost every Or use the Add Custom Search Engine addon to make custom keywords or “bangs” and skip big search engines entirely. engine on the planet. Bang syntax allows you to search most if not all search engines directly from DuckDuckGo.

Step 5: Bring back RSS

RSS is too important to deprecate. Install RSS Preview to bring back one of Firefox’s most important features — knowing whether a website has a RSS Feed.

Step 6: Unload Inactive Tabs

Install Tab Unloader to unload tabs that are Apparently, Firefox 67.0 now suspends unused tabs. This will save lots of memory. It’s a clever addon that is smart enough to know that tabs with active content should not be considered inactive.

Step 7: Destroy Resource Abuse with uBlock Origin

Resource abuse means ads, banners, popups, and all manner of relentless abuse websites shove down the tube. uBlock Origin is a necessary addon for internet browsing sanity.

Step 8: Disable JavaScript on Demand

Disable JavaScript is a wonderful addon that allows you to disable JavaScript on a per site NoScript for the adepts among us. This makes a lot of sites with lethal and browser crashing JavaScript behave.

Step 9: Tab Sessions

Tab Session Manager is an addon that extends the tab saving functionality of Firefox. It can serve as a simple way to backup browsing sessions.

Tab Search is a good addition that allows you to search all open tabs. For persons with an insane amount of tabs, this will save you much pain and frustration.

Step 11: Disable URL Bar Suggestions

Suggestions are nice until they aren’t. To disable this annoyance, we’ll visit the about:config The about:config page is a more efficient way of changing multiple preferences in Firefox. in Firefox and set the following preferences.

browser.urlbar.maxRichResults 0
browser.urlbar.suggest.history false
browser.urlbar.suggest.bookmark false
browser.urlbar.suggest.openpage false
browser.urlbar.suggest.searches false
browser.urlbar.searchSuggestionsChoice false
browser.urlbar.timesBeforeHidingSuggestionsHint 0
browser.search.suggest.enabled false

Then hide what’s left of the URL bar suggestions in chrome/userChrome.css.

/* Hide autocomplete results dropdown */
.urlbarView {
  display: none !important;
}

Firefox 75 introduces the Death by a thousand cuts. expanding Expanding address bar Expanding address bar bar. You can disable it temporarily by setting the following preferences.

browser.urlbar.update1 false
browser.urlbar.update1.interventions false
browser.urlbar.update1.searchTips false
browser.urlbar.update1.view.stripHttps false
browser.urlbar.update2.expandTextOnFocus false

You can also opt to If you’re wondering where these css directives come from, visit chrome://browser/content/browser.xhtml and open the developer tools. the expanding effect permanently in chrome/userChrome.css.

/*
 * Reduce expanding urlbar.
 * Source: https://raw.githubusercontent.com/WesleyBranton/userChrome.css-Customizations/master/css/remove_megabar.css
 */
@-moz-document url(chrome://browser/content/browser.xhtml) {
  #urlbar[breakout][breakout-extend] > #urlbar-input-container,
  #urlbar-input-container {
      height: var(--urlbar-height) !important;
      padding-block: 0px !important;
      padding-inline: 0px !important;
      transition: none !important;
      border-radius: var(--toolbarbutton-border-radius) !important;
  }

  #urlbar[breakout][breakout-extend] {
      top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
      left: 0 !important;
      width: 100% !important;
  }

  #urlbar[breakout][breakout-extend] > #urlbar-input-container {
      border: 1px solid var(--toolbar-field-focus-border-color) !important;
  }

  #urlbar[breakout][breakout-extend][open] > #urlbar-input-container {
      border-bottom: 1px solid transparent !important;
      border-radius: var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 0 !important;
  }
}

Conclusion

There’s much more that can be added, but this is a good start to streamlining your Firefox browsing work flow.