Handle compressed sync data from Sync Clippings Helper (issue #434)

wx-src/pages/options.css

@@ -116,7 +116,7 @@ fieldset {
     border-bottom: 0;
     border-left: 0;
     padding-top: 4px;
-    padding-bottom: 18px;
+    padding-bottom: 12px;
 }
 
 legend {
@@ -165,10 +165,6 @@ progress {
     font-size: 13px;
 }
 
-.example {
-    font-size: 11px;
-}
-
 #html-paste-options-ctr {
     margin-bottom: 8px;
 }
@@ -480,37 +476,53 @@ body[data-locale|="es"] #wnds-dlgs-opts-dlg #clpmgr-save-wnd-pos-label {
 
 #sync-clippings-dlg {
     top: 128px;
-    --width: 500px;
-    --height: 256px;
+    --width: 530px;
+    --height: 270px;
 }
 
 body[data-os="mac"] #sync-clippings-dlg {
     --width: 504px;
 }
 
 body[data-locale="de"] #sync-clippings-dlg {
-    --width: 570px;
+    --width: 600px;
 }
 
 body[data-locale|="es"] #sync-clippings-dlg {
-    --width: 620px;
+    --width: 650px;
 }
 
 body[data-locale="nl"] #sync-clippings-dlg,
 body[data-locale="uk"] #sync-clippings-dlg {
-    --width: 522px;
+    --width: 552px;
+}
+
+#sync-clippings-dlg.expanded {
+    height: 300px;
 }
 
 #sync-clippings-dlg fieldset {
     margin-top: 14px;
     margin-left: 0;
     padding-right: 0;
+    border-bottom: 1px solid var(--color-fieldset-border);
 }
 
 #sync-clippings-dlg fieldset legend {
     padding-left: 0;
 }
 
+#sync-clippings-dlg input[type="checkbox"] ~ label {
+    font-size: 15px;
+}
+
+#sync-clippings-dlg #cmprs-sync-data-reqmt {
+    display: none;
+    font-size: 13px;
+    margin-top: 2px;
+    margin-left: 27px;
+}
+
 #sync-clippings-dlg #sync-cxn-error .msgbox-icon,
 #sync-clippings-dlg #generic-error .msgbox-icon {
     float: left;
@@ -663,10 +675,9 @@ body[data-os="mac"] #turn-off-sync-clippings-dlg .msgbox-icon {
     margin-left: 74px;
 }
 
-#sync-clippings-dlg input[type="checkbox"] + label,
 #turn-off-sync-clippings-ack-dlg #delete-sync-fldr-opt > #delete-sync-fldr + label {
     font-size: 13px;
-    vertical-align: baseline;   
+    vertical-align: unset;
 }
 
 body[data-os="win"] #sync-clippings-dlg input[type="checkbox"] + label,

wx-src/pages/options.html

@@ -203,16 +203,17 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
   	    <input type="text" id="sync-fldr-curr-location" required value=""/>
 	    <button id="browse-sync-fldr" class="dlg-btn" data-i18n="btnBrowse"></button>
           </div>
-	  <div class="row">
-	  <div class="example"><label data-i18n="syncFileDirExample"></label><span id="example-sync-path"></span></div>
-          </div>
 	  <fieldset>
 	  <legend data-i18n="syncOptsHdg"></legend>
 	    <div class="row browser-style">
-	      <input type="checkbox" id="sync-helper-app-update-check" class="checkbox-s"/><label for="sync-helper-app-update-check" data-i18n="syncUpdateChkOpt"></label>
+	      <input type="checkbox" id="sync-helper-app-update-check"/><label for="sync-helper-app-update-check" data-i18n="syncUpdateChkOpt"></label>
 	    </div>
 	    <div class="row browser-style">
-              <input type="checkbox" id="show-only-sync-items" class="checkbox-s"/><label for="show-only-sync-items" data-i18n="cxtMnuSyncItemsOnly"></label>
+              <input type="checkbox" id="show-only-sync-items"/><label for="show-only-sync-items" data-i18n="cxtMnuSyncItemsOnly"></label>
+            </div>
+	    <div class="row browser-style">
+              <input type="checkbox" id="cmprs-sync-data"/><label for="cmprs-sync-data" data-i18n="cmprsSyncData"></label>
+	      <p id="cmprs-sync-data-reqmt" class="description indent"></p>
             </div>
 	  </fieldset>
 	</div>

wx-src/pages/options.js

@@ -371,18 +371,7 @@ function initDialogs()
 
   gDialogs.syncClippings.onFirstInit = function ()
   {
-    // Dialog UI strings
-    if (gOS == "win") {
-      $("#example-sync-path").text(browser.i18n.getMessage("syncFileDirExWin"));
-    }
-    else if (gOS == "mac") {
-      $("#example-sync-path").text(browser.i18n.getMessage("syncFileDirExMac"));
-    }
-    else {
-      $("#example-sync-path").text(browser.i18n.getMessage("syncFileDirExLinux"));
-    }
     $("#sync-conxn-error-detail").html(sanitizeHTML(browser.i18n.getMessage("errSyncConxnDetail")));
-
     $("#sync-fldr-curr-location").on("focus", aEvent => { aEvent.target.select() });
   };
 
@@ -444,10 +433,18 @@ function initDialogs()
       $("#browse-sync-fldr").hide();
       isBrwsSyncFldrVisible = false;
     }
+
+    if (aeVersionCmp(resp.appVersion, "2.0b1") < 0) {
+      $("#sync-clippings-dlg").addClass("expanded");
+      $("#cmprs-sync-data-reqmt").html(
+        browser.i18n.getMessage("cmprsSyncReqmt", aeConst.SYNC_CLIPPINGS_DWNLD_URL)
+      ).show();
+    }
 
     let prefs = await aePrefs.getAllPrefs();
     $("#sync-helper-app-update-check").prop("checked", prefs.syncHelperCheckUpdates);
     $("#show-only-sync-items").prop("checked", prefs.cxtMenuSyncItemsOnly);
+    $("#cmprs-sync-data").prop("checked", prefs.compressSyncData);
 
     this.oldShowSyncItemsOpt = $("#show-only-sync-items").prop("checked");
 
@@ -478,6 +475,7 @@ function initDialogs()
     aePrefs.setPrefs({
       syncHelperCheckUpdates: $("#sync-helper-app-update-check").prop("checked"),
       cxtMenuSyncItemsOnly: $("#show-only-sync-items").prop("checked"),
+      compressSyncData: $("#cmprs-sync-data").prop("checked"),
     });
 
     let rebuildClippingsMenu = $("#show-only-sync-items").prop("checked") != gDialogs.syncClippings.oldShowSyncItemsOpt;
@@ -539,7 +537,7 @@ function initDialogs()
 
   gDialogs.syncClippings.onUnload = function ()
   {
-    $("#sync-clippings-dlg").css({ height: "256px" });
+    $("#sync-clippings-dlg").removeClass("expanded");
     gDialogs.syncClippings.isCanceled = true;
     this.lastFocusedElt?.focus();
   };

wx-src/scripts/aeConst.js

@@ -78,4 +78,5 @@ const aeConst = Object.freeze({
   CONTRIB_URL: "https://aecreations.io/clippings/contribute.php",
   HELP_URL: "https://aecreations.io/clippings/help.php",
   SYNC_CLIPPINGS_HELP_URL: "https://aecreations.io/clippings/sync.php",
+  SYNC_CLIPPINGS_DWNLD_URL: "https://aecreations.io/clippings/sync-clippings-helper.php",
 });