Firefox Browser Customizations 🔥 for Tree Style Tab - Tested on Win & GNOME

.firefox-customization.md

Firefox Browser Customizations for Tree Style Tab

Tested on Win & GNOME

Demo

Installation

Addons

Install the following addons:

• Tree Style Tab
• TST More Tree Commands
• TST Indent Line
• [TST] Colorize Tabs

Configuring Addons

Tree Style Tab

Open the TST options page, navigate all the way to the bottom to the all configs section, click on import, and open the configs-treestyletab.json file from this gist.

Then on the same page navigate to the user style rules field, click on load from file, and open the treestyletab.css file from this gist.

Configuring Firefox

Open the Advanced Preferences (about:config) page in firefox, search for toolkit.legacyUserProfileCustomizations.stylesheets, and set it to true.

Then open the About Profiles (about:profiles) page in firefox and click on Open Folder for the Root Directory of your default-release profile.

Create a folder named chrome if it doesn't exist yet, then place the userChrome.css file from this gist inside the chrome folder.

Restart Firefox

And you're good to go! 😎

configs-treestyletab.json

{
  "__ConfigsMigration__userValeusSameToDefaultAreCleared": true,
  "autoAttachOnNewTabCommand": 3,
  "cachedExternalAddons": [
    "tst-more-tree-commands@piro.sakura.ne.jp",
    "tst-indent-line@piro.sakura.ne.jp",
    "tst_colorize_tabs@emvaized.com"
  ],
  "closeParentBehavior_insideSidebar_expanded": 0,
  "closeParentBehavior_outsideSidebar_expanded": 0,
  "configsVersion": 27,
  "inheritContextualIdentityToChildTabMode": 1,
  "longPressOnNewTabButton": "newtab-action-selector",
  "notifiedFeaturesVersion": 9,
  "showAutoGroupOptionHint": false,
  "sidebarPositionRighsideNotificationShown": true,
  "skipCollapsedTabsForTabSwitchingShortcuts": true,
  "syncDevices": {},
  "userStyleRules": "",
  "userStyleRulesFieldTheme": "seti",
  "warnOnCloseTabs": false,
  "warnOnCloseTabsByClosebox": false
}

treestyletab.css

/* Prevent scroll bar from appearing at right */
body {
  overflow-y: hidden;
}


/* Change the styling of unread tabs */
:root.sidebar tab-item.unread .label-content::before {
  content: "";
  display: inline-block;
  background-color: #00ddff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 3px;
}


/* Change the styling of unloaded (pending) tabs */
tab-item.discarded tab-item-substance {
  opacity: 0.75;
}


/* Change new tab button height */
:root.sidebar .newtab-button-box {
  height: 35px;
}
:root.sidebar .newtab-button {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
:root.sidebar .newtab-button::after {
  background-position: center center !important;
  width: auto;
  mask-size: auto;
}

:root.sidebar .newtab-action-selector-anchor {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
:root.sidebar .newtab-action-selector-anchor::after {
  height: auto;
  margin-top: 0 !important;
  max-height: initial;
  flex-grow: 1;
}


/* Left align new tab plus icon */
/*
:root.sidebar .newtab-button::after {  
  mask-position-x: left !important;
  margin-left: 8px;
}
*/


/* Add a border above create tab button */
:root.sidebar .after-tabs {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid gray;
  background-color: var(--browser-background, var(--tabbar-bg));
}
:root.sidebar #tabbar ~ .after-tabs {
  height: initial;
  padding-top: 0px;
}


/* Styles for Colorize Tab addon */
.tab.self-colored-red tab-item-substance { background-color: rgba(255,0,0,0.2) !important; }
.tab.self-colored-green tab-item-substance { background-color: rgba(0,255,0,0.2) !important; }
.tab.self-colored-blue tab-item-substance { background-color: rgba(0,128,255,0.2) !important; }
.tab.self-colored-yellow tab-item-substance { background-color: rgba(255,255,0,0.2) !important; }
.tab.self-colored-brown tab-item-substance { background-color: rgba(139,69,19,0.2) !important; }
.tab.self-colored-purple tab-item-substance { background-color: rgba(75,0,130,0.2) !important; }
.tab.self-colored-orange tab-item-substance { background-color: rgba(255,69,0,0.2) !important; }

userChrome.css

:root {
  --custom-titlebar-button-padding-x: 12px;
  --custom-titlebar-button-width: calc(
    var(--custom-titlebar-button-padding-x) * 2 + 12px
  );
  --custom-titlebar-drag-space: 30px;
  --custom-toolbarbutton-inner-padding: 8px;
  --custom-toolbarbutton-outer-padding: 2px;
}
@media screen and (max-width: 830px) {
  :root {
    --custom-titlebar-button-padding-x: 10px;
    --custom-titlebar-drag-space: 15px;
  }
}
@media screen and (max-width: 680px) {
  :root {
    /* --custom-titlebar-drag-space: 10px; */
    /* --custom-toolbarbutton-inner-padding: 6px; */
    --custom-titlebar-button-padding-x: 8px;
    --custom-titlebar-drag-space: 0px;
    --custom-toolbarbutton-inner-padding: 4px;
    --custom-toolbarbutton-outer-padding: 1px;
  }
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"])
  #TabsToolbar
  > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
  visibility: collapse !important;
}

#navigator-toolbox {
  background-color: var(--toolbar-bgcolor) !important;
}

/* Adding empty space for buttons */
#nav-bar {
  margin-right: calc(
    var(--custom-titlebar-button-width) * 3 + var(--custom-titlebar-drag-space)
  );
  --toolbarbutton-inner-padding: var(--custom-toolbarbutton-inner-padding);
  --toolbarbutton-outer-padding: var(--custom-toolbarbutton-outer-padding);
}

#nav-bar-customization-target {
  min-width: min-content !important;
}


/* Common */

#titlebar {
  appearance: none !important;
  background-color: var(--lwt-accent-color) !important;
}

.titlebar-button {
  padding: 8px var(--custom-titlebar-button-padding-x) !important;
}


/* Toolbar Menubar */

#toolbar-menubar {
  z-index: 1;
  max-height: 24px !important;
}
#main-menubar {
  height: 100%;
}


/* Toolbar Tabbar */

#TabsToolbar {
  position: absolute;
  width: 100%;
  height: 40px;
}


/* Remove title section from Tree Style Tabs */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
  #sidebar-header {
  display: none;
}


/* Auto-hide sidebar when fullscreen */
#main-window[inFullscreen] #sidebar-box,
#main-window[inFullscreen] #sidebar-splitter {
  display: none !important;
  width: 0px !important;
}

/* Hide context menu options */
#context-navigation,
#context-sep-navigation {
  display: none !important;
}