Ability to remove speaker icon from tabs?

[mmf-Github]

Dear abba23,

first of all - awesome extension :) I am really happy with it.

The only thing that happens to me from time to time - I mute / unmute a tab (especially when it is pinned), as the tabs get small. For this it would be great to include an option to remove the speaker icon from the tabs via an options menu!

Thanks for your consideration,

MMF

[abba23]

Hey, I'm glad you find it useful! I already wrote a response to your review on AMO. I'll paste it here again, because others might have the same question.

Unfortunately the speaker icon is part of Firefox' mute functionality and appears automatically. As far as I know, it's not yet possible to disable it using WebExtensions.

You could hide it yourself though by adding something like this

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) {
    display: none;
}

to your userChrome.css.

Edit:
In another review it was just reported that this doesn't work for pinned tabs. If anyone else has the same problem, someone on the TabMixPlus Forum suggested a different solution, which seems to work correctly:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tab-icon-overlay[muted],.tab-icon-sound[muted],.tab-icon-overlay[soundplaying],.tab-icon-sound[soundplaying] {
    display: none !important;
}

[tacosuzy]

I see you reopened this issue recently... does that mean you are taking a look into this? I have the same exact wish that the the creator of this issue has. I have been using chrome only because the mute icon isn't there or is disabled automatically. I would be using firefox as my main browser if it weren't for the mute button. Sometimes I have a lot of tabs open and it makes it quite difficult to avoid the mute button when clicking tabs. The option to disable the mute icon in about:config works but with all of the auto mute type addons they bring the icon back. I tried both of the userchrome.css ideas but neither of them work.

[abba23]

I reopened this because the issue itself really isn't solved yet and closing it makes it harder for people to find the mentioned workaround. I'll eventually close it when Mozilla makes it possible to hide the speaker icon using WebExtensions.

I don't know why the userChrome.css change didn't work for you. I just tried it again and it worked perfectly fine for me with both normal and pinned tabs. Are you sure you used the correct file/folder names and put it into the correct profile folder? You might also have to close Firefox while editing the file, so the changes don't get overwritten.

[tacosuzy]

This is where the chrome folder is located, "*" in username and profile folder title
C:\Users*\AppData\Roaming\Mozilla\Firefox\Profiles*\storage\permanent\chrome
I've attached a screenshot of what the code looks like in the userChrome.css file in case it is being pasted incorrectly.
To verify I am in the correct folder there are 2 other files .metadata and .metadata-v2 and a folder called idb

Firefox version 62.0 64bit ver.
Windows 10 Pro 64bit Insider Build, I have no idea if being on an insider build would affect something like this.

[abba23]

I don't use Windows, but that location doesn't look right. Can you try finding your profile folder as described in this article. The chrome folder likely won't exist yet, if so you'll have to create it yourself.

[tacosuzy]

That helped me a lot, I used my search program and found the folder in question which was inside the firefox folder and I assumed it was the one I needed. The mute icon is gone which is a relief. Do I need to redo everything after each firefox update or does the css stay in place?

Thanks by the way.

[abba23]

No, as far as I know you won't have to redo it after every update.

[seascape]

I added a tweak to the Tab Center Redux wiki to hide (not remove) the mute icons in that vertical tabs implementation. Also works for its pinned tabs.

[leogh73]

Hey, I'm glad you find it useful! I already wrote a response to your review on AMO. I'll paste it here again, because others might have the same question.

Unfortunately the speaker icon is part of Firefox' mute functionality and appears automatically. As far as I know, it's not yet possible to disable it using WebExtensions.
You could hide it yourself though by adding something like this

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab :-moz-any(.tab-icon-sound,.tab-icon-overlay[muted]) {
    display: none;
}

to your userChrome.css.

Edit:
In another review it was just reported that this doesn't work for pinned tabs. If anyone else has the same problem, someone on the TabMixPlus Forum suggested a different solution, which seems to work correctly:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tab-icon-overlay[muted],.tab-icon-sound[muted],.tab-icon-overlay[soundplaying],.tab-icon-sound[soundplaying] {
    display: none !important;
}

THANK YOU SO MUCH.
I've been searching on Google and tried many thinkgs for the last hour to get rid of that stupid icon. I was about to give up. Jesus H. F#ck!! It's finally over. 👏👏👏

[peter-lyons-kehl]

However, the above hides the fact that the webpage intends/offers to play a sound. The following CSS only hides the icon for muted tabs that don't play sound. Then the "muted" icon gives us a visual clue (about sound available).

The following also shows the "playing" icon. That is useful if, for example, earlier you were happy to unmute a tab, you switch to other tab(s), but later you want to mute that tab again and you want an indication in the tab bar (to find it easily, especially if you have many tabs).

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tab-icon-overlay:not([soundplaying]) {
  display: none;
}
.tab-icon-image:not([soundplaying]) {
  opacity: 1 !important;
}

@abba23 May I suggest linking https://addons.mozilla.org/en-US/firefox/addon/mute-sites-by-default to this issue, so that users can choose, please?

[KevinJRussell]

All of the above suggestions work, but also hide the icon of the website, which is unsuitable. I don't have a solution, I don't even know if it's capable to address that with the tools Firefox gives us. But I wanted to make sure others knew.

[Anonymous941]

All of the above suggestions work, but also hide the icon of the website, which is unsuitable. I don't have a solution, I don't even know if it's capable to address that with the tools Firefox gives us. But I wanted to make sure others knew.

@KevinJRussell I posted a Firefox Support question about that issue, and the code at the bottom of the thread fixes that issue as long as you don't hover over the tab. However, as @peter-kehl pointed out in #11, it hides the site's intention of playing sound.

[KevinJRussell]

All of the above suggestions work, but also hide the icon of the website, which is unsuitable. I don't have a solution, I don't even know if it's capable to address that with the tools Firefox gives us. But I wanted to make sure others knew.

@KevinJRussell I posted a Firefox Support question about that issue, and the code at the bottom of the thread fixes that issue as long as you don't hover over the tab. However, as @peter-kehl pointed out in #11, it hides the site's intention of playing sound.

That's not accurate. The code at the bottom of the thread hides the mute icon when sound isn't playing, but it also hides the website icon, which is unsuitable. I use those to identify tabs.

[Anonymous941]

@KevinJRussell Sorry, I forgot I modified that code to make it work properly. Here's the userChrome.css I'm using right now on Firefox Developer Edition:

@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-throbber[busy], .tab-icon-image {
  opacity: 1.0 !important;
}

The only issue is when you hover over the tab, the icon disappears, but hopefully it's better then nothing. If I can find a way to fix that, I'll post it in #11.

[josephcrowell]

This hides the mute button/icon, hides the muted label, keeps the site favicon, and puts a green border across the bottom to indicate a tab is unmuted.

.tab-icon-overlay:not([soundplaying])[muted], .tab-secondary-label:not([soundplaying])[muted] {
    display: none !important;
}
.tab-icon-stack[muted] > .tab-icon-image, .tab-icon-stack[muted] > .tab-throbber[busy]:hover {
    opacity: initial !important;
}
tab:not([muted]) .tab-background {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: darkgreen !important;
}

[teadrinker2015]

My config looks like this:

My userChrome.css:

.tab-icon-image {
    opacity: 100 !important;
}

.tab-icon-overlay {
    margin-top: 15px;
}

In case firefox update their api: How to inspect firefox UI elements

And How to create userChrome.css

#11

[Squaredude]

@josephcrowell Thank you very much! The best solution that keeps all functionalities.