Show first-run banner on upgrade (#3807)

chrome/content/zotero/xpcom/prefs.js

@@ -44,7 +44,7 @@ Zotero.Prefs = new function() {
 
 		// Process pref version updates
 		var fromVersion = this.get('prefVersion');
-		var toVersion = 11;
+		var toVersion = 12;
 		if (!fromVersion) {
 			this.set('prefVersion', toVersion);
 		}
@@ -138,6 +138,10 @@ Zotero.Prefs = new function() {
 					case 11:
 						await Zotero.LocateManager.migrateEngines();
 						break;
+					
+					case 12:
+						Zotero.Prefs.set('firstRunGuidanceShown.z7Banner', false);
+						break;
 				}
 			}
 			this.set('prefVersion', toVersion);

chrome/content/zotero/zoteroPane.js

@@ -114,6 +114,7 @@ var ZoteroPane = new function()
 		zp.addEventListener('UIPropertiesChanged', () => {
 			this.collectionsView?.updateFontSize();
 			this.itemsView?.updateFontSize();
+			this.updatePostUpgradeBanner();
 		});
 		Zotero.UIProperties.registerRoot(document.getElementById('zotero-context-pane'));
 		this.itemPane = document.querySelector("#zotero-item-pane");
@@ -629,6 +630,7 @@ var ZoteroPane = new function()
 		}
 		
 		setTimeout(function () {
+			ZoteroPane.showPostUpgradeBanner();
 			ZoteroPane.showRetractionBanner();
 			ZoteroPane.showArchitectureWarning();
 			ZoteroPane.initSyncReminders(true);
@@ -6143,6 +6145,35 @@ var ZoteroPane = new function()
 	};
 
 	
+	this.showPostUpgradeBanner = function () {
+		if (Zotero.isBetaBuild || Zotero.Prefs.get('firstRunGuidanceShown.z7Banner')) {
+			return;
+		}
+		document.getElementById('post-upgrade-container').removeAttribute('collapsed');
+		this.updatePostUpgradeBanner();
+	};
+	
+	
+	this.updatePostUpgradeBanner = function () {
+		document.getElementById('post-upgrade-density').value = Zotero.Prefs.get('uiDensity');
+	};
+	
+	
+	this.hidePostUpgradeBanner = function (remindMeLater = false) {
+		document.getElementById('post-upgrade-container').setAttribute('collapsed', true);
+		if (remindMeLater) {
+			// The pref should already be false if the banner was showing, but just in case
+			Zotero.Prefs.set('firstRunGuidanceShown.z7Banner', false);
+			setTimeout(() => {
+				this.showPostUpgradeBanner();
+			}, 1000 * 60 * 60 * 24); // 24 hours
+		}
+		else {
+			Zotero.Prefs.set('firstRunGuidanceShown.z7Banner', true);
+		}
+	};
+
+
 	/**
 	 * Sets the layout to either a three-vertical-pane layout and a layout where itemsPane is above itemPane
 	 */

chrome/content/zotero/zoteroPane.xhtml

@@ -1081,23 +1081,62 @@
 							onkeyup="ZoteroPane_Local.handleKeyUp(event, this.id)"
 							onkeypress="ZoteroPane_Local.handleKeyPress(event)">
 							
+							<vbox id="post-upgrade-container" collapsed="true" role="status">
+								<html:div id="post-upgrade-banner">
+									<html:div id="post-upgrade-centered">
+										<html:div
+												data-l10n-id="post-upgrade-message"
+												data-l10n-args='{"version": "7"}'>
+											<html:a
+												data-l10n-name="new-features-link"
+												id="post-upgrade-new-features-link"
+												class="link"
+												onclick="Zotero.launchURL(ZOTERO_CONFIG.NEW_FEATURES_URL)"
+												tabindex="0"
+											/>
+										</html:div>
+										<html:div>•</html:div>
+										<html:div data-l10n-id="post-upgrade-density"/>
+										<radiogroup
+											id="post-upgrade-density"
+											orient="horizontal"
+											oncommand="Zotero.Prefs.set('uiDensity', this.value)"
+										>
+											<radio value="comfortable" data-l10n-id="menu-ui-density-comfortable"/>
+											<radio value="compact" data-l10n-id="menu-ui-density-compact"/>
+										</radiogroup>
+									</html:div>
+									<html:div id="post-upgrade-buttons">
+										<button
+											data-l10n-id="post-upgrade-remind-me-later"
+											oncommand="ZoteroPane.hidePostUpgradeBanner(true)"
+										/>
+										<button
+											data-l10n-id="post-upgrade-done"
+											oncommand="ZoteroPane.hidePostUpgradeBanner(false)"
+											default="true"
+										/>
+									</html:div>
+								</html:div>
+							</vbox>
+
 							<vbox id="sync-reminder-container" collapsed="true" role="status">
 								<html:div id="sync-reminder-banner">
-									<html:div id="sync-reminder-message"/>
+									<html:div id="sync-reminder-message" class="message"/>
-									<html:a id="sync-reminder-action" class="sync-reminder-link"/>
+									<html:a id="sync-reminder-action" class="link"/>
-									<html:a id="sync-reminder-learn-more" class="sync-reminder-link"/>
+									<html:a id="sync-reminder-learn-more" class="link"/>
-									<html:div id="sync-reminder-spacer"/>
+									<html:div class="spacer"/>
-									<html:a id="sync-reminder-disable" class="sync-reminder-link"/>
+									<html:a id="sync-reminder-disable" class="link"/>
-									<html:a id="sync-reminder-remind" class="sync-reminder-link"/>
+									<html:a id="sync-reminder-remind" class="link"/>
-									<label is="text-link" id="sync-reminder-close">×</label>
+									<label is="text-link" id="sync-reminder-close" class="close-link">×</label>
 								</html:div>
 							</vbox>
 							
 							<vbox id="retracted-items-container" collapsed="true" role="status">
 								<html:div id="retracted-items-banner">
-									<html:div id="retracted-items-message"/>
+									<html:div id="retracted-items-message" class="message"/>
 									<label is="text-link" id="retracted-items-link"/>
-									<label is="text-link" id="retracted-items-close">×</label>
+									<label is="text-link" id="retracted-items-close" class="close-link">×</label>
 								</html:div>
 							</vbox>
 

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

@@ -12,6 +12,7 @@ general-choose-file = Choose File…
 general-open-settings = Open Settings
 general-help = Help
 general-tag = Tag
+general-done = Done
 
 menu-file-show-in-finder =
     .label = Show in Finder
@@ -668,3 +669,10 @@ file-type-video = Video
 file-type-presentation = Presentation
 file-type-document = Document
 file-type-ebook = Ebook
+
+post-upgrade-message = Learn about the <a data-l10n-name="new-features-link">new features in { -app-name } { $version }</a>
+post-upgrade-density = Choose your preferred layout density:
+post-upgrade-remind-me-later =
+    .label = { general-remind-me-later }
+post-upgrade-done =
+    .label = { general-done }

chrome/skin/default/zotero/overlay.css

@@ -333,67 +333,6 @@ TODO: Replace with SVG
 	height: 16px;
 }
 
