+++
date = "2019-01-23T21:37:32+00:00"
publishdate = "2023-12-29T07:08:55+00:00"
title = "A Better Firefox Experience"
slug = "a-better-firefox-experience"
author = "Thedro"
tags = ["browsers","firefox","webdev"]
type = "posts"
summary =  "Firefox is my favorite internet browser. I've stuck with it for a long time.  Firefox's market share has dropped considerably, but that doesn't matter."
draft =  ""
syntax =  "1"
toc =  "1"
updated =  "2022-12-10"
+++

{{< image source="/images/a-better-firefox-experience.png" >}} Screenshot of my
Firefox Setup {{< /image >}}

Firefox is my {{< sidenote mark="favorite" set="left" >}}Including its
derivatives Pale Moon and Waterfox{{< /sidenote >}} Internet browser. I've stuck
with it for a long time. Firefox's [market share](https://netmarketshare.com)
has dropped considerably, but that doesn't
{{< sidenote mark="matter." set="right" >}}Chromium and by extension, Google
Chrome may be headed down the path of Internet Explorer.{{< /sidenote >}} Here's
my take on a better Firefox experience. This list includes my favorite addons
and interface {{< sidenote mark="tweaks." set="left" >}}My workflow changes
every so often, so this list might change with time.{{< /sidenote >}}

## 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
{{< sidenote mark="inside." set="right" >}}Recent versions of Firefox will need
`toolkit.legacyUserProfileCustomizations.stylesheets` set to `true` in the
[about:config](http://kb.mozillazine.org/About:config). {{< /sidenote >}}

```css
@-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.

```diff
@@ -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.](http://kb.mozillazine.org/Profile_folder_-_Firefox) Good, onto
the next step.

## Step 2: Install Sidebery

[Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) are what
tabs should be. Your tabs will now be displayed in a sidebar and assembled in a
{{< sidenote mark="tree" set="right" >}}Honourable mention:
[Tree Style Tab](https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/){{< /sidenote >}}
like format. Every link opened in a new tab will become a branch from the root.
Take a look at the image below.

{{< image source="/images/firefox-treestyle.png" >}} Tree Style Tabs
{{< /image >}}

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.

## Step 3: Open Links in a New Tab

Install the
[Open Link With New Tab](https://addons.mozilla.org/en-US/firefox/addon/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
{{< sidenote mark="search" set="left" >}}Or use the
[Add Custom Search Engine](https://addons.mozilla.org/en-US/firefox/addon/add-custom-search-engine/)
addon to make custom keywords or "bangs" and skip big search engines
entirely.{{< /sidenote >}} engine on the planet.
[Bang syntax](https://duckduckgo.com/bang) 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](https://addons.mozilla.org/en-US/firefox/addon/rsspreview/) 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](https://addons.mozilla.org/en-US/firefox/addon/tab-unloader-we/)
to unload tabs that are {{< sidenote mark="inactive." set="right" >}}
Apparently,
[Firefox 67.0](https://www.mozilla.org/en-US/firefox/67.0/releasenotes/) now
suspends unused tabs.{{< /sidenote >}} 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](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/)
is a necessary addon for internet browsing sanity.

## Step 8: Disable JavaScript on Demand

[Disable JavaScript](https://addons.mozilla.org/en-US/firefox/addon/disable-javascript/)
is a wonderful addon that allows you to disable JavaScript on a per site
{{< sidenote mark="basis." set="right" >}}[NoScript](https://addons.mozilla.org/en-US/firefox/addon/noscript/)
for the adepts among us.{{< /sidenote >}} This makes a lot of sites with lethal
and browser crashing JavaScript behave.

## Step 9: Tab Sessions

[Tab Session Manager](https://addons.mozilla.org/en-US/firefox/addon/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.

## Step 10: Tab Search

[Tab Search](https://addons.mozilla.org/en-US/firefox/addon/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` {{< sidenote mark="page" set="right" >}} The
[about:config](http://kb.mozillazine.org/About:config) page is a more efficient
way of changing multiple preferences in Firefox.{{< /sidenote >}} in Firefox and
set the following preferences.

```cfg
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`.

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

Firefox `75` introduces the {{< sidenote mark="horrific" set="left" >}}Death by
a thousand cuts.{{< /sidenote >}} expanding
{{< sideimage mark="address" set="right" source="/images/firefox-75-urlbar.png" >}}Expanding
address bar{{< /sideimage >}} bar. You can disable it temporarily by setting the
following preferences.

```cfg
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](https://github.com/WesleyBranton/Remove-Firefox-Megabar#readme)
to {{< sidenote mark="reduce" set="left" >}}If you're wondering where these
`css` directives come from, visit `chrome://browser/content/browser.xhtml` and
open the developer tools.{{< /sidenote >}} the expanding effect permanently in
`chrome/userChrome.css`.

```css
/*
 * Reduce expanding urlbar.
 * Source: https://github.com/WesleyBranton/Remove-Firefox-Megabar#readme
 */
@-moz-document url(chrome://browser/content/browser.xhtml) {
  #urlbar[breakout][breakout-extend] > #urlbar-input-container,
  #urlbar-input-container {
    height: 26px !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.