Bug 1883876 - Update window list in Open Tabs in Fx View when moving a tab between windows r=fxview-reviewers,sclements,sfoster

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

browser/components/firefoxview/opentabs.mjs

@@ -348,11 +348,6 @@ class OpenTabsInView extends ViewPage {
     switch (type) {
       case "TabRecencyChange":
       case "TabChange":
-        // if we're switching away from our tab, we can halt any updates immediately
-        if (!this.isSelectedBrowserTab) {
-          this.stop();
-          return;
-        }
         windowIds = detail.windowIds;
         this._updateWindowList();
         this.bookmarkList.setTrackedUrls(this.#getAllTabUrls());

browser/components/firefoxview/tests/browser/browser_firefoxview_paused.js

@@ -191,6 +191,42 @@ async function checkFxRenderCalls(browser, elements, selectedView) {
   sandbox.restore();
 }
 
+function dragAndDrop(
+  tab1,
+  tab2,
+  initialWindow = window,
+  destWindow = window,
+  afterTab = true,
+  context
+) {
+  let rect = tab2.getBoundingClientRect();
+  let event = {
+    ctrlKey: false,
+    altKey: false,
+    clientX: rect.left + rect.width / 2 + 10 * (afterTab ? 1 : -1),
+    clientY: rect.top + rect.height / 2,
+  };
+
+  if (destWindow != initialWindow) {
+    // Make sure that both tab1 and tab2 are visible
+    initialWindow.focus();
+    initialWindow.moveTo(rect.left, rect.top + rect.height * 3);
+  }
+
+  EventUtils.synthesizeDrop(
+    tab1,
+    tab2,
+    null,
+    "move",
+    initialWindow,
+    destWindow,
+    event
+  );
+
+  // Ensure dnd suppression is cleared.
+  EventUtils.synthesizeMouseAtCenter(tab2, { type: "mouseup" }, context);
+}
+
 add_task(async function test_recentbrowsing() {
   await setupOpenAndClosedTabs();
 
@@ -402,3 +438,66 @@ add_task(async function test_recentlyclosed() {
   });
   await BrowserTestUtils.removeTab(TestTabs.tab2);
 });
+
+add_task(async function test_drag_drop_pinned_tab() {
+  await setupOpenAndClosedTabs();
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    let win1 = browser.ownerGlobal;
+    await navigateToViewAndWait(document, "opentabs");
+
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    let card = openTabs.viewCards[0];
+    let tabRows = card.tabList.rowEls;
+    let tabChangeRaised;
+
+    // Pin first two tabs
+    for (var i = 0; i < 2; i++) {
+      tabChangeRaised = BrowserTestUtils.waitForEvent(
+        NonPrivateTabs,
+        "TabChange"
+      );
+      let currentTabEl = tabRows[i];
+      let currentTab = currentTabEl.tabElement;
+      info(`Pinning tab ${i + 1} with label: ${currentTab.label}`);
+      win1.gBrowser.pinTab(currentTab);
+      await tabChangeRaised;
+      await openTabs.updateComplete;
+      tabRows = card.tabList.rowEls;
+      currentTabEl = tabRows[i];
+
+      await TestUtils.waitForCondition(
+        () => currentTabEl.indicators.includes("pinned"),
+        `Tab ${i + 1} is pinned.`
+      );
+    }
+
+    info(`First two tabs are pinned.`);
+
+    let win2 = await BrowserTestUtils.openNewBrowserWindow();
+
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards.length === 2,
+      "Two windows are shown for Open Tabs in in Fx View."
+    );
+
+    let pinnedTab = win1.gBrowser.visibleTabs[0];
+    let newWindowTab = win2.gBrowser.visibleTabs[0];
+
+    dragAndDrop(newWindowTab, pinnedTab, win2, win1, true, content);
+
+    await switchToFxViewTab();
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards.length === 1,
+      "One window is shown for Open Tabs in in Fx View."
+    );
+  });
+  cleanupTabs();
+});

browser/components/firefoxview/viewpage.mjs

@@ -131,7 +131,7 @@ export class ViewPage extends ViewPageContent {
     super();
     this.selectedTab = false;
     this.recentBrowsing = Boolean(this.recentBrowsingElement);
-    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    this.onTabSelect = this.onTabSelect.bind(this);
     this.onResize = this.onResize.bind(this);
   }
 
@@ -148,14 +148,17 @@ export class ViewPage extends ViewPageContent {
     this.windowResizeTask?.arm();
   }
 
-  onVisibilityChange() {
+  onTabSelect({ target }) {
-    if (this.isVisible) {
+    const win = target.ownerGlobal;
+
+    let selfBrowser = window.docShell?.chromeEventHandler;
+    const { gBrowser } = this.getWindow();
+    let isForegroundTab = gBrowser.selectedBrowser == selfBrowser;
+
+    if (win.FirefoxViewHandler.tab.selected && isForegroundTab) {
       this.paused = false;
       this.viewVisibleCallback();
-    } else if (
+    } else {
-      this.ownerViewPage.selectedTab &&
-      this.ownerDocument.visibilityState == "hidden"
-    ) {
       this.paused = true;
       this.viewHiddenCallback();
     }
@@ -163,19 +166,12 @@ export class ViewPage extends ViewPageContent {
 
   connectedCallback() {
     super.connectedCallback();
-    this.ownerDocument.addEventListener(
-      "visibilitychange",
-      this.onVisibilityChange
-    );
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.ownerDocument.removeEventListener(
-      "visibilitychange",
-      this.onVisibilityChange
-    );
     this.getWindow().removeEventListener("resize", this.onResize);
+    this.getWindow().removeEventListener("TabSelect", this.onTabSelect);
   }
 
   updateAllVirtualLists() {
@@ -246,6 +242,7 @@ export class ViewPage extends ViewPageContent {
       this.paused = false;
       this.viewVisibleCallback();
       this.getWindow().addEventListener("resize", this.onResize);
+      this.getWindow().addEventListener("TabSelect", this.onTabSelect);
     }
   }
 
@@ -257,5 +254,6 @@ export class ViewPage extends ViewPageContent {
       this.windowResizeTask?.finalize();
     }
     this.getWindow().removeEventListener("resize", this.onResize);
+    this.getWindow().removeEventListener("TabSelect", this.onTabSelect);
   }
 }