Customizing Tree Style Tabs Firefox Extension


This comment in a Hacker News thread: https://news.ycombinator.com/item?id=18836967 explains some browser customizations that works well with the Tree Style Tabs Firefox extension in Firefox Quantum.

Hide the Default Top Tab Bar

It is possible to hide Firefox's top tab bar by adding a snippet of CSS to the userChrome.css (docs: http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes) file in the Firefox profile directory. The top tab bar is redundant when using the Tree Style Tabs extension. In order to add the CSS snippet, we need to find the Firefox profile folder, navigate to the chrome folder, and add the snippet to a file called userChrome.css

Find the Firefox Profile Directory

Consult these docs to find the Firefox profile directory on your operating system: http://kb.mozillazine.org/Profile_folder_-_Firefox#Mac.

Mac

~/Library/Application Support/Firefox/Profiles/wvghmg59.default

Linux

~/.mozilla/firefox/profile

Create chrome Directory (If Not Present)

I did not have a chrome directory, so I created one according the the Mozilla documentation.

mkdir chrome
cd chrome

Create the userChrome.css File (If Not Present)

Create a file called userChrome.css in the chrome directory, and add the following snippet:

/* Hide tab bar in FF Quantum */
@-moz-document url("chrome://browser/content/browser.xul") {
  #TabsToolbar {
    visibility: collapse !important;
    margin-bottom: 21px !important;
  }

  #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse !important;
  }
}

Save the file and restart your Firefox instance to test and ensure the style changes have been applied successfully.

Adjust Tree Style Tabs Layout to be More Compact

Add a second snippet to make the default Tree Style Tabs pane tab listings more compact:

/* Compact tab layout */
:root { --tab-height: 20px !important; }
.tab { height: 20px !important; }
/* Shrink space between pinned tabs and tab bar, only when pins are present */
#tabbar[style*="margin"] { margin-top: 20px !important; }

/* Show title of unread tabs with red font */
.tab.unread .label {
  color: red !important;
}

/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: " ";
}

Misc. Helpful Links



Comments:


Gravatar of Kyle Jones

Knowledge Base is a repository for various notes, guides, and thoughts on a wide range of IT related topics. Read more...

Sponsored By:


Web development services by Say Web Solutions. Visit website.