jquery.suggestions, mediawiki.searchSuggest: Don't use jquery.autoEllipsis

(How's that for a loaded commit topic, huh?)

We can just use text-overflow: ellipsis, which is widely supported
these days. The result is a lot less code being loaded on every page
view and a lot less processing being done on the suggestions.

This changes the position of the ellipsis from the "middle" of the
text to the end of it. I don't think this is a problem.

Bug: 30309
Bug: 59172
Change-Id: I6fc229a292a90a3cbb945b58061ee99b0ac7f97d

resources/Resources.php

@@ -320,7 +320,7 @@ return array(
 	'jquery.suggestions' => array(
 		'scripts' => 'resources/jquery/jquery.suggestions.js',
 		'styles' => 'resources/jquery/jquery.suggestions.css',
-		'dependencies' => 'jquery.autoEllipsis',
+		'dependencies' => 'jquery.highlightText',
 	),
 	'jquery.tabIndex' => array(
 		'scripts' => 'resources/jquery/jquery.tabIndex.js',
@@ -857,7 +857,6 @@ return array(
 			'searchsuggest-containing',
 		),
 		'dependencies' => array(
-			'jquery.autoEllipsis',
 			'jquery.client',
 			'jquery.placeholder',
 			'jquery.suggestions',

resources/jquery/jquery.suggestions.css

@@ -44,6 +44,11 @@ html > body .suggestions {
 	line-height: 1.5em;
 	padding: 0.01em 0.25em;
 	text-align: left;
+	/* Apply ellipsis to suggestions */
+	overflow: hidden;
+	-o-text-overflow: ellipsis; /* Opera 9 to 10 */
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .suggestions-result-current {
@@ -71,7 +76,6 @@ html > body .suggestions {
 	color: white;
 }
 
-.autoellipsis-matched,
 .highlight {
 	font-weight: bold;
 }

resources/jquery/jquery.suggestions.js

@@ -138,8 +138,8 @@ $.suggestions = {
 	 */
 	configure: function ( context, property, value ) {
 		var newCSS,
-			$autoEllipseMe, $result, $results, childrenWidth,
-			i, expWidth, matchedText, maxWidth, text;
+			$result, $results, childrenWidth,
+			i, expWidth, maxWidth, text;
 
 		// Validate creation using fallback values
 		switch ( property ) {
@@ -237,8 +237,6 @@ $.suggestions = {
 						$results = context.data.$container.children( '.suggestions-results' );
 						$results.empty();
 						expWidth = -1;
-						$autoEllipseMe = $( [] );
-						matchedText = null;
 						for ( i = 0; i < context.config.suggestions.length; i++ ) {
 							/*jshint loopfunc:true */
 							text = context.config.suggestions[i];
@@ -259,15 +257,11 @@ $.suggestions = {
 							if ( typeof context.config.result.render === 'function' ) {
 								context.config.result.render.call( $result, context.config.suggestions[i], context );
 							} else {
-								// Add <span> with text
-								$result.append( $( '<span>' )
-										.css( 'whiteSpace', 'nowrap' )
-										.text( text )
-									);
+								$result.text( text );
 							}
 
 							if ( context.config.highlightInput ) {
-								matchedText = context.data.prevText;
+								$result.highlightText( context.data.prevText );
 							}
 
 							// Widen results box if needed
@@ -277,19 +271,13 @@ $.suggestions = {
 								// factor in any padding, margin, or border space on the parent
 								expWidth = childrenWidth + ( context.data.$container.width() - $result.width() );
 							}
-							$autoEllipseMe = $autoEllipseMe.add( $result );
 						}
+
 						// Apply new width for results box, if any
 						if ( expWidth > context.data.$container.width() ) {
 							maxWidth = context.config.maxExpandFactor * context.data.$textbox.width();
 							context.data.$container.width( Math.min( expWidth, maxWidth ) );
 						}
-						// autoEllipse the results. Has to be done after changing the width
-						$autoEllipseMe.autoEllipsis( {
-							hasSpan: true,
-							tooltip: true,
-							matchText: matchedText
-						} );
 					}
 				}
 				break;

resources/mediawiki/mediawiki.searchSuggest.css

@@ -4,8 +4,8 @@
 .suggestions a.mw-searchSuggest-link:hover,
 .suggestions a.mw-searchSuggest-link:active,
 .suggestions a.mw-searchSuggest-link:focus {
-	text-decoration: none;
 	color: black;
+	text-decoration: none;
 }
 
 .suggestions-result-current a.mw-searchSuggest-link,
@@ -14,3 +14,11 @@
 .suggestions-result-current a.mw-searchSuggest-link:focus {
 	color: white;
 }
+
+.suggestions a.mw-searchSuggest-link .special-query {
+	/* Apply ellipsis to suggestions */
+	overflow: hidden;
+	-o-text-overflow: ellipsis; /* Opera 9 to 10 */
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

resources/mediawiki/mediawiki.searchSuggest.js

@@ -62,13 +62,7 @@
 			resultRenderCache.linkParams[ resultRenderCache.textParam ] = text;
 
 			// this is the container <div>, jQueryfied
-			this
-				.append(
-					// the <span> is needed for $.autoEllipsis to work
-					$( '<span>' )
-						.css( 'whiteSpace', 'nowrap' )
-						.text( text )
-				)
+			this.text( text )
 				.wrap(
 					$( '<a>' )
 						.attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
@@ -95,13 +89,11 @@
 						$( '<div>' )
 							.addClass( 'special-query' )
 							.text( query )
-							.autoEllipsis()
 					)
 					.show();
 			} else {
 				$el.find( '.special-query' )
-					.text( query )
-					.autoEllipsis();
+					.text( query );
 			}
 
 			if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {