Improve keyboard navigation (move) performance

lib/modules/selectedEntry.js

@@ -117,8 +117,8 @@ module.go = () => {
 		addFocusBorder();
 	}
 
-	addListener((selected, unselected) => unselected && Hover.infocard('showParent').close(false));
-	addListener(updateActiveElement);
+	addListener((selected, unselected) => unselected && Hover.infocard('showParent').close(false), 'beforePaint');
+	addListener(updateActiveElement, 'beforePaint');
 	addListener(updateLastSelectedCache);
 };
 
@@ -167,12 +167,36 @@ function _selectedThing() {
 	return selectedThing;
 }
 
-const listeners = new $.Callbacks();
+const listeners = { 'beforeScroll': [], 'beforePaint': [], 'idle': [] };
 
-export function addListener(callback) {
-	listeners.add(callback);
+export function addListener(callback, when = 'idle') {
+	listeners[when].push(callback);
 }
 
+const runCallbacks = (() => {
+	function runListeners(listeners, newSelected, oldSelected, options) {
+		for (const listener of listeners) listener(newSelected, oldSelected, options);
+	}
+
+	let idleCallback;
+	const requestIdle = window.requestIdleCallback ?
+		window.requestIdleCallback :
+		fn => requestAnimationFrame(() => requestAnimationFrame(fn));
+	const runIdle = callback => {
+		idleCallback = callback;
+		requestIdle(() => {
+			if (idleCallback) idleCallback();
+			idleCallback = null;
+		})
+	}
+
+	return (...args) => {
+		runListeners(listeners.beforeScroll, ...args);
+		requestAnimationFrame(() => runListeners(listeners.beforePaint, ...args));
+		runIdle(() => runListeners(listeners.idle, ...args));
+	};
+})();
+
 function _select(thingOrEntry, options = {}) {
 	const newThing = new Thing(thingOrEntry);
 	if (!newThing.thing || newThing.is(selectedThing)) return;
@@ -184,9 +208,8 @@ function _select(thingOrEntry, options = {}) {
 		(newThing.entry.getBoundingClientRect().top > oldSelected.entry.getBoundingClientRect().top ? 'down' : 'up') :
 		null;
 
-	listeners.fire(newSelected, oldSelected, options);
+	runCallbacks(newSelected, oldSelected, options);
 
-	// options.scrollStyle may be changed by listeners, so have this run last
 	scrollToElement(newThing.entry, options);
 
 	selectedThing = newSelected;

lib/modules/showImages.js

@@ -364,7 +364,7 @@ module.go = () => {
 	findAllImages(document.body);
 	document.addEventListener('dragstart', () => false);
 
-	SelectedEntry.addListener(mediaBrowse);
+	SelectedEntry.addListener(mediaBrowse, 'beforeScroll');
 
 	// Handle spotlight next/prev hiding open expando's
 	const spotlight = document.querySelector('#siteTable_organic');