This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to Hide the Mute Tab Button?

  • 2 replies
  • 2 have this problem
  • 1 view
  • Last reply by Tclarke02

more options

I've tried following both methods for dissabling the mute button on tabs, it's a slight annoyance, since it's easy to accidentally mute a tab when it's pinned.

Specifically, the first method I've tried changing the setting in about:config called "browser.tabs.showAudioPlayingIcon" from true to false, which was from 7 years ago it seems, which had no effect.

The second method was by making a new rule in a "userChrome.css" file in a new folder called "chrome" with that exact naming, case sensitive. The code in that file is as follows:

/* Hide the mute/unmute button */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
    display: none !important;
}
/* Keep site icon visible on hover */
.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), 
     /* for site icon with Compact density */
:root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
    opacity: 1 !important; /* overrides full transparency with full opacity */
}

If there's an updated version of the code that's meant to have that effect in modern firefox, then please let me know, or if there's some other new way of removing the mute button on tabs. Thanks.

I've tried following both methods for dissabling the mute button on tabs, it's a slight annoyance, since it's easy to accidentally mute a tab when it's pinned. Specifically, the first method I've tried changing the setting in about:config called "browser.tabs.showAudioPlayingIcon" from true to false, which was from 7 years ago it seems, which had no effect. The second method was by making a new rule in a "userChrome.css" file in a new folder called "chrome" with that exact naming, case sensitive. The code in that file is as follows: <pre><nowiki>/* Hide the mute/unmute button */ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) { display: none !important; } /* Keep site icon visible on hover */ .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), /* for site icon with Compact density */ :root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) { opacity: 1 !important; /* overrides full transparency with full opacity */ }</nowiki></pre><br> If there's an updated version of the code that's meant to have that effect in modern firefox, then please let me know, or if there's some other new way of removing the mute button on tabs. Thanks.

Modified by cor-el

Chosen solution

I have added a <pre> tag before the </pre> tag after your userChrome.css code to make it easier to read:

/* Hide the mute/unmute button */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
    display: none !important;
}
/* Keep site icon visible on hover */
.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), 
     /* for site icon with Compact density */
:root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
    opacity: 1 !important; /* overrides full transparency with full opacity */
}


Is it working for you on non-pinned tabs? If not, could you double-check your process with setting up the file? I have a "how to" page here regarding where to locate the chrome folder and a setting to change in about:config: https://www.userchrome.org/how-create-userchrome-css.html

To make it apply to pinned tabs as well, you need to remove [pinned] from the first rule:

/* Hide the mute/unmute button */
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted]) {
    display: none !important;
}
Read this answer in context 👍 2

All Replies (2)

more options

Chosen Solution

I have added a <pre> tag before the </pre> tag after your userChrome.css code to make it easier to read:

/* Hide the mute/unmute button */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
    display: none !important;
}
/* Keep site icon visible on hover */
.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), 
     /* for site icon with Compact density */
:root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
    opacity: 1 !important; /* overrides full transparency with full opacity */
}


Is it working for you on non-pinned tabs? If not, could you double-check your process with setting up the file? I have a "how to" page here regarding where to locate the chrome folder and a setting to change in about:config: https://www.userchrome.org/how-create-userchrome-css.html

To make it apply to pinned tabs as well, you need to remove [pinned] from the first rule:

/* Hide the mute/unmute button */
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted]) {
    display: none !important;
}

Modified by jscher2000 - Support Volunteer

more options

Thanks for a prompt reply, it does work on non-pinned tabs, I was about to mention that as an edit as it happens.

Thanks for the help, I'll try it now.