Revisions UI: Disable previous and next buttons when you're on the first, and last node. Put revision ticks above the slider range. props lessbloat for initial patch. see #23899.

git-svn-id: http://core.svn.wordpress.org/trunk@24020 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-classic.css

@@ -1491,7 +1491,7 @@ table.diff .diff-addedline ins {
 }
 
 .revision-tick.completed-true {
-	background-color: #aaa;
+	background-color: #d1e5ee;
 }
 
 .diff-label {

wp-admin/css/colors-fresh.css

@@ -1385,7 +1385,7 @@ table.diff .diff-addedline ins {
 }
 
 .revision-tick.completed-true {
-	background-color: #aaa;
+	background-color: #d7d7d7;
 }
 
 .diff-label {

wp-admin/css/wp-admin.css

@@ -3628,7 +3628,7 @@ table.diff .diff-addedline ins {
 
 #diff-slider-ticks {
 	position: absolute;
-	z-index: 1;
+	z-index: 2;
 	margin-top: 20px;
 }
 

wp-admin/js/revisions.js

@@ -243,6 +243,24 @@ window.wp = window.wp || {};
 			this.reloadRight();
 		},
 
+		disabledButtonCheck: function( val ) {
+			var maxVal = this.revisions.length - 1,
+				next = $( '#next' ),
+				prev = $( '#previous' );
+
+			// Disable "Next" button if you're on the last node
+			if ( maxVal === val )
+				next.prop( 'disabled', true );
+			else
+				next.prop( 'disabled', false );
+
+			// Disable "Previous" button if you're on the 0 node
+			if ( 0 === val )
+				prev.prop( 'disabled', true );
+			else
+				prev.prop( 'disabled', false );
+		},
+
 		completeApplicationSetup: function() {
 			this.revisionView = new revisions.view.Diff({
 				model: this.revisions
@@ -293,6 +311,7 @@ window.wp = window.wp || {};
 			if ( this.singleRevision ) {
 				Diff.rightDiff = ( ui.value + 1 );
 				Diff.revisionView.render();
+				Diff.disabledButtonCheck( ui.value );
 			} else {
 				if ( ui.values[0] === ui.values[1] ) // prevent compare to self
 					return false;
@@ -416,6 +435,8 @@ window.wp = window.wp || {};
 			// Triggers the slide event
 			if ( slide )
 				$( '#diff-slider' ).trigger( 'slide' );
+
+			Diff.disabledButtonCheck( options.value );
 		},
 
 		option: function( key ) {