Hide the Tab Bar

Introduction

Hiding the Mozilla Firefox tab bar is useful when used in conjunction with the Tree Style Tabs plugin. The following changes heavily rely on custom CSS from MrOtherGuy/firefox-csshacks. This changes include:

Create a placeholder for the Firefox window controls (e.g. minimize, maximize, and close buttons) using window_control_placeholder_support.css.
Hide the Firfox horizontal tabs toolbar, since we are now relying on the Tree Style Tabs addon using hide_tabs_toolbar.css.
Auto hide the Firefox sidebar using autohide_sidebar.css.
Combining the above three bullet points + hiding the sidebar title using userChrome.css.

Requirements

Instructions

Enable Custom CSS

Visit about:config.
Search toolkit.legacyUserProfileCustomizations.stylesheets.
Toggle it, making the value true.

Apply Custom CSS

In Firefox, navigate to about:support. Take note of the Profile Folder path.

If needed, all profiles can be managed via about:profiles.
In Windows File Explorer, navigate to the Root Directly path.

e.g. C:\Users\<UserName>\AppData\Roaming\Mozilla\Firefox\Profiles\<YourFirefoxProfile>\.
Create a chrome folder.

e.g. C:\Users\<UserName>\AppData\Roaming\Mozilla\Firefox\Profiles\<YourFirefoxProfile>\chrome.

In the chrome folder, create or download the following CSS files:

Create window_control_placeholder_support.css. Use the following contents:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_placeholder_support.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/*
Creates placeholders for window controls */
/*controls.
This is a supporting file used by other stylesheets */

/* This stylesheetand is pretty muchmostly
unnecessary if window titlebar is enabledenabled.

*/

/* This file shouldShould preferably be imported before other stylesheetsstylesheets, */because /*some Defaultsvalues forin windowthis controlsstyle onare RIGHTdeliberately sideoverridden ofby theother windowstyles.
*/

/* Modify these values to match your preferences
*/These :root:is([tabsintitlebar],reserve [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
  /* Extraextra space reserved on both sides of the nav-bar to be able to drag the window */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 30px; /* left side*/
  --uc-window-drag-space-post: 30px; /* right side*/
}

:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

/* Default width - used on Windows10+ */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px;
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8){
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}
/* On linux set width based on number of caption buttons.
One button */
@media (-moz-gtk-csd-available)minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 28px;
  }
}
/* Two buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
       (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
       (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 56px;
  }
}
/* Three buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}

@media (-moz-platform: macos){
  :root:is([tabsintitlebar],) {
    --uc-window-control-width: 72px;
  }
  :root:is([tabsintitlebar][sizemode="fullscreen"]) {
    --uc-window-control-width: 72px;0;
  }
}

.titlebar-buttonbox, #window-controls{buttonbox{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }

:root[sizemode="fullscreen"] #navigator-toolbox { position: relative; }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{child{
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls{child{ height: 32px }

#nav-bar{
  border-inline: var(--uc-window-drag-space-pre,0px) solid transparent;
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
  background-clip: border-box !important;
}

/* Rules for window controls on left layout */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  :root[tabsintitlebar="true"] #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls{child{ right: unset }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}

/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
  :root[tabsintitlebar="true"] #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls{ right: unset; }
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}

Create hide_tabs_toolbar.css. Use the following contents:

/* 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 */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }
#titlebar{
  will-change: unset !important;
  transition: none !important;
  opacity: 1 !important;
}
#TabsToolbar{ visibility: collapse !important }
:root[sizemode="fullscreen"] #titlebar{ position: relative }

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){container{
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  flex-grow: 1;
  align-items: stretch;
  background-attachment: scroll, fixed, fixed;
  background-position: 0 0, var(--lwt-background-alignment), right top;
  background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat;
  background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto;
  padding-right: 20px;
}
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar{
  background-color: var(--lwt-accent-color);
  background-image: linear-gradient(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)var(--lwt-additional-images,none), 20var(--lwt-header-image, /none);
  30pxmask-image: linear-gradient(to left, transparent, black 20px);
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}

Create autohide_sidebar.css. Use the following contents:

Lines 8, 9, 10 have been modified to my liking.

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box{
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 450px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.3s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}

#sidebar-box[positionend]{ direction: rtl }
#sidebar-box[positionend] > *{ direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important; 
}

In the chrome folder, create userChrome.css. Use the following contents:

@import url(window_control_placeholder_support.css);
@import url(hide_tabs_toolbar.css);
@import url(autohide_sidebar.css);

#sidebar-header {
  visibility: collapse !important;
}

Exit and relaunch Firefox to apply the changes.

Customization

Sidebery

Custom CSS

In the Sidebery Settings, add the following CSS to the "Styles editor".

#root.root {--tabs-lvl-opacity: 0.66;}
#root.root {--tabs-activated-bg: DeepSkyBlue;}
#root.root {--tabs-activated-fg: black;}

Tree Style Tabs

Spaced and Colored Tab Groups

In the toolbar, Right-click on the pinned Tree Style Tab icon and select Manage Extension:
Select the Options tab:

Scroll down to the Advanced section and locate Extra style rules for contents provided by Tree Style Tab:

Remove all existing CSS and paste the following:

/* ---
  Config: moz-extension://61148767-1029-7e4d-810c-8847305901bd/options/options.html
  Docs: https://github.com/piroor/treestyletab/wiki/How-to-inspect-tree-of-tabs
--- */


#tabbar {
  background: linear-gradient(to bottom, #342735 0%, #4B5670 50%);
}


/* ---
 Tab Styling
--- */
.tab tab-item-substance {
  background: rgba(0,0,0, .5);
  border-color: rgba(255,255,255,.3);
}

/* Active tabs */
.tab.active {
  background: rgba(0,0,0,.1)
}

.tab.active[data-level="0"]:not([data-child-ids]) {
  background: rgba(255,255,255,.2);
}

.tab.active tab-item-substance {
  background: transparent;
}

/* Hovered tabs */
.tab tab-item-substance {
  transition: 100ms ease background;
}

.tab:hover tab-item-substance {
  background: rgba(255,255,255,.2);
  transition: unset;
}


/* ---
 Fix upper and bottom borders between tabs
--- */
.tab:not(.collapsed) {
  margin-top: -1px;
  margin-bottom: 0;
}


/* ---
 Add spacing around tab groups
--- */
.tab:not([data-level="0"]) + .tab[data-level="0"],
.tab[data-level="0"][data-child-ids] {
  margin: 12px 0 0;
}

/* Not if very first tab */
.tab:first-child {
  margin-top: 0 !important;
}


/* ---
 Add tab group indent coloring
--- */
.tab[data-level="0"]:before {
  content: "";
  width: 100vw;
  height: 60vh;
  background: #342735;
  position: absolute;
  top: -12px;
  left: 0;
  z-index: -1;
}

.tab[data-level="0"]:after {
  content: "";
  width: 100vw;
  height: 60vh;
  background: linear-gradient(to bottom, #342735 0%, #4B5670 50%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Needed to clean bg if last tab is not level 0 */
.after-tabs > .vbox:after {
  content: "";
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #342735 0%, #4B5670 50%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Color based on parent last id digit */
.tab[data-level="0"][data-child-ids][id$="1"]:after { background: #c62828; }
.tab[data-level="0"][data-child-ids][id$="2"]:after { background: #ef6c00; }
.tab[data-level="0"][data-child-ids][id$="3"]:after { background: #f9a825; }
.tab[data-level="0"][data-child-ids][id$="4"]:after { background: #2e7d32; }
.tab[data-level="0"][data-child-ids][id$="5"]:after { background: #0097a7; }
.tab[data-level="0"][data-child-ids][id$="6"]:after { background: #1565c0; }
.tab[data-level="0"][data-child-ids][id$="7"]:after { background: #673ab7; }
.tab[data-level="0"][data-child-ids][id$="8"]:after { background: #ec407a; }
.tab[data-level="0"][data-child-ids][id$="9"]:after { background: #8d6e63; }
.tab[data-level="0"][data-child-ids][id$="0"]:after { background: #78909c; }

SOURCE: https://gist.github.com/FabulousCupcake/9e74a35f4ef282cf90e37e11b260f6f5

Hide the Tab Bar

Introduction

Requirements

Instructions

Enable Custom CSS

Apply Custom CSS

Customization

Sidebery

Custom CSS

Tree Style Tabs

Spaced and Colored Tab Groups

Sources

KB Change/Issue Log

yyyy/mm/dd - Title

Issue

Solution

KB Meta