Highlight revisions from the same user

Completed subtasks

* Added bubble in the Tootltip
* Added border on clicking or hovering the bubble
* Highlites Bubble on hover
* When Clicked or hover on the Bubble: Highlights
  revisions from the same user
* Added filter revisions.

Bug: T136105
Change-Id: I64cfef395ce1812d501980067edffe210fc99227

modules/ext.RevisionSlider.RevisionListView.js

@@ -45,6 +45,11 @@
 		 */
 		dir: null,
 
+		/**
+		* @type {string}
+		*/
+		selectedUser: '',
+
 		/**
 		 * @type {jQuery}
 		 */
@@ -381,19 +386,85 @@
 		 * @return {string|jQuery}
 		 */
 		makeUserLine: function ( userString, userGender ) {
+			var revs,
+				self = this,
+				$userLine,
+				$userBubble;
+			if ( typeof this.revisionList !== 'undefined' ) {
+				revs = this.revisionList.getRevisions();
+			}
+
 			if ( !userString ) {
 				return '';
 			}
-
 			if ( !userGender ) {
 				userGender = 'unknown';
 			}
-			return $( '<p>' ).append(
+
+			$userLine = $( '<p class="mw-revslider-username-row">' ).append(
 				$( '<strong>' ).text( mw.msg( 'revisionslider-label-username', userGender ) + mw.msg( 'colon-separator' ) ),
 				$( '<bdi>' ).append(
 					$( '<a>' ).addClass( 'mw-userlink' ).attr( 'href', mw.util.getUrl( this.getUserPage( userString ) ) ).text( this.stripInvalidCharacters( userString ) )
-				)
+				),
+				$userBubble = $( '<div>' ).addClass( 'mw-revslider-bubble' )
+					.on( 'click', function () {
+						if ( self.selectedUser !== userString ) {
+							$( '.mw-revslider-username-row' ).addClass( 'mw-highlight-user-row' );
+							$( this ).addClass( 'mw-revslider-highlite-bubble' );
+							self.highlightSameUserRevisions( userString, revs, 'addClass' );
+							self.selectedUser = userString;
+						} else {
+							$( '.mw-revslider-username-row' ).addClass( 'mw-highlight-user-row' );
+							$( this ).addClass( 'mw-revslider-highlite-bubble' );
+							self.highlightSameUserRevisions( userString, revs, 'removeClass' );
+							self.selectedUser = '';
+						}
+					} )
+					.on( {
+						mouseenter: function () {
+							if ( self.selectedUser !== userString ) {
+								$( '.mw-revslider-username-row' ).addClass( 'mw-highlight-user-row' );
+								$( this ).addClass( 'mw-revslider-highlite-bubble' );
+								self.highlightSameUserRevisions( userString, revs, 'addClass' );
+							}
+						},
+						mouseleave: function () {
+							if ( self.selectedUser !== userString ) {
+								$( '.mw-revslider-username-row' ).removeClass( 'mw-highlight-user-row' );
+								$( this ).removeClass( 'mw-revslider-highlite-bubble' );
+								self.highlightSameUserRevisions( userString, revs, 'removeClass' );
+							}
+						}
+					} )
 			);
+
+			if ( self.selectedUser === userString ) {
+				$userLine.addClass( 'mw-highlight-user-row' );
+				$userBubble.addClass( 'mw-revslider-highlite-bubble' );
+			}
+
+			return $userLine;
+
+		},
+
+		/**
+		* Highlights revisions of the sameUser
+		* @param {string} userString
+		* @param {Object[]} revs
+		* @param {string} event
+		*/
+		highlightSameUserRevisions: function ( userString, revs, event ) {
+			var i;
+			$( '.mw-revslider-revision-wrapper' ).removeClass( 'mw-revslider-revision-highlight' );
+			for ( i = 0; i < revs.length; i++ ) {
+				if ( userString === revs[ i ].getUser() ) {
+					if ( event === 'addClass' ) {
+						$( '[data-revid~="' + revs[ i ].id + '"]' ).parent().addClass( 'mw-revslider-revision-highlight' );
+					} else if ( event === 'removeClass' ) {
+						$( '[data-revid~="' + revs[ i ].id + '"]' ).parent().removeClass( 'mw-revslider-revision-highlight' );
+					}
+				}
+			}
 		},
 
 		/**

modules/ext.RevisionSlider.less

@@ -57,6 +57,11 @@
 	.mw-revslider-revision-new & {
 		border-bottom: 2px solid @new;
 	}
+
+	.mw-revslider-revision-highlight & {
+		border: 1px solid #72777d;
+		background-color: #989898;
+	}
 }
 
 .mw-revslider-revision-wrapper {
@@ -401,3 +406,28 @@ of the frameless one (to fit the size of the toggle button */
 .mw-revslider-pointer-line-underline {
 	border-bottom: 2px solid;
 }
+
+.mw-revslider-bubble {
+	height: 17px;
+	width: 17px;
+	background-color: #ccc;
+	border-radius: 100%;
+	display: inline-block;
+	float: right;
+}
+
+.mw-revslider-highlite-bubble {
+	background-color: #72777d;
+	border: #e0e0e0;
+}
+
+.mw-revslider-username-row {
+	border: 1px solid transparent;
+	border-radius: 40px;
+	margin-left: -3px;
+	padding-left: 2px;
+}
+
+.mw-highlight-user-row {
+	border-color: #e0e0e0;
+}