From 8face792c0d15fb8f0d4a1725c02c15184a4e6a2 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Mon, 4 Jul 2022 01:48:52 -0400
Subject: [PATCH] fx-compat: Fix search dialogs (#2631)

---
 ...dvancedSearch.xul => advancedSearch.xhtml} |   15 +-
 .../content/zotero/bindings/zoterosearch.xml  | 1111 -----------------
 .../content/zotero/elements/zoteroSearch.js   |  952 ++++++++++++++
 chrome/content/zotero/searchDialog.js         |    2 +
 .../{searchDialog.xul => searchDialog.xhtml}  |   24 +-
 chrome/content/zotero/zoteroPane.js           |    6 +-
 .../skin/default/zotero/bindings/search.css   |   69 -
 chrome/skin/default/zotero/zotero.css         |   22 -
 scss/_zoteroSearch.scss                       |    2 +
 scss/components/_zoteroSearch.scss            |   55 +
 scss/zoteroSearch-mac.scss                    |    1 +
 scss/zoteroSearch-unix.scss                   |    1 +
 scss/zoteroSearch-win.scss                    |    1 +
 test/tests/advancedSearchTest.js              |    4 +-
 test/tests/zoteroPaneTest.js                  |    8 +-
 15 files changed, 1056 insertions(+), 1217 deletions(-)
 rename chrome/content/zotero/{advancedSearch.xul => advancedSearch.xhtml} (80%)
 delete mode 100644 chrome/content/zotero/bindings/zoterosearch.xml
 create mode 100644 chrome/content/zotero/elements/zoteroSearch.js
 rename chrome/content/zotero/{searchDialog.xul => searchDialog.xhtml} (59%)
 delete mode 100644 chrome/skin/default/zotero/bindings/search.css
 create mode 100644 scss/_zoteroSearch.scss
 create mode 100644 scss/components/_zoteroSearch.scss
 create mode 100644 scss/zoteroSearch-mac.scss
 create mode 100644 scss/zoteroSearch-unix.scss
 create mode 100644 scss/zoteroSearch-win.scss

diff --git a/chrome/content/zotero/advancedSearch.xul b/chrome/content/zotero/advancedSearch.xhtml
similarity index 80%
rename from chrome/content/zotero/advancedSearch.xul
rename to chrome/content/zotero/advancedSearch.xhtml
index 72287e84c7..73f122ee85 100644
--- a/chrome/content/zotero/advancedSearch.xul
+++ b/chrome/content/zotero/advancedSearch.xhtml
@@ -21,10 +21,23 @@
 	onunload="ZoteroAdvancedSearch.onUnload();"
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml"
-	windowtype="zotero:search">
+	windowtype="zotero:search"
+	style="display: flex;">
+
+	<script>
+		var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/zoteroSearch.js", this);
+	</script>
 	
 	<script src="include.js"/>
 	<script src="advancedSearch.js"/>
+
+	<popupset>
+		<panel is="autocomplete-richlistbox-popup"
+			id="search-autocomplete-popup"
+			type="autocomplete-richlistbox"
+			noautofocus="true"/>
+	</popupset>
 	
 	<vbox id="zotero-search-box-container" flex="1">
 		<vbox id="zotero-search-box-controls">
