Update THP on tab change r=dwalker,tabbrowser-reviewers

Ponchale · Ponchale · commit b76b186b44ba · 2024-12-27T19:17:42.000-05:00
diff --git a/browser/components/tabbrowser/content/tab-hover-preview.mjs b/browser/components/tabbrowser/content/tab-hover-preview.mjs
@@ -24,6 +24,18 @@ export default class TabHoverPreviewPanel {
     this._tab = null;
     this._thumbnailElement = null;
 
+    // Observe changes to this tab's DOM, and
+    // update the preview if the tab title changes
+    this._tabObserver = new this._win.MutationObserver(
+      (mutationList, _observer) => {
+        for (const mutation of mutationList) {
+          if (mutation.attributeName === "label") {
+            this._updatePreview();
+          }
+        }
+      }
+    );
+
     this._setExternalPopupListeners();
 
     XPCOMUtils.defineLazyPreferenceGetter(
@@ -112,6 +124,9 @@ export default class TabHoverPreviewPanel {
     }
 
     this._tab = tab;
+    this._tabObserver.observe(this._tab, {
+      attributes: true,
+    });
 
     // Calling `moveToAnchor` in advance of the call to `openPopup` ensures
     // that race conditions can be avoided in cases where the user hovers
@@ -145,6 +160,7 @@ export default class TabHoverPreviewPanel {
       return;
     }
     this._tab = null;
+    this._tabObserver.disconnect();
     this._thumbnailElement = null;
     this._panel.removeEventListener("popupshowing", this);
     this._win.removeEventListener("TabSelect", this);
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tab_preview.js b/browser/components/tabbrowser/test/browser/tabs/browser_tab_preview.js
@@ -714,4 +714,34 @@
      type: "mouseover",
    });
  });
- 
+
+ /**
+ * Verify that if the browser document title (i.e. tab label) changes,
+ * the tab preview panel is updated
+ */
+add_task(async function tabContentChangeTests() {
+  const previewPanel = document.getElementById("tab-preview-panel");
+  const tabUrl =
+    "data:text/html,<html><head><title>Original Tab Title</title></head><body>Hello</body></html>";
+  const tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, tabUrl);
+  await openPreview(tab);
+  Assert.equal(
+    previewPanel.querySelector(".tab-preview-title").innerText,
+    "Original Tab Title",
+    "Preview of tab shows original tab title"
+  );
+  tab.setAttribute("label", "New Tab Title");
+  await BrowserTestUtils.waitForCondition(() => {
+    return (
+      previewPanel.querySelector(".tab-preview-title").innerText ===
+      "New Tab Title"
+    );
+  });
+  Assert.equal(
+    previewPanel.querySelector(".tab-preview-title").innerText,
+    "New Tab Title",
+    "Preview of tab shows new tab title"
+  );
+  await closePreviews();
+  BrowserTestUtils.removeTab(tab);
+});
