Hide Tree Style Tab Header + Horizontal bar + Auto-hide

[Nono-m0le]

FF57.0 / Tree Style Tab 2.2.2 Would it be possible to hide the "Tree Style Tab \/ X" white header on top of the tree ?

Would it be possible to hide the Horizontal (original) bar on the very top to keep only the Vertical bar ?

Would it be possible to add the "auto-hide" features on the V-tab (to be shown only on mouse over)

See behaviour : https://i.imgur.com/w2WSxFg.png

[klikr]

seconded.

[gnite]

These and more are all possible via userChrome.css, have a look here https://github.com/Timvde/UserChrome-Tweaks.

[shridharama]

+1! Would really like this. Both the horizontal tab bar and the header take up a lot of unnecessary screen space.

[ottiauswien]

please, i dont want the tabs on top too. thats why i installes tree style tab. and the big tile "tree style tab" is also not needed.

[amollberg]

@ottiauswien : See https://github.com/piroor/treestyletab/issues/1349#issuecomment-343718504 on how to hide the horizontal tabs on top.

[shridharama]

For those of who have no idea what userChrome.css is (which was me, circa 30 minutes ago), try the following:

1. Navigate to your profiles folder (On my Mac, it was ~/Library/Application Support/Firefox/Profiles/s6sijjn0.default/).
2. Go inside the chrome directory (create it if it already isn't there)
3. If you already have a userChrome.css, edit it by adding

   
   #TabsToolbar {
   visibility: collapse !important;
   }

4. If you don't have a userChrome.css, create it and add the following:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

TabsToolbar {

visibility: collapse !important;

}

5. Restart Firefox and the tabs should have disappeared.

[yirkha]

To save the rest of you a few clicks, add also this to hide/remove the thick toolbar header on the top:

#sidebar-header {
  display: none;
}

(from https://github.com/Timvde/UserChrome-Tweaks/blob/master/sidebar/hide-sidebar-header.css)

[Nono-m0le]

Thanks @shridharama & @yirkha ! No more Horizontal bar / No more white header

What about the auto-hide then ? :)

On Win7, here is the userChrome.css : %appdata%\Mozilla\Firefox\Profiles\3qw3cghw.default\chrome

[gnite]

Auto-hide: https://github.com/Timvde/UserChrome-Tweaks/blob/master/sidebar/auto-hide-sidebar.css

You can also play around with something like this https://www.reddit.com/r/FirefoxCSS/comments/73g6un/merge_navigation_and_tabs/.

[Nono-m0le]

Thanks @gnite almost there. It makes the job, but with two small glitches:

1) I do have 7 only-icon pinned tab and when I mouse-over the sidebar, by default, only 5 are pinned at the top and 2 below for ~0,5sec then bring the 2 bottom icons to the top, which move all the tree (hard to explain but here is a kind of screenshot explanation : https://i.imgur.com/XyqTS8J.png )

2) when hidden, the sidebar still show some white pixels on all the page : https://i.imgur.com/yYGJhqE.png

[emilis-bentley]

On Windows 10 this also hid the standard window buttons (minimize, maximize, close).

#TabsToolbar {
    visibility: collapse !important;
}

I can hover over their positions and they work, but nothing is visible. There is a dark blue stripe at the top of Firefox window and that's it.

[AndreySu]

I have the same issue as @emilis-bentley but in my case the top stripe is black because I'm using dark Windows 10 theme and dark Firefox theme. Is it possible to get rid of top stripe totally on Windows 10?

[adam42a]

I'd be interested to know if Piro or any other dev on the project is planning on adding these things as options on the Tree-Style-Tab menu, so that they will be synced across to all FF instances?

Will the userChrome tweaks be sync'd?

[Mattie]

FYI-- for those hiding the top tabs and are missing the [X] and minimize icons on Windows 10, you can see them again if you enable the "Menu Bar" with File/Edit/View/Help/etc -- not ideal but better than seeing the tabs at the top.

[emilis-bentley]

Thanks @Mattie !

I have found that the window control buttons on Windows 10 reappear both when turning on Menu Bar or Title Bar in the Customize... screen.

[selkieTG]

