From 53ace4876e90d1e2301cae3b99b31610ae093cbc Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Tue, 22 Nov 2022 20:42:53 -0500
Subject: [PATCH] fx-compat: Fix feed Add To button

And make accessible by keyboard
---
 .../zotero/elements/menuToolbarbutton.js      | 21 +---
 .../zotero/elements/splitMenuButton.js        | 95 +++++++++++++++++++
 .../zotero/xpcom/utilities_internal.js        | 33 +++++++
 chrome/content/zotero/zoteroPane.xhtml        |  3 +-
 chrome/skin/default/zotero/itemPane.css       |  2 +-
 chrome/skin/default/zotero/overlay.css        |  9 ++
 6 files changed, 142 insertions(+), 21 deletions(-)
 create mode 100644 chrome/content/zotero/elements/splitMenuButton.js

diff --git a/chrome/content/zotero/elements/menuToolbarbutton.js b/chrome/content/zotero/elements/menuToolbarbutton.js
index a419257669..4f8b7b2307 100644
--- a/chrome/content/zotero/elements/menuToolbarbutton.js
+++ b/chrome/content/zotero/elements/menuToolbarbutton.js
@@ -33,26 +33,9 @@
 		constructor() {
 			super();
 			this.addEventListener('mousedown', (event) => {
-				let popup = this.querySelector(':scope > menupopup');
-				if (popup && this.getAttribute('nonnativepopup') != 'true') {
+				if (this.getAttribute('nonnativepopup') != 'true'
+						&& Zotero.Utilities.Internal.showNativeElementPopup(this)) {
 					event.preventDefault();
-
-					let rect = this.getBoundingClientRect();
-					let dir = getComputedStyle(this).direction;
-					popup.openPopupAtScreen(
-						window.screenX + (dir == 'rtl' ? rect.right : rect.left),
-						window.screenY + rect.bottom,
-						true
-					);
-					this.setAttribute('open', true);
-
-					let handler = (event) => {
-						if (event.target == popup) {
-							this.setAttribute('open', false);
-							popup.removeEventListener('popuphiding', handler);
-						}
-					};
-					popup.addEventListener('popuphiding', handler);
 				}
 			});
 		}
diff --git a/chrome/content/zotero/elements/splitMenuButton.js b/chrome/content/zotero/elements/splitMenuButton.js
new file mode 100644
index 0000000000..1159d9db3e
--- /dev/null
+++ b/chrome/content/zotero/elements/splitMenuButton.js
@@ -0,0 +1,95 @@
+/*
+	***** BEGIN LICENSE BLOCK *****
+	
+	Copyright © 2022 Corporation for Digital Scholarship
+					 Vienna, Virginia, USA
+					 https://www.zotero.org
+	
+	This file is part of Zotero.
+	
+	Zotero is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+	
+	Zotero is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+	
+	You should have received a copy of the GNU Affero General Public License
+	along with Zotero.  If not, see <http://www.gnu.org/licenses/>.
+	
+	***** END LICENSE BLOCK *****
+*/
+
+"use strict";
+
+{
+	/**
+	 * Extends MozButton to provide a split menubutton with a clickable left side and a dropmarker that opens a menu.
+	 */
+	class SplitMenuButton extends customElements.get('button') {
+		constructor() {
+			super();
+
+			// Just in case, make sure this button does NOT appear as a standard <button type="menu">
+			// We don't want the entire button to open the menu and we don't want the standard dropmarker
+			this.removeAttribute('type');
+			
+			// For easier CSS targeting
+			this.classList.add('split-menu-button');
+
+			// Pointer events don't reach the button's children, so check mousedown positions manually and open
+			// the popup if over the end side of the button
+			this.addEventListener('mousedown', (event) => {
+				let rect = this.querySelector('[anonid="dropmarker-box"]').getBoundingClientRect();
+				if (event.x >= rect.left && event.x <= rect.right
+						&& Zotero.Utilities.Internal.showNativeElementPopup(this)) {
+					event.preventDefault();
+				}
+			});
+			
+			this.addEventListener('keydown', (event) => {
+				if (event.key == 'ArrowDown' && Zotero.Utilities.Internal.showNativeElementPopup(this)) {
+					event.preventDefault();
+				}
+			});
+		}
+
+		connectedCallback() {
+			if (this.delayConnectedCallback() || this._hasConnected) {
+				return;
+			}
+			super.connectedCallback();
+
+			this.querySelector('[anonid="button-box"]').after(this.constructor.dropmarkerFragment);
+		}
+
+		static get dropmarkerFragment() {
+			// Zotero.hiDPI[Suffix] may not have been initialized yet, so calculate it ourselves
+			let hiDPISuffix = window.devicePixelRatio > 1 ? '@2x' : '';
+			let frag = document.importNode(
+				MozXULElement.parseXULToFragment(`
+					<hbox align="center" anonid="dropmarker-box">
+						<image src="chrome://zotero/skin/searchbar-dropmarker${hiDPISuffix}.png" width="7" height="4" class="split-menu-button-dropmarker"/>
+					</hbox>
+				`),
+				true
+			);
+			Object.defineProperty(this, "dropmarkerFragment", { value: frag });
+			return frag;
+		}
+
+		_handleClick() {
+			super._handleClick();
+			if (!this.disabled) {
+				this.doCommand();
+			}
+		}
+	}
+
+	customElements.define("split-menu-button", SplitMenuButton, {
+		extends: "button",
+	});
+}
diff --git a/chrome/content/zotero/xpcom/utilities_internal.js b/chrome/content/zotero/xpcom/utilities_internal.js
index 2ca6335bfa..4342058b44 100644
--- a/chrome/content/zotero/xpcom/utilities_internal.js
+++ b/chrome/content/zotero/xpcom/utilities_internal.js
@@ -2339,6 +2339,39 @@ Zotero.Utilities.Internal = {
 			}
 		}
 		return html;
