Close Tab icon and New Tab Icon gone

[viking2]

The close Tab icon and the new Tab Icon disappeared. I think after a Firefox update to v101.0.1 (64-bit) on WIN 7: (they are still there on the regular Firefox Tabs)

[calin-stan]

I have the same issue on macOS with Firefox 101.0.1 (64-bit). Reopening the browser sometimes seems to fix this issue.

[viking2]

@calin-stan, Reopening browser and/or restarting PC doesn't work for me.

[naokiri]

Reproduced on default nightly 103.0a1 (2022-06-16) (64-bit) under the following condition.

1. When not using the default system theme and run the Firefox. The icons doesn't appear from the startup.
2. When not using the system theme and then disable the theme. In this case other UI follows the system theme but the TST tabs are still rendered in the old theme, and icons still doesn't appear.

Doesn't reproduce on same version under this condition

1. When using the system theme and run the Firefox. The icons appear from the startup.
2. When using the system theme and enable another theme. In this case the TST tabs also follows and changes the color, and shows appropriate close tabs 'X' icons and new tab '+' icon

[viking2]

The icons are gone for me using the default theme and Firefox v101.0.1 (64-bit) on WIN 7.

[piroor]

Is this same to #3134 ?

[naokiri]

Yes, the symptoms are same as #3134. When I tried in 103.0a1, I used a brand new profile so I don't think I've inherited anything from the old version. Firefox v101 might have fixed for some people as reported in #3134, but this is still an existing problem.

And from my reproducing condition, I now doubt Firefox's theme system for the root of bug. Current workaround in v103 seems to use the system theme, not custom themes.

[viking2]

Suddenly the icons are back after a reboot. I tried a reboot previously, but it didn't help at that time...

[piroor]

@naokiri Could you try inspection of the TST sidebar when you see the problem?

1. Go to about:debugging
2. Choose "This Nightly" from the left pane
3. Extensions => Tree Style Tab => click "Inspect" button
4. Then you'll see a tab with URL about:devtools-toolbox?id=treestyletab%40piro.sakura.ne.jp&type=extension.
5. Click the "Inspector" tab in the toolbar area.
6. Click the "Select an iframe as the currently targetted document" Button .
7. Choose "/sidebar/sidebar.html" from the list.
8. Click the "Pick an element from the page" button , and click the invisible closebox area.
9. Then you'll see an inspection result like this:
10. Expand the <tab-closebox> node and choose ::after under it. Then you'll see an inspection result like this:

The last screenshot indicates that the closebox icon is rendered with var(--tab-text) color cropped with a mask image ./icons/close-16.svg. On my case the custom property --tab-text is defined as --tab-text: var(--tab-text-active), and --tab-text-active is defined as --tab-text-active: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));. --browser-fg-active is glayed out on my case, so the color is from var(--toolbar-non-lwt-textcolor). --toolbar-non-lwt-textcolor is defined as --toolbar-non-lwt-textcolor: var(--in-content-page-color), and --in-content-page-color is defined as --in-content-page-color: var(--grey-90). On my case the closebox is finally rendered with the color --grey-90: #0c0c0d.

TST defines --browser-fg-active dynamically based on the active theme color. If it becomes to transparent or something invisible color accidentally, icons will be invisible. You can dump the color definitions of the active theme with running browser.theme.getCurrent().then(console.log) with the "Console" tab. For example when I activate the "Firefox Alpenglow" theme, I got:

Such an inspection result on various failure cases may help my debugging.

[piroor]

Hmm, now I've seen the problem suddenly. And I've inspected the status of the invisible icon. It still has effective color, with the system default theme.

So I think that it is caused by the another factor: the mask image. TST uses SVG images as mask to crop colored rectangle with the silhouette of the SVG image. Such an icon may become completely invisible if Firefox fails to load those SVG images.

Could you try unchecking and re-checking the checkbox "Activate workaround for the Bug 1388193 and Bug 1421329 to simulate SVG icons" under the "Development" section? It is hidden by default and you need to unlock expert options to see it. When it is unchecked SVG icons are simply loaded as background images (not mask images). I hope Firefox retries to load those SVG resources with the kicking. After that re-enabling the option "Activate workaround ..." may take icons back visible, if Firefox successfully cached those SVG images.

[naokiri]

Sure. I tried on 103.0a1 (2022-06-18) (64-bit)

First I checked the inspector, and the result for background seems fine. background: var(--tab-text); enabled, --tab-text: var(--tab-text-regular); enabled, --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));, --browser-fg exists and enabled, --browser-fg: #AFB8C6; taken from :root enabled.

