From 6a85dd2c5e1b70f78faa085796399a21c19ccf76 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Mon, 10 Apr 2023 15:37:50 -0400
Subject: [PATCH] fx-compat: Lay out preferences window with flexbox (#3073)

---
 .../content/zotero/preferences/preferences.js |  2 +-
 .../zotero/preferences/preferences.xhtml      | 28 ++++---
 .../preferences/preferences_advanced.js       |  2 +-
 .../preferences/preferences_advanced.xhtml    | 54 ++++++-------
 .../preferences/preferences_export.xhtml      |  2 +-
 chrome/skin/default/zotero/preferences.css    | 75 ++++++++++++++++---
 6 files changed, 108 insertions(+), 55 deletions(-)

diff --git a/chrome/content/zotero/preferences/preferences.js b/chrome/content/zotero/preferences/preferences.js
index a03dfffda5..9a5e95be28 100644
--- a/chrome/content/zotero/preferences/preferences.js
+++ b/chrome/content/zotero/preferences/preferences.js
@@ -212,7 +212,7 @@ var Zotero_Preferences = {
 
 		this.navigation.append(listItem);
 
-		let container = document.createXULElement('vbox');
+		let container = document.createElement('div');
 		container.hidden = true;
 		this.helpContainer.before(container);
 
diff --git a/chrome/content/zotero/preferences/preferences.xhtml b/chrome/content/zotero/preferences/preferences.xhtml
index 791284be9a..683af2b056 100644
--- a/chrome/content/zotero/preferences/preferences.xhtml
+++ b/chrome/content/zotero/preferences/preferences.xhtml
@@ -49,9 +49,7 @@
 		windowtype="zotero:pref"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 		xmlns:html="http://www.w3.org/1999/xhtml"
-		style="display: flex;"
-		width="800"
-		height="600">
+		style="display: flex;">
 	
 	<script>
 		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
@@ -79,28 +77,28 @@
 		<key id="key_find" modifiers="accel" key="F" oncommand="document.getElementById('prefs-search').focus()"/>
 	</keyset>
 
-	<hbox id="prefs-outer-container" flex="1">
+	<html:div id="prefs-outer-container">
 		<richlistbox id="prefs-navigation"></richlistbox>
-		<vbox id="prefs-inner-container" flex="1">
-			<hbox id="prefs-search-container" align="center">
-				<hbox flex="1" pack="start" align="center">
+		<html:div id="prefs-inner-container">
+			<html:div id="prefs-search-container">
+				<html:div id="prefs-subpane-back-button-container">
 					<button
 						id="prefs-subpane-back-button"
 						label="‹"
 						aria-label="&zotero.pdfReader.back;"
 						hidden="true"/>
-				</hbox>
+				</html:div>
 				<search-textbox id="prefs-search" placeholder="&zotero.lookup.button.search;" timeout="1"/>
-			</hbox>
-			<vbox id="prefs-content" flex="1">
-				<hbox id="prefs-help-container" pack="end">
+			</html:div>
+			<html:div id="prefs-content">
+				<html:div id="prefs-help-container">
 					<button
 						oncommand="Zotero_Preferences.openHelpLink()"
 						label="&zotero.preferences.helpButton.label;"
 						class="help-button" 
 						align="end"/>
-				</hbox>
-			</vbox>
-		</vbox>
-	</hbox>
+				</html:div>
+			</html:div>
+		</html:div>
+	</html:div>
 </window>
diff --git a/chrome/content/zotero/preferences/preferences_advanced.js b/chrome/content/zotero/preferences/preferences_advanced.js
index a0d8a913cf..512b656dc5 100644
--- a/chrome/content/zotero/preferences/preferences_advanced.js
+++ b/chrome/content/zotero/preferences/preferences_advanced.js
@@ -833,7 +833,7 @@ Zotero_Preferences.Keys = {
 	init: function () {
 		for (let label of document.querySelectorAll('#zotero-keys-grid .modifier')) {
 			// Display the appropriate modifier keys for the platform
-			label.value = Zotero.isMac ? Zotero.getString('general.keys.cmdShift') : Zotero.getString('general.keys.ctrlShift');
+			label.textContent = Zotero.isMac ? Zotero.getString('general.keys.cmdShift') : Zotero.getString('general.keys.ctrlShift');
 		}
 		
 		var textboxes = document.querySelectorAll('#zotero-keys-grid input');
diff --git a/chrome/content/zotero/preferences/preferences_advanced.xhtml b/chrome/content/zotero/preferences/preferences_advanced.xhtml
index f2afbb37fe..7c48815986 100644
--- a/chrome/content/zotero/preferences/preferences_advanced.xhtml
+++ b/chrome/content/zotero/preferences/preferences_advanced.xhtml
@@ -30,11 +30,11 @@
 		<groupbox id="zotero-prefpane-advanced-miscellaneous">
 			<label><html:h2>&zotero.preferences.miscellaneous;</html:h2></label>
 			
-			<hbox align="center">
+			<html:div class="pref-row">
 				<checkbox label="&zotero.preferences.autoUpdate;" preference="extensions.zotero.automaticScraperUpdates" native="true"/>
 				<button id="updateButton" style="margin-top:0" label="&zotero.preferences.updateNow;"
 					oncommand="Zotero_Preferences.Advanced.updateTranslators()"/>
-			</hbox>
+			</html:div>
 			
 			<checkbox label="&zotero.preferences.reportTranslationFailure;" preference="extensions.zotero.reportTranslationFailure" native="true"/>
 		</groupbox>
@@ -116,47 +116,47 @@
 		</groupbox>
 	</vbox>
 
-	<vbox class="main-section" id="zotero-prefpane-advanced-keys-tab">
+	<html:div class="main-section" id="zotero-prefpane-advanced-keys-tab">
 		<html:h1>&zotero.preferences.advanced.keys;</html:h1>
 	
 		<html:div id="zotero-keys-grid">
-			<label value="&zotero.preferences.keys.newItem;" control="textbox-newItem"/>
-			<label class="modifier"/>
+			<html:label for="textbox-newItem">&zotero.preferences.keys.newItem;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-newItem" maxlength="1" size="1" preference="extensions.zotero.keys.newItem"/>
 
-			<label value="&zotero.preferences.keys.newNote;" control="textbox-newNote"/>
-			<label class="modifier"/>
+			<html:label for="textbox-newNote">&zotero.preferences.keys.newNote;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-newNote" maxlength="1" size="1" preference="extensions.zotero.keys.newNote"/>
 
-			<label value="&zotero.preferences.keys.focusLibrariesPane;" control="textbox-library"/>
-			<label class="modifier"/>
+			<html:label for="textbox-library">&zotero.preferences.keys.focusLibrariesPane;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-library" maxlength="1" size="1" preference="extensions.zotero.keys.library"/>
 
-			<label value="&zotero.preferences.keys.quicksearch;" control="textbox-quicksearch"/>
-			<label class="modifier"/>
+			<html:label for="textbox-quicksearch">&zotero.preferences.keys.quicksearch;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-quicksearch" maxlength="1" size="1" preference="extensions.zotero.keys.quicksearch"/>
 
-			<label value="&zotero.preferences.keys.copySelectedItemCitationsToClipboard;" control="textbox-copySelectedItemCitationsToClipboard"/>
-			<label class="modifier"/>
+			<html:label for="textbox-copySelectedItemCitationsToClipboard">&zotero.preferences.keys.copySelectedItemCitationsToClipboard;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-copySelectedItemCitationsToClipboard" maxlength="1" size="1"
 					preference="extensions.zotero.keys.copySelectedItemCitationsToClipboard"
 					oninput="if (Zotero_Preferences.Export) { Zotero_Preferences.Export.updateQuickCopyInstructions(); }"/>
 
-			<label value="&zotero.preferences.keys.copySelectedItemsToClipboard;" control="textbox-copySelectedItemsToClipboard"/>
-			<label class="modifier"/>
+			<html:label for="textbox-copySelectedItemsToClipboard">&zotero.preferences.keys.copySelectedItemsToClipboard;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-copySelectedItemsToClipboard" maxlength="1" size="1"
 					preference="extensions.zotero.keys.copySelectedItemsToClipboard"
 					oninput="if (Zotero_Preferences.Export) { Zotero_Preferences.Export.updateQuickCopyInstructions(); }"/>
 
-			<label value="&zotero.preferences.keys.toggleAllRead;" control="textbox-toggleAllRead"/>
-			<label class="modifier"/>
+			<html:label for="textbox-toggleAllRead">&zotero.preferences.keys.toggleAllRead;</html:label>
+			<html:label class="modifier"/>
 			<html:input type="text" id="textbox-toggleAllRead" maxlength="1" size="1" preference="extensions.zotero.keys.toggleAllRead"/>
 		</html:div>
 		
 		<label class="statusLine" value="&zotero.preferences.keys.changesTakeEffect;"/>
 		
-		<separator/>				
-	</vbox>
+		<separator/>
+	</html:div>
 	<vbox class="main-section" id="zotero-prefpane-advanced-feeds-tab">
 		<html:h1>&zotero.preferences.feeds;</html:h1>
 
@@ -215,19 +215,19 @@
 			
 			<separator/>
 			
-			<hbox align="center">
-				<label value="&zotero.preferences.fulltext.textMaxLength;"/>
+			<html:div class="pref-row">
+				<html:label>&zotero.preferences.fulltext.textMaxLength;</html:label>
 				<html:input type="text" size="10" preference="extensions.zotero.fulltext.textMaxLength"/>
-				<label value="(&zotero.preferences.default; 500000)"/>
-			</hbox>
+				<html:label>(&zotero.preferences.default; 500000)</html:label>
+			</html:div>
 	
 			<separator class="thin"/>
 	
-			<hbox align="center">
-				<label value="&zotero.preferences.fulltext.pdfMaxPages;"/>
+			<html:div class="pref-row">
+				<html:label>&zotero.preferences.fulltext.pdfMaxPages;</html:label>
 				<html:input type="text" size="5" preference="extensions.zotero.fulltext.pdfMaxPages"/>
-				<label value="(&zotero.preferences.default; 100)"/>
-			</hbox>
+				<html:label>(&zotero.preferences.default; 100)</html:label>
+			</html:div>
 		</groupbox>
 		
 		<groupbox id="fulltext-stats">
diff --git a/chrome/content/zotero/preferences/preferences_export.xhtml b/chrome/content/zotero/preferences/preferences_export.xhtml
index f875e3aded..e22c7d8204 100644
--- a/chrome/content/zotero/preferences/preferences_export.xhtml
+++ b/chrome/content/zotero/preferences/preferences_export.xhtml
@@ -86,7 +86,7 @@
 		<separator/>
 		
 		<label value="&zotero.preferences.quickCopy.siteEditor.setings;" control="quickCopy-siteSettings"/>
-		<hbox class="virtualized-table-container" flex="1" height="120px">
+		<hbox class="virtualized-table-container" flex="1">
 			<html:div id="quickCopy-siteSettings"/>
 		</hbox>
 		<separator class="thin"/>
diff --git a/chrome/skin/default/zotero/preferences.css b/chrome/skin/default/zotero/preferences.css
index bca102fc6e..327fb72582 100644
--- a/chrome/skin/default/zotero/preferences.css
+++ b/chrome/skin/default/zotero/preferences.css
@@ -1,15 +1,49 @@
-#prefs-content {
+#zotero-prefs {
+	width: 800px;
+	height: 600px;
+	min-width: 800px;
 	min-height: 600px;
-	overflow-y: scroll;
+}
+
+#prefs-outer-container {
+	display: flex;
+	flex-direction: row;
+	min-width: 0;
+	min-height: 0;
+	-moz-box-flex: 1;
+}
+
+#prefs-inner-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+#prefs-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: scroll;
 	padding-bottom: 10px;
 }
 
 #prefs-content > * {
+	display: flex;
+	flex-direction: column;
 	margin: 5px 15px;
+	max-width: 800px;
+}
+
+#prefs-content > [hidden] {
+	display: none;
 }
 
 #prefs-search-container {
