Ticket #23497: 23497.24.diff

wp-includes/post-template.php

@@ -1315 +1315 @@
         $date = date_i18n( $datef, strtotime( $revision->post_modified ) );
         if ( $link && current_user_can( 'edit_post', $revision->ID ) && $link = get_edit_post_link( $revision->ID ) )
                 $date = "<a href='$link'>$date</a>";
-        
+
         $revision_date_author = sprintf(
                 '%s %s, %s %s (%s)',
                 $gravatar,
@@ -1393 +1393 @@
         if ( $parent )
                 array_unshift( $revisions, $post );
 
+        //if ( wp_first_revision_matches_current_version( $post_id ) )
+                array_pop( $revisions );
+
         $rows = $right_checked = '';
         $class = false;
         $can_edit_post = current_user_can( 'edit_post', $post->ID );
@@ -1479 +1482 @@
                 // if the post was previously restored from a revision
                 // show the restore event details
                 //
-                if ( $restored_from_meta = get_post_meta( $post->ID, '_post_restored_from', true ) ) { 
-                        $author = get_the_author_meta( 'display_name', $restored_from_meta[ 'restored_by_user' ] ); 
-                        /* translators: revision date format, see http://php.net/date */ 
-                        $datef = _x( 'j F, Y @ G:i:s', 'revision date format'); 
-                        $date = date_i18n( $datef, strtotime( $restored_from_meta[ 'restored_time' ] ) ); 
-                        $timesince = human_time_diff( $restored_from_meta[ 'restored_time' ], current_time( 'timestamp' ) ) . __( ' ago ' ); 
-                        ?> 
+                if ( $restored_from_meta = get_post_meta( $post->ID, '_post_restored_from', true ) ) {
+                        $author = get_the_author_meta( 'display_name', $restored_from_meta[ 'restored_by_user' ] );
+                        /* translators: revision date format, see http://php.net/date */
+                        $datef = _x( 'j F, Y @ G:i:s', 'revision date format');
+                        $date = date_i18n( $datef, strtotime( $restored_from_meta[ 'restored_time' ] ) );
+                        $timesince = human_time_diff( $restored_from_meta[ 'restored_time' ], current_time( 'timestamp' ) ) . __( ' ago ' );
+                        ?>
                         <hr />
-                        <div id="revisions-meta-restored"> 
-                                <?php 
-                                printf( 'Previously restored from Revision ID %d, %s by %s (%s)', 
-                                $restored_from_meta[ 'restored_revision_id'], 
-                                $timesince, 
-                                $author, 
-                                $date ); 
-                                ?> 
-                        </div> 
-                        <?php 
+                        <div id="revisions-meta-restored">
+                                <?php
+                                printf( 'Previously restored from Revision ID %d, %s by %s (%s)',
+                                $restored_from_meta[ 'restored_revision_id'],
+                                $timesince,
+                                $author,
+                                $date );
+                                ?>
+                        </div>
+                        <?php
                 echo "</ul>";
-                } 
+                }
 
         endif;
 

wp-includes/revision.php

@@ -62 +62 @@
 /**
  * Saves an already existing post as a post revision.
  *
- * Typically used immediately prior to post updates.
+ * Typically used immediately prior and after post updates.
+ * Prior to update checks for old revision data (latest revision != current post before update) and adds a copy of the current post as a revision if missing
+ * After update adds a copy of the current post as a revision, so latest revision always matches current post
  *
  * @package WordPress
  * @subpackage Post_Revisions
  * @since 2.6.0
  *
  * @uses _wp_put_post_revision()
+ * @uses wp_first_revision_matches_current_version()
  *
  * @param int $post_id The ID of the post to save as a revision.
  * @return mixed Null or 0 if error, new revision ID, if success.
  */
-function wp_save_post_revision( $post_id, $new_data = null ) {
-        // We do autosaves manually with wp_create_post_autosave()
+function wp_save_post_revision( $post_id ) {
+        //check to see if the post's first revision already matches the post data
+        //should be true before post update, _except_ for old data which
+        //doesn't include a copy of the current post data in revisions
+        if ( wp_first_revision_matches_current_version( $post_id ) )
+                return;
+
         if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
                 return;
 
@@ -82 +90 @@
         if ( ! WP_POST_REVISIONS )
                 return;
 
-        if ( !$post = get_post( $post_id, ARRAY_A ) )
+        if ( ! $post = get_post( $post_id, ARRAY_A ) )
                 return;
 
         if ( 'auto-draft' == $post['post_status'] )
                 return;
 
-        if ( !post_type_supports($post['post_type'], 'revisions') )
+        if ( ! post_type_supports( $post['post_type'], 'revisions' ) )
                 return;
 
-        // if new data is supplied, check that it is different from last saved revision, unless a plugin tells us to always save regardless
-        if ( apply_filters( 'wp_save_post_revision_check_for_changes', true, $post, $new_data ) && is_array( $new_data ) ) {
-                $post_has_changed = false;
-                foreach ( array_keys( _wp_post_revision_fields() ) as $field ) {
-                        if ( normalize_whitespace( $new_data[ $field ] ) != normalize_whitespace( $post[ $field ] ) ) {
-                                $post_has_changed = true;
-                                break;
+        // compare the proposed update with the last stored revision, verify
+        // different, unless a plugin tells us to always save regardless
+        if ( $revisions = wp_get_post_revisions( $post_id ) ) { // grab the last revision
+                $last_revision = array_shift( $revisions );
+
+                if ( $last_revision_array = get_post( $last_revision->ID, ARRAY_A ) ) { //if no previous revisions, save one for sure
+
+                        if ( apply_filters( 'wp_save_post_revision_check_for_changes', true, $last_revision_array, $post ) && is_array( $post ) ) {
+                                $post_has_changed = false;
+
+                                foreach ( array_keys( _wp_post_revision_fields() ) as $field ) {
+
+                                        if ( normalize_whitespace( $post[ $field ] ) != normalize_whitespace( $last_revision_array[ $field ] ) ) {
+                                                $post_has_changed = true;
+                                                break;
+
+                                        }
+                                }
+
+                                //don't save revision if post unchanged
+                                if( ! $post_has_changed )
+                                        return;
                         }
                 }
-                //don't save revision if post unchanged
-                if( ! $post_has_changed )
-                        return;
         }
 
         $return = _wp_put_post_revision( $post );
 
         // WP_POST_REVISIONS = true (default), -1
-        if ( !is_numeric( WP_POST_REVISIONS ) || WP_POST_REVISIONS < 0 )
+        if ( ! is_numeric( WP_POST_REVISIONS ) || WP_POST_REVISIONS < 0 )
                 return $return;
 
         // all revisions and (possibly) one autosave
         $revisions = wp_get_post_revisions( $post_id, array( 'order' => 'ASC' ) );
 
         // WP_POST_REVISIONS = (int) (# of autosaves to save)
-        $delete = count($revisions) - WP_POST_REVISIONS;
+        $delete = count( $revisions ) - WP_POST_REVISIONS;
 
         if ( $delete < 1 )
                 return $return;
@@ -123 +143 @@
         $revisions = array_slice( $revisions, 0, $delete );
 
         for ( $i = 0; isset($revisions[$i]); $i++ ) {
-                if ( false !== strpos( $revisions[$i]->post_name, 'autosave' ) )
+                if ( false !== strpos( $revisions[ $i ]->post_name, 'autosave' ) )
                         continue;
-                wp_delete_post_revision( $revisions[$i]->ID );
+                wp_delete_post_revision( $revisions[ $i ]->ID );
         }
 
         return $return;
@@ -418 +438 @@
                 add_filter('the_preview', '_set_preview');
         }
 }
+
+/**
+ * Determines if the specified post's most recent revision matches the post (by checking post_modified).
+ *
+ * @package WordPress
+ * @subpackage Post_Revisions
+ * @since 3.6.0
+ *
+ * @param int|object $post Post ID or post object.
+ * @return bool false if not a match, otherwise true.
+ */
+function wp_first_revision_matches_current_version( $post ) {
+
+        if ( ! $post = get_post( $post ) )
+                return false;
+
+        if ( ! $revisions = wp_get_post_revisions( $post->ID ) )
+                return false;
+
+        $last_revision = array_shift( $revisions );
+
+        if ( ! ($last_revision->post_modified == $post->post_modified ) )
+                return false;
+
+        return true;
+}

wp-includes/pluggable.php

@@ -1744 +1744 @@
         return $r;
 }
 endif;
+
+if ( !function_exists( 'wp_text_diff_with_count' ) ) :
+/**
+ * Displays a human readable HTML representation of the difference between two strings.
+ * similar to wp_text_diff, but tracks and returns could of lines added and removed
+ *
+ * @since 3.6
+ * @see wp_parse_args() Used to change defaults to user defined settings.
+ * @uses Text_Diff
+ * @uses WP_Text_Diff_Renderer_Table
+ *
+ * @param string $left_string "old" (left) version of string
+ * @param string $right_string "new" (right) version of string
+ * @param string|array $args Optional. Change 'title', 'title_left', and 'title_right' defaults.
+ * @return array contains html, linesadded & linesdeletd, empty string if strings are equivalent.
+ */
+function wp_text_diff_with_count( $left_string, $right_string, $args = null ) {
+        $defaults = array( 'title' => '', 'title_left' => '', 'title_right' => '' );
+        $args = wp_parse_args( $args, $defaults );
+
+        if ( !class_exists( 'WP_Text_Diff_Renderer_Table' ) )
+                        require( ABSPATH . WPINC . '/wp-diff.php' );
+
+        $left_string  = normalize_whitespace( $left_string );
+        $right_string = normalize_whitespace( $right_string );
+
+        $left_lines  = explode( "\n", $left_string );
+        $right_lines = explode( "\n", $right_string) ;
+
+        $text_diff = new Text_Diff($left_lines, $right_lines  );
+        $linesadded = $text_diff->countAddedLines();
+        $linesdeleted = $text_diff->countDeletedLines();
+
+        $renderer  = new WP_Text_Diff_Renderer_Table();
+        $diff = $renderer->render( $text_diff );
+
+        if ( !$diff )
+                        return '';
+
+                $r  = "<table class='diff'>\n";
+
+        if ( ! empty( $args[ 'show_split_view' ] ) ) {
+                $r .= "<col class='content diffsplit left' /><col class='content diffsplit middle' /><col class='content diffsplit right' />";
+        } else {
+                $r .= "<col class='content' />";
+        }
+
+        if ( $args['title'] || $args['title_left'] || $args['title_right'] )
+                $r .= "<thead>";
+        if ( $args['title'] )
+                $r .= "<tr class='diff-title'><th colspan='4'>$args[title]</th></tr>\n";
+        if ( $args['title_left'] || $args['title_right'] ) {
+                $r .= "<tr class='diff-sub-title'>\n";
+                $r .= "\t<td></td><th>$args[title_left]</th>\n";
+                $r .= "\t<td></td><th>$args[title_right]</th>\n";
+                $r .= "</tr>\n";
+        }
+        if ( $args['title'] || $args['title_left'] || $args['title_right'] )
+                $r .= "</thead>\n";
+
+        $r .= "<tbody>\n$diff\n</tbody>\n";
+        $r .= "</table>";
+
+        return array( 'html' => $r, 'linesadded' => $linesadded, 'linesdeleted' => $linesdeleted );
+        }
+        endif;

wp-includes/script-loader.php

@@ -273 +273 @@
         $scripts->add( 'template', "/wp-includes/js/template$suffix.js", array('underscore'), '1.4.4', 1 );
         $scripts->add( 'backbone', '/wp-includes/js/backbone.min.js', array('underscore','jquery', 'template'), '0.9.10', 1 );
 
-        $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'backbone', 'jquery-ui-slider' ), false, 1 );
+        $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'backbone', 'jquery-ui-slider', 'jquery-ui-tooltip' ), false, 1 );
 
         $scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );
 

