fx-compat: Restore quick search menu and update styles (#2684)

chrome/content/zotero-platform/mac/overlay.css

@@ -69,11 +69,6 @@
   margin-top: -4px;
 }
 
-#zotero-tb-search-menu-button {
-	margin: -6px 0 -6px -16px;
-	padding: 6px 0 6px 15px;
-}
-
 #zotero-tb-sync > .toolbarbutton-icon {
   -moz-padding-start: 8px;
   padding-top: 1px;

chrome/content/zotero-platform/unix/overlay.css

@@ -9,7 +9,7 @@
 }
 
 /* Dropmarker added automatically on Linux */
-.toolbarbutton-menu-dropmarker, #zotero-tb-search-menu-button {
+.toolbarbutton-menu-dropmarker {
 	list-style-image: none;
 }
 
@@ -17,20 +17,6 @@
 	margin-right: 4px;
 }
 
-#zotero-tb-search-menu-button {
-	-moz-appearance: toolbarbutton-dropdown !important;
-	width: 12px;
-	height: 12px;
-}
-
-#zotero-tb-search-menu-button .button-menu-dropmarker {
-	display: none;
-}
-
-#zotero-tb-search .textbox-search-icon {
-	visibility: hidden;
-}
-
 /* Fixes tabs missing styling on (GTK 3.20) Ubuntu 16.10. See https://bugzilla.mozilla.org/show_bug.cgi?id=1306425 */
 tabpanels {
 	-moz-appearance: none;

chrome/content/zotero-platform/win/overlay.css

@@ -24,21 +24,6 @@
 	}
 }
 
-#zotero-tb-search-menu-button {
-	margin: 0 -1px 0 -4px;
-	padding: 5px 0 5px 5px;
-	border: 0;
-	background: transparent;
-}
-
-#zotero-tb-search-menu-button .button-menu-dropmarker {
-	display: none;
-}
-
-#zotero-tb-search .textbox-search-icon {
-	visibility: hidden;
-}
-
 #zotero-tb-sync-error {
 	margin-right: 4px;
 	padding-top: 4px;

chrome/content/zotero/elements/quickSearchTextbox.js

@@ -0,0 +1,131 @@
+/*
+    ***** 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";
+
+{
+	// The search-textbox CE is defined lazily. Create one now to get
+	// search-textbox defined, allowing us to inherit from it.
+	if (!customElements.get("search-textbox")) {
+		delete document.createXULElement("search-textbox");
+	}
+	
+	class QuickSearchTextbox extends customElements.get("search-textbox") {
+		_searchModes = {
+			titleCreatorYear: Zotero.getString('quickSearch.mode.titleCreatorYear'),
+			fields: Zotero.getString('quickSearch.mode.fieldsAndTags'),
+			everything: Zotero.getString('quickSearch.mode.everything')
+		};
+
+		_searchModePopup = null;
+
+		connectedCallback() {
+			super.connectedCallback();
+
+			if (this.delayConnectedCallback()) {
+				return;
+			}
+
+			let s1 = document.createElement("link");
+			s1.rel = "stylesheet";
+			s1.href = "chrome://zotero-platform/content/quickSearchTextbox.css";
+			this.shadowRoot.append(s1);
+
+			// Need to create an inner shadow DOM so that global.css styles,
+			// which we need for the menupopup, don't break the search textbox
+			let dropmarkerHost = document.createXULElement('hbox');
+			let dropmarkerShadow = dropmarkerHost.attachShadow({ mode: 'open' });
+
+			let s2 = document.createElement("link");
+			s2.rel = "stylesheet";
+			s2.href = "chrome://zotero-platform/content/quickSearchTextbox.css";
+
+			let s3 = document.createElement("link");
+			s3.rel = "stylesheet";
+			s3.href = "chrome://global/skin/global.css";
+
+			let dropmarker = document.createXULElement('button');
+			dropmarker.id = "zotero-tb-search-menu-button";
+			dropmarker.setAttribute("type", "menu");
+			dropmarker.append(this.searchModePopup);
+
+			dropmarkerShadow.append(s2, s3, dropmarker);
+
+			this.inputField.before(dropmarkerHost);
+
+			// If Alt-Up/Down, show popup
+			this.addEventListener('keypress', (event) => {
+				if (event.altKey && (event.keyCode == event.DOM_VK_UP || event.keyCode == event.DOM_VK_DOWN)) {
+					dropmarker.open = true;
+					event.preventDefault();
+				}
+			});
+		}
+
+		get searchModePopup() {
+			if (this._searchModePopup) {
+				return this._searchModePopup;
+			}
+
+			let popup = document.createXULElement('menupopup');
+			popup.id = "search-mode-popup";
+
+			for (let [mode, label] of Object.entries(this._searchModes)) {
+				let item = document.createXULElement('menuitem');
+				item.setAttribute('type', 'radio');
+				item.label = label;
+				item.value = mode;
+
+				item.addEventListener('command', () => {
+					Zotero.Prefs.set("search.quicksearch-mode", mode);
+					this.updateMode();
+
+					if (this.value) {
+						this.dispatchEvent(new Event('command'));
+					}
+				});
+
+				popup.append(item);
+			}
+
+			return this._searchModePopup = popup;
+		}
+
+		updateMode() {
+			let mode = Zotero.Prefs.get("search.quicksearch-mode");
+
+			if (!this._searchModes[mode]) {
+				Zotero.Prefs.set("search.quicksearch-mode", "fields");
+				mode = 'fields';
+			}
+
+			this.searchModePopup.querySelector(`menuitem[value="${mode}"]`)
+				.setAttribute('checked', 'true');
+			this.placeholder = this._searchModes[mode];
+		}
+	}
+	
+	customElements.define("quick-search-textbox", QuickSearchTextbox);
+}

chrome/content/zotero/searchDialog.xhtml

@@ -6,7 +6,7 @@
 <!DOCTYPE bindings SYSTEM "chrome://zotero/locale/searchbox.dtd">
 
 <window
-	title="Search"
+	title="&zotero.search.search;"
 	orient="vertical"
 	onload="doLoad();"
 	onunload="doUnload();"

chrome/content/zotero/xpcom/utilities_internal.js

@@ -1995,7 +1995,7 @@ Zotero.Utilities.Internal = {
 	 */
 	setFontSize: function (rootElement) {
 		var size = Zotero.Prefs.get('fontSize');
-		rootElement.style.fontSize = size + 'em';
+		rootElement.style.fontSize = rootElement.style['--zotero-font-size'] = size + 'em';
 		if (size <= 1) {
 			size = 'small';
 		}

chrome/content/zotero/xpcom/zotero.js

@@ -1591,99 +1591,11 @@ Services.scriptloader.loadSubScript("resource://zotero/polyfill.js");
 	
 	
 	this.updateQuickSearchBox = function (document) {
-		// TEMP: Fx78 -- search box is now <search-textbox> custom element. We may need to extend it
-		// to add a mode menu
-		return;
-		
-		
 		var searchBox = document.getElementById('zotero-tb-search');
-		if(!searchBox) return;
+		if (searchBox) {
-		
+			searchBox.updateMode();
-		var mode = Zotero.Prefs.get("search.quicksearch-mode");
-		var prefix = 'zotero-tb-search-mode-';
-		var prefixLen = prefix.length;
-		
-		var modes = {
-			titleCreatorYear: {
-				label: Zotero.getString('quickSearch.mode.titleCreatorYear')
-			},
-			
-			fields: {
-				label: Zotero.getString('quickSearch.mode.fieldsAndTags')
-			},
-			
-			everything: {
-				label: Zotero.getString('quickSearch.mode.everything')
-			}
-		};
-		
-		if (!modes[mode]) {
-			Zotero.Prefs.set("search.quicksearch-mode", "fields");
-			mode = 'fields';
 		}
-		
+	};
-		var hbox = document.getAnonymousNodes(searchBox)[0];
-		var input = hbox.getElementsByAttribute('class', 'textbox-input')[0];
-		
-		// Already initialized, so just update selection
-		var button = hbox.getElementsByAttribute('id', 'zotero-tb-search-menu-button');
-		if (button.length) {
-			button = button[0];
-			var menupopup = button.firstChild;
-			for (let menuitem of menupopup.childNodes) {
-				if (menuitem.id.substr(prefixLen) == mode) {
-					menuitem.setAttribute('checked', true);
-					searchBox.placeholder = modes[mode].label;
-					return;
-				}
-			}
-			return;
-		}
-		
-		// Otherwise, build menu
-		button = document.createElement('button');
-		button.id = 'zotero-tb-search-menu-button';
-		button.setAttribute('type', 'menu');
-		
-		var menupopup = document.createXULElement('menupopup');
-		
-		for (var i in modes) {
-			var menuitem = document.createXULElement('menuitem');
-			menuitem.setAttribute('id', prefix + i);
-			menuitem.setAttribute('label', modes[i].label);
-			menuitem.setAttribute('name', 'searchMode');
-			menuitem.setAttribute('type', 'radio');
-			//menuitem.setAttribute("tooltiptext", "");
-			
-			menupopup.appendChild(menuitem);
-			
-			if (mode == i) {
-				menuitem.setAttribute('checked', true);
-				menupopup.selectedItem = menuitem;
-			}
-		}
-		
-		menupopup.addEventListener("command", function(event) {
-			var mode = event.target.id.substr(22);
-			Zotero.Prefs.set("search.quicksearch-mode", mode);
-			if (document.getElementById("zotero-tb-search").value == "") {
-				event.stopPropagation();
-			}
-		}, false);
-		
-		button.appendChild(menupopup);
-		hbox.insertBefore(button, input);
-		
-		searchBox.placeholder = modes[mode].label;
-		
-		// If Alt-Up/Down, show popup
-		searchBox.addEventListener("keypress", function(event) {
-			if (event.altKey && (event.keyCode == event.DOM_VK_UP || event.keyCode == event.DOM_VK_DOWN)) {
-				document.getElementById('zotero-tb-search-menu-button').open = true;
-				event.stopPropagation();
-			}
-		}, false);
-	}
 	
 	
 	/*

chrome/content/zotero/zoteroPane.xhtml

@@ -86,6 +86,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/relatedBox.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/attachmentBox.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/menuToolbarbutton.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/quickSearchTextbox.js", this);
 
 		Services.scriptloader.loadSubScript("chrome://zotero/content/tabs.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/zoteroPane.js", this);
@@ -849,7 +850,7 @@
 									<toolbarbutton id="zotero-tb-advanced-search" class="zotero-tb-button" tooltiptext="&zotero.toolbar.advancedSearch;" command="cmd_zotero_advancedSearch"/>
 									<spacer flex="1"/>
 									<image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="display: none"/>
-									<search-textbox id="zotero-tb-search" timeout="250"
+									<quick-search-textbox id="zotero-tb-search" timeout="250"
 											onkeypress="ZoteroPane_Local.handleSearchKeypress(this, event)"
 											oninput="ZoteroPane_Local.handleSearchInput(this, event)"
 											oncommand="ZoteroPane_Local.search()"/>

chrome/skin/default/zotero/overlay.css

@@ -579,26 +579,6 @@
 	color: gray;
 }
 
-#zotero-tb-search
-{
-	font-size: 11px !important;
-	margin-right: 0;
-	width: 172px;
-}
-
-#zotero-tb-search-menu-button {
-	margin: 0;
-	padding: 0;
-	-moz-appearance: none;
-	min-width: 0;
-	cursor: default;
-	list-style-image: url("chrome://zotero/skin/searchbar-dropmarker.png");
-}
-
-#zotero-tb-search-menu-button .button-icon {
-	width: 7px;
-}
-
 #zotero-toolbar
 {
 	visibility: visible !important;
@@ -762,5 +742,4 @@
 	#zotero-tb-sync-error[state=warning]  { list-style-image: url(chrome://zotero/skin/warning@2x.png); }
 	#zotero-tb-sync  { list-style-image: url(chrome://zotero/skin/arrow_rotate_static@2x.png); }
 	#zotero-tb-sync[status=animate]  { list-style-image: url(chrome://zotero/skin/arrow_rotate_animated@2x.png); }
-	#zotero-tb-search-menu-button  { list-style-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); }
 }

chrome/skin/default/zotero/zotero.css

@@ -1,9 +1,4 @@
 /* Font sizes */
-*[zoteroFontSize=medium] #zotero-tb-search, *[zoteroFontSize=large] #zotero-tb-search
-{
-	font-size: 1em !important;
-}
-
 *[zoteroFontSize=medium] treechildren::-moz-tree-row
 {
 	height: 1.5em;

scss/_quickSearchTextbox.scss

@@ -0,0 +1 @@
+@import "components/quickSearchTextbox";

scss/components/_quickSearchTextbox.scss

@@ -0,0 +1,27 @@
+:host(#zotero-tb-search) {
+	font-size: var(--zotero-font-size) !important;
+	margin-right: 0;
+	width: 172px;
+}
+
+#zotero-tb-search-menu-button {
+	margin: 0;
+	padding: 0;
+	-moz-appearance: none;
+	min-width: 0;
+	cursor: default;
+	list-style-image: url("chrome://zotero/skin/searchbar-dropmarker.png");
+}
+
+#zotero-tb-search-menu-button .button-icon {
+	width: 7px;
+}
+
+#zotero-tb-search-menu-button .button-menu-dropmarker {
+	display: none; /* Hide automatic dropmarker */
+}
+
+/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
+@media (min-resolution: 1.25dppx) {
+	#zotero-tb-search-menu-button  { list-style-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); }
+}

