search

piroor / treestyletab

Tree Style Tab, Show tabs like a tree.
http://piro.sakura.ne.jp/xul/treestyletab/
Other
3.47k stars 278 forks source link

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

Closed rixx closed 2 years ago

rixx commented 2 years ago

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

2022-07-08T13:42:25+02:00

The tab now reads "+++".

Environment

rixx commented 2 years ago

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

rixx commented 2 years ago

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 commented 2 years ago

Can you paste which CSS exactly you are using?

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

piroor commented 2 years ago

@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 commented 2 years ago

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: 2022-07-08T16:27:00+02:00

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: 2022-07-08T16:28:01+02:00

I have confirmed this behaviour after disabling all other addons.

irvinm commented 2 years ago

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:

image

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

image

irvinm commented 2 years ago

... 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 commented 2 years ago

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 commented 2 years ago

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: image

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:

PantherX commented 2 years ago

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 commented 2 years ago

+1, that fix works here, too!

roman-orekhov commented 2 years ago

irvinm thanks, that worked for me too!

irvinm commented 2 years ago

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 commented 2 years ago

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 image

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

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

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

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 commented 2 years ago

Yes, you have it enabled:

image

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 commented 2 years ago

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

rixx commented 2 years ago

Thank you!

piroor commented 2 years ago

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 commented 2 years ago

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:

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 https://github.com/piroor/treestyletab/issues/3153#issuecomment-1179302527 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:

piroor commented 2 years ago

I've introduced a new workaround ea2e9dc and the minimum testcase https://github.com/piroor/treestyletab/issues/3153#issuecomment-1179053960 looks effective even if I restart Firefox. I hope it should help people who use user styles.

private-lock commented 2 years ago

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

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?