Sync reminders changes (#2354)

- Adjust text
- Add "Learn More" button with link to sync documentation for
  set-up-sync notification
- Show "Don't Show Again" for set-up-sync even on first display
- Don't perform any action when clicking unlinked text
- Use yellow/orange background instead of blue for notification bar
- Prevent text from wrapping out of the bar at narrow window widths
- Use local variable for observer id

chrome/content/zotero/zoteroPane.js

@@ -356,8 +356,8 @@ var ZoteroPane = new function()
 
 		if(this.collectionsView) this.collectionsView.unregister();
 		if(this.itemsView) this.itemsView.unregister();
-		if (this._syncRemindersObserverID) {
-			Zotero.Notifier.unregisterObserver(this._syncRemindersObserverID);
+		if (_syncRemindersObserverID) {
+			Zotero.Notifier.unregisterObserver(_syncRemindersObserverID);
 		}
 		
 		this.uninitContainers();
@@ -2265,7 +2265,7 @@ var ZoteroPane = new function()
 	};
 
 
-	this._syncRemindersObserverID = null;
+	var _syncRemindersObserverID = null;
 	this.initSyncReminders = function (startup) {
 		if (startup) {
 			Zotero.Notifier.registerObserver(
@@ -2289,29 +2289,29 @@ var ZoteroPane = new function()
 		// If both reminders are disabled, we don't need an observer
 		if (!Zotero.Prefs.get('sync.reminder.setUp.enabled')
 				&& !Zotero.Prefs.get('sync.reminder.autoSync.enabled')) {
-			if (this._syncRemindersObserverID) {
-				Zotero.Notifier.unregisterObserver(this._syncRemindersObserverID);
-				this._syncRemindersObserverID = null;
+			if (_syncRemindersObserverID) {
+				Zotero.Notifier.unregisterObserver(_syncRemindersObserverID);
+				_syncRemindersObserverID = null;
 			}
 			return;
 		}
 
 		// If we are syncing and auto-syncing then no need for observer
 		if (Zotero.Sync.Runner.enabled && Zotero.Prefs.get('sync.autoSync')) {
-			if (this._syncRemindersObserverID) {
-				Zotero.Notifier.unregisterObserver(this._syncRemindersObserverID);
-				this._syncRemindersObserverID = null;
+			if (_syncRemindersObserverID) {
+				Zotero.Notifier.unregisterObserver(_syncRemindersObserverID);
+				_syncRemindersObserverID = null;
 			}
 			return;
 		}
 
 		// If we already have an observer don't add another one
-		if (this._syncRemindersObserverID) {
+		if (_syncRemindersObserverID) {
 			return;
 		}
 
 		const eventTypes = ['add', 'modify', 'delete'];
-		this._syncRemindersObserverID = Zotero.Notifier.registerObserver(
+		_syncRemindersObserverID = Zotero.Notifier.registerObserver(
 			{
 				notify: (event) => {
 					if (!eventTypes.includes(event)) {
@@ -2345,8 +2345,7 @@ var ZoteroPane = new function()
 			return;
 		}
 
-		// When we have not seen the first warning, hide the checkbox
-		this.showSyncReminder('setUp', lastDisplayed === 0);
+		this.showSyncReminder('setUp', { learnMoreURL: ZOTERO_CONFIG.SYNC_INFO_URL });
 	};
 
 
@@ -2372,18 +2371,19 @@ var ZoteroPane = new function()
 		if (lastDisplayed > Math.round(Date.now() / 1000) - sevenDays) {
 			return;
 		}
-
-		this.showSyncReminder('autoSync', false);
+		
+		this.showSyncReminder('autoSync');
 	};
 
 
 	/**
 	 * Configure the UI and show the sync reminder panel for a given type of reminder
 	 *
-	 * @param reminderType - Possible values: 'setUp' or 'autoSync'
-	 * @param hideDisable - True if the 'Don't show again' link is hidden
+	 * @param {String} reminderType - Possible values: 'setUp' or 'autoSync'
+	 * @param {Object} [options]
+	 * @param {String} [options.learnMoreURL] - Show "Learn More" link to this URL
 	 */
-	this.showSyncReminder = function (reminderType, hideDisable) {
+	this.showSyncReminder = function (reminderType, options = {}) {
 		if (!['setUp', 'autoSync'].includes(reminderType)) {
 			throw new Error(`Invalid reminder type: ${reminderType}`);
 		}
@@ -2396,13 +2396,18 @@ var ZoteroPane = new function()
 
 		let message = document.getElementById('sync-reminder-message');
 		message.textContent = Zotero.getString(`sync.reminder.${reminderType}.message`, Zotero.appName);
-		message.onclick = function () {
-			closePanel();
-			Zotero.Utilities.Internal.openPreferences('zotero-prefpane-sync');
-		};
 
 		let actionLink = document.getElementById('sync-reminder-action');
-		actionLink.textContent = Zotero.getString(`sync.reminder.${reminderType}.action`);
+		switch (reminderType) {
+			case 'autoSync':
+				var actionStr = Zotero.getString('general.enable');
+				break;
+			
+			default:
+				var actionStr = Zotero.getString(`sync.reminder.${reminderType}.action`);
+				break;
+		}
+		actionLink.textContent = actionStr;
 		actionLink.onclick = function () {
 			closePanel();
 
@@ -2416,9 +2421,15 @@ var ZoteroPane = new function()
 			}
 		};
 
+		let learnMoreLink = document.getElementById('sync-reminder-learn-more');
+		learnMoreLink.textContent = Zotero.getString('general.learnMore');
+		learnMoreLink.hidden = !options.learnMoreURL;
+		learnMoreLink.onclick = function () {
+			Zotero.launchURL(options.learnMoreURL);
+		};
+		
 		let dontShowAgainLink = document.getElementById('sync-reminder-disable');
 		dontShowAgainLink.textContent = Zotero.getString('general.dontAskAgain');
-		dontShowAgainLink.hidden = hideDisable;
 		dontShowAgainLink.onclick = function () {
 			closePanel();
 			Zotero.Prefs.set(`sync.reminder.${reminderType}.enabled`, false);

chrome/content/zotero/zoteroPane.xul

@@ -240,6 +240,7 @@
 						<div xmlns="http://www.w3.org/1999/xhtml" id="sync-reminder-banner">
 							<div id="sync-reminder-message"/>
 							<a id="sync-reminder-action" class="sync-reminder-link"/>
+							<a id="sync-reminder-learn-more" class="sync-reminder-link"/>
 							<div id="sync-reminder-spacer"/>
 							<a id="sync-reminder-disable" class="sync-reminder-link"/>
 							<a id="sync-reminder-remind" class="sync-reminder-link"/>

chrome/locale/en-US/zotero/zotero.properties

@@ -49,6 +49,7 @@ general.import = Import
 general.export = Export
 general.update = Update
 general.moreInformation            = More Information
+general.learnMore                  = Learn More
 general.seeForMoreInformation		= See %S for more information.
 general.open                       = Open %S
 general.close                       = Close
@@ -997,8 +998,7 @@ sync.removeGroupsAndSync			= Remove Groups and Sync
 
 sync.reminder.setUp.message			= Back up your library with %S syncing.
 sync.reminder.setUp.action			= Set Up Syncing
-sync.reminder.autoSync.message		= %S can automatically sync after you make changes.
-sync.reminder.autoSync.action		= Enable Automatic Sync
+sync.reminder.autoSync.message       = %S hasn’t synced in a while. Do you want to enable automatic syncing?
 
 sync.error.usernameNotSet			= Username not set
 sync.error.usernameNotSet.text		= You must enter your zotero.org username and password in the Zotero preferences to sync with the Zotero server.

chrome/skin/default/zotero/overlay.css

@@ -646,10 +646,14 @@
 	text-align: center;
 	padding: 0 2em;
 	position: relative;
+	white-space: nowrap;
+	overflow: hidden;
 }
 
 #sync-reminder-banner {
-	background: rgb(89, 139, 236);
+	background: rgb(255, 234, 80);
+	border-bottom: #a9a9a9 .5px solid;
+	color: black;
 }
 
 #retracted-items-message, #sync-reminder-message {
@@ -673,10 +677,14 @@
 	padding-right: 0.5em;
 }
 
-#retracted-items-link:active, .sync-reminder-link:active {
+#retracted-items-link:active {
 	color: #f9e8e2;
 }
 
+.sync-reminder-link:active {
+	color: #4b4b4b;
+}
+
 #retracted-items-close, #sync-reminder-close {
 	position: absolute;
 	cursor: pointer;

resource/config.js

@@ -21,6 +21,7 @@ var ZOTERO_CONFIG = {
 	QUICK_START_URL: "https://www.zotero.org/support/quick_start_guide",
 	PDF_TOOLS_URL: "https://www.zotero.org/download/xpdf/",
 	SUPPORT_URL: "https://www.zotero.org/support/",
+	SYNC_INFO_URL: "https://www.zotero.org/support/sync",
 	TROUBLESHOOTING_URL: "https://www.zotero.org/support/getting_help",
 	FEEDBACK_URL: "https://forums.zotero.org/",
 	CONNECTORS_URL: "https://www.zotero.org/download/connectors",