Screenshot

And interestingly, when I disable and enable the mask by clicking the checkbox of the mask: url("./icons/close-16.svg") no-repeat center / 100%; the close button and plus button appeared. This css style seems not applied at first before I disable and enable it.

Next I tried the development option for 'Activate workaround for the Bug ~~`.

It was enabled by default.

First I disabled the checkbox. Then, the disappeared close button and plus button on TST appeared, but in black color. Not the expected --browser-fg color.

Next, I enabled the checkbox. Then, the close button and plus button on TST disappeared. So this didn't fix the problem.

[naokiri]

I tried again and found that disabling and enabling background: var(--tab-text); in the inspector also fixed the issue and started to show the close button and the plus button.

Update: This fix seems to happen when I enable or disable any css of the tabitem. Just updating the css on tabitem fixes the issue and renders the close and plus button. And I realized this bug also applies to tab-twisty too.

[piroor]

Thanks a lot! It really looks that the root problem is something unknown edge-case bug of Firefox itself around CSS mask...

[Waterspark63]

I tried doing what Naokiri did, and for my side, disabling and re enabling the mask, or background: var(--tab-text) doesn't fix it, and if I hover over the image link it says the svg could not be loaded. And clicking it to open in another page, shows a blank window. Version 101.01 64-Bit.

Let me know if I need to provide anything else to be of help.

[piroor]

if I hover over the image link it says the svg could not be loaded.

Oops, it is due to a bug of Firefox's development tool. The path should be resolved with a base URL of the addon's namespace, but actually it is resolved with a base URL of the development tool itself on the inspector view. You can see the image if you manually resolve the path like as moz-extension://xxxxxxxx/sidebar/styles/icons/cloise-16.svg. Indeed those mask images are loaded with such URLs when masks are applied as expected.

[tcbbd]

I also met this issue on Mac with FIrefox 102.0. It's gone after uncheck "Activate workaround for the Bug 1388193 and Bug 1421329 to simulate SVG icons". Isn't that meant to fix this bug?

[piroor]

I've added an experimental workaround with the commit b01fa48. A development build including the change is available: https://github.com/piroor/treestyletab#development-builds I hope it should solve the problem...

[petob77]

@piroor it is working now, thanks! :)

[jvzr]

I've just been updated to the latest TST version and have noticed that the custom CSS for an alternative throbber doesn't work anymore. Looking at the patch notes, I think it is linked to this issue because of its interaction with CSS masks

I'm pretty sure I picked that CSS from your wiki:

:root.blocking-throbber #blocking-screen .throbber::before, #tabbar tab-item:not(.collapsed).loading .throbber::before {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjb250ZXh0LWZpbGwiIHN0cm9rZS13aWR0aD0iMTgiIHI9IjM2IiBzdHJva2UtZGFzaGFycmF5PSIxNjkuNjQ2MDAzMjkzODQ4ODIgNTguNTQ4NjY3NzY0NjE2Mjc2Ij4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMS44ODY3OTI0NTI4MzAxODg1cyIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L2NpcmNsZT4KPC9zdmc+") !important;
  mask: unset !important;
}

Not really too important, as compared to the two missing buttons of this issue, but anyway I wanted you to know.

(Of course, if the nonsensical, imo, default throbber, which doesn't animate and has a very different style to all other icons in Firefox, was improved... that would fix it too :stuck_out_tongue_closed_eyes: )

[irvinm]

@jvzr, using your SVG, I plugged it into my similar CSS and this seems to work for both Photon and Proton. (Your version only works with one and not the other right now.)

:root.animation #conductor-throbber {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjb250ZXh0LWZpbGwiIHN0cm9rZS13aWR0aD0iMTgiIHI9IjM2IiBzdHJva2UtZGFzaGFycmF5PSIxNjkuNjQ2MDAzMjkzODQ4ODIgNTguNTQ4NjY3NzY0NjE2Mjc2Ij4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMS44ODY3OTI0NTI4MzAxODg1cyIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L2NpcmNsZT4KPC9zdmc+") !important;
}

:root.animation:not(.throbber-synchronizing) tab-item:not(.collapsed).loading:not(.throbber-unsynchronized) .throbber::before,
:root.animation:not(.throbber-synchronizing).have-loading-tab #conductor-throbber,
:root.animation.have-loading-tab #sync-throbber,
:root.animation.blocking-throbber #blocking-screen .throbber::before {
  animation: unset;
}

