Side Tabs in Firefox 66
I've become so used to using side tabs (TreeStyleTabs) in Firefox, that it's somewhat painful to use any other browser in more than a passing manner. My work laptop was just replaced, and I had to back into this configuration again, so I figured this is a good time to document it. Drawing from several sources (linked at the bottom).
- In a terminal window, create your
chrome
Firefox profile directory:mkdir -pv ~/Library/Application\ Support/Firefox/Profiles/*.default/chrome
and your personal chrome file:touch ~/Library/Application\ Support/Firefox/Profiles/*.default/chrome/userChrome.css
- Install the TreeStyleTab plugin (https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/)
- In Firefox, Press Cmd + Opt + I
- Click on the cog icon (Settings) in the upper right (may be inside the hamburger menu)
- In Advanced Settings, check "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
- Restart Firefox
- Press Cmd + Opt + Shift + I
- In the resulting permission dialog, click "OK" to enable remote debugging
- Choose the "Style Editor" tab and find
userChrome.css
in the left pane - Add the following content to
userChrome.css
and confirm the appearance is as desired:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Hide top tabs, but not window controls. Slide everything over to make space for window controls */
#TabsToolbar > .toolbar-items,
#TabsToolbar > .titlebar-spacer { visibility: hidden }
#nav-bar { margin-top: -32px; padding: 0px 15px 0px 75px !important; }
/* Hide the sidebar header */
#sidebar-header {
visibility: collapse;
}
References:
https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/
https://www.reddit.com/r/FirefoxCSS/comments/a70ew7/how_to_hide_tab_bar_while_still_showing_window/
Comments
Post a Comment