From 6cd44f19fe79d11d2fd394815fb6bac406b5bd98 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Thu, 24 Aug 2023 11:14:59 -0400
Subject: [PATCH] Fix more Z6/Z7 inconsistencies in Advanced Search

- Prevent row height from changing when switching between text input conditions
  and menulist conditions
   - Replace some of (far from all of) the XUL layout with flexbox
- Restore groupbox appearance
   - A little retro? We probably want some kind of border like we used to have
- Replace some duplicate IDs with classes for styling
---
 .../content/zotero/elements/zoteroSearch.js   | 71 +++++++++----------
 scss/elements/_zoteroSearch.scss              | 31 +++++++-
 2 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/chrome/content/zotero/elements/zoteroSearch.js b/chrome/content/zotero/elements/zoteroSearch.js
index 674ba729b3..0f35fceff2 100644
--- a/chrome/content/zotero/elements/zoteroSearch.js
+++ b/chrome/content/zotero/elements/zoteroSearch.js
@@ -221,28 +221,27 @@
 
 	class ZoteroSearchCondition extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
-			<xul:hbox id="search-condition" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-					flex="1">
-				<xul:popupset id="condition-tooltips"/>
+			<html:div class="search-condition">
+				<popupset id="condition-tooltips"/>
 				
-				<xul:menulist id="conditionsmenu" oncommand="this.closest('zoterosearchcondition').onConditionSelected(event.target.value); event.stopPropagation()" native="true">
-					<xul:menupopup onpopupshown="this.closest('zoterosearchcondition').revealSelectedCondition()">
-						<xul:menu id="more-conditions-menu" label="&zotero.general.more;">
-							<xul:menupopup/>
-						</xul:menu>
-					</xul:menupopup>
-				</xul:menulist>
-				<xul:menulist id="operatorsmenu" oncommand="this.closest('zoterosearchcondition').onOperatorSelected(); event.stopPropagation()" native="true">
-					<xul:menupopup/>
-				</xul:menulist>
-				<xul:zoterosearchtextbox id="valuefield" flex="1"/>
-				<xul:menulist id="valuemenu" flex="1" hidden="true" native="true">
-					<xul:menupopup/>
-				</xul:menulist>
-				<xul:zoterosearchagefield id="value-date-age" hidden="true" flex="1"/>
-				<xul:label id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
-				<xul:label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
-			</xul:hbox>
+				<menulist id="conditionsmenu" oncommand="this.closest('zoterosearchcondition').onConditionSelected(event.target.value); event.stopPropagation()" native="true">
+					<menupopup onpopupshown="this.closest('zoterosearchcondition').revealSelectedCondition()">
+						<menu id="more-conditions-menu" label="&zotero.general.more;">
+							<menupopup/>
+						</menu>
+					</menupopup>
+				</menulist>
+				<menulist id="operatorsmenu" oncommand="this.closest('zoterosearchcondition').onOperatorSelected(); event.stopPropagation()" native="true">
+					<menupopup/>
+				</menulist>
+				<zoterosearchtextbox id="valuefield" class="valuefield"/>
+				<menulist id="valuemenu" class="valuemenu" hidden="true" native="true">
+					<menupopup/>
+				</menulist>
+				<zoterosearchagefield id="value-date-age" class="value-date-age" hidden="true"/>
+				<label id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
+				<label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
+			</html:div>
 		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
 
 		init() {
@@ -904,34 +903,32 @@
 
 	class ZoteroSearchAgeField extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
-			<xul:hbox id="search-in-the-last" flex="1"
-					xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-					xmlns:html="http://www.w3.org/1999/xhtml">
-				<html:input id="input" style="-moz-box-flex: 1"/>
-				<xul:menulist id="age-list" native="true">
-					<xul:menupopup flex="1">
-						<xul:menuitem label="&zotero.search.date.units.days;" value="days" selected="true"/>
-						<xul:menuitem label="&zotero.search.date.units.months;" value="months"/>
-						<xul:menuitem label="&zotero.search.date.units.years;" value="years"/>
-					</xul:menupopup>
-				</xul:menulist>
-			</xul:hbox>
+			<html:div class="search-in-the-last">
+				<html:input class="input"/>
+				<menulist class="age-list" native="true">
+					<menupopup>
+						<menuitem label="&zotero.search.date.units.days;" value="days" selected="true"/>
+						<menuitem label="&zotero.search.date.units.months;" value="months"/>
+						<menuitem label="&zotero.search.date.units.years;" value="years"/>
+					</menupopup>
+				</menulist>
+			</html:div>
 		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
 
 		get value() {
-			var input = this.querySelector('#input');
-			var menulist = this.querySelector('#age-list');
+			var input = this.querySelector('.input');
+			var menulist = this.querySelector('.age-list');
 			return input.value + ' '
 				+ menulist.firstChild.childNodes[menulist.selectedIndex].getAttribute('value');
 		}
 
 		set value(val) {
-			var input = this.querySelector('#input');
+			var input = this.querySelector('.input');
 
 			var [num, units] = val.split(' ');
 			input.setAttribute('value', num);
 			
-			var menulist = this.querySelector('#age-list');
+			var menulist = this.querySelector('.age-list');
 			var menupopup = menulist.firstChild;
 			
 			var selectThis = 0;
diff --git a/scss/elements/_zoteroSearch.scss b/scss/elements/_zoteroSearch.scss
index c009c40586..ba03373056 100644
--- a/scss/elements/_zoteroSearch.scss
+++ b/scss/elements/_zoteroSearch.scss
@@ -6,6 +6,11 @@ zoterosearch {
 	groupbox {
 		margin-top: 0;
 		padding-top: 0;
+
+		& > #conditions {
+			-moz-appearance: groupbox;
+			padding: 6px;
+		}
 	}
 
 	caption {
@@ -22,6 +27,20 @@ zoterosearch {
 		margin-right: .5em;
 	}
 
+	input {
+		margin-block: 0;
+	}
+
+	.search-condition {
+		-moz-box-flex: 1;
+		display: flex;
+		align-items: center;
+
+		.valuefield, .valuemenu, .value-date-age {
+			flex: 1;
+		}
+	}
+	
 	#operatorsmenu {
 		width: 15em;
 	}
@@ -50,8 +69,14 @@ zoterosearch {
 		align-self: center;
 	}
 
-	#search-in-the-last input
-	{
-		min-width: 3em;
+	.search-in-the-last {
+		-moz-box-flex: 1;
+		display: flex;
+		align-items: center;
+		
+		.input {
+			min-width: 3em;
+			flex: 1;
+		}
 	}
 }