wp-admin/includes/ajax-actions.php

@@ -2158 +2158 @@
         /* translators: revision date format, see http://php.net/date */
         $datef = _x( 'j F, Y @ G:i:s', 'revision date format');
 
+        $left_revision = get_post( $compare_to );
+        //error_log($left_revision);
         //single model fetch mode
+        //return the diff of a single revision comparison
         if ( 0 != $single_revision_id ) {
-                $left_revision = get_post( $compare_to );
                 $right_revision = get_post( $single_revision_id );
 
-                if ( $compare_two_mode ) {
-                        $compare_to_gravatar = get_avatar( $left_revision->post_author, 18 );
-                        $compare_to_author = get_the_author_meta( 'display_name', $left_revision->post_author );
-                        $compare_to_date = date_i18n( $datef, strtotime( $left_revision->post_modified ) );
-
-                        $revision_from_date_author = sprintf(
-                                '%s %s, %s %s (%s)',
-                                $compare_to_gravatar,
-                                $compare_to_author,
-                                human_time_diff( strtotime( $left_revision->post_modified ), current_time( 'timestamp' ) ),
-                                __( ' ago ' ),
-                                $compare_to_date
-                        );
-                }
-
                 //
                 //make sure the left revision is the most recent
                 //
@@ -2187 +2174 @@
                         $right_revision = $temp;
                 }
 
+                $linesadded=0;
+                $linesdeleted=0;
+
                 //
                 //compare from left to right, passed from application
                 //
@@ -2202 +2192 @@
                         if ( ! empty( $show_split_view ) )
                                  $args = array( 'show_split_view' => true );
 
-                        $content .= wp_text_diff( $left_content, $right_content, $args );
+                        $diff = wp_text_diff_with_count( $left_content, $right_content, $args );
+
+                        if ( isset( $diff[ 'html' ] ) )
+                                $content .= $diff[ 'html' ];
+
+                        if ( isset( $diff[ 'linesadded' ] ) )
+                                $linesadded = $linesadded + $diff[ 'linesadded' ];
+
+                        if ( isset( $diff[ 'linesdeleted' ] ) )
+                                $linesdeleted = $linesdeleted + $diff[ 'linesdeleted' ];
+
+
                 }
-                        $content = '' == $content ? __( 'No difference' ) : $content;
-                        $alltherevisions = array (
-                                'revisiondiff' => $content
-                        );
+                $content = '' == $content ? __( 'No difference' ) : $content;
+
+                $alltherevisions = array (
+                        'revisiondiff' => $content,
+                        'lines_deleted' => $linesdeleted,
+                        'lines_added' => $linesadded
+                );
                 echo json_encode( $alltherevisions );
                 exit();
-        }
+        } //end single model fetch
 
+        //fetch the list of revisions available
+
         //if we are comparing two revisions, the first 'revision' represented by the leftmost
         //slider position is the current revision, prepend a comparison to this revision
-        if ( $compare_two_mode ) 
+        if ( $compare_two_mode && ! wp_first_revision_matches_current_version( $post_id ) ) //revisions don't have current version
                 array_unshift( $revisions, get_post( $post_id ) );
-                
+
+if ( $compare_two_mode) // && wp_first_revision_matches_current_version( $post_id ) ) //revisions already include current version
+                array_shift( $revisions ); //remove the extra current revisions (comparing to current in one handle mode)
+
+
         $count = -1;
 
+        //reverse the list to start with oldes revision
+        $revisions = array_reverse( $revisions );
+
+        $previous_revision_id = 0;
         foreach ( $revisions as $revision ) :
