refined-github · fregante · Jul 6, 2020 · Jun 15, 2020 · Jun 16, 2020 · Jun 16, 2020
diff --git a/readme.md b/readme.md
@@ -179,6 +179,7 @@ Thanks for contributing! 🦋🙌
 - [](# "minimize-upload-bar") [Reduces the upload bar to a small button.](https://user-images.githubusercontent.com/55841/59802383-3d994180-92e9-11e9-835d-60de67611c30.png)
 - [](# "clean-rich-text-editor") [Hides unnecessary comment field tooltips and toolbar items](https://user-images.githubusercontent.com/1402241/53629083-a4fe8900-3c47-11e9-8211-bfe2d254ffcb.png) (each one has a keyboard shortcut.)
 - [](# "monospace-textareas") Use a monospace font for all textareas.
+- [](# "keyboard-navigation") [Adds shortcuts to conversations and PR file lists: <kbd>j</kbd> focuses the comment/file below; <kbd>k</kbd> focuses the comment/file above.](https://user-images.githubusercontent.com/1402241/86573176-48665900-bf74-11ea-8996-a5c46cb7bdfd.gif)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

diff --git a/source/features/keyboard-navigation.tsx b/source/features/keyboard-navigation.tsx
@@ -0,0 +1,54 @@
+import select from 'select-dom';
+import * as pageDetect from 'github-url-detection';
+
+import features from '.';
+import {isEditable} from '../helpers/dom-utils';
+
+function runShortcuts(event: KeyboardEvent): void {
+	if (isEditable(event.target)) {
+		return;
+	}
+
+	const focusedComment = select(':target')!;
+
+	if (['j', 'k'].includes(event.key)) {
+		event.preventDefault();
+
+		const items = select.all('.js-targetable-element:not([id^="pullrequestreview"]')
+			.filter(comment => !comment.querySelector('.minimized-comment:not(.d-none)'));
+		// `j` goes to the next comment, `k` goes back a comment
+		const direction = event.key === 'j' ? 1 : -1;
+
+		const currentIndex = items.indexOf(focusedComment);
+
+		// Start at 0 if nothing is; clamp index
+		const chosenCommentIndex = Math.min(
+			Math.max(0, currentIndex + direction),
+			items.length - 1
+		);
+
+		if (currentIndex !== chosenCommentIndex) {
+			// Focus comment without pushing to history
+			location.replace('#' + items[chosenCommentIndex].id);
+		}
+	}
+}
+
+function init(): void {
+	document.addEventListener('keypress', runShortcuts);
+}
+
+void features.add({
+	id: __filebasename,
+	description: 'Adds shortcuts to conversations and PR file lists: `j` focuses the comment/file below; `k` focuses the comment/file above.',
+	screenshot: 'https://user-images.githubusercontent.com/1402241/86573176-48665900-bf74-11ea-8996-a5c46cb7bdfd.gif',
+	shortcuts: {
+		j: 'Focus the comment/file below',
+		k: 'Focus the comment/file above'
+	}
+}, {
+	include: [
+		pageDetect.hasComments
+	],
+	init
+});
diff --git a/source/refined-github.ts b/source/refined-github.ts
@@ -179,6 +179,7 @@ import './features/show-associated-branch-prs-on-fork';
 import './features/faster-reviews';
 import './features/fork-source-link-same-view';
 import './features/pr-jump-to-first-non-viewed-file';
+import './features/keyboard-navigation';
 
 // Add global for easier debugging
 (window as any).select = select;