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

Disabling "mute tab" icon doesn't work.

  • 2 replies
  • 2 have this problem
  • 158 views
  • Last reply by Baal101

more options

I read this article: https://support.mozilla.org/en-US/questions/1092509

And i switch "browser.tabs.showAudioPlayingIcon" to "false" and restart the browser. But I am still able to turn off the sound by clicking the icon on the tab. The config option is still set to "false".

What is the proper way to disable mute icon on tabs?

Firefox 89.0.1 (64 bit)

I read this article: https://support.mozilla.org/en-US/questions/1092509 And i switch "browser.tabs.showAudioPlayingIcon" to "false" and restart the browser. But I am still able to turn off the sound by clicking the icon on the tab. The config option is still set to "false". What is the proper way to disable mute icon on tabs? Firefox 89.0.1 (64 bit)

All Replies (2)

more options

The problem is that the icon appears when you move the mouse pointer over the tab in a spot where it's easy to hit accidentally?

At some point, that preference was removed, so re-creating it won't have any effect. I'm not aware of any current way to suppress the icon/button.

If there's no official solution, the community-supported workaround would be to use custom style rules in a userChrome.css file. For example:

/* 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 */
}

How do you install that? It's a little bit of a project, so make sure you set aside 10 quiet minutes to work through it.

(For anyone who already has a userChrome.css file set up, you just need to add the above rule to your file.)

(A) Select and copy the above style rule code

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that file browser window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

I suggest bookmarking any thread you get userChrome.css code from for future reference (in case the rule stops working).

more options

Thanks jscher2000 but i will probably just switch to another browser, will be easier and won't generate any problems in the future.