Tab numbers disappearing since 3.x release

[Decohero]

Tab numbers which were added to the "Extra style rules" stopped appearing following the 3.x releases in the last week. They appear briefly as a tab is loaded, but then disappear less than a second later.

This behavior is reproducible with a new Firefox profile using the code snippet on the TST Wiki (included below).

This behavior was observed in each of the following environments:

Mac OS 10.13.6
Firefox 66.0.2
TST 3.0 - 3.0.5

Mac OS 10.11.6
Firefox 65.0.1
TST 3.0.5

Windows 7
Firefox 66.0.2
TST 3.0.5

Tab numbering code added to style rules:

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab .burster::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;
}

[stapuft]

okay so its not just me.

[irvinm]

I use this and haven't had any problem with 3.x:

/* --------------------------------------------------------------------- */
/* Add "Active Tabs / Total Tabs" on the new tab button area ----------- */
/* --------------------------------------------------------------------- */
#tabbar {
counter-reset: vtabs atabs tabs;
/* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
counter-increment: atabs tabs;
}
.tab {
counter-increment: tabs;
}

.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;
}

.newtab-button {
--tab-count-text: counter(atabs) "/" counter(tabs) " tabs";
}
/* --------------------------------------------------------------------- */

[piroor]

I've confirmed that @irvinm's version looks working as expected.

[Lej77]

.tab .burster has display: none set in latest TST so using another element will fix the problem.

I looked at the available elements and .tab .extra-items-container looked the most promising (it covers the whole tab so easier to position), but it has z-index: 10 which will place its content under other elements. This can look weird in for example pinned tabs. So the easiest solution seems to be using the .tab element directly. The ::before pseudo-element is used by drag and drop so we can't use that but the ::after pseudo-element seems to be unused.

I updated the wiki with the code using the .tab::after pseudo-element.

Using .tab::after pseudo-element

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

Using .tab .extra-items-container::after pseudo-element

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab .extra-items-container {
  z-index: unset !important;
}
.tab .extra-items-container::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

[Decohero]

Excellent, @Lej77's solution(s) work for me.

Thanks, and closing issue.

[stapuft]

@Lej77 using either one of those codes
the numbers appear in the tabs, but they do not disappear?
the numbers even are on the pinned tabs...this is a completely different code, the original code disapeered when the mouse was not hovering over the tab. that code was much better.

@irvinm thats not the code we are talking about man.

is there any way to make it appear only when hovered over, like the burster.after command used to allow?

[stapuft]

HEY! i figured it out by accident!!! '''' .tab:hover::after '''' and not ''''.tab::after ''''
to match the behavior of the original code this is the string you need to use
@Lej77 @irvinm

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab:hover::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

[irvinm]

@Lej77 using either one of those codes
the numbers appear in the tabs, but they do not disappear?
the numbers even are on the pinned tabs...this is a completely different code, the original code disapeered when the mouse was not hovering over the tab. that code was much better.

@irvinm thats not the code we are talking about man.

is there any way to make it appear only when hovered over, like the burster.after command used to allow?

@stapuft, sorry about that. I thought the topic was "tab counter", not "tab numbering". Totally different, sorry.

[stapuft]

ey it happens, besides they were very close, i didn't even recognize until i read through it a second time.

[Lej77]

I remembered that Multiple Tab Handler injects some CSS code when it registers to Tree Style Tab. That code will conflict with the suggestion that is implemented with .tab::after so that the tab numbering disappears from multi-selected tabs when Multiple Tab Handler is installed. Therefore I changed the wiki to use the implementation with .tab .extra-items-container::after.

@stapuft It seems like you might have been using the code from the "Tab numbering on hovered tabs" section in the wiki. I updated that code in the wiki as well so you could use something like the following:

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab .extra-items-container {
  z-index: unset !important;
}
.tab .extra-items-container::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

.tab .extra-items-container::after {
  opacity: 0;
  transition: 0.2s;
}
.tab:hover .extra-items-container::after {
  opacity: 1;
}

[stapuft]

I remembered that Multiple Tab Handler injects some CSS code when it registers to Tree Style Tab. That code will conflict with the suggestion that is implemented with .tab::after so that the tab numbering disappears from multi-selected tabs when Multiple Tab Handler is installed. Therefore I changed the wiki to use the implementation with .tab .extra-items-container::after.

@stapuft It seems like you might have been using the code from the "Tab numbering on hovered tabs" section in the wiki. I updated that code in the wiki as well so you could use something like the following:

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab .extra-items-container {
  z-index: unset !important;
}
.tab .extra-items-container::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

.tab .extra-items-container::after {
  opacity: 0;
  transition: 0.2s;
}
.tab:hover .extra-items-container::after {
  opacity: 1;
}

adding :hover to the ::after code you already shared works exactly like the old code did, (i posted the edited code snippet in my last post) but thank you man, im a newbie at this but im trying to learn what is the difference between the two codes? what makes one better than the other if they both do the same thing?

[Lej77]

@stapuft My code has the transition property which should make the transitions (hiding or showing tab numbers) more smooth. But if you wan't the transition to be instant then your code is probably better.

[stapuft]

@Lej77 oh ok i see that now, cool thank you, could i made the padding whole pixel numbers? i am using this

#tabbar.overflow { margin-right: -15px; }
#tabbar.overflow { margin-left: -5px; }

to hide my scrollbars, (the theme option to hide them is broken on my end) and because of that the tab numbers are cut off partally.

....i guess that was a dumb question lol, i figured it out myself, it works, nothing is cut off, but now the number is on the oppisite side of the tabs, i actually dont mind that though. the left side of the tabs has more blank space.

.tab:hover::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 5pxm;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

i have noticed though the hoverbox itself moves around when you hover over a hidden tab that is revealed through the css string, i am assuming that this is expected behavior?

.tab.hidden:not(.collapsed):not(.pinned) {
  opacity: 0.5 !important;
  visibility: visible;
  position: static;
  pointer-events: auto;
}

[Lej77]

Positioning tab number

.tab:hover::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 5pxm;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

5pxm is incorrect (pxm isn't a valid unit) which makes Firefox ignore the right property. This is why the tab numbering is shown on the left side of the tab. You could remove that whole line and get the same result. To get better control of the position you could use left: 5px; instead of right: 5pxm; or you can use right: 5px; to do what you originally intended.

Fixed code

.tab:hover::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 5px;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

Hidden tabs

.tab.hidden:not(.collapsed):not(.pinned) {
  opacity: 0.5 !important;
  visibility: visible;
  position: static;
  pointer-events: auto;
}

The problems with hidden tabs is probably because of how you reveal them. If you use position: relative; instead of position: static; everything seems to work fine.

Fixed code

.tab.hidden:not(.collapsed):not(.pinned) {
  opacity: 0.5 !important;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

[stapuft]

you are a genius! i could kiss you!
i feel so stupid i thought i had highlighted the whole "em" and not just the "e" when i changed the line lol, thank you for that. i probably wouldn't have caught that until days from now.
you rule man!! @Lej77
as for the numbers and the side they appear on, with the code i had to use to hide the scrollbar, (the "hide option in the appearance section is broken) the right side highlights overlap the "x" and the tab numbers get hard to read, so having them appear on the left side in the free space seems to work better.