search

abba23 / mute-sites-by-default

WebExtension that mutes all sites by default and remembers unmuted sites
https://addons.mozilla.org/en-US/firefox/addon/mute-sites-by-default
GNU General Public License v3.0
29 stars 5 forks source link

Updated userChrome.css that hides the muted text and icon #11

Open Anonymous941 opened 2 years ago

Anonymous941 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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