Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 32 insertions, 22 deletions

diff --git a/browser/base/content/tabbrowser-tabs.js b/browser/base/content/tabbrowser-tabs.js
index 36b6aeb390..7784e74ed3 100644
--- a/browser/base/content/tabbrowser-tabs.js
+++ b/browser/base/content/tabbrowser-tabs.js
@@ -34,6 +34,7 @@
       this.addEventListener("drop", this);
       this.addEventListener("dragend", this);
       this.addEventListener("dragleave", this);
+      this.addEventListener("mouseleave", this);
     }
 
     init() {
@@ -61,6 +62,7 @@
       this._hiddenSoundPlayingTabs = new Set();
       this._allTabs = null;
       this._visibleTabs = null;
+      this._previewPanel = null;
 
       var tab = this.allTabs[0];
       tab.label = this.emptyTabTitle;
@@ -125,12 +127,12 @@
 
       this.configureTooltip = () => {
         // fall back to original tooltip behavior if pref is not set
-        this.tooltip = this._showCardPreviews ? null : "tabbrowser-tab-tooltip";
-
-        // activate new tooltip behavior if pref is set
-        document
-          .getElementById("tabbrowser-tab-preview")
-          .toggleAttribute("hidden", !this._showCardPreviews);
+        if (this._showCardPreviews) {
+          this.tooltip = null;
+        } else {
+          this.tooltip = "tabbrowser-tab-tooltip";
+          this._previewPanel = null;
+        }
       };
       XPCOMUtils.defineLazyPreferenceGetter(
         this,
@@ -142,7 +144,7 @@
       this.configureTooltip();
     }
 
-    on_TabSelect(event) {
+    on_TabSelect() {
       this._handleTabSelect();
     }
 
@@ -188,23 +190,23 @@
     }
 
     on_TabHoverStart(event) {
-      if (this._showCardPreviews) {
-        const previewContainer = document.getElementById(
-          "tabbrowser-tab-preview"
+      if (!this._showCardPreviews) {
+        return;
+      }
+      if (!this._previewPanel) {
+        // load the tab preview component
+        const TabPreviewPanel = ChromeUtils.importESModule(
+          "chrome://browser/content/tabpreview/tab-preview-panel.mjs"
+        ).default;
+        this._previewPanel = new TabPreviewPanel(
+          document.getElementById("tab-preview-panel")
         );
-        previewContainer.tab = event.target;
       }
+      this._previewPanel.activate(event.target);
     }
 
     on_TabHoverEnd(event) {
-      if (this._showCardPreviews) {
-        const previewContainer = document.getElementById(
-          "tabbrowser-tab-preview"
-        );
-        if (previewContainer.tab === event.target) {
-          previewContainer.tab = null;
-        }
-      }
+      this._previewPanel?.deactivate(event.target);
     }
 
     on_transitionend(event) {
@@ -241,7 +243,7 @@
       }
 
       if (!this._blockDblClick) {
-        BrowserOpenTab();
+        BrowserCommands.openTab();
       }
 
       event.preventDefault();
@@ -333,7 +335,7 @@
             (!RTL_UI && event.clientX > endOfTab) ||
             (RTL_UI && event.clientX < endOfTab)
           ) {
-            BrowserOpenTab();
+            BrowserCommands.openTab();
           }
         } else {
           return;
@@ -450,6 +452,7 @@
         return;
       }
 
+      this._previewPanel?.deactivate();
       this.startTabDrag(event, tab);
     }
 
@@ -1092,6 +1095,10 @@
       return children;
     }
 
+    get previewPanel() {
+      return this._previewPanel;
+    }
+
     _getVisibleTabs() {
       if (!this._visibleTabs) {
         this._visibleTabs = Array.prototype.filter.call(
@@ -1205,7 +1212,7 @@
       };
     }
 
-    observe(aSubject, aTopic, aData) {
+    observe(aSubject, aTopic) {
       switch (aTopic) {
         case "nsPref:changed":
           // This is has to deal with changes in
@@ -1851,6 +1858,9 @@
             this._unlockTabSizing();
           }
           break;
+        case "mouseleave":
+          this._previewPanel?.deactivate();
+          break;
         default:
           let methodName = `on_${aEvent.type}`;
           if (methodName in this) {