fx-compat: Fix feed button appearance/overflow behavior (#3114)

chrome/content/zotero-platform/mac/itemPane.css

@@ -1,13 +1,12 @@
+#zotero-feed-item-toggleRead-button {
+	margin: 5px 0 3px 6px;
+}
+
 #zotero-feed-item-addTo-button {
 	margin: 5px 6px 3px;
 	padding-left: 8px;
 }
 
-#zotero-feed-item-addTo-button button {
-	margin: 0;
-	-moz-appearance: none;
-}
-
 /* Show duplicates date list item as selected even when not focused
    (default behavior on other platforms) */
 #zotero-duplicates-merge-original-date:not(:focus) > richlistitem[selected="true"] {

chrome/content/zotero-platform/unix/itemPane.css

@@ -1,11 +1,3 @@
-/* Some distros have icons disabled by default at the OS level and
- * mozilla is a respectful gent.
- */
-#zotero-feed-item-addTo-button .button-icon {
-	display: block;
-	margin-right: 5px
-}
-
 /* Set to hidden in user-agent css for some reason. */
 #zotero-feed-item-addTo-button .menu-iconic-left {
 	visibility: visible;

chrome/content/zotero/elements/splitMenuButton.js

@@ -27,17 +27,15 @@
 
 {
 	/**
-	 * Extends MozButton to provide a split menubutton with a clickable left side and a dropmarker that opens a menu.
+	 * A split menubutton with a clickable left side and a dropmarker that opens a menu.
 	 */
-	class SplitMenuButton extends customElements.get('button') {
+	class SplitMenuButton extends HTMLButtonElement {
+		_image = null;
+		_label = null;
+		
 		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
@@ -58,39 +56,44 @@
 		}
 
 		connectedCallback() {
-			if (this.delayConnectedCallback() || this._hasConnected) {
-				return;
-			}
-			super.connectedCallback();
-
-			this.querySelector('[anonid="button-box"]').after(this.constructor.dropmarkerFragment);
+			this.append(this.constructor.contentFragment);
 		}
 
-		static get dropmarkerFragment() {
+		get image() {
+			return this.querySelector('[anonid="button-image"]').src;
+		}
+
+		set image(value) {
+			this.querySelector('[anonid="button-image"]').src = value;
+		}
+
+		get label() {
+			return this.querySelector('[anonid="button-text"]').textContent;
+		}
+
+		set label(value) {
+			this.querySelector('[anonid="button-text"]').textContent = value;
+		}
+		
+		static get contentFragment() {
 			// 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(`
-					<vbox>
-						<box anonid="dropmarker-separator"/>
-					</vbox>
-					<hbox align="center" anonid="dropmarker-box">
+					<html:div anonid="button-image-and-text-box">
+						<image anonid="button-image"/>
+						<html:span anonid="button-text"/>
+					</html:div>
+					<html:div anonid="dropmarker-separator"/>
+					<html:div anonid="dropmarker-box">
 						<image src="chrome://zotero/skin/searchbar-dropmarker${hiDPISuffix}.png" width="7" height="4" class="split-menu-button-dropmarker"/>
-					</hbox>
+					</html:div>
 				`),
 				true
 			);
 			Object.defineProperty(this, "dropmarkerFragment", { value: frag });
 			return frag;
 		}
-
-		_handleClick() {
-			super._handleClick();
-			let popup = this.querySelector(':scope > menupopup');
-			if (!this.disabled && (!popup || popup.state == 'closed')) {
-				this.doCommand();
-			}
-		}
 	}
 
 	customElements.define("split-menu-button", SplitMenuButton, {

chrome/content/zotero/itemPane.js

@@ -292,7 +292,7 @@ var ZoteroItemPane = new function() {
 	this.setTranslateButton = function() {
 		var label = Zotero.getString('pane.item.addTo', _translationTarget.name);
 		var elem = document.getElementById('zotero-feed-item-addTo-button');
-		elem.setAttribute('label', label);
+		elem.label = label;
 
 		var key = Zotero.Keys.getKeyForCommand('saveToZotero');
 		
@@ -300,8 +300,8 @@ var ZoteroItemPane = new function() {
 			+ (Zotero.rtl ? ' \u202B' : ' ') + '(' 
 			+ (Zotero.isMac ? '⇧⌘' : Zotero.getString('general.keys.ctrlShift'))
 			+ key + ')';
-		elem.setAttribute('tooltiptext', tooltip);
-		elem.setAttribute('image', _translationTarget.treeViewImage);
+		elem.title = tooltip;
+		elem.image = _translationTarget.treeViewImage;
 	};
 	
 
@@ -315,11 +315,11 @@ var ZoteroItemPane = new function() {
 	this.setReadLabel = function (isRead) {
 		var elem = document.getElementById('zotero-feed-item-toggleRead-button');
 		var label = Zotero.getString('pane.item.' + (isRead ? 'markAsUnread' : 'markAsRead'));
-		elem.setAttribute('label', label);
+		elem.textContent = label;
 
 		var key = Zotero.Keys.getKeyForCommand('toggleRead');
 		var tooltip = label + (Zotero.rtl ? ' \u202B' : ' ') + '(' + key + ')'
-		elem.setAttribute('tooltiptext', tooltip);
+		elem.title = tooltip;
 	};
 }   
 

chrome/content/zotero/xpcom/utilities_internal.js

@@ -2174,7 +2174,9 @@ Zotero.Utilities.Internal = {
 	 * @return {Boolean} If a <menupopup> child was found and opened
 	 */
 	showNativeElementPopup(element) {
-		let popup = element.querySelector(':scope > menupopup');
+		let popup = element.hasAttribute('popup')
+			? element.getRootNode().getElementById(element.getAttribute('popup'))
+			: element.querySelector(':scope > menupopup');
 		if (popup) {
 			if (Zotero.isMac) {
 				let rect = element.getBoundingClientRect();

chrome/content/zotero/zoteroPane.xhtml

@@ -1041,12 +1041,12 @@
 										
 										<!-- Feed -->
 										<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 is="split-menu-button" id="zotero-feed-item-addTo-button"
-												oncommand="ZoteroItemPane.translateSelectedItems()">
-												<menupopup id="zotero-item-addTo-menu" onpopupshowing="ZoteroItemPane.buildTranslateSelectContextMenu(event);"/>
-											</button>
+											<html:button id="zotero-feed-item-toggleRead-button"
+												onclick="ZoteroPane_Local.toggleSelectedItemsRead();"/>
+											<html:button is="split-menu-button" id="zotero-feed-item-addTo-button"
+												onclick="ZoteroItemPane.translateSelectedItems()"
+												popup="zotero-item-addTo-menu"/>
+											<menupopup id="zotero-item-addTo-menu" onpopupshowing="ZoteroItemPane.buildTranslateSelectContextMenu(event);"/>
 										</hbox>
 										
 										<!-- Commons -->

chrome/skin/default/zotero/itemPane.css

@@ -85,28 +85,12 @@
 }
 
 #zotero-feed-item-toggleRead-button {
-	/*
-	DEBUG: `overflow: hidden` breaks clicking in fx102, but without it longer localized strings
-	overflow the button at narrow pane widths
-	
-	https://github.com/zotero/zotero/issues/3110
-	
 	overflow: hidden;
+	white-space: nowrap;
 	text-overflow: ellipsis;
 	max-width: 150px;
-	*/
 }
 
 #zotero-feed-item-addTo-button {
 	max-width: 250px;
 }
-
-#zotero-feed-item-addTo-button button {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#zotero-feed-item-addTo-button .button-icon {
-	margin-inline-end: 5px;
-	height: 16px;
-}

chrome/skin/default/zotero/overlay.css

@@ -716,15 +716,42 @@
 	color: HighlightText;
 }
 
-.split-menu-button, .split-menu-button [anonid="dropmarker-box"] {
-	/* Hide the dropmarker if the button overflows */
+.split-menu-button {
+	display: flex;
+	align-items: center;
+	padding-right: 0;
+}
+
+.split-menu-button [anonid="button-image-and-text-box"] {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.split-menu-button [anonid="button-image"] {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+	margin-inline-end: 8px;
+}
+
+.split-menu-button [anonid="button-text"] {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.split-menu-button [anonid="dropmarker-box"] {
+	display: flex;
+	align-items: center;
 	overflow: hidden;
 }
 
 .split-menu-button [anonid="dropmarker-separator"] {
-	-moz-box-flex: 1;
+	height: calc(100% - 5px);
 	border-inline-start: 1px solid #aaa;
-	margin: 5px 2px 5px 4px;
+	margin: 0 2px 0 4px;
 }
 
 .split-menu-button .split-menu-button-dropmarker {

test/tests/itemPaneTest.js

@@ -354,9 +354,9 @@ describe("Item pane", function () {
 				
 				let button = doc.getElementById('zotero-feed-item-toggleRead-button');
 				
-				assert.equal(button.getAttribute('label'), Zotero.getString('pane.item.markAsUnread'));
+				assert.equal(button.textContent, Zotero.getString('pane.item.markAsUnread'));
 				yield item.toggleRead(false);
-				assert.equal(button.getAttribute('label'), Zotero.getString('pane.item.markAsRead'));
+				assert.equal(button.textContent, Zotero.getString('pane.item.markAsRead'));
 			});
 		});
 	});