Clean Firefox User Interface with Vertical Tabs

I spend a lot of time in Firefox. This post is a summary of how I configure it for productivity and efficiency. I am maintaining this configuration across three macOS computers, writing down the configuration helps me to make this consistent. As always: highly subjective and subject to personal taste.

Main ingredients for my "less is more" configuration:

This is the result of the configuration from this post:

Firefox Screenshot

This configuration removes the Firefox title bar, including the window modification buttons (red, yellow and green dots on macOS). This is on purpose. I run Firefox nearly always with a single maximized window, so the window modification buttons are not really needed. If needed, I close a Firefox window via the menu (File → Close Window), same with minimizing a Firefox window.

Firefox theme is Nord Polar Night.

Install and Configure Sidebery

In Firefox, go to the Sidebery Addon web page and install the add-on.

Sidebery has a lot of configuration options. Most of the defaults are fine and do not need tweaking. Starting from default settings, in Sidebery settings adjust this:

Settings - General:

Settings - Navigation bar:

Settings - Tabs:

Keybindings:

Styles editor - Tabs:

.Tab[data-discarded="true"] .body {
    opacity: 1;
}
.Tab[data-discarded="true"] > .body > .fav,
.Tab[data-discarded="true"] > .body > .t-box {
    opacity: 1;
}

Configure Firefox

Hide Firefox Tab Bar, Title Bar and Sidebar Header

Hiding the Firefox tab and title bars is not possible through configuration, this needs a custom userChrome.css file.

This userChrome produces an URL bar without macOS window controls. Closing and minimizing a window is still possible via menu commands. This is mainly suited for use cases where a single Firefox window is the main center of work.

userChrome.css

/* hides the native tab bar */
#TabsToolbar {
  visibility: collapse;
}

/* hides the title bar */
#titlebar {
  visibility: collapse;
}

/* hides the sidebar header */
#sidebar-header {
  visibility: collapse !important;
} 

This userChrome is an alternative. It produces an URL bar with macOS window controls. The window controls are an overlay on top of the URL bar. The URL bar contents (icons and text boxes) can be prepended with a Flexible Space, to ensure that the window controls do not hover over them.

userChrome.css

/* hides the native tab bar */
#TabsToolbar {
  visibility: collapse;
}

/* shows the window controls and positions them on the left side of the URL bar */
#TabsToolbar .titlebar-buttonbox-container {
    visibility: visible !important;
    position: absolute;
    margin-top: 12px !important;
}

/* hides the title bar */
#titlebar {
  visibility: collapse;
}

/* hides the sidebar header */
#sidebar-header {
  visibility: collapse !important;
} 

Done. Enjoy a clean Firefox.