I tried shridharama's suggestion, and also emilis-bentley's, after that didn't work for me. I also tried setting browser.tab.forceHide to true in about:config, but none of these had any effect on the horizontal tab bar that's redundant with TST in use. This is in Firefox 57.0 under Ubuntu. -- Update: I'm an idiot. I was changing the file userChrome-example.css instead of userChrome.css. -- Once I actually changed the file that Firefox uses, it worked well: many thanks, shridharama!

[rancidfrog]

The option to hide sidebar-header and TabsToolbar should be added in Tree Style Tab preference, as too many users have been requesting them and they are practically useless. The whole point of this add-on is to replace the tabstoolbar, so workaround should be provided in settings instead of users digging through issues section.

#sidebar-header {
  display: none;
}

And,

#TabsToolbar {
    visibility: collapse !important;
}

[gnite]

@Nono-m0le as to the white line try this: https://www.reddit.com/r/FirefoxCSS/comments/7459ws/autohide_sidebar_for_tree_style_tab/dnwo52u/ As to the pinned tabs I can't help with that, sorry.

[thallada]

Hiding the #sidebar-header and #TabsToolbar worked fine for me in Ubuntu on Firefox Nightly, but in Windows 10, with the "Title Bar" unchecked in Customize, I was getting a big black bar (I use the dark theme) where the tabs toolbar used to be. I was able to hide that by adding this to my userChrome.css (in addition to what @shridharama and @yirkha shared):

#titlebar {
  visibility: collapse !important;
}

#main-window[sizemode="maximized"] #nav-bar {
  margin-top: 5px;
}

The margin-top is so that the buttons and search bars on the nav bar aren't cut-off when Firefox is maximized.

[Nono-m0le]

thanks @gnite that works pretty well !

Only the disturbing pinned-icons tab moving remains but it's already nice like that. To summarize : Clear the (white) header + auto-hide and display on hover, here is my userChrome.css (on win7 %appdata%/Mozilla/Firefox/Profiles/xxxxxx/chrome/userChrome.css):

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* Hide Horizontal TAB Bar */
#TabsToolbar {
 visibility: collapse !important;
}

/* Hide White Header Tab Tree */
#sidebar-header {
 display: none;
}

/*
 * Description: Auto-hide sidebar.
 *
 * Contributor(s): img2tab
 */

/* To right-align the sidebar, replace all occurrences of "left" with "right", and "margin-right" with "margin-left" */

:root {
  --sidebar-hover-width: 8px;
  --sidebar-visible-width: 200px;
}

#sidebar-box {
  position: relative !important;
  overflow-x: hidden !important;
  margin-right: calc(var(--sidebar-hover-width) * -1) !important;
  left: var(--sidebar-hover-width) !important;
  min-width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;
  opacity: 0 !important;
}

#sidebar-box:hover {
  margin-right: calc(var(--sidebar-visible-width) * -1) !important;
  left: var(--sidebar-visible-width) !important;
  min-width: var(--sidebar-visible-width) !important;
  max-width: var(--sidebar-visible-width) !important;
  opacity: 1 !important;
}

#sidebar {
  opacity: 0 !important;
}

#sidebar:hover {
  opacity: 1 !important;
}

/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */
#sidebar-header {
  display: none !important;
}

/* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */
#sidebar-splitter {
}

[wdnz]

IF anyone needs a hidden sidebar / TST in fullscreen:

/* hide the sidebar in fullscreen mode (F11) */
#main-window[inFullscreen] #sidebar-box {
   display:none !important;
   width: 0px !important;
}

[robgssp]

Is there a way to reveal the sidebar when a key is held? Pre-webextension I had ctrl bound to reveal the tab tree.

[wdnz]

F1 toggles visibility for TST, but the above hack for fullscreen prevents that.

[davidsierradz]

Is there a way to reveal the sidebar only on events like cycling through tabs, opening or closing a tab, etc... like pre-webextension TST?

[DALEcz]

I have one nitpicking question - I have set up everything more or less as I want, only there is a few pixels of empty space between my pinned tabs in the tree style tabs addon and the regular tabs, please see the picture: Can I get rid of that somehow? thx

[Nono-m0le]

@DALEcz I'm using ONLY the settings I copy/paste earlier in this thread and I don't have that. Probably look on any other tunning you've made.

[DALEcz]

I will re-check that - btw. do you know how is the "space" for pinned tabs called? thx

