Backed out changeset a2a3d6bf518f (bug 1921060) as requested for causing multiple regressions.

2024-12-18 20:51:04 +02:00
parent 772734c0e7
commit 30c8718405
11 changed files with 162 additions and 76 deletions
--- a/browser/components/sessionstore/SessionStore.sys.mjs
+++ b/browser/components/sessionstore/SessionStore.sys.mjs
@@ -3170,6 +3170,7 @@ 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) {
@@ -3183,6 +3184,7 @@ 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();
@@ -4922,6 +4924,7 @@ var SessionStoreInternal = {
      );
    }

+    const gBrowser = aTab.ownerGlobal.gBrowser;
    let browser = aTab.linkedBrowser;
    if (!this._crashedBrowsers.has(browser.permanentKey)) {
      return;
@@ -4941,6 +4944,7 @@ 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({
--- a/browser/components/tabbrowser/content/tab.js
+++ b/browser/components/tabbrowser/content/tab.js
@@ -23,13 +23,15 @@
            <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>
@@ -83,7 +85,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",
+          "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,indicator-replaces-favicon",
        ".tab-throbber":
          "fadein,pinned,busy,progress,selected=visuallyselected",
        ".tab-icon-pending":
@@ -92,15 +94,13 @@
          "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",
-        ".tab-audio-button":
-          "soundplaying,soundplaying-scheduledremoval,pinned,muted,activemedia-blocked",
+          "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,indicator-replaces-favicon",
        ".tab-label-container":
          "pinned,selected=visuallyselected,labeldirection",
        ".tab-label":
          "text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
        ".tab-label-container .tab-secondary-label":
-          "pinned,blocked,selected=visuallyselected,pictureinpicture",
+          "soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
        ".tab-close-button": "fadein,pinned,selected=visuallyselected",
      };
    }
@@ -310,18 +310,10 @@
      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");
    }
@@ -379,6 +371,24 @@
      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;
@@ -399,6 +409,9 @@
      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)) {
@@ -438,8 +451,7 @@
        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-audio-button")
+        event.target.classList.contains("tab-icon-overlay")
      ) {
        eventMaySelectTab = false;
      }
@@ -504,18 +516,14 @@
      if (
        gBrowser.multiSelectedTabsCount > 0 &&
        !event.target.classList.contains("tab-close-button") &&
-        !event.target.classList.contains("tab-icon-overlay") &&
-        !event.target.classList.contains("tab-audio-button")
+        !event.target.classList.contains("tab-icon-overlay")
      ) {
        // 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") ||
-        event.target.classList.contains("tab-audio-button")
-      ) {
+      if (event.target.classList.contains("tab-icon-overlay")) {
        if (this.activeMediaBlocked) {
          if (this.multiselected) {
            gBrowser.resumeDelayedMediaOnMultiSelectedTabs(this);
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -2077,6 +2077,9 @@
        // 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.
@@ -6418,14 +6421,9 @@
      event.stopPropagation();
      let tab = event.target.triggerNode?.closest("tab");
      if (!tab) {
-        if (event.target.triggerNode?.getRootNode()?.host?.closest("tab")) {
-          // 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;
      tooltip.removeAttribute("data-l10n-id");
@@ -6433,7 +6431,7 @@
      const tabCount = this.selectedTabs.includes(tab)
        ? this.selectedTabs.length
        : 1;
-      if (tab._overPlayingIcon || tab._overAudioButton) {
+      if (tab._overPlayingIcon) {
        let l10nId;
        const l10nArgs = { tabCount };
        if (tab.selected) {
@@ -7047,6 +7045,7 @@
            // process so the browser can no longer be considered to be
            // crashed.
            tab.removeAttribute("crashed");
+            gBrowser.tabContainer.updateTabIndicatorAttr(tab);
          }

          if (this.isFindBarInitialized(tab)) {
@@ -7371,6 +7370,7 @@
          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)) {
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -55,6 +55,8 @@
      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);
@@ -220,6 +222,17 @@
      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);
    }

@@ -232,6 +245,14 @@
    }

    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
@@ -252,6 +273,14 @@
      }
    }

+    on_TabPinned(event) {
+      this.updateTabIndicatorAttr(event.target);
+    }
+
+    on_TabUnpinned(event) {
+      this.updateTabIndicatorAttr(event.target);
+    }
+
    on_TabHoverStart(event) {
      if (!this._showCardPreviews) {
        return;
@@ -3027,6 +3056,24 @@
      }
      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, {
--- a/browser/components/tabbrowser/test/browser/tabMediaIndicator/browser_mute_webAudio.js
+++ b/browser/components/tabbrowser/test/browser/tabMediaIndicator/browser_mute_webAudio.js
@@ -50,7 +50,8 @@ add_task(async function mute_web_audio() {

  info("- mute browser -");
  ok(!tab.linkedBrowser.audioMuted, "Audio should not be muted by default");
-  await clickIcon(tab.audioButton);
+  await hoverIcon(tab.overlayIcon);
+  await clickIcon(tab.overlayIcon);
  ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");

  info("- stop web audip -");
@@ -61,7 +62,8 @@ add_task(async function mute_web_audio() {

  info("- unmute browser -");
  ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
-  await clickIcon(tab.audioButton);
+  await hoverIcon(tab.overlayIcon);
+  await clickIcon(tab.overlayIcon);
  ok(!tab.linkedBrowser.audioMuted, "Audio should be unmuted now");

  info("- tab should be audible -");
--- a/browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js
+++ b/browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js
@@ -574,6 +574,11 @@ 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;
--- a/browser/modules/ContentCrashHandlers.sys.mjs
+++ b/browser/modules/ContentCrashHandlers.sys.mjs
@@ -517,6 +517,7 @@ export var TabCrashHandler = {

    browser.docShell.displayLoadError(Cr.NS_ERROR_BUILDID_MISMATCH, uri, null);
    tab.setAttribute("crashed", true);
+    gBrowser.tabContainer.updateTabIndicatorAttr(tab);
  },

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

  /**
--- a/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg
+++ b/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 width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-  <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+  <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"/>
 </svg>
--- a/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
+++ b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
@@ -1,7 +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 width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-    <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"/>
-    <path d="M7.5 3.193v5.613c1.161-.413 2-1.504 2-2.807s-.839-2.393-2-2.806z"/>
+<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">
+  <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"/>
 </svg>
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -30,6 +30,7 @@
  --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,16 +493,12 @@
 .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");
  }

-  #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
-  &[pinned]:not([crashed]) {
+  &:not([crashed]) {
    &[soundplaying] {
      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
    }
@@ -515,42 +512,57 @@
    }

    &:is([soundplaying], [muted], [activemedia-blocked]) {
-      background-color: color-mix(in srgb, currentColor 7%, var(--toolbar-bgcolor));
+      background-color: var(--tab-icon-overlay-stroke);
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      -moz-context-properties: fill;
-      fill: var(--tab-icon-overlay-stroke);
-    }
+      fill: var(--tab-icon-overlay-fill);
    }
  }

-.tab-audio-button {
-  display: none;
-  margin-inline-end: var(--tab-icon-end-margin);
-  --icon-size-default: 12px;
-  --button-size-icon-small: 24px;
-  --button-min-height-small: 24px;
+  &:not([indicator-replaces-favicon]) {
+    top: -5.5px;
+    inset-inline-end: -6px;
+    z-index: 1; /* Overlay tab title */

-  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
-      display: block;
+      top: -8px;
+      inset-inline-end: -6px;
+    }
  }

-    &[soundplaying]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+  &[indicator-replaces-favicon] {
+    border-radius: 2px;
+    fill-opacity: 0.75;
+
+    &:hover {
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
+      fill-opacity: 0.95;
    }

-    &[muted]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+    &:hover:active {
+      background-color: color-mix(in srgb, currentColor 30%, transparent);
    }

-    &[activemedia-blocked]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+    &:is([soundplaying], [muted], [activemedia-blocked]) {
+      &:hover,
+      &:hover:active {
+        background-color: color-mix(in srgb, currentColor 50%, transparent);
      }
    }
  }

+  :is(
+    :root[uidensity=compact],
+    #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;
+  }
+}
+
 .tab-label-container {
  overflow: hidden;

@@ -622,14 +634,24 @@

  #tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &,
  :root[uidensity=compact] &,
-  &:not([pictureinpicture]),
+  &:not([soundplaying], [muted], [activemedia-blocked], [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 {
--- a/toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js
+++ b/toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js
@@ -40,13 +40,12 @@ 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(tabAudioButton.hasAttribute("soundplaying"), "Sound is playing");
+      ok(tabIconOverlay.hasAttribute("soundplaying"), "Sound is playing");

      // Start the PiP
      let pipWin = await triggerPictureInPicture(browser, videoID);
@@ -55,9 +54,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-audio-button should have "soundplaying" as an attribute
+      // Video is still playing so the tab-icon-overlay should have "soundplaying" as an attribute
      ok(
-        tabAudioButton.hasAttribute("soundplaying"),
+        tabIconOverlay.hasAttribute("soundplaying"),
        "Tab knows sound is playing"
      );

@@ -68,26 +67,24 @@ add_task(async () => {
      );

      // We know the tab has sound playing and it is using PiP so we can check the
-      // tab-audio-button image is showing
-      let style = window.getComputedStyle(
-        tabAudioButton.buttonEl.querySelector(".button-background")
-      );
+      // tab-icon-overlay image is showing
+      let style = window.getComputedStyle(tabIconOverlay);
      Assert.equal(
        style.backgroundImage,
        'url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg")',
-        "Got the tab-audio-button image"
+        "Got the tab-icon-overlay image"
      );

      // Check tab is not muted
-      ok(!tabAudioButton.hasAttribute("muted"), "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
-      tabAudioButton.click();
-      ok(tabAudioButton.hasAttribute("muted"), "Tab 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
-      tabAudioButton.click();
-      ok(!tabAudioButton.hasAttribute("muted"), "Tab is not muted");
+      tabIconOverlay.click();
+      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
    }
  );
 });