Merge branch 'dev' into window-sync

src/browser/base/content/zen-assets.inc.xhtml

@@ -58,3 +58,4 @@
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenDownloadAnimation.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenEmojiPicker.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspaceCreation.mjs"></script>
+<script type="text/javascript" src="chrome://browser/content/zen-components/ZenWindowSyncing.mjs"></script>

src/browser/base/content/zen-assets.jar.inc.mn

@@ -44,6 +44,7 @@
         content/browser/zen-components/ZenWorkspaceIcons.mjs                    (../../zen/workspaces/ZenWorkspaceIcons.mjs)
         content/browser/zen-components/ZenWorkspace.mjs                         (../../zen/workspaces/ZenWorkspace.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs                        (../../zen/workspaces/ZenWorkspaces.mjs)
+        content/browser/zen-components/ZenWindowSyncing.mjs                     (../../zen/workspaces/ZenWindowSyncing.mjs)
         content/browser/zen-components/ZenWorkspaceCreation.mjs                 (../../zen/workspaces/ZenWorkspaceCreation.mjs)
         content/browser/zen-components/ZenWorkspacesStorage.mjs                 (../../zen/workspaces/ZenWorkspacesStorage.mjs)
         content/browser/zen-components/ZenWorkspacesSync.mjs                    (../../zen/workspaces/ZenWorkspacesSync.mjs)

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -92,6 +92,7 @@
     }
 
     onTabIconChanged(tab, url = null) {
+      tab.dispatchEvent(new CustomEvent('ZenTabIconChanged', { bubbles: true, detail: { tab } }));
       const iconUrl = url ?? tab.iconImage.src;
       if (!iconUrl && tab.hasAttribute('zen-pin-id')) {
         try {
@@ -1466,6 +1467,7 @@
     }
 
     async onTabLabelChanged(tab) {
+      tab.dispatchEvent(new CustomEvent('ZenTabLabelChanged', { detail: { tab } }));
       if (!this._pinsCache) {
         return;
       }

src/zen/workspaces/ZenWindowSyncing.mjs

@@ -0,0 +1,257 @@
+// 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/.
+{
+  class nsZenWorkspaceWindowSync extends nsZenMultiWindowFeature {
+    #ignoreNextEvents = false;
+    #waitForPromise = null;
+
+    constructor() {
+      super();
+      if (!window.closed) {
+        this.init();
+      }
+    }
+
+    async init() {
+      await gZenWorkspaces.promiseInitialized;
+      this.#makeSureAllTabsHaveIds();
+      this.#setUpEventListeners();
+    }
+
+    #makeSureAllTabsHaveIds() {
+      const allTabs = gZenWorkspaces.allStoredTabs;
+      for (const tab of allTabs) {
+        if (!tab.hasAttribute('zen-sync-id')) {
+          const tabId = gZenUIManager.generateUuidv4();
+          tab.setAttribute('zen-sync-id', tabId);
+        }
+      }
+    }
+
+    #setUpEventListeners() {
+      const kEvents = [
+        'TabClose',
+        'TabOpen',
+        'TabPinned',
+        'TabUnpinned',
+        'TabAddedToEssentials',
+        'TabRemovedFromEssentials',
+        'TabHide',
+        'TabShow',
+        'TabMove',
+        'ZenTabIconChanged',
+        'ZenTabLabelChanged',
+      ];
+      const eventListener = this.#handleEvent.bind(this);
+      for (const event of kEvents) {
+        window.addEventListener(event, eventListener);
+      }
+
+      window.addEventListener('unload', () => {
+        for (const event of kEvents) {
+          window.removeEventListener(event, eventListener);
+        }
+      });
+    }
+
+    #handleEvent(event) {
+      this.#propagateToOtherWindows(event);
+    }
+
+    async #propagateToOtherWindows(event) {
+      if (this.#ignoreNextEvents) {
+        return;
+      }
+      if (this.#waitForPromise) {
+        await this.#waitForPromise;
+      }
+      this.#waitForPromise = new Promise((resolve) => {
+        this.foreachWindowAsActive(async (browser) => {
+          if (browser.gZenWorkspaceWindowSync && !this.windowIsActive(browser)) {
+            await browser.gZenWorkspaceWindowSync.onExternalTabEvent(event);
+          }
+        }).then(() => {
+          resolve();
+        });
+      });
+    }
+
+    async onExternalTabEvent(event) {
+      this.#ignoreNextEvents = true;
+      switch (event.type) {
+        case 'TabClose':
+          this.#onTabClose(event);
+          break;
+        case 'TabOpen':
+          await this.#onTabOpen(event);
+          break;
+        case 'TabPinned':
+          this.#onTabPinned(event);
+          break;
+        case 'TabUnpinned':
+          this.#onTabUnpinned(event);
+          break;
+        case 'TabAddedToEssentials':
+          this.#onTabAddedToEssentials(event);
+          break;
+        case 'TabRemovedFromEssentials':
+          this.#onTabRemovedFromEssentials(event);
+          break;
+        case 'TabHide':
+          this.#onTabHide(event);
+          break;
+        case 'TabShow':
+          this.#onTabShow(event);
+          break;
+        case 'TabMove':
+          this.#onTabMove(event);
+          break;
+        case 'ZenTabIconChanged':
+          this.#onTabIconChanged(event);
+          break;
+        case 'ZenTabLabelChanged':
+          this.#onTabLabelChanged(event);
+          break;
+        default:
+          console.warn(`Unhandled event type: ${event.type}`);
+          break;
+      }
+      this.#ignoreNextEvents = false;
+    }
+
+    #getTabId(tab) {
+      return tab.getAttribute('zen-sync-id');
+    }
+
+    #getTabWithId(tabId) {
+      for (const tab of gZenWorkspaces.allStoredTabs) {
+        if (this.#getTabId(tab) === tabId) {
+          return tab;
+        }
+      }
+      return null;
+    }
+
+    #onTabClose(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToClose = this.#getTabWithId(tabId);
+      if (tabToClose) {
+        gBrowser.removeTab(tabToClose);
+      }
+    }
+
+    #onTabPinned(event) {
+      const targetTab = event.target;
+      if (targetTab.hasAttribute('zen-essential')) {
+        return this.#onTabAddedToEssentials(event);
+      }
+      const tabId = this.#getTabId(targetTab);
+      const elementIndex = targetTab.elementIndex;
+      const tabToPin = this.#getTabWithId(tabId);
+      if (tabToPin) {
+        gBrowser.pinTab(tabToPin);
+        gBrowser.moveTabTo(tabToPin, { elementIndex, forceUngrouped: !!targetTab.group });
+      }
+    }
+
+    #onTabUnpinned(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToUnpin = this.#getTabWithId(tabId);
+      if (tabToUnpin) {
+        gBrowser.unpinTab(tabToUnpin);
+      }
+    }
+
+    #onTabIconChanged(event) {
+      this.#updateTabIconAndLabel(event);
+    }
+
+    #onTabLabelChanged(event) {
+      this.#updateTabIconAndLabel(event);
+    }
+
+    #updateTabIconAndLabel(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToChange = this.#getTabWithId(tabId);
+      if (tabToChange && tabToChange.hasAttribute('pending')) {
+        gBrowser.setIcon(tabToChange, gBrowser.getIcon(targetTab));
+        gBrowser._setTabLabel(tabToChange, targetTab.label);
+      }
+    }
+
+    #onTabAddedToEssentials(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToAdd = this.#getTabWithId(tabId);
+      if (tabToAdd) {
+        gZenPinnedTabManager.addToEssentials(tabToAdd);
+      }
+    }
+
+    #onTabRemovedFromEssentials(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToRemove = this.#getTabWithId(tabId);
+      if (tabToRemove) {
+        gZenPinnedTabManager.removeFromEssentials(tabToRemove);
+      }
+    }
+
+    #onTabHide(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToHide = this.#getTabWithId(tabId);
+      if (tabToHide) {
+        gBrowser.hideTab(tabToHide);
+      }
+    }
+
+    #onTabShow(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabToShow = this.#getTabWithId(tabId);
+      if (tabToShow) {
+        gBrowser.showTab(tabToShow);
+      }
+    }
+
+    #onTabMove(event) {
+      const targetTab = event.target;
+      const tabId = this.#getTabId(targetTab);
+      const tabIndex = targetTab._pPos;
+      const tabToMove = this.#getTabWithId(tabId);
+      if (tabToMove) {
+        gBrowser.moveTabTo(tabToMove, { tabIndex, forceUngrouped: !!targetTab.group });
+      }
+    }
+
+    async #onTabOpen(event) {
+      const targetTab = event.target;
+      const isPinned = targetTab.pinned;
+      const isEssential = isPinned && targetTab.hasAttribute('zen-essential');
+      const elementIndex = targetTab.elementIndex;
+
+      const duplicatedTab = gBrowser.addTrustedTab(targetTab.linkedBrowser.currentURI.spec, {
+        createLazyBrowser: true,
+      });
+
+      duplicatedTab.setAttribute('zen-pin-id', targetTab.getAttribute('zen-pin-id'));
+      duplicatedTab.setAttribute('zen-tab-id', targetTab.getAttribute('zen-tab-id'));
+      duplicatedTab.setAttribute('zen-workspace-id', targetTab.getAttribute('zen-workspace-id'));
+
+      if (isEssential) {
+        gZenPinnedTabManager.addToEssentials(duplicatedTab);
+      } else if (isPinned) {
+        gBrowser.pinTab(duplicatedTab);
+      }
+
+      gBrowser.moveTabTo(duplicatedTab, { elementIndex, forceUngrouped: !!targetTab.group });
+    }
+  }
+
+  window.gZenWorkspaceWindowSync = new nsZenWorkspaceWindowSync();
+}