Revisions: tweak how tickmarks are rendered, to play nice with browsers who always round subpixel values down (Safari, Opera).

Also, some IE tweaks.

Fixes #24736. Props adamsilverstein, markjaquith, ocean90.

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

wp-admin/css/wp-admin-rtl.css

@@ -1030,7 +1030,7 @@ body.folded .revisions .loading-indicator {
 
 .revisions-tooltip {
 	margin-left: 0;
-	margin-right: -70px;
+	margin-right: -69px;
 }
 
 .revisions-tooltip.flipped {
@@ -1042,6 +1042,10 @@ body.folded .revisions .loading-indicator {
 	margin-right: -75px;
 }
 
+.ie8 .revisions-tooltip.flipped {
+	margin-left: -63px;
+}
+
 .revisions-tooltip-arrow {
 	right: 0;
 	margin-left: 0;
@@ -1064,6 +1068,10 @@ body.folded .revisions .loading-indicator {
 	left: 20px;
 }
 
+.ie8 .revisions-tooltip-arrow > span {
+	right: 21px;
+}
+
 .revisions-tooltip img {
 	float: right;
 	margin: 2px 0 0 5px;

wp-admin/css/wp-admin.css

@@ -3539,17 +3539,15 @@ td.plugin-title p {
 	margin: 0 auto;
 	height: 0.8em;
 	top: 7px;
-	width: 100%;
-	padding: 0 15%;
+	width: 70%;
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
 .revisions-tickmarks > div {
-	position: relative;
+	position: absolute;
 	height: 100%;
-	float: left;
 	border-style: solid;
 	border-width: 0 1px 0 0;
 	-moz-box-sizing: border-box;
@@ -3557,7 +3555,7 @@ td.plugin-title p {
 	box-sizing: border-box;
 }
 
-.revisions-tickmarks > div:last-child {
+.revisions-tickmarks > div:first-child {
 	border-width: 0;
 }
 
@@ -3764,7 +3762,7 @@ table.diff .diff-addedline ins {
 	position: absolute;
 	bottom: 105px;
 	margin-right: 0;
-	margin-left: -70px;
+	margin-left: -69px;
 	z-index: 1;
 	max-width: 350px;
 	min-width: 130px;
@@ -3824,11 +3822,15 @@ table.diff .diff-addedline ins {
 }
 
 .ie8 .revisions-tooltip-arrow > span {
-	left: 14px;
+	left: 15px;
 	top: -25px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
 }
 
+.ie8 .revisions-tooltip.flipped .revisions-tooltip-arrow > span {
+	right: 25px;
+}
+
 .revisions-tooltip,
 .revisions-tooltip-arrow > span {
 	border-width: 1px;

wp-admin/js/revisions.js

@@ -615,29 +615,33 @@ window.wp = window.wp || {};
 	// The tickmarks view
 	revisions.view.Tickmarks = wp.Backbone.View.extend({
 		className: 'revisions-tickmarks',
+		direction: isRtl ? 'right' : 'left',
 
 		initialize: function() {
 			this.listenTo( this.model, 'change:revision', this.reportTickPosition );
 		},
 
 		reportTickPosition: function( model, revision ) {
-			var elWidth, offset, tick, index = this.model.revisions.indexOf( revision );
+			var offset, thisOffset, parentOffset, tick, index = this.model.revisions.indexOf( revision );
+			thisOffset = this.$el.allOffsets();
+			parentOffset = this.$el.parent().allOffsets();
 			if ( index === this.model.revisions.length - 1 ) {
 				// Last one
-				tick = this.$('div:nth-of-type(' + index + ')');
-				offset = tick.allPositions();
-				elWidth = tick.outerWidth();
-				_.extend( offset, {
-					rightPlusWidth: offset.right,
-					leftPlusWidth: offset.left
-				});
+				offset = {
+					rightPlusWidth: thisOffset.left - parentOffset.left + 1,
+					leftPlusWidth: thisOffset.right - parentOffset.right + 1
+				};
 			} else {
 				// Normal tick
 				tick = this.$('div:nth-of-type(' + (index + 1) + ')');
 				offset = tick.allPositions();
 				_.extend( offset, {
-					leftPlusWidth: offset.left + tick.outerWidth() + 1,
-					rightPlusWidth: offset.right + tick.outerWidth() + 1
+					left: offset.left + thisOffset.left - parentOffset.left,
+					right: offset.right + thisOffset.right - parentOffset.right
+				});
+				_.extend( offset, {
+					leftPlusWidth: offset.left + tick.outerWidth(),
+					rightPlusWidth: offset.right + tick.outerWidth()
 				});
 			}
 			this.model.set({ offset: offset });
@@ -648,9 +652,8 @@ window.wp = window.wp || {};
 			tickCount = this.model.revisions.length - 1;
 			tickWidth = 1 / tickCount;
 
-			_(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
-
-			this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
+			_(tickCount).times( function( index ){
+				this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' ); }, this );
 		}
 	});