Revisions: Loading indicator, cleanup, bug fixes.

* Loading indicator when the user is waiting for a trip to the server.
* Bug fixes for diff priming.
* Fix the date display.
* Forget about local comparator, instead order by `modified` on the server.
* Initialize the frame model before the view (this was the source of a LOT of heartache).

git-svn-id: https://develop.svn.wordpress.org/trunk@24667 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/css/wp-admin.css

@@ -3538,6 +3538,39 @@ td.plugin-title p {
 	height: 140px;
 }
 
+.revisions .loading-indicator {
+	position: absolute;
+	text-align: center;
+	vertical-align: middle;
+	opacity: 0;
+	margin: 0 auto;
+	width: 100%;
+	height: 32px;
+	top: 3em;
+	background: #fff url(../images/wpspin_light-2x.gif) no-repeat center top;
+	-webkit-transition: opacity 0.5s;
+	-moz-transition:    opacity 0.5s;
+	-ms-transition:     opacity 0.5s;
+	-o-transition:      opacity 0.5s;
+	transition:         opacity 0.5s;
+}
+
+.revisions.loading .loading-indicator {
+	opacity: 1;
+}
+
+.revisions .diff {
+	-webkit-transition: opacity 0.5s;
+	-moz-transition:    opacity 0.5s;
+	-ms-transition:     opacity 0.5s;
+	-o-transition:      opacity 0.5s;
+	transition:         opacity 0.5s;
+}
+
+.revisions.loading .diff {
+	opacity: 0.5;
+}
+
 .revisions-meta {
 	margin-top: 15px;
 }

wp-admin/includes/ajax-actions.php

@@ -2092,8 +2092,6 @@ function wp_ajax_heartbeat() {
 function wp_ajax_get_revision_diffs() {
 	require ABSPATH . 'wp-admin/includes/revision.php';
 
-	// check_ajax_referer( 'revisions-ajax-nonce', 'nonce' );
-
 	if ( ! $post = get_post( (int) $_REQUEST['post_id'] ) )
 		wp_send_json_error();
 

wp-admin/includes/revision.php

@@ -66,11 +66,12 @@ function wp_prepare_revisions_for_js( $post, $selected_revision_id, $from = null
 	$revisions = array();
 	$now_gmt = time();
 
-	$revisions = wp_get_post_revisions( $post->ID );
+	$revisions = wp_get_post_revisions( $post->ID, array( 'order' => 'ASC', 'orderby' => 'modified' ) );
 
 	cache_users( wp_list_pluck( $revisions, 'post_author' ) );
 
 	foreach ( $revisions as $revision ) {
+		$modified = strtotime( $revision->post_modified );
 		$modified_gmt = strtotime( $revision->post_modified_gmt );
 		$restore_link = wp_nonce_url(
 			add_query_arg(
@@ -88,9 +89,8 @@ function wp_prepare_revisions_for_js( $post, $selected_revision_id, $from = null
 				'avatar' => get_avatar( $revision->post_author, 24 ),
 				'name'   => get_the_author_meta( 'display_name', $revision->post_author ),
 			),
-			'date'         => date_i18n( __( 'M j, Y @ G:i' ), $modified_gmt ),
+			'date'         => date_i18n( __( 'M j, Y @ G:i' ), $modified ),
-			'dateShort'    => date_i18n( _x( 'j M @ G:i', 'revision date short format' ), $modified_gmt ),
+			'dateShort'    => date_i18n( _x( 'j M @ G:i', 'revision date short format' ), $modified ),
-			'dateUnix'     => $modified_gmt,
 			'timeAgo'      => sprintf( __( '%s ago' ), human_time_diff( $modified_gmt, $now_gmt ) ),
 			'autosave'     => wp_is_post_autosave( $revision ),
 			'current'      => $revision->post_modified_gmt === $post->post_modified_gmt,
@@ -99,16 +99,13 @@ function wp_prepare_revisions_for_js( $post, $selected_revision_id, $from = null
 	}
 
 	// Now, grab the initial diff
-	if ( ! $from ) { // Single mode
+	$compare_two_mode = (bool) $from;
-		$initial_revisions = array_reverse( array_keys( array_slice( $revisions, array_search( $selected_revision_id, array_keys( $revisions ) ), 2, true ) ) );
+	if ( ! $from ) // Single mode
-		$compare_two_mode = false;
+		$from = array_keys( array_slice( $revisions, array_search( $selected_revision_id, array_keys( $revisions ) ) - 1, 1, true ) )[0];
-	} else { // Compare two
+
-		$compare_two_mode = true;
-		$initial_revisions = array( $from, $selected_revision_id );
-	}
 	$diffs = array( array(
-		'id' => $initial_revisions[0] . ':' . $initial_revisions[1],
+		'id' => $from . ':' . $selected_revision_id,
-		'fields' => wp_get_revision_ui_diff( $post->ID, $initial_revisions[0], $initial_revisions[1] ),
+		'fields' => wp_get_revision_ui_diff( $post->ID, $from, $selected_revision_id ),
 	));
 
 	return array(
@@ -120,5 +117,6 @@ function wp_prepare_revisions_for_js( $post, $selected_revision_id, $from = null
 		'diffData'         => $diffs,
 		'baseUrl'          => parse_url( admin_url( 'revision.php' ), PHP_URL_PATH ),
 		'compareTwoMode'   => absint( $compare_two_mode ), // Apparently booleans are not allowed
+		'revisionIds'      => array_keys( $revisions ),
 	);
 }

wp-admin/js/revisions.js

@@ -129,15 +129,6 @@ window.wp = window.wp || {};
 			_.bindAll( this, 'next', 'prev' );
 		},
 
-		comparator: function( a, b ) {
-			var a_ = a.get('dateUnix');
-			var b_ = b.get('dateUnix');
-			var cmp = (a_ > b_) - (a_ < b_);
-			if (cmp === 0 && a.id != b.id)
-				cmp = a.id < b.id ? -1 : 1;
-			return cmp;
-		},
-
 		next: function( revision ) {
 			var index = this.indexOf( revision );
 
@@ -335,23 +326,24 @@ window.wp = window.wp || {};
 			// Set the initial diffs collection provided through the settings
 			this.diffs.set( revisions.settings.diffData );
 
-			// Set the initial revisions, baseUrl, and mode as provided through settings
-			properties.to = this.revisions.get( revisions.settings.to );
-			properties.from = this.revisions.get( revisions.settings.from ) || this.revisions.prev( properties.to );
-			properties.compareTwoMode = revisions.settings.compareTwoMode;
-			properties.baseUrl = revisions.settings.baseUrl;
-			this.set( properties );
-
-			// Start the router. This will trigger a navigate event and ensure that
-			// the `from` and `to` revisions accurately reflect the hash.
-			this.router = new revisions.Router({ model: this });
-			Backbone.history.start({ pushState: true });
-
 			// Set up internal listeners
 			this.listenTo( this, 'change:from', this.changeRevisionHandler );
 			this.listenTo( this, 'change:to', this.changeRevisionHandler );
 			this.listenTo( this, 'update:revisions', this.loadSurrounding );
 			this.listenTo( this, 'change:compareTwoMode', this.changedMode );
+			this.listenTo( this.diffs, 'ensure:load', this.updateLoadingStatus );
+			this.listenTo( this, 'update:diff', this.updateLoadingStatus );
+
+			// Set the initial revisions, baseUrl, and mode as provided through settings
+			properties.to = this.revisions.get( revisions.settings.to );
+			properties.from = this.revisions.get( revisions.settings.from );
+			properties.compareTwoMode = revisions.settings.compareTwoMode;
+			properties.baseUrl = revisions.settings.baseUrl;
+			this.set( properties, { silent: true } );
+
+			// Start the router
+			this.router = new revisions.Router({ model: this });
+			Backbone.history.start({ pushState: true });
 		},
 
 		changedMode: function() {
@@ -359,6 +351,10 @@ window.wp = window.wp || {};
 			this.loadSurrounding( this.get( 'from' ), this.get( 'to' ) );
 		},
 
+		updateLoadingStatus: function() {
+			this.set( 'loading', ! this.diff() );
+		},
+
 		loadSurrounding: function( from, to ) {
 			// Different strategies for single and compare-two models
 			if ( this.get( 'compareTwoMode' ) ) {
@@ -441,13 +437,9 @@ window.wp = window.wp || {};
 		template: wp.template('revisions-frame'),
 
 		initialize: function() {
-			// Generate the frame model.
-			this.model = new revisions.model.FrameState({}, {
-				revisions: this.collection
-			});
-
 			this.listenTo( this.model, 'update:diff', this.renderDiff );
 			this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
+			this.listenTo( this.model, 'change:loading', this.updateLoadingStatus );
 
 			this.views.set( '.revisions-control-frame', new revisions.view.Controls({
 				model: this.model
@@ -455,6 +447,7 @@ window.wp = window.wp || {};
 		},
 
 		render: function() {
+			console.log( 'diff', this.model.diff() );
 			this.model.updateDiff({ immediate: true }).done( _.bind( function() {
 				wp.Backbone.View.prototype.render.apply( this, arguments );
 
@@ -472,6 +465,10 @@ window.wp = window.wp || {};
 			}) );
 		},
 
+		updateLoadingStatus: function() {
+			this.$el.toggleClass( 'loading', this.model.get('loading') );
+		},
+
 		updateCompareTwoMode: function() {
 			this.$el.toggleClass( 'comparing-two-revisions', this.model.get('compareTwoMode') );
 		}
@@ -1013,7 +1010,9 @@ window.wp = window.wp || {};
 	// Initialize the revisions UI.
 	revisions.init = function() {
 		revisions.view.frame = new revisions.view.Frame({
-			collection: new revisions.model.Revisions( revisions.settings.revisionData )
+			model: new revisions.model.FrameState({}, {
+				revisions: new revisions.model.Revisions( revisions.settings.revisionData )
+			})
 		}).render();
 	};
 

wp-admin/revision.php

@@ -185,10 +185,13 @@ require_once( './admin-header.php' );
 </script>
 
 <script id="tmpl-revisions-diff" type="text/html">
+	<div class="loading-indicator"></div>
+	<div class="diff">
 	<# _.each( data.fields, function( field ) { #>
 		<h3>{{{ field.name }}}</h3>
 		{{{ field.diff }}}
 	<# }); #>
+	</div>
 </script>