+	},
+
+	/**
+	 * Open an element's <menupopup> child as a native context menu.
+	 *
+	 * @param {XULElement} element
+	 * @return {Boolean} If a <menupopup> child was found and opened
+	 */
+	showNativeElementPopup(element) {
+		let popup = element.querySelector(':scope > menupopup');
+		if (popup) {
+			let rect = element.getBoundingClientRect();
+			let win = element.ownerDocument.defaultView;
+			let dir = win.getComputedStyle(element).direction;
+			popup.openPopupAtScreen(
+				win.screenX + (dir == 'rtl' ? rect.right : rect.left),
+				win.screenY + rect.bottom,
+				true
+			);
+			element.setAttribute('open', true);
+
+			let handler = (event) => {
+				if (event.target == popup) {
+					element.setAttribute('open', false);
+					popup.removeEventListener('popuphiding', handler);
+				}
+			};
+			popup.addEventListener('popuphiding', handler);
+			
+			return true;
+		}
+		
+		return false;
 	}
 }
 
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 6e2284139c..b80c4d9e43 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -88,6 +88,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/attachmentBox.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/menuToolbarbutton.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/quickSearchTextbox.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/splitMenuButton.js", this);
 
 		Services.scriptloader.loadSubScript("chrome://zotero/content/tabs.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/zoteroPane.js", this);
@@ -1054,7 +1055,7 @@
 										<hbox id="zotero-item-pane-top-buttons-feed" class="zotero-item-pane-top-buttons" hidden="true">
 											<button id="zotero-feed-item-toggleRead-button"
 												oncommand="ZoteroPane_Local.toggleSelectedItemsRead();"/>
-											<button id="zotero-feed-item-addTo-button" type="menu-button"
+											<button is="split-menu-button" id="zotero-feed-item-addTo-button"
 												oncommand="ZoteroItemPane.translateSelectedItems()">
 												<menupopup id="zotero-item-addTo-menu" onpopupshowing="ZoteroItemPane.buildTranslateSelectContextMenu(event);"/>
 											</button>
diff --git a/chrome/skin/default/zotero/itemPane.css b/chrome/skin/default/zotero/itemPane.css
index cd45fc4292..1478649753 100644
--- a/chrome/skin/default/zotero/itemPane.css
+++ b/chrome/skin/default/zotero/itemPane.css
@@ -100,6 +100,6 @@
 }
 
 #zotero-feed-item-addTo-button .button-icon {
-	margin-right: 5px;
+	margin-inline-end: 5px;
 	height: 16px;
 }
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 22511b8487..daba3fd480 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -703,6 +703,15 @@
 	color: HighlightText;
 }
 
+.split-menu-button, .split-menu-button [anonid="dropmarker-box"] {
+	/* Hide the dropmarker if the button overflows */
+	overflow: hidden;
+}
+
+.split-menu-button .split-menu-button-dropmarker {
+	margin-inline: 5px;
+}
+
 
 /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
 @media (min-resolution: 1.25dppx) {