[Bug] Tab count on new tab button gone/bugged

[rixx]

Abstract

I'm using the tab count recipe from the Wiki, copied 1:1. It's been working for a long time now.

I'm running Firefox Nightly, and am mostly reporting this to check if it's changed behaviour or a bug:

Expected result

I used to see the tab count in my "new tab" button.

Actual result

The tab now reads "+++".

Environment

• Platform (OS): Linux
• Version of Firefox: 103.0a1 (2022-06-27) (64-bit)
• Version (or revision) of Tree Style Tab: 3.8.25

[rixx]

Huh. This was solved by commenting out the content: var(--tab-count-text); line and then back in. Sorry for the noise.

[rixx]

When I start Firefox, I reliably see the "+++" in the new tab bar. Opening the addon preferences and changing anything in the stylesheet text box then makes the correct tab count appear (forcing TST or Firefox to reload something?).

Mysterious-though-nice workaround aside, it would be great to not have to do that on every browser start :D

[irvinm]

Can you paste which CSS exactly you are using?

I use tab counting and have no issues ... but on Windows and FF102.1.

[piroor]

@rixx I couldn't reproduce this on my Nightly 103.0a1 on Ubuntu 21.04. Please describe detailed steps to reproduce - sorry I don't know code snippets completely.

[rixx]

Minimal reproduction: I went to about:addons, and from there to TST's preferences. Under "Advanced", I pasted the following in the text box:

.newtab-button::after {
  content: "test";
  pointer-events: none;
  mask: none !important;
  background: none !important;
}

This displayed the text "test" on the new tab button. I then closed firefox, started it again, and now the new tab button only shows a plus:

When I navigate back to the TST settings page, click inside the CSS text box and enter a single space, anywhere, the new tab button switches back:

I have confirmed this behaviour after disabling all other addons.

[irvinm]

I can reproduce this on Ubuntu as well. Using a slightly modified version to hide the "+" before changes are applied. When starting up Firefox, "test" is showing up like this:

... and then when typing anything in the CSS editor, it goes back to normal:

[irvinm]

... one other comment\observation.

I dumped my entire CSS from Windows into Ubuntu and noticed I wasn't seeing my expected behavior, so it made me think of what might be different. In Ubuntu, my theme was set to "Proton". When I changed it to "Photon" everything worked as expected. (Changing to Photon, kept my changes between restarts)

@piroor have there been any recent "Proton" changes that might change this behavior?

[irvinm]

Ok, I think I have a solution. I just inspected it real-time and this CSS works for me regardless of Photon vs. Proton and after restarting the browser.

.newtab-button::after {
  content: "test";
  pointer-events: none;
  mask: none !important;
  background: none !important;
}

:root.simulate-svg-context-fill .newtab-button::after {
	background: none;
	mask: none;
}

[PantherX]

Hiya 👋

Just adding to this report that with the latest version that auto-updated this is that I am seeing instead of the tab counts in the New Tab button:

Prior to this version, everything has been working for few years without issues 😺

This is what I have in my Extra style rules for contents provided by Tree Style Tab

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

tab-item.discarded .label-content {
  color: darkgrey;
}



/* Hide tab close button always */
tab-item tab-closebox {
  display: none;
}


/* Container colored background for tab only in the sidebar */
:root.sidebar .contextual-identity-marker {
  margin: 0 !important;
  position: absolute !important;
  pointer-events: none;Full Auto-show/hide Theme
  z-index: 0;

  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;

  width: unset !important;
  height: unset !important;  

  opacity: 0.60;
}
:root.sidebar tab-label {
  z-index: 1000;
}


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


/* Tab counts in new tab button */
.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;
}


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

Additional information:

• Tree Style Tab Version: 3.8.25 (2022.7.8)
• Tree Style Tab Theme: Photon
• Firefox Version: 102.0.1 (Build ID 20220705093820)
• Firefox Theme: Dark
• OS: Windows 10 21H2 (OS Build 19044.1766)

[PantherX]

Ok, I think I have a solution. I just inspected it real-time and this CSS works for me regardless of Photon vs. Proton and after restarting the browser.

.newtab-button::after {
  content: "test";
  pointer-events: none;
  mask: none !important;
  background: none !important;
}

:root.simulate-svg-context-fill .newtab-button::after {
	background: none;
	mask: none;
}

It seems that adding this bit has resolved my issue (thanks @irvinm ):

