Bug 1612648 - Picture in Picture tab mute options moved to overlay on tab image icon. r=mconley

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

browser/base/content/tabbrowser-tab.js

@@ -86,7 +86,7 @@
           "src=image,triggeringprincipal=iconloadingprincipal,requestcontextid,fadein,pinned,selected=visuallyselected,busy,crashed,sharing",
         ".tab-sharing-icon-overlay": "sharing,selected=visuallyselected,pinned",
         ".tab-icon-overlay":
-          "crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
+          "pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
         ".tab-label-container":
           "pinned,selected=visuallyselected,labeldirection",
         ".tab-label":
@@ -409,6 +409,16 @@
         if (this.multiselected) {
           gBrowser.toggleMuteAudioOnMultiSelectedTabs(this);
         } else {
+          if (
+            event.target.classList.contains("tab-icon-sound") &&
+            this.pictureinpicture
+          ) {
+            // When Picture-in-Picture is open, we repurpose '.tab-icon-sound' as
+            // an inert Picture-in-Picture indicator, and expose the '.tab-icon-overlay'
+            // as the mechanism for muting the tab, so we don't need to handle clicks on
+            // '.tab-icon-sound' in this case.
+            return;
+          }
           this.toggleMuteAudio();
         }
         return;

browser/base/content/tabbrowser.css

@@ -22,6 +22,7 @@
 .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;
 }

browser/base/content/tabbrowser.js

@@ -5055,7 +5055,11 @@
               affectedTabsLength,
               gTabBrowserBundle.GetStringFromName("tabs.closeTabs.tooltip")
             ).replace("#1", affectedTabsLength);
-      } else if (tab._overPlayingIcon) {
+      }
+      // When Picture-in-Picture is open, we repurpose '.tab-icon-sound' as
+      // an inert Picture-in-Picture indicator, so we should display
+      // the default tooltip
+      else if (tab._overPlayingIcon && !tab.pictureinpicture) {
         let stringID;
         if (tab.selected) {
           stringID = tab.linkedBrowser.audioMuted

browser/themes/shared/tabs.inc.css

@@ -433,6 +433,7 @@
   list-style-image: url(chrome://global/skin/media/pictureinpicture.svg);
   width: 14px;
   height: 14px;
+  opacity: .8;
 }
 
 .tab-icon-sound[pictureinpicture]:-moz-locale-dir(rtl) {
@@ -453,7 +454,6 @@
   filter: drop-shadow(1px 1px 1px black);
 }
 
-.tab-icon-sound[pictureinpicture]:not(:hover),
 .tab-icon-sound[soundplaying]:not(:hover),
 .tab-icon-sound[muted]:not(:hover),
 .tab-icon-sound[activemedia-blocked]:not(:hover) {

toolkit/components/pictureinpicture/tests/browser.ini

@@ -44,6 +44,7 @@ skip-if = os == 'linux' # Bug 1594223
 [browser_showMessage.js]
 [browser_smallVideoLayout.js]
 [browser_stripVideoStyles.js]
+[browser_tabIconOverlayPiP.js]
 [browser_thirdPartyIframe.js]
 [browser_toggleAfterTabTearOutIn.js]
 skip-if = (os == 'linux' && bits == 64) || (os == 'mac' && !asan && !debug) # Bug 1605546

toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js

@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * The goal of this test is check the that "tab-icon-overlay" image is
+ * showing when the tab is using PiP.
+ *
+ * The browser will create a tab and open a video using PiP
+ * then the tests check that the tab icon overlay image is showing*
+ *
+ *
+ */
+add_task(async () => {
+  let videoID = "with-controls";
+  await BrowserTestUtils.withNewTab(
+    {
+      url: TEST_PAGE_WITH_SOUND,
+      gBrowser,
+    },
+    async browser => {
+      let isVideoPaused = () => {
+        return SpecialPowers.spawn(browser, [videoID], async videoID => {
+          return content.document.getElementById(videoID).paused;
+        });
+      };
+
+      await ensureVideosReady(browser);
+
+      let audioPromise = BrowserTestUtils.waitForEvent(
+        browser,
+        "DOMAudioPlaybackStarted"
+      );
+
+      await SpecialPowers.spawn(browser, [videoID], async videoID => {
+        await content.document.getElementById(videoID).play();
+      });
+
+      // Check that video is playing
+      ok(!(await isVideoPaused()), "The video is not paused.");
+      await audioPromise;
+
+      // Need tab to access the tab-icon-overlay element
+      let tab = gBrowser.getTabForBrowser(browser);
+
+      // Use tab to get the tab-icon-overlay element
+      let tabIconOverlay = tab.getElementsByClassName("tab-icon-overlay")[0];
+
+      // Not in PiP yet so the tab-icon-overlay does not have "pictureinpicture" attribute
+      ok(!tabIconOverlay.hasAttribute("pictureinpicture"), "Not using PiP");
+
+      // Sound is playing so tab should have "soundplaying" attribute
+      ok(tabIconOverlay.hasAttribute("soundplaying"), "Sound is playing");
+
+      // Start the PiP
+      let pipWin = await triggerPictureInPicture(browser, videoID);
+      ok(pipWin, "Got Picture-in-Picture window.");
+
+      // Check that video is still playing
+      ok(!(await isVideoPaused()), "The video is not paused.");
+
+      // Video is still playing so the tab-icon-overlay should have "soundplaying" as an attribute
+      ok(
+        tabIconOverlay.hasAttribute("soundplaying"),
+        "Tab knows sound is playing"
+      );
+
+      // Now in PiP. "pictureinpicture" is an attribute
+      ok(
+        tabIconOverlay.hasAttribute("pictureinpicture"),
+        "Tab knows were using PiP"
+      );
+
+      // We know the tab has sound playing and it is using PiP so we can check the
+      // tab-icon-overlay image is showing
+      let style = window.getComputedStyle(tabIconOverlay);
+      Assert.equal(
+        style.listStyleImage,
+        'url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg")',
+        "Got the tab-icon-overlay image"
+      );
+
+      // Check tab is not muted
+      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
+
+      // Click on tab icon overlay to mute tab and check it is muted
+      tabIconOverlay.click();
+      ok(tabIconOverlay.hasAttribute("muted"), "Tab is muted");
+
+      // Click on tab icon overlay to unmute tab and check it is not muted
+      tabIconOverlay.click();
+      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
+    }
+  );
+});