Show banner to 32-bit Windows users to reinstall 64-bit version (#4172)

Resolves #3940

chrome/content/zotero/zoteroPane.js

@@ -625,6 +625,7 @@ var ZoteroPane = new function()
 		
 		setTimeout(function () {
 			ZoteroPane.showRetractionBanner();
+			ZoteroPane.showArchitectureWarning();
 			ZoteroPane.initSyncReminders(true);
 		});
 		
@@ -6027,7 +6028,41 @@ var ZoteroPane = new function()
 			this.hideRetractionBanner();
 		}
 	};
-	
+
+	this.showArchitectureWarning = async function () {
+		const remindInterval = 60 * 60 * 24 * 30;
+		const isWow64 = (await Services.sysinfo.processInfo).isWow64;
+		const is32bitBuild = Zotero.arch === 'x86';
+		const lastDisplayed = Zotero.Prefs.get('architecture.warning.lastDisplayed') ?? 0;
+		
+		if (lastDisplayed > Math.round(Date.now() / 1000) - remindInterval) {
+			return;
+		}
+
+		if (Zotero.isWin && isWow64 && is32bitBuild) {
+			let panel = document.getElementById('architecture-warning-container');
+			let action = document.getElementById('architecture-warning-action');
+			let close = document.getElementById('architecture-warning-close');
+			let remind = document.getElementById('architecture-warning-remind');
+			
+			panel.removeAttribute('collapsed');
+			action.onclick = function () {
+				Zotero.launchURL('https://www.zotero.org/download/');
+			};
+			close.onclick = function () {
+				this.hideArchitectureWarning();
+			}.bind(this);
+			remind.onclick = function () {
+				Zotero.Prefs.set(`architecture.warning.lastDisplayed`, Math.round(Date.now() / 1000));
+				this.hideArchitectureWarning();
+			}.bind(this);
+		}
+	};
+
+	this.hideArchitectureWarning = function () {
+		document.getElementById('architecture-warning-container').setAttribute('collapsed', true);
+	};
+
 	
 	/**
 	 * Sets the layout to either a three-vertical-pane layout and a layout where itemsPane is above itemPane

chrome/content/zotero/zoteroPane.xhtml

@@ -1099,6 +1099,16 @@
 									<label is="text-link" id="retracted-items-close">×</label>
 								</html:div>
 							</vbox>
+
+							<vbox id="architecture-warning-container" collapsed="true" role="status">
+								<html:div id="architecture-warning-banner" class="banner">
+									<html:div id="architecture-win32-warning-message" class="message" data-l10n-id="architecture-win32-warning-message" />
+									<html:a id="architecture-warning-action" data-l10n-id="architecture-warning-action" />
+									<html:div class="spacer" />
+									<html:a id="architecture-warning-remind" data-l10n-id="general-remind-me-later" />
+									<label is="text-link" id="architecture-warning-close">×</label>
+								</html:div>
+							</vbox>
 							
 							<hbox id="zotero-trees" flex="1">
 								<vbox id="zotero-collections-pane" zotero-persist="width">

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

@@ -7,6 +7,7 @@ return-or-enter =
 
 general-remove = Remove
 general-add = Add
+general-remind-me-later = Remind Me Later
 
 menu-file-show-in-finder =
     .label = Show in Finder
@@ -515,3 +516,7 @@ item-pane-header-bibEntry =
     .label = Bibliography Entry
 item-pane-header-more-options =
     .label = More Options
+
+
+architecture-win32-warning-message = { -app-name } is running in 32-bit mode on a 64-bit version of Windows. { -app-name } will run more efficiently in 64-bit mode.
+architecture-warning-action = Download 64-bit { -app-name }

scss/_zotero.scss

@@ -23,6 +23,7 @@
 @import "components/advancedSearch";
 @import "components/annotation";
 @import "components/autosuggest";
+@import "components/banner";
 @import "components/button";
 @import "components/clicky";
 @import "components/contextPane";

scss/components/_banner.scss

@@ -0,0 +1,50 @@
+.banner {
+    border-bottom: var(--color-panedivider) .5px solid;
+    display: flex;
+    font-size: 1.03846154em;
+    font-weight: 600;
+    justify-content: center;
+    line-height: 2.07692308em;
+    overflow: hidden;
+    padding: 0 2em;
+
+    .message {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    > .spacer {
+        flex: 1;
+    }
+
+    > a {
+        border: none;
+        color: inherit;
+        margin: 0;
+        padding: 0 .5em;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    // extra space after the last link after spacer, i.e., the one immediately before the X button
+    .spacer ~ a:last-of-type {
+        padding-right: 1em;
+    }
+
+    > label {
+        color: inherit;
+        cursor: pointer;
+        font-size: 1.69230769em;
+        position: absolute;
+        right: 9px;
+        text-decoration: none;
+        top: -3px;
+    }
+}
+
+#architecture-warning-container {
+    background-color: var(--accent-red);
+    color: white;
+}