Add option the popup to close on mouseleave

source/github-notifications-preview.jsx

@@ -98,6 +98,16 @@ function createNotificationsDropdown() {
 		);
 
 		indicator.addEventListener('mouseenter', openDropdown);
+		if (options.closeOnMouseleave) {
+			let timer;
+			select('.NPG-dropdown').addEventListener('mouseleave', () => {
+				timer = setTimeout(closeDropdown, 1000);
+			});
+			select('.NPG-dropdown').addEventListener('mouseenter', () => {
+				clearTimeout(timer);
+			});
+		}
+
 		indicator.addEventListener('click', visitNotificationsPage);
 	}
 }
@@ -169,6 +179,10 @@ async function openDropdown({currentTarget: indicator}) {
 	}
 }
 
+function closeDropdown() {
+	select('.NPG-container[open]').removeAttribute('open');
+}
+
 // When the dropdown is open, GitHub's modal blocks all links outside the dropdown.
 // This handler lets the user visit /notifications while retaining any cmd/ctrl click modifier
 function visitNotificationsPage(event) {

source/options-storage.js

@@ -4,6 +4,7 @@ window.optionsStorage = new OptionsSync({
 	defaults: {
 		previewCount: true,
 		dropdown: 'compact',
-		participating: false
+		participating: false,
+		closeOnMouseleave: false
 	}
 });

source/options.html

@@ -15,6 +15,12 @@
 			Show only participating notifications
 		</label>
 	</p>
+	<p>
+		<label>
+			<input type="checkbox" name="closeOnMouseleave">
+			Automatically close the popup when mouse is moved away
+		</label>
+	</p>
 	<p>
 		Show notifications list on hover: <br>
 		<label><input type="radio" name="dropdown" value="yes"> Yes</label><br>