Updated userChrome.css that hides the muted text and icon

[Anonymous941]

I've made an updated userChrome.css file to hide the annoying muted text and icon based on #1 that works on Firefox 96. This removes the muted text and icon from normal and pinned tabs. You can still tell whether a tab is muted by right-clicking on it and checking whether "Mute tab" or "Unmute tab" is shown.

Edit: don't use this code, use the updated version instead.

@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;
}

[peter-lyons-kehl]

Thank you for this.

However, this hides the fact that the webpage intends/offers to play sound. If we only hide the icon for muted tabs that don't play sound, then the "muted" icon gives us a visual clue (about sound available).

I've posted an alternative CSS to #1.

[Anonymous941]

I finally fixed the issue with hovering, after hours of effort it turns out you just have to remove the first line:

.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;
}

[Anonymous941]

However, this hides the fact that the webpage intends/offers to play sound. If we only hide the icon for muted tabs that don't play sound, then the "muted" icon gives us a visual clue (about sound available).

@peter-kehl Your alternative CSS isn't showing that a website tries to play sound when I use it, was there an update that broke this? It seems to me that it's impossible to do this with CSS alone; tabs that are muted but that want to play sound simply don't have any classes that are different.

Here's the final userChrome.css that (I think) address all of the issues except for this one:

.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;
}

I'm now looking into whether it's possible to hide it using an extension.

[josephcrowell]

This hides the mute button/icon 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;
}