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 ALWAYS SHOW Sound Icon in tabs? (77.0.1 (64-bit))

more options

How can I always-show the Sound Icon that appears in tabs? The default behavior is -> "if sound then show icon, if silence then hide icon". Desired behavior is -> "always show icon". Or even, "always allow mute with unMute".

Why? Because the "unMute" addon I use can't mute unless sound is detected and/or the icon is showing.

Open to any viable solution, css or otherwise.

thnx ahead of time.

cheers!

How can I always-show the Sound Icon that appears in tabs? The default behavior is -> "if sound then show icon, if silence then hide icon". Desired behavior is -> "always show icon". Or even, "always allow mute with unMute". Why? Because the "unMute" addon I use can't mute unless sound is detected and/or the icon is showing. Open to any viable solution, css or otherwise. thnx ahead of time. cheers!

Chosen solution

Try to add an opacity:1 rule.

/* TAB: sound icon always visible */
.tab-icon-sound {list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg) !important; display:unset !important; opacity:1 !important}
.tab-icon-sound[muted] {list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg) !important;}

Search for .tab-icon-sound to see what rules are being applied.

Read this answer in context 👍 0

All Replies (11)

more options

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* TAB: sound icon always visible */
.tab-icon-sound {list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg) !important; display:unset !important}
.tab-icon-sound[muted] {list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg) !important;}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

more options

This solution by "cor-el" is 90% there, and if there's no other solution I will mark it solved.

My desired solution : "always show sound icons on all tabs all the time" (even when loading non-sound pages)

This solution : always show sound icons on tabs once sound it is detected, yet remove sound icon when the tab changes pages?

Again, very close to solved.

Thanks to you "cor-el"!!!

more options

Chosen Solution

Try to add an opacity:1 rule.

/* TAB: sound icon always visible */
.tab-icon-sound {list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg) !important; display:unset !important; opacity:1 !important}
.tab-icon-sound[muted] {list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg) !important;}

Search for .tab-icon-sound to see what rules are being applied.

more options

If it still doesn't work then the extension might be overriding these CSS rules.

more options

All extensions disabled.

My userChrome css looks like your suggestion (and w/ your suggested modifications).

Restarted firefox. Same result as before. That is, sound icons only appear on tabs that detect sound. Restarted in safemode. Same result as before.

Different result for you? Perhaps I'm doing something wrong?

more options

Did you had to create a userChrome.css file or were you already using it ?
Did you make sure the file is a CSS file and not a text file with a hidden .txt file extension appended ?

Can you attach screenshots that show the file path and the userChrome.css content ?

The result should be like this.

Modified by cor-el

more options

Had to create userChrome. No hidden "txt" extension.

attached, please see both the path and the userChrome css

This behavior just happened (with extensions re-enabled): -> "Shows Sound Icons on all tabs, yet unMute doesn't work to mute tabs when unmuted, yet allows to unmute when muted". This behavior only happened once, and does not repeat.

Modified by cancerusthree

more options

That seems to be OK.
Did you also check that you do not have a double .css file extension (userChrome.css.css) ?

more options

Alright, I figured out my error. When you suggested "Try to add an opacity:1 rule." initially it lacked the !important, yet for the one time it worked I had used the !important. All the others I was using it without the !important.

Anyway, past that now.

I located another error I believe, within the addon itself. (basically it is checking for an audible flag to change the state.) But, that is beyond this discussion. Your solution works great.

Thank you for your help, and thank you for your patience!

anyone looking to disable the auto-hide feature of the Sound Icon within firefox, this is it.

Modified by cancerusthree

more options

What mute extension is this about ?

more options

it was about an extension called "unMute", but now I'm using "AutoMute" (by danBhentschel).

AutoMute allows hotkey toggles for mute, and it mutes every new tab. So I have ctrl-q bound to toggle mute/sound.

Suffice to say, your solution works great with AutoMute.