Qf: potential fix to the dialog becoming invisible (#4603)

* qf: remove transparent window background from win

Because it seems to still sometimes cause the qf window
to disappear. I could not reproduce it but disabling
background: transparent did help with the issue of qf
disappearing in the past. It allows us to remove very
specific chromemargins which, apparently, do not work
in all cases.

Removed border-radius from qf on windows because now that
the window is not transparent, its corners would be visible.
But the window itself has rounded corners so it doesn't look
that different.

The main drawback now is that a secondary window without titlebar
on win becomes resizable, and having background: transparent was
a workaround to disable that. So now, we set max width and height
so that the window cannot be stretched but, unfortunately, the
resize cursor appears when you hover over the edge of the dialog.

* qf: minor style fixes

- hardcode light theme value for accept button and the
spinner so they don't disappear when the theme is dark
- make sure the item's color from reference panel is not
overriden by a lighter one from another stylesheet

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

@@ -1,5 +1,4 @@
 window.citation-dialog {
-	background: transparent;
 	padding: 0;
 	-moz-appearance: none;
 }
@@ -8,16 +7,8 @@ window.citation-dialog {
 .citation-dialog.entry {
 	background: -moz-linear-gradient(-90deg, rgb(243,123,119) 0, rgb(180,47,38) 50%, rgb(156,36,27) 50%);
 	padding: 10px;
-	/* mouse events on win don't fire right at the edge of the window. The dialog has a gap
-	before the window edges to ensure the window can be dragged from any point of the dialog */
-	margin:10px; 
 }
 
 .note-dialog .citation-dialog.entry {
 	background: -moz-linear-gradient(-90deg, rgb(249, 231, 179) 0, rgb(228, 193, 94) 50%, rgb(221, 184, 81) 50%);
-}
-
-.citation-dialog.entry:not([square="true"]) {
-	-moz-border-radius: 15px;
-	border-radius: 15px;
 }

chrome/content/zotero/integration/insertNoteDialog.xhtml

@@ -41,9 +41,12 @@
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	persist="screenX screenY"
 	onkeypress="Zotero_QuickFormat.onWindowKeyPress(event)"
-	onunload="Zotero_QuickFormat.onUnload()">
+	onunload="Zotero_QuickFormat.onUnload()"
+	drawintitlebar-platforms="linux,win"
+	no-titlebar-icon="true">
 	
 	<script src="../include.js"/>
+	<script src="../titlebar.js" type="text/javascript"/>
 	<script src="quickFormat.js" type="text/javascript"/>
 	<script src="insertNoteDialog.js" type="text/javascript"/>
 

chrome/content/zotero/integration/quickFormat.js

@@ -71,17 +71,8 @@ var Zotero_QuickFormat = new function () {
 			if(Zotero.isMac) {
 				document.documentElement.setAttribute("drawintitlebar", true);
 			}
-	
-			// Required for dragging to work on windows.
-			// These values are important and changing them may affect how the dialog
-			// is rendered
-			if (Zotero.isWin) {
-				document.documentElement.setAttribute('chromemargin', '0,0,15,0');
-			}
-
-			// Hide chrome on linux and explcitly make window unresizable
+			// Hide chrome on linux
 			if (Zotero.isLinux) {
-				document.documentElement.setAttribute("resizable", false);
 				document.documentElement.setAttribute("hidechrome", true);
 			}
 
@@ -1334,24 +1325,21 @@ var Zotero_QuickFormat = new function () {
 			editor.style.width = `${editorDesiredWidth}px`;
 		}
 	}
-	function _resizeWindow() {
+	async function _resizeWindow() {
 		let box = document.querySelector(".citation-dialog.entry");
-		let contentHeight = box.getBoundingClientRect().height;
-		// Resized so that outerHeight=contentHeight
-		let outerHeightAdjustment = Math.max(window.outerHeight - window.innerHeight, 0);
+		let height = box.getBoundingClientRect().height;
 		let width = WINDOW_WIDTH;
-		let height = contentHeight + outerHeightAdjustment;
-		// On windows, there is a 10px margin around the dialog. It's required for dragging
-		// to be picked up at the edges of the dialog, otherwise it will be ignored and only
-		// inner half of the dialog can be used to drag the window.
-		if (Zotero.isWin) {
-			width += 10 * 2;
-			height += 10 * 2;
-		}
-		if (Math.abs(height - window.innerHeight) < 5) {
+		// Force resizing if there is no max height set on the window
+		let maySkip = !!document.documentElement.style.maxHeight;
+		if (Math.abs(height - window.innerHeight) < 5 && maySkip) {
 			// Do not do anything if the difference is just a few pixels
 			return;
 		}
+		// Remove height limitation to let the window resize
+		document.documentElement.style.removeProperty("max-height");
+		document.documentElement.style.removeProperty("min-height");
+		// Need to wait a moment for the css change above to take effect (mainly for mac)
+		await Zotero.Promise.delay(5);
 		window.resizeTo(width, height);
 		// If the editor height changes, the panel will remain where it was.
 		// Check if the panel is not next to the dialog, and if so - close and reopen it
@@ -1367,6 +1355,9 @@ var Zotero_QuickFormat = new function () {
 			document.children[0].setAttribute('drawintitlebar', 'false');
 			document.children[0].setAttribute('drawintitlebar', 'true');
 		}
+		// Make sure the window's width cannot be changed by dragging the edge of the window
+		document.documentElement.style.maxHeight = height + "px";
+		document.documentElement.style.minHeight = height + "px";
 	}
 	
 	function _resizeReferencePanel() {
@@ -1444,7 +1435,7 @@ var Zotero_QuickFormat = new function () {
 			}, false);
 		}
 		// Try to make the panel appear right in the center on windows
-		let leftMargin = Zotero.isWin ? 5 : 15;
+		let leftMargin = Zotero.isWin ? 10 : 15;
 		referencePanel.openPopup(dialog, "after_start", leftMargin, 0, false, false, null);
 		// Initially, panel has an opacity of 0.9 to prevent a shadow from appearing behind the
 		// panel on Windows, but we override it upon the first opening of the panel

chrome/content/zotero/integration/quickFormat.xhtml

@@ -42,7 +42,8 @@
 	persist="screenX screenY"
 	onkeypress="Zotero_QuickFormat.onWindowKeyPress(event)"
 	onunload="Zotero_QuickFormat.onUnload()"
-	drawintitlebar-platforms="linux"
+	drawintitlebar-platforms="linux,win"
+	no-titlebar-icon="true"
 	style="width: 800px;">
 	<script src="../include.js"/>
 	<script src="../titlebar.js" type="text/javascript"/>

chrome/skin/default/zotero/integration.css

@@ -222,7 +222,16 @@ span.zotero-bubble-input {
 
 .citation-dialog .accept-button {
 	list-style-image: url("chrome://zotero/skin/20/universal/arrow-right.svg");
-	fill: currentColor;
+	fill: #0000008c; /* hardcoded fill-secondary from light theme */
+}
+
+.citation-dialog .accept-button:hover {
+	background-color: #0000000d; /* hardcoded fill-quinary from light theme */
+}
+
+.zotero-spinner-16 {
+	fill: #0000008c; /* hardcoded fill-secondary from light theme */
+	background: url("chrome://zotero/skin/16/light/loading.svg") no-repeat center/contain;
 }
 
 .citation-dialog.item {
@@ -250,7 +259,7 @@ span.zotero-bubble-input {
 
 richlistitem[selected="true"] {
 	background: Highlight !important;
-	color: HighlightText;
+	color: HighlightText !important;
 }
 
 .citation-dialog.reference-panel {
@@ -366,7 +375,8 @@ panel button .button-text {
 }
 
 window.citation-dialog {
-	width: 600px;
+	max-width: 800px;
+	min-width: 800px;
 }
 
 .aria-hidden {