Avoid duplicating native button in `quick-pr-diff-options` (#5022)

1 files changed, 23 insertions, 13 deletions

diff --git a/source/features/quick-pr-diff-options.tsx b/source/features/quick-pr-diff-options.tsx
index f3c4f3e9..d5165b65 100644
--- a/source/features/quick-pr-diff-options.tsx
+++ b/source/features/quick-pr-diff-options.tsx
@@ -31,8 +31,8 @@ function createDiffStyleToggle(): DocumentFragment {
 
 	if (pageDetect.isPR()) {
 		return isUnified
-			? makeLink('split', <BookIcon/>, false)
-			: makeLink('unified', <DiffIcon/>, false);
+			? makeLink('split', <BookIcon className="v-align-middle"/>, false)
+			: makeLink('unified', <DiffIcon className="v-align-middle"/>, false);
 	}
 
 	return (
@@ -43,36 +43,48 @@ function createDiffStyleToggle(): DocumentFragment {
 	);
 }
 
+function isHidingWhitespace(): boolean {
+	// The selector is the native button
+	return new URL(location.href).searchParams.get('w') === '1' || select.exists('button[name="w"][value="0"]:not([hidden])');
+}
+
 function createWhitespaceButton(): HTMLElement {
 	const url = new URL(location.href);
-	const isHidingWhitespace = url.searchParams.get('w') === '1';
 
-	if (isHidingWhitespace) {
+	if (isHidingWhitespace()) {
 		url.searchParams.delete('w');
 	} else {
 		url.searchParams.set('w', '1');
 	}
 
 	const classes = pageDetect.isPR()
-		? 'tooltipped tooltipped-s d-none d-lg-block color-icon-secondary color-fg-muted ' + (isHidingWhitespace ? '' : 'color-icon-info color-fg-accent')
-		: 'tooltipped tooltipped-s btn btn-sm tooltipped ' + (isHidingWhitespace ? 'color-text-tertiary color-fg-subtle' : '');
+		? 'tooltipped tooltipped-s d-none d-lg-block color-icon-secondary color-fg-muted'
+		: 'tooltipped tooltipped-s btn btn-sm tooltipped ' + (isHidingWhitespace() ? 'color-text-tertiary color-fg-subtle' : '');
 
 	return (
 		<a
 			href={url.href}
 			data-hotkey="d w"
 			className={classes}
-			aria-label={`${isHidingWhitespace ? 'Show' : 'Hide'} whitespace changes`}
+			aria-label={`${isHidingWhitespace() ? 'Show' : 'Hide'} whitespace changes`}
 		>
-			{pageDetect.isPR() ? <DiffModifiedIcon/> : <>{isHidingWhitespace && <CheckIcon/>} No Whitespace</>}
+			{pageDetect.isPR() ? <DiffModifiedIcon className="v-align-middle"/> : <>{isHidingWhitespace() && <CheckIcon/>} No Whitespace</>}
 		</a>
 	);
 }
 
 function initPR(): false | void {
-	select('.js-file-filter')!.parentElement!.append(
+	// TODO [2022-05-01]: Remove `.js-diff-settings` from the selector (kept for GHE)
+	const originalToggle = select('.js-diff-settings, [aria-label="Diff settings"]')!.closest('details')!.parentElement!;
+
+	if (!isHidingWhitespace()) {
+		originalToggle.after(
+			<div className="diffbar-item d-flex">{createWhitespaceButton()}</div>,
+		);
+	}
+
+	originalToggle.after(
 		<div className="diffbar-item d-flex">{createDiffStyleToggle()}</div>,
-		<div className="diffbar-item d-flex">{createWhitespaceButton()}</div>,
 	);
 
 	// Trim title
@@ -82,9 +94,7 @@ function initPR(): false | void {
 		prTitle.title = prTitle.textContent!;
 	}
 
-	// Only show the native dropdown on medium and small screens #2597
-	// TODO [2022-05-01]: Remove `.js-diff-settings` from the selector (kept for GHE)
-	select('.js-diff-settings, [aria-label="Diff settings"]')!.closest('details')!.classList.add('d-lg-none');
+	originalToggle.classList.add('d-lg-none');
 
 	// Make space for the new button by removing "Changes from" #655
 	select('[data-hotkey="c"] strong')!.previousSibling!.remove();