Bug 1921060 - Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements,sidebar-reviewers,fluent-reviewers,bolsson

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

browser/components/tabbrowser/test/browser/tabMediaIndicator/browser_mute_webAudio.js

@@ -50,8 +50,7 @@ add_task(async function mute_web_audio() {
 
   info("- mute browser -");
   ok(!tab.linkedBrowser.audioMuted, "Audio should not be muted by default");
-  await hoverIcon(tab.overlayIcon);
-  await clickIcon(tab.overlayIcon);
+  await clickIcon(tab.audioButton);
   ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
 
   info("- stop web audip -");
@@ -62,8 +61,7 @@ add_task(async function mute_web_audio() {
 
   info("- unmute browser -");
   ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
-  await hoverIcon(tab.overlayIcon);
-  await clickIcon(tab.overlayIcon);
+  await clickIcon(tab.audioButton);
   ok(!tab.linkedBrowser.audioMuted, "Audio should be unmuted now");
 
   info("- tab should be audible -");

browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js

@@ -184,7 +184,12 @@ async function test_muting_using_menu(tab, expectMuted) {
 }
 
 async function test_playing_icon_on_tab(tab, browser, isPinned) {
-  let icon = isPinned ? tab.overlayIcon : tab.overlayIcon;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed ? tab.overlayIcon : tab.audioButton;
   let isActiveTab = tab === gBrowser.selectedTab;
 
   await play(tab);
@@ -376,7 +381,16 @@ async function test_swapped_browser_while_playing(oldTab, newBrowser) {
     "Expected the correct soundplaying attribute on the new tab"
   );
 
-  await test_tooltip(newTab.overlayIcon, "Unmute tab", true, newTab);
+  let isPinned = newTab.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed
+      ? newTab.overlayIcon
+      : newTab.audioButton;
+  await test_tooltip(icon, "Unmute tab", true, newTab);
 }
 
 async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
@@ -449,14 +463,29 @@ async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
     "Expected the correct soundplaying attribute on the new tab"
   );
 
-  await test_tooltip(newTab.overlayIcon, "Unmute tab", true, newTab);
+  let isPinned = newTab.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed
+      ? newTab.overlayIcon
+      : newTab.audioButton;
+  await test_tooltip(icon, "Unmute tab", true, newTab);
 }
 
 async function test_browser_swapping(tab) {
   // First, test swapping with a playing but muted tab.
   await play(tab);
-
-  await test_mute_tab(tab, tab.overlayIcon, true);
+  let isPinned = tab.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed ? tab.overlayIcon : tab.audioButton;
+  await test_mute_tab(tab, icon, true);
 
   await BrowserTestUtils.withNewTab(
     {
@@ -574,11 +603,6 @@ async function test_mute_keybinding() {
     let mutedPromise = get_wait_for_mute_promise(tab, true);
     EventUtils.synthesizeKey("m", { ctrlKey: true });
     await mutedPromise;
-    is(
-      tab.hasAttribute("indicator-replaces-favicon"),
-      !tab.pinned,
-      "Mute indicator should replace the favicon on hover if the tab isn't pinned"
-    );
     mutedPromise = get_wait_for_mute_promise(tab, false);
     EventUtils.synthesizeKey("m", { ctrlKey: true });
     await mutedPromise;

browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_mute_unmute.js

@@ -39,8 +39,14 @@ add_task(async function muteTabs_usingButton() {
   }
 
   // Mute tab0 which is not multiselected, thus other tabs muted state should not be affected
-  let tab0MuteAudioBtn = tab0.overlayIcon;
-  await test_mute_tab(tab0, tab0MuteAudioBtn, true);
+  let isPinned = tab0.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed ? tab0.overlayIcon : tab0.audioButton;
+  await test_mute_tab(tab0, icon, true);
 
   ok(muted(tab0), "Tab0 is muted");
   for (let i = 1; i <= 4; i++) {
@@ -72,8 +78,14 @@ add_task(async function muteTabs_usingButton() {
   //  b) unmuted tabs (tab1, tab3) will become muted.
   //  b) media-blocked tabs (tab2) will remain media-blocked.
   // However tab4 (unmuted) which is not multiselected should not be affected.
-  let tab1MuteAudioBtn = tab1.overlayIcon;
-  await test_mute_tab(tab1, tab1MuteAudioBtn, true);
+  isPinned = tab1.pinned;
+  isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  icon =
+    isPinned || isVerticalAndCollapsed ? tab1.overlayIcon : tab1.audioButton;
+  await test_mute_tab(tab1, icon, true);
 
   // Check mute state
   ok(muted(tab0), "Tab0 is still muted");
@@ -130,8 +142,14 @@ add_task(async function unmuteTabs_usingButton() {
   //  b) unmuted tabs (tab0) will remain unmuted.
   //  c) media-blocked tabs (tab1, tab2) will remain blocked.
   // However tab4 (muted) which is not multiselected should not be affected.
-  let tab3MuteAudioBtn = tab3.overlayIcon;
-  await test_mute_tab(tab3, tab3MuteAudioBtn, false);
+  let isPinned = tab3.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed ? tab3.overlayIcon : tab3.audioButton;
+  await test_mute_tab(tab3, icon, false);
 
   ok(!muted(tab0), "Tab0 is not muted");
   ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");
@@ -243,8 +261,14 @@ add_task(async function playTabs_usingButton() {
   //  b) unmuted tabs (tab3) will remain unmuted.
   //  c) media-blocked tabs (tab1, tab2) will become unblocked.
   // However tab4 (muted) which is not multiselected should not be affected.
-  let tab2MuteAudioBtn = tab2.overlayIcon;
-  await test_mute_tab(tab2, tab2MuteAudioBtn, false);
+  let isPinned = tab2.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed ? tab2.overlayIcon : tab2.audioButton;
+  await test_mute_tab(tab2, icon, false);
 
   ok(muted(tab0), "Tab0 is muted");
   ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");

browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_play.js

@@ -151,8 +151,15 @@ add_task(async function testDelayPlayWhenUsingButton() {
   let tab2BlockPromise = wait_for_tab_media_blocked_event(tab2, false);
 
   // Use the overlay icon on tab2 to play media on the selected tabs
+  let isPinned = tab2.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon =
+    isPinned || isVerticalAndCollapsed ? tab2.overlayIcon : tab2.audioButton;
   info("Press play tab2 icon");
-  await pressIcon(tab2.overlayIcon);
+  await pressIcon(icon);
 
   // tab0, tab1, and tab2 were played and multiselected
   // They will now be unblocked and playing media

browser/components/tabbrowser/test/browser/tabs/browser_tab_play.js

@@ -152,14 +152,24 @@ add_task(async function testDelayPlayWhenUsingButton() {
   ok(activeMediaBlocked(tab1), "Tab1 is activemedia-blocked");
 
   info("Press the Play Tab icon on tab0");
-  await pressIcon(tab0.overlayIcon);
+  let isPinned = tab0.pinned;
+  let isVerticalAndCollapsed =
+    Services.prefs.getBoolPref("sidebar.revamp", false) &&
+    Services.prefs.getBoolPref("sidebar.verticalTabs", false) &&
+    !window.SidebarController._state.launcherExpanded;
+  let icon0 =
+    isPinned || isVerticalAndCollapsed ? tab0.overlayIcon : tab0.audioButton;
+  await pressIcon(icon0);
 
   // tab0 unblocked, tab1 blocked
   ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");
   ok(activeMediaBlocked(tab1), "Tab1 is activemedia-blocked");
 
   info("Press the Play Tab icon on tab1");
-  await pressIcon(tab1.overlayIcon);
+  isPinned = tab1.pinned;
+  let icon1 =
+    isPinned || isVerticalAndCollapsed ? tab1.overlayIcon : tab1.audioButton;
+  await pressIcon(icon1);
 
   // tab0 unblocked, tab1 unblocked
   ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");