itembox: switch creator mode button (#4535)

- added button to switch mode to creator rows
- removed that option from options menu
- extra tweak to avoid cursor flickering during re-render after
clicking on the button
- increased itemPane min-width to 320px

Fixes: #3959

chrome/content/zotero/elements/itemBox.js

@@ -52,6 +52,7 @@
 			this._selectField = null;
 			this._selectFieldSelection = null;
 			this._addCreatorRow = false;
+			this._switchedModeOfCreator = null;
 		}
 
 		get content() {
@@ -64,7 +65,6 @@
 								<menupopup id="zotero-creator-transform-menu">
 									<menuitem id="creator-transform-swap-names" label="&zotero.item.creatorTransform.nameSwap;"/>
 									<menuitem id="creator-transform-capitalize" label="&zotero.item.creatorTransform.fixCase;"/>
-									<menuitem id="creator-transform-switch"/>
 									<menuseparator id="zotero-creator-move-sep"/>
 									<menuitem id="zotero-creator-move-to-top" class="zotero-creator-move" data-l10n-id="item-creator-moveToTop"/>
 									<menuitem id="zotero-creator-move-up" class="zotero-creator-move" data-l10n-id="item-creator-moveUp"/>
@@ -147,8 +147,6 @@
 				this._id('zotero-creator-move-to-top').setAttribute('hidden', hideMoveToTop);
 				this._id('zotero-creator-move-up').setAttribute('hidden', hideMoveUp);
 				this._id('zotero-creator-move-down').setAttribute('hidden', hideMoveDown);
-				var creatorNameBox = row.getElementsByClassName("creator-name-box")[0];
-				this._id('creator-transform-switch').setAttribute("label", creatorNameBox.getAttribute("switch-mode-label"));
 			});
 
 			// Ensure no button is forced to stay visible once the menu is closed
@@ -187,13 +185,6 @@
 					}
 					this.moveCreator(index, dir);
 				}
-				else if (event.explicitOriginalTarget.id == "creator-transform-switch") {
-					// Switch creator field mode action
-					var creatorNameBox = row.getElementsByClassName("creator-name-box")[0];
-					var lastName = creatorNameBox.firstChild;
-					let fieldMode = parseInt(lastName.getAttribute("fieldMode"));
-					this.switchCreatorMode(row, fieldMode == 1 ? 0 : 1, false, true, index);
-				}
 			});
 
 			this._id('creator-transform-swap-names').addEventListener('command',
@@ -1047,6 +1038,18 @@
 			}
 			
 			rowData.appendChild(firstlast);
+
+			// Switch creator type button
+			var switchCreatorModeButton = document.createXULElement('toolbarbutton');
+			switchCreatorModeButton.setAttribute("class", "zotero-clicky zotero-clicky-switch-type show-on-hover no-display");
+			switchCreatorModeButton.setAttribute('id', `creator-${rowIndex}-switchType`);
+			switchCreatorModeButton.addEventListener("command", () => {
+				// Record that this creator is being updated. It is used to avoid flickering during re-render
+				this._switchedModeOfCreator = rowIndex;
+				let fieldMode = parseInt(lastNameElem.getAttribute("fieldMode"));
+				this.switchCreatorMode(row, fieldMode == 1 ? 0 : 1, false, true, rowIndex);
+			});
+			rowData.appendChild(switchCreatorModeButton);
 			
 			// Minus (-) button
 			var removeButton = document.createXULElement('toolbarbutton');
@@ -1094,7 +1097,7 @@
 				this.handlePopupOpening(e, menupopup);
 			};
 			rowData.appendChild(optionsButton);
