Tree Style Tabs is an excellent plugin and probably the main reason I use Firefox. With the newer versions of Firefox, Tree Style Tabs works nicely, but I can still see the same tabs duplicated across the top horizontally.

How can I hide the horizontal Tab Bar until Firefox incorporates this functionality?

Plugin Firefox Page: https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/
Plugin Homepage: http://piro.sakura.ne.jp/xul/_treestyletab.html.en

  • those with big screens might also like Tab Center Redux as it looks bigger then tree style tabs. – Vitas Jan 11 at 20:07
up vote 36 down vote accepted

The horizontal tab bar can be hidden with the following steps:

  1. Confirm or Create:
    Linux: ~/.mozilla/firefox/<profile name>/chrome/userChrome.css
    Windows: %AppData%\Mozilla\Firefox\Profiles\<profile name>\chrome\userChrome.css
    macOS: ~/Library/Application Support/Firefox/Profiles/<profile name>/chrome/userChrome.css
    
  2. Add the Following code to: userChrome.css
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    #TabsToolbar {
        visibility: collapse !important;
    }
    
    ^Note: Line 1 is required when creating the file and does not need to be included more than once.
  3. Restart Firefox

As this is a custom workaround until either Firefox itself allows the horizontal tab bar to be hidden, or the TreeStyle Tabs extension itself hides it, this information may become dated in the future.

Confirmed Testing: Firefox Nightly 58.0a1 (2017-10-23) (64-bit)

EDIT: Added macOS. h/t: @coderuby

  • Worked for me on 57.0b12, 64-bit -- thanks – JJohnston2 Oct 30 '17 at 1:30
  • 1
    Works on macOS 10.11.6 with Firefox 58.0b4. On macOS the userChrome.css can be found or created under: ~/Library/Application Support/Firefox/Profiles/<profile name>/chrome/userChrome.css – coderuby Nov 16 '17 at 9:44
  • 3
    This is brilliant, :D However, it hides the; hide, full screen, and close, buttons, which you can show if you tick the 'Title Bar' option in the 'Customise...' page. – Peilonrayz Nov 17 '17 at 12:05
  • 3
    Users who view issue this may also want to hide the Tree Style Tabs heading that appears in the sidebar: #sidebar-header { display: none; } – uglycoyote Dec 14 '17 at 17:19
  • 1
    just FYI. I did not have a chrome folder there neither userChrome.css file! Had to create it, but it works. – Vitas Jan 11 at 20:27

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.