-                if ( ! empty( $show_autosaves ) && wp_is_post_autosave( $revision ) )
+                //error_log( ( $show_autosaves  ));
+                if ( empty( $show_autosaves ) && wp_is_post_autosave( $revision ) )
                                 continue;
 
                 $revision_from_date_author = '';
                 $count++;
                 // return blank data for diffs to the left of the left handle (for right handel model)
                 // or to the right of the right handle (for left handel model)
-                if ( ( 0 != $left_handle_at && $count <= $left_handle_at ) || 
-                         ( 0 != $right_handle_at && $count > $right_handle_at )) { 
+                if ( ( 0 != $left_handle_at && $count <= $left_handle_at ) ||
+                         ( 0 != $right_handle_at && $count > $right_handle_at )) {
                         $alltherevisions[] = array (
                                 'ID' => $revision->ID,
                         );
-                        
                         continue;
                 }
 
-                $gravatar = get_avatar( $revision->post_author, 18 );
+                if ( $compare_two_mode ) {
+                        $compare_to_gravatar = get_avatar( $left_revision->post_author, 24 );
+                        $compare_to_author = get_the_author_meta( 'display_name', $left_revision->post_author );
+                        $compare_to_date = date_i18n( $datef, strtotime( $left_revision->post_modified ) );
+
+                        $revision_from_date_author = sprintf(
+                                '%s %s, %s %s (%s)',
+                                $compare_to_gravatar,
+                                $compare_to_author,
+                                human_time_diff( strtotime( $left_revision->post_modified ), current_time( 'timestamp' ) ),
+                                __( ' ago ' ),
+                                $compare_to_date
+                        );
+                }
+
+                $gravatar = get_avatar( $revision->post_author, 24 );
                 $author = get_the_author_meta( 'display_name', $revision->post_author );
                 $date = date_i18n( $datef, strtotime( $revision->post_modified ) );
                 $revision_date_author = sprintf(
@@ -2247 +2276 @@
                         __( ' ago ' ),
                         $date
                 );
+                $datef2 = __( 'j M @ G:i' );
+                $date2 = date_i18n( $datef2, strtotime( $revision->post_modified ) );
 
+                $revision_date_author_short = sprintf(
+                        '%s <strong>%s</strong><br />%s',
+                        $gravatar,
+                        $author,
+                        $date2
+                );
+
                 $restoreaction = wp_nonce_url(
                         add_query_arg(
                                 array( 'revision' => $revision->ID,
@@ -2257 +2295 @@
                         "restore-post_{$compare_to}|{$revision->ID}"
                 );
 
-                $alltherevisions[] = array (
+                if ( ( $compare_two_mode || 0 !== $previous_revision_id ) ) {
+                        $alltherevisions[] = array (
                                 'ID' => $revision->ID,
                                 'revision_date_author' => $revision_date_author,
                                 'revision_from_date_author' => $revision_from_date_author,
+                                'revision_date_author_short' => $revision_date_author_short,
                                 'restoreaction' => urldecode( $restoreaction ),
-                                'revision_toload' => true
+                                'revision_toload' => true,
+                                'previous_revision_id' => $previous_revision_id
                         );
+                }
+                $previous_revision_id = $revision->ID;
 
         endforeach;
 

wp-admin/js/revisions.js

@@ -7 +7 @@
 
                 Model : Backbone.Model.extend({
                         idAttribute : 'ID',
-                        urlRoot : ajaxurl +     '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
-                                '&show_autosaves=false&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
+                        urlRoot : ajaxurl +     '?action=revisions-data' +
+                                '&show_autosaves=true&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
                         defaults: {
                                 ID : 0,
                                 revision_date_author : '',
+                                revision_date_author_short: '',
                                 revisiondiff : '<div class="diff-loading"><div class="spinner"></div></div>',
                                 restoreaction : '',
                                 revision_from_date_author : '',
-                                revision_toload : false
+                                revision_toload : false,
+                                lines_added : 0,
+                                lines_deleted : 0,
+                                scope_of_changes : 'none',
+                                previous_revision_id : 0
                         },
 
                         url : function() {
-                                return this.urlRoot + '&single_revision_id=' + this.id;
+                                if ( 1 === REVAPP._compareoneortwo ) {
+                                        return this.urlRoot +
+                                                '&single_revision_id=' + this.id +
+                                                '&compare_to=' + this.get( 'previous_revision_id' ) +
+                                                '&post_id=' + wpRevisionsSettings.post_id;
+                                } else {
+                                        return this.urlRoot +
+                                '&single_revision_id=' + this.id
+                                }
+
                         }
 
                 }),
@@ -35 +49 @@
                         _revisionsOptions : null,
                         _left_diff : 0,
                         _right_diff : 1,
-                        _autosaves : false,
+                        _autosaves : true,
                         _show_split_view : true,
                         _compareoneortwo : 1,
                         _left_model_loading : false,    //keep track of model loads
                         _right_model_loading : false,   //disallow slider interaction, also repeat loads, while loading
+                        _tickmarkView : null, //the slider tickmarks
+                        _keep_tooltip_open : false,
 
                         //TODO add ability to arrive on specific revision
                         routes : {
@@ -54 +70 @@
                                 var revisions_to_load = model_collection.where( { revision_toload : true } );
                                 //console.log(revisions_to_load);
                                 var delay=0;
-                                _.each(revisions_to_load, function( the_model ) {
+                                //match slider to passed revision_id
+                                _.each( revisions_to_load, function( the_model ) {
+                                        if ( the_model.get( 'ID' )  == wpRevisionsSettings.revision_id ) {
+                                                //console.log ( the_model.get( 'ID' ) +'-' +wpRevisionsSettings.revision_id);
+                                                self._right_diff = self._revisions.indexOf( the_model ) + 1;
+                                        }
+
+                                });
+                                _.each( revisions_to_load, function( the_model ) {
                                                 the_model.urlRoot = model_collection.url;
                                                 _.delay( function() {
                                                         the_model.fetch( {
@@ -63 +87 @@
                                                                 remove : false,
                                                                 //async : false,
                                                                 success : function( model ) {
-                                                                        //console.log(model.get( 'ID' ) +'-'+self._revisions.at( self._right_diff ).get( 'ID' ));
-                                                                        if ( model.get( 'ID' ) === self._revisions.at( self._right_diff - 1 ).get( 'ID' ) ) { //reload if current model refreshed
+                                                                        model.set( 'revision_toload', 'false' );
+                                                                        //console.log(model_collection.where( { revision_toload : true } ).length);
+
+                                                                        //stop spinner when all models are loaded
+                                                                        if ( 0 === model_collection.where( { revision_toload : true } ).length )
+                                                                                self.stop_model_loading_spinner();
+
+                                                                        self._tickmarkView.render();
+
+                                                                        var total_changes = model.get( 'lines_added' ) + model.get( 'lines_deleted');
+                                                                        //      console.log(total_changes);
+                                                                        var scope_of_changes = 'vsmall';
+
+                                                                        //hard coded scope of changes
+                                                                        //TODO change to dynamic based on range of values
+                                                                        if  ( total_changes > 1 && total_changes <= 3 ) {
+                                                                                scope_of_changes = 'small';
+                                                                        } else if(total_changes > 3 && total_changes <= 5 ) {
+                                                                                scope_of_changes = 'med';
+                                                                        } else if(total_changes > 5 && total_changes <= 10 ) {
+                                                                                scope_of_changes = 'large';
+                                                                        } else if(total_changes > 10 ) {
+                                                                                scope_of_changes = 'vlarge';
+                                                                        }
+                                                                        model.set( 'scope_of_changes', scope_of_changes );
+                                                                        //console.log (self._right_diff);
+                                                                        if ( 0 !== self._right_diff &&
+                                                                                model.get( 'ID' ) === self._revisions.at( self._right_diff - 1 ).get( 'ID' ) ) {
+                                                                                //reload if current model refreshed
                                                                                 //console.log('render');
                                                                                 self._revisionView.render();
                                                                         }
+
                                                                 }
                                                 } );
                                                 }, delay ) ;
-                                                delay = delay + 200; //stagger model loads by 200 ms to avoid hammering server with requests
+                                                delay = delay + 150; //stagger model loads to avoid hammering server with requests
                                         }
                                 );
                         },
@@ -83 +135 @@
 
                         stop_left_model_loading : function() {
                                 this._left_model_loading = false;
-                                $('.revisiondiffcontainer').removeClass('leftmodelloading');
                         },
 
                         start_right_model_loading : function() {
@@ -93 +144 @@
 
                         stop_right_model_loading : function() {
                                 this._right_model_loading = false;
+                        },
+
+                        stop_model_loading_spinner : function() {
                                 $('.revisiondiffcontainer').removeClass('rightmodelloading');
+                                $('.revisiondiffcontainer').removeClass('leftmodelloading');
                         },
 
                         reloadmodel : function() {
@@ -107 +162 @@
                         reloadmodelsingle : function() {
                                 var self = this;
                                 self._revisions.url = ajaxurl + '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
-                                                                                        '&show_autosaves=' + self._autosaves +
+                                                                                        '&show_autosaves=' + REVAPP._autosaves +
                                                                                         '&show_split_view=' +  REVAPP._show_split_view +
                                                                                         '&nonce=' + wpRevisionsSettings.nonce;
                                 self.start_right_model_loading();
-                                this._revisions.fetch({ //reload revision data
+                                self._revisions.fetch({ //reload revision data
                                         success : function() {
                                                 self.stop_right_model_loading();
                                                 var revisioncount = self._revisions.length;
-                                                if ( self._right_diff > revisioncount ) //if right handle past rightmost, move
-                                                        self._right_diff = revisioncount;
+                                                //if ( self._right_diff > revisioncount ) //if right handle past rightmost, move
 
+                                                //      self._right_diff = revisioncount;
+
+
+
                                                 self._revisionView.render();
                                                 self.reload_toload_revisions( self._revisions );
 
                                                 $( '#slider' ).slider( 'option', 'max', revisioncount-1 ); //TODO test this, autsaves changed
+                                                $( '#slider' ).slider( 'value', REVAPP._right_diff - 1 ).trigger( 'slide' );
+                                                REVAPP._tickmarkView.model = self._revisions;
+                                                REVAPP._tickmarkView.render();
                                         },
 
                                         error : function () {
@@ -136 +197 @@
                                 var self = this;
                                 self.start_left_model_loading();
                                 self._left_handle_revisions = new wp.revisions.Collection();
+                                //console.log( 'right - ' + self._right_diff );
                                 self._left_handle_revisions.url =
                                         ajaxurl +
                                         '?action=revisions-data&compare_to=' + self._revisions.at( self._right_diff - 1 ).get( 'ID' ) +
                                         '&post_id=' + wpRevisionsSettings.post_id +
-                                        '&show_autosaves=' + self._autosaves +
-                                        '&show_split_view=' +  self._show_split_view +
+                                        '&show_autosaves=' + REVAPP._autosaves +
+                                        '&show_split_view=' +  REVAPP._show_split_view +
                                         '&nonce=' + wpRevisionsSettings.nonce +
                                         '&right_handle_at='  + ( self._right_diff );
 
@@ -150 +212 @@
                                         success : function(){
                                                 self.stop_left_model_loading();
                                                 self.reload_toload_revisions( self._left_handle_revisions );
+                                                self._tickmarkView.model = self._left_handle_revisions;
+                                                $( '#slider' ).slider( 'option', 'max', self._revisions.length );
                                         },
 
                                         error : function () {
@@ -163 +227 @@
                                 var self = this;
                                 self.start_right_model_loading();
                                 self._right_handle_revisions = new wp.revisions.Collection();
-                                if ( 0 === self._left_diff ) {
                                         self._right_handle_revisions.url =
                                                 ajaxurl +
-                                                '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
+                                                '?action=revisions-data&compare_to=' + self._revisions.at( self._left_diff ).get( 'ID' )+
                                                 '&post_id=' + wpRevisionsSettings.post_id +
-                                                '&show_autosaves=' + self._autosaves +
-                                                '&show_split_view=' +  self._show_split_view +
+                                                '&show_autosaves=' + REVAPP._autosaves +
+                                                '&show_split_view=' +  REVAPP._show_split_view +
                                                 '&nonce=' + wpRevisionsSettings.nonce;
-                                } else {
-                                        self._right_handle_revisions.url =
-                                                ajaxurl +
-                                                '?action=revisions-data&compare_to=' + self._revisions.at( self._left_diff - 1 ).get( 'ID' ) +
-                                                '&post_id=' + wpRevisionsSettings.post_id +
-                                                '&show_autosaves=' + self._autosaves +
-                                                '&show_split_view=' +  self._show_split_view +
-                                                '&nonce=' + wpRevisionsSettings.nonce +
-                                                '&left_handle_at=' + (self._left_diff ) ;
-                                }
 
                                 self._right_handle_revisions.fetch({
 
                                         success : function(){
                                                 self.stop_right_model_loading();
                                                 self.reload_toload_revisions( self._right_handle_revisions );
+                                                self._tickmarkView.model = self._right_handle_revisions;
+                                                $( '#slider' ).slider( 'option', 'max', self._revisions.length );
+                                                //REVAPP._revisionView.render();
+
                                         },
 
                                         error : function ( response ) {
@@ -208 +265 @@
                         initialize : function( options ) {
                                 var self = this; //store the application instance
                                 if (this._revisions === null) {
-                                        self._autosaves = '';
                                         self._revisions = new wp.revisions.Collection(); //set up collection
                                         self.start_right_model_loading();
                                         self._revisions.fetch({ //load revision data
 
                                                 success : function() {
                                                         self.stop_right_model_loading();
-                                                        self.revisionDiffSetup();
+                                                        self.completeApplicationSetup();
                                                 }
                                         });
                                 }
                                 return this;
                         },
 
-                        revisionDiffSetup : function() {
+                        completeApplicationSetup : function() {
                                 this._revisionView = new wp.revisions.views.View({
                                         model : this._revisions
                                 });
                                 this._revisionView.render();
-                                $( '#diff_max, #diff_maxof' ).html( this._revisions.length );
-                                $( '#diff_count' ).html( REVAPP._right_diff );
                                 $( '#slider' ).slider( 'option', 'max', this._revisions.length - 1 );
 
                                 this.reload_toload_revisions( this._revisions );
+
                                 this._revisionsInteractions = new wp.revisions.views.Interact({
                                         model : this._revisions
                                 });
                                 this._revisionsInteractions.render();
 
+                                this._tickmarkView = new wp.revisions.views.Tickmarks({
+                                        model : this._revisions
+                                });
+                                this._tickmarkView.render();
+                                this._tickmarkView.resetticks();
+
+                                $( 'a.ui-slider-handle' ).attr( 'title', '' ).tooltip({
+                                        track: false,
+                                        position: {
+                                                my: "top-80",
+                                                active: function( position, feedback ) {
+                                                        $( this ).css( position );
+                                                        $( "<div>" )
+                                                        .addClass( "arrow" )
+                                                        .addClass( feedback.vertical )
+                                                        .addClass( feedback.horizontal )
+                                                        .appendTo( this );
+                                                }
+                                        },
+                                        show: false,
+                                        hide: false,
+                                        disabled: false
+                                } );
                                 /*
+                                .on( 'mouseup', function( event ) {
+                                        REVAPP._keep_tooltip_open = false;
+                                        $( this ).find('.ui-slider-tooltip').hide();
+                                } ).on( 'mousedown', function( event ) {
+                                        REVAPP._keep_tooltip_open = true;
+                                } ).on( 'mouseout', function( event ) {
+                                        if ( REVAPP._keep_tooltip_open)
+                                                event.stopImmediatePropagation();
+                                        });
+                                */
+                                /*
                                 //Options hidden for now, moving to screen options
                                 this._revisionsOptions = new wp.revisions.views.Options({
                                         model : this._revisions
@@ -252 +341 @@
         wp.revisions.Collection = Backbone.Collection.extend({
                 model : wp.revisions.Model,
                 url : ajaxurl + '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
-                        '&show_autosaves=false&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
+                        '&show_autosaves=true&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
 
                 initialize : function() {
                         }
         } );
 
         _.extend(wp.revisions.views, {
+
+                //Ticks inside slider view
                 //
+                Tickmarks : Backbone.View.extend({
+                        el : $('#diff-slider-ticks')[0],
+                        tagName : 'diff-slider-ticks-view',
+                        className : 'diff-slider-ticks-container',
+                        template : wp.template('revision-ticks'),
+                        model : wp.revisions.Model,
+
+                        resetticks : function() {
+                                var slider_max = $( '#slider' ).slider( 'option', 'max');
+                                var slider_width = $( '#slider' ).width();
+                                var adjust_max = ( 2 === REVAPP._compareoneortwo ) ? 1 : 0;
+                                var tick_width = Math.floor( slider_width / ( slider_max - adjust_max ) );
+
+                                //TODO: adjust right margins for wider ticks so they stay centered on handle stop point
+
+                                tick_width = (tick_width > 50 ) ? 50 : tick_width;
+                                slider_width = tick_width * (slider_max - adjust_max ) +1;
+
+                                $( '#slider' ).width( slider_width );
+                                $( '.diff-slider-ticks-wrapper' ).width( slider_width );
+                                $( '#diffslider' ).width( slider_width );
+                                $( '#diff-slider-ticks' ).width( slider_width );
+
+                                var a_tick_width = $( '.revision-tick' ).width();
+
+                                if ( tick_width !==  a_tick_width ) { // is the width already set correctly?
+                                        $( '.revision-tick' ).each( function( ) {
+                                                $(this).css( 'margin-right', tick_width - 1 + 'px'); //space the ticks out using right margin
+                                        });
+
+                                        if( 2 === REVAPP._compareoneortwo ) {
+                                                $( '.revision-tick' ).first().remove(); //TODO - remove thie check
+                                        }
+                                        $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin
+                                }
+
+                        },
+
+                        //render the options view
+                        render : function() {
+                                var self = this;
+
+                                if ( null !== self.model ) {
+                                        //TODO remove this initial model when ticket #16215 rolls because
+                                        //revisions will then include current version
+                                        var add_placeholder = ( 2 === REVAPP._compareoneortwo ) ? self.template('') : '';
+
+                                        var addhtml = "";//add_placeholder;
+                                        _.each ( self.model.models, function ( the_model ) {
+
+                                                addhtml = addhtml + self.template ( the_model.toJSON() );
+
+                                        });
+                                        self.$el.html( addhtml );
+
+                                }
+                                self.resetticks();
+                                return self;
+                        }
+                }),
+
+                //
                 //primary revision diff view
                 //
                 View : Backbone.View.extend({
@@ -271 +424 @@
                         comparetwochecked : '',
                         draggingleft : false,
 
-                        initialize : function(){
-                        },
-
                         //
                         //render the revisions
                         //
                         render : function() {
                                 var addhtml = '';
                                 //compare two revisions mode?
+
                                 if ( 2 === REVAPP._compareoneortwo ) {
                                         this.comparetwochecked = 'checked';
                                         if ( this.draggingleft ) {
@@ -291 +442 @@
                                                 }
                                         } else { //dragging right handle
                                                 var thediff = REVAPP._right_diff;
+                                                //console.log( thediff )
                                                 if ( this.model.at( thediff ) ) {
                                                         addhtml = this.template( _.extend(
                                                                 this.model.at( thediff ).toJSON(),
@@ -310 +462 @@
                                 this.$el.html( addhtml );
                                 if ( this.model.length < 3 ) {
                                         $( 'div#comparetworevisions' ).hide(); //don't allow compare two if fewer than three revisions
-
                                 }
+                                if ( this.model.length < 2 ) {
+                                        $( 'div#diffslider' ).hide(); //don't allow compare two if fewer than three revisions
+                                        $( 'div.diff-slider-ticks-wrapper' ).hide();
+                                }
                                 //console.log ( (this.model.at( REVAPP._right_diff - 1 )).url());
                                 return this;
                         },
@@ -336 +491 @@
                                         REVAPP.reloadmodelsingle();
                                 }
                                 REVAPP._revisionsInteractions.render();
+                                REVAPP._tickmarkView.render();
+                                REVAPP._revisionView.render();
+
                         }
                 }),
 
                 //
                 //options view for show autosaves and show split view options
                 //
+                /* DISABLED for now
                 Options : Backbone.View.extend({
                         el : $('#backbonerevisionsoptions')[0],
                         tagName : 'revisionoptionsview',
                         className : 'revisionoptions-container',
                         template : wp.template('revisionoptions'),
 
-                        initialize : function() {
-                        },
-
                         //render the options view
                         render : function() {
                                 var addhtml = this.template;
@@ -396 +552 @@
                                 REVAPP.reloadmodel();
                         }
                 }),
-
+                */
                 //
                 //main interactions view
                 //
@@ -405 +561 @@
                         tagName : 'revisionvinteract',
                         className : 'revisionvinteract-container',
                         template : wp.template('revisionvinteract'),
-                        _restoreword : '',
 
                         initialize : function() {
-                                this._restoreword = $( 'input#restore' ).attr( 'value' );
                         },
 
-                        reset_restore_button : function() {
-                                $( 'input#restore' ).attr( 'value', this._restoreword + ' ' + REVAPP._revisions.at( REVAPP._right_diff - 1 ).get( 'ID' ) );
-                        },
-
                         render : function() {
                                 var self = this;
 
                                 var addhtml = this.template;
                                 this.$el.html( addhtml );
-                                $( '#diff_max, #diff_maxof' ).html( this.model.length );
-                                $( '#diff_count' ).html( REVAPP._right_diff );
-                                $( '#diff_left_count_inner' ).html( 0 === REVAPP._left_diff ? '' : 'revision' + REVAPP._left_diff );
-                                self.reset_restore_button();
 
                                 var modelcount = REVAPP._revisions.length;
 
@@ -431 +577 @@
                                 if ( 1 === REVAPP._compareoneortwo ) {
                                         //set up the slider with a single handle
                                         slider.slider({
-                                                value : REVAPP._right_diff-1,
-                                                min : 0,
-                                                max : modelcount-1,
-                                                step : 1,
+                                                value: REVAPP._right_diff-1,
+                                                min: 0,
+                                                max: modelcount-1,
+                                                step: 1,
 
+
                                                 //slide interactions for one handles slider
                                                 slide : function( event, ui ) {
-                                                        if ( REVAPP._right_model_loading ) //left model stoll loading, prevent sliding left handle
-                                                                                return false;
 
-                                                        REVAPP._right_diff =( ui.value+1 );
-                                                        $( '#diff_count' ).html( REVAPP._right_diff );
+                                                        REVAPP._right_diff = ( ui.value +1 );
                                                         REVAPP._revisionView.render();
-                                                        self.reset_restore_button();
-                                                }
+                                                        /*
+                                                        $( 'a.ui-slider-handle' ).tooltip( {
+                                                                content: REVAPP._revisions.at( ui.value ).get( 'revision_date_author_short' ),
+                                                                position: {
+                                                                my: "top-65",
+                                                                using: function( position, feedback ) {
+                                                                        $( this ).css( position );
+                                                                        $( "<div>" )
+                                                                        .addClass( "arrow" )
+                                                                        .addClass( feedback.vertical )
+                                                                        .addClass( feedback.horizontal )
+                                                                        .appendTo( this );
+                                                                        }
+                                                                }
+                                                        });//.trigger( 'close' ).trigger( 'open' );
+*/
+                                                        }
                                         });
                                         $( '.revisiondiffcontainer' ).removeClass( 'comparetwo' );
+
                                 } else { //comparing more than one, eg 2
                                         //set up the slider with two handles
                                         slider.slider({
@@ -467 +627 @@
                                                                                 return false;
 
                                                                         if ( REVAPP._revisionView.model !== REVAPP._left_handle_revisions &&
-                                                                                        null !== REVAPP._left_handle_revisions )
+                                                                                        null !== REVAPP._left_handle_revisions ) {
                                                                                 REVAPP._revisionView.model = REVAPP._left_handle_revisions;
-
+                                                                                REVAPP._tickmarkView.model = REVAPP._left_handle_revisions;
+                                                                                REVAPP._tickmarkView.render();
+                                                                        }
                                                                         REVAPP._revisionView.draggingleft = true;
                                                                         REVAPP._left_diff_start = ui.values[ 0 ];
                                                                         break;
 
                                                                 case 2: //right
-                                                                        if ( REVAPP._right_model_loading ) //right model stoll loading, prevent sliding right handle
+                                                                        if ( REVAPP._right_model_loading ) //left model stoll loading, prevent sliding left handle
                                                                                 return false;
 
                                                                         //one extra spot at left end when comparing two
                                                                         if ( REVAPP._revisionView.model !== REVAPP._right_handle_revisions &&
-                                                                                        null !== REVAPP._right_handle_revisions )
+                                                                                        null !== REVAPP._right_handle_revisions ) {
                                                                                 REVAPP._revisionView.model = REVAPP._right_handle_revisions;
+                                                                                REVAPP._tickmarkView.model = REVAPP._right_handle_revisions;
+                                                                                REVAPP._tickmarkView.render();
+                                                                        }
 
                                                                         REVAPP._revisionView.draggingleft = false;
                                                                         REVAPP._right_diff_start = ui.values[ 1 ];
@@ -501 +666 @@
                                                                         if ( REVAPP._left_model_loading ) //left model still loading, prevent sliding left handle
                                                                                 return false;
 
-                                                                        REVAPP._left_diff = ui.values[ 0 ] - 1; //one extra spot at left end when comparing two
+                                                                        REVAPP._left_diff = ui.values[ 0 ]; //one extra spot at left end when comparing two
                                                                         break;
 
                                                                 case 2: //right
-                                                                        if ( REVAPP._right_model_loading ) //right model still loading, prevent sliding right handle
-                                                                                return false;
+                                                                        REVAPP._right_diff = ui.values[ 1 ];
+                                                                        //console.log('setting ' + REVAPP._right_diff );
 
-                                                                        REVAPP._right_diff = ui.values[ 1 ] - 1 ;
                                                                         break;
                                                         }
 
-                                                        $( '#diff_count' ).html( REVAPP._right_diff );
-
                                                         if ( 0 === REVAPP._left_diff ) {
                                                                 $( '.revisiondiffcontainer' ).addClass( 'currentversion' );
 
                                                         } else {
                                                                 $( '.revisiondiffcontainer' ).removeClass( 'currentversion' );
-                                                                $( '#diff_left_count_inner' ).html( REVAPP._left_diff );
                                                         }
 
-                                                        REVAPP._revisionView.render(); //render the diff view
-                                                        self.reset_restore_button();
+                                                        REVAPP._revisionView.render();
+
                                                 },
 
                                                 //when the user stops sliding  in 2 handle mode, recalculate diffs
@@ -537 +698 @@
                                                                 switch ( index ) {
                                                                         case 1: //left
                                                                                 //left handle dragged & changed, reload right handle model
-                                                                                if ( ! ( REVAPP._left_diff_start === ui.values[ 0 ] || REVAPP._left_model_loading ) )
+                                                                                if ( REVAPP._left_diff_start !== ui.values[ 0 ] )
                                                                                         REVAPP.reloadright();
 
                                                                                 break;
 
                                                                         case 2: //right
                                                                                 //right handle dragged & changed, reload left handle model if changed
-                                                                                if ( ! ( REVAPP._right_diff_start === ui.values[ 1 ] || REVAPP._right_model_loading ) ) {
+                                                                                if ( REVAPP._right_diff_start !== ui.values[ 1 ] )
                                                                                         REVAPP.reloadleft();
-                                                                                }
+
                                                                                 break;
                                                                 }
                                                         }
@@ -571 +732 @@
 
                                 REVAPP._revisionView.render();
 
-                                $( '#diff_count' ).html( REVAPP._right_diff );
                                 $( '#slider' ).slider( 'value', REVAPP._right_diff - 1 ).trigger( 'slide' );
-                                this.reset_restore_button();
                         },
 
                         //go the the previous revision
@@ -583 +742 @@
 
                                 REVAPP._revisionView.render();
 
-                                $( '#diff_count' ).html( REVAPP._right_diff );
                                 $( '#slider' ).slider( 'value', REVAPP._right_diff - 1 ).trigger( 'slide' );
-                                this.reset_restore_button();
                         }
                 })
         });

wp-admin/revision.php

@@ -80 +80 @@
         $parent_file = $submenu_file = 'edit.php?post_type=' . $post->post_type;
 else
         $parent_file = $submenu_file = 'edit.php';
-
 wp_enqueue_script( 'revisions' );
 
 require_once( './admin-header.php' );
 
 //TODO - Some of the translations below split things into multiple strings that are contextually related and this makes it pretty impossible for RTL translation.
 //TODO can we pass the context in a better way
+$wpRevisionsSettings = array( 'post_id' => $post->ID,
+                                                'nonce' => wp_create_nonce( 'revisions-ajax-nonce' ),
+                                                'revision_id' => $revision_id );
+wp_localize_script( 'revisions', 'wpRevisionsSettings', $wpRevisionsSettings );
+
+$comparetworevisionslink = get_edit_post_link( $revision->ID );
 ?>
-<script type="text/javascript">
-var wpRevisionsSettings = <?php echo json_encode( array( 'post_id' => $post->ID, 'nonce' => wp_create_nonce( 'revisions-ajax-nonce' ) ) ); ?>;
-</script>
-<?php
-        $comparetworevisionslink = get_edit_post_link( $revision->ID );
-?>
 
-<div id="backbonerevisionsoptions"></div>
+<div id="backbonerevisionsoptions">
+</div>
 <div class="wrap">
-        <div class="icon32 icon32-posts-post" id="icon-edit"><br></div>
+        <div class="icon32 icon32-posts-post" id="icon-edit">
+                <br>
+        </div>
         <div class="revisiondiffcontainer diffsplit currentversion rightmodelloading">
-                <div id="modelsloading" class="updated message"><span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?></div>
+                <div id="modelsloading" class="updated message">
+                        <span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?>
+                </div>
                 <h2 class="long-header"><?php echo $h2; ?></h2>
-                <div id="backbonerevisionsinteract"></div>
-                <div id="backbonerevisionsdiff"></div>
+                <div class="diff-slider-ticks-wrapper">
+                        <div id="diff-slider-ticks">
+                        </div>
+                </div>
+                <div id="backbonerevisionsinteract">
+                </div>
+                <div id="backbonerevisionsdiff">
+                </div>
                 <hr />
         </div>
 </div>
 
 <script id="tmpl-revision" type="text/html">
+        <div id="diffsubheader" class="diff-left-hand-meta-row">
+                <div id="diff_from_current_revision">
+                        <b><?php _e( 'Comparing from:' ); ?></b> <?php _e( 'the current version' ); ?>
+                </div>
+                <div id="difftitlefrom"><b><?php _e( 'Comparing from:' ); ?></b> <?php _e( 'revision by' ); ?> {{{ data.revision_from_date_author }}} </div>
+        </div>
+
         <div id="diffsubheader">
-                <span id="diff_from_current_revision"><?php _e( 'Current version' ); ?><?php _e( '- compared to -' ); ?></span>
-                <div id="difftitlefrom">{{{ data.revision_from_date_author }}} <?php _e( '- compared to -' ); ?></div>
-                <div id="difftitle">{{{ data.revision_date_author }}}</div>
-                <div id="diffcancel"><input class="button" onClick="document.location='<?php echo get_edit_post_link( $post->ID ); ?>'" type="submit" id="cancel" value="<?php esc_attr_e( 'Cancel' )?>" /></div>
-                <div id="diffrestore"><input class="button button-primary" onClick="document.location='{{{ data.restoreaction }}}'" type="submit" id="restore" value="<?php esc_attr_e( 'Restore revision ID' )?>" /></div>
-                <div id="comparetworevisions"><input type="checkbox" id="comparetwo" value="comparetwo" {{{ data.comparetwochecked }}} name="comparetwo"/> <label for="comparetwo"><?php esc_attr_e( 'Compare two revisions' ); ?></a></div>    </div>
+                <div id="difftitle">
+                        <strong><?php _e( 'Comparing to:' ); ?></strong> <?php _e( 'revision by' ); ?> {{{ data.revision_date_author }}}
+                </div>
+                <div id="diffrestore">
+                        <input class="button button-primary" onClick="document.location='{{{ data.restoreaction }}}'" type="submit" id="restore" value="<?php esc_attr_e( 'Restore This Revision' )?>" />
+                </div>
+                <div id="comparetworevisions">
+                        <input type="checkbox" id="comparetwo" value="comparetwo" {{{ data.comparetwochecked }}} name="comparetwo"/>
+                                <label for="comparetwo"><?php esc_attr_e( 'Compare two revisions' ); ?></a></label>
+                </div>
+        </div>
+
         <div id="removedandadded">
                 <div id="removed"><?php _e( 'Removed -' ); ?></div>
                 <div id="added"><?php _e( 'Added +' ); ?></div>
@@ -124 +147 @@
 
 <script id="tmpl-revisionvinteract" type="text/html">
         <div id="diffheader">
-<div id="diffprevious"><input class="button" type="submit" id="previous" value="<?php esc_attr_e( 'Previous' ); ?>" /></div>
-                        <div id="diffnext"><input class="button" type="submit" id="next" value="<?php esc_attr_e( 'Next' ); ?>" /></div>
-                        <div id="diffslider">
-        <div id="revisioncount">
-                                        <?php _e( 'Comparing' ); ?>
-                                        <span id="diff_left_count"> <?php _e( 'revision' ); ?></span> <span id="diff_left_count_inner"></span>
-                                        <span id="diff_left_current_revision"><?php _e( 'current version' ); ?></span>
-                                        <span id="diff_revision_from">{{{ data.diff_revision_from }}}</span>
-                                        <?php _e( ' to revision' ); ?>
-                                        <span id="diff_count">{{{ data.current_diff }}}</span>
-                                        <?php _e( ' of ' ); ?>
-                                        <span id="diff_max" ></span>
-                                </div>
-
-                        <div id="slider" class="wp-slider"></div>
+                <div id="diffprevious"><input class="button" type="submit" id="previous" value="<?php esc_attr_e( 'Previous' ); ?>" />
                 </div>
+                <div id="diffnext"><input class="button" type="submit" id="next" value="<?php esc_attr_e( 'Next' ); ?>" />
+                </div>
+                <div id="diffslider">
+                        <div id="slider" class="wp-slider">
+                        </div>
+                </div>
         </div>
 </script>
+<script id="tmpl-revision-ticks" type="text/html">
+        <div class="revision-tick revision-toload{{{ data.revision_toload }}} revision-scopeofchanges-{{{ data.scope_of_changes }}}">
+        </div>
+</script>
 <?php
 /*
 TODO Convert these into screen options

wp-admin/css/colors-fresh.css

@@ -175 +175 @@
 .sidebar-name,
 #nav-menu-header,
 #nav-menu-footer,
-.menu-item-handle,
-.wp-slider .ui-slider-handle {
+.menu-item-handle {
         background: #f1f1f1;
         background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9));
         background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9);
@@ -185 +184 @@
         background-image: linear-gradient(to top, #ececec, #f9f9f9);
 }
 
+
+
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3 {
@@ -1382 +1383 @@
         background-color: #f7f7f7;
 }
 
+.comparetwo#diffsubheader.diff-left-hand-meta-row {
+        background-color: #fcfcfc;
+}
+
+.revision-tick.revision-toloadtrue {
+        background-color: #9999cc;
+        background: url(../images/wpspin_light.gif) no-repeat;
+        background-position: middle;
+        background-size: 1px 10px;
+}
+
+.revision-tick.revision-toloadfalse {
+        background-color: #aaa;
+}
+
 #att-info {
         background-color: #e4f2Fd;
 }
 
+body .ui-tooltip {
+        border-color: #d7d7d7;
+        background-color: #fff;
+}
+
 /* jQuery UI Slider */
 .wp-slider.ui-slider {
         border-color: #d7d7d7;
@@ -1393 +1414 @@
 }
 
 .wp-slider .ui-slider-handle {
-        border-color: #d7d7d7;
+        border-color: none;
 }
 
+.wp-slider .ui-slider-handle {
+        /* Slider drag Triangle CSS */
+background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA8FBMVEU2dZipwNBJl8VGmcX///+EpLlBgqpymrNFjru3ydNWiKs6eZzY4uuRrL08faPL3OZBjLSBqsCTssRHlMJEf59cj657o7xKl8OEqsE9gag2dJtEkb+ct8iZs8BHmMePq8BejKZAiK5llK5FjrlJl8c6dZdGl8avxdBJlcZ4nbc6ep6XrbpKgZ+Lqr5KmcdIkbqsws1Gk8E+f6c4dptaiadFirRKl8V8pblImcNIl8eGpruVscZCh7BMlsdIlcFImchEkbs9eJpCjbdGjbk8fJ84dp02dpo8gatMlsM2dps8faVAg61Ej71Ek75IksFIlcOaLCw7AAAAUHRSTlP/////AP///////////////////////////////////////////////////////////////////////////////////////////////////xB6m5UAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVcxZD8FAGIXhjxzUVktQgqKmo7ZYhkgsiS1tQuj//zeomo736uS5OFSo2W6UXc/R5hxXW5foxDlXqUKZx0GFZpXynuM4kXhjgjgyJkGzQIjpvi9Fx1uQ0iQUh4GkR/Ini0CQ2IfQ24YC4X8T+Mn0zj8lO1IgnqZpzlxE0m4YhrFsKYJVn126UGV+W1wHf4LdpByuF0goFKI7tv/dAAAAAElFTkSuQmCC');
+}
+
 .wp-slider .ui-slider-handle.ui-state-hover,
 .wp-slider .ui-slider-handle.ui-state-focus {
-        border-color: #aaa;
+        border-color: none;
+        outline: none;
 }
 
 .wp-slider .ui-slider-handle.ui-state-active {
-        border-color: #aaa;
-        background: #eee;
-        background-image: -webkit-gradient(linear, left bottom, left top, from(#f9f9f9), to(#ececec));
-        background-image: -webkit-linear-gradient(bottom, #f9f9f9, #ececec);
-        background-image:    -moz-linear-gradient(bottom, #f9f9f9, #ececec);
-        background-image:      -o-linear-gradient(bottom, #f9f9f9, #ececec);
-        background-image: linear-gradient(to top, #f9f9f9, #ececec);
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA51BMVEUgZpDkzc0yd6f///8mcqFJm8cjbZZzr80mg78lh8BDk8UngLl+s9AmfKk4hrGeweBaoMhNlMORwt4nd6Zdm8BAjMEnf7RYmsMkb50mhsFWlsYhZ5ImhbwocZg0f61Lk8E9i7twqNBgo8VSmMUofLBcm8o3faUpfK8mh8Aia5MgZpFMmcgpeapDmcJjo8sliMEmh70nhLkkcKAqgLF2sc8sc5ojbZsngrMkh8EnfKw1eaUjbpkkapImeKQgaJAohb0mh8MmhcMng7kkcKEpf68iZ48haJMmhb8kicEmc6MibJkia5UnhLsw1mWvAAAATXRSTlP/AP8A/////////////////////////////////////////////////////////////////////////////////////////////////9/iR18AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVc15D8FAEIfh+Ymj6761LIrSiCNVVyjbRGgifP/PQ6q22/evyZPJDNXzD6G0qNDq5PtO3DJDFyfRpk+po2Eo0h5Qx9U0LRa3SejdlR2rDMLI41yKh6/AtOSzUiuU4kvemSMUDBsRXGuRIHj/CvCXyTNcSXelQBQYY1uBWMY651xfK4KzbdgzqJI73LK7hGC6r0bTB5apIhqIH/YIAAAAAElFTkSuQmCC');
 }
 
 /* edit image */

wp-admin/css/wp-admin.css

@@ -3554 +3554 @@
         margin: 2px;
 }
 
-#diffrestore,
-#diffnext,
-#diffcancel {
+#diffnext {
         float: right;
         margin-right: 5px;
 }
 
+#diffrestore input{
+        margin-left: 10px;
+}
+
 #diffprevious,
 #difftitle,
 #difftitlefrom,
@@ -3572 +3574 @@
 
 #diffprevious,
 #diffnext {
-        margin-top: 7px;
         height: 30px;
 }
 
@@ -3584 +3585 @@
 #diffheader {
         border-bottom: 1px solid #dfdfdf;
         width: 100%;
-        height: 45px;
-        line-height: 45px;
-        padding-top: 10px;
+        height: 40px;
+        line-height: 40px;
+        padding-top: 30px;
 }
 
-#diffsubheader {
+#diffsubheader,.diff-left-hand-meta-row {
         border-bottom: 1px solid #dfdfdf;
         width: 100%;
         height:35px;
         line-height: 35px;
+        display: block;
 }
 
-#diffslider {
+#diffslider{
         width: 70%;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
-        height: 3.5em;
+        height: 0.8em;
+        margin-top: 20px;
 }
 
+.diff-slider-ticks-wrapper {
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+}
+
+#diff-slider-ticks {
+        position: absolute;
+        margin-top: 50px;
+        z-index: 1;
+}
+
 #revisioncount {
         width: 50%;
         margin-left: auto;
@@ -3671 +3686 @@
 
 #comparetworevisions {
         float: right;
+        position: absolute;
+        top: 10px;
+        right: 10px;
         line-height: 35px;
         padding-right: 5px;
 }
@@ -3706 +3724 @@
 .comparetwo #diffprevious,
 .comparetwo #diffnext,
 span#diff_left_current_revision,
-span#diff_from_current_revision,
+#diff_from_current_revision,
 .currentversion span#diff_left_count,
 .currentversion span#diff_left_count_inner,
-.currentversion #difftitlefrom,
-.comparetwo.currentversion #difftitlefrom {
+.comparetwo.currentversion #diff_from_current_revision,
+#diffsubheader.diff-left-hand-meta-row {
         display: none;
 }
 
@@ -3718 +3736 @@
 span#diff_left_count,
 span#diff_left_count_inner,
 .comparetwo #difftitlefrom,
-.comparetwo.currentversion span#diff_from_current_revision,
 .leftmodelloading #modelsloading,
 .rightmodelloading #modelsloading,
 .leftmodelloading #modelsloading .spinner,
 .rightmodelloading #modelsloading .spinner,
-{
-        display: inline;
+.comparetwo #diffsubheader.diff-left-hand-meta-row {
+        display: block;
 }
 
+.revision-tick {
+        width: 1px;
+        float: left;
+        margin-right: 15px;
+        height: 11px;
+        padding: 0;
+        margin-left: 0px;
+}
+
+.revision-tick.revision-scopeofchanges-vsmall {
+                width: 1px;
+                background-color: #aaa;
+}
+
+.revision-tick.revision-scopeofchanges-small {
+                width: 2px;
+                background-color: #aaa;
+                margin-left: -1px;
+}
+
+.revision-tick.revision-scopeofchanges-med {
+                width: 3px;
+                margin-left: -2px;
+                background-color: #666;
+}
+
+.revision-tick.revision-scopeofchanges-large {
+                width: 4px;
+                margin-left: -3px;
+                background-color: #333;
+}
+
+.revision-tick.revision-scopeofchanges-vlarge {
+                margin-left: -3px;
+                width: 4px;
+                background-color: #111;
+}
+
 .diff-loading {
         margin-top: 50px;
         width: 100%;
@@ -3741 +3796 @@
         float: none;
 }
 
-#difftitlefrom {
-        float: left;
-        display: none;
-}
-
 #modelsloading {
         float: right;
+        position: absolute;
         line-height: 30px;
         display: none;
         clear: none;
-        margin: 0;
+        right: 170px;
         margin-top: -40px;
 }
 
 #modelsloading .spinner {
         float: left;
- }
+}
 
+.ui-tooltip-content img {
+        float: left;
+        margin-right: 5px;
+}
+/*  jQuery UI Tooltip 1.10.1 */
+
+.ui-tooltip {
+        padding: 8px;
+        position: absolute;
+        z-index: 9999;
+        max-width: 300px;
+        min-width: 130px;
+}
+
+body .ui-tooltip {
+        border-width: 1px;
+}
+
+.ui-tooltip, .arrow:after {
+        border: 1px solid #d7d7d7;
+}
+
+.ui-tooltip {
+        padding: 5px 10px;
+}
+
+.arrow {
+        width: 70px;
+        height: 16px;
+        overflow: hidden;
+        position: absolute;
+        left: 50%;
+        margin-left: -35px;
+        bottom: -16px;
+        z-index: 99999;
+
+}
+
+.arrow.top {
+        top: -16px;
+        bottom: auto;
+}
+
+.arrow.left {
+        left: 20%;
+}
+
+.arrow:after {
+        content: "";
+        position: absolute;
+        left: 20px;
+        top: -20px;
+        width: 25px;
+        height: 25px;
+        background-color: #FFF;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        tranform: rotate(45deg);
+}
+
+.arrow.top:after {
+        bottom: -20px;
+        top: auto;
+}
+
  /* jQuery UI Slider */
 
 .wp-slider.ui-slider {
@@ -3773 +3891 @@
 .wp-slider .ui-slider-handle {
         position: absolute;
         z-index: 2;
-        width: 1.2em;
-        height: 1.2em;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 3px;
+        width: 17px;
+        height: 17px;
+        border: none;
 }
 
 .wp-slider .ui-slider-range {