-			
+
 			if (this.editable) {
 				optionsButton.addEventListener("command", triggerPopup);
 				rowData.oncontextmenu = triggerPopup;
@@ -1105,6 +1108,17 @@
 			// Delete existing unsaved creator row if any
 			this.removeUnsavedCreatorRow();
 
+			// If this creator row's type was just switched, remove ".show-on-hover" to avoid buttons appearing
+			// and then immediately disappearing when the css rule kicks in if the row is hovered.
+			// Instead, mark it with ".show-without-hover" to just display buttons and add "show-on-hover" back
+			// on the next tick, which looks less jumpy.
+			if (this._switchedModeOfCreator == rowIndex) {
+				this._swapClasses([...rowData.querySelectorAll(".show-on-hover")], "show-on-hover", "show-without-hover");
+				this._switchedModeOfCreator = null;
+				setTimeout(() => {
+					this._swapClasses([...rowData.querySelectorAll(".show-without-hover")], "show-without-hover", "show-on-hover");
+				});
+			}
 			let row = this.addDynamicRow(rowLabel, rowData, before);
 
 			this._ensureButtonsFocusable();
@@ -1243,12 +1257,15 @@
 		switchCreatorMode(row, fieldMode, initial, updatePref, rowIndex) {
 			// Change if button position changes
 			var creatorNameBox = row.querySelector(".creator-name-box");
+			let switchTypeBtn = row.querySelector(".zotero-clicky-switch-type");
 			var lastName = creatorNameBox.firstChild;
 			var firstName = creatorNameBox.lastChild;
 
 			// Switch to single-field mode
 			if (fieldMode == 1) {
 				creatorNameBox.setAttribute('switch-mode-label', Zotero.getString('pane.item.switchFieldMode.two'));
+				switchTypeBtn.setAttribute("type", "single");
+				switchTypeBtn.setAttribute("tooltiptext", Zotero.getString('pane.item.switchFieldMode.two'));
 				lastName.setAttribute('fieldMode', '1');
 				lastName.placeholder = this._defaultFullName;
 				delete lastName.style.width;
@@ -1270,6 +1287,8 @@
 			// Switch to two-field mode
 			else {
 				creatorNameBox.setAttribute('switch-mode-label', Zotero.getString('pane.item.switchFieldMode.one'));
+				switchTypeBtn.setAttribute("type", "dual");
+				switchTypeBtn.setAttribute("tooltiptext", Zotero.getString('pane.item.switchFieldMode.one'));
 				lastName.setAttribute('fieldMode', '0');
 
 				lastName.placeholder = this._defaultLastName;
@@ -2336,6 +2355,13 @@
 				popup.openPopup(event.target);
 			}
 		}
+
+		_swapClasses(nodes, classToRemove, classToAdd) {
+			for (let node of nodes) {
+				node.classList.add(classToAdd);
+				node.classList.remove(classToRemove);
+			}
+		}
 		
 		/**
 		 * Available handlers:

scss/abstracts/_variables.scss

@@ -110,8 +110,8 @@ $tagColorsLookup: (
 $min-width-tabs-deck: 570px;
 $min-width-collections-pane: 200px;
 $min-width-items-pane: 370px;
-$min-width-item-pane: 300px;
+$min-width-item-pane: 320px;
-$min-width-context-pane: 300px;
+$min-width-context-pane: 320px;
 $width-sidenav: 37px;
 
 $height-toolbar: 41px;

scss/components/_clicky.scss

@@ -64,6 +64,16 @@
 	color: var(--fill-secondary);
 }
 
+.zotero-clicky-switch-type[type=single] {
+	@include svgicon-menu("input-single", "universal", "16");
+	margin: 0;
+}
+
+.zotero-clicky-switch-type[type=dual] {
+	@include svgicon-menu("input-dual", "universal", "16");
+	margin: 0;
+}
+
 .zotero-clicky-preview-control {
 	@include svgicon-menu("preview-show", "universal", "16");
 	&[data-show-preview] {

scss/elements/_itemBox.scss

@@ -113,9 +113,7 @@ item-box {
 	}
 
 	// Some spacing between creator buttons
-	.creator-type-value > .zotero-clicky-plus,
+	.creator-type-value > .zotero-clicky {
-	.creator-type-value > .zotero-clicky-minus,
-	.creator-type-value > .zotero-clicky-options {
 		margin-left: 1px; 
 	}