Cancel active Quick Format search if another one starts

This fixes inconsistent results (#1349) from async searches finishing
out of order.

Also adds spinner when search is active

chrome/content/zotero/integration/quickFormat.js

@@ -37,9 +37,10 @@ var Zotero_QuickFormat = new function () {
 		keepSorted,  showEditor, referencePanel, referenceBox, referenceHeight = 0,
 		separatorHeight = 0, currentLocator, currentLocatorLabel, currentSearchTime, dragging,
 		panel, panelPrefix, panelSuffix, panelSuppressAuthor, panelLocatorLabel, panelLocator,
-		panelLibraryLink, panelInfo, panelRefersToBubble, panelFrameHeight = 0, accepted = false,
+		panelLibraryLink, panelInfo, panelRefersToBubble, panelFrameHeight = 0, accepted = false;
-		searchTimeout;
+	var _searchPromise;
 	
+	const SEARCH_TIMEOUT = 250;
 	const SHOWN_REFERENCES = 7;
 	
 	/**
@@ -1051,8 +1052,20 @@ var Zotero_QuickFormat = new function () {
 	 * keypress, since searches can be slow.
 	 */
 	function _resetSearchTimer() {
-		if(searchTimeout) clearTimeout(searchTimeout);
+		// Show spinner
-		searchTimeout = setTimeout(_quickFormat, 250);
+		var spinner = document.getElementById('quick-format-spinner');
+		spinner.style.visibility = '';
+		// Cancel current search if active
+		if (_searchPromise && _searchPromise.isPending()) {
+			_searchPromise.cancel();
+		}
+		// Start new search
+		_searchPromise = Zotero.Promise.delay(SEARCH_TIMEOUT)
+			.then(() => _quickFormat())
+			.then(() => {
+				_searchPromise = null;
+				spinner.style.visibility = 'hidden';
+			});
 	}
 	
 	/**

chrome/content/zotero/integration/quickFormat.xul

@@ -62,6 +62,9 @@
 					</toolbarbutton>
 					<iframe id="quick-format-iframe" ondragstart="event.stopPropagation()" src="data:application/xhtml+xml,%3C!DOCTYPE%20html%20PUBLIC%20%22-//W3C//DTD%20XHTML%201.0%20Strict//EN%22%20%22http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22%3E%3Chtml%20xmlns=%22http://www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Clink%20rel=%22stylesheet%22%20type=%22text/css%22%20href=%22chrome://zotero/skin/integration.css%22/%3E%3Clink%20rel=%22stylesheet%22%20type=%22text/css%22%20href=%22chrome://zotero-platform/content/integration.css%22/%3E%3C/head%3E%3Cbody%20contenteditable=%22true%22%20spellcheck=%22false%22%20id=%22quick-format-editor%22/%3E%3C/html%3E"
 						tabindex="1" flex="1"/>
+					<vbox id="quick-format-spinner" style="visibility: hidden">
+						<image class="zotero-spinner-16"/>
+					</vbox>
 				</hbox>
 			</hbox>
 			<progressmeter id="quick-format-progress-meter" mode="undetermined" value="0" flex="1"/>

chrome/content/zotero/zoteroPane.xul

@@ -207,7 +207,7 @@
 					<toolbarseparator/>
 					<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" style="visibility: hidden"/>
+					<image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="visibility: hidden"/>
 					<textbox id="zotero-tb-search" type="search" timeout="250"
 							onkeypress="ZoteroPane_Local.handleSearchKeypress(this, event)"
 							oninput="ZoteroPane_Local.handleSearchInput(this, event)"

chrome/skin/default/zotero/integration.css

@@ -149,6 +149,11 @@ body {
 	overflow: hidden;
 }
 
+#quick-format-spinner {
+	margin-top: 2px;
+	margin-right: 8px;
+}
+
 .quick-format-item {
 	font-size: 12px;
 	font: -moz-field;

chrome/skin/default/zotero/zotero.css

@@ -450,13 +450,19 @@ label.zotero-text-link {
 	-moz-box-pack: end;
 }
 
-.zotero-spinner {
+.zotero-spinner-14 {
-	list-style-image: url(chrome://zotero/skin/spinner-14px@2x.png);
+	list-style-image: url(chrome://zotero/skin/spinner-14px.png);
 	height: 14px;
 	width: 14px;
 	margin-right: 2px;
 }
 
+.zotero-spinner-16 {
+	list-style-image: url(chrome://zotero/skin/spinner-16px.png);
+	height: 16px;
+	width: 16px;
+}
+
 
 /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
 @media (min-resolution: 1.5dppx) {
@@ -467,4 +473,6 @@ label.zotero-text-link {
 	.zotero-clicky-plus:not([disabled=true]):active  { background-image: url('chrome://zotero/skin/plus-active@2x.png') !important; }
 	.zotero-scrape-popup-library { list-style-image: url('chrome://zotero/skin/treesource-library@2x.png'); }
 	.zotero-scrape-popup-collection { list-style-image: url('chrome://zotero/skin/treesource-collection@2x.png'); }
+	.zotero-spinner-14  { list-style-image: url(chrome://zotero/skin/spinner-14px@2x.png); }
+	.zotero-spinner-16  { list-style-image: url(chrome://zotero/skin/spinner-16px@2x.png); }
 }