Revisions: more graceful tooltips

* Use hoverIntent to prevent inadvertent display and provide more forgiving exploration.
* Nice interruptable fading animation.
* Subtle CSS transition when moving the tooltip side-to-side.

Fixes #24734. See #24425.

git-svn-id: https://develop.svn.wordpress.org/trunk@24686 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/css/wp-admin.css

@@ -3710,6 +3710,12 @@ table.diff .diff-addedline ins {
 	min-width: 130px;
 	padding: 4px;
 	display: none;
+	opacity: 0;
+	-webkit-transition: left 15ms;
+	-moz-transition:    left 15ms;
+	-ms-transition:     left 15ms;
+	-o-transition:      left 15ms;
+	transition:         left 15ms;
 }
 
 .comparing-two-revisions .revisions-tooltip {

wp-admin/js/revisions.js

@@ -597,18 +597,11 @@ window.wp = window.wp || {};
 		},
 
 		toggleVisibility: function( options ) {
-			options = options || {};
-			var visible = this.visible();
-			if ( visible ) { // Immediate show
-				this.$el.fadeIn( 200 );
-			} else if ( options.immediate ) { // Immediate fade out
-				this.$el.fadeOut( 200 );
-			} 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 );
-			}
+			if ( this.visible() )
+				this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 );
+			else
+				this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
+			return;
 		},
 
 		render: function() {
@@ -698,13 +691,11 @@ window.wp = window.wp || {};
 		className: 'wp-slider',
 
 		events: {
-			'mousemove'  : 'mouseMove',
-			'mouseleave' : 'mouseLeave',
-			'mouseenter' : 'mouseEnter'
+			'mousemove' : 'mouseMove'
 		},
 
 		initialize: function() {
-			_.bindAll( this, 'start', 'slide', 'stop', 'mouseMove' );
+			_.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' );
 			this.listenTo( this.model, 'update:slider', this.applySliderSettings );
 		},
 
@@ -715,6 +706,12 @@ window.wp = window.wp || {};
 				stop:  this.stop
 			}) );
 
+			this.$el.hoverIntent({
+				over: this.mouseEnter,
+				out: this.mouseLeave,
+				timeout: 800
+			});
+
 			this.applySliderSettings();
 		},
 

wp-includes/script-loader.php

@@ -276,7 +276,7 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 );
 
-	$scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider' ), false, 1 );
+	$scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider', 'hoverIntent' ), false, 1 );
 
 	$scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );