Skip to main content

Hide the Tab Bar

DISCLAIMER: The information in this guide is provided "as is" without any guarantee of completeness, accuracy, timeliness, or of the results obtained from the use of this information. The author assumes no responsibility for any errors or omissions in the content. It is meant for general information purposes only and should not be used as a substitute for professional advice. The author is not responsible for any damages caused by the use of this information. By using this guide, you agree to hold the author harmless from any and all claims, damages, or expenses that may arise from your use of the information.

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

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

Apply Custom CSS

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

    If needed, all profiles can be managed via about:profiles.


  2. In Windows File Explorer, navigate to the Root Directly path.

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


  3. Create a chrome folder.

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


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

    1. 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.
This is a supporting file used by other stylesheets and is mostly
unnecessary if window titlebar is enabled.

Should preferably be imported before other stylesheets, because some values in this style are deliberately overridden by other styles.
*/

/* Modify these values to match your preferences
These reserve extra space 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-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: 0;
  }
}

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

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

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-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{ 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;
  }
}
    2. 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 > .titlebar-buttonbox-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),var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor)), var(--lwt-additional-images,none), var(--lwt-header-image, none);
  mask-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)
}
    3. 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; 
}
  5. 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;
}
  6. 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

  1. In the toolbar, Right-click on the pinned Tree Style Tab icon and select Manage Extension:

    image.png

  2. Select the Options tab:

    image.png

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

    image.png

    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

Sources

KB Change/Issue Log

yyyy/mm/dd - Title

Issue

N/A

Solution

N/A

KB Meta

Page Includes @9#bkmrk-callout-danger-NoResponsibilityDisclaimer-5wod5ufe
Back to top