New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Nono-m0le opened this Issue Nov 14, 2017 · 36 comments

Comments

Projects
None yet
@Nono-m0le

Nono-m0le commented Nov 14, 2017

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

@kasim1r

This comment has been minimized.

Show comment
Hide comment
@kasim1r

kasim1r Nov 14, 2017

seconded.

kasim1r commented Nov 14, 2017

seconded.

@gnite

This comment has been minimized.

Show comment
Hide comment
@gnite

gnite Nov 14, 2017

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

gnite commented Nov 14, 2017

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

@shridharama

This comment has been minimized.

Show comment
Hide comment
@shridharama

shridharama Nov 14, 2017

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

shridharama commented Nov 14, 2017

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

@ottiauswien

This comment has been minimized.

Show comment
Hide comment
@ottiauswien

ottiauswien Nov 14, 2017

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.

ottiauswien commented Nov 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@amollberg

amollberg Nov 14, 2017

@ottiauswien : See #1349 (comment) on how to hide the horizontal tabs on top.

amollberg commented Nov 14, 2017

@ottiauswien : See #1349 (comment) on how to hide the horizontal tabs on top.

@shridharama

This comment has been minimized.

Show comment
Hide comment
@shridharama

shridharama Nov 14, 2017

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;
}

  1. 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;
}
  1. Restart Firefox and the tabs should have disappeared.

shridharama commented Nov 14, 2017

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;
}

  1. 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;
}
  1. Restart Firefox and the tabs should have disappeared.
@yirkha

This comment has been minimized.

Show comment
Hide comment
@yirkha

yirkha Nov 15, 2017

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)

yirkha commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Nono-m0le

Nono-m0le Nov 15, 2017

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

Nono-m0le commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Nono-m0le

This comment has been minimized.

Show comment
Hide comment
@Nono-m0le

Nono-m0le Nov 15, 2017

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

Nono-m0le commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@emilis-bentley

emilis-bentley Nov 15, 2017

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.

emilis-bentley commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@AndreySu

AndreySu Nov 15, 2017

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?

ff57_top_stripe

AndreySu commented Nov 15, 2017

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?

ff57_top_stripe

@adam66

This comment has been minimized.

Show comment
Hide comment
@adam66

adam66 Nov 15, 2017

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?

adam66 commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Mattie

Mattie Nov 15, 2017

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.

Mattie commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@emilis-bentley

emilis-bentley Nov 15, 2017

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.

emilis-bentley commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@selkieTG

selkieTG Nov 16, 2017

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!

selkieTG commented Nov 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@rancidfrog

rancidfrog Nov 16, 2017

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;
}

rancidfrog commented Nov 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gnite

gnite Nov 16, 2017

@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.

gnite commented Nov 16, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@thallada

thallada Nov 17, 2017

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.

thallada commented Nov 17, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Nono-m0le

Nono-m0le Nov 17, 2017

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 {
}

Nono-m0le commented Nov 17, 2017

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

This comment has been minimized.

Show comment
Hide comment
@wdnz

wdnz Nov 18, 2017

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;
}

wdnz commented Nov 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@robgssp

robgssp Nov 18, 2017

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

robgssp commented Nov 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@wdnz

wdnz Nov 20, 2017

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

wdnz commented Nov 20, 2017

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

@davidsierradz

This comment has been minimized.

Show comment
Hide comment
@davidsierradz

davidsierradz Nov 20, 2017

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?

davidsierradz commented Nov 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@DALEcz

DALEcz Nov 24, 2017

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: test
Can I get rid of that somehow? thx

DALEcz commented Nov 24, 2017

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: test
Can I get rid of that somehow? thx

@Nono-m0le

This comment has been minimized.

Show comment
Hide comment
@Nono-m0le

Nono-m0le Nov 24, 2017

@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.

Nono-m0le commented Nov 24, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@DALEcz

DALEcz Nov 24, 2017

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).

DALEcz commented Nov 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@wdnz

wdnz Nov 24, 2017

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

wdnz commented Nov 24, 2017

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

@wdnz

This comment has been minimized.

Show comment
Hide comment
@wdnz

wdnz Nov 24, 2017

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;
}

wdnz commented Nov 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aldanor

aldanor Nov 24, 2017

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

aldanor commented Nov 24, 2017

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

@adam66

This comment has been minimized.

Show comment
Hide comment
@adam66

adam66 Nov 24, 2017

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

adam66 commented Nov 24, 2017

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

@DALEcz

This comment has been minimized.

Show comment
Hide comment
@DALEcz

DALEcz Nov 25, 2017

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

DALEcz commented Nov 25, 2017

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

@collinbarrett

This comment has been minimized.

Show comment
Hide comment

collinbarrett commented Nov 26, 2017

@piroor

This comment has been minimized.

Show comment
Hide comment
@piroor
Owner

piroor commented Nov 26, 2017

@adam66

This comment has been minimized.

Show comment
Hide comment
@adam66

adam66 Nov 26, 2017

That is the definition of "a can of worms"

adam66 commented Nov 26, 2017

That is the definition of "a can of worms"

@hmexx

This comment has been minimized.

Show comment
Hide comment
@hmexx

hmexx Feb 28, 2018

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.

hmexx commented Feb 28, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment