Backed out changeset 2821188eb89d (bug 1921060) for causing multiple failures

2025-01-16 02:25:14 +02:00
parent af3ab10437
commit 402a01520a
19 changed files with 231 additions and 294 deletions
--- a/browser/components/sessionstore/SessionStore.sys.mjs
+++ b/browser/components/sessionstore/SessionStore.sys.mjs
@@ -3197,6 +3197,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) {
@@ -3210,6 +3211,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();
@@ -4957,6 +4959,7 @@ var SessionStoreInternal = {
      );
    }

+    const gBrowser = aTab.ownerGlobal.gBrowser;
    let browser = aTab.linkedBrowser;
    if (!this._crashedBrowsers.has(browser.permanentKey)) {
      return;
@@ -4976,6 +4979,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,14 +23,17 @@
            <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"/>
@@ -82,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":
@@ -91,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":
-          "crashed,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",
      };
    }
@@ -309,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");
    }
@@ -378,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;
@@ -398,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)) {
@@ -437,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;
      }
@@ -503,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);
@@ -602,6 +611,27 @@
      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,6 +2093,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.
@@ -6485,13 +6488,8 @@
      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;
-        }
+        event.preventDefault();
+        return;
      }

      const tooltip = event.target;
@@ -6500,7 +6498,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) {
@@ -7114,6 +7112,7 @@
            // process so the browser can no longer be considered to be
            // crashed.
            tab.removeAttribute("crashed");
+            gBrowser.tabContainer.updateTabIndicatorAttr(tab);
          }

          if (this.isFindBarInitialized(tab)) {
@@ -7438,6 +7437,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);
@@ -225,6 +227,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);
    }

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

    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) {
@@ -264,6 +278,14 @@
      }
    }

+    on_TabPinned(event) {
+      this.updateTabIndicatorAttr(event.target);
+    }
+
+    on_TabUnpinned(event) {
+      this.updateTabIndicatorAttr(event.target);
+    }
+
    on_TabHoverStart(event) {
      if (!this._showCardPreviews) {
        return;
@@ -3104,28 +3126,22 @@
      CustomizableUI.removeListener(this);
    }

-    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
-          );
-        }
+    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))
+      );
    }
  }

--- 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
@@ -184,12 +184,7 @@ async function test_muting_using_menu(tab, expectMuted) {
 }

 async function test_playing_icon_on_tab(tab, browser, isPinned) {
-  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 icon = isPinned ? tab.overlayIcon : tab.overlayIcon;
  let isActiveTab = tab === gBrowser.selectedTab;

  await play(tab);
@@ -381,16 +376,7 @@ async function test_swapped_browser_while_playing(oldTab, newBrowser) {
    "Expected the correct soundplaying attribute on the new tab"
  );

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

 async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
@@ -463,29 +449,14 @@ async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
    "Expected the correct soundplaying attribute on the new tab"
  );

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

 async function test_browser_swapping(tab) {
  // First, test swapping with a playing but muted tab.
  await play(tab);
-  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 test_mute_tab(tab, tab.overlayIcon, true);

  await BrowserTestUtils.withNewTab(
    {
@@ -603,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/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,14 +39,8 @@ add_task(async function muteTabs_usingButton() {
  }

  // Mute tab0 which is not multiselected, thus other tabs muted state should not be affected
-  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);
+  let tab0MuteAudioBtn = tab0.overlayIcon;
+  await test_mute_tab(tab0, tab0MuteAudioBtn, true);

  ok(muted(tab0), "Tab0 is muted");
  for (let i = 1; i <= 4; i++) {
@@ -78,14 +72,8 @@ 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.
-  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);
+  let tab1MuteAudioBtn = tab1.overlayIcon;
+  await test_mute_tab(tab1, tab1MuteAudioBtn, true);

  // Check mute state
  ok(muted(tab0), "Tab0 is still muted");
@@ -142,14 +130,8 @@ 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 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);
+  let tab3MuteAudioBtn = tab3.overlayIcon;
+  await test_mute_tab(tab3, tab3MuteAudioBtn, false);

  ok(!muted(tab0), "Tab0 is not muted");
  ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");
@@ -261,14 +243,8 @@ 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 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);
+  let tab2MuteAudioBtn = tab2.overlayIcon;
+  await test_mute_tab(tab2, tab2MuteAudioBtn, false);

  ok(muted(tab0), "Tab0 is muted");
  ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");
--- 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.audioButton);
+  await pressIcon(tab2.overlayIcon);

  // tab0, tab1, and tab2 were played and multiselected
  // They will now be unblocked and playing media
--- a/browser/components/tabbrowser/test/browser/tabs/browser_tab_play.js
+++ b/browser/components/tabbrowser/test/browser/tabs/browser_tab_play.js
@@ -152,24 +152,14 @@ add_task(async function testDelayPlayWhenUsingButton() {
  ok(activeMediaBlocked(tab1), "Tab1 is activemedia-blocked");

  info("Press the Play Tab icon on tab0");
-  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);
+  await pressIcon(tab0.overlayIcon);

  // 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");
-  isPinned = tab1.pinned;
-  let icon1 =
-    isPinned || isVerticalAndCollapsed ? tab1.overlayIcon : tab1.audioButton;
-  await pressIcon(icon1);
+  await pressIcon(tab1.overlayIcon);

  // tab0 unblocked, tab1 unblocked
  ok(!activeMediaBlocked(tab0), "Tab0 is not activemedia-blocked");
--- a/browser/locales/en-US/browser/tabbrowser.ftl
+++ b/browser/locales/en-US/browser/tabbrowser.ftl
@@ -67,16 +67,6 @@ 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,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/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -238,7 +238,6 @@
  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
@@ -1,14 +0,0 @@
-<!-- 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 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 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>
--- 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,8 @@
  --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);
@@ -230,14 +232,6 @@
  &[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 {
@@ -477,6 +471,11 @@
  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;
@@ -494,18 +493,11 @@
  &[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;
@@ -515,99 +507,68 @@
    list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
  }

-  #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
-  &[pinned]:not([crashed]) {
+  &:not([crashed]) {
    &[soundplaying] {
-      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
-    }
-
-    &[muted] {
-      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
-    }
-
-    &[activemedia-blocked] {
-      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
-    }
-
-    &:is([soundplaying], [muted], [activemedia-blocked]) {
-      /* We want to make this look like the selected tab, but fully opaque. For that,
-       * we build a stack of `--lwt-accent-color` (guaranteed opaque), then
-       * `--toolbox-bgcolor`, then `--tab-selected-bgcolor`.
-       *
-       * We rely on at least one of `--toolbox-bgcolor` / `--tab-selected-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.
-       *
-       * We also apply one extra color on top (--audio-overlay-extra-background)
-       * for hover / active feedback.
-       */
-       --audio-overlay-extra-background: transparent;
-      background-color: var(--lwt-accent-color);
-      background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                        linear-gradient(var(--toolbox-bgcolor));
-      -moz-context-properties: fill;
-      fill: var(--tab-selected-textcolor);
-      color-scheme: var(--tab-selected-color-scheme);
-      border-radius: var(--border-radius-circle);
-
-      .browser-toolbox-background:-moz-window-inactive &:not([selected]) {
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),]
-                          linear-gradient(var(--toolbox-bgcolor-inactive));
-      }
-
-      &:hover {
-        --audio-overlay-extra-background: var(--button-background-color-ghost-hover);
-      }
-
-      &:hover:active {
-        --audio-overlay-extra-background: var(--button-background-color-ghost-active);
-      }
-
-      &[selected] {
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                          linear-gradient(var(--tab-selected-bgcolor)),
-                          linear-gradient(var(--toolbox-bgcolor));
-      }
-
-      .browser-toolbox-background:-moz-window-inactive &[selected] {
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                        linear-gradient(var(--tab-selected-bgcolor)),
-                        linear-gradient(var(--toolbox-bgcolor-inactive));
-      }
-    }
-  }
-
-  #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]) {
-      display: block;
-    }
-
-    &[soundplaying]::part(button) {
      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
    }

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

-    &[activemedia-blocked]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
+    &[activemedia-blocked] {
+      background-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;
+      -moz-context-properties: fill;
+      fill: var(--tab-icon-overlay-fill);
+    }
+  }
+
+  &:not([indicator-replaces-favicon]) {
+    top: -5.5px;
+    inset-inline-end: -6px;
+    z-index: 1; /* Overlay tab title */
+
+    &:is([soundplaying], [muted], [activemedia-blocked]) {
+      top: -8px;
+      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 {
+      background-color: color-mix(in srgb, currentColor 30%, transparent);
+    }
+
+    &: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;
  }
 }

@@ -661,7 +622,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 {
@@ -683,9 +644,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");
    }
  );
 });
--- a/toolkit/content/tests/browser/browser_delay_autoplay_silentAudioTrack_media.js
+++ b/toolkit/content/tests/browser/browser_delay_autoplay_silentAudioTrack_media.js
@@ -2,13 +2,7 @@ const PAGE =
  "https://example.com/browser/toolkit/content/tests/browser/file_silentAudioTrack.html";

 async function click_unblock_icon(tab) {
-  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;
+  let icon = tab.overlayIcon;

  await hover_icon(icon, document.getElementById("tabbrowser-tab-tooltip"));
  EventUtils.synthesizeMouseAtCenter(icon, { button: 0 });