From 5cc6631fd3b926dc557e0839ae5dbe6a27e52d3b Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Fri, 7 Jun 2024 12:37:54 +0800
Subject: [PATCH] Improve merge pane (#4200)

resolve: #4142
---
 chrome/content/zotero/elements/duplicatesMergePane.js | 11 ++++++-----
 chrome/content/zotero/elements/itemBox.js             | 10 +++++++---
 chrome/content/zotero/elements/itemPane.js            |  1 +
 scss/elements/_duplicatesMergePane.scss               | 10 +++++-----
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/chrome/content/zotero/elements/duplicatesMergePane.js b/chrome/content/zotero/elements/duplicatesMergePane.js
index c3cf509e0c..c6de738860 100644
--- a/chrome/content/zotero/elements/duplicatesMergePane.js
+++ b/chrome/content/zotero/elements/duplicatesMergePane.js
@@ -37,12 +37,13 @@
 				</hbox>
 			</groupbox>
 			
-			<groupbox flex="1">
-				<description id="zotero-duplicates-merge-field-select">&zotero.duplicatesMerge.fieldSelect;</description>
-				<vbox id="zotero-duplicates-merge-item-box-container" flex="1">
-					<item-box id="zotero-duplicates-merge-item-box" flex="1"/>
-				</vbox>
+			<groupbox id="zotero-duplicates-merge-field-select">
+				<description>&zotero.duplicatesMerge.fieldSelect;</description>
 			</groupbox>
+
+			<vbox id="zotero-duplicates-merge-item-box-container">
+				<item-box id="zotero-duplicates-merge-item-box"/>
+			</vbox>
 		`, ['chrome://zotero/locale/zotero.dtd']);
 
 		init() {
diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index 1c458a2ec5..78622db987 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/chrome/content/zotero/elements/itemBox.js
@@ -669,15 +669,15 @@
 
 				this.addDynamicRow(rowLabel, rowData);
 				
+				let button, popup;
 				// In field merge mode, add a button to switch field versions
 				if (this.mode == 'fieldmerge' && typeof this._fieldAlternatives[fieldName] != 'undefined') {
-					var button = document.createXULElement("toolbarbutton");
+					button = document.createXULElement("toolbarbutton");
 					button.className = 'zotero-field-version-button zotero-clicky-merge';
-					button.setAttribute('type', 'menu');
 					let fieldLocalName = rowLabel.querySelector("label")?.textContent;
 					document.l10n.setAttributes(button, 'itembox-button-merge', { field: fieldLocalName || "" });
 					
-					var popup = button.appendChild(document.createXULElement("menupopup"));
+					popup = button.appendChild(document.createXULElement("menupopup"));
 					
 					for (let v of this._fieldAlternatives[fieldName]) {
 						let menuitem = document.createXULElement("menuitem");
@@ -697,6 +697,10 @@
 						});
 						popup.appendChild(menuitem);
 					}
+
+					button.addEventListener("click", (e) => {
+						this.handlePopupOpening(e, popup);
+					});
 					
 					rowData.appendChild(button);
 				}
diff --git a/chrome/content/zotero/elements/itemPane.js b/chrome/content/zotero/elements/itemPane.js
index 48df576bcb..445440800d 100644
--- a/chrome/content/zotero/elements/itemPane.js
+++ b/chrome/content/zotero/elements/itemPane.js
@@ -552,6 +552,7 @@
 				}
 				case "duplicates": {
 					this._deck.selectedIndex = 3;
+					this.removeAttribute("collapsed");
 					break;
 				}
 			}
diff --git a/scss/elements/_duplicatesMergePane.scss b/scss/elements/_duplicatesMergePane.scss
index 9788bac92b..b3af6cded1 100644
--- a/scss/elements/_duplicatesMergePane.scss
+++ b/scss/elements/_duplicatesMergePane.scss
@@ -3,6 +3,7 @@ duplicates-merge-pane {
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
+		scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
 	}
 
 	padding-top: 9px;
@@ -19,15 +20,14 @@ duplicates-merge-pane {
 		}
 	}
 
-	#zotero-duplicates-merge-field-select {
-		margin-bottom: 9px;
-	}
-
 	#zotero-duplicates-merge-item-box-container {
 		flex: 1;
 		padding-inline: 8px;
 		overflow-y: scroll;
-		border-top: var(--material-border-quinary);
+
+		#zotero-duplicates-merge-item-box {
+			border-top: var(--material-border-quinary);
+		}
 
 		collapsible-section > .head {
 			display: none;