How do you remove the muted text and icon from the tabs?
I like to mute all of my tabs so they don't play annoying sounds. However a very annoying mute icon appears when I hover over it and the "muted" text is shown under the name. I tried adding to my userChrome.css:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-icon-overlay[muted], .tab-icon-sound[muted] {
display: none !important;
}
This only removes the muted icon, and when I hover over a tab its favicon disappears. I also tried changing browser.tabs.showAudioPlayingIcon as suggested in [answer] but it isn't an option anymore.
How do I remove it completely without changing the context menu item?
Chosen solution
All Replies (6)
See these CSS files for the .tab-icon-overlay and .tab-icon-sound CSS rules.
- https://searchfox.org/mozilla-release/source/browser/base/content/tabbrowser.css
- https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css
See also:
- /questions/1339041 In compact mode, Proton (v89) doesn't show favicons on muted tabs
cor-el said
See these CSS files for the .tab-icon-overlay and .tab-icon-sound CSS rules.See also:
- https://searchfox.org/mozilla-release/source/browser/base/content/tabbrowser.css
- https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css
- /questions/1339041 In compact mode, Proton (v89) doesn't show favicons on muted tabs
Thanks, I've updated my code:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-icon-overlay[muted], .tab-icon-sound[muted], .tab-secondary-label[muted], .tab-icon-sound-muted-label {
display: none !important;
}
The only problem now is that the favicon disappears when the tab is hovered.
I've updated it again:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-icon-overlay[muted], .tab-icon-sound[muted], .tab-secondary-label[muted], .tab-icon-sound-muted-label {
display: none !important;
} .tab-content .tab-icon-image {
opacity: 1.0 !important;
}
It works almost perfectly, but the loading indicator (in place of the favicon when the site is loading) disappears when hovered. Do you know what the class of that is?
Chosen Solution
You can try:
.tab-throbber[busy]::before {}
cor-el said
You can try: .tab-throbber[busy]::before {}
Thank you, my final code is this:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-icon-overlay[muted], .tab-icon-sound[muted], .tab-secondary-label[muted], .tab-icon-sound-muted-label {
display: none !important;
} .tab-content .tab-icon-image, .tab-throbber[busy] {
opacity: 1.0 !important;
}
Note that you can hide the secondary line that shows the Playing and Muted state by modifying the browser.tabs.secondaryTextUnsupportedLocales pref and add your language to the list. For "en-US" this would be "en" (i.e. the part before the '-'):
- ar,bn,bo,ckb,fa,gu,he,hi,ja,km,kn,ko,lo,mr,my,ne,pa,si,ta,te,th,ur,zh,en
Close and restart Firefox to make the change effective and you should no longer see the playing text in "Density: Normal" mode.
You can open the about:config page via the location/address bar. You can click the button to "Accept the Risk and Continue".
Modified by cor-el