80ROkWOC4j/tree_style_tab_firefox.md

## tree_style_tab_firefox.md

      
    Raw
  

              tree_style_tab_firefox.md
            
          
    This guide is for Windows.

First, right click title bar and turn on the Menu bar, or turn it on the Menu bar in Firefox.

Since Firefox Quantum, the window controller has been integrated into the tab bar, so this method uses the window controller that comes up when you activate the Menu bar.

Or, you can place extra space on top left corner and move buttons to there.
AddOn:

https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/


Go to about:support in your address bar
Look for your profiles directory and open it:


Create a file named chrome/userChrome.css in your profile directory:

mkdir chrome && touch chrome/userChrome.css

Populate the following css code:

#TabsToolbar {
  visibility: collapse;
}
#nav-bar {
  /* This works on qhd(100% hidpi) and 4k(150%) screen */
  margin-top: -40px;
  margin-right: 138px; /* 140px is ok */
}
#toolbar-menubar {
  height: 40px;
  margin-left: -100vw;
}
If you need menu bar, change margin or turn on the Title Bar and just disable TabsToolbar
#TabsToolbar {
  visibility: collapse;
}
Or, if you use Lepton(aka Firefox-UI-Fix), try below
/** Import Lepton stylesheet (Chrome) *****************************************/
@import url("css/leptonChrome.css");


/** Add your custom styles below **********************************************/

/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */
/*
.editBMPanel_locationRow {
  display: initial !important;
}
*/

/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */
/*
#context-sendimage,
#context-sendvideo,
#context-sendaudio,
#context-sep-setbackground,
#context-setDesktopBackground {
  display: none !important;
}
*/
#TabsToolbar {
  visibility: collapse;
}
#nav-bar {
  /* This works on qhd(100% hidpi) and 4k(150%) screen */
  margin-top: calc(1px + -1 * var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)));
  margin-right: 138px; /* 140px is ok */
}
#toolbar-menubar {
  height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px));
  margin-left: -100vw;
}

Then go to about:config in your address bar and set this to true:


toolkit.legacyUserProfileCustomizations.stylesheets


My Current Setup

Extra space on top left with Firefox Lepton UI.
userChrome.css
/** Import Lepton stylesheet (Chrome) *****************************************/
@import url("css/leptonChrome.css");


/** Add your custom styles below **********************************************/

/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */
/*
.editBMPanel_locationRow {
  display: initial !important;
}
*/

/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */
/*
#context-sendimage,
#context-sendvideo,
#context-sendaudio,
#context-sep-setbackground,
#context-setDesktopBackground {
  display: none !important;
}
*/

/* remove TabsToolbar when turn on tree style tab */

html#main-window body:has(#sidebar-box[sidebarcommand=treestyletab_piro_sakura_ne_jp-sidebar-action][checked=true]) #TabsToolbar {
  visibility: collapse;
}

/* add space on top left from firefox config */
html#main-window body:has(#sidebar-box[sidebarcommand=treestyletab_piro_sakura_ne_jp-sidebar-action][checked=true]) #TabsToolbar > .titlebar-buttonbox-container {
  visibility: visible !important;
  display: block;
  position: absolute;
  top: 3px;
  left: 0px;
}

#urlbar:not([focused]) #urlbar-input{ text-align: center !important; }

/* tree style tab config */
:root {
  --sidebar-default-width: 100px;
  --sidebar-hover-width: 200px;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  position: relative !important;
  min-width: var(--sidebar-default-width) !important;
  max-width: var(--sidebar-default-width) !important;
  border-right: 1px solid var(--sidebar-border-color);
  z-index: 2147483647;
  opacity: 1;
  transition: 
    margin-right 1s cubic-bezier(1,0,.5,0),
    min-width 1s cubic-bezier(1,0,.5,0),
    max-width 1s cubic-bezier(1,0,.5,0),
    opacity 1s cubic-bezier(1,0,.5,0) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  margin-right: calc(var(--sidebar-hover-width) * -1 + var(--sidebar-default-width)) !important;
  min-width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;
  z-index: 1;
  opacity: 1;
  transition: 
    margin-right 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    min-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    max-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}
TST custom css
/* hightlight selected tab */
tab-item.active tab-item-substance {
  height: 39px !important;
}
tab-item.active .background {
  background-color: steelblue;
}
tab-item.active .label-content {
  font-weight: bold;
  font-size: 14px;
}
tab-item.active tab-twisty,
tab-item.active .label-content,
tab-item.active tab-counter {
  color: #fff;
}

/* hightlight specific domain */
tab-item[data-current-uri^="https://github.com"] tab-item-substance {
  background-color: gray;
}

/* Only show tab close button on hover */
#tabbar tab-item tab-item-substance:not(:hover) tab-closebox {
  display: none;
}

:root.sidebar #background {
  background: ;
}

#tabbar { scrollbar-width: auto; }
Default


Hover TST


Turn off TST