Any way to auto-hide the entire sidebar when only one tab is open?

[JaneSmith]

Hello. I'm running Tree Style Tab 2.4.9 on Firefox Nightly 60.0a1, Windows 10 Pro.

Is there any way to auto-hide the entire sidebar when only one tab is open? This seems like it'd probably be a userChrome.css type thing, but I've looked through the code snippets page and haven't found anything - maybe I'm blind.

Basically, I'd like to just open a new window and have no TST visible. Open a new tab, and TST appears on the left. Close the tab, and TST disappears again. Thanks.

[Lej77]

I don't think this is possible with just CSS code. An element can only be affected by other elements when they are its parents or preceding siblings to those parents and none of those elements seem to change when the tab count changes. A workaround is to use an extension that uses the method windows.update() with the titlePreface property. The title preface can be detected with CSS code and the sidebar can be hidden when a specific string is used.

You need an extension that sets a specific window title prefix string when the window has only one tab. Unfortunately I don't know of any extension that uses the property at all so I can't recommend you a popular extension that does what would be required.

Once you have such an extension installed you can use some CSS code in the userChrome.css file like this:

@-moz-document url("chrome://browser/content/browser.xul") {
  #main-window[titlepreface="1 - "] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    visibility: collapse !important;
  }
}

---

I wrote some code for an example extension that puts a window's tab count in the window's title.
If this example extension is installed and the CSS code above is put in the userChrome.css file then TST's Sidebar will be hidden when there is only one tab open in a window (the behavior you specified).

Tab Counter.js:

var timeBetweenUpdatesInMilliseconds = 200;
var windowPrefixFormat = "%TabCount% - ";
const tabCountRegExp = new RegExp("%TabCount%", "ig");
var blockedWindows = [];


async function delay(timeInMilliseconds) {
  return await new Promise((resolve, reject) => setTimeout(resolve, timeInMilliseconds));
}




function requestNewUpdate(windowId, operationInfo = {}) {
  let index = blockedWindows.map(window => window.id).indexOf(windowId);
  if (index >= 0) {
    blockedWindows[index].operationInfo = operationInfo;
    blockedWindows[index].invalidated = true;
  } else {
    let blockedWindow = {
      id: windowId,
      operationInfo: operationInfo,
      invalidated: false,

      update: function () {
        updateWindowTabCount(blockedWindow.id, blockedWindow.operationInfo);
      }
    };
    blockedWindows.push(blockedWindow);
    delay(timeBetweenUpdatesInMilliseconds).then(() => unblockWindow(blockedWindow));
    blockedWindow.update();
  }
}
function unblockWindow(blockedWindow) {
  let index = blockedWindows.indexOf(blockedWindow);
  if (index >= 0) {
    blockedWindows.splice(index, 1);
  }

  if (blockedWindow.invalidated) {
    blockedWindow.update();
  }
}


async function updateWindowTabCount(windowId = null, operationInfo = {}) {
  if (windowId || windowId === 0) {
    let tabs = await browser.tabs.query({ windowId: windowId });
    let tabCount = tabs.length;

    try {
      if (operationInfo && operationInfo.tabRemoved && operationInfo.tabId && tabs.map(tab => tab.id).indexOf(operationInfo.tabId) >= 0) {
        // If the removed tab was selected when it was closed then it will still be in the provided tab list.
        tabCount--;
      }
    } catch (err) { }

    if (tabCount < 1)
      tabCount = 1;

    setWindowPrefix(windowId, tabCount);
  } else {
    let windows = await browser.windows.getAll({ populate: true });
    for (let window of windows) {
      setWindowPrefix(window.id, window.tabs.length);
    }
  }
}
async function setWindowPrefix(windowId, tabCount) {
  await browser.windows.update(windowId, { titlePreface: windowPrefixFormat.replace(tabCountRegExp, tabCount + "") });
}




browser.tabs.onCreated.addListener((tab) => requestNewUpdate(tab.windowId));
browser.tabs.onRemoved.addListener(async (tabId, removeInfo) => requestNewUpdate(removeInfo.windowId, { tabId: tabId, tabRemoved: true }));
browser.tabs.onAttached.addListener((tabId, attachInfo) => requestNewUpdate(attachInfo.newWindowId));
browser.tabs.onDetached.addListener((tabId, detachInfo) => requestNewUpdate(detachInfo.oldWindowId));
updateWindowTabCount();

manifest.json:

  "manifest_version": 2,
  
  "name": "Tab Counter in Window Title",  
  "version": "1.0",
  "applications": {
    "gecko": {
      "id": "addon@example.com",
      "strict_min_version": "57.0"
    }
  },

  "background": {
    "scripts": ["Tab Counter.js"]
  }
}

If you create those two files with the names and content I specified you can then load it as a temporary extension in Firefox 58 by opening about:debugging#addons and pressing the load temporary extension button. Just navigate to the folder you just created and select one of the two files.

If your using Firefox Nightly you can install it as a normal extension by opening about:config and setting xpinstall.signatures.required to false. Then you just need to put the two files you created in a zip file instead of a folder and you can install it by going to about:addons and pressing the wheel button and then install extension from file. After that you just select the zip file you created.

More info about installing addons

Here is a prepared zip file with the content as I specified:
Tab Counter.zip

---

Edit: so I logged into addons.mozilla.org and got the extension signed so it could be used with the stable release of Firefox (v58). Here is a copy:
tab_counter_in_window_title-1.0-an+fx-windows.zip

Simply drag and drop it on to Firefox addon page about:addons while in the addon tab to install it. If you want you can also extract it to see that it only contains the code I wrote above.

Note: The window title prefix won't be cleared immediately when the extension is disabled. Instead the prefix will be cleared when Firefox is restarted.

[piroor]

Please note that basically this is impossible by regular method in WebExtensions APIs, because methods to opening/closing sidebar are available only for some limited cases: clicked toolbar button, pre-defined keyboard shortcut, and others. "When a tab is closed" is out of allowed range of the API.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/sidebarAction/open
The workaround posted by @Lej77 is built on a combination of an extension and userChrome.css hack. userChrome.css's availability is not guaranteed for future versions of Firefox.

[Lej77]

I released the example extension on addons.mozilla.org as Tab Count in Window Title. The code above is more or less version 1.1 and then I added an option page with some customization options for version 2.1.

[JaneSmith]

Wow, this works great! Thank you very much for taking the time to put together a workaround like this, and for describing it in so much detail. It works as described: the window displays the number of tabs, and the userChrome.css can make use of that to toggle the sidebar. This gives me more space now when I only have one tab open, and I'm also quite liking the number of tabs being shown in the titlebar. Thanks. Should this be closed?

[Ryman]

@piroor Would the WebExtensions API allow for hiding the sidebar in the window created by 'Move to new window'? That would improve this for at least some of my usage if so!

[piroor]

I close this because this is out of the range of WebExtensions-based extension.