Add `link-to-compare-diff` feature (#5458)

Co-authored-by: Kid <44045911+kidonng@users.noreply.github.com>

4 files changed, 31 insertions, 0 deletions

diff --git a/readme.md b/readme.md
index 1cd10977..e38c6ae2 100644
--- a/readme.md
+++ b/readme.md
@@ -326,6 +326,7 @@ Thanks for contributing! 🦋🙌
 - [](# "easy-toggle-files") [Enables toggling file diffs by clicking on their header bar.](https://user-images.githubusercontent.com/47531779/99855419-be173e00-2b7e-11eb-9a55-0f6251aeb0ef.gif)
 - [](# "same-branch-author-commits") [Preserves current branch and path when viewing all commits by an author.](https://user-images.githubusercontent.com/44045911/148764372-ee443213-e61a-4227-9219-0ee54ed832e8.png)
 - [](# "easy-toggle-commit-messages") [Enables toggling commit messages by clicking on the commit box.](https://user-images.githubusercontent.com/1402241/152121837-ca13bf8a-9b7f-4517-8e8d-b58bb135523b.gif)
+- [](# "link-to-compare-diff") [Linkifies the "X files changed" text on compare pages to allow jumping to the diff.](https://user-images.githubusercontent.com/46634000/157072587-0335357a-18c7-44c4-ae6e-237080fb36b4.png)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 
diff --git a/source/features/link-to-compare-diff.css b/source/features/link-to-compare-diff.css
new file mode 100644
index 00000000..30c499a4
--- /dev/null
+++ b/source/features/link-to-compare-diff.css
@@ -0,0 +1,3 @@
+.rgh-link-to-compare-diff:hover > :is(.octicon-file-diff, .octicon-file-diff ~ span) {
+	color: var(--color-accent-fg) !important;
+}
diff --git a/source/features/link-to-compare-diff.tsx b/source/features/link-to-compare-diff.tsx
new file mode 100644
index 00000000..c322f2ac
--- /dev/null
+++ b/source/features/link-to-compare-diff.tsx
@@ -0,0 +1,26 @@
+import './link-to-compare-diff.css';
+import React from 'dom-chef';
+import select from 'select-dom';
+import * as pageDetect from 'github-url-detection';
+
+import features from '.';
+import {wrapAll} from '../helpers/dom-utils';
+
+function init(): void {
+	const changedFilesSummary = select('.Box .octicon-file-diff')!.closest('li')!;
+	wrapAll(
+		[...changedFilesSummary.children],
+		<a className="no-underline rgh-link-to-compare-diff" href="#files_bucket"/>,
+	);
+}
+
+void features.add(import.meta.url, {
+	include: [
+		pageDetect.isCompare,
+	],
+	exclude: [
+		() => select.exists('.tabnav'), // The commit list and compare diff are in two separate tabs
+	],
+	deduplicate: 'has-rgh-inner',
+	init,
+});
diff --git a/source/refined-github.ts b/source/refined-github.ts
index 7e5f0134..2f14c1a6 100644
--- a/source/refined-github.ts
+++ b/source/refined-github.ts
@@ -215,3 +215,4 @@ import './features/dim-visited-conversations';
 import './features/rgh-improve-new-issue-form';
 import './features/easy-toggle-commit-messages';
 import './features/command-palette-navigation-shortcuts';
+import './features/link-to-compare-diff';