summaryrefslogtreecommitdiff
path: root/source/features/clean-repo-filelist-actions.tsx
blob: 4c3f7b06a0585ff6ea0bb9d7cdae16101f171a77 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React from 'dom-chef';
import select from 'select-dom';
import {observe} from 'selector-observer';
import * as pageDetect from 'github-url-detection';
import {PlusIcon, SearchIcon, CodeIcon} 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 cleanFilelistActions(searchButton: Element): void {
	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');
	}

	const codeDropdownButton = select('get-repo summary');
	if (codeDropdownButton) { // This dropdown doesn't appear on `isSingleFile`
		addTooltipToSummary(codeDropdownButton, 'Clone, open or download');

		// Users with Codespaces enabled already have an icon in the button https://github.com/refined-github/refined-github/pull/5074#issuecomment-983251719
		const codeIcon = select('.octicon-code', codeDropdownButton);
		if (codeIcon) {
			// Remove "Code" text
			codeIcon.nextSibling!.remove();
		} else {
			// Replace "Code" text with icon
			codeDropdownButton.firstChild!.replaceWith(<CodeIcon/>);
		}
	}
}

function init(): Deinit {
	// `.btn` selects the desktop version
	return observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', {
		add: cleanFilelistActions,
	});
}

void features.add(import.meta.url, {
	include: [
		pageDetect.isRepoTree,
		pageDetect.isSingleFile,
	],
	deduplicate: 'has-rgh-inner',
	init,
});