scss/linux/_quickSearchTextbox.scss

@@ -0,0 +1,10 @@
+#zotero-tb-search-menu-button {
+	list-style-image: none; /* Dropmarker added automatically on Linux */
+	-moz-appearance: toolbarbutton-dropdown !important;
+	width: 12px;
+	height: 12px;
+}
+
+#zotero-tb-search .textbox-search-icon {
+	visibility: hidden;
+}

scss/mac/_quickSearchTextbox.scss

@@ -0,0 +1,4 @@
+#zotero-tb-search-menu-button {
+	margin: -6px 0 -6px -18px;
+	padding: 6px 0 6px 15px;
+}

scss/quickSearchTextbox-mac.scss

@@ -0,0 +1,2 @@
+@import "quickSearchTextbox";
+@import "mac/quickSearchTextbox";

scss/quickSearchTextbox-unix.scss

@@ -0,0 +1,2 @@
+@import "quickSearchTextbox";
+@import "linux/quickSearchTextbox";

scss/quickSearchTextbox-win.scss

@@ -0,0 +1,2 @@
+@import "quickSearchTextbox";
+@import "win/quickSearchTextbox";

scss/win/_quickSearchTextbox.scss

@@ -0,0 +1,10 @@
+#zotero-tb-search-menu-button {
+	margin: 0 -1px 0 -4px;
+	padding: 5px 0 5px 5px;
+	border: 0;
+	background: transparent;
+}
+
+#zotero-tb-search .textbox-search-icon {
+	visibility: hidden;
+}