diff --git a/chrome/content/zotero/bindings/zoterosearch.xml b/chrome/content/zotero/bindings/zoterosearch.xml
deleted file mode 100644
index 3e23e64287..0000000000
--- a/chrome/content/zotero/bindings/zoterosearch.xml
+++ /dev/null
@@ -1,1111 +0,0 @@
-<?xml version="1.0"?>
-<!--
-    ***** BEGIN LICENSE BLOCK *****
-    
-    Copyright © 2009 Center for History and New Media
-                     George Mason University, Fairfax, Virginia, USA
-                     http://zotero.org
-    
-    This file is part of Zotero.
-    
-    Zotero is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-    
-    Zotero is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-    
-    You should have received a copy of the GNU Affero General Public License
-    along with Zotero.  If not, see <http://www.gnu.org/licenses/>.
-    
-    ***** END LICENSE BLOCK *****
--->
-
-<!DOCTYPE window [
-	<!ENTITY % zoteroDTD SYSTEM "chrome://zotero/locale/zotero.dtd">
-	%zoteroDTD;
-	<!ENTITY % searchboxDTD SYSTEM "chrome://zotero/locale/searchbox.dtd">
-	%searchboxDTD;
-]>
-
-<bindings xmlns="http://www.mozilla.org/xbl"
-		  xmlns:xbl="http://www.mozilla.org/xbl"
-		  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-	
-	<binding id="search-box">
-		<resources>
-			<stylesheet src="chrome://zotero/skin/bindings/search.css"/>
-		</resources>
-		
-		<implementation>
-			<constructor>
-			<![CDATA[
-				Components.utils.import("resource://gre/modules/Services.jsm");
-			]]>
-			</constructor>
-			
-			<property name="groups"/>
-			
-			<field name="searchRef"/>
-			<property name="search" onget="return this.searchRef;">
-				<setter>
-					<![CDATA[
-						this.searchRef = val;
-						
-						var libraryMenu = this.id('libraryMenu');
-						var libraries = Zotero.Libraries.getAll();
-						Zotero.Utilities.Internal.buildLibraryMenu(
-							libraryMenu, libraries, this.searchRef.libraryID
-						);
-						if (this.searchRef.id) {
-							libraryMenu.disabled = true;
-						}
-						this.updateLibrary();
-						
-						
-						var conditionsBox = this.id('conditions');
-						while(conditionsBox.hasChildNodes())
-							conditionsBox.removeChild(conditionsBox.firstChild);
-						
-						var conditions = this.search.getConditions();
-						for (let id in conditions) {
-							let condition = conditions[id];
-							// Checkboxes
-							switch (condition.condition) {
-								case 'recursive':
-								case 'noChildren':
-								case 'includeParentsAndChildren':
-									let checkbox = condition.condition + 'Checkbox';
-									this.id(checkbox).setAttribute('condition', id);
-									this.id(checkbox).checked = condition.operator == 'true';
-									continue;
-							}
-							
-							if(condition.condition == 'joinMode') {
-								this.id('joinModeMenu').setAttribute('condition', id);
-								this.id('joinModeMenu').value = condition.operator;
-							}
-							else {
-								this.addCondition(condition);
-							}
-						}
-					]]>
-				</setter>
-			</property>
-			
-			<method name="addCondition">
-				<parameter name="ref"/>
-				<body>
-					<![CDATA[
-						var conditionsBox = this.id('conditions');
-						var condition = document.createElement('zoterosearchcondition');
-						condition.setAttribute('flex','1');
-						
-						conditionsBox.appendChild(condition);
-						
-						// Default to an empty 'title' condition
-						if (!ref) {
-							ref = this.search.getCondition(this.search.addCondition("title","contains",""))
-						}
-						
-						condition.initWithParentAndCondition(this, ref);
-						
-						if (conditionsBox.childNodes.length == 2){
-							conditionsBox.childNodes[0].enableRemoveButton();
-						}
-						else if (conditionsBox.childNodes.length == 1){
-							conditionsBox.childNodes[0].disableRemoveButton();
-						}
-					]]>
-				</body>
-			</method>
-			
-			<method name="removeCondition">
-				<parameter name="id"/>
-				<body>
-					<![CDATA[
-						var conditionsBox = this.id('conditions');
-						
-						this.search.removeCondition(id);
-						
-						for (var i = 0, len=conditionsBox.childNodes.length; i < len; i++){
-							if (conditionsBox.childNodes[i].conditionID == id){
-								conditionsBox.removeChild(conditionsBox.childNodes[i]);
-								break;
-							}
-						}
-						
-						if (conditionsBox.childNodes.length == 1){
-							conditionsBox.childNodes[0].disableRemoveButton();
-						}
-					]]>
-				</body>
-			</method>
-			
-			<method name="updateLibrary">
-				<body><![CDATA[
-					var menu = this.id('libraryMenu');
-					var libraryID = parseInt(menu.selectedItem.value);
-					
-				 	if (this.onLibraryChange) {
-				 		this.onLibraryChange(libraryID);
-					}
-					if (!this.searchRef.id) {
-						this.searchRef.libraryID = libraryID;
-					}
-					
-					[...this.id('conditions').childNodes].forEach(x => x.onLibraryChange());
-				]]></body>
-			</method>
-			
-			<method name="updateJoinMode">
-				<body>
-					<![CDATA[
-						var menu = this.id('joinModeMenu');
-						if(menu.hasAttribute('condition'))
-							this.search.updateCondition(menu.getAttribute('condition'),'joinMode',menu.value,null);
-						else
-							menu.setAttribute('condition', this.search.addCondition('joinMode',menu.value,null));
-					]]>
-				</body>
-			</method>
-			
-			<method name="updateCheckbox">
-				<parameter name="condition"/>
-				<body>
-					<![CDATA[
-						var checkbox = this.id(condition + 'Checkbox');
-						var value = checkbox.checked ? 'true' : 'false';
-						if(checkbox.hasAttribute('condition'))
-						{
-							this.search.updateCondition(checkbox.getAttribute('condition'),
-								condition, value, null);
-						}
-						else
-						{
-							checkbox.setAttribute('condition',
-								this.search.addCondition(condition, value, null));
-						}
-					]]>
-				</body>
-			</method>
-			
-			<!-- Calls updateSearch() on all search conditions -->
-			<method name="updateSearch">
-				<body>
-					<![CDATA[
-						var conditionsBox = this.id('conditions');
-						if (conditionsBox.hasChildNodes()) {
-							for(var i = 0, len=conditionsBox.childNodes.length; i < len; i++) {
-								conditionsBox.childNodes[i].updateSearch();
-							}
-						}
-					]]>
-				</body>
-			</method>
-			
-			<method name="handleKeyPress">
-				<parameter name="event"/>
-				<body>
-				<![CDATA[
-					switch (event.keyCode) {
-						case event.DOM_VK_RETURN:
-							this.active = true;
-							
-							if (event.shiftKey) {
-								this.addCondition();
-							}
-							else {
-								this.doCommand();
-							}
-							break;
-					}
-				]]>
-				</body>
-			</method>
-			
-			<method name="id">
-				<parameter name="id"/>
-				<body>
-					<![CDATA[
-						return document.getAnonymousNodes(this)[0].getElementsByAttribute('id',id)[0];
-					]]>
-				</body>
-			</method>
-		</implementation>
-		
-		<content>
-			<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-					id="search-box" flex="1" onkeypress="document.getBindingParent(this).handleKeyPress(event)">
-				<hbox align="center">
-					<label value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
-					<menulist id="libraryMenu" oncommand="document.getBindingParent(this).updateLibrary();">
-						<menupopup/>
-					</menulist>
-				</hbox>
-				<groupbox xbl:inherits="flex">
-					<caption align="center">
-						<label value="&zotero.search.joinMode.prefix;"/>
-						<menulist id="joinModeMenu" oncommand="document.getBindingParent(this).updateJoinMode();">
-							<menupopup>
-								<menuitem label="&zotero.search.joinMode.any;" value="any"/>
-								<menuitem label="&zotero.search.joinMode.all;" value="all" selected="true"/>
-							</menupopup>
-						</menulist>
-						<label value="&zotero.search.joinMode.suffix;"/>
-					</caption>
-					<vbox id="conditions"/>
-				</groupbox>
-				<hbox>
-					<checkbox id="recursiveCheckbox" label="&zotero.search.recursive.label;" oncommand="document.getBindingParent(this).updateCheckbox('recursive');"/>
-					<checkbox id="noChildrenCheckbox" label="&zotero.search.noChildren;" oncommand="document.getBindingParent(this).updateCheckbox('noChildren');"/>
-				</hbox>
-				<hbox>
-					<checkbox id="includeParentsAndChildrenCheckbox" label="&zotero.search.includeParentsAndChildren;" oncommand="document.getBindingParent(this).updateCheckbox('includeParentsAndChildren');"/>
-				</hbox>
-			</vbox>
-		</content>
-	</binding>
-	
-	
-	
-	<binding id="search-condition">
-		<resources>
-			<stylesheet src="chrome://zotero/skin/bindings/search.css"/>
-		</resources>
-		
-		<implementation>
-			<field name="conditionID"/>
-			<field name="selectedCondition"/>
-			<field name="mode"/>
-			<field name="selectedOperator"/>
-			<field name="value"/>
-			<field name="parent"/>
-			<field name="dontupdate"/>
-			<constructor>
-				<![CDATA[
-					var operators = [
-						'is',
-						'isNot',
-						'beginsWith',
-						'contains',
-						'doesNotContain',
-						'isLessThan',
-						'isGreaterThan',
-						'isBefore',
-						'isAfter',
-						'isInTheLast'
-					];
-					var operatorsList = this.id('operatorsmenu');
-					
-					// Build operator menu
-					for (let operator of operators) {
-						operatorsList.appendItem(
-							Zotero.getString('searchOperator.' + operator),
-							operator
-						);
-					}
-					
-					// Build conditions menu
-					var conditionsMenu = this.id('conditionsmenu');
-					var moreConditionsMenu = this.id('more-conditions-menu');
-					var conditions = Zotero.SearchConditions.getStandardConditions();
-					
-					var lastInsertPos = 0;
-					
-					for (let condition of conditions) {
-						if (this.isPrimaryCondition(condition.name)) {
-							var menuitem = conditionsMenu.insertItemAt(
-								lastInsertPos++, condition.localized, condition.name
-							);
-						}
-						else {
-							var menuitem = moreConditionsMenu.appendItem(
-								condition.localized, condition.name
-							);
-						}
-						
-						var baseFields = null;
-						try {
-							baseFields = Zotero.ItemFields.getTypeFieldsFromBase(condition.name);
-						}
-						catch (e) {}
-						
-						// Add tooltip, building it if it doesn't exist
-						if (baseFields) {
-							if (!this.id(condition.name + '-tooltip')) {
-								var fieldName = null;
-								try {
-									fieldName = Zotero.ItemFields.getLocalizedString(condition.name);
-								}
-								catch (e) {}
-								
-								if (fieldName) {
-									var localized = [fieldName];
-								}
-								else {
-									var localized = [];
-								}
-								
-								for (let baseField of baseFields) {
-									var str = Zotero.SearchConditions.getLocalizedName(
-										Zotero.ItemFields.getName(baseField)
-									);
-									
-									if (localized.indexOf(str) == -1) {
-										localized.push(str);
-									}
-								}
-								localized.sort();
-								
-								var tt = document.createElement('tooltip');
-								tt.setAttribute('id', condition.name + '-tooltip');
-								tt.setAttribute('orient', 'vertical');
-								tt.setAttribute('noautohide', true);
-								
-								var grid = document.createElement('grid');
-								
-								var columns = document.createElement('columns');
-								var col1 = document.createElement('column');
-								var col2 = document.createElement('column');
-								columns.appendChild(col1);
-								columns.appendChild(col2);
-								
-								var rows = document.createElement('rows');
-								
-								var fieldRow = document.createElement('row');
-								var label = document.createElement('label');
-								label.setAttribute('value', Zotero.getString('searchConditions.tooltip.fields'));
-								fieldRow.appendChild(label);
-								var vbox = document.createElement('vbox');
-								for (let str of localized) {
-									var label = document.createElement('label')
-									label.setAttribute('value', str);
-									vbox.appendChild(label);
-								}
-								fieldRow.appendChild(vbox);
-								
-								rows.appendChild(fieldRow);
-								
-								grid.appendChild(rows);
-								tt.appendChild(grid);
-								
-								this.id('condition-tooltips').appendChild(tt);
-							}
-							
-							menuitem.setAttribute('tooltip', condition.name + '-tooltip');
-						}
-					}
-					conditionsMenu.selectedIndex = 0;
-				]]>
-			</constructor>
-			
-			<method name="isPrimaryCondition">
-				<parameter name="condition"/>
-				<body><![CDATA[
-				switch (condition) {
-				case 'collection':
-				case 'creator':
-				case 'title':
-				case 'date':
-				case 'dateAdded':
-				case 'dateModified':
-				case 'itemType':
-				case 'fileTypeID':
-				case 'publicationTitle':
-				case 'tag':
-				case 'note':
-				case 'childNote':
-				case 'fulltextContent':
-					return true;
-				}
-				
-				return false;
-				]]></body>
-			</method>
-			
-			<method name="onConditionSelected">
-				<parameter name="conditionName"/>
-				<parameter name="reload"/>
-				<body><![CDATA[
-					var conditionsMenu = this.id('conditionsmenu');
-					var operatorsList = this.id('operatorsmenu');
-					
-					// Skip if no condition or correct condition already selected
-					if (!conditionName || (conditionName == this.selectedCondition && !reload)) {
-						return;
-					}
-					
-					this.selectedCondition = conditionName;
-					this.selectedOperator = operatorsList.value;
-					
-					var condition = Zotero.SearchConditions.get(conditionName);
-					var operators = condition.operators;
-					
-					conditionsMenu.value = conditionName;
-					// Store in attribute as well because the value doesn't get set properly when
-					// the value is from a menuitem in the More menu, and we need this to select
-					// the previous condition when creating a new row
-					conditionsMenu.setAttribute('data-value', conditionName);
-					
-					// Parent state isn't set automatically for submenu selections
-					if (!this.isPrimaryCondition(conditionName)) {
-						conditionsMenu.selectedIndex = -1;
-						conditionsMenu.setAttribute(
-							'label',
-							Zotero.SearchConditions.getLocalizedName(conditionName)
-						);
-					}
-					
-					this.updateSubmenuCheckboxes(conditionsMenu);
-					
-					// Display appropriate operators for condition
-					var selectThis;
-					for(var i = 0, len = operatorsList.firstChild.childNodes.length; i < len; i++)
-					{
-						var val = operatorsList.firstChild.childNodes[i].getAttribute('value');
-						var hidden = !operators[val];
-						operatorsList.firstChild.childNodes[i].setAttribute('hidden', hidden);
-						if (!hidden && (selectThis == null || this.selectedOperator == val))
-						{
-							selectThis = i;
-						}
-					}
-					operatorsList.selectedIndex = selectThis;
-					
-					// Generate drop-down menu instead of textbox for certain conditions
-					switch (conditionName) {
-						case 'collection':
-							var rows = [];
-							
-							var libraryID = this.parent.search.libraryID;
-							
-							// Add collections
-							let cols = Zotero.Collections.getByLibrary(libraryID, true);
-							for (let col of cols) {
-								// Indent subcollections
-								var indent = '';
-								if (col.level) {
-									for (let j = 1; j < col.level; j++) {
-										indent += '    ';
-									}
-									indent += '- ';
-								}
-								rows.push({
-									name: indent + col.name,
-									value: 'C' + col.key,
-									image: Zotero.Collection.prototype.treeViewImage
-								});
-							}
-							
-							// Add saved searches
-							let searches = Zotero.Searches.getByLibrary(libraryID);
-							for (let search of searches) {
-								if (search.id != this.parent.search.id) {
-									rows.push({
-										name: search.name,
-										value: 'S' + search.key,
-										image: Zotero.Search.prototype.treeViewImage
-									});
-								}
-							}
-							this.createValueMenu(rows);
-							break;
-						
-						case 'itemType':
-							var rows = Zotero.ItemTypes.getTypes().map(type => ({
-								name: Zotero.ItemTypes.getLocalizedString(type.id),
-								value: type.name
-							}));
-							
-							// Sort by localized name
-							var collation = Zotero.getLocaleCollation();
-							rows.sort((a, b) => collation.compareString(1, a.name, b.name));
-							
-							this.createValueMenu(rows);
-							break;
-						
-						case 'fileTypeID':
-							var rows = Zotero.FileTypes.getTypes().map(type => ({
-								name: Zotero.getString('fileTypes.' + type.name),
-								value: type.id
-							}));
-							
-							// Sort by localized name
-							var collation = Zotero.getLocaleCollation();
-							rows.sort((a, b) => collation.compareString(1, a.name, b.name));
-							
-							this.createValueMenu(rows);
-							break;
-						
-						default:
-							if (operatorsList.value=='isInTheLast')
-							{
-								this.id('value-date-age').value = this.value;
-							}
-							
-							// Textbox
-							else {
-								// If switching from menu to textbox, clear value
-								if (this.id('valuefield').hidden){
-									this.id('valuefield').value = '';
-								}
-								// If switching between textbox conditions, get loaded value for new one
-								else {
-									this.id('valuefield').value = this.value;
-								}
-								
-								// Update field drop-down if applicable
-								this.id('valuefield').update(conditionName, this.mode);
-							}
-					}
-					
-					this.onOperatorSelected();
-				]]></body>
-			</method>
-			<method name="onOperatorSelected">
-				<body>
-					<![CDATA[
-					var operatorsList = this.id('operatorsmenu');
-					
-					// Drop-down menu
-					if (this.selectedCondition == 'collection'
-							|| this.selectedCondition == 'itemType'
-							|| this.selectedCondition == 'fileTypeID') {
-						this.id('valuefield').hidden = true;
-						this.id('valuemenu').hidden = false;
-						this.id('value-date-age').hidden = true;
-					}
-					
-					// Textbox + units dropdown for isInTheLast operator
-					else if (operatorsList.value=='isInTheLast')
-					{
-						// If switching from text field, clear value
-						if (this.id('value-date-age').hidden){
-							this.value = '';
-						}
-						this.id('valuefield').hidden = true;
-						this.id('valuemenu').hidden = true;
-						this.id('value-date-age').hidden = false;
-					}
-					
-					// Textbox
-					else
-					{
-						// If switching from date age, clear value
-						if (this.id('valuefield').hidden){
-							this.value = '';
-						}
-						this.id('valuefield').hidden = false;
-						this.id('valuemenu').hidden = true;
-						this.id('value-date-age').hidden = true;
-					}
-					]]>
-				</body>
-			</method>
-			<method name="createValueMenu">
-				<parameter name="rows"/>
-				<body>
-					<![CDATA[
-						while (this.id('valuemenu').hasChildNodes()){
-							this.id('valuemenu').removeChild(this.id('valuemenu').firstChild);
-						}
-						
-						for (let row of rows) {
-							let menuitem = this.id('valuemenu').appendItem(row.name, row.value);
-							if (row.image) {
-								menuitem.className = 'menuitem-iconic';
-								menuitem.setAttribute('image', row.image);
-							}
-						}
-						this.id('valuemenu').selectedIndex = 0;
-						
-						if (this.value)
-						{
-							this.id('valuemenu').value = this.value;
-						}
-					]]>
-				</body>
-			</method>
-			<method name="initWithParentAndCondition">
-				<parameter name="parent"/>
-				<parameter name="condition"/>
-				<body><![CDATA[
-					this.parent = parent;
-					this.conditionID = condition['id'];
-					var menu = this.id('conditionsmenu');
-					
-					if(this.parent.search)
-					{
-						this.dontupdate = true;	//so that the search doesn't get updated while we are creating controls.
-						var prefix = '';
-						
-						// Handle special conditions
-						switch (condition.condition) {
-							case 'savedSearch':
-								prefix = 'S';
-								break;
-							
-							case 'collection':
-								prefix = 'C';
-								break;
-						}
-						
-						// Map certain conditions to other menu items
-						let uiCondition = condition.condition;
-						switch (condition.condition) {
-							case 'savedSearch':
-								uiCondition = 'collection';
-								break;
-						}
-						
-						menu.setAttribute('value', uiCondition);
-						
-						// Convert datetimes from UTC to localtime
-						if ((condition['condition']=='accessDate' ||
-								condition['condition']=='dateAdded' ||
-								condition['condition']=='dateModified') &&
-								Zotero.Date.isSQLDateTime(condition['value'])){
-							
-							condition['value'] =
-								Zotero.Date.dateToSQL(Zotero.Date.sqlToDate(condition['value'], true));
-						}
-						
-						this.mode = condition['mode'];
-						this.id('operatorsmenu').value = condition['operator'];
-						this.value = prefix +
-							(condition.value ? condition.value : '');
-
-						this.dontupdate = false;
-					}
-					
-					this.onConditionSelected(menu.value);
-					
-					this.id('conditionsmenu').focus();
-				]]></body>
-			</method>
-			<!-- Gets the value from the UI and updates the associated condition on the Zotero.Search object -->
-			<method name="updateSearch">
-				<body>
-					<![CDATA[
-						if(this.parent && this.parent.search && !this.dontupdate)
-						{
-							var condition = this.selectedCondition;
-							var operator = this.id('operatorsmenu').value;
-							
-							// Regular text field
-							if (!this.id('valuefield').hidden)
-							{
-								var value = this.id('valuefield').value;
-								
-								// Convert datetimes to UTC before saving
-								switch (condition) {
-									case 'accessDate':
-									case 'dateAdded':
-									case 'dateModified':
-										if (Zotero.Date.isSQLDateTime(value)) {
-											var value = Zotero.Date.dateToSQL(Zotero.Date.sqlToDate(value), true);
-										}
-								}
-								
-								// Append mode to condition
-								if (this.id('valuefield').mode){
-									condition += '/' + this.id('valuefield').mode;
-								}
-							}
-							
-							// isInTheLast operator
-							else if (!this.id('value-date-age').hidden)
-							{
-								var value = this.id('value-date-age').value;
-							}
-							
-							// Handle special C1234 and S5678 form for
-							// collections and searches
-							else if (condition == 'collection') {
-								var letter = this.id('valuemenu').value.substr(0,1);
-								if (letter=='C')
-								{
-									condition = 'collection';
-								}
-								else if (letter=='S')
-								{
-									condition = 'savedSearch';
-								}
-								var value = this.id('valuemenu').value.substr(1);
-							}
-							
-							// Regular drop-down menu
-							else
-							{
-								var value = this.id('valuemenu').value;
-							}
-							this.parent.search.updateCondition(this.conditionID, condition, operator, value);
-						}
-					]]>
-				</body>
-			</method>
-			
-			<method name="updateSubmenuCheckboxes">
-			<parameter name="menu"/>
-			<body><![CDATA[
-				for (let i = 0; i < menu.itemCount; i++) {
-					let item = menu.getItemAtIndex(i);
-					if (item.localName == 'menuitem') {
-						if (item.getAttribute('value') == this.selectedCondition) {
-							item.setAttribute('checked', true);
-						}
-						else {
-							item.removeAttribute('checked');
-						}
-					}
-					else {
-						this.updateSubmenuCheckboxes(item);
-					}
-				}
-			]]></body>
-			</method>
-			
-			<method name="revealSelectedCondition">
-			<parameter name="menu"/>
-			<body><![CDATA[
-				if (!this.selectedCondition || this.isPrimaryCondition(this.selectedCondition)) {
-					return;
-				}
-				
-				if (!menu) {
-					menu = this.id('conditionsmenu');
-				}
-				for (let i = 0; i < menu.itemCount; i++) {
-					let item = menu.getItemAtIndex(i);
-					if (item.localName == 'menuitem') {
-						if (item.getAttribute('value') == this.selectedCondition) {
-							menu.open = true;
-							return true;
-						}
-					}
-					else {
-						var opened = this.revealSelectedCondition(item);
-						if (opened) {
-							return true;
-						}
-					}
-				}
-				
-				return false;
-			]]></body></method>
-			
-			<method name="onLibraryChange">
-				<body><![CDATA[
-					switch (this.selectedCondition) {
-					case 'collection':
-						this.onConditionSelected(this.selectedCondition, true);
-						break;
-					}
-				]]></body>
-			</method>
-			
-			<method name="onRemoveClicked">
-				<body>
-					<![CDATA[
-						if (this.parent){
-							this.parent.removeCondition(this.conditionID);
-							window.sizeToContent()
-						}
-					]]>
-				</body>
-			</method>
-			<method name="onAddClicked">
-				<body>
-					<![CDATA[
-						if (this.parent){
-							let ref = this.parent.search.getCondition(
-								this.parent.search.addCondition(
-									this.id('conditionsmenu').getAttribute('data-value'),
-									this.id('operatorsmenu').value,
-									""
-								)
-							)
-							this.parent.addCondition(ref);
-							window.sizeToContent();
-						}
-					]]>
-				</body>
-			</method>
-			<method name="disableRemoveButton">
-				<body>
-					<![CDATA[
-						var button = this.id("remove");
-						button.setAttribute('disabled', true);
-						button.removeAttribute('onclick');
-					]]>
-				</body>
-			</method>
-			<method name="enableRemoveButton">
-				<body>
-					<![CDATA[
-						var button = this.id("remove");
-						button.setAttribute('disabled', false);
-						button.setAttribute('onclick', "document.getBindingParent(this).onRemoveClicked(event)");
-					]]>
-				</body>
-			</method>
-			<method name="id">
-				<parameter name="id"/>
-				<body>
-					<![CDATA[
-						var elems = document.getAnonymousNodes(this)[0].getElementsByAttribute('id',id);
-						return elems[0] ? elems[0] : false;
-					]]>
-				</body>
-			</method>
-		</implementation>
-		
-		<content>
-			<xul:hbox id="search-condition" xbl:inherits="flex">
-				<xul:popupset id="condition-tooltips"/>
-				
-				<xul:menulist id="conditionsmenu" oncommand="document.getBindingParent(this).onConditionSelected(event.target.value); event.stopPropagation()">
-					<xul:menupopup onpopupshown="document.getBindingParent(this).revealSelectedCondition()">
-						<xul:menu id="more-conditions-menu" label="&zotero.general.more;">
-							<xul:menupopup/>
-						</xul:menu>
-					</xul:menupopup>
-				</xul:menulist>
-				<xul:menulist id="operatorsmenu" oncommand="document.getBindingParent(this).onOperatorSelected(); event.stopPropagation()">
-					<xul:menupopup/>
-				</xul:menulist>
-				<xul:zoterosearchtextbox id="valuefield" flex="1"/>
-				<xul:menulist id="valuemenu" flex="1" hidden="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="document.getBindingParent(this).onRemoveClicked(event)"/>
-				<xul:label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="document.getBindingParent(this).onAddClicked(event)"/>
-			</xul:hbox>
-		</content>
-	</binding>
-	
-	
-	
-	<binding id="search-textbox">
-		<resources>
-			<stylesheet src="chrome://zotero/skin/bindings/search.css"/>
-		</resources>
-		
-		<implementation>
-			<property name="value"
-				onget="return document.getAnonymousNodes(this)[0].value"
-				onset="document.getAnonymousNodes(this)[0].setAttribute('value', val); return val"/>
-			<property name="mode">
-				<getter>
-					<![CDATA[
-						if (this.getAttribute('hasOptions')!='true'){
-							return false;
-						}
-						
-						var button = this.id('textbox-button');
-						var menu = this.id(button.popup);
-						
-						var selectedIndex = -1;
-						for (var i=0; i<menu.childNodes.length; i++){
-							if (menu.childNodes[i].getAttribute('checked')=='true'){
-								selectedIndex = i;
-								break;
-							}
-						}
-						switch (button.popup){
-							case 'textbox-fulltext-menu':
-								switch (selectedIndex){
-									case 0:
-										return false;
-									
-									case 1:
-										return 'phraseBinary';
-									
-									case 2:
-										return 'regexp';
-									
-									case 3:
-										return 'regexpCS';
-								}
-								break;
-						}
-						
-						throw('Invalid search textbox popup');
-					]]>
-				</getter>
-			</property>
-			<method name="update">
-				<parameter name="condition"/>
-				<parameter name="mode"/>
-				<body>
-					<![CDATA[
-						var button = this.id('textbox-button');
-						
-						switch (condition){
-							case 'fulltextContent':
-								button.popup = 'textbox-fulltext-menu';
-								button.setAttribute('popup', 'textbox-fulltext-menu');
-								var menu = this.id(button.popup);
-								this.setAttribute('hasOptions', true);
-								
-								var selectedIndex = 0;
-								if (mode){
-									switch (mode){
-										case 'phrase':
-											selectedIndex = 0;
-											break;
-										
-										case 'phraseBinary':
-											selectedIndex = 1;
-											break;
-										
-										case 'regexp':
-											selectedIndex = 2;
-											break;
-										
-										case 'regexpCS':
-											selectedIndex = 3;
-											break;
-									}
-								}
-								menu.childNodes[selectedIndex].setAttribute('checked', true);
-								break;
-								
-							default:
-								this.setAttribute('hasOptions', false);
-								
-								// Set textbox to autocomplete mode
-								switch (condition)
-								{
-									// Skip autocomplete for these fields
-									case 'date':
-									case 'note':
-									case 'extra':
-										break;
-									
-									default:
-										var textbox = document.getAnonymousNodes(this)[0];
-										textbox.setAttribute('type', 'autocomplete');
-										textbox.setAttribute('autocompletesearch', 'zotero');
-										textbox.setAttribute('timeout', '250');
-										
-										// TODO: Provide current libraryID
-										var autocompleteParams = {
-											fieldName: condition
-										};
-										switch (condition) {
-											case 'creator':
-											case 'author':
-											case 'bookAuthor':
-											case 'editor':
-												autocompleteParams.fieldMode = 2;
-												break;
-										}
-										textbox.setAttribute(
-											'autocompletesearchparam',
-											JSON.stringify(autocompleteParams)
-										);
-								}
-						}
-						
-						if (!autocompleteParams) {
-							var textbox = document.getAnonymousNodes(this)[0];
-							textbox.removeAttribute('type');
-						}
-					]]>
-				</body>
-			</method>
-			<method name="id">
-				<parameter name="id"/>
-				<body>
-					<![CDATA[
-						return document.getAnonymousNodes(this)[0].getElementsByAttribute('id',id)[0];
-					]]>
-				</body>
-			</method>
-		</implementation>
-		
-		<content>
-			<xul:textbox id="search-textbox" xbl:inherits="hasOptions,flex">
-				<xul:popupset>
-					<xul:menupopup id="textbox-fulltext-menu">
-						<xul:menuitem type="radio" label="&zotero.search.textModes.phrase;"/>
-						<xul:menuitem type="radio" label="&zotero.search.textModes.phraseBinary;"/>
-						<xul:menuitem type="radio" label="&zotero.search.textModes.regexp;"/>
-						<xul:menuitem type="radio" label="&zotero.search.textModes.regexpCS;"/>
-					</xul:menupopup>
-				</xul:popupset>
-				
-				<xul:toolbarbutton id="textbox-button" type="menu"/>
-			</xul:textbox>
-		</content>
-	</binding>
-	
-	
-	
-	<binding id="search-in-the-last">
-		<resources>
-			<stylesheet src="chrome://zotero/skin/bindings/search.css"/>
-		</resources>
-		
-		<implementation>
-			<property name="value">
-				<getter>
-					<![CDATA[
-						var menulist = document.getAnonymousNodes(this)[0].firstChild.nextSibling;
-						
-						return document.getAnonymousNodes(this)[0].firstChild.value + ' ' +
-							menulist.firstChild.childNodes[menulist.selectedIndex].getAttribute('value')
-					]]>
-				</getter>
-				<setter>
-					<![CDATA[
-						var [num, units] = val.split(' ');
-						document.getAnonymousNodes(this)[0].firstChild.setAttribute('value', num);
-						
-						var menulist = document.getAnonymousNodes(this)[0].firstChild.nextSibling;
-						var menupopup = menulist.firstChild;
-						
-						var selectThis = 0;
-						for (var i=0; i<menupopup.childNodes.length; i++){
-							if (menupopup.childNodes[i].value == units)
-							{
-								selectThis = i;
-								break;
-							}
-						}
-						menulist.selectedIndex = selectThis;
-						
-						return val;
-					]]>
-				</setter>
-			</property>
-			<method name="id">
-				<parameter name="id"/>
-				<body>
-					<![CDATA[
-						return document.getAnonymousNodes(this)[0].getElementsByAttribute('id',id)[0];
-					]]>
-				</body>
-			</method>
-		</implementation>
-		
-		<content>
-			<xul:hbox id="search-in-the-last" flex="1">
-				<xul:textbox flex="1"/>
-				<xul:menulist>
-					<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>
-		</content>
-	</binding>
-</bindings>
\ No newline at end of file
diff --git a/chrome/content/zotero/elements/zoteroSearch.js b/chrome/content/zotero/elements/zoteroSearch.js
new file mode 100644
index 0000000000..72d839f030
--- /dev/null
+++ b/chrome/content/zotero/elements/zoteroSearch.js
@@ -0,0 +1,952 @@
+/*
+	***** BEGIN LICENSE BLOCK *****
+	
+	Copyright © 2022 Corporation for Digital Scholarship
+					 Vienna, Virginia, USA
+					 https://www.zotero.org
+	
+	This file is part of Zotero.
+	
+	Zotero is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+	
+	Zotero is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+	
+	You should have received a copy of the GNU Affero General Public License
+	along with Zotero.  If not, see <http://www.gnu.org/licenses/>.
+	
+	***** END LICENSE BLOCK *****
+*/
+
+"use strict";
+
+{
+	var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+
+	Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
+	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
+	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
+
+	class SearchElementBase extends XULElementBase {
+		get stylesheets() {
+			return [
+				'chrome://global/skin/global.css',
+				'chrome://zotero-platform/content/zoteroSearch.css'
+			];
+		}
+	}
+
+	class ZoteroSearch extends SearchElementBase {
+		content = MozXULElement.parseXULToFragment(`
+			<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+					id="search-box" flex="1" onkeypress="this.getRootNode().host.handleKeyPress(event)">
+				<hbox align="center">
+					<label value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
+					<menulist id="libraryMenu" oncommand="this.getRootNode().host.updateLibrary();" native="true">
+						<menupopup/>
+					</menulist>
+				</hbox>
+				<groupbox>
+					<caption align="center">
+						<label value="&zotero.search.joinMode.prefix;"/>
+						<menulist id="joinModeMenu" oncommand="this.getRootNode().host.updateJoinMode();" native="true">
+							<menupopup>
+								<menuitem label="&zotero.search.joinMode.any;" value="any"/>
+								<menuitem label="&zotero.search.joinMode.all;" value="all" selected="true"/>
+							</menupopup>
+						</menulist>
+						<label value="&zotero.search.joinMode.suffix;"/>
+					</caption>
+					<vbox id="conditions"/>
+				</groupbox>
+				<hbox>
+					<checkbox id="recursiveCheckbox" label="&zotero.search.recursive.label;" oncommand="this.getRootNode().host.updateCheckbox('recursive');" native="true"/>
+					<checkbox id="noChildrenCheckbox" label="&zotero.search.noChildren;" oncommand="this.getRootNode().host.updateCheckbox('noChildren');" native="true"/>
+				</hbox>
+				<hbox>
+					<checkbox id="includeParentsAndChildrenCheckbox" label="&zotero.search.includeParentsAndChildren;" oncommand="this.getRootNode().host.updateCheckbox('includeParentsAndChildren');" native="true"/>
+				</hbox>
+			</vbox>
+		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
+
+		get search() {
+			return this.searchRef;
+		}
+
+		set search(val) {
+			this.searchRef = val;
+
+			var libraryMenu = this.shadowRoot.getElementById('libraryMenu');
+			var libraries = Zotero.Libraries.getAll();
+			Zotero.Utilities.Internal.buildLibraryMenu(
+				libraryMenu, libraries, this.searchRef.libraryID
+			);
+			if (this.searchRef.id) {
+				libraryMenu.disabled = true;
+			}
+			this.updateLibrary();
+
+
+			var conditionsBox = this.shadowRoot.getElementById('conditions');
+			while (conditionsBox.hasChildNodes())
+				conditionsBox.removeChild(conditionsBox.firstChild);
+
+			var conditions = this.search.getConditions();
+			for (let id in conditions) {
+				let condition = conditions[id];
+				// Checkboxes
+				switch (condition.condition) {
+					case 'recursive':
+					case 'noChildren':
+					case 'includeParentsAndChildren':
+						let checkbox = condition.condition + 'Checkbox';
+						this.shadowRoot.getElementById(checkbox).setAttribute('condition', id);
+						this.shadowRoot.getElementById(checkbox).checked = condition.operator == 'true';
+						continue;
+				}
+
+				if (condition.condition == 'joinMode') {
+					this.shadowRoot.getElementById('joinModeMenu').setAttribute('condition', id);
+					this.shadowRoot.getElementById('joinModeMenu').value = condition.operator;
+				}
+				else {
+					this.addCondition(condition);
+				}
+			}
+		}
+
+		addCondition(ref) {
+			var conditionsBox = this.shadowRoot.getElementById('conditions');
+			var condition = document.createXULElement('zoterosearchcondition');
+			condition.setAttribute('flex', '1');
+			
+			conditionsBox.appendChild(condition);
+			
+			// Default to an empty 'title' condition
+			if (!ref) {
+				ref = this.search.getCondition(this.search.addCondition("title","contains",""))
+			}
+			
+			condition.initWithParentAndCondition(this, ref);
+			
+			if (conditionsBox.childNodes.length == 2){
+				conditionsBox.childNodes[0].enableRemoveButton();
+			}
+			else if (conditionsBox.childNodes.length == 1){
+				conditionsBox.childNodes[0].disableRemoveButton();
+			}
+		}
+
+		removeCondition(id) {
+			var conditionsBox = this.shadowRoot.getElementById('conditions');
+			
+			this.search.removeCondition(id);
+			
+			for (var i = 0, len=conditionsBox.childNodes.length; i < len; i++){
+				if (conditionsBox.childNodes[i].conditionID == id){
+					conditionsBox.removeChild(conditionsBox.childNodes[i]);
+					break;
+				}
+			}
+			
+			if (conditionsBox.childNodes.length == 1){
+				conditionsBox.childNodes[0].disableRemoveButton();
+			}
+		}
+
+		updateLibrary() {
+			var menu = this.shadowRoot.getElementById('libraryMenu');
+			var libraryID = parseInt(menu.selectedItem.value);
+			
+			if (this.onLibraryChange) {
+				this.onLibraryChange(libraryID);
+			}
+			if (!this.searchRef.id) {
+				this.searchRef.libraryID = libraryID;
+			}
+			
+			[...this.shadowRoot.getElementById('conditions').childNodes].forEach(x => x.onLibraryChange());
+		}
+
+		updateJoinMode() {
+			var menu = this.shadowRoot.getElementById('joinModeMenu');
+			if(menu.hasAttribute('condition'))
+				this.search.updateCondition(menu.getAttribute('condition'),'joinMode',menu.value,null);
+			else
+				menu.setAttribute('condition', this.search.addCondition('joinMode',menu.value,null));
+		}
+
+		updateCheckbox(condition) {
+			var checkbox = this.shadowRoot.getElementById(condition + 'Checkbox');
+			var value = checkbox.checked ? 'true' : 'false';
+			if(checkbox.hasAttribute('condition'))
+			{
+				this.search.updateCondition(checkbox.getAttribute('condition'),
+					condition, value, null);
+			}
+			else
+			{
+				checkbox.setAttribute('condition',
+					this.search.addCondition(condition, value, null));
+			}
+		}
+
+		// Calls updateSearch() on all search conditions
+		updateSearch() {
+			var conditionsBox = this.shadowRoot.getElementById('conditions');
+			if (conditionsBox.hasChildNodes()) {
+				for(var i = 0, len=conditionsBox.childNodes.length; i < len; i++) {
+					conditionsBox.childNodes[i].updateSearch();
+				}
+			}
+		}
+
+		handleKeyPress(event) {
+			switch (event.keyCode) {
+				case event.DOM_VK_RETURN:
+					this.active = true;
+					
+					if (event.shiftKey) {
+						this.addCondition();
+					}
+					else {
+						this.doCommand();
+					}
+					break;
+			}
+		}
+	}
+	customElements.define("zoterosearch", ZoteroSearch);
+
+	class ZoteroSearchCondition extends SearchElementBase {
+		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"/>
+				
+				<xul:menulist id="conditionsmenu" oncommand="this.getRootNode().host.onConditionSelected(event.target.value); event.stopPropagation()" native="true">
+					<xul:menupopup onpopupshown="this.getRootNode().host.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.getRootNode().host.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.getRootNode().host.onRemoveClicked(event)"/>
+				<xul:label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.getRootNode().host.onAddClicked(event)"/>
+			</xul:hbox>
+		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
+
+		init() {
+			var operators = [
+				'is',
+				'isNot',
+				'beginsWith',
+				'contains',
+				'doesNotContain',
+				'isLessThan',
+				'isGreaterThan',
+				'isBefore',
+				'isAfter',
+				'isInTheLast'
+			];
+			var operatorsList = this.shadowRoot.getElementById('operatorsmenu');
+			
+			// Build operator menu
+			for (let operator of operators) {
+				operatorsList.appendItem(
+					Zotero.getString('searchOperator.' + operator),
+					operator
+				);
+			}
+			
+			// Build conditions menu
+			var conditionsMenu = this.shadowRoot.getElementById('conditionsmenu');
+			var moreConditionsMenu = this.shadowRoot.getElementById('more-conditions-menu');
+			var conditions = Zotero.SearchConditions.getStandardConditions();
+			
+			for (let condition of conditions) {
+				if (this.isPrimaryCondition(condition.name)) {
+					var menuitem = document.createXULElement('menuitem');
+					menuitem.setAttribute('label', condition.localized);
+					menuitem.setAttribute('value', condition.name);
+					moreConditionsMenu.before(menuitem);
+				}
+				else {
+					var menuitem = moreConditionsMenu.appendItem(
+						condition.localized, condition.name
+					);
+				}
+				
+				var baseFields = null;
+				try {
+					baseFields = Zotero.ItemFields.getTypeFieldsFromBase(condition.name);
+				}
+				catch (e) {}
+				
+				// Add tooltip, building it if it doesn't exist
+				if (baseFields) {
+					if (!this.shadowRoot.getElementById(condition.name + '-tooltip')) {
+						var fieldName = null;
+						try {
+							fieldName = Zotero.ItemFields.getLocalizedString(condition.name);
+						}
+						catch (e) {}
+						
+						if (fieldName) {
+							var localized = [fieldName];
+						}
+						else {
+							var localized = [];
+						}
+						
+						for (let baseField of baseFields) {
+							var str = Zotero.SearchConditions.getLocalizedName(
+								Zotero.ItemFields.getName(baseField)
+							);
+							
+							if (localized.indexOf(str) == -1) {
+								localized.push(str);
+							}
+						}
+						localized.sort();
+						
+						var tt = document.createXULElement('tooltip');
+						tt.setAttribute('id', condition.name + '-tooltip');
+						tt.setAttribute('noautohide', true);
+						
+						var hbox = document.createXULElement('hbox');
+						
+						var label = document.createXULElement('label');
+						label.setAttribute('value', Zotero.getString('searchConditions.tooltip.fields'));
+						hbox.appendChild(label);
+						var vbox = document.createXULElement('vbox');
+						for (let str of localized) {
+							let label = document.createXULElement('label');
+							label.setAttribute('value', str);
+							vbox.appendChild(label);
+						}
+						hbox.appendChild(vbox);
+						tt.appendChild(hbox);
+						
+						this.shadowRoot.getElementById('condition-tooltips').appendChild(tt);
+					}
+					
+					menuitem.setAttribute('tooltip', condition.name + '-tooltip');
+				}
+			}
+			conditionsMenu.selectedIndex = 0;
+		}
+
+		isPrimaryCondition(condition) {
+			switch (condition) {
+				case 'collection':
+				case 'creator':
+				case 'title':
+				case 'date':
+				case 'dateAdded':
+				case 'dateModified':
+				case 'itemType':
+				case 'fileTypeID':
+				case 'publicationTitle':
+				case 'tag':
+				case 'note':
+				case 'childNote':
+				case 'fulltextContent':
+					return true;
+			}
+			
+			return false;
+		}
+
+		onConditionSelected(conditionName, reload) {
+			var conditionsMenu = this.shadowRoot.getElementById('conditionsmenu');
+			var operatorsList = this.shadowRoot.getElementById('operatorsmenu');
+			
+			// Skip if no condition or correct condition already selected
+			if (!conditionName || (conditionName == this.selectedCondition && !reload)) {
+				return;
+			}
+			
+			this.selectedCondition = conditionName;
+			this.selectedOperator = operatorsList.value;
+			
+			var condition = Zotero.SearchConditions.get(conditionName);
+			var operators = condition.operators;
+			
+			conditionsMenu.value = conditionName;
+			// Store in attribute as well because the value doesn't get set properly when
+			// the value is from a menuitem in the More menu, and we need this to select
+			// the previous condition when creating a new row
+			conditionsMenu.setAttribute('data-value', conditionName);
+			
+			// Parent state isn't set automatically for submenu selections
+			if (!this.isPrimaryCondition(conditionName)) {
+				conditionsMenu.selectedIndex = -1;
+				conditionsMenu.setAttribute(
+					'label',
+					Zotero.SearchConditions.getLocalizedName(conditionName)
+				);
+			}
+			
+			this.updateSubmenuCheckboxes(conditionsMenu);
+			
+			// Display appropriate operators for condition
+			var selectThis;
+			for(var i = 0, len = operatorsList.firstChild.childNodes.length; i < len; i++)
+			{
+				var val = operatorsList.firstChild.childNodes[i].getAttribute('value');
+				var hidden = !operators[val];
+				operatorsList.firstChild.childNodes[i].setAttribute('hidden', hidden);
+				if (!hidden && (selectThis == null || this.selectedOperator == val))
+				{
+					selectThis = i;
+				}
+			}
+			operatorsList.selectedIndex = selectThis;
+			
+			// Generate drop-down menu instead of textbox for certain conditions
+			switch (conditionName) {
+				case 'collection':
+					var rows = [];
+					
+					var libraryID = this.parent.search.libraryID;
+					
+					// Add collections
+					let cols = Zotero.Collections.getByLibrary(libraryID, true);
+					for (let col of cols) {
+						// Indent subcollections
+						var indent = '';
+						if (col.level) {
+							for (let j = 1; j < col.level; j++) {
+								indent += '    ';
+							}
+							indent += '- ';
+						}
+						rows.push({
+							name: indent + col.name,
+							value: 'C' + col.key,
+							image: Zotero.Collection.prototype.treeViewImage
+						});
+					}
+					
+					// Add saved searches
+					let searches = Zotero.Searches.getByLibrary(libraryID);
+					for (let search of searches) {
+						if (search.id != this.parent.search.id) {
+							rows.push({
+								name: search.name,
+								value: 'S' + search.key,
+								image: Zotero.Search.prototype.treeViewImage
+							});
+						}
+					}
+					this.createValueMenu(rows);
+					break;
+				
+				case 'itemType':
+					var rows = Zotero.ItemTypes.getTypes().map(type => ({
+						name: Zotero.ItemTypes.getLocalizedString(type.id),
+						value: type.name
+					}));
+					
+					// Sort by localized name
+					var collation = Zotero.getLocaleCollation();
+					rows.sort((a, b) => collation.compareString(1, a.name, b.name));
+					
+					this.createValueMenu(rows);
+					break;
+				
+				case 'fileTypeID':
+					var rows = Zotero.FileTypes.getTypes().map(type => ({
+						name: Zotero.getString('fileTypes.' + type.name),
+						value: type.id
+					}));
+					
+					// Sort by localized name
+					var collation = Zotero.getLocaleCollation();
+					rows.sort((a, b) => collation.compareString(1, a.name, b.name));
+					
+					this.createValueMenu(rows);
+					break;
+				
+				default:
+					if (operatorsList.value=='isInTheLast')
+					{
+						this.shadowRoot.getElementById('value-date-age').value = this.value;
+					}
+					
+					// Textbox
+					else {
+						// If switching from menu to textbox, clear value
+						if (this.shadowRoot.getElementById('valuefield').hidden){
+							this.shadowRoot.getElementById('valuefield').value = '';
+						}
+						// If switching between textbox conditions, get loaded value for new one
+						else {
+							this.shadowRoot.getElementById('valuefield').value = this.value;
+						}
+						
+						// Update field drop-down if applicable
+						this.shadowRoot.getElementById('valuefield').update(conditionName, this.mode);
+					}
+			}
+			
+			this.onOperatorSelected();
+		}
+
+		onOperatorSelected() {
+			var operatorsList = this.shadowRoot.getElementById('operatorsmenu');
+			
+			// Drop-down menu
+			if (this.selectedCondition == 'collection'
+					|| this.selectedCondition == 'itemType'
+					|| this.selectedCondition == 'fileTypeID') {
+				this.shadowRoot.getElementById('valuefield').hidden = true;
+				this.shadowRoot.getElementById('valuemenu').hidden = false;
+				this.shadowRoot.getElementById('value-date-age').hidden = true;
+			}
+			
+			// Textbox + units dropdown for isInTheLast operator
+			else if (operatorsList.value=='isInTheLast')
+			{
+				// If switching from text field, clear value
+				if (this.shadowRoot.getElementById('value-date-age').hidden){
+					this.value = '';
+				}
+				this.shadowRoot.getElementById('valuefield').hidden = true;
+				this.shadowRoot.getElementById('valuemenu').hidden = true;
+				this.shadowRoot.getElementById('value-date-age').hidden = false;
+			}
+			
+			// Textbox
+			else
+			{
+				// If switching from date age, clear value
+				if (this.shadowRoot.getElementById('valuefield').hidden){
+					this.value = '';
+				}
+				this.shadowRoot.getElementById('valuefield').hidden = false;
+				this.shadowRoot.getElementById('valuemenu').hidden = true;
+				this.shadowRoot.getElementById('value-date-age').hidden = true;
+			}
+		}
+
+		createValueMenu(rows) {
+			let valueMenu = this.shadowRoot.getElementById('valuemenu');
+
+			while (valueMenu.hasChildNodes()){
+				valueMenu.removeChild(valueMenu.firstChild);
+			}
+			
+			for (let row of rows) {
+				let menuitem = valueMenu.appendItem(row.name, row.value);
+				if (row.image) {
+					menuitem.className = 'menuitem-iconic';
+					menuitem.setAttribute('image', row.image);
+				}
+			}
+			valueMenu.selectedIndex = 0;
+			
+			if (this.value)
+			{
+				valueMenu.value = this.value;
+			}
+
+			valueMenu.shadowRoot.querySelector('#label-box > image').style.maxHeight = '16px';
+		}
+
+		initWithParentAndCondition(parent, condition) {
+			this.parent = parent;
+			this.conditionID = condition['id'];
+			var menu = this.shadowRoot.getElementById('conditionsmenu');
+			
+			if(this.parent.search)
+			{
+				this.dontupdate = true;	//so that the search doesn't get updated while we are creating controls.
+				var prefix = '';
+				
+				// Handle special conditions
+				switch (condition.condition) {
+					case 'savedSearch':
+						prefix = 'S';
+						break;
+					
+					case 'collection':
+						prefix = 'C';
+						break;
+				}
+				
+				// Map certain conditions to other menu items
+				let uiCondition = condition.condition;
+				switch (condition.condition) {
+					case 'savedSearch':
+						uiCondition = 'collection';
+						break;
+				}
+				
+				menu.setAttribute('value', uiCondition);
+				
+				// Convert datetimes from UTC to localtime
+				if ((condition['condition']=='accessDate' ||
+						condition['condition']=='dateAdded' ||
+						condition['condition']=='dateModified') &&
+						Zotero.Date.isSQLDateTime(condition['value'])){
+					
+					condition['value'] =
+						Zotero.Date.dateToSQL(Zotero.Date.sqlToDate(condition['value'], true));
+				}
+				
+				this.mode = condition['mode'];
+				this.shadowRoot.getElementById('operatorsmenu').value = condition['operator'];
+				this.value = prefix +
+					(condition.value ? condition.value : '');
+
+				this.dontupdate = false;
+			}
+			
+			this.onConditionSelected(menu.value);
+			
+			this.shadowRoot.getElementById('conditionsmenu').focus();
+		}
+
+		updateSearch() {
+			if(this.parent && this.parent.search && !this.dontupdate)
+			{
+				var condition = this.selectedCondition;
+				var operator = this.shadowRoot.getElementById('operatorsmenu').value;
+				
+				// Regular text field
+				if (!this.shadowRoot.getElementById('valuefield').hidden)
+				{
+					var value = this.shadowRoot.getElementById('valuefield').value;
+					
+					// Convert datetimes to UTC before saving
+					switch (condition) {
+						case 'accessDate':
+						case 'dateAdded':
+						case 'dateModified':
+							if (Zotero.Date.isSQLDateTime(value)) {
+								var value = Zotero.Date.dateToSQL(Zotero.Date.sqlToDate(value), true);
+							}
+					}
+					
+					// Append mode to condition
+					if (this.shadowRoot.getElementById('valuefield').mode){
+						condition += '/' + this.shadowRoot.getElementById('valuefield').mode;
+					}
+				}
+				
+				// isInTheLast operator
+				else if (!this.shadowRoot.getElementById('value-date-age').hidden)
+				{
+					var value = this.shadowRoot.getElementById('value-date-age').value;
+				}
+				
+				// Handle special C1234 and S5678 form for
+				// collections and searches
+				else if (condition == 'collection') {
+					var letter = this.shadowRoot.getElementById('valuemenu').value.substr(0,1);
+					if (letter=='C')
+					{
+						condition = 'collection';
+					}
+					else if (letter=='S')
+					{
+						condition = 'savedSearch';
+					}
+					var value = this.shadowRoot.getElementById('valuemenu').value.substr(1);
+				}
+				
+				// Regular drop-down menu
+				else
+				{
+					var value = this.shadowRoot.getElementById('valuemenu').value;
+				}
+				this.parent.search.updateCondition(this.conditionID, condition, operator, value);
+			}
+		}
+
+		updateSubmenuCheckboxes(menu) {
+			for (let i = 0; i < menu.itemCount; i++) {
+				let item = menu.getItemAtIndex(i);
+				if (item.localName == 'menuitem') {
+					if (item.getAttribute('value') == this.selectedCondition) {
+						item.setAttribute('checked', true);
+					}
+					else {
+						item.removeAttribute('checked');
+					}
+				}
+				else {
+					this.updateSubmenuCheckboxes(item);
+				}
+			}
+		}
+
+		revealSelectedCondition(menu) {
+			if (!this.selectedCondition || this.isPrimaryCondition(this.selectedCondition)) {
+				return;
+			}
+			
+			if (!menu) {
+				menu = this.shadowRoot.getElementById('conditionsmenu');
+			}
+			for (let i = 0; i < menu.itemCount; i++) {
+				let item = menu.getItemAtIndex(i);
+				if (item.localName == 'menuitem') {
+					if (item.getAttribute('value') == this.selectedCondition) {
+						menu.open = true;
+						return true;
+					}
+				}
+				else {
+					var opened = this.revealSelectedCondition(item);
+					if (opened) {
+						return true;
+					}
+				}
+			}
+			
+			return false;
+		}
+
+		onLibraryChange() {
+			switch (this.selectedCondition) {
+			case 'collection':
+				this.onConditionSelected(this.selectedCondition, true);
+				break;
+			}
+		}
+
+		onRemoveClicked() {
+			if (this.parent){
+				this.parent.removeCondition(this.conditionID);
+				window.sizeToContent()
+			}
+		}
+
+		onAddClicked() {
+			if (this.parent){
+				let ref = this.parent.search.getCondition(
+					this.parent.search.addCondition(
+						this.shadowRoot.getElementById('conditionsmenu').getAttribute('data-value'),
+						this.shadowRoot.getElementById('operatorsmenu').value,
+						""
+					)
+				)
+				this.parent.addCondition(ref);
+				window.sizeToContent();
+			}
+		}
+
+		disableRemoveButton() {
+			var button = this.shadowRoot.getElementById("remove");
+			button.setAttribute('disabled', true);
+			button.removeAttribute('onclick');
+		}
+
+		enableRemoveButton() {
+			var button = this.shadowRoot.getElementById("remove");
+			button.setAttribute('disabled', false);
+			button.setAttribute('onclick', "this.getRootNode().host.onRemoveClicked(event)");
+		}
+	}
+	customElements.define("zoterosearchcondition", ZoteroSearchCondition);
+
+	class ZoteroSearchTextbox extends SearchElementBase {
+		content = MozXULElement.parseXULToFragment(`
+			<xul:stack
+					xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+					xmlns:html="http://www.w3.org/1999/xhtml"
+					flex="1">
+				<html:input id="search-textbox"
+					is="shadow-autocomplete-input"
+					autocompletesearch="zotero"
+					autocompletepopup="search-autocomplete-popup"
+					timeout="250"
+					type="search"/>
+				
+				<xul:toolbarbutton
+						id="textbox-button"
+						type="menu">
+					<dropmarker type="menu" class="toolbarbutton-menu-dropmarker"/>
+					<xul:menupopup id="textbox-fulltext-menu">
+						<xul:menuitem type="radio" label="&zotero.search.textModes.phrase;"/>
+						<xul:menuitem type="radio" label="&zotero.search.textModes.phraseBinary;"/>
+						<xul:menuitem type="radio" label="&zotero.search.textModes.regexp;"/>
+						<xul:menuitem type="radio" label="&zotero.search.textModes.regexpCS;"/>
+					</xul:menupopup>
+				</xul:toolbarbutton>
+			</xul:stack>
+		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
+
+		get value() {
+			return this.shadowRoot.getElementById('search-textbox').value;
+		}
+
+		set value(val) {
+			this.shadowRoot.getElementById('search-textbox').value = val;
+		}
+
+		get mode() {
+			if (this.getAttribute('hasOptions')!='true'){
+				return false;
+			}
+			
+			var menu = this.shadowRoot.getElementById('textbox-fulltext-menu');
+			
+			var selectedIndex = -1;
+			for (var i=0; i<menu.childNodes.length; i++){
+				if (menu.childNodes[i].getAttribute('checked')=='true'){
+					selectedIndex = i;
+					break;
+				}
+			}
+			switch (selectedIndex){
+				case 0:
+					return false;
+				
+				case 1:
+					return 'phraseBinary';
+				
+				case 2:
+					return 'regexp';
+				
+				case 3:
+					return 'regexpCS';
+			}
+			
+			throw new Error('Invalid search textbox popup');
+		}
+
+		update(condition, mode) {
+			var textbox = this.shadowRoot.getElementById('search-textbox');
+			var button = this.shadowRoot.getElementById('textbox-button');
+			
+			switch (condition){
+				case 'fulltextContent':
+					var menu = this.shadowRoot.getElementById('textbox-fulltext-menu');
+					this.setAttribute('hasOptions', true);
+					button.setAttribute('hidden', false);
+					
+					var selectedIndex = 0;
+					if (mode){
+						switch (mode){
+							case 'phrase':
+								selectedIndex = 0;
+								break;
+							
+							case 'phraseBinary':
+								selectedIndex = 1;
+								break;
+							
+							case 'regexp':
+								selectedIndex = 2;
+								break;
+							
+							case 'regexpCS':
+								selectedIndex = 3;
+								break;
+						}
+					}
+					menu.childNodes[selectedIndex].setAttribute('checked', true);
+					textbox.setAttribute('disableautocomplete', 'true');
+					break;
+					
+				default:
+					this.setAttribute('hasOptions', false);
+					button.setAttribute('hidden', true);
+					
+					// Set textbox to autocomplete mode
+					switch (condition)
+					{
+						// Skip autocomplete for these fields
+						case 'date':
+						case 'note':
+						case 'extra':
+							textbox.setAttribute('disableautocomplete', 'true');
+							break;
+						
+						default:
+							textbox.setAttribute('disableautocomplete', 'false');
+							
+							// TODO: Provide current libraryID
+							var autocompleteParams = {
+								fieldName: condition
+							};
+							switch (condition) {
+								case 'creator':
+								case 'author':
+								case 'bookAuthor':
+								case 'editor':
+									autocompleteParams.fieldMode = 2;
+									break;
+							}
+							textbox.setAttribute(
+								'autocompletesearchparam',
+								JSON.stringify(autocompleteParams)
+							);
+					}
+			}
+		}
+	}
+	customElements.define("zoterosearchtextbox", ZoteroSearchTextbox);
+
+	class ZoteroSearchAgeField extends SearchElementBase {
+		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>
+		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
+
+		get value() {
+			var input = this.shadowRoot.getElementById('input');
+			var menulist = this.shadowRoot.getElementById('age-list');
+			return input.value + ' '
+				+ menulist.firstChild.childNodes[menulist.selectedIndex].getAttribute('value');
+		}
+
+		set value(val) {
+			var input = this.shadowRoot.getElementById('input');
+
+			var [num, units] = val.split(' ');
+			input.setAttribute('value', num);
+			
+			var menulist = this.shadowRoot.getElementById('age-list');
+			var menupopup = menulist.firstChild;
+			
+			var selectThis = 0;
+			for (var i=0; i<menupopup.childNodes.length; i++){
+				if (menupopup.childNodes[i].value == units)
+				{
+					selectThis = i;
+					break;
+				}
+			}
+			menulist.selectedIndex = selectThis;
+		}
+	}
+	customElements.define("zoterosearchagefield", ZoteroSearchAgeField);
+}
diff --git a/chrome/content/zotero/searchDialog.js b/chrome/content/zotero/searchDialog.js
index 34d1afe265..1f19522385 100644
--- a/chrome/content/zotero/searchDialog.js
+++ b/chrome/content/zotero/searchDialog.js
@@ -41,6 +41,8 @@ function doLoad()
 	searchBox.groups = io.dataIn.groups;
 	searchBox.search = io.dataIn.search;
 	document.getElementById('search-name').value = io.dataIn.name;
+
+	document.addEventListener('dialogaccept', doAccept);
 }
 
 function doUnload()
