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
2025-01-13 17:55:32 +00:00
parent 8050d3e240
commit 50f355f8ec
17 changed files with 191 additions and 213 deletions
--- a/browser/components/sessionstore/SessionStore.sys.mjs
+++ b/browser/components/sessionstore/SessionStore.sys.mjs
@@ -3197,7 +3197,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) {
@@ -3211,7 +3210,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();
@@ -4959,7 +4957,6 @@ var SessionStoreInternal = {
      );
    }

-    const gBrowser = aTab.ownerGlobal.gBrowser;
    let browser = aTab.linkedBrowser;
    if (!this._crashedBrowsers.has(browser.permanentKey)) {
      return;
@@ -4979,7 +4976,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({
--- a/browser/components/tabbrowser/content/tab.js
+++ b/browser/components/tabbrowser/content/tab.js
@@ -23,17 +23,14 @@
            <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>
          </vbox>
          <image class="tab-close-button close-icon" role="button" data-l10n-id="tabbrowser-close-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
@@ -85,7 +82,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 +91,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":
+          "crashed,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 +309,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 +378,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 +398,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 +437,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 +503,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);
@@ -611,27 +602,6 @@
      this.dispatchEvent(new CustomEvent("TabHoverEnd", { bubbles: true }));
    }

-    setSecondaryTabTooltipLabel(l10nID, l10nArgs) {
-      this.querySelector(".tab-secondary-label").toggleAttribute(
-        "showtooltip",
-        l10nID
-      );
-
-      const tooltipEl = this.querySelector(".tab-icon-sound-tooltip-label");
-
-      if (l10nArgs) {
-        tooltipEl.setAttribute("data-l10n-args", JSON.stringify(l10nArgs));
-      } else {
-        tooltipEl.removeAttribute("data-l10n-args");
-      }
-      if (l10nID) {
-        tooltipEl.setAttribute("data-l10n-id", l10nID);
-      } else {
-        tooltipEl.removeAttribute("data-l10n-id");
-      }
-      // TODO(Itiel): Maybe simplify this when bug 1830989 lands
-    }
-
    resumeDelayedMedia() {
      if (this.activeMediaBlocked) {
        this.removeAttribute("activemedia-blocked");
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -2093,9 +2093,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.
@@ -6488,9 +6485,14 @@
      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");
@@ -6498,7 +6500,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) {
@@ -7112,7 +7114,6 @@
            // process so the browser can no longer be considered to be
            // crashed.
            tab.removeAttribute("crashed");
-            gBrowser.tabContainer.updateTabIndicatorAttr(tab);
          }

          if (this.isFindBarInitialized(tab)) {
@@ -7437,7 +7438,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)) {
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/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);
@@ -227,17 +225,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);
    }

@@ -250,20 +237,19 @@
    }

    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
      ) {
        this._hiddenSoundPlayingStatusChanged(event.target);
      }
+      if (
+        event.detail.changed.includes("soundplaying") ||
+        event.detail.changed.includes("muted") ||
+        event.detail.changed.includes("activemedia-blocked")
+      ) {
+        this.updateTabSoundLabel(event.target);
+      }
    }

    on_TabHide(event) {
@@ -278,14 +264,6 @@
      }
    }

-    on_TabPinned(event) {
-      this.updateTabIndicatorAttr(event.target);
-    }
-
-    on_TabUnpinned(event) {
-      this.updateTabIndicatorAttr(event.target);
-    }
-
    on_TabHoverStart(event) {
      if (!this._showCardPreviews) {
        return;
@@ -3126,24 +3104,30 @@
      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))
+    updateTabSoundLabel(tab) {
+      // Add aria-label for inline audio button
+      const [unmute, mute, unblock] =
+        gBrowser.tabLocalization.formatMessagesSync([
+          "tabbrowser-unmute-tab-audio-aria-label",
+          "tabbrowser-mute-tab-audio-aria-label",
+          "tabbrowser-unblock-tab-audio-aria-label",
+        ]);
+      if (tab.audioButton) {
+        if (tab.hasAttribute("muted") || tab.hasAttribute("soundplaying")) {
+          let ariaLabel;
+          tab.linkedBrowser.audioMuted
+            ? (ariaLabel = unmute.attributes[0].value)
+            : (ariaLabel = mute.attributes[0].value);
+          tab.audioButton.setAttribute("aria-label", ariaLabel);
+        } else if (tab.hasAttribute("activemedia-blocked")) {
+          tab.audioButton.setAttribute(
+            "aria-label",
+            unblock.attributes[0].value
          );
        }
      }
+    }
+  }

  customElements.define("tabbrowser-tabs", MozTabbrowserTabs, {
    extends: "tabs",
--- a/browser/components/tabbrowser/test/browser/tabMediaIndicator/browser_mute_webAudio.js
+++ b/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 -");
--- a/browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js
+++ b/browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js
@@ -184,7 +184,7 @@ 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 icon = isPinned ? tab.overlayIcon : tab.audioButton;
  let isActiveTab = tab === gBrowser.selectedTab;

  await play(tab);
@@ -376,7 +376,7 @@ 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);
+  await test_tooltip(newTab.audioButton, "Unmute tab", true, newTab);
 }

 async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
