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

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

browser/components/sessionstore/SessionStore.sys.mjs

@@ -3110,7 +3110,6 @@ var SessionStoreInternal = {
    *        Tab reference
    */
   resetBrowserToLazyState(aTab) {
-    const gBrowser = aTab.ownerGlobal.gBrowser;
     let browser = aTab.linkedBrowser;
     // Browser is already lazy so don't do anything.
     if (!browser.isConnected) {
@@ -3124,7 +3123,6 @@ var SessionStoreInternal = {
     this._lastKnownFrameLoader.delete(browser.permanentKey);
     this._crashedBrowsers.delete(browser.permanentKey);
     aTab.removeAttribute("crashed");
-    gBrowser.tabContainer.updateTabIndicatorAttr(aTab);
 
     let { userTypedValue = null, userTypedClear = 0 } = browser;
     let hasStartedLoad = browser.didStartLoadSinceLastUserTyping();
@@ -4821,7 +4819,6 @@ var SessionStoreInternal = {
       );
     }
 
-    const gBrowser = aTab.ownerGlobal.gBrowser;
     let browser = aTab.linkedBrowser;
     if (!this._crashedBrowsers.has(browser.permanentKey)) {
       return;
@@ -4841,7 +4838,6 @@ var SessionStoreInternal = {
     // a flash of the about:tabcrashed page after selecting
     // the revived tab.
     aTab.removeAttribute("crashed");
-    gBrowser.tabContainer.updateTabIndicatorAttr(aTab);
 
     browser.loadURI(lazy.blankURI, {
       triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({

browser/components/tabbrowser/content/tab.js

@@ -23,15 +23,13 @@
             <image class="tab-sharing-icon-overlay" role="presentation"/>
             <image class="tab-icon-overlay" role="presentation"/>
           </stack>
+          <html:moz-button type="icon ghost" size="small" class="tab-audio-button" tabindex="-1"></html:moz-button>
           <vbox class="tab-label-container"
                 align="start"
                 pack="center"
                 flex="1">
             <label class="tab-text tab-label" role="presentation"/>
             <hbox class="tab-secondary-label">
-              <label class="tab-icon-sound-label tab-icon-sound-playing-label" data-l10n-id="browser-tab-audio-playing2" role="presentation"/>
-              <label class="tab-icon-sound-label tab-icon-sound-muted-label" data-l10n-id="browser-tab-audio-muted2" 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"/>
               <label class="tab-icon-sound-label tab-icon-sound-tooltip-label" role="presentation"/>
             </hbox>
@@ -85,7 +83,7 @@
         ".tab-content":
           "pinned,selected=visuallyselected,multiselected,titlechanged,attention",
         ".tab-icon-stack":
-          "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,indicator-replaces-favicon",
+          "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
         ".tab-throbber":
           "fadein,pinned,busy,progress,selected=visuallyselected",
         ".tab-icon-pending":
@@ -94,13 +92,15 @@
           "src=image,triggeringprincipal=iconloadingprincipal,requestcontextid,fadein,pinned,selected=visuallyselected,busy,crashed,sharing,pictureinpicture",
         ".tab-sharing-icon-overlay": "sharing,selected=visuallyselected,pinned",
         ".tab-icon-overlay":
-          "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,indicator-replaces-favicon",
+          "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
+        ".tab-audio-button":
+          "soundplaying,soundplaying-scheduledremoval,pinned,muted,activemedia-blocked",
         ".tab-label-container":
           "pinned,selected=visuallyselected,labeldirection",
         ".tab-label":
           "text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
         ".tab-label-container .tab-secondary-label":
-          "soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
+          "pinned,blocked,selected=visuallyselected,pictureinpicture",
         ".tab-close-button": "fadein,pinned,selected=visuallyselected",
       };
     }
@@ -310,10 +310,18 @@
       return this.overlayIcon?.matches(":hover");
     }
 
+    get _overAudioButton() {
+      return this.audioButton?.matches(":hover");
+    }
+
     get overlayIcon() {
       return this.querySelector(".tab-icon-overlay");
     }
 
+    get audioButton() {
+      return this.querySelector(".tab-audio-button");
+    }
+
     get throbber() {
       return this.querySelector(".tab-throbber");
     }
@@ -371,24 +379,6 @@
       if (event.target.classList.contains("tab-close-button")) {
         this.mOverCloseButton = true;
       }
-      if (this._overPlayingIcon) {
-        const selectedTabs = gBrowser.selectedTabs;
-        const contextTabInSelection = selectedTabs.includes(this);
-        const affectedTabsLength = contextTabInSelection
-          ? selectedTabs.length
-          : 1;
-        let stringID;
-        if (this.hasAttribute("activemedia-blocked")) {
-          stringID = "browser-tab-unblock";
-        } else {
-          stringID = this.linkedBrowser.audioMuted
-            ? "browser-tab-unmute"
-            : "browser-tab-mute";
-        }
-        this.setSecondaryTabTooltipLabel(stringID, {
-          count: affectedTabsLength,
-        });
-      }
 
       if (!this.visible) {
         return;
@@ -409,9 +399,6 @@
       if (event.target.classList.contains("tab-close-button")) {
         this.mOverCloseButton = false;
       }
-      if (event.target == this.overlayIcon) {
-        this.setSecondaryTabTooltipLabel(null);
-      }
 
       // If the new target is not part of this tab then this is a mouseleave event.
       if (!this.contains(event.relatedTarget)) {
@@ -451,7 +438,8 @@
         this.style.MozUserFocus = "ignore";
       } else if (
         event.target.classList.contains("tab-close-button") ||
-        event.target.classList.contains("tab-icon-overlay")
+        event.target.classList.contains("tab-icon-overlay") ||
+        event.target.classList.contains("tab-audio-button")
       ) {
         eventMaySelectTab = false;
       }
@@ -516,14 +504,18 @@
       if (
         gBrowser.multiSelectedTabsCount > 0 &&
         !event.target.classList.contains("tab-close-button") &&
-        !event.target.classList.contains("tab-icon-overlay")
+        !event.target.classList.contains("tab-icon-overlay") &&
+        !event.target.classList.contains("tab-audio-button")
       ) {
         // Tabs were previously multi-selected and user clicks on a tab
         // without holding Ctrl/Cmd Key
         gBrowser.clearMultiSelectedTabs();
       }
 
-      if (event.target.classList.contains("tab-icon-overlay")) {
+      if (
+        event.target.classList.contains("tab-icon-overlay") ||
+        event.target.classList.contains("tab-audio-button")
+      ) {
         if (this.activeMediaBlocked) {
           if (this.multiselected) {
             gBrowser.resumeDelayedMediaOnMultiSelectedTabs(this);

browser/components/tabbrowser/content/tabbrowser.js

@@ -2077,9 +2077,6 @@
         // process so the browser can no longer be considered to be
         // crashed.
         tab.removeAttribute("crashed");
-        // we call updatetabIndicatorAttr here, rather than _tabAttrModified, so as
-        // to be consistent with how "crashed" attribute changes are handled elsewhere
-        this.tabContainer.updateTabIndicatorAttr(tab);
       }
 
       // If the findbar has been initialised, reset its browser reference.
@@ -6421,8 +6418,13 @@
       event.stopPropagation();
       let tab = event.target.triggerNode?.closest("tab");
       if (!tab) {
-        event.preventDefault();
+        if (event.target.triggerNode?.getRootNode()?.host?.closest("tab")) {
-        return;
+          // Check if triggerNode is within shadowRoot of moz-button
+          tab = event.target.triggerNode?.getRootNode().host.closest("tab");
+        } else {
+          event.preventDefault();
+          return;
+        }
       }
 
       const tooltip = event.target;
@@ -6431,7 +6433,7 @@
       const tabCount = this.selectedTabs.includes(tab)
         ? this.selectedTabs.length
         : 1;
-      if (tab._overPlayingIcon) {
+      if (tab._overPlayingIcon || tab._overAudioButton) {
         let l10nId;
         const l10nArgs = { tabCount };
         if (tab.selected) {
@@ -7045,7 +7047,6 @@
             // process so the browser can no longer be considered to be
             // crashed.
             tab.removeAttribute("crashed");
-            gBrowser.tabContainer.updateTabIndicatorAttr(tab);
           }
 
           if (this.isFindBarInitialized(tab)) {
@@ -7370,7 +7371,6 @@
           delete this.mBrowser.initialPageLoadedFromUserAction;
           // If the browser is loading it must not be crashed anymore
           this.mTab.removeAttribute("crashed");
-          gBrowser.tabContainer.updateTabIndicatorAttr(this.mTab);
         }
 
         if (this._shouldShowProgress(aRequest)) {

browser/components/tabbrowser/content/tabs.js

@@ -55,8 +55,6 @@
       this.addEventListener("TabAttrModified", this);
       this.addEventListener("TabHide", this);
       this.addEventListener("TabShow", this);
-      this.addEventListener("TabPinned", this);
-      this.addEventListener("TabUnpinned", this);
       this.addEventListener("TabHoverStart", this);
       this.addEventListener("TabHoverEnd", this);
       this.addEventListener("TabGroupExpand", this);
@@ -222,17 +220,6 @@
       this.#updateTabMinWidth();
       this.#updateTabMinHeight();
 
-      let indicatorTabs = gBrowser.visibleTabs.filter(tab => {
-        return (
-          tab.hasAttribute("soundplaying") ||
-          tab.hasAttribute("muted") ||
-          tab.hasAttribute("activemedia-blocked")
-        );
-      });
-      for (const indicatorTab of indicatorTabs) {
-        this.updateTabIndicatorAttr(indicatorTab);
-      }
-
       super.attributeChangedCallback(name, oldValue, newValue);
     }
 
@@ -245,14 +232,6 @@
     }
 
     on_TabAttrModified(event) {
-      if (
-        ["soundplaying", "muted", "activemedia-blocked", "sharing"].some(attr =>
-          event.detail.changed.includes(attr)
-        )
-      ) {
-        this.updateTabIndicatorAttr(event.target);
-      }
-
       if (
         event.detail.changed.includes("soundplaying") &&
         !event.target.visible
@@ -273,14 +252,6 @@
       }
     }
 
-    on_TabPinned(event) {
-      this.updateTabIndicatorAttr(event.target);
-    }
-
-    on_TabUnpinned(event) {
-      this.updateTabIndicatorAttr(event.target);
-    }
-
     on_TabHoverStart(event) {
       if (!this._showCardPreviews) {
         return;
@@ -3056,24 +3027,6 @@
       }
       CustomizableUI.removeListener(this);
     }
-
-    updateTabIndicatorAttr(tab) {
-      const theseAttributes = ["soundplaying", "muted", "activemedia-blocked"];
-      const notTheseAttributes = ["pinned", "sharing", "crashed"];
-
-      if (
-        this.verticalMode ||
-        notTheseAttributes.some(attr => tab.hasAttribute(attr))
-      ) {
-        tab.removeAttribute("indicator-replaces-favicon");
-        return;
-      }
-
-      tab.toggleAttribute(
-        "indicator-replaces-favicon",
-        theseAttributes.some(attr => tab.hasAttribute(attr))
-      );
-    }
   }
 
   customElements.define("tabbrowser-tabs", MozTabbrowserTabs, {

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.audioButton);
-  await clickIcon(tab.overlayIcon);
   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.audioButton);
-  await clickIcon(tab.overlayIcon);
   ok(!tab.linkedBrowser.audioMuted, "Audio should be unmuted now");
 
   info("- tab should be audible -");

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

@@ -574,11 +574,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/modules/ContentCrashHandlers.sys.mjs

@@ -517,7 +517,6 @@ export var TabCrashHandler = {
 
     browser.docShell.displayLoadError(Cr.NS_ERROR_BUILDID_MISMATCH, uri, null);
     tab.setAttribute("crashed", true);
-    gBrowser.tabContainer.updateTabIndicatorAttr(tab);
   },
 
   /**
@@ -542,7 +541,6 @@ export var TabCrashHandler = {
     browser.docShell.displayLoadError(Cr.NS_ERROR_CONTENT_CRASHED, uri, null);
     browser.removeAttribute("crashedPageTitle");
     tab.setAttribute("crashed", true);
-    gBrowser.tabContainer.updateTabIndicatorAttr(tab);
   },
 
   /**

browser/themes/shared/tabbrowser/tab-audio-muted-small.svg

@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-  <path fill="context-fill" d="M6.8 5.5 4.5 3.3l.9-1.1c.4-.5 1.3-.2 1.3.5v2.8zm2 .5c0-1-.5-1.9-1.3-2.4v2.7l1 1c.2-.4.3-.9.3-1.3zM7.7 2.6c1.3.7 2 2 2 3.4 0 .7-.2 1.4-.5 2l.5.5c.5-.8.8-1.6.8-2.5 0-1.7-.9-3.3-2.4-4.1-.2-.1-.4 0-.5.2-.1.2-.1.4.1.5zm-5.1-.1c-.1-.1-.4-.1-.5 0-.1.1-.1.4 0 .5l1.1 1.1h-1c-.4 0-.8.3-.8.8v2.2c0 .4.3.8.8.8h1.5l1.7 2c.4.5 1.3.2 1.3-.5V7.7l1.4 1.4c-.1.1-.2.2-.4.3-.2.1-.2.3-.1.5.1.2.3.2.5.2.2-.1.4-.3.6-.5l.4.4c.1.1.4.1.5 0 .1-.1.1-.4 0-.5l-7-7z"/>
+  <path d="m2.791 3.581 1.347-2.294C4.654.408 6 .774 6 1.793v8.413c0 1.02-1.346 1.386-1.862.507L2.791 8.419c-.031-.053-.051-.111-.071-.169H1a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 1-1h1.72a.93.93 0 0 1 .071-.169zm8.325-.081L9.5 5.116 7.884 3.5 7 4.384 8.616 6 7 7.616l.884.884L9.5 6.884 11.116 8.5 12 7.616 10.384 6 12 4.384l-.884-.884z"/>
 </svg>

browser/themes/shared/tabbrowser/tab-audio-playing-small.svg

@@ -1,6 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-  <path fill="context-fill" d="M6.7 2.6v6.8c0 .7-.9 1-1.3.5l-1.7-2H2.2c-.4 0-.7-.3-.7-.8V4.9c0-.4.3-.8.7-.8h1.5l1.7-2c.5-.5 1.3-.2 1.3.5zM8.8 6c0-1-.5-1.9-1.3-2.4v4.7C8.3 7.9 8.8 7 8.8 6zm-.7-4.1c-.2-.1-.4 0-.5.2-.1.2 0 .4.2.5 1.3.7 2 2 2 3.4 0 1.4-.8 2.8-2 3.4-.2.1-.3.2-.3.4 0 .2.2.4.4.4.1 0 .1 0 .2 0 1.5-.8 2.5-2.4 2.5-4.1-.1-1.8-1-3.4-2.5-4.2z"/>
+    <path d="M7.5 1.881V.595A5.499 5.499 0 0 1 12 6a5.499 5.499 0 0 1-4.5 5.405v-1.286C9.36 9.666 10.75 7.997 10.75 6c0-1.997-1.39-3.666-3.25-4.119zm-3.362-.594L2.791 3.581c-.031.053-.051.111-.071.169H1a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h1.72a.93.93 0 0 0 .071.169l1.347 2.294c.516.879 1.862.513 1.862-.507V1.793C6 .774 4.654.408 4.138 1.287z"/>
-</svg>
+    <path d="M7.5 3.193v5.613c1.161-.413 2-1.504 2-2.807s-.839-2.393-2-2.806z"/>
+</svg>

browser/themes/shared/tabbrowser/tabs.css

@@ -29,7 +29,6 @@
   --tab-shadow-max-size: 6px;
   --tab-block-margin: 4px;
   --tab-icon-end-margin: 5.5px;
-  --tab-icon-overlay-fill: light-dark(white, black);
   --tab-icon-overlay-stroke: light-dark(black, white);
   --tab-label-line-height: 1.7;
   --tab-loading-fill: #0A84FF;
@@ -492,12 +491,16 @@
 .tab-icon-overlay {
   position: relative;
   padding: 2px;
+  top: -5.5px;
+  inset-inline-end: -6px;
+  z-index: 1; /* Overlay tab title */
 
   &[crashed] {
     list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
   }
 
-  &:not([crashed]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
+  &[pinned]:not([crashed]) {
     &[soundplaying] {
       background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
     }
@@ -511,54 +514,39 @@
     }
 
     &:is([soundplaying], [muted], [activemedia-blocked]) {
-      background-color: var(--tab-icon-overlay-stroke);
+      background-color: color-mix(in srgb, currentColor 7%, var(--toolbar-bgcolor));
       background-position: center;
       background-repeat: no-repeat;
       border-radius: 10px;
       -moz-context-properties: fill;
-      fill: var(--tab-icon-overlay-fill);
+      fill: var(--tab-icon-overlay-stroke);
     }
   }
+}
 
-  &:not([indicator-replaces-favicon]) {
+.tab-audio-button {
-    top: -5.5px;
+  display: none;
-    inset-inline-end: -6px;
+  margin-inline-end: var(--tab-icon-end-margin);
-    z-index: 1; /* Overlay tab title */
+  --icon-size-default: 12px;
+  --button-size-icon-small: 24px;
+  --button-min-height-small: 24px;
 
+  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
     &:is([soundplaying], [muted], [activemedia-blocked]) {
-      top: -8px;
+      display: block;
-      inset-inline-end: -6px;
-    }
-  }
-
-  &[indicator-replaces-favicon] {
-    border-radius: 2px;
-    fill-opacity: 0.75;
-
-    &:hover {
-      background-color: color-mix(in srgb, currentColor 15%, transparent);
-      fill-opacity: 0.95;
     }
 
-    &:hover:active {
+    &[soundplaying]::part(button) {
-      background-color: color-mix(in srgb, currentColor 30%, transparent);
+      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
     }
 
-    &:is([soundplaying], [muted], [activemedia-blocked]) {
+    &[muted]::part(button) {
-      &:hover,
+      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
-      &:hover:active {
-        background-color: color-mix(in srgb, currentColor 50%, transparent);
-      }
     }
-  }
 
-  :is(
+    &[activemedia-blocked]::part(button) {
-    :root[uidensity=compact],
+      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
-    #tabbrowser-tabs[secondarytext-unsupported],
+    }
-    :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
-  ) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
-  :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
-    opacity: 0;
   }
 }
 
@@ -633,24 +621,14 @@
 
   #tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &,
   :root[uidensity=compact] &,
-  &:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
+  &:not([pictureinpicture]),
-  &:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
-  &[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
-  &[activemedia-blocked] > .tab-icon-sound-playing-label,
-  &[muted] > .tab-icon-sound-playing-label,
   &[pictureinpicture] > .tab-icon-sound-playing-label,
   &[pictureinpicture] > .tab-icon-sound-muted-label,
   &:not([pictureinpicture]) > .tab-icon-sound-pip-label,
-  &:not([muted]) > .tab-icon-sound-muted-label,
   &:not([showtooltip]) > .tab-icon-sound-tooltip-label,
   &[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
     display: none;
   }
-
-  &[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
-    transition: opacity .3s linear var(--soundplaying-removal-delay);
-    opacity: 0;
-  }
 }
 
 .tab-icon-sound-label {

toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js

@@ -40,12 +40,13 @@ add_task(async () => {
 
       // Use tab to get the tab-icon-overlay element
       let tabIconOverlay = tab.getElementsByClassName("tab-icon-overlay")[0];
+      let tabAudioButton = tab.getElementsByClassName("tab-audio-button")[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");
+      ok(tabAudioButton.hasAttribute("soundplaying"), "Sound is playing");
 
       // Start the PiP
       let pipWin = await triggerPictureInPicture(browser, videoID);
@@ -54,9 +55,9 @@ add_task(async () => {
       // Check that video is still playing
       ok(!(await isVideoPaused(browser, videoID)), "The video is not paused.");
 
-      // Video is still playing so the tab-icon-overlay should have "soundplaying" as an attribute
+      // Video is still playing so the tab-audio-button should have "soundplaying" as an attribute
       ok(
-        tabIconOverlay.hasAttribute("soundplaying"),
+        tabAudioButton.hasAttribute("soundplaying"),
         "Tab knows sound is playing"
       );
 
@@ -67,24 +68,26 @@ add_task(async () => {
       );
 
       // We know the tab has sound playing and it is using PiP so we can check the
-      // tab-icon-overlay image is showing
+      // tab-audio-button image is showing
-      let style = window.getComputedStyle(tabIconOverlay);
+      let style = window.getComputedStyle(
+        tabAudioButton.buttonEl.querySelector(".button-background")
+      );
       Assert.equal(
         style.backgroundImage,
         'url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg")',
-        "Got the tab-icon-overlay image"
+        "Got the tab-audio-button image"
       );
 
       // Check tab is not muted
-      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
+      ok(!tabAudioButton.hasAttribute("muted"), "Tab is not muted");
 
       // Click on tab icon overlay to mute tab and check it is muted
-      tabIconOverlay.click();
+      tabAudioButton.click();
-      ok(tabIconOverlay.hasAttribute("muted"), "Tab is muted");
+      ok(tabAudioButton.hasAttribute("muted"), "Tab is muted");
 
       // Click on tab icon overlay to unmute tab and check it is not muted
-      tabIconOverlay.click();
+      tabAudioButton.click();
-      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
+      ok(!tabAudioButton.hasAttribute("muted"), "Tab is not muted");
     }
   );
 });