/* Potential fix */
:root.simulate-svg-context-fill .newtab-button::after {
	background: none;
	mask: none;
}

I wonder if any of the snippets here: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules needs to be updated?

Will wait and see what the official fix is but glad that I have a solution for now 😸

[rixx]

+1, that fix works here, too!

[roman-orekhov]

irvinm thanks, that worked for me too!

[irvinm]

All,

To be clear, there is not a "bug" here with TST. Everything in the wiki is just to help consolidate information for different changes people have tried over the years via CSS. Anyone can update these CSS segments.

As many of you know, CSS solutions are based on a certain starting point. The challenge with this issue is that there are 2 variables to this solution: Photon vs. Proton ... and ... whether TST is configured to simulate SVG icons (Options -> Development -> Simulate SVG icons [advanced options enabled]).

As long as the simulate SVG icons is enabled (looks like that is the default now), then this simplified solution should work for both Proton and Photon. If "simulate SVG icons" is disabled, this solution would need to be adapted.

:root.simulate-svg-context-fill .newtab-button::after {
  content: "test";
  pointer-events: none;
  mask: none !important;
  background: none !important;
}

If this works for everyone, I can update the wiki.

[PantherX]

Hiya @irvinm

Thanks for the clarification that this isn't a bug... it seems that the CSS segments needs to be updated for it to work correctly with the new version due to... reasons(?) 🤷

I have the Unlocked Expert Options ticked (I assume that is what you meant by advanced options enabled) but under Options -> Development can't find any options for Simulate SVG icons

However, under the All Configs I see mention of SVG and those are ticked so I am guessing that it's already configured?

When I added your new proposed fix to my existing setup, it doesn't work like your previous one:

However, if I appended :root.simulate-svg-context-fill to Tab counts in new tab button [#1661] it then works as expected:

My guess is that you will be updating the CSS code for Tab counts in new tab button [#1661] and anywhere else it is needed.

[irvinm]

Yes, you have it enabled:

In terms of the wiki, the solution should be to have it how you have it in the 2nd screenshot ... the first screenshot certainly isn't right. :)

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#tab-counts-in-new-tab-button-1661

Old:

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

New:

:root.simulate-svg-context-fill .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;
}

[irvinm]

@rixx I have updated the wiki to reflect all of this. Can you close this item if there is nothing else to discuss?

[rixx]

Thank you!

[piroor]

Now I got whats happen. Recently I introduced a workaround for the bug 1763420. It removes mask-image and background, and re-apply with a delay. As the result those declarations becomes having priority higher than user styles.

[piroor]

Very interesting. There are two CSS declarations for the "+" button:

/* defined by TST, in base.css */
:root.simulate-svg-context-fill .newtab-button::after {
    background: var(--tab-text);
    mask: url("./icons/new-16.svg") no-repeat center / 100%;
}

/* defined by the user */
.newtab-button::after {
    content: "test";
    pointer-events: none;
    mask: none !important;
    background: none !important;
}

They CSS selectors have their own "specificity". When multiple CSS declarations are defined for a target, only one declaration having highest specificity become active. Based on the spec, Their specificity are calculated as:

• :root.simulate-svg-context-fill .newtab-button::after => 0-3-1
• .newtab-button::after => 0-1-1

The document says that 0-3-1 should win and the user defined style rule never win due to its lower specificity 0-1-1. However on old version TST the user style was effective, and it still effective when it is applied dynamically. This result looks that specificity of those selectors are ignored. This is possibly an edge case bug of Gecko itself.

Anyway, the solution described at the comment #3153 (comment) is quite effective because :root.simulate-svg-context-fill .newtab-button::after gives same specificity to the user style and the user style should be effective because it is defined after TST's style declaration. Any other CSS selectors having higher specificity are also effective on this case, for example:

• .newtab-button-box.vbox .newtab-button::after => 0-3-1
• .after-tabs .newtab-button-box .newtab-button::after => 0-3-1
• .newtab-button.newtab-button.newtab-button::after => 0-3-1
• #tabbar .newtab-button::after => 1-1-1

[piroor]

I've introduced a new workaround ea2e9dc and the minimum testcase #3153 (comment) looks effective even if I restart Firefox. I hope it should help people who use user styles.

[private-lock]

Hi there, also came here, because my counter was broken, but the fix works for me. Problem solved 👯

I just could not ignore the screenshots - you all managed to switch your TST-Settings to a dark theme. Mine are still glaring white ... is there any setting separate for the options darkness only?