diff --git a/chrome/content/zotero/searchDialog.xul b/chrome/content/zotero/searchDialog.xhtml
similarity index 59%
rename from chrome/content/zotero/searchDialog.xul
rename to chrome/content/zotero/searchDialog.xhtml
index a10375a578..6d8cfa1142 100644
--- a/chrome/content/zotero/searchDialog.xul
+++ b/chrome/content/zotero/searchDialog.xhtml
@@ -5,25 +5,39 @@
 
 <!DOCTYPE bindings SYSTEM "chrome://zotero/locale/searchbox.dtd">
 
-<dialog
-	id="zotero-search-dialog"
+<window
 	title="Search"
 	orient="vertical"
-	buttons="cancel,accept"
-	ondialogaccept="doAccept();"
 	onload="doLoad();"
 	onunload="doUnload();"
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml"
 	style="padding:2em">
+<dialog
+	id="zotero-search-dialog"
+	buttons="cancel,accept">
+
+	<script>
+		var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/zoteroSearch.js", this);
+	</script>
 	
 	<script src="include.js"/>
 	<script src="searchDialog.js"/>
 	
+	<popupset>
+		<panel is="autocomplete-richlistbox-popup"
+			id="search-autocomplete-popup"
+			type="autocomplete-richlistbox"
+			noautofocus="true"/>
+	</popupset>
+	
 	<vbox id="zotero-search-box-container" flex="1">
 		<hbox align="center">
 			<label value="&zotero.search.name;"/>