-	height: 40px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-height: 40px;
 	padding-inline-end: 8px;
 }
 
@@ -20,6 +54,7 @@
 
 #prefs-navigation {
 	width: 180px;
+	flex-shrink: 0;
 	appearance: none;
 	background: transparent;
 	margin: 6px;
@@ -52,6 +87,10 @@
 	border-top: 1px solid lightgray;
 }
 
+#prefs-subpane-back-button-container {
+	flex: 1;
+}
+
 #prefs-subpane-back-button {
 	appearance: none;
 	font-size: 32px;
@@ -70,6 +109,11 @@
 	color: SelectedItem;
 }
 
+#prefs-help-container {
+	display: flex;
+	align-items: end;
+}
+
 h1 {
 	margin: 0 0 4px 0;
 	font-size: 1.3em;
@@ -151,6 +195,12 @@ window[windowtype="zotero:pref"] {
    min-width: 600px;
 }
 
+label {
+	/* Apply XUL label styles to all labels */
+	margin-block: 1px 2px;
+	margin-inline: 6px 5px;
+}
+
 description, label, checkbox {
 	max-width: 630px;
 }
@@ -201,6 +251,15 @@ description label[class=zotero-text-link], label[class=zotero-text-link]
 	-moz-box-pack: end; /* Right-justify left column */
 }
 
+.pref-row {
+	display: flex;
+	align-items: center;
+}
+
+button {
+	flex-shrink: 0;
+}
+
 /* General pane */
 #zotero-prefpane-general .statusLine {
 	margin-inline-start: .75em;
@@ -408,12 +467,8 @@ description label[class=zotero-text-link], label[class=zotero-text-link]
 	font-size: 12px;
 }
 
-#quickCopy-siteSettings-rows::-moz-tree-cell(quickCopy-copyAsHTML) {
-	/*
-	DEBUG: possible to center checkmark here instead of with spaces?
-	
-	Tried text-align, -moz-box-align, and -moz-box-pack
-	*/
+#zotero-prefpane-export .virtualized-table-container {
+	height: 120px;
 }
 
 #zotero-quickCopy-format
@@ -453,7 +508,7 @@ description label[class=zotero-text-link], label[class=zotero-text-link]
 /* Shortcut Keys pane */
 #zotero-prefpane-advanced-keys-tab input
 {
-	margin-inline-start: -1px;
+	margin-inline-start: 0;
 }
 
 /* Advanced pane */