@@ -449,14 +449,14 @@ 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);
+  await test_tooltip(newTab.audioButton, "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);
+  await test_mute_tab(tab, tab.audioButton, true);

  await BrowserTestUtils.withNewTab(
    {
@@ -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;
--- a/browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_mute_unmute.js
+++ b/browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_mute_unmute.js
@@ -39,7 +39,7 @@ 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;
+  let tab0MuteAudioBtn = tab0.audioButton;
  await test_mute_tab(tab0, tab0MuteAudioBtn, true);

  ok(muted(tab0), "Tab0 is muted");
@@ -72,7 +72,7 @@ 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;
+  let tab1MuteAudioBtn = tab1.audioButton;
  await test_mute_tab(tab1, tab1MuteAudioBtn, true);

  // Check mute state
@@ -130,7 +130,7 @@ 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;
+  let tab3MuteAudioBtn = tab3.audioButton;
  await test_mute_tab(tab3, tab3MuteAudioBtn, false);

  ok(!muted(tab0), "Tab0 is not muted");
@@ -243,7 +243,7 @@ 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;
+  let tab2MuteAudioBtn = tab2.audioButton;
  await test_mute_tab(tab2, tab2MuteAudioBtn, false);

  ok(muted(tab0), "Tab0 is muted");
--- a/browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_play.js
+++ b/browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_play.js
@@ -152,7 +152,7 @@ add_task(async function testDelayPlayWhenUsingButton() {

  // Use the overlay icon on tab2 to play media on the selected tabs
  info("Press play tab2 icon");
-  await pressIcon(tab2.overlayIcon);
+  await pressIcon(tab2.audioButton);

  // tab0, tab1, and tab2 were played and multiselected
  // They will now be unblocked and playing media
--- a/browser/locales/en-US/browser/tabbrowser.ftl
+++ b/browser/locales/en-US/browser/tabbrowser.ftl
@@ -67,6 +67,16 @@ tabbrowser-unblock-tab-audio-tooltip =
           *[other] Play { $tabCount } tabs
        }

+## Tooltips for tab audio control
+
+tabbrowser-unmute-tab-audio-aria-label =
+    .aria-label = Unmute tab
+tabbrowser-mute-tab-audio-aria-label =
+    .aria-label = Mute tab
+# Used to unblock a tab with audio from autoplaying
+tabbrowser-unblock-tab-audio-aria-label =
+    .aria-label = Play tab
+
 ## Confirmation dialog when closing a window with more than one tab open,
 ## or when quitting when only one window is open.

--- a/browser/modules/ContentCrashHandlers.sys.mjs
+++ b/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);
  },

  /**
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -238,6 +238,7 @@
  skin/classic/browser/tabbrowser/tab-audio-playing-small.svg  (../shared/tabbrowser/tab-audio-playing-small.svg)
  skin/classic/browser/tabbrowser/tab-audio-muted-small.svg    (../shared/tabbrowser/tab-audio-muted-small.svg)
  skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg  (../shared/tabbrowser/tab-audio-blocked-small.svg)
+  skin/classic/browser/tabbrowser/tab-audio-blocked-circle-12.svg (../shared/tabbrowser/tab-audio-blocked-circle-12.svg)
  skin/classic/browser/tabbrowser/tab-drag-indicator.svg       (../shared/tabbrowser/tab-drag-indicator.svg)
  skin/classic/browser/tabbrowser/tab-group-chicklet.svg       (../shared/tabbrowser/tab-group-chicklet.svg)
  skin/classic/browser/tabbrowser/tab-groups.svg               (../shared/tabbrowser/tab-groups.svg)
--- a/browser/themes/shared/tabbrowser/tab-audio-blocked-circle-12.svg
+++ b/browser/themes/shared/tabbrowser/tab-audio-blocked-circle-12.svg
@@ -0,0 +1,14 @@
+<!-- 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">
+  <g clip-path="url(#a)">
+    <path d="M4.998 3.567a.5.5 0 0 0-.748.434v3.998a.5.5 0 0 0 .748.434l3.5-1.999a.5.5 0 0 0 0-.868l-3.5-1.999z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6zm10.75 0A4.756 4.756 0 0 0 6 1.25 4.756 4.756 0 0 0 1.25 6 4.756 4.756 0 0 0 6 10.75 4.756 4.756 0 0 0 10.75 6z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M0 0h12v12H0z"/>
+    </clipPath>
+  </defs>
+</svg>
--- a/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg
+++ b/browser/themes/shared/tabbrowser/tab-audio-blocked-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" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
-  <path d="M4.25 8V4A.5.5 0 0 1 5 3.57l3.5 2c.34.19.34.68 0 .87l-3.5 2a.502.502 0 0 1-.75-.43V8z"/>
+<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 9.2V2.8c0-.14.036-.278.104-.4a.79.79 0 0 1 .283-.292.761.761 0 0 1 .777-.003l5.444 3.2a.79.79 0 0 1 .287.294.818.818 0 0 1 0 .802.79.79 0 0 1-.287.294l-5.444 3.2a.76.76 0 0 1-.777-.003.79.79 0 0 1-.283-.293A.818.818 0 0 1 3 9.2z"/>
 </svg>
--- 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 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 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>
--- a/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
+++ b/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">
-  <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 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>
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -30,8 +30,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;
  --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
@@ -232,6 +230,14 @@
  &[multiselected-move-together][multiselected]:not([selected]) {
    z-index: 2;
  }
+
+  &:is([muted], [soundplaying], [activemedia-blocked]) {
+    --tab-icon-end-margin: 2px;
+
+    #tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
+      --tab-min-width: 100px;
+    }
+  }
 }

 .tab-content {
@@ -471,11 +477,6 @@
  display: none;
 }

-.tab-sharing-icon-overlay[sharing]:not([selected]),
-.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [crashed]) {
-  display: revert;
-}
-
 .tab-sharing-icon-overlay {
  position: relative;
  -moz-context-properties: fill;
@@ -493,11 +494,18 @@
  &[sharing="screen"] {
    list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
  }
+
+  &[sharing]:not([selected]) {
+    display: revert;
+  }
 }

 .tab-icon-overlay {
  position: relative;
  padding: 2px;
+  top: -7px;
+  inset-inline-end: -7px;
+  z-index: 1; /* Overlay tab title */

  #tabbrowser-tabs[orient=vertical] & {
    top: 7px;
@@ -507,71 +515,86 @@
    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");
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
    }

    &[muted] {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
    }

    &[activemedia-blocked] {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
    }

    &:is([soundplaying], [muted], [activemedia-blocked]) {
-      background-color: var(--tab-icon-overlay-stroke);
-      background-position: center;
-      background-repeat: no-repeat;
-      border-radius: 10px;
+      background-color: var(--lwt-accent-color);
+      background-image: linear-gradient(var(--toolbox-bgcolor));
      -moz-context-properties: fill;
-      fill: var(--tab-icon-overlay-fill);
+      fill: var(--tab-selected-textcolor);
+      border-radius: 10px;
+
+      .browser-toolbox-background:-moz-window-inactive &:not([selected]) {
+        background-image: linear-gradient(var(--toolbox-bgcolor-inactive));
+      }
+
+      &[selected] {
+        /* We want to make this look like sidebar background. For that,
+         * we build a stack of `--lwt-accent-color` (guaranteed opaque), then
+         * then `--toolbox-bgcolor`.
+         *
+         * We rely on at least one of `--tab-selected-bgcolor` / `--toolbox-bgcolor`
+         * being opaque on the system themes, so even though `--lwt-accent-color` is
+         * not set there, it ends up working out because we never see it through.
+         */
+        background-image: linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
+        color-scheme: var(--tab-selected-color-scheme);
+        fill: var(--tab-selected-textcolor);
+        outline: 1px solid var(--tab-selected-outline-color);
+      }
+
+      .browser-toolbox-background:-moz-window-inactive &[selected] {
+        background-image: linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
+      }
    }
  }

