1 files changed, 37 insertions, 27 deletions

diff --git a/source/features/hide-comments-faster.tsx b/source/features/hide-comments-faster.tsx
index 14fa9165..50bebeeb 100644
--- a/source/features/hide-comments-faster.tsx
+++ b/source/features/hide-comments-faster.tsx
@@ -3,22 +3,21 @@ import select from 'select-dom';
 import delegate, {DelegateEvent} from 'delegate-it';
 import features from '../libs/features';
 
-function handleMenuOpening(event: DelegateEvent): void {
-	const hideButton = select('.js-comment-hide-button', event.delegateTarget.parentElement!);
-	if (!hideButton) {
-		// User unable to hide or menu already created
+function generateSubmenu(hideButton: Element): void {
+	if (hideButton.closest('.rgh-hide-comments-faster-details')) {
+		// Already generated
 		return;
 	}
 
-	// Disable default behavior
-	hideButton.classList.remove('js-comment-hide-button');
+	const detailsElement = hideButton.closest('details')!;
+	detailsElement.classList.add('rgh-hide-comments-faster-details');
 
 	const comment = hideButton.closest('.unminimized-comment')!;
-	const form = select('.js-comment-minimize', comment)!;
+	const hideCommentForm = select('.js-comment-minimize', comment)!;
 
 	// Generate dropdown items
 	for (const reason of select.all<HTMLInputElement>('[name="classifier"] :not([value=""])', comment)) {
-		form.append(
+		hideCommentForm.append(
 			<button
 				name="classifier"
 				value={reason.value}
@@ -30,33 +29,44 @@ function handleMenuOpening(event: DelegateEvent): void {
 	}
 
 	// Drop previous form controls
-	select('.btn', form)!.remove();
-	select('[name="classifier"]', form)!.remove();
+	select('.btn', hideCommentForm)!.remove();
+	select('[name="classifier"]', hideCommentForm)!.remove();
 
 	// Imitate existing menu
-	form.classList.add('dropdown-menu', 'dropdown-menu-sw', 'text-gray-dark', 'show-more-popover', 'anim-scale-in');
+	hideCommentForm.classList.add('dropdown-menu', 'dropdown-menu-sw', 'text-gray-dark', 'show-more-popover', 'anim-scale-in');
 
-	// Show menu on top of optionList when "Hide" is clicked
-	// Hide it when dropdown closes.
-	// Uses `v-hidden` and `d-none` to avoid conflicts with `close-out-of-view-modals`
+	detailsElement.append(hideCommentForm);
+}
+
+// Shows menu on top of mainDropdownContent when "Hide" is clicked;
+// Hide it when dropdown closes.
+// Uses `v-hidden` and `d-none` to avoid conflicts with `close-out-of-view-modals`
+function toggleSubMenu(hideButton: Element, show: boolean): void {
 	const dropdown = hideButton.closest('details')!;
-	const optionList = select('.show-more-popover', dropdown)!;
-	hideButton.addEventListener('click', event => {
-		event.stopImmediatePropagation();
-		event.preventDefault();
-		optionList.classList.add('v-hidden');
-		form.classList.remove('d-none');
-	});
-	dropdown.addEventListener('toggle', () => {
-		optionList.classList.remove('v-hidden');
-		form.classList.add('d-none');
-	});
 
-	dropdown.append(form);
+	// Native dropdown
+	select('details-menu', dropdown)!.classList.toggle('v-hidden', show);
+
+	// "Hide comment" dropdown
+	select('form.js-comment-minimize', dropdown)!.classList.toggle('d-none', !show);
+}
+
+function resetDropdowns(event: DelegateEvent): void {
+	toggleSubMenu(event.delegateTarget, false);
+}
+
+function showSubmenu(event: DelegateEvent): void {
+	generateSubmenu(event.delegateTarget);
+	toggleSubMenu(event.delegateTarget, true);
+
+	event.stopImmediatePropagation();
+	event.preventDefault();
 }
 
 function init(): void {
-	delegate('.timeline-comment-action', 'click', handleMenuOpening);
+	// `useCapture` required to be fired before GitHub's handlers
+	delegate('.js-comment-hide-button', 'click', showSubmenu, true);
+	delegate('.rgh-hide-comments-faster-details', 'toggle', resetDropdowns, true);
 }
 
 features.add({