If you want to simplify it a little, you can also use the built in (to Firefox) loading PNG. [But there is always a risk they remove it at some point]

:root.animation #conductor-throbber {
  background-image: url("chrome://global/skin/icons/loading.png"); 
}

:root.animation:not(.throbber-synchronizing) tab-item:not(.collapsed).loading:not(.throbber-unsynchronized) .throbber::before,
:root.animation:not(.throbber-synchronizing).have-loading-tab #conductor-throbber,
:root.animation.have-loading-tab #sync-throbber,
:root.animation.blocking-throbber #blocking-screen .throbber::before {
  animation: unset;
}

[irvinm]

@viking2 (et al) ... is this issue still happening with the latest version of TST?

If no, @viking2 can you close this item?

[viking2]

@irvinm , I am not sure if it has been resolved as it is random. Currently I have the icons, but next time that I restart, I may not. Unfortunately, I have something wrong with my Firefox profile and it takes about 5 min to restart Firefox so I try not to restart unless I have to.

p.s. I haven't had time to troubleshoot Firefox, but one workaround seems to be to close FF, delete "cache2", start in safe mode and then restart in regular mode.

I also have another strange issue that started 1-2 months ago, and I am not sure if it is related to FF, and if so, to which addon. My commit charge is slowly increasing from about 6 GB after booting up to the max of my page file size, 31 GB. Closing/restarting FF releases a several GB at a time but after about 2 days my commit is 26/31 with no programs running. At that point I need to reboot the computer do avoid programs crashing after starting them.

I am running WIN7- 64 bit

[jvzr]

I've just been updated to the latest TST version and have noticed that the custom CSS for an alternative throbber doesn't work anymore. Looking at the patch notes, I think it is linked to this issue because of its interaction with CSS masks

I'm pretty sure I picked that CSS from your wiki:

:root.blocking-throbber #blocking-screen .throbber::before, #tabbar tab-item:not(.collapsed).loading .throbber::before {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjb250ZXh0LWZpbGwiIHN0cm9rZS13aWR0aD0iMTgiIHI9IjM2IiBzdHJva2UtZGFzaGFycmF5PSIxNjkuNjQ2MDAzMjkzODQ4ODIgNTguNTQ4NjY3NzY0NjE2Mjc2Ij4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMS44ODY3OTI0NTI4MzAxODg1cyIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L2NpcmNsZT4KPC9zdmc+") !important;
  mask: unset !important;
}

Not really too important, as compared to the two missing buttons of this issue, but anyway I wanted you to know.

(Of course, if the nonsensical, imo, default throbber, which doesn't animate and has a very different style to all other icons in Firefox, was improved... that would fix it too stuck_out_tongue_closed_eyes )

The last release fixed the problem I mentioned. Thank you @piroor -san!

[github-actions[bot]]

This issue has been closed due to no response within 14 days after labeled as "maybe fixed", 7 days after last reopened, and 7 days after last commented.

[Self-Perfection]

I do not see close and new tab buttons right now. Addon version is 3.9.2.

[piroor]

Related bug of Firefox side: 1763420 - Sidebar images linked in css are not always rendered

[maxprehl]

Hitting this issue again on 106.0.2 on Windows.

Is there a current workaround? Even restarting FF/rebooting isn't helping.

[o7o7o7]

Uninstalling then clicking "Undo" to install again seems to bring the icons back. Alas, they disappear again after restart.

[piroor]

TST 3.9.10 has a change about this issue: the workaround should work more certainly now.

[zekeblue]

@piroor

Strangely, I have never had the issue of the close tab "X" on tabs missing until 3.9.10. It is now missing!???

Also sidebar scrollbar is gone. "+" sign for new tab at bottom of sidebar moved to the right from center where it was previously.

[piroor]

@zekeblue The missing icons problem is like a ghost - someone never see that but someone see that very frequently.

Missing scrollbar problem is off topic, so please open new issue for that. (BTW I think it can happen if Firefox saves and restores old width of the sidebar in wrong way and removing xulstore.json in your profile possibly solves that.)

[zekeblue]

@zekeblue The missing icons problem is like a ghost - someone never see that but someone see that very frequently.

Missing scrollbar problem is off topic, so please open new issue for that. (BTW I think it can happen if Firefox saves and restores old width of the sidebar in wrong way and removing xulstore.json in your profile possibly solves that.)

Thank you. Interesting result! Deleting xulstore.json not only restored the scrollbar and the off center new tab button, it also restore the missing "x" on the highlighted tab. I will monitor and see if this fix sticks.