feat(sync): implemented pinned tab sync with firefox sync engine

locales/en-US/browser/browser/preferences/zen-preferences.ftl

@@ -21,6 +21,12 @@ sync-engine-workspaces =
     .tooltiptext = Sync your workspaces across devices
     .accesskey = W
 
+sync-currently-syncing-pinnedtabs = Pinned Tabs
+sync-engine-pinnedtabs =
+    .label = Pinned Tabs
+    .tooltiptext = Sync your pinned tabs and tab folders across devices
+    .accesskey = i
+
 zen-glance-title = Glance
 zen-glance-header = General settings for glance
 zen-glance-description = Get a quick overview of your links without opening them in a new tab

prefs/zen/workspaces.yaml

@@ -29,6 +29,9 @@
 - name: services.sync.engine.workspaces
   value: false
 
+- name: services.sync.engine.pinnedtabs
+  value: false
+
 - name: zen.workspaces.separate-essentials
   value: true
 

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

@@ -51,6 +51,7 @@
         content/browser/zen-components/ZenKeyboardShortcuts.mjs                 (../../zen/kbs/ZenKeyboardShortcuts.mjs)
 
         content/browser/zen-components/ZenPinnedTabsStorage.mjs                 (../../zen/tabs/ZenPinnedTabsStorage.mjs)
+        content/browser/zen-components/ZenPinnedTabsSync.mjs                    (../../zen/tabs/ZenPinnedTabsSync.mjs)
         content/browser/zen-components/ZenPinnedTabManager.mjs                  (../../zen/tabs/ZenPinnedTabManager.mjs)
 *       content/browser/zen-styles/zen-tabs.css                                 (../../zen/tabs/zen-tabs.css)
         content/browser/zen-styles/zen-tabs/vertical-tabs.css                   (../../zen/tabs/zen-tabs/vertical-tabs.css)

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

@@ -13,4 +13,5 @@
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspace.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspaces.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspacesSync.mjs"></script>
+<script type="text/javascript" src="chrome://browser/content/zen-components/ZenPinnedTabsSync.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenSessionStore.mjs"></script>

src/browser/components/preferences/dialogs/syncChooseWhatToSync-js.patch

@@ -2,11 +2,12 @@ diff --git a/browser/components/preferences/dialogs/syncChooseWhatToSync.js b/br
 index 64aa0d98a0622c01f3dcfff1a04bfcda368354d2..2013e04b0881ad2295d6897b91e1573cc6efc571 100644
 --- a/browser/components/preferences/dialogs/syncChooseWhatToSync.js
 +++ b/browser/components/preferences/dialogs/syncChooseWhatToSync.js
-@@ -21,6 +21,7 @@ Preferences.addAll([
+@@ -21,6 +21,8 @@ Preferences.addAll([
    { id: "services.sync.engine.passwords", type: "bool" },
    { id: "services.sync.engine.addresses", type: "bool" },
    { id: "services.sync.engine.creditcards", type: "bool" },
-+  { id: "services.sync.engine.workspaces", type: "bool" },
+   { id: "services.sync.engine.workspaces", type: "bool" },
++  { id: "services.sync.engine.pinnedtabs", type: "bool" },
  ]);
 
  let gSyncChooseWhatToSync = {

src/browser/components/preferences/dialogs/syncChooseWhatToSync-xhtml.patch

@@ -13,7 +13,7 @@ index ef127a1bc2e3ea4221b641156c38a74edb3b44ae..acd39fe7f6dc7ec03ea50928e2d00279
      </linkset>
      <script src="chrome://global/content/preferencesBindings.js" />
      <script src="chrome://browser/content/preferences/dialogs/syncChooseWhatToSync.js" />
-@@ -87,6 +91,12 @@
+@@ -87,6 +91,18 @@
            preference="services.sync.engine.prefs"
          />
        </html:div>
@@ -22,6 +22,12 @@ index ef127a1bc2e3ea4221b641156c38a74edb3b44ae..acd39fe7f6dc7ec03ea50928e2d00279
 +                data-l10n-id="sync-engine-workspaces"
 +                preference="services.sync.engine.workspaces"
 +        />
++      </html:div>
++      <html:div class="sync-engine-pinnedtabs">
++        <checkbox
++                data-l10n-id="sync-engine-pinnedtabs"
++                preference="services.sync.engine.pinnedtabs"
++        />
 +      </html:div>
      </html:div>
    </dialog>

src/browser/components/preferences/sync-inc-xhtml.patch

@@ -2,13 +2,17 @@ diff --git a/browser/components/preferences/sync.inc.xhtml b/browser/components/
 index 31b95644f820eda3267d3b52913ed0845abc1c80..1c8869418f7c88ed33601860dafd2c4eb0d5731f 100644
 --- a/browser/components/preferences/sync.inc.xhtml
 +++ b/browser/components/preferences/sync.inc.xhtml
-@@ -223,6 +223,10 @@
+@@ -223,6 +223,14 @@
                      <image class="sync-engine-image sync-engine-prefs" alt=""/>
                      <label data-l10n-id="sync-currently-syncing-settings"/>
                    </html:div>
 +                  <html:div engine_preference="services.sync.engine.workspaces">
 +                    <image class="sync-engine-image sync-engine-workspaces" alt=""/>
 +                    <label data-l10n-id="sync-currently-syncing-workspaces"/>
++                  </html:div>
++                  <html:div engine_preference="services.sync.engine.pinnedtabs">
++                    <image class="sync-engine-image sync-engine-pinnedtabs" alt=""/>
++                    <label data-l10n-id="sync-currently-syncing-pinnedtabs"/>
 +                  </html:div>
                  </html:div>
                  <hbox>

src/browser/themes/shared/preferences/zen-preferences.css

@@ -568,6 +568,11 @@ groupbox h2 {
   list-style-image: url('chrome://devtools/skin/images/tool-storage.svg');
 }
 
+.sync-engine-pinnedtabs .checkbox-icon,
+.sync-engine-pinnedtabs.sync-engine-image {
+  list-style-image: url('chrome://browser/skin/tabs.svg');
+}
+
 @media -moz-pref('zen.theme.disable-lightweight') {
   html|div[data-l10n-id='preferences-web-appearance-footer'] {
     display: none;

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -91,9 +91,29 @@
 
       this._zenClickEventListener = this._onTabClick.bind(this);
 
+      // Listen for sync finish events
+      Services.obs.addObserver(this, 'weave:engine:sync:finish');
+      window.addEventListener(
+        'unload',
+        () => {
+          Services.obs.removeObserver(this, 'weave:engine:sync:finish');
+        },
+        { once: true }
+      );
+
       gZenWorkspaces._resolvePinnedInitialized();
     }
 
+    async observe(_subject, topic, data) {
+      if (topic === 'weave:engine:sync:finish' && data === 'pinnedtabs') {
+        try {
+          await this.refreshPinnedTabs({ init: true });
+        } catch (error) {
+          console.error('[ZenPinnedTabManager] Error refreshing pinned tabs after sync:', error);
+        }
+      }
+    }
+
     log(message) {
       if (this._canLog) {
         console.log(`[ZenPinnedTabManager] ${message}`);
@@ -391,7 +411,7 @@
           gBrowser.tabContainer._invalidateCachedTabs();
           newTab.initialize();
         } catch (ex) {
-          console.error('Failed to initialize pinned tabs:', ex);
+          console.error('[ZenPinnedTabManager] Failed to create pinned tab for:', pin.title, ex);
         }
       }