Bug 1689852 - Show autoplay blocked and picture-in-picture text label in tab. r=mconley,fluent-reviewers,flod
☠☠ backed out by d553759a32e2 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Wed, 10 Feb 2021 16:16:19 +0000
changeset 566844 b87c6bdada6e776561fc0adb0adb8d4a8d71609f
parent 566843 2f4d46c963890136a88f6513d3b887a51033887d
child 566845 bd374838529f461a22d46353c3301d446a580649
push id38191
push userbtara@mozilla.com
push dateThu, 11 Feb 2021 05:02:45 +0000
treeherdermozilla-central@5cbcb80f72bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley, fluent-reviewers, flod
bugs1689852
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 1689852 - Show autoplay blocked and picture-in-picture text label in tab. r=mconley,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D103826
browser/base/content/tabbrowser-tab.js
browser/base/content/tabbrowser.css
browser/locales/en-US/browser/browser.ftl
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/tabbrowser-tab.js
+++ b/browser/base/content/tabbrowser-tab.js
@@ -33,18 +33,20 @@
           <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"/>
+              <label class="tab-icon-sound-label tab-icon-sound-playing-label" data-l10n-id="browser-tab-audio-playing" role="presentation"/>
+              <label class="tab-icon-sound-label tab-icon-sound-muted-label" data-l10n-id="browser-tab-audio-muted" role="presentation"/>
+              <label class="tab-icon-sound-label tab-icon-sound-blocked-label" data-l10n-id="browser-tab-audio-blocked" role="presentation"/>
+              <label class="tab-icon-sound-label tab-icon-sound-pip-label" data-l10n-id="browser-tab-audio-pip" role="presentation"/>
             </hbox>
           </vbox>
           <image class="tab-close-button close-icon" role="presentation"/>
         </hbox>
       </stack>
       `;
     }
 
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -13,16 +13,26 @@
 .tab-throbber:not([busy]),
 .tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
 .tab-icon-sound[pinned],
 .tab-sharing-icon-overlay,
 .tab-icon-overlay {
   display: none;
 }
 
+.tab-icon-sound:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
+.tab-icon-sound[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
+.tab-icon-sound[activemedia-blocked] > .tab-icon-sound-playing-label,
+.tab-icon-sound[muted] > .tab-icon-sound-playing-label,
+.tab-icon-sound[pictureinpicture] > .tab-icon-sound-playing-label,
+.tab-icon-sound:not([pictureinpicture]) > .tab-icon-sound-pip-label,
+.tab-icon-sound:not([muted]) > .tab-icon-sound-muted-label {
+  display: none;
+}
+
 .tab-sharing-icon-overlay[sharing]:not([selected]),
 .tab-icon-overlay[soundplaying][pinned],
 .tab-icon-overlay[muted][pinned],
 .tab-icon-overlay[activemedia-blocked][pinned],
 .tab-icon-overlay[pictureinpicture],
 .tab-icon-overlay[crashed] {
   display: -moz-box;
 }
--- a/browser/locales/en-US/browser/browser.ftl
+++ b/browser/locales/en-US/browser/browser.ftl
@@ -351,16 +351,20 @@ browser-window-restore-down-button =
     .tooltiptext = Restore Down
 browser-window-close-button =
     .tooltiptext = Close
 
 ## Tab actions
 
 browser-tab-audio-playing = Playing
 browser-tab-audio-muted = Muted
+# This label should be written in all capital letters if your locale supports them.
+browser-tab-audio-blocked = AUTOPLAY BLOCKED
+# This label should be written in all capital letters if your locale supports them.
+browser-tab-audio-pip = PICTURE-IN-PICTURE
 
 ## Bookmarks toolbar items
 
 browser-import-button2 =
     .label = Import bookmarks…
     .tooltiptext = Import bookmarks from another browser to { -brand-short-name }.
 
 bookmarks-toolbar-empty-message = For quick access, place your bookmarks here on the bookmarks toolbar. <a data-l10n-name="manage-bookmarks">Manage bookmarks…</a>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -543,24 +543,19 @@
 
 .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) {
+.tab-icon-sound:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) > .tab-icon-sound-image:not(:hover),
+.tab-icon-sound:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) > .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;
 }