-  &:not([indicator-replaces-favicon]) {
-    top: -5.5px;
-    inset-inline-end: -6px;
-    z-index: 1; /* Overlay tab title */
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
+  &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
+  &[crashed] {
+    display: revert;
+  }
+}

+.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;
+  --button-border-radius: var(--border-radius-small);
+
+  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
-      top: -8px;
-      inset-inline-end: -6px;
-    }
+      display: block;
    }

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

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

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

-  :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,7 +645,7 @@

 /* The following rulesets allow showing more of the tab title by shrinking the
 * width of the close button. We don't do this in forced-colors mode since
- * the button has a visible outline shown. */
+ * the button has a visible outline shown */
@media not (forced-colors) {
  #tabbrowser-tabs[orient="horizontal"] {
    .tabbrowser-tab:not([labelendaligned], :hover) > .tab-stack > .tab-content > .tab-close-button {
@@ -644,24 +667,9 @@

  #tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &,
  :root[uidensity=compact] &,
-  &: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) {
+  &:not([pictureinpicture]) {
    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,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
-      let style = window.getComputedStyle(tabIconOverlay);
+      // tab-audio-button image is showing
+      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();
-      ok(tabIconOverlay.hasAttribute("muted"), "Tab is muted");
+      tabAudioButton.click();
+      ok(tabAudioButton.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");
+      tabAudioButton.click();
+      ok(!tabAudioButton.hasAttribute("muted"), "Tab is not muted");
    }
  );
 });