Bug 1688237 - Reduce the clickable area for the Mute/Unmute on the tab to the text and icon. r=ntim

Differential Revision: https://phabricator.services.mozilla.com/D102961

browser/base/content/tabbrowser-tab.js

@@ -33,6 +33,7 @@
           <vbox class="tab-label-container proton"
                 onoverflow="this.setAttribute('textoverflow', 'true');"
                 onunderflow="this.removeAttribute('textoverflow');"
+                align="start"
                 flex="1">
             <label class="tab-text tab-label" role="presentation"/>
             <hbox class="tab-icon-sound">

browser/themes/shared/tabs.inc.css

@@ -526,6 +526,7 @@
   filter: drop-shadow(1px 1px 1px black);
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-icon-sound[soundplaying]:not(:hover),
 .tab-icon-sound[muted]:not(:hover),
 .tab-icon-sound[activemedia-blocked]:not(:hover) {
@@ -537,12 +538,26 @@
   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }
+} /*** END !proton ***/
 
 .tab-icon-sound[muted] > .tab-icon-sound-playing-label,
 .tab-icon-sound:not([muted]) > .tab-icon-sound-muted-label {
   display: none;
 }
 
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+.tab-icon-sound:is([soundplaying], [muted], [activemedia-blocked]) > .tab-icon-sound-image:not(:hover),
+.tab-icon-sound:is([soundplaying], [muted], [activemedia-blocked]) > .tab-icon-sound-label:not(:hover) {
+  opacity: .8;
+}
+
+.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]) > .tab-icon-sound-image:not(:hover),
+.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted], :hover) {
+  transition: opacity .3s linear var(--soundplaying-removal-delay);
+  opacity: 0;
+}
+} /*** END proton ***/
+
 /* Tab Overflow */
 #tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator),
 #tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {