Auto-update reaction avatars (#634)

extension/content.css

@@ -411,7 +411,7 @@ we will add it back on for the simple news alerts we decide to show
 }
 
 /* Styles for avatars Refined GitHub adds to Reactions */
-.participants-container {
+.rgh-reactions a:first-of-type {
 	margin-left: 4px;
 }
 
@@ -424,31 +424,30 @@ we will add it back on for the simple news alerts we decide to show
 	padding-right: 0 !important;
 }
 
-.reaction-summary-item div,
-.reaction-summary-item div a,
-.reaction-summary-item div img {
+.reaction-summary-item a,
+.reaction-summary-item img {
 	display: inline-block;
 }
 
-.reaction-summary-item div a {
+.reaction-summary-item a {
 	margin-left: -2px;
 	transition: margin-left 0.2s;
 }
 
-.reaction-summary-item div img,
-.reaction-summary-item div span {
+.reaction-summary-item img,
+.reaction-summary-item span {
 	width: 20px;
 	height: 20px;
 	vertical-align: middle;
 }
 
-.reaction-summary-item div img {
+.reaction-summary-item img {
 	color: #FFF; /* affects box-shadow */
 	box-shadow: 0 0 0 2px;
 	border-radius: 3px;
 }
 
-.reaction-summary-item.user-has-reacted div img {
+.reaction-summary-item.user-has-reacted img {
 	color: #f2f8fa;
 }
 

src/content.js

@@ -640,8 +640,7 @@ async function onDomReady() {
 			}
 
 			if (pageDetect.isPR() || pageDetect.isIssue() || pageDetect.isCommit()) {
-				addReactionParticipants.add(username);
-				addReactionParticipants.addListener(username);
+				addReactionParticipants();
 				showRealNames();
 			}
 

src/libs/reactions-avatars.js

@@ -1,72 +1,34 @@
+import debounce from 'debounce-fn';
+import select from 'select-dom';
 import {h} from 'dom-chef';
-import {emptyElement} from './utils';
-
-function add(currentUser) {
-	$('.comment-reactions.has-reactions').each((index, reactionsContainer) => {
-		const $reactionsContainer = $(reactionsContainer);
-		const $reactionButtons = $reactionsContainer.find('.comment-reactions-options .reaction-summary-item[aria-label]');
-
-		$reactionButtons.each((index, element) => {
-			const $element = $(element);
-			const participantCount = Number($element.html().split('/g-emoji>')[1]);
-			const participants = $element.attr('aria-label')
-				.replace(/ reacted with.*/, '')
-				.replace(/,? and /, ', ')
-				.replace(/, \d+ more/, '')
-				.split(', ');
-			const userPosition = participants.indexOf(currentUser);
-
-			// If the user is the only participant, leave as is
-			if (participantCount === 1 && userPosition > -1) {
-				return;
-			}
-
-			// Add participant container
-			if (!element.querySelector('div.participants-container')) {
-				element.append(<div class="participants-container"></div>);
-			}
-
-			// Remove self from participant list so you don't see your own avatar
-			if (userPosition > -1) {
-				participants.splice(userPosition, 1);
-			}
-
-			const firstThreeParticipants = participants.slice(0, 3);
-			const participantsContainer = element.querySelector('.participants-container');
-
-			// Clear any existing avatars and remainder count
-			emptyElement(participantsContainer);
-
-			for (const participant of firstThreeParticipants) {
-				participantsContainer.append(
-					<a href={`/${participant}`}>
-						<img src={`/${participant}.png`}/>
-					</a>
-				);
-			}
-		});
-	});
-}
-
-function reapply(event, currentUser) {
-	if ($(event.target).closest('.add-reactions-options-item, .reaction-summary-item').not('.add-reaction-btn').length === 0) {
-		return;
+import {getUsername} from './utils';
+
+function add() {
+	const currentUser = getUsername();
+	for (const element of select.all(`
+		.comment-reactions.has-reactions
+		.comment-reactions-options
+		.reaction-summary-item[aria-label]:not(.rgh-reactions)
+	`)) {
+		element.classList.add('rgh-reactions');
+		const participants = element.getAttribute('aria-label')
+			.replace(/ reacted with.*/, '')
+			.replace(/,? and /, ', ')
+			.replace(/, \d+ more/, '')
+			.split(', ')
+			.filter(username => username !== currentUser)
+			.filter((u, i) => i < 3) // Limit to 3 avatars
+			.map(user => (
+				<a href={`/${user}`}>
+					<img src={`/${user}.png`}/>
+				</a>
+			));
+
+		element.append(...participants);
 	}
-
-	const applyReactions = setInterval(() => {
-		add(currentUser);
-		clearInterval(applyReactions);
-	}, 500);
-}
-
-function addListener(currentUser) {
-	$(document).on('click', event => {
-		reapply(event, currentUser);
-	});
 }
 
-export default {
-	add,
-	reapply,
-	addListener
+export default () => {
+	add();
+	document.addEventListener('socket:message', debounce(add, {wait: 100}));
 };