From: Stephane Bisson <sbisson@wikimedia.org>
Date: Mon, 7 Aug 2017 18:52:42 +0000 (-0400)
Subject: RCFilters: Add marker between old and new changes in enhanced mode
X-Git-Tag: 1.31.0-rc.0~2380^2
X-Git-Url: https://git.cyclocoop.org/%27.%24link.%27?a=commitdiff_plain;h=d65f49aa78968d97b9d602ec084331995c1e5351;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Add marker between old and new changes in enhanced mode

For both "Live Update" and "View newest changes", add a marker
between old and new groups when changes are grouped by page.

Bug: T163426
Change-Id: I00947d05e9b6022604a2a6b94eec94f6ed747c96
---

diff --git a/includes/changes/EnhancedChangesList.php b/includes/changes/EnhancedChangesList.php
index 55cb9edd08..be488feed4 100644
--- a/includes/changes/EnhancedChangesList.php
+++ b/includes/changes/EnhancedChangesList.php
@@ -341,6 +341,7 @@ class EnhancedChangesList extends ChangesList {
 			'rev-deleted-event' => $revDeletedMsg,
 			'tableClasses' => $tableClasses,
 			'timestamp' => $block[0]->timestamp,
+			'fullTimestamp' => $block[0]->getAttribute( 'rc_timestamp' ),
 			'users' => $usersList,
 		];
 
diff --git a/includes/templates/EnhancedChangesListGroup.mustache b/includes/templates/EnhancedChangesListGroup.mustache
index 3a37c2ebcc..931eb7a709 100644
--- a/includes/templates/EnhancedChangesListGroup.mustache
+++ b/includes/templates/EnhancedChangesListGroup.mustache
@@ -1,4 +1,4 @@
-<table class="{{# tableClasses }}{{ . }} {{/ tableClasses }}">
+<table class="{{# tableClasses }}{{ . }} {{/ tableClasses }}" data-mw-ts="{{{ fullTimestamp }}}">
 	<tr>
 		<td>
 			<span class="mw-collapsible-toggle mw-collapsible-arrow mw-enhancedchanges-arrow mw-enhancedchanges-arrow-space"></span>
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index 42fb5cc90d..7eab6cb015 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -101,9 +101,6 @@
 			$message = $( '<div>' )
 				.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
 			isEmpty = $changesListContent === 'NO_RESULTS',
-			$lastSeen,
-			$indicator,
-			$newChanges = $( [] ),
 			// For enhanced mode, we have to load these modules, which are
 			// not loaded for the 'regular' mode in the backend
 			loaderPromise = mw.user.options.get( 'usenewrc' ) ?
@@ -142,34 +139,7 @@
 				this.$element.empty().append( $changesListContent );
 
 				if ( from ) {
-					$lastSeen = null;
-					this.$element.find( 'li[data-mw-ts]' ).each( function () {
-						var $li = $( this ),
-							ts = $li.data( 'mw-ts' );
-
-						if ( ts >= from ) {
-							$newChanges = $newChanges.add( $li );
-						} else if ( $lastSeen === null ) {
-							$lastSeen = $li;
-							return false;
-						}
-					} );
-
-					if ( $lastSeen ) {
-						$indicator = $( '<div>' )
-							.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' )
-							.text( mw.message( 'rcfilters-previous-changes-label' ).text() );
-
-						$indicator.on( 'click', function () {
-							$indicator.detach();
-						} );
-
-						$lastSeen.before( $indicator );
-					}
-
-					$newChanges
-						.hide()
-						.fadeIn( 1000 );
+					this.emphasizeNewChanges( from );
 				}
 			}
 
@@ -192,6 +162,52 @@
 		} );
 	};
 
+	/**
+	 * Emphasize the elements (or groups) newer than the 'from' parameter
+	 * @param {string} from Anything newer than this is considered 'new'
+	 */
+	mw.rcfilters.ui.ChangesListWrapperWidget.prototype.emphasizeNewChanges = function ( from ) {
+		var $lastSeen,
+			$indicator,
+			$newChanges = $( [] ),
+			selector = this.inEnhancedMode() ?
+				'table.mw-enhanced-rc[data-mw-ts]' :
+				'li[data-mw-ts]',
+			set = this.$element.find( selector ),
+			length = set.length;
+
+		set.each( function ( index ) {
+			var $this = $( this ),
+				ts = $this.data( 'mw-ts' );
+
+			if ( ts >= from ) {
+				$newChanges = $newChanges.add( $this );
+				$lastSeen = $this;
+
+				// guards against putting the marker after the last element
+				if ( index === ( length - 1 ) ) {
+					$lastSeen = null;
+				}
+			}
+		} );
+
+		if ( $lastSeen ) {
+			$indicator = $( '<div>' )
+				.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' )
+				.text( mw.message( 'rcfilters-previous-changes-label' ).text() );
+
+			$indicator.on( 'click', function () {
+				$indicator.detach();
+			} );
+
+			$lastSeen.after( $indicator );
+		}
+
+		$newChanges
+			.hide()
+			.fadeIn( 1000 );
+	};
+
 	/**
 	 * Respond to changes list model newChangesExist
 	 *
@@ -235,8 +251,7 @@
 	 * @param {jQuery|string} $content The content of the updated changes list
 	 */
 	mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupHighlightContainers = function ( $content ) {
-		var uri = new mw.Uri(),
-			highlightClass = 'mw-rcfilters-ui-changesListWrapperWidget-highlights',
+		var highlightClass = 'mw-rcfilters-ui-changesListWrapperWidget-highlights',
 			$highlights = $( '<div>' )
 				.addClass( highlightClass )
 				.append(
@@ -258,10 +273,7 @@
 			);
 		} );
 
-		if (
-			( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
-			( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) )
-		) {
+		if ( this.inEnhancedMode() ) {
 			// Enhanced RC
 			$content.find( 'td.mw-enhanced-rc' )
 				.parent()
@@ -276,6 +288,15 @@
 		}
 	};
 
+	/**
+	 * @return {boolean} Whether the changes are grouped by page
+	 */
+	mw.rcfilters.ui.ChangesListWrapperWidget.prototype.inEnhancedMode = function () {
+		var uri = new mw.Uri();
+		return ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
+			( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) );
+	};
+
 	/**
 	 * Apply color classes based on filters highlight configuration
 	 */