Tree Style Tab Config

README.md

Issues

The JS does not work.

Addon Settings

Appearance

Theme

• Apply Browser Theme

Firefox

about:config

• toolkit.legacyUserProfileCustomizations.stylesheets = true

Customise UI

Density

• Compact

User Chrome

~/Library/Application Support/Firefox/Profiles/PROFILE/chrome

Add:

• userChrome.css
• userChrome.js
• userChrome.xml

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* https://gist.github.com/philipashlock/dbe845a351353d81bfac693f722e3b9e */

/* hide native tabs and sidebar header */
#TabsToolbar-customization-target {
  visibility: collapse;
}

/* Fix extra spacing in fullscreen */
#navigator-toolbox[inFullscreen="true"] #titlebar {
  visibility: collapse;
}

#nav-bar[inFullscreen="true"] {
  margin-top: unset;
  margin-right: unset;
}

/* Ensure bar retains height to allow toolbar to be moved over it */
.titlebar-buttonbox-container {
  min-height: var(--tab-min-height);
}

/* Move toolbar up "over" tabs bar */
#nav-bar {
  margin-top: calc(-1 * var(--tab-min-height));

  box-shadow: none !important;
}

/* Offset toolbar from traffic lights */
#nav-bar {
    padding-left: 75px !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

userChrome.js

const sidebar = document.getElementById("sidebar-box");
const mainWindow = document.getElementById("main-window");

function updateTabsState() {
    const showingTreeStyleTabs = sidebar.hidden === false && sidebar.getAttribute("sidebarcommand") === "treestyletab_piro_sakura_ne_jp-sidebar-action";
    mainWindow.setAttribute("showingTreeStyleTabs", showingTreeStyleTabs);
}

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes") {
        if (mutation.attributeName === "sidebarcommand" || mutation.attributeName === "hidden") {
            updateTabsState()
        }
    }
  });
});

observer.observe(sidebar, {
  attributes: true,
});

updateTabsState();

userChrome.xml

<?xml version="1.0"?>
<!-- Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
 -->

<bindings id="generalBindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="js" extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
    <implementation>
        <constructor><![CDATA[
            function makeRelativePathURI(name) {
              let absolutePath = Components.stack.filename;
              return absolutePath.substring(0, absolutePath.lastIndexOf("/") + 1) + name;
            }
            // The following code executes in the browser context,
            // i.e. chrome://browser/content/browser.xul
            Services.scriptloader.loadSubScriptWithOptions(
              makeRelativePathURI("userChrome.js"),
              {target: window, ignoreCache: true},
            );
        ]]></constructor>
    </implementation>
  </binding>
</bindings>