Improve reliability of `clean-repo-filelist-actions` (#3995)

Co-authored-by: Kid <kidonng@gmail.com>
Co-authored-by: Federico <me@fregante.com>

1 files changed, 42 insertions, 25 deletions

diff --git a/source/features/clean-repo-filelist-actions.tsx b/source/features/clean-repo-filelist-actions.tsx
index 01849493..98f4397d 100644
--- a/source/features/clean-repo-filelist-actions.tsx
+++ b/source/features/clean-repo-filelist-actions.tsx
@@ -1,32 +1,52 @@
 import React from 'dom-chef';
 import select from 'select-dom';
+import onetime from 'onetime';
+import {observe} from 'selector-observer';
 import * as pageDetect from 'github-url-detection';
 import {PlusIcon, SearchIcon} from '@primer/octicons-react';
 
+import {wrap} from '../helpers/dom-utils';
 import features from '.';
 
+/** Add tooltip on a wrapper to avoid breaking dropdown functionality */
+function addTooltipToSummary(childElement: Element, tooltip: string): void {
+	wrap(
+		childElement.closest('details')!,
+		<div className="tooltipped tooltipped-ne" aria-label={tooltip}/>
+	);
+}
+
 function init(): void {
-	const searchButton = select('.btn[data-hotkey="t"]')!;
-	searchButton.classList.add('tooltipped', 'tooltipped-ne');
-	searchButton.setAttribute('aria-label', 'Go to file');
-	searchButton.firstChild!.replaceWith(<SearchIcon/>);
-
-	const addButtonWrapper = searchButton.nextElementSibling!;
-	if (addButtonWrapper.nodeName === 'DETAILS') {
-		addButtonWrapper.classList.add('tooltipped', 'tooltipped-ne');
-		addButtonWrapper.setAttribute('aria-label', 'Add file');
-
-		const addIcon = select('.btn span', addButtonWrapper)!;
-		addIcon.classList.replace('d-md-flex', 'd-md-block');
-		addIcon.firstChild!.replaceWith(<PlusIcon/>);
-	}
-
-	const downloadButton = select('get-repo details');
-	if (downloadButton) {
-		downloadButton.classList.add('tooltipped', 'tooltipped-ne');
-		downloadButton.setAttribute('aria-label', 'Clone or download');
-		select('.octicon-download', downloadButton)!.nextSibling!.remove();
-	}
+	// `.btn` selects the desktop version
+	observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', {
+		add(searchButton) {
+			searchButton.classList.add('tooltipped', 'tooltipped-ne', 'rgh-repo-filelist-actions');
+			searchButton.setAttribute('aria-label', 'Go to file');
+
+			// Replace "Go to file" with  icon
+			searchButton.firstChild!.replaceWith(<SearchIcon/>);
+
+			// This button doesn't appear on `isSingleFile`
+			const addFileDropdown = searchButton.nextElementSibling!.querySelector('.dropdown-caret');
+			if (addFileDropdown) {
+				addFileDropdown.parentElement!.classList.replace('d-md-flex', 'd-md-block');
+
+				// Replace "Add file" with icon
+				addFileDropdown.previousSibling!.replaceWith(<PlusIcon/>);
+
+				addTooltipToSummary(addFileDropdown, 'Add file');
+			}
+
+			// This dropdown doesn't appear on `isSingleFile`
+			const downloadIcon = select('get-repo .octicon-download');
+			if (downloadIcon) {
+				// Remove "Code" text next to it
+				downloadIcon.nextSibling!.remove();
+
+				addTooltipToSummary(downloadIcon, 'Clone, open or download');
+			}
+		}
+	});
 }
 
 void features.add(__filebasename, {
@@ -34,8 +54,5 @@ void features.add(__filebasename, {
 		pageDetect.isRepoTree,
 		pageDetect.isSingleFile
 	],
-	exclude: [
-		pageDetect.isEmptyRepo
-	],
-	init
+	init: onetime(init)
 });