Index: wp-admin/css/colors-fresh.css =================================================================== --- wp-admin/css/colors-fresh.css (revision 24650) +++ wp-admin/css/colors-fresh.css (working copy) @@ -1391,7 +1391,7 @@ table.diff .diff-addedline ins { } .revisions-tickmarks > div { - background-color: #ccc; + border-color: #aaa; } #diff-title-to strong { Index: wp-admin/css/wp-admin.css =================================================================== --- wp-admin/css/wp-admin.css (revision 24650) +++ wp-admin/css/wp-admin.css (working copy) @@ -3512,14 +3512,22 @@ td.plugin-title p { height: 0.8em; z-index: 2; top: 7px; + width: 70%; + box-sizing: border-box; } .revisions-tickmarks > div { - height: 0.8em; - width: 1px; - float: left; position: relative; + height: 100%; + float: left; z-index: 10002; + border-style: solid; + border-width: 0 0 0 1px; + box-sizing: border-box; +} + +.revisions-tickmarks > div:first-of-type { + border-left-width: 0; } .comparing-two-revisions .revisions-controls { Index: wp-admin/js/revisions.js =================================================================== --- wp-admin/js/revisions.js (revision 24650) +++ wp-admin/js/revisions.js (working copy) @@ -403,7 +403,8 @@ window.wp = window.wp || {}; // Add the tooltip view var tooltip = new revisions.view.Tooltip({ - model: new revisions.model.Tooltip() + model: new revisions.model.Tooltip(), + revisions: this.model.revisions }); this.views.add( tooltip ); @@ -431,28 +432,20 @@ window.wp = window.wp || {}; revisions.view.Tickmarks = wp.Backbone.View.extend({ className: 'revisions-tickmarks', - 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; + render: function() { + var tickCount, tickWidth; - $('.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 + tickCount = this.model.revisions.length - 1; + tickWidth = 1 / tickCount; - for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){ - this.$el.append('
'); - } + this.$el.html(''); + _(tickCount).times( function(){ this.$el.append( '' ); }, this ); + + this.$('div').css( 'width', ( 100 * tickWidth ) + '%' ); }, ready: function() { - var self = this; - self.numberOfTickmarksSet(); - $( window ).on( 'resize', _.debounce( function() { - self.$el.html(''); - self.numberOfTickmarksSet(); - }, 50 ) ); + this.render(); } }); @@ -527,7 +520,8 @@ window.wp = window.wp || {}; className: 'revisions-tooltip', template: wp.template('revisions-tooltip'), - initialize: function() { + initialize: function( options ) { + this.revisions = options.revisions; this.listenTo( this.model, 'change', this.render ); }, @@ -545,16 +539,21 @@ window.wp = window.wp || {}; }, render: function() { + var offset; // Check if a revision exists. - if ( null === this.model.get('revision') ) + if ( _.isNull( this.model.get('revision') ) ) return; // Insert revision data. this.$el.html( this.template( this.model.get('revision').toJSON() ) ); // Set the position. - var offset = $('.revisions-buttons').offset().left; - this.$el.css( 'left', this.model.get('position') - offset ); + offset = this.revisions.indexOf( this.model.get('revision') ) / ( this.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 + '%' ); } }); @@ -680,13 +679,12 @@ window.wp = window.wp || {}; }, 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 + var zoneCount = this.model.revisions.length - 1, // One fewer zone than models + sliderLeft = this.$el.offset().left, // Left edge of slider sliderWidth = this.$el.width(), // Width of slider - tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark + tickWidth = sliderWidth / zoneCount, // Calculated width of zone actualX = e.clientX - sliderLeft, // Offset of mouse position in slider - currentModelIndex = Math.floor( ( actualX + tickWidth / 2 ) / tickWidth ), // Calculate the model index - tooltipPosition = sliderLeft + 2 + currentModelIndex * tickWidth; // Stick tooltip to tickmark + currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 ) ) / tickWidth ); // Calculate the model index // Reverse direction in RTL mode. if ( isRtl ) @@ -700,14 +698,13 @@ window.wp = window.wp || {}; // Update the tooltip model this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) ); - this.tooltip.model.set( 'position', tooltipPosition ); }, - mouseleave: function( e ) { + mouseleave: function() { this.tooltip.hide(); }, - mouseenter: function( e ) { + mouseenter: function() { this.tooltip.show(); },