Bug 1688237 - Reduce the clickable area for the Mute/Unmute on the tab to the text and icon. r=ntim
authorJared Wein <jwein@mozilla.com>
Thu, 28 Jan 2021 00:18:29 +0000
changeset 565015 826954e5eb5c0915df3ddda123cef7f39bd82247
parent 565014 7d8e8f586ad886b0c644fcad6abfd6079b3c1462
child 565016 2089c69e453b8e8925e3745370f5194de3334329
push id38149
push usermalexandru@mozilla.com
push dateThu, 28 Jan 2021 21:56:44 +0000
treeherdermozilla-central@5facb25bb1e5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1688237
milestone87.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/tabbrowser-tab.js
+++ b/browser/base/content/tabbrowser-tab.js
@@ -28,16 +28,17 @@
                 onunderflow="this.removeAttribute('textoverflow');"
                 flex="1">
             <label class="tab-text tab-label" role="presentation"/>
           </hbox>
           <image class="tab-icon-sound" role="presentation"/>
           <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">
               <image class="tab-icon-sound-image" role="presentation"/>
               <label class="tab-icon-sound-playing-label" data-l10n-id="browser-tab-audio-playing" role="presentation"/>
               <label class="tab-icon-sound-muted-label" data-l10n-id="browser-tab-audio-muted" role="presentation"/>
             </hbox>
           </vbox>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -521,33 +521,48 @@
 
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[pictureinpicture],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[muted],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
   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) {
   opacity: .8;
 }
 
 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted], :hover),
 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted], :hover) {
   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) {
   width: 18px;
   background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
   background-size: 17px 100%;
   background-repeat: no-repeat;
   border-left: 1px solid;