-#retracted-items-banner, #sync-reminder-banner {
-	display: flex;
-	justify-content: center;
-	background: #d93425;
-	line-height: 2.2em;
-	font-weight: 600;
-	color: white;
-	font-size: 13.5px;
-	text-align: center;
-	padding: 0 2em;
-	position: relative;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-#sync-reminder-banner {
-	background: rgb(255, 234, 80);
-	border-bottom: #a9a9a9 .5px solid;
-	color: black;
-}
-
-#retracted-items-message, #sync-reminder-message {
-	margin-right: .8em;
-}
-
-#sync-reminder-spacer {
-	flex: 1;
-}
-
-#retracted-items-link, .sync-reminder-link, #retracted-items-close, #sync-reminder-close {
-	color: inherit;
-	border: none;
-	margin: 0;
-}
-
-#retracted-items-link {
-	margin-left: .3em;
-}
-
-.sync-reminder-link {
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-}
-
-#retracted-items-link:active {
-	color: #f9e8e2;
-}
-
-.sync-reminder-link:active {
-	color: #4b4b4b;
-}
-
-#retracted-items-close, #sync-reminder-close {
-	text-decoration: none;
-	position: absolute;
-	cursor: pointer;
-	top: -2px;
-	right: 9px;
-	font-size: 22px;
-}
-
 /* Missing in Fx60 */
 .autocomplete-richlistbox {
 	border: 1px solid transparent;

defaults/preferences/zotero.js

@@ -45,6 +45,7 @@ pref("extensions.zotero.showTrashWhenEmpty", true);
 pref("extensions.zotero.trashAutoEmptyDays", 30);
 pref("extensions.zotero.viewOnDoubleClick", true);
 pref("extensions.zotero.firstRunGuidance", true);
+pref("extensions.zotero.firstRunGuidanceShown.z7Banner", true);
 pref("extensions.zotero.showConnectorVersionWarning", true);
 pref("extensions.zotero.reopenPanesOnRestart", true);
 

resource/config.js

@@ -31,6 +31,7 @@ var ZOTERO_CONFIG = {
 	GET_INVOLVED_URL: 'https://www.zotero.org/getinvolved',
 	DICTIONARIES_URL: 'https://download.zotero.org/dictionaries/',
 	PLUGINS_URL: 'https://www.zotero.org/support/plugins',
+	NEW_FEATURES_URL: 'https://www.zotero.org/blog/zotero-7/'
 };
 
 if (typeof exports === 'object' && typeof module !== 'undefined') {

scss/_zotero.scss

@@ -63,6 +63,7 @@
 @import "components/tabsMenu";
 @import "components/newCollectionDialog";
 @import "components/reader";
+@import "components/banners";
 
 // Elements
 // --------------------------------------------------

scss/components/_banners.scss

@@ -0,0 +1,103 @@
+#post-upgrade-banner, #retracted-items-banner, #sync-reminder-banner {
+	display: flex;
+	justify-content: center;
+	text-align: center;
+	position: relative;
+	white-space: nowrap;
+	overflow: hidden;
+
+	label[is="text-link"], .link {
+		color: inherit;
+		border: none;
+		margin: 0;
+	}
+}
+
+#post-upgrade-container {
+	background: var(--material-background);
+}
+
+#post-upgrade-banner {
+	background: var(--accent-blue30);
+	color: var(--fill-primary);
+	flex-wrap: wrap;
+	gap: 8px;
+	padding: 8px 12px;
+
+	.link {
+		color: var(--accent-blue);
+		text-decoration: underline;
+		cursor: pointer;
+	}
+	
+	#post-upgrade-centered {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 8px;
+		flex: 1 auto;
+	}
+	
+	#post-upgrade-new-features-link {
+		font-weight: bold;
+	}
+	
+	#post-upgrade-buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-inline-start: auto;
+	}
+}
+
+#retracted-items-banner, #sync-reminder-banner {
+	line-height: 2.2em;
+	font-size: 13.5px;
+	padding: 0 2em;
+	font-weight: 600;
+
+	.message {
+		margin-inline-end: .8em;
+	}
+
+	.spacer {
+		flex: 1;
+	}
+
+	.close-link {
+		text-decoration: none;
+		position: absolute;
+		cursor: pointer;
+		top: -2px;
+		inset-inline-end: 9px;
+		font-size: 22px;
+	}
+}
+
+#retracted-items-banner {
+	background: #d93425;
+	color: white;
+
+	label[is="text-link"] {
+		margin-inline-start: 0.3em;
+		
+		&:active {
+			color: #f9e8e2;
+		}
+	}
+}
+
+#sync-reminder-banner {
+	background: rgb(255, 234, 80);
+	border-bottom: #a9a9a9 .5px solid;
+	color: black;
+
+	.link {
+		padding-inline: 0.5em;
+		
+		&:active {
+			color: #4b4b4b;
+		}
+	}
+}