From 7d68f75d03aba581340ac2f91e665087a5873e18 Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Tue, 9 Jan 2024 01:40:22 -0500
Subject: [PATCH] improve itemBox creator names visibility

- do not display creator buttons until hovered
- make last name have flex-grow priority over first name
- removed inline margins of rows
- removed extra padding from icons

This makes it more likely that the creator name will be displayed
fully without ellipsis until it is hovered. When the buttons are
displayed on focus or hover, the last name tries to remain
unellipsized as long as the first name is still visible after buttons
appear. If the first name is too short, both names will be ellipsized.
---
 chrome/content/zotero/elements/itemBox.js | 14 +++++++++-----
 scss/elements/_itemBox.scss               | 20 ++++++++++----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index a0277c26ae..6f642652d9 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/chrome/content/zotero/elements/itemBox.js
@@ -162,7 +162,8 @@
 			this.querySelector('#zotero-creator-transform-menu').addEventListener('popuphidden', (_) => {
 				let row = document.popupNode.closest('.meta-row');
 				for (let node of row.querySelectorAll('toolbarbutton.show-on-hover')) {
-					node.style.visibility = '';
+					node.style.removeProperty('visibility');
+					node.style.removeProperty('display');
 				}
 			});
 
@@ -1000,7 +1001,7 @@
 			
 			// Minus (-) button
 			var removeButton = document.createXULElement('toolbarbutton');
-			removeButton.setAttribute("class", "zotero-clicky zotero-clicky-minus show-on-hover");
+			removeButton.setAttribute("class", "zotero-clicky zotero-clicky-minus show-on-hover no-display");
 			removeButton.setAttribute('ztabindex', ++this._ztabindex);
 			removeButton.setAttribute('aria-label', Zotero.getString('general.delete'));
 			// If default first row, don't let user remove it
@@ -1016,7 +1017,7 @@
 			
 			// Plus (+) button
 			var addButton = document.createXULElement('toolbarbutton');
-			addButton.setAttribute("class", "zotero-clicky zotero-clicky-plus show-on-hover");
+			addButton.setAttribute("class", "zotero-clicky zotero-clicky-plus show-on-hover no-display");
 			addButton.setAttribute('ztabindex', ++this._ztabindex);
 			// If row isn't saved, don't let user add more
 			if (unsaved || !this.editable) {
@@ -1036,7 +1037,7 @@
 				optionsButton.style.visibility = "hidden";
 				this.disableButton(optionsButton);
 			}
-			optionsButton.className = "zotero-clicky zotero-clicky-options show-on-hover";
+			optionsButton.className = "zotero-clicky zotero-clicky-options show-on-hover no-display";
 			optionsButton.setAttribute('ztabindex', ++this._ztabindex);
 			optionsButton.setAttribute('data-l10n-id', "itembox-button-options");
 			let triggerPopup = (e) => {
@@ -2329,9 +2330,11 @@
 			
 			// Ensure the node is visible
 			next.style.visibility = "visible";
+			next.style.display = "block";
 			next.focus();
 			
-			next.style.visibility = "";
+			next.style.removeProperty("visibility");
+			next.style.removeProperty("display");
 			// 1) next.parentNode is always null for some reason
 			// 2) For some reason it's necessary to scroll to the next element when
 			// moving forward for the target element to be fully in view
@@ -2367,6 +2370,7 @@
 			let isRightClick = event.type == 'contextmenu';
 			if (!isRightClick) {
 				event.target.style.visibility = "visible";
+				event.target.style.display = "block";
 			}
 			// On click, we have x/y coordinates so use that
 			// On keyboard click, open it next to the target
diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss
index 01e313ee36..d4d02c7f1f 100644
--- a/scss/elements/_itemBox.scss
+++ b/scss/elements/_itemBox.scss
@@ -20,8 +20,6 @@ item-box {
 		display: grid;
 		grid-template-columns: subgrid;
 		grid-column: span 2;
-		padding-inline-start: 8px;
-		padding-inline-end: 8px;
 
 		.meta-data {
 			width: 0;
@@ -70,12 +68,7 @@ item-box {
 
 			// needed to have the outline appear on all platforms
 			-moz-appearance: none;
-
 			align-self: center;
-			// Make all buttons tigher to not stretch the rows
-			height: auto;
-			width: auto;
-			padding: 1px;
 		}
 	}
 
@@ -86,6 +79,9 @@ item-box {
 	// All icons that are by default hidden
 	#info-table .show-on-hover {
 		visibility: hidden;
+		&.no-display {
+			display: none;
+		}
 	}
 
 	.drag-hidden-creator {
@@ -96,6 +92,7 @@ item-box {
 	#info-table .meta-row:not(.noHover):hover .show-on-hover,
 	#info-table .meta-row:focus-within .show-on-hover {
         visibility: visible;
+		display: block;
     }
 
 	#item-type-menu {
@@ -173,9 +170,11 @@ item-box {
 		display: flex;
 	}
 
-	.creator-type-value > .zotero-clicky {
-		// Some spacing between creator buttons
-		margin-right: 2px; 
+	// Some spacing between creator buttons
+	.creator-type-value > .zotero-clicky-plus,
+	.creator-type-value > .zotero-clicky-minus,
+	.creator-type-value > .zotero-clicky-options {
+		margin-left: 1px; 
 	}
 
 	.creator-name-box {
@@ -188,6 +187,7 @@ item-box {
 		// Margin adjusted by inline padding to have 4px between first and last name
 		*[fieldMode="0"]:first-child {
 			margin-inline-end: calc(max(0px, 4px - var(--editable-text-padding-inline)));
+			flex-grow: 3; // last name should have priority to expand over first name
 		}
 		// Add comma when the last name is not focused
 		*[fieldMode="0"]:first-child {