Show badges in ULS language list

Update jquery.uls to ae9dda23b71aa76fbbc13f5650

Bug: T131233
Change-Id: I7c7bafccc7d63c0a97c98b81a5b53b48c9afa527

lib/jquery.uls/css/jquery.uls.lcd.css

@@ -9,7 +9,10 @@
 /* Language list */
 .uls-language-list {
 	height: 20em;
-	overflow: auto;
+	/* Work around Chrome bug where it places scrollbar on the left in
+	 * in RTL mode but actually reserves the place on the right side */
+	overflow-x: hidden;
+	overflow-y: auto;
 	width: auto;
 	background: #FCFCFC;
 }
@@ -18,20 +21,19 @@
 	margin: 0 0 1.5em;
 }
 
-.uls-language-list ul li {
+.uls-language-list ul {
-	cursor: pointer;
-	font-weight: normal;
-	overflow: hidden;
-	white-space: nowrap;
-
 	/*
-	 * Some languages have long names for various reasons and we still want
+	 * We don't want any visible bullets in this list. Not by default anyway.
-	 * them to appear on one line.
+	 * Using very unspecific selector here to allow other classes to override.
-	 * To make it work correctly, the directionality must be set correctly
+	 * Bug because overflow: hidden is incompatible with bullets, also render
-	 * on the item level.
+	 * the bullets inside the list in case there should be any.
 	 */
-	text-overflow: ellipsis;
+	list-style-image: none;
+	list-style-type: none;
+}
 
+.uls-language-list li {
+	cursor: pointer;
 	/*
 	 * The directionality (ltr/rtl) for each list item is set dynamically
 	 * as HTML attributes in JavaScript. Setting directionality also applies
@@ -42,14 +44,9 @@
 	 * is readable.
 	 */
 	text-align: left;
-
-	/*
-	 * We don't want any visible bullets in this list.
-	 */
-	list-style-image: none;
-	list-style-type: none;
 }
 
+/* TODO: looks unused */
 .uls-language-list strong {
 	text-decoration: underline;
 }
@@ -60,6 +57,18 @@
 	color: #3366bb;
 	font-size: 14px;
 	line-height: 1.6em;
+	display: inline-block;
+	width: 100%;
+	overflow: hidden;
+	/*
+	 * Some languages have long names for various reasons and we still want
+	 * them to appear on one line.
+	 * To make it work correctly, the directionality must be set correctly
+	 * on the item level.
+	 */
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	vertical-align: middle;
 }
 
 .uls-language-block {

lib/jquery.uls/src/jquery.uls.lcd.js

@@ -273,13 +273,14 @@
 			// Not using jQuery as this is performance hotspot
 			li = document.createElement( 'li' );
 			li.title = name;
-			li.lang = code;
-			li.dir = $.uls.data.getDir( code );
 			li.setAttribute( 'data-code', code );
 
 			a = document.createElement( 'a' );
 			a.appendChild( document.createTextNode( autonym ) );
 			a.className = 'autonym';
+			a.lang = code;
+			a.dir = $.uls.data.getDir( code );
+
 
 			li.appendChild( a );
 			if ( this.options.languageDecorator ) {

resources/js/ext.uls.compactlinks.js

@@ -156,13 +156,17 @@
 					$trigger.addClass( 'selector-open' );
 				},
 				languageDecorator: function ( $languageLink, language ) {
+					var data = self.interlanguageList[ language ];
 					// set href and text exactly same as what was in
 					// interlanguage link. The ULS autonym might be different in some
 					// cases like sr. In ULS it is "српски", while in interlanguage links
 					// it is "српски / srpski"
 					$languageLink
-						.prop( 'href', self.interlanguageList[ language ].href )
+						.prop( 'href', data.href )
-						.text( self.interlanguageList[ language ].autonym );
+						.text( data.autonym );
+
+					// This code is to support badges used in Wikimedia
+					$languageLink.parent().addClass( data.element.parentNode.className );
 				},
 				onCancel: function () {
 					$trigger.removeClass( 'selector-open' );