4.1.1 mute button theming is broken

[awused]

Abstract

Steps to reproduce

1. Set theme to Photon
2. Update to 4.1.1

Expected result

Audio playing indicator/mute button looks like it did before.

Actual result

Mute button is giant and unthemed.

[awused]

The styling is also broken outright in the high contrast theme, with the foreground and background being the same colour.

[enzo-simone]

Same for me.

[Zelman88]

Also have this problem.

[enzo-simone]

Update: I do have this issue on a laptop running Linux Mint 22 Cinnamon, while it is not seen on another laptop running Ubuntu 20.04; both uses the latest available version of Firefox.

[piroor]

Sorry I missed this. The appearance of the "sound playing" button will be uniformed on all themes, with the commit 04cf13b. Screenshots with the commit:

[clockwinder]

Here's the fix I'm using in the mean time. #3695

[tcbbd]

Sorry I missed this. The appearance of the "sound playing" button will be uniformed on all themes, with the commit 04cf13b. Screenshots with the commit:

It is white icon on black background on your configuration. But it's black icon on black background on mine, so I can't see the icon. Currently I use this workaround:

tab-sound-button::before {
  background: white;
}

tab-sound-button {
  filter: invert();
}

[nk-tedo-001]

I'm on 4.1.3 and this is how my media button looks like

Workaround with custom theme is helped, but it would be nice to have it fixed

[piroor]

@tcbbd @nk-tedo-001 Does your problem still happen with Firefox's system theme and no userChrome.css, no user stylesheet in TST's options? What themes of Firefox and the platform do you use?

[nk-tedo-001]

no userChrome.css

Oh, I have it but it seems like there is nothing to conflict with the media icon

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

Also for my user stylesheet - there is only a workaround

Screenshot

What themes of Firefox and the platform do you use?

Theme - System Auto
Version 134.0.2
OS Darwin 24.2.0 Darwin Kernel Version 24.2.0: Fri Dec 6 19:01:59 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6000 (MacOS Apple Silicon)

[tcbbd]

@piroor The problem disappears in a fresh profile. But it seem this is not related to userChrome.css or user style. Because when I import those from my daily profile into the new profile, the mute button still works fine. I'm not sure what addon or config option causes the problem.

Theme - System Auto
Version - 135.0
OS - Windows_NT 10.0 19045

---

Okay, I found that on my daily profile, the addon activates this style:

tab-item:not(.collapsed).sound-playing:not(.muted) tab-sound-button::after,
tab-item:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
  tab-sound-button::after {
  background-image: url("./icons/audio-16.svg");
}

But on the fresh profile, the addon activates this style:

:root.simulate-svg-context-fill tab-item:not(.collapsed).sound-playing:not(.muted) tab-sound-button::after,
:root.simulate-svg-context-fill tab-item:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
  tab-sound-button::after {
  background-image: none;
  mask-image: url("./icons/audio-16.svg");
}

Both are on Tree Style Tab 4.1.3.

[piroor]

@tcbbd Thank you for investigation! In short: you need to turn svg.context-properties.content.enabled to true via about:config. The difference you mentioned is from an expert option (TST options => Unlock Expert Options) under the Development section: Activate workaround for the Bug 1388193 and Bug 1421329 to simulate SVG icons (*This may increase CPU usage. To deactivate this option, you need to activate "svg.context-properties.content.enabled" via "about:config", until these bugs are fixed.) The checkbox with the long label is checked by default, and you need to set svg.context-properties.content.enabled to true if uncheck it.

[piroor]

@nk-tedo-001 I couldn't reproduce the problem with TST 4.1.3 on Nightly 137.0a1 on macOS. One note: the workaround you set need to be removed when you use newer TST - the workaround conflicts updated TST.

[nk-tedo-001]

@nk-tedo-001 I couldn't reproduce the problem with TST 4.1.3 on Nightly 137.0a1 on macOS. One note: the workaround you set need to be removed when you use newer TST - the workaround conflicts updated TST.

I will use Activate workaround for the Bug 1388193 ... it is helped me too.

[github-actions]

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