3 ms·

This can be done via userChrome.css. Just add this: #tabbrowser-tabs { visibility: collapse !important; }

kibwen 9y ago
Excellent, I was digging around for an about:config pref but this works too. :)
guns 9y ago
Thanks for this tip! Private browsing mode causes the tab bar to reappear (though the tabs are still hidden), so I found that the selector #TabsToolbar works even better. Also, the large, bright sidebar header can be hidden with the #sidebar-header selector. Combining those, we have: #TabsToolbar, #sidebar-header { visibility: collapse !important; }
- mannigfaltig 9y ago
  I've added a modification that removes any margin at the top: #TabsToolbar, #sidebar-header { visibility: collapse !important; } #TabsToolbar { margin-bottom: -21px !important; } Then go to the hamburger menu > Customization and check "Title Bar" at the bottom left. Then it pretty much looks like FF 56. I've also changed the style of TSTs in the add-on settings (all the way at the bottom; not in userChrome.css) such that the tabs don't take up as much vertical space and to hide the close box button (and only show it on the mouse-over event): .closebox { display: none } .tab:hover .closebox { display: block; } .tab { padding-top: 0px; padding-bottom: 0px; } You can make `.tab` even tighter: .tab .icon { padding-top: 2px; /* reducing it by 2px */ padding-bottom: 2px; } :root { --tab-height: 22px; /* reducing it by 4px */ }
wakkaflokka 9y ago
Novice question... where do I find userChrome.css on Windows?
- kibwen 9y ago
  C:\Users\wakkaflokka\AppData\Roaming\Mozilla\Firefox\Profiles\random_gibberish_identifier\chrome\userChrome.css
- bzbarsky 9y ago
  You create it in the "chrome" folder in your Firefox profile. The "chrome" folder itself may need to be created. https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile https://support.mozilla.org/en-US/kb/profiles-where-firefox-... has directions for finding where the profile lives.
- yamaneko 9y ago
  A bit late to the party, but posting for reference in case someone finds this post in the future. For Ubuntu, I did as the following: 1. Created the chrome folder at `~/.mozilla/<your-profile-id>.default/` 2. Created `~/.mozilla/<your-profile-id>.default/chrome/userChrome.css` and added @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); at the top of the file. 3. Added customizations after this line. The resulting file will be like: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* * TreeStyleTabs solutions to remove tabs * * Solution by: https://news.ycombinator.com/item?id=15343940 */ #TabsToolbar, #sidebar-header { visibility: collapse !important; } #TabsToolbar { margin-bottom: -21px !important; }
mastax 9y ago
If you're on windows and this makes your window buttons disappear, set browser.tabs.drawInTitlebar to false in about:config

Excellent, I was digging around for an about:config pref but this works too. :)

guns 9y ago

Thanks for this tip! Private browsing mode causes the tab bar to reappear (though the tabs are still hidden), so I found that the selector #TabsToolbar works even better. Also, the large, bright sidebar header can be hidden with the #sidebar-header selector. Combining those, we have: #TabsToolbar, #sidebar-header { visibility: collapse !important; }

mannigfaltig 9y ago
I've added a modification that removes any margin at the top: #TabsToolbar, #sidebar-header { visibility: collapse !important; } #TabsToolbar { margin-bottom: -21px !important; } Then go to the hamburger menu > Customization and check "Title Bar" at the bottom left. Then it pretty much looks like FF 56. I've also changed the style of TSTs in the add-on settings (all the way at the bottom; not in userChrome.css) such that the tabs don't take up as much vertical space and to hide the close box button (and only show it on the mouse-over event): .closebox { display: none } .tab:hover .closebox { display: block; } .tab { padding-top: 0px; padding-bottom: 0px; } You can make `.tab` even tighter: .tab .icon { padding-top: 2px; /* reducing it by 2px */ padding-bottom: 2px; } :root { --tab-height: 22px; /* reducing it by 4px */ }

wakkaflokka 9y ago

Novice question... where do I find userChrome.css on Windows?

kibwen 9y ago
C:\Users\wakkaflokka\AppData\Roaming\Mozilla\Firefox\Profiles\random_gibberish_identifier\chrome\userChrome.css
bzbarsky 9y ago
You create it in the "chrome" folder in your Firefox profile. The "chrome" folder itself may need to be created. https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile https://support.mozilla.org/en-US/kb/profiles-where-firefox-... has directions for finding where the profile lives.
yamaneko 9y ago
A bit late to the party, but posting for reference in case someone finds this post in the future. For Ubuntu, I did as the following: 1. Created the chrome folder at `~/.mozilla/<your-profile-id>.default/` 2. Created `~/.mozilla/<your-profile-id>.default/chrome/userChrome.css` and added @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); at the top of the file. 3. Added customizations after this line. The resulting file will be like: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* * TreeStyleTabs solutions to remove tabs * * Solution by: https://news.ycombinator.com/item?id=15343940 */ #TabsToolbar, #sidebar-header { visibility: collapse !important; } #TabsToolbar { margin-bottom: -21px !important; }

mastax 9y ago

If you're on windows and this makes your window buttons disappear, set browser.tabs.drawInTitlebar to false in about:config