edit: Oh, I found out it is because I also made the tabs smaller (21px in my case ) and the pinned icons are treated as a tab - I would need to make the "space for pinned tabs" also smaller, but I dont know the name for it (or if it has one).

[wdnz]

Here is a little documentation of the styles for TreeStyleTab: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules

[wdnz]

I didn't find the element containing the pinned tabs. But you could do the opposite: leave the pinned tabs as big as before, and just shrink the "normal" tabs:

:root {
  --tab-height: 21px !important;
}

.tab.pinned {
  --tab-height: 28px !important;
}

[aldanor]

If there's so much interest in this, wonder if it could be integrated as one of TST's options?

[adam42a]

@piroor just saw you've flagged the issue as 'bug of ff itself'. Could you put a link to the bug here? Thanks!

[DALEcz]

@wdnz Perfect! I didnt know you can set the height of normal and pinned tabs separately... great. Thx!

[collinbarrett]

a summary gist if helpful to anyone: https://gist.github.com/collinbarrett/45c90f7d427e08d69d32dfef402c86f6

[piroor]

@adam66 1332447 - API to hide the tabstrip is that.

[adam42a]

That is the definition of "a can of worms"

[trekze]

This is amazing, but I can think of a modification that everyone would benefit from. It would be good if the sidebar appears when your mouse is over the control areas above a webpage. I'm talking about the address bar, back button area of the browser, etc.

Reason is that sometimes there are things you might need to click on, on the left of a webpage, and having that vertical small strip being the 'hotspot' for uncovering the treestyletab is not as clean as just using the general control area of the browser.

Not sure if this is possible in CSS tho.

[JKomoroski]

Running Firefox Nightly for OSX, version 65.0a1 (2018-11-19) (64-bit), I am no longer able to see or click the Close/Minimize/Maximize buttons in the upper left corner when using the following userChrome.css tweak:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#TabsToolbar {
    visibility: collapse !important;
}

I understand that this is not a supported thing by either TST or Firefox. Usually, the only problem I have is that I have to use flexible white space to isolate the buttons from the rest of the items on that bar. Any thoughts on working around this?

[Dimas-sc]

Running Firefox Nightly for OSX, version 65.0a1 (2018-11-19) (64-bit), I am no longer able to see or click the Close/Minimize/Maximize buttons in the upper left corner

The same on Windows with 65 beta.

[solnyshok]

Same as above, Windows 65.0b5

[boardtc]

I use Firefox for TreeTabs, the only issue I have is I really want my vertical tree to have autohidden functionality so I can get rid of screen noise. It seems we are no closer to a solution for Quantum.

[davidsierradz]

Maybe you want something like this?

Currently I'm using a flat tree, but you can customize for your use-case, it will expand from 30px to 500px when hovering your mouse over the sidebar:

userContent.css

@-moz-document url-prefix("moz-extension://3f06c377-aaaa-4e9a-9ead-37437d6d06fb/") {
  /* Change styling of pending (unloaded) tabs */
  .tab.discarded {
    opacity: 0.5;
  }
  .tab.discarded .label {
    color: #aaa;
  }
  .tab.unread .label {
    font-style: italic;
  }
  .tab {
    height: 32px;
  }
  .tab.active {
    height: 32px !important;
    background-color: #193B99 !important;
  }
  .tab.active .label {
    font-weight: bold;
    font-size: 14px;
  }
  .tab.active .twisty,
  .tab.active .label,
  .tab.active .counter {
    color: #fff;
  }
  .tab:hover {
    background: #193B99 !important;
    opacity: 1;
  }
  /* Hide close buttons on tabs. */
  .tab:not(:hover) .closebox {
    display: none;
  }
  .tab .closebox::before {
    border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
  }
  /* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
  .tab .closebox:hover::before {
    background: #c8c8c8;
    opacity: 1; /* defaults to 0.1 */
  }
  .tab.active .closebox:hover::before {
    background: #96afc8;
  }
  /* Hide .twisty and adjust margins so favicons have 7px on left. */
  .tab .twisty {
    visibility: hidden!important;
    margin-left: -12px!important;
  }
  /* Push tab labels slightly to the right so they're completely hidden in collapsed state */
  .tab .label {
    margin-left: 8px!important;
  }
  vbox#sidebar-box.chromeclass-extrachrome {
    border: 0!important;
  }
  /* Hide 'new tab' button. */
  .newtab-button {
    visibility: hidden!important;
  }
}

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Remove the header for Tree Style Tab sidebar. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/* Remove some kind of sidebar--main-area separator. */
#sidebar-box+#sidebar-splitter {
  display: none!important;
}

/* Set the variables for sidebar width when closed and when opened. */
:root {
  --thin-tab-width: 30px;
  --wide-tab-width: 500px;
}

/* The default sidebar width. */
#sidebar-box {
  overflow: hidden!important;
  position: relative!important;
  transition: all 100ms!important;
  min-width: var(--thin-tab-width)!important;
  max-width: var(--thin-tab-width)!important;
}

/* The sidebar width when hovered. */
#sidebar-box #sidebar,#sidebar-box:hover {
  transition: all 100ms!important;
  min-width: var(--wide-tab-width)!important;
  max-width: var(--wide-tab-width)!important;
}

/* For right sidebar change 'margin-right' to 'margin-left' */
#sidebar-box:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width))*-1)!important;
}

[boardtc]

Thanks. The pictures look strange, I don't want a private window, just to auto-hide the treetab\sidebar until hovered over. I tried creating the files with above: http://oi67.tinypic.com/xnw31x.jpg, restarting firefox there was no difference...

[davidsierradz]

Sorry, maybe this two images are more clear:

Before

After

I don't know how to setup the files in Windows (check this maybe?).

Also in the userContent.css, you need to change the 3f06c377-aaaa-4e9a-9ead-37437d6d06fb to your TreeStyleTab extension ID (unique to you), or (I'm not 100% sure) go to the TreeStyleTabs preference page in Add-ons Manager and in Advanced paste the css rules from userContent.css.

[boardtc]

thanks @davidsierradz!

The before and after pictures look like the behaviour I would like for sure! On Windows 10 I have :

C:\Users<username>\AppData\Roaming\Mozilla\chrome\userChrome.css as above
C:\Users<username>\AppData\Roaming\Mozilla\chrome\userContent.css as above with 25fbacb0-5a51-4371-8216-71e123456c3 taken from the TreeTabs options page url - moz-extension://25fbacb0-5a51-4371-8216-71e123456c3/options/options.html

But, when I restart Firefox it behaves as before with no autohide :-(

[davidsierradz]

I think you should search or ask for help in Firefox CSS Reddit community, so we don't pollute this issue.

[JKomoroski]

Running Firefox Nightly for OSX, version 65.0a1 (2018-11-19) (64-bit), I am no longer able to see or click the Close/Minimize/Maximize buttons in the upper left corner when using the following userChrome.css tweak:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#TabsToolbar {
    visibility: collapse !important;
}

I understand that this is not a supported thing by either TST or Firefox. Usually, the only problem I have is that I have to use flexible white space to isolate the buttons from the rest of the items on that bar. Any thoughts on working around this?

I've found a solution to my problem. With the css below, I've hidden the horizontal tabs and I can see the window control buttons:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* to hide the native tabs*/
#TabsToolbar > .toolbar-items,
#TabsToolbar > .titlebar-spacer{ visibility: hidden }
#nav-bar{ margin-top: -32px; padding: 0px 15px 0px 75px !important; }

It should be noted that this CSS seems to be an improvement on the previous tweak because no blank spacer is required to keep the buttons from appearing on top of the other buttons on the bar.

[Dimas-sc]

I've found a solution to my problem. With the css below, I've hidden the horizontal tabs and I can see the window control buttons:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* to hide the native tabs*/
#TabsToolbar > .toolbar-items,
#TabsToolbar > .titlebar-spacer{ visibility: hidden }
#nav-bar{ margin-top: -32px; padding: 0px 15px 0px 75px !important; }

For me this CSS make that window buttons appear over the toolbar and make some buttons none usable :-( https://i.imgur.com/R1Ut638.png

[JKomoroski]

To clarify, I am on osx. If your buttons are overlapping, try adding a block of flexible space under the window buttons

[boardtc]

<< I think you should search or ask for help in Firefox CSS Reddit community, so we don't pollute this issue.>>

Not following that. Do you mean windows is not done here or the autohide issue is a firefox one and not a treestyletab community?

[piroor]

I close this because this is out of the range of WebExtensions-based extension.