Feature request: tab counter

[theres-waldo]

Prior to WebExtensions, I used a Firefox extension called Tab Counter which added a counter at the end of the tab bar (not scrolled with the tabs, but fixed in place).

This extension "just worked" with Tree Style Tab: the counter would appear at the bottom of the tab tree (also not scrolled).

With the WebExtensions version, this does not work anymore, since the tab tree is now a sidebar rather than the actual tab bar.

Would you consider adding an optional tab count natively to TST?

[kkot]

This works fine IMO:
https://addons.mozilla.org/en-US/firefox/addon/tab-count-badge

[theres-waldo]

This works fine IMO:
https://addons.mozilla.org/en-US/firefox/addon/tab-count-badge

I have not been able to get that extension to work. But, IIUC, even if I got it to work, the tab count would be in a completely different place in the UI than at the bottom of the tab tree.

[Lej77]

You can use some CSS code in the Advanced section of TST's Option menu. You can count tabs using something like:
Code snippets for custom style rules - Numbering of tabs #1601

---

For example the following CSS will display the current window's tab count on the new tab button:

/* Tab Counter on New Tab button */
#tabbar {
  counter-reset: tabs;
}
.tab {
  counter-increment: tabs;
}

.newtab-button::after {
  content: counter(tabs) " tabs";
  pointer-events: none;
    
  position: absolute;
  left: 0.2em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}

[theres-waldo]

That is a very ingenious workaround :) And it's impressive that TST supports this kind of extensibility!

I don't suppose there's a way to get the count to be below (as opposed to beside) the "+"?

[Lej77]

@theres-waldo The following CSS should show the tab count bellow the "+" sign:

/* Tab Counter on New Tab button */
#tabbar {
  counter-reset: tabs;
}
.tab {
  counter-increment: tabs;
}

.newtab-button::after {
  content: counter(tabs) " tabs";
  top: -0.2em;
  margin-bottom: -0.1em;

  pointer-events: none;
  position: relative;
  display: block;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}

The top: -0.2em; controls the tab counts y-position and the margin-bottom: -0.1em; controls the extra space in the new tab button.

Note: When you apply the new CSS code you might need to close and reopen the sidebar to fix the last tab being hidden behind the larger new tab button.

[Lej77]

Also if you want the tab counter text to have the same opacity as the "+" sign then you can add the following CSS code:

.newtab-button::after {
  opacity: var(--button-opacity);
}
.newtab-button-box:hover .newtab-button::after {
  opacity: var(--button-hover-opacity);
}

---

Sometimes I had some problems with the code above. This mostly happened when I resized the new tab button. It caused the tab counter's text font to be different when it was hovered (though it only happened when the scroll bar wasn't visible). I used the following CSS as a workaround:

.newtab-button::after {
  opacity: var(--button-opacity);
}
.newtab-button-box:hover .newtab-button::after {
  opacity: .989;
}

var(--button-hover-opacity) has a value of 1. Line 36 in "treestyletab/webextensions/sidebar/styles/base.css" so this makes the value slightly lower than that to get around the issue.

[theres-waldo]

Thanks! display: block was the important bit that I was missing, to get the count to go on its own line. I further added a border-top to separate the "+" and the count, and the result looks reasonably close to the pre-WebExt combination.

[Lej77]

After TST 2.4.8 there will be an option in TST settings under the header New Tabs Behavior in the group "New Tab" button called Show selector button on the "New Tab" button, to specify where the new tab is opened in. When this is enabled a small selector button appears to the left side of the "New Tab" button. Since this is where the tab count is displayed I made some CSS code to improve this.

The following CSS code will slide the tab count away from the selector when it is visible:

/* Slide tab count away from selector */
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button::after {
  transition: margin-left 0.1s;
}
:root.newtab-action-selectable.contextual-identity-selectable .newtab-action-selector-anchor.open ~ .newtab-button::after,
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button-box:hover .newtab-button::after {
  margin-left: 20px;
}

The following CSS code will slide in the selectors from the sides and can be used in combination with the code above:

/* Slide in selectors */
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button::after,
.newtab-action-selector-anchor,
.contextual-identities-selector-anchor {
  transition: 0.2s ease-in-out !important;
}
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button-box:not(:hover) .newtab-action-selector-anchor:not(.open) {
  left: -20px !important;
}
:root.newtab-action-selectable:not(.contextual-identity-selectable) .newtab-button-box:not(:hover) .newtab-action-selector-anchor:not(.open),
:root.contextual-identity-selectable .newtab-button-box:not(:hover) .contextual-identities-selector-anchor:not(.open) {
  right: -20px !important;
}

[private-lock]

In FF90b12 the snippet needs a little update, as the width of the plus sign on the original new-tab-button doesn't reserve enough space anymore. So it would break the text into multiple lines.

The old block:

.newtab-button::after {
  content: var(--tab-count-text);
  pointer-events: none;
    
  position: absolute;
  left: 0.5em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}

Becomes:

.newtab-button::after {
  content: var(--tab-count-text);
  pointer-events: none;

  width: 100%;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}

@piroor Could you please update the documentation?

[roman-orekhov]

@private-lock
Brilliant! I was wondering why did this button disappear (I'm on Firefox 89.0.2). I have 849 tabs opened, thought I reached some limit. Didn't even think to create a new window and see that tab counter is broken into two strings now.

[piroor]

@private-lock It is OK (and recommended) to update the page by yourself, it is a wiki - editable by anyone.