Easily hide normal tab bar and display tree style tab

This page summarizes the projects mentioned and recommended in the original post on /r/FirefoxCSS

Our great sponsors
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • SaaSHub - Software Alternatives and Reviews
  • firefox-csshacks

    Collection of userstyles affecting the browser

  • /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Hides tabs toolbar */ /* For OSX use hide_tabs_toolbar_osx.css instead */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it */ @supports -moz-bool-pref("userChrome.toggleTabsOrSidebar.state") { :root { --uc-toolbar-height: 32px; } :root:not([uidensity="compact"]) { --uc-toolbar-height: 38px; } #TabsToolbar { visibility: collapse !important; } :root:not([inFullscreen]) #nav-bar { margin-top: calc(0px - var(--uc-toolbar-height)); } #toolbar-menubar { min-height: unset !important; height: var(--uc-toolbar-height) !important; position: relative; } #main-menubar { -moz-box-flex: 1; background-color: var(--toolbar-bgcolor, --toolbar-non-lwt-bgcolor); background-clip: padding-box; border-right: 30px solid transparent; border-image: linear-gradient( to left, transparent, var(--toolbar-bgcolor, --toolbar-non-lwt-bgcolor) 30px ) 20 / 30px; } #toolbar-menubar:not([inactive]) { z-index: 2; } #toolbar-menubar[inactive] > #menubar-items { opacity: 0; pointer-events: none; margin-left: var(--uc-window-drag-space-width, 0px); } }

  • firefox-sidebery-minimal-style

    Discontinued Universal minimal style for Firefox and Sidebery

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • uc.css.js

    A dark indigo CSS theme for Firefox and a large collection of privileged scripts to add new buttons, menus, and behaviors and eliminate nuisances. The theme is similar to other userChrome stylesheets, but it's intended for use with an autoconfig loader like fx-autoconfig, since it uses JavaScript to implement its more functional features.

  • just add a user script that makes a toolbar button or a hotkey which, when activated, toggles a pref. that way it's persistent through session restores. you'll need to go to the customize menu and add it to your toolbar of course. I set one up that should do what you need, try downloading and installing this (if you don't know how, there are instructions in the main page's readme, just click uc.css.js in the title at the top)

  • firefox-scripts

    userChromeJS / autoconfig.js and extensions

  • You will most probably need userscripts. I use this single movable minMaxClose button. So I modified the autohide_tabbar userscript to also move the minMaxClose button to the navbar/urlbar when the TST is on and tabbar is collapsed, and move it to the tabbar when the TST is off. You can toggle between the two setups, with the TST button or F1 key. The result looks like this. The small problem is when there are multiple windows, and you toggle TST for one window, the minMaxClose button is moved to the navbar for all the windows instead of just the active one. I don't know how to solve it, but it doesn't bother me much.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts