<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[24658] trunk/wp-admin: Revisions: Bunch of refactoring and code cleanup</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/24658">24658</a></dd>
<dt>Author</dt> <dd>markjaquith</dd>
<dt>Date</dt> <dd>2013-07-11 09:14:14 +0000 (Thu, 11 Jul 2013)</dd>
</dl>

<h3>Log Message</h3>
<pre>Revisions: Bunch of refactoring and code cleanup

* Extracted a lot of model-y stuff from the view code.
* Slider now has a proper model, with communication with other models.
* Use of `get( foo )` instead of `findWhere({ id: foo })`.
* Properly set the `from` diff when routing single mode.
* Bind `prev()` and `next()` to their model.
* Tick marks are now percentage based, which means the slider resizes with the browser, without JS resize events.
* When scrubbing, the position of the scrubber is considered a hover, so you can fall off the timeline while still scrubbing and the tooltips will persist.
* Tooltips fade in and out.
* Tooltips hang around for a grace period instead of immediately going away. More forgiving.
* Unused code paths removed.
* Got rid of a bunch of view-to-view communication.
* Use `_.times()` instead of a `for` loop.
* Removed premature `Math.floor()` and `Math.ceil()` calls that were making things not add up to 100%.

See <a href="http://core.trac.wordpress.org/ticket/24425">#24425</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincsscolorsfreshcss">trunk/wp-admin/css/colors-fresh.css</a></li>
<li><a href="#trunkwpadmincsswpadmincss">trunk/wp-admin/css/wp-admin.css</a></li>
<li><a href="#trunkwpadminjsrevisionsjs">trunk/wp-admin/js/revisions.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincsscolorsfreshcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-fresh.css (24657 => 24658)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-fresh.css      2013-07-11 01:01:38 UTC (rev 24657)
+++ trunk/wp-admin/css/colors-fresh.css 2013-07-11 09:14:14 UTC (rev 24658)
</span><span class="lines">@@ -1391,7 +1391,7 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .revisions-tickmarks > div {
</span><del>-       background-color: #ccc;
</del><ins>+        border-color: #aaa;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> #diff-title-to strong {
</span></span></pre></div>
<a id="trunkwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.css (24657 => 24658)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.css  2013-07-11 01:01:38 UTC (rev 24657)
+++ trunk/wp-admin/css/wp-admin.css     2013-07-11 09:14:14 UTC (rev 24658)
</span><span class="lines">@@ -2549,17 +2549,21 @@
</span><span class="cx"> tr .locked-info {
</span><span class="cx">  height: 0;
</span><span class="cx">  opacity: 0;
</span><del>-       -webkit-transition: height 1s, opacity 500ms;
-       transition:         height 1s, opacity 500ms;
</del><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> tr.wp-locked .locked-info {
</span><span class="cx">  height: 22px;
</span><span class="cx">  opacity: 1;
</span><del>-       -webkit-transition: height 1s, opacity 500ms 500ms;
-       transition:         height 1s, opacity 500ms 500ms;
</del><span class="cx"> }
</span><span class="cx"> 
</span><ins>+tr.locked-info, tr.wp-locked .locked-info {
+       -webkit-transition: height 1s, opacity 500ms;
+       -moz-transition:    height 1s, opacity 500ms;
+       -ms-transition:     height 1s, opacity 500ms;
+       -o-transition:      height 1s, opacity 500ms;
+       transition:         height 1s, opacity 500ms;
+}
+
</ins><span class="cx"> .fixed .column-comments .sorting-indicator {
</span><span class="cx">  margin-top: 3px;
</span><span class="cx"> }
</span><span class="lines">@@ -3512,16 +3516,24 @@
</span><span class="cx">  height: 0.8em;
</span><span class="cx">  z-index: 2;
</span><span class="cx">  top: 7px;
</span><ins>+       width: 70%;
+       box-sizing: border-box;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .revisions-tickmarks > div {
</span><del>-       height: 0.8em;
-       width: 1px;
</del><ins>+        position: relative;
+       height: 100%;
</ins><span class="cx">   float: left;
</span><del>-       position: relative;
</del><span class="cx">   z-index: 10002;
</span><ins>+       border-style: solid;
+       border-width: 0 0 0 1px;
+       box-sizing: border-box;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.revisions-tickmarks > div:first-of-type {
+       border-left-width: 0;
+}
+
</ins><span class="cx"> .comparing-two-revisions .revisions-controls {
</span><span class="cx">  height: 140px;
</span><span class="cx"> }
</span><span class="lines">@@ -3654,6 +3666,14 @@
</span><span class="cx">  padding: 4px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.revisions-tooltip.fade {
+       -webkit-transition: opacity 200ms;
+       -ms-transition:     opacity 200ms;
+       -moz-transition:    opacity 200ms;
+       -o-transition:      opacity 200ms;
+       transition:         opacity 200ms;
+}
+
</ins><span class="cx"> .comparing-two-revisions .revisions-tooltip {
</span><span class="cx">  bottom: 145px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadminjsrevisionsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/revisions.js (24657 => 24658)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/revisions.js   2013-07-11 01:01:38 UTC (rev 24657)
+++ trunk/wp-admin/js/revisions.js      2013-07-11 09:14:14 UTC (rev 24658)
</span><span class="lines">@@ -31,14 +31,87 @@
</span><span class="cx">                  value: 0,
</span><span class="cx">                  min: 0,
</span><span class="cx">                  max: 1,
</span><del>-                       step: 1
</del><ins>+                        step: 1,
+                       compareTwoMode: false
+               },
+
+               initialize: function( options ) {
+                       this.frame = options.frame;
+                       this.revisions = options.revisions;
+                       this.set({
+                               max:   this.revisions.length - 1,
+                               value: this.revisions.indexOf( this.revisions.get( revisions.settings.selectedRevision ) ),
+                               compareTwoMode: this.frame.get('compareTwoMode')
+                       });
+
+                       // Listen for changes to the revisions or mode from outside
+                       this.listenTo( this.frame, 'update:revisions', this.receiveRevisions );
+                       this.listenTo( this.frame, 'change:compareTwoMode', this.updateMode );
+
+                       // Listen for internal changes
+                       this.listenTo( this, 'change:from', this.handleLocalChanges );
+                       this.listenTo( this, 'change:to', this.handleLocalChanges );
+
+                       // Listen for changes to the hovered revision
+                       this.listenTo( this, 'change:hoveredRevision', this.hoverRevision );
+               },
+
+               // Called when a revision is hovered
+               hoverRevision: function( model, value ) {
+                       this.trigger( 'hovered:revision', value );
+               },
+
+               // Called when `compareTwoMode` changes
+               updateMode: function( model, value ) {
+                       this.set({ compareTwoMode: value });
+               },
+
+               // Called when `from` or `to` changes in the local model
+               handleLocalChanges: function() {
+                       this.frame.set({
+                               from: this.get('from'),
+                               to: this.get('to')
+                       });
+               },
+
+               // Receives revisions changes from outside the model
+               receiveRevisions: function( from, to ) {
+                       // Bail if nothing changed
+                       if ( this.get('from') === from && this.get('to') === to )
+                               return;
+
+                       this.set({ from: from, to: to }, { silent: true });
+                       this.trigger( 'update:revisions', from, to );
</ins><span class="cx">           }
</span><ins>+
</ins><span class="cx">   });
</span><span class="cx"> 
</span><span class="cx">  revisions.model.Tooltip = Backbone.Model.extend({
</span><span class="cx">          defaults: {
</span><span class="cx">                  revision: null,
</span><del>-                       position: 0
</del><ins>+                        hovering: false, // Whether the mouse is hovering
+                       scrubbing: false // Whether the mouse is scrubbing
+               },
+
+               initialize: function( options ) {
+                       this.revisions = options.revisions;
+                       this.slider = options.slider;
+
+                       this.listenTo( this.slider, 'hovered:revision', this.updateRevision );
+                       this.listenTo( this.slider, 'change:hovering', this.setHovering );
+                       this.listenTo( this.slider, 'change:scrubbing', this.setScrubbing );
+               },
+
+               updateRevision: function( revision ) {
+                       this.set({ revision: revision });
+               },
+
+               setHovering: function( model, value ) {
+                       this.set({ hovering: value });
+               },
+
+               setScrubbing: function( model, value ) {
+                       this.set({ scrubbing: value });
</ins><span class="cx">           }
</span><span class="cx">  });
</span><span class="cx"> 
</span><span class="lines">@@ -47,6 +120,10 @@
</span><span class="cx">  revisions.model.Revisions = Backbone.Collection.extend({
</span><span class="cx">          model: revisions.model.Revision,
</span><span class="cx"> 
</span><ins>+               initialize: function() {
+                       _.bindAll( this, 'next', 'prev' );
+               },
+
</ins><span class="cx">           comparator: function( a, b ) {
</span><span class="cx">                  var a_ = a.get('dateUnix');
</span><span class="cx">                  var b_ = b.get('dateUnix');
</span><span class="lines">@@ -401,21 +478,28 @@
</span><span class="cx">                          model: this.model
</span><span class="cx">                  }) );
</span><span class="cx"> 
</span><del>-                       // Add the tooltip view
-                       var tooltip = new revisions.view.Tooltip({
-                               model: new revisions.model.Tooltip()
</del><ins>+                        // Prep the slider model
+                       var slider = new revisions.model.Slider({
+                               frame: this.model,
+                               revisions: this.model.revisions
</ins><span class="cx">                   });
</span><del>-                       this.views.add( tooltip );
</del><span class="cx"> 
</span><del>-                       // Add the Tickmarks view
</del><ins>+                        // Add the tooltip view
+                       this.views.add( new revisions.view.Tooltip({
+                               model: new revisions.model.Tooltip({
+                                       revisions: this.model.revisions,
+                                       slider: slider
+                               })
+                       }) );
+
+                       // Add the tickmarks view
</ins><span class="cx">                   this.views.add( new revisions.view.Tickmarks({
</span><span class="cx">                          model: this.model
</span><span class="cx">                  }) );
</span><span class="cx"> 
</span><del>-                       // Add the Slider view with a reference to the tooltip view
</del><ins>+                        // Add the slider view
</ins><span class="cx">                   this.views.add( new revisions.view.Slider({
</span><del>-                               model: this.model,
-                               tooltip: tooltip
</del><ins>+                                model: slider
</ins><span class="cx">                   }) );
</span><span class="cx"> 
</span><span class="cx">                  // Add the Meta view
</span><span class="lines">@@ -431,28 +515,20 @@
</span><span class="cx">  revisions.view.Tickmarks = wp.Backbone.View.extend({
</span><span class="cx">          className: 'revisions-tickmarks',
</span><span class="cx"> 
</span><del>-               numberOfTickmarksSet: function() {
-                       var tickCount = this.model.revisions.length - 1, // One tickmark per model
-                               sliderWidth = $('.wp-slider').parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
-                               tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down
-                               newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width
-                               tickNumber;
</del><ins>+                render: function() {
+                       var tickCount, tickWidth;
</ins><span class="cx"> 
</span><del>-                       $('.wp-slider').css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
-                       this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width
</del><ins>+                        tickCount = this.model.revisions.length - 1;
+                       tickWidth = 1 / tickCount;
</ins><span class="cx"> 
</span><del>-                       for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
-                               this.$el.append('<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>');
-                       }
</del><ins>+                        this.$el.html('');
+                       _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
+
+                       this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
</ins><span class="cx">           },
</span><span class="cx"> 
</span><span class="cx">          ready: function() {
</span><del>-                       var self = this;
-                       self.numberOfTickmarksSet();
-                       $( window ).on( 'resize', _.debounce( function() {
-                               self.$el.html('');
-                               self.numberOfTickmarksSet();
-                       }, 50 ) );
</del><ins>+                        this.render();
</ins><span class="cx">           }
</span><span class="cx">  });
</span><span class="cx"> 
</span><span class="lines">@@ -527,34 +603,53 @@
</span><span class="cx">          className: 'revisions-tooltip',
</span><span class="cx">          template: wp.template('revisions-tooltip'),
</span><span class="cx"> 
</span><del>-               initialize: function() {
-                       this.listenTo( this.model, 'change', this.render );
</del><ins>+                initialize: function( options ) {
+                       this.listenTo( this.model, 'change:revision', this.render );
+                       this.listenTo( this.model, 'change:hovering', this.toggleVisibility );
+                       this.listenTo( this.model, 'change:scrubbing', this.toggleVisibility );
</ins><span class="cx">           },
</span><span class="cx"> 
</span><span class="cx">          ready: function() {
</span><del>-                       // Hide tooltip on start.
-                       this.$el.addClass('hidden');
</del><ins>+                        this.toggleVisibility({ immediate: true });
</ins><span class="cx">           },
</span><span class="cx"> 
</span><del>-               show: function() {
-                       this.$el.removeClass('hidden');
</del><ins>+                visible: function() {
+                       return this.model.get( 'scrubbing' ) || this.model.get( 'hovering' );
</ins><span class="cx">           },
</span><span class="cx"> 
</span><del>-               hide: function() {
-                       this.$el.addClass('hidden');
</del><ins>+                toggleVisibility: function( options ) {
+                       options = options || {};
+                       var visible = this.visible()
+                       if ( visible ) { // Immediate show
+                               // this.$el.removeClass('fade');
+                               this.$el.css( 'opacity', 1 );
+                       } else if ( options.immediate ) { // Immediate fade out
+                               this.$el.addClass('fade');
+                               this.$el.css( 'opacity', 0 );
+                       } else { // Wait a bit, make sure we're really done, then fade it out
+                               _.delay( function( view ) {
+                                       if ( ! view.visible() )
+                                               view.toggleVisibility({ immediate: true });
+                               }, 500, this );
+                       }
</ins><span class="cx">           },
</span><span class="cx"> 
</span><span class="cx">          render: function() {
</span><ins>+                       var offset;
</ins><span class="cx">                   // Check if a revision exists.
</span><del>-                       if ( null === this.model.get('revision') )
</del><ins>+                        if ( _.isNull( this.model.get('revision') ) )
</ins><span class="cx">                           return;
</span><span class="cx"> 
</span><span class="cx">                  // Insert revision data.
</span><span class="cx">                  this.$el.html( this.template( this.model.get('revision').toJSON() ) );
</span><span class="cx"> 
</span><span class="cx">                  // Set the position.
</span><del>-                       var offset = $('.revisions-buttons').offset().left;
-                       this.$el.css( 'left', this.model.get('position') - offset );
</del><ins>+                        offset = this.model.revisions.indexOf( this.model.get('revision') ) / ( this.model.revisions.length - 1 );
+                       // 15% to get us to the start of the slider
+                       // 0.7 to convert the slider-relative percentage to a page-relative percentage
+                       // 100 to convert to a percentage
+                       offset = 15 + (0.7 * offset * 100 ); // Now in a percentage
+                       this.$el.css( 'left', offset + '%' );
</ins><span class="cx">           }
</span><span class="cx">  });
</span><span class="cx"> 
</span><span class="lines">@@ -626,67 +721,38 @@
</span><span class="cx"> 
</span><span class="cx"> 
</span><span class="cx">  // The slider view.
</span><del>-       // Encapsulates all of the configuration for the jQuery UI slider into a view.
</del><span class="cx">   revisions.view.Slider = wp.Backbone.View.extend({
</span><span class="cx">          className: 'wp-slider',
</span><span class="cx"> 
</span><span class="cx">          events: {
</span><del>-                       'mousemove'  : 'mousemove',
-                       'mouseleave' : 'mouseleave',
-                       'mouseenter' : 'mouseenter'
</del><ins>+                        'mousemove'  : 'mouseMove',
+                       'mouseleave' : 'mouseLeave',
+                       'mouseenter' : 'mouseEnter'
</ins><span class="cx">           },
</span><span class="cx"> 
</span><del>-               initialize: function( options ) {
-                       _.bindAll( this, 'start', 'slide', 'stop' );
</del><ins>+                initialize: function() {
+                       _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove' );
+                       this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings );
+                       this.listenTo( this.model, 'update:revisions', this.updateSliderSettings );
+               },
</ins><span class="cx"> 
</span><del>-                       this.tooltip = options.tooltip;
-
-                       // Create the slider model from the provided collection data.
-                       var latestRevisionIndex = this.model.revisions.length - 1;
-
-                       // Find the initially selected revision
-                       var initiallySelectedRevisionIndex =
-                               this.model.revisions.indexOf(
-                                       this.model.revisions.findWhere({ id: revisions.settings.selectedRevision }) );
-
-                       this.settings = new revisions.model.Slider({
-                               max:   latestRevisionIndex,
-                               value: initiallySelectedRevisionIndex,
</del><ins>+                ready: function() {
+                       this.$el.slider( _.extend( this.model.toJSON(), {
</ins><span class="cx">                           start: this.start,
</span><span class="cx">                          slide: this.slide,
</span><span class="cx">                          stop:  this.stop
</span><del>-                       });
-               },
</del><ins>+                        }) );
</ins><span class="cx"> 
</span><del>-               ready: function() {
-                       // Refresh the currently selected revision position in case router has set it.
-                       this.settings.attributes.value = this.model.revisions.indexOf(
-                               this.model.revisions.findWhere({ id: revisions.settings.selectedRevision }) );
-
-                       // And update the slider in case the route has set it.
-                       this.updateSliderSettings();
-                       this.slide( '', this.settings.attributes );
-                       this.$el.slider( this.settings.toJSON() );
-
-                       // Listen for changes in Compare Two Mode setting
-                       this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings );
-
-                       this.settings.on( 'change', function() {
-                               this.updateSliderSettings();
-                       }, this );
-
-                       // Listen for changes to the revisions
-                       this.listenTo( this.model, 'update:revisions', this.updateRevisions );
</del><ins>+                        this.listenTo( this, 'slide:stop', this.updateSliderSettings );
</ins><span class="cx">           },
</span><span class="cx"> 
</span><del>-               mousemove: function( e ) {
-                       var tickCount = this.model.revisions.length - 1, // One tickmark per model
-                               sliderLeft = Math.ceil( this.$el.offset().left ), // Left edge of slider
</del><ins>+                mouseMove: function( e ) {
+                       var zoneCount = this.model.revisions.length - 1, // One fewer zone than models
+                               sliderLeft = this.$el.offset().left, // Left edge of slider
</ins><span class="cx">                           sliderWidth = this.$el.width(), // Width of slider
</span><del>-                               tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark
</del><ins>+                                tickWidth = sliderWidth / zoneCount, // Calculated width of zone
</ins><span class="cx">                           actualX = e.clientX - sliderLeft, // Offset of mouse position in slider
</span><del>-                               currentModelIndex = Math.floor( ( actualX + tickWidth / 2 ) / tickWidth ), // Calculate the model index
-                               tooltipPosition = sliderLeft + 2 + currentModelIndex * tickWidth; // Stick tooltip to tickmark
</del><ins>+                                currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
</ins><span class="cx"> 
</span><span class="cx">                  // Reverse direction in RTL mode.
</span><span class="cx">                  if ( isRtl )
</span><span class="lines">@@ -699,40 +765,27 @@
</span><span class="cx">                          currentModelIndex = this.model.revisions.length - 1;
</span><span class="cx"> 
</span><span class="cx">                  // Update the tooltip model
</span><del>-                       this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) );
-                       this.tooltip.model.set( 'position', tooltipPosition );
</del><ins>+                        this.model.set({
+                               'hoveredRevision': this.model.revisions.at( currentModelIndex )
+                       });
</ins><span class="cx">           },
</span><span class="cx"> 
</span><del>-               mouseleave: function( e ) {
-                       this.tooltip.hide();
</del><ins>+                mouseLeave: function() {
+                       this.model.set({ hovering: false });
</ins><span class="cx">           },
</span><span class="cx"> 
</span><del>-               mouseenter: function( e ) {
-                       this.tooltip.show();
</del><ins>+                mouseEnter: function() {
+                       this.model.set({ hovering: true });
</ins><span class="cx">           },
</span><span class="cx"> 
</span><span class="cx">          updateSliderSettings: function() {
</span><del>-                       var handles;
</del><ins>+                        var handles, leftValue, rightValue;
</ins><span class="cx"> 
</span><span class="cx">                  if ( this.model.get('compareTwoMode') ) {
</span><del>-                               var leftValue, rightValue;
-
-                               // In single handle mode, the 1st stored revision is 'blank' and the 'from' model is not set
-                               // In this case we move the to index over one
-                               if ( _.isUndefined( this.model.get('from') ) ) {
-                                       if ( isRtl ) {
-                                               leftValue  = this.model.revisions.length -  this.model.revisions.indexOf( this.model.get('to') ) - 2;
-                                               rightValue = leftValue + 1;
-                                       } else {
-                                               leftValue  = this.model.revisions.indexOf( this.model.get('to') );
-                                               rightValue = leftValue + 1;
-                                       }
-                               } else {
-                                       leftValue = isRtl ?     this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 :
</del><ins>+                                leftValue = isRtl ?     this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 :
</ins><span class="cx">                                                                                   this.model.revisions.indexOf( this.model.get('from') ),
</span><del>-                                       rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get('from') ) - 1 :
</del><ins>+                                rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get('from') ) - 1 :
</ins><span class="cx">                                                                                   this.model.revisions.indexOf( this.model.get('to') );
</span><del>-                               }
</del><span class="cx"> 
</span><span class="cx">                          // Set handles to current from / to models.
</span><span class="cx">                          // Reverse order for RTL
</span><span class="lines">@@ -766,27 +819,17 @@
</span><span class="cx">                  }
</span><span class="cx">          },
</span><span class="cx"> 
</span><del>-               updateRevisions: function( from, to ) {
-                       // Update the view settings when the revisions have changed.
-                       if ( this.model.get('compareTwoMode') ) {
-                               this.settings.set({ 'values': [
-                                       this.model.revisions.indexOf( from ),
-                                       this.model.revisions.indexOf( to )
-                               ] });
-                       } else {
-                               this.settings.set({ 'value': this.model.revisions.indexOf( to ) });
-                       }
-               },
-
</del><span class="cx">           getSliderPosition: function( ui ){
</span><span class="cx">                  return isRtl ? this.model.revisions.length - ui.value - 1 : ui.value;
</span><span class="cx">          },
</span><span class="cx"> 
</span><span class="cx">          start: function( event, ui ) {
</span><ins>+                       this.model.set({ scrubbing: true });
+
</ins><span class="cx">                   // Track the mouse position to enable smooth dragging,
</span><span class="cx">                  // overrides default jQuery UI step behavior.
</span><del>-                       $( window ).on( 'mousemove', { view: this }, function( e ) {
-                               var view              = e.data.view,
</del><ins>+                        $( window ).on( 'mousemove.wp.revisions', { view: this }, function( e ) {
+                               var view            = e.data.view,
</ins><span class="cx">                                   leftDragBoundary  = view.$el.offset().left, // Initial left boundary
</span><span class="cx">                                  sliderOffset      = leftDragBoundary,
</span><span class="cx">                                  sliderRightEdge   = leftDragBoundary + view.$el.width(),
</span><span class="lines">@@ -796,7 +839,7 @@
</span><span class="cx"> 
</span><span class="cx">                          // In two handle mode, ensure handles can't be dragged past each other.
</span><span class="cx">                          // Adjust left/right boundaries and reset points.
</span><del>-                               if ( view.model.get('compareTwoMode') ) {
</del><ins>+                                if ( view.model.frame.get('compareTwoMode') ) {
</ins><span class="cx">                                   var rightHandle = $( ui.handle ).parent().find('.right-handle'),
</span><span class="cx">                                          leftHandle  = $( ui.handle ).parent().find('.left-handle');
</span><span class="cx"> 
</span><span class="lines">@@ -834,10 +877,11 @@
</span><span class="cx">                  } );
</span><span class="cx">          },
</span><span class="cx"> 
</span><ins>+               // Responds to slide events
</ins><span class="cx">           slide: function( event, ui ) {
</span><span class="cx">                  var attributes;
</span><span class="cx">                  // Compare two revisions mode
</span><del>-                       if ( ! _.isUndefined( ui.values ) && this.model.get('compareTwoMode') ) {
</del><ins>+                        if ( ! _.isUndefined( ui.values ) && this.model.frame.get('compareTwoMode') ) {
</ins><span class="cx">                           // Prevent sliders from occupying same spot
</span><span class="cx">                          if ( ui.values[1] === ui.values[0] )
</span><span class="cx">                                  return false;
</span><span class="lines">@@ -858,16 +902,22 @@
</span><span class="cx">                          if ( sliderPosition ) // Reverse directions for RTL.
</span><span class="cx">                                  attributes.from = this.model.revisions.at( sliderPosition - 1  );
</span><span class="cx">                          else
</span><del>-                                       this.model.unset( 'from', { silent: true });
</del><ins>+                                        attributes.from = undefined;
</ins><span class="cx">                   }
</span><span class="cx">                  this.model.set( attributes );
</span><ins>+
+                       // If we are scrubbing, a scrub to a revision is considered a hover
+                       if ( this.model.get( 'scrubbing' ) ) {
+                               this.model.set({
+                                       'hoveredRevision': attributes.to
+                               });
+                       }
</ins><span class="cx">           },
</span><span class="cx"> 
</span><span class="cx">          stop: function( event, ui ) {
</span><del>-                       $( window ).off('mousemove');
-
-                       // Reset settings props handle back to the step position.
-                       this.settings.trigger('change');
</del><ins>+                        $( window ).off('mousemove.wp.revisions');
+                       this.updateSliderSettings();
+                       this.model.set({ scrubbing: false });
</ins><span class="cx">           }
</span><span class="cx">  });
</span><span class="cx"> 
</span><span class="lines">@@ -912,8 +962,10 @@
</span><span class="cx"> 
</span><span class="cx">                  // If `b` is undefined, this is an 'at/:to' route, for a single revision
</span><span class="cx">                  if ( _.isUndefined( b ) ) {
</span><del>-                               b = a;
-                               a = 0;
</del><ins>+                                b = this.model.revisions.get( a );
+                               a = this.model.revisions.prev( b );
+                               b = b ? b.id : 0;
+                               a = a ? a.id : 0
</ins><span class="cx">                           compareTwo = false;
</span><span class="cx">                  } else {
</span><span class="cx">                          compareTwo = true;
</span><span class="lines">@@ -925,8 +977,8 @@
</span><span class="cx">                  this.model.set({ compareTwoMode: compareTwo });
</span><span class="cx"> 
</span><span class="cx">                  if ( ! _.isUndefined( this.model ) ) {
</span><del>-                               var selectedToRevision = this.model.revisions.findWhere({ id: to }),
-                                       selectedFromRevision = this.model.revisions.findWhere({ id: from });
</del><ins>+                                var selectedToRevision = this.model.revisions.get( to ),
+                                       selectedFromRevision = this.model.revisions.get( from );
</ins><span class="cx"> 
</span><span class="cx">                          this.model.set({
</span><span class="cx">                                  to: selectedToRevision,
</span></span></pre>
</div>
</div>

</body>
</html>