Wrap notifications with a link for native click behavior

Remove the behavior of the SelectWidget 'choose' and instead wrap
the notifications with their primary url links. That way, the click
handler returns to browser native response, and we gain automatic
behavior for ctrl+click, middle click, and regular click.

CSS had to be adjusted as well.

Bug: T112004
Change-Id: If10a4d3be71a8cf3ce966f15b922da0b9a2ddcc7

modules/ooui/mw.echo.ui.NotificationOptionWidget.js

@@ -40,8 +40,18 @@
 		this.$element
 			.addClass( 'mw-echo-ui-notificationOptionWidget' )
 			.append(
-				this.markAsReadButton.$element,
-				this.$label
+				// HACK: Wrap the entire option with a link that takes
+				// the user to the primary url. This is not perfect,
+				// but it makes the behavior native to the browser rather
+				// than us listening to click events and opening new
+				// windows.
+				$( '<a>' )
+					.addClass( 'mw-echo-ui-notificationOptionWidget-linkWrapper' )
+					.attr( 'href', this.model.getPrimaryUrl() )
+					.append(
+						this.markAsReadButton.$element,
+						this.$label
+					)
 			);
 
 		this.$element.toggleClass( 'mw-echo-ui-notificationOptionWidget-initiallyUnseen', !this.model.isSeen() );

modules/ooui/mw.echo.ui.NotificationsWidget.js

@@ -34,9 +34,6 @@
 			remove: 'onModelNotificationRemove',
 			clear: 'onModelNotificationClear'
 		} );
-		this.connect( this, {
-			choose: 'onNotificationChoose'
-		} );
 
 		this.$element
 			.addClass( 'mw-echo-ui-notificationsWidget' );
@@ -128,26 +125,4 @@
 			this.addItems( [ this.loadingOptionWidget ] );
 		}
 	};
-
-	/**
-	 * Respond to choosing a notification option
-	 *
-	 * @param {mw.echo.ui.NotificationOptionWidget} item Notification option
-	 */
-	mw.echo.ui.NotificationsWidget.prototype.onNotificationChoose = function ( item ) {
-		var link;
-
-		if ( !item ) {
-			return;
-		}
-
-		link = item.getPrimaryUrl();
-		if ( link ) {
-			// Log the clickthrough
-			mw.echo.logger.logInteraction( 'notification-link-click', item.getData(), this.type );
-
-			// Follow the link
-			window.location.href = link;
-		}
-	};
 } )( mediaWiki, jQuery );

modules/ooui/styles/mw.echo.ui.NotificationOptionWidget.less

@@ -8,6 +8,15 @@
 	font-size: 13px;
 	line-height: 16px;
 
+	&:hover > a {
+		text-decoration: none;
+	}
+
+	&:not(:hover) a,
+	#p-personal &:not(:hover) a.new {
+		color: #666666;
+	}
+
 	&:last-child {
 		border-bottom: none;
 	}
@@ -29,12 +38,6 @@
 		}
 	}
 
-	&:not(:hover) a,
-	#p-personal &:not(:hover) a.new {
-		color: #666666;
-		text-decoration: none;
-	}
-
 	&-initiallyUnseen {
 		-webkit-animation-name: unseen-fadeout;
 		animation-name: unseen-fadeout;