From a8016b1b2f8dcd21e1c4591bcac4923383f3d910 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Mon, 18 Dec 2023 04:31:26 +0800
Subject: [PATCH] Fix MacOS non-native checkbox menu options should be indented
 even if no checkbox

---
 chrome/content/zotero/customElements.js | 18 ++++++++++++++++--
 scss/mac/_menupopup.scss                | 23 +++++++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/chrome/content/zotero/customElements.js b/chrome/content/zotero/customElements.js
index 3b482e0875..2bc164cca5 100644
--- a/chrome/content/zotero/customElements.js
+++ b/chrome/content/zotero/customElements.js
@@ -80,6 +80,12 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/annotation
 			if (!this._zoteroInitialized) {
 				this._zoteroInitialized = true;
 
+				// Following the implementation from https://searchfox.org/mozilla-esr102/source/toolkit/content/widgets/menupopup.js
+				let haveCheckableChild = this.querySelector(
+					":scope > menuitem:not([hidden]):is([type=checkbox],[type=radio])"
+				);
+				this.toggleAttribute("needsgutter", haveCheckableChild);
+
 				/**
 				 * Add fade animation to the popup
 				 * animate="false" will disable the animation
@@ -92,8 +98,16 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/annotation
 					this.setAttribute("animate", "open");
 				}
 
-				// Update animate attribute when the popup is shown
-				this.addEventListener("popupshowing", () => {
+				this.addEventListener("popupshowing", (e) => {
+					if (this !== e.target) {
+						return;
+					}
+					// Following the implementation from https://searchfox.org/mozilla-esr102/source/toolkit/content/widgets/menupopup.js
+					let haveCheckableChild = this.querySelector(
+						":scope > menuitem:not([hidden]):is([type=checkbox],[type=radio])"
+					);
+					this.toggleAttribute("needsgutter", haveCheckableChild);
+					// Update animate attribute when the popup is shown
 					if (this.getAttribute("animate") === "false") {
 						return;
 					}
diff --git a/scss/mac/_menupopup.scss b/scss/mac/_menupopup.scss
index c70565fe87..2dcab5c729 100644
--- a/scss/mac/_menupopup.scss
+++ b/scss/mac/_menupopup.scss
@@ -16,7 +16,7 @@ menupopup {
 			);
 			color: -moz-mac-menutextselect;
 		}
-		
+
 		&:is([checked="true"], [selected="true"]) {
 			appearance: none !important;
 			border-radius: 4px;
@@ -25,7 +25,7 @@ menupopup {
 				display: inline-block;
 				vertical-align: middle;
 				line-height: 0;
-				width: 15px;
+				width: 14px;
 				margin-inline-start: 0px !important;
 			}
 		}
@@ -34,6 +34,18 @@ menupopup {
 			appearance: auto;
 		}
 	}
+
+	&[needsgutter] {
+		menu, menuitem {
+			padding-left: 20px;
+
+			// Add padding here so that it won't look weird when the customElement.js is not yet loaded
+			&:is([checked="true"], [selected="true"]) {
+				padding-left: 6px;
+			}
+		}
+	}
+
 	menuseparator {
 		appearance: none;
 		margin-left: 15px;
@@ -42,6 +54,13 @@ menupopup {
 		padding-bottom: 0px;
 		@include light-dark(border-color, rgba(170, 170, 170, 0.5), rgba(100, 100, 100, 0.5));
 	}
+
+	.menu-right {
+		appearance: none;
+		@include svgicon-menu("chevron-8", "universal", "8");
+		rotate: -90deg;
+		margin-inline-end: 0px;
+	}
 }
 
 // Modified based on rules from https://searchfox.org/mozilla-esr102/source/browser/base/content/browser.css