Close Tab icon and New Tab Icon gone #3142

viking2 · 2022-06-14T05:47:56Z

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 · 2022-06-14T06:50:39Z

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

viking2 · 2022-06-14T08:46:01Z

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

naokiri · 2022-06-17T01:50:41Z

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

When not using the default system theme and run the Firefox. The icons doesn't appear from the startup.
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

When using the system theme and run the Firefox. The icons appear from the startup.
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 · 2022-06-17T03:55:10Z

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

piroor · 2022-06-17T05:15:06Z

Is this same to #3134 ?

naokiri · 2022-06-17T05:38:30Z

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 · 2022-06-17T08:37:16Z

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

piroor · 2022-06-17T14:35:46Z

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

Go to about:debugging
Choose "This Nightly" from the left pane
Extensions => Tree Style Tab => click "Inspect" button
Then you'll see a tab with URL about:devtools-toolbox?id=treestyletab%40piro.sakura.ne.jp&type=extension.
Click the "Inspector" tab in the toolbar area.
Click the "Select an iframe as the currently targetted document" Button .
Choose "/sidebar/sidebar.html" from the list.
Click the "Pick an element from the page" button , and click the invisible closebox area.
Then you'll see an inspection result like this:
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 · 2022-06-17T14:56:06Z

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 · 2022-06-17T16:36:37Z

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 · 2022-06-17T16:39:37Z

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 · 2022-06-17T16:55:24Z

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

Waterspark63 · 2022-06-23T15:07:52Z

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 · 2022-06-23T15:22:21Z

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 · 2022-07-02T13:18:10Z

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 · 2022-07-04T16:13:20Z

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 · 2022-07-06T21:00:34Z

@piroor it is working now, thanks! :)

jvzr · 2022-07-08T16:58:00Z

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 😝 )

irvinm · 2022-07-10T02:52:49Z

@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 · 2022-07-10T14:02:38Z

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

If no, @viking2 can you close this item?

viking2 · 2022-07-10T18:35:49Z

@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 · 2022-07-15T18:10:19Z

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 · 2022-07-23T05:10:27Z

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 · 2022-09-18T07:48:01Z

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

piroor · 2022-09-18T12:44:17Z

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

maxprehl · 2022-10-26T19:47:29Z

Hitting this issue again on 106.0.2 on Windows.

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

o7o7o7 · 2022-11-02T04:10:51Z

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

piroor · 2022-11-11T03:28:20Z

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

zekeblue · 2022-11-29T14:51:22Z

@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 · 2022-12-05T05:59:35Z

@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 · 2022-12-05T14:40:55Z

@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.

piroor added the help wanted label Jun 17, 2022

LeeUnd mentioned this issue Jun 24, 2022

No way to close tab w/o right-click #3148

Closed

piroor added a commit that referenced this issue Jul 4, 2022

Add workaround for #3142 to reload mask images

b01fa48

This was referenced Jul 4, 2022

Close and plus buttons dissapear after leaving alone for 1 hour LibreWolf 99-01 on LM 20.3, Cinnamon. #3114

Closed

Collapse and Close buttons Missing In the Tree Style Side Bar #3134

Closed

piroor added the maybe fixed label Jul 7, 2022

github-actions bot closed this as completed Jul 23, 2022

piroor added a commit that referenced this issue Nov 10, 2022

Apply delay to reload mask images #3142

0b44f6d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Close Tab icon and New Tab Icon gone #3142

Close Tab icon and New Tab Icon gone #3142

viking2 commented Jun 14, 2022

calin-stan commented Jun 14, 2022 •

edited

Loading

viking2 commented Jun 14, 2022

naokiri commented Jun 17, 2022 •

edited

Loading

viking2 commented Jun 17, 2022

piroor commented Jun 17, 2022

naokiri commented Jun 17, 2022 •

edited

Loading

viking2 commented Jun 17, 2022

piroor commented Jun 17, 2022

piroor commented Jun 17, 2022

naokiri commented Jun 17, 2022

naokiri commented Jun 17, 2022 •

edited

Loading

piroor commented Jun 17, 2022

Waterspark63 commented Jun 23, 2022 •

edited

Loading

piroor commented Jun 23, 2022

tcbbd commented Jul 2, 2022

piroor commented Jul 4, 2022

petob77 commented Jul 6, 2022

jvzr commented Jul 8, 2022 •

edited

Loading

irvinm commented Jul 10, 2022

irvinm commented Jul 10, 2022

viking2 commented Jul 10, 2022

jvzr commented Jul 15, 2022 •

edited

Loading

github-actions bot commented Jul 23, 2022

Self-Perfection commented Sep 18, 2022

piroor commented Sep 18, 2022

maxprehl commented Oct 26, 2022 •

edited

Loading

o7o7o7 commented Nov 2, 2022

piroor commented Nov 11, 2022

zekeblue commented Nov 29, 2022 •

edited

Loading

piroor commented Dec 5, 2022

zekeblue commented Dec 5, 2022 •

edited

Loading

Close Tab icon and New Tab Icon gone #3142

Close Tab icon and New Tab Icon gone #3142

Comments

viking2 commented Jun 14, 2022

calin-stan commented Jun 14, 2022 • edited Loading

viking2 commented Jun 14, 2022

naokiri commented Jun 17, 2022 • edited Loading

viking2 commented Jun 17, 2022

piroor commented Jun 17, 2022

naokiri commented Jun 17, 2022 • edited Loading

viking2 commented Jun 17, 2022

piroor commented Jun 17, 2022

piroor commented Jun 17, 2022

naokiri commented Jun 17, 2022

naokiri commented Jun 17, 2022 • edited Loading

piroor commented Jun 17, 2022

Waterspark63 commented Jun 23, 2022 • edited Loading

piroor commented Jun 23, 2022

tcbbd commented Jul 2, 2022

piroor commented Jul 4, 2022

petob77 commented Jul 6, 2022

jvzr commented Jul 8, 2022 • edited Loading

irvinm commented Jul 10, 2022

irvinm commented Jul 10, 2022

viking2 commented Jul 10, 2022

jvzr commented Jul 15, 2022 • edited Loading

github-actions bot commented Jul 23, 2022

Self-Perfection commented Sep 18, 2022

piroor commented Sep 18, 2022

maxprehl commented Oct 26, 2022 • edited Loading

o7o7o7 commented Nov 2, 2022

piroor commented Nov 11, 2022

zekeblue commented Nov 29, 2022 • edited Loading

piroor commented Dec 5, 2022

zekeblue commented Dec 5, 2022 • edited Loading

calin-stan commented Jun 14, 2022 •

edited

Loading

naokiri commented Jun 17, 2022 •

edited

Loading

naokiri commented Jun 17, 2022 •

edited

Loading

naokiri commented Jun 17, 2022 •

edited

Loading

Waterspark63 commented Jun 23, 2022 •

edited

Loading

jvzr commented Jul 8, 2022 •

edited

Loading

jvzr commented Jul 15, 2022 •

edited

Loading

maxprehl commented Oct 26, 2022 •

edited

Loading

zekeblue commented Nov 29, 2022 •

edited

Loading

zekeblue commented Dec 5, 2022 •

edited

Loading