Restore file-list highlight when using keyboard navigation (refined-github#1241)

fregante · sindresorhus · commit 872d6fecae53 · 2018-05-19T15:55:58.000+07:00
diff --git a/source/content.css b/source/content.css
@@ -48,8 +48,10 @@
 	opacity: 0.6;
 }
 
-/* Remove annoying hover in the repo file list */
-.file-wrap .files .navigation-focus td {
+/* For `rgh-no-navigation-highlight` */
+.rgh-no-navigation-highlight .list-group-item.navigation-focus, /* Notifications list */
+.rgh-no-navigation-highlight .Box-row.navigation-focus, /* Issue list */
+.rgh-no-navigation-highlight .navigation-focus td { /* File list  */
 	background: none !important;
 }
 
diff --git a/source/content.js b/source/content.js
@@ -73,6 +73,7 @@ import closeOutOfViewModals from './features/close-out-of-view-modals';
 import addScopedSearchOnUserProfile from './features/add-scoped-search-on-user-profile';
 import monospaceTextareas from './features/monospace-textareas';
 import improveShortcutHelp from './features/improve-shortcut-help';
+import hideNavigationHoverHighlight from './features/hide-navigation-hover-highlight';
 import displayIssueSuggestions from './features/display-issue-suggestions';
 import addPullRequestHotkey from './features/add-pull-request-hotkey';
 import openSelectionInNewTab from './features/add-selection-in-new-tab';
@@ -130,6 +131,7 @@ async function init() {
 	enableFeature(focusConfirmationButtons);
 	enableFeature(addKeyboardShortcutsToCommentFields);
 	enableFeature(addConfirmationToCommentCancellation);
+	enableFeature(hideNavigationHoverHighlight);
 	enableFeature(monospaceTextareas);
 	enableFeature(openSelectionInNewTab);
 
diff --git a/source/features/hide-navigation-hover-highlight.js b/source/features/hide-navigation-hover-highlight.js
@@ -0,0 +1,17 @@
+/*
+Some lists like notifications, file lists, and issue lists,
+are highlighted as you move the mouse over them. This highlight
+is useful when navigating via the keyboard (j/k), but annoying
+when just moving the mouse around.
+
+This feature will hide the highlight until the first keyboard
+navigation, then it will be displayed until the next full reload.
+*/
+const className = 'rgh-no-navigation-highlight';
+
+export default function () {
+	document.body.classList.add(className);
+	document.body.addEventListener('navigation:keydown', () => {
+		document.body.classList.remove(className);
+	}, {once: true});
+}

Original file line number	Diff line number	Diff line change
`@@ -48,8 +48,10 @@`
`48`	`48`	`opacity: 0.6;`
`49`	`49`	`}`
`50`	`50`
`51`		`-/* Remove annoying hover in the repo file list */`
`52`		`-.file-wrap .files .navigation-focus td {`
	`51`	+/* For `rgh-no-navigation-highlight` */
	`52`	`+.rgh-no-navigation-highlight .list-group-item.navigation-focus, /* Notifications list */`
	`53`	`+.rgh-no-navigation-highlight .Box-row.navigation-focus, /* Issue list */`
	`54`	`+.rgh-no-navigation-highlight .navigation-focus td { /* File list */`
`53`	`55`	`background: none !important;`
`54`	`56`	`}`
`55`	`57`