-			<textbox id="search-name" width="275" maxlength="80"/>
+			<html:input id="search-name" type="text" width="275" maxlength="80"/>
 		</hbox>
 		<zoterosearch id="search-box" flex="1"/>
 	</vbox>
 </dialog>
+</window>
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index ff0e421812..b9860211f5 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -1124,7 +1124,7 @@ var ZoteroPane = new function()
 		);
 		
 		var io = { dataIn: { search: s, name }, dataOut: null };
-		window.openDialog('chrome://zotero/content/searchDialog.xul','','chrome,modal',io);
+		window.openDialog('chrome://zotero/content/searchDialog.xhtml','','chrome,modal',io);
 		if (!io.dataOut) {
 			return false;
 		}
@@ -1155,7 +1155,7 @@ var ZoteroPane = new function()
 		s.addCondition('title', 'contains', '');
 		
 		var io = {dataIn: {search: s}, dataOut: null};
-		window.openDialog('chrome://zotero/content/advancedSearch.xul', '', 'chrome,dialog=no,centerscreen', io);
+		window.openDialog('chrome://zotero/content/advancedSearch.xhtml', '', 'chrome,dialog=no,centerscreen', io);
 	};
 
 	this.initItemsTree = async function () {
@@ -2161,7 +2161,7 @@ var ZoteroPane = new function()
 					},
 					dataOut: null
 				};
