Immediately show middle-clicked notifications as read

Before this patch, middle-clicking notifications would still mark them
as read, but the user would only find out upon closing and re-opening
the notification tray or reloading the page.

Bug: T340179
Change-Id: Ic29af0c70354087cf5f783b5a7370241a86b4bf3

modules/ui/mw.echo.ui.NotificationItemWidget.js

@@ -208,7 +208,8 @@
 		if ( this.model.getPrimaryUrl() ) {
 			this.$element
 				.attr( 'href', this.model.getPrimaryUrl() )
-				.on( 'click', this.onPrimaryLinkClick.bind( this ) );
+				.on( 'click', this.onPrimaryLinkClick.bind( this ) )
+				.on( 'auxclick', this.onPrimaryLinkAuxclick.bind( this ) );
 		}
 	};
 
@@ -227,6 +228,24 @@
 		return true;
 	};
 
+	/**
+	 * Respond to primary link middle-click by immediately marking as read,
+	 * then let the browser open the link in a new tab as normal.
+	 * Opening the link would also mark as read, but this way the user gets immediate feedback.
+	 *
+	 * @param {Event} event
+	 *
+	 * @return {boolean} true
+	 */
+	mw.echo.ui.NotificationItemWidget.prototype.onPrimaryLinkAuxclick = function ( event ) {
+		if ( event.button === 1 ) {
+			this.$element.removeClass( 'mw-echo-ui-notificationItemWidget-initiallyUnseen' );
+			this.markRead( true );
+		}
+		// Don't prevent default action, let the browser take care of opening a new tab.
+		return true;
+	};
+
 	/**
 	 * Manage a click on a dynamic secondary link.
 	 * We can't know what the link intends us to do in the API, so we trust the 'apiParams'