Quick Format: wrap description text of citation properties

- set max-width on the actual citation properties popup
- refactor _buildItemDescription to construct item description
as an array of spans, instead of labels, so that the
text can properly wrap.

chrome/content/zotero/integration/quickFormat.js

@@ -928,13 +928,10 @@ var Zotero_QuickFormat = new function () {
 	 */
 	function _buildItemDescription(item, infoHbox) {
 		var nodes = [];
-		var str = "";
-
 		// Add a red label to retracted items
 		if (Zotero.Retractions.isRetracted(item)) {
-			var label = document.createXULElement("label");
+			let label = document.createElement("span");
-			label.setAttribute("value", Zotero.getString("retraction.banner"));
+			label.textContent = Zotero.getString("retraction.banner");
-			label.setAttribute("crop", "end");
 			label.style.color = 'red';
 			label.style['margin-inline-end'] = '5px';
 			infoHbox.appendChild(label);
@@ -942,14 +939,16 @@ var Zotero_QuickFormat = new function () {
 		if (item.isNote()) {
 			var date = Zotero.Date.sqlToDate(item.dateModified, true);
 			date = Zotero.Date.toFriendlyDate(date);
-			str += date;
+			infoHbox.textContent = date;
 			
 			var text = item.note;
 			text = Zotero.Utilities.unescapeHTML(text);
 			text = text.trim();
 			text = text.slice(0, 500);
 			var parts = text.split('\n').map(x => x.trim()).filter(x => x.length);
-			if (parts[1]) str += " " + parts[1];
+			if (parts[1]) {
+				infoHbox.textContent += ` ${parts[1]}.`;
+			}
 		}
 		else {
 			var author, authorDate = "";
@@ -963,9 +962,8 @@ var Zotero_QuickFormat = new function () {
 			
 			var publicationTitle = item.getField("publicationTitle", false, true);
 			if(publicationTitle) {
-				var label = document.createXULElement("label");
+				let label = document.createElement("span");
-				label.setAttribute("value", publicationTitle);
+				label.textContent = publicationTitle;
-				label.setAttribute("crop", "end");
 				label.style.fontStyle = "italic";
 				nodes.push(label);
 			}
@@ -992,28 +990,31 @@ var Zotero_QuickFormat = new function () {
 			for(var i=0, n=nodes.length; i<n; i++) {
 				var node = nodes[i];
 
-				if(i != 0) str += ", ";
+				if (i != 0) {
-
+					// add comma between pieces
-				if(typeof node === "object") {
+					let comma = document.createElement("span");
-					var label = document.createXULElement("label");
+					comma.textContent = ", ";
-					label.setAttribute("value", str);
+					infoHbox.appendChild(comma);
-					label.setAttribute("crop", "end");
+				}
-					infoHbox.appendChild(label);
+				
+				if (typeof node === "object") {
+					// if this is a node, just insert it
 					infoHbox.appendChild(node);
-					str = "";
+				}
-				} else {
+				else {
-					str += node;
+					// if this is a piece of text, insert <span> with it
+					let wrapper = document.createElement("span");
+					wrapper.textContent = node;
+					infoHbox.appendChild(wrapper);
 				}
 			}
-
-			if(nodes.length && (!str.length || str[str.length-1] !== ".")) str += ".";	
 		}
-		
+		// if there is no period in the end, insert it
-		var label = document.createXULElement("label");
+		if (infoHbox.textContent.length && infoHbox.textContent[infoHbox.textContent.length - 1] !== ".") {
-		label.setAttribute("value", str);
+			let period = document.createElement("span");
-		label.setAttribute("crop", "end");
+			period.textContent = ".";
-		label.setAttribute("flex", "1");
+			infoHbox.appendChild(period);
-		infoHbox.appendChild(label);
+		}
 	}
 	
 	/**
@@ -1029,6 +1030,13 @@ var Zotero_QuickFormat = new function () {
 		var infoNode = document.createXULElement("hbox");
 		infoNode.setAttribute("class", "citation-dialog info");
 		_buildItemDescription(item, infoNode);
+		// if description is empty, insert an empty placeholder to ensure identical row heights
+		if (!infoNode.textContent.length) {
+			let placeholder = document.createElement("span");
+			placeholder.textContent = " ";
+			placeholder.style.hidden = true;
+			infoNode.appendChild(placeholder);
+		}
 		
 		// add to rich list item
 		var rll = document.createXULElement("richlistitem");
@@ -1550,9 +1558,6 @@ var Zotero_QuickFormat = new function () {
 		document.getElementById("citation-properties-title").textContent = item.getDisplayTitle();
 		while(panelInfo.hasChildNodes()) panelInfo.removeChild(panelInfo.firstChild);
 		_buildItemDescription(item, panelInfo);
-		// Aria label for the info panel to be visible to the screen readers
-		let description = Array.from(panelInfo.childNodes).map(label => label.value).join(".");
-		panelInfo.setAttribute('aria-label', description);
 		panelLibraryLink.hidden = !item.id;
 		if(item.id) {
 			var libraryName = item.libraryID ? Zotero.Libraries.getName(item.libraryID)

chrome/content/zotero/integration/quickFormat.xhtml

@@ -93,7 +93,7 @@
 		   role="dialog">
 		<vbox flex="1">
 			<description id="citation-properties-title" tabindex="1"/>
-			<hbox id="citation-properties-info" tabindex="2"/>
+			<description id="citation-properties-info" tabindex="2"/>
 		</vbox>
 		<html:div id="citation-properties-grid">
 			<menulist id="locator-label" sizetopopup="none" tabindex="3"

chrome/skin/default/zotero/integration.css

@@ -127,7 +127,7 @@
 	margin-inline: 2px;
 }
 
-.citation-dialog span {
+span.zotero-bubble-input {
 	/* Same left padding as for input */
 	padding-left: 4px;
 	/* Make last white space be counted during width calculations */
@@ -231,6 +231,10 @@
 	font-size: 12px;
 }
 
+.citation-dialog.item span {
+	white-space: pre;
+}
+
 .citation-dialog.item:not(:last-child), .citation-dialog.separator:not(:last-child) {
 	border-style: solid;
 	border-width: 0 0 1px 0;
@@ -299,32 +303,24 @@ richlistitem[selected="true"] {
 
 #citation-properties:is(panel, menupopup)::part(content) {
 	padding: 10px;
+	max-width: 300px;
 }
 
 #citation-properties #suppress-author {
 	-moz-user-focus: normal;
 }
 
+#citation-properties-title, #citation-properties-info {
+	padding-left: 0;
+	padding-right: 0;
+	margin-left: 0;
+	margin-right: 0;
+}
+
 #citation-properties-title {
-	padding-left: 0;
-	padding-right: 0;
-	margin-left: 0;
-	margin-right: 0;
-	max-width: 300px;
 	font-weight: 600;
 }
 
-#citation-properties-info > label {
-	padding-left: 0;
-	padding-right: 0;
-	margin-left: 0;
-	margin-right: 0;
-}
-
-#citation-properties-info {
-	margin-bottom: 3px;
-}
-
 #citation-properties-grid {
 	display: grid;
 	align-items: center;