Bug 1912391 - position tab preview appropriately when in vertical mode. r=tabbrowser-reviewers,dao

Differential Revision: https://phabricator.services.mozilla.com/D219326

Author: DJ

browser/components/tabbrowser/content/tab-hover-preview.mjs

@@ -6,12 +6,6 @@ var { XPCOMUtils } = ChromeUtils.importESModule(
   "resource://gre/modules/XPCOMUtils.sys.mjs"
 );
 
-const POPUP_OPTIONS = {
-  position: "bottomleft topleft",
-  x: 0,
-  y: -2,
-};
-
 const ZERO_DELAY_ACTIVATION_TIME = 300;
 
 /**
@@ -64,14 +58,40 @@ export default class TabHoverPreviewPanel {
 
     this._panelOpener = new TabPreviewPanelTimedFunction(
       () => {
-        this._panel.openPopup(this._tab, POPUP_OPTIONS);
+        this._panel.openPopup(this._tab, this.#popupOptions);
       },
       this._prefPreviewDelay,
       ZERO_DELAY_ACTIVATION_TIME,
       this._win
     );
   }
 
+  get #verticalMode() {
+    return this._win.gBrowser.tabContainer.verticalMode;
+  }
+
+  get #popupOptions() {
+    if (!this.#verticalMode) {
+      return {
+        position: "bottomleft topleft",
+        x: 0,
+        y: -2,
+      };
+    }
+    if (!this._win.SidebarController._positionStart) {
+      return {
+        position: "topleft topright",
+        x: 0,
+        y: 4,
+      };
+    }
+    return {
+      position: "topright topleft",
+      x: 0,
+      y: 4,
+    };
+  }
+
   getPrettyURI(uri) {
     try {
       let url = new URL(uri);
@@ -231,9 +251,9 @@ export default class TabHoverPreviewPanel {
     if (this._tab) {
       this._panel.moveToAnchor(
         this._tab,
-        POPUP_OPTIONS.position,
-        POPUP_OPTIONS.x,
-        POPUP_OPTIONS.y
+        this.#popupOptions.position,
+        this.#popupOptions.x,
+        this.#popupOptions.y
       );
     }
   }

browser/components/tabbrowser/test/browser/tabs/browser_tab_preview.js

@@ -759,3 +759,34 @@ add_task(async function tabContentChangeTests() {
   await closePreviews();
   BrowserTestUtils.removeTab(tab);
 });
+
+/**
+ * In vertical tabs mode, tab preview should be displayed to the side
+ * and not beneath the tab.
+ */
+add_task(async function tabPreview_verticalTabsPositioning() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["sidebar.revamp", true],
+      ["sidebar.verticalTabs", true],
+    ],
+  });
+
+  const previewPanel = document.getElementById("tab-preview-panel");
+  const tab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "about:blank"
+  );
+  await openPreview(tab);
+
+  let tabRect = tab.getBoundingClientRect();
+  let panelRect = previewPanel.getBoundingClientRect();
+
+  Assert.ok(
+    Math.abs(tabRect.top - panelRect.top) < 5,
+    "Preview panel not displayed beneath tab"
+  );
+
+  await closePreviews();
+  BrowserTestUtils.removeTab(tab);
+});