Show native menus from toolbar

chrome/content/zotero/elements/menuToolbarbutton.js

@@ -27,9 +27,33 @@
 
 {
 	/**
-	 * Extends MozToolbarbutton to use our own dropmarker image.
+	 * Extends MozToolbarbutton to use our own dropmarker image and native menus.
 	 */
-	class ToolbarbuttonDropmarker extends customElements.get('toolbarbutton') {
+	class MenuToolbarbutton extends customElements.get('toolbarbutton') {
+		constructor() {
+			super();
+			this.addEventListener('mousedown', (event) => {
+				let popup = this.querySelector(':scope > menupopup');
+				if (popup && this.getAttribute('nonnativepopup') != 'true') {
+					event.preventDefault();
+
+					let rect = this.getBoundingClientRect();
+					popup.openPopupAtScreen(
+						window.screenX + rect.left,
+						window.screenY + rect.bottom,
+						true
+					);
+					this.setAttribute('open', true);
+
+					popup.addEventListener('popuphiding', (event) => {
+						if (event.target == popup) {
+							this.setAttribute('open', false);
+						}
+					}, { once: true });
+				}
+			});
+		}
+
 		static get dropmarkerFragment() {
 			let frag = document.importNode(
 				MozXULElement.parseXULToFragment(`
@@ -42,7 +66,7 @@
 		}
 	}
 
-	customElements.define("toolbarbutton-dropmarker", ToolbarbuttonDropmarker, {
+	customElements.define("menu-toolbarbutton", MenuToolbarbutton, {
 		extends: "toolbarbutton",
 	});
 }

chrome/content/zotero/zoteroPane.xhtml

@@ -83,7 +83,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/tagsBox.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/relatedBox.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/attachmentBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/toolbarbuttonDropmarker.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/menuToolbarbutton.js", this);
 
 		Services.scriptloader.loadSubScript("chrome://zotero/content/tabs.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/zoteroPane.js", this);
@@ -759,7 +759,7 @@
 								<hbox id="zotero-collections-toolbar" align="center">
 									<toolbarbutton id="zotero-tb-collection-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newCollection.label;" command="cmd_zotero_newCollection"/>
 									<toolbarbutton
-											is="toolbarbutton-dropmarker"
+											is="menu-toolbarbutton"
 											id="zotero-tb-library-add-menu"
 											class="zotero-tb-button"
 											tooltiptext="&zotero.toolbar.newLibrary.label;"
@@ -781,7 +781,7 @@
 								
 								<hbox id="zotero-items-toolbar" align="center">
 									<toolbarbutton
-											is="toolbarbutton-dropmarker"
+											is="menu-toolbarbutton"
 											id="zotero-tb-add"
 											class="zotero-tb-button"
 											tooltiptext="&zotero.toolbar.newItem.label;"
@@ -831,7 +831,7 @@
 									
 									<!--<toolbarbutton id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.note.standalone;" oncommand="ZoteroPane_Local.newNote(event.shiftKey);"/>-->
 									<toolbarbutton
-											is="toolbarbutton-dropmarker"
+											is="menu-toolbarbutton"
 											id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newNote;"
 											type="menu"
 											wantdropmarker="true"
@@ -842,7 +842,7 @@
 										</menupopup>
 									</toolbarbutton>
 									<toolbarbutton
-											is="toolbarbutton-dropmarker"
+											is="menu-toolbarbutton"
 											id="zotero-tb-attachment-add"
 											class="zotero-tb-button"
 											tooltiptext="&zotero.items.menu.attach;"
@@ -868,7 +868,7 @@
 								<hbox id="zotero-item-toolbar" flex="1" align="center" tooltip="html-tooltip">
 									<hbox align="center" pack="start" flex="1">
 										<toolbarbutton
-												is="toolbarbutton-dropmarker"
+												is="menu-toolbarbutton"
 												id="zotero-tb-locate"
 												class="zotero-tb-button"
 												tooltiptext="&zotero.toolbar.openURL.label;"