Fix Bug 38665 - Show clean 'x' icon on the search box only when useful

Change-Id: I3fc295728f25cce7a326101467146f8ee3415116

resources/css/ext.uls.css

@@ -144,7 +144,7 @@ input:focus#languagefilter {
 	display: inline-block;
 	float: right;
 }
-span.clear-button {
+span#languagefilter-clear {
 	/* @embed */
 	background: url('../images/clear.png') no-repeat scroll left center transparent;
 	cursor: pointer;

resources/ext.uls.core.js

@@ -123,15 +123,11 @@
 				languages: that.languages,
 				success: function() {
 					// clear the search field.
-					that.$languageFilter.val( '' );
+					that.$languageFilter.languagefilter( 'clear' );
 					that.success();
 				}
 			} );
 
-			$( '.clear-button' ).on( 'click', function() {
-				// go to the ready state.
-				that.ready();
-			} );
 		},
 
 		keyup: function( e ) {

resources/ext.uls.languagefilter.js

@@ -32,6 +32,7 @@
 		this.$element.addClass( 'languagefilter' );
 		this.resultCount = 0;
 		this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) );
+		this.$clear = $( '#'+ this.$element.data( 'clear' ) );
 		this.listen();
 	};
 
@@ -51,6 +52,10 @@
 			if ( $.browser.webkit || $.browser.msie ) {
 				this.$element.on( 'keydown', $.proxy( this.keyup, this ) );
 			}
+			if ( this.$clear.length ) {
+				this.$clear.on( 'click' , $.proxy( this.clear, this ) );
+			}
+			this.toggleClear();
 		},
 
 		keyup: function( e ) {
@@ -70,6 +75,23 @@
 						that.options.$target.empty();
 						that.search();
 					}, 500 );
+					this.toggleClear();
+			}
+		},
+
+		clear: function() {
+			this.$element.val( '' );
+			this.$element.focus();
+			this.toggleClear();
+			this.search();
+		},
+
+		toggleClear: function() {
+			if ( !this.$clear.length ) return;
+			if ( this.$element.val() ) {
+				this.$clear.show();
+			} else {
+				this.$clear.hide();
 			}
 		},