-				window.openDialog('chrome://zotero/content/searchDialog.xul','','chrome,modal',io);
+				window.openDialog('chrome://zotero/content/searchDialog.xhtml','','chrome,modal',io);
 				if (io.dataOut) {
 					row.ref.fromJSON(io.dataOut.json);
 					yield row.ref.saveTx();
diff --git a/chrome/skin/default/zotero/bindings/search.css b/chrome/skin/default/zotero/bindings/search.css
deleted file mode 100644
index 1fa36efbb7..0000000000
--- a/chrome/skin/default/zotero/bindings/search.css
+++ /dev/null
@@ -1,69 +0,0 @@
-#search-box
-{
-	width: 60em;
-}
-
-#search-box > hbox {
-	margin-left: 6px;
-}
-
-groupbox {
-	margin-top: 0;
-	padding-top: 0;
-}
-
-caption {
-	font: inherit;
-	padding-left: 0 !important;
-}
-
-label:first-child, checkbox:first-child {
-	margin-left: 0 !important;
-	padding-left: 0 !important;
-}
-
-checkbox {
-	margin-right: .5em;
-}
-
-#search-condition menulist[id="operatorsmenu"]
-{
-	width: 15em;
-}
-
-#condition-tooltips tooltip
-{
-	background: red !important;
-}
-
-#condition-tooltips row > label
-{
-	font-weight: bold;
-}
-
-#search-textbox toolbarbutton
-{
-	padding: 0;
-	cursor: default;
-}
-
-#search-textbox:not([hasOptions=true]) toolbarbutton
-{
-	display: none;
-}
-
-#search-textbox .toolbarbutton-text
-{
-	margin: 0;
-	padding: 0;
-}
-
-#search-textbox .toolbarbutton-menu-dropmarker
-{
-	padding: 0 2px;
-}
-
-#search-in-the-last textbox
-{
-	min-width: 3em;
-}
diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css
index 108beed4ab..3650ea4e52 100644
--- a/chrome/skin/default/zotero/zotero.css
+++ b/chrome/skin/default/zotero/zotero.css
@@ -60,28 +60,6 @@ relatedbox
 	-moz-user-focus: ignore;
 }
 
-zoterosearch
-{
-	-moz-binding: url('chrome://zotero/content/bindings/zoterosearch.xml#search-box');
-}
-
-
-zoterosearchcondition
-{
-	-moz-binding: url('chrome://zotero/content/bindings/zoterosearch.xml#search-condition');
-}
-
-zoterosearchtextbox
-{
-	-moz-binding: url('chrome://zotero/content/bindings/zoterosearch.xml#search-textbox');
-}
-
-
-zoterosearchagefield
-{
-	-moz-binding: url('chrome://zotero/content/bindings/zoterosearch.xml#search-in-the-last');
-}
-
 zoteromergegroup {
 	-moz-binding: url('chrome://zotero/content/bindings/merge.xml#merge-group');
 }
diff --git a/scss/_zoteroSearch.scss b/scss/_zoteroSearch.scss
new file mode 100644
index 0000000000..711adb388b
--- /dev/null
+++ b/scss/_zoteroSearch.scss
@@ -0,0 +1,2 @@
+@import "components/zoteroSearch";
+@import "components/clicky";
diff --git a/scss/components/_zoteroSearch.scss b/scss/components/_zoteroSearch.scss
new file mode 100644
index 0000000000..55eb048147
--- /dev/null
+++ b/scss/components/_zoteroSearch.scss
@@ -0,0 +1,55 @@
+#search-box > hbox, #search-box > groupbox {
+	margin-left: 6px;
+}
+
+groupbox {
+	margin-top: 0;
+	padding-top: 0;
+}
+
+caption {
+	font: inherit;
+	padding-left: 0 !important;
+}
+
+label:first-child:not(tooltip label), checkbox:first-child {
+	margin-left: 0 !important;
+	padding-left: 0 !important;
+}
+
+checkbox {
+	margin-right: .5em;
+}
+
+#operatorsmenu {
+	width: 15em;
+}
+
+#condition-tooltips tooltip
+{
+	background: red !important;
+}
+
+#condition-tooltips hbox > label
+{
+	font-weight: bold;
+}
+
+.toolbarbutton-text
+{
+	margin: 0;
+	padding: 0;
+}
+
+#textbox-button {
+	cursor: default;
+	appearance: none;
+	justify-self: end;
+	margin-inline-end: 8px;
+	align-self: center;
+}
+
+#search-in-the-last input
+{
+	min-width: 3em;
+}
diff --git a/scss/zoteroSearch-mac.scss b/scss/zoteroSearch-mac.scss
new file mode 100644
index 0000000000..53dbdb02ad
--- /dev/null
+++ b/scss/zoteroSearch-mac.scss
@@ -0,0 +1 @@
+@import "zoteroSearch";
diff --git a/scss/zoteroSearch-unix.scss b/scss/zoteroSearch-unix.scss
new file mode 100644
index 0000000000..53dbdb02ad
--- /dev/null
+++ b/scss/zoteroSearch-unix.scss
@@ -0,0 +1 @@
+@import "zoteroSearch";
diff --git a/scss/zoteroSearch-win.scss b/scss/zoteroSearch-win.scss
new file mode 100644
index 0000000000..53dbdb02ad
--- /dev/null
+++ b/scss/zoteroSearch-win.scss
@@ -0,0 +1 @@
+@import "zoteroSearch";
diff --git a/test/tests/advancedSearchTest.js b/test/tests/advancedSearchTest.js
index 5a0182e97a..e2652f30dc 100644
--- a/test/tests/advancedSearchTest.js
+++ b/test/tests/advancedSearchTest.js
@@ -19,7 +19,7 @@ describe("Advanced Search", function () {
 	it("should perform a search", function* () {
 		var item = yield createDataObject('item', { setTitle: true });
 		
-		var promise = waitForWindow('chrome://zotero/content/advancedSearch.xul');
+		var promise = waitForWindow('chrome://zotero/content/advancedSearch.xhtml');
 		zp.openAdvancedSearchWindow();
 		var searchWin = yield promise;
 		
@@ -51,7 +51,7 @@ describe("Advanced Search", function () {
 		var searchWin, searchBox, conditions;
 		
 		before(function* () {
-			var promise = waitForWindow('chrome://zotero/content/advancedSearch.xul');
+			var promise = waitForWindow('chrome://zotero/content/advancedSearch.xhtml');
 			zp.openAdvancedSearchWindow();
 			searchWin = yield promise;
 			searchBox = searchWin.document.getElementById('zotero-search-box');
diff --git a/test/tests/zoteroPaneTest.js b/test/tests/zoteroPaneTest.js
index 800601a8a9..aa4690c561 100644
--- a/test/tests/zoteroPaneTest.js
+++ b/test/tests/zoteroPaneTest.js
@@ -73,7 +73,7 @@ describe("ZoteroPane", function() {
 				// TODO: Test changing a condition
 				function (dialog) {},
 				'accept',
-				'chrome://zotero/content/searchDialog.xul'
+				'chrome://zotero/content/searchDialog.xhtml'
 			);
 			var id = yield zp.newSearch();
 			yield promise;
@@ -86,7 +86,7 @@ describe("ZoteroPane", function() {
 			var promise = waitForDialog(
 				function (dialog) {},
 				'cancel',
-				'chrome://zotero/content/searchDialog.xul'
+				'chrome://zotero/content/searchDialog.xhtml'
 			);
 			var id = yield zp.newSearch();
 			yield promise;
@@ -766,7 +766,7 @@ describe("ZoteroPane", function() {
 	describe("#editSelectedCollection()", function () {
 		it("should edit a saved search", function* () {
 			var search = yield createDataObject('search');
-			var promise = waitForWindow('chrome://zotero/content/searchDialog.xul', function (win) {
+			var promise = waitForWindow('chrome://zotero/content/searchDialog.xhtml', function (win) {
 				let searchBox = win.document.getElementById('search-box');
 				var c = searchBox.search.getCondition(
 					searchBox.search.addCondition("title", "contains", "foo")
@@ -783,7 +783,7 @@ describe("ZoteroPane", function() {
 		it("should edit a saved search in a group", function* () {
 			var group = yield getGroup();
 			var search = yield createDataObject('search', { libraryID: group.libraryID });
-			var promise = waitForWindow('chrome://zotero/content/searchDialog.xul', function (win) {
+			var promise = waitForWindow('chrome://zotero/content/searchDialog.xhtml', function (win) {
 				let searchBox = win.document.getElementById('search-box');
 				var c = searchBox.search.getCondition(
 					searchBox.search.addCondition("title", "contains", "foo")