Correct the position the arrow of selector and add shadow

The pointer arrow of the ULS was not aligned with the 'x more' trigger
and it missed shadow. This commit fixes it.

Notably, we replace the old arrow with a box rotated 45 degree so that
we can apply the shadow very easily.

Bug: T130633
Change-Id: I4d36f3ee9fcfea932e10208518a03e7b246a7abe

resources/css/ext.uls.compactlinks.css

@@ -13,28 +13,39 @@
 	background-image: url( ../images/compact-links-trigger.svg );
 	background-size: 17px;
 	background-repeat: no-repeat;
-	background-position: 9% 8%;
+	background-position: left 4px center;
 	margin: 4px 0;
+	text-align: left;
 }
 
-.interlanguage-uls-menu:after,
 .interlanguage-uls-menu:before {
-	right: 100%;
+	background: none repeat scroll 0 0 #FCFCFC;
+	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
+	border-top: 1px solid rgba( 0, 0, 0, 0.2 );
+	box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 );
 	content: "";
+	height: 24px;
+	width: 24px;
+	left: -13px;
 	position: absolute;
-	border: 1px solid black;
+	/* The dialog middle is positioned 250px away from the center of the trigger. Substract 12 for
+	 * half of the box height to center middle of the box rather than the top.  The remaining 2 are
+	 * either for top-margin of the menu and border of this box, or because we use do not account
+	 * for the margin of the trigger when we use $.fn.outerWidth without true as a parameter.
+	 */
+	top: 236px;
+	transform: rotate( -45deg );
+	-webkit-transform: rotate( -45deg );
+	-moz-transform: rotate( -45deg );
+	-o-transform: rotate( -45deg );
+	-ms-transform: rotate( -45deg );
+	background-clip: padding-box;
 }
 
-.interlanguage-uls-menu:after {
+body.rtl .interlanguage-uls-menu:before {
-	border-color: transparent;
+	transform: rotate( 45deg );
-	border-right-color: #FCFCFC;
+	-webkit-transform: rotate( 45deg );
-	border-width: 20px;
+	-moz-transform: rotate( 45deg );
-	top: 250px;
+	-o-transform: rotate( 45deg );
-}
+	-ms-transform: rotate( 45deg );
-
-.interlanguage-uls-menu:before {
-	border-color: transparent;
-	border-right-color: #555555;
-	border-width: 20px;
-	top: 250px;
 }

resources/js/ext.uls.compactlinks.js

@@ -95,8 +95,6 @@
 			var languages,
 				compactLinks = this,
 				dir = $( 'html' ).prop( 'dir' ),
-				interlanguageListLeft,
-				interlanguageListWidth,
 				ulsLanguageList = {};
 
 			languages = $.map( compactLinks.interlanguageList, function ( language, languageCode ) {
@@ -105,9 +103,6 @@
 				return languageCode;
 			} );
 
-			// Calculate the left and width values
-			interlanguageListLeft = compactLinks.$interlanguageList.offset().left;
-			interlanguageListWidth = compactLinks.$interlanguageList.width();
 			// Attach ULS to the trigger
 			compactLinks.$trigger.uls( {
 				onReady: function () {
@@ -127,14 +122,33 @@
 					location.href = compactLinks.interlanguageList[ language ].href;
 				},
 				onVisible: function () {
-					// Calculate the positioning of the panel
+					var offset, height, width, triangleWidth;
-					// according to the position of the trigger icon
+					// The panel is positioned carefully so that our pointy triangle,
+					// which is implemented as a square box rotated 45 degrees with
+					// rotation origin in the middle. See the corresponding style file.
+
+					// These are for the trigger
+					offset = compactLinks.$trigger.offset();
+					width = compactLinks.$trigger.outerWidth();
+					height = compactLinks.$trigger.outerHeight();
+
+					// Triangle width is: Math.sqrt( 2 * Math.pow( 25, 2 ) ) / 2 =~ 17.7;
+					// Box width = 24 + 1 for border.
+					// The resulting value is rounded up 20 to have a small space between.
+					triangleWidth = 20;
+
 					if ( dir === 'rtl' ) {
-						this.left = interlanguageListLeft - this.$menu.width();
+						this.left = offset.left - this.$menu.outerWidth() - triangleWidth;
 					} else {
-						this.left = interlanguageListLeft + interlanguageListWidth;
+						this.left = offset.left + width + triangleWidth;
 					}
-					this.$menu.css( 'left', this.left );
+					// Offset -250px from the middle of the trigger
+					this.top = offset.top + ( height / 2 ) - 250;
+
+					this.$menu.css( {
+						left: this.left,
+						top: this.top
+					} );
 				},
 				languageDecorator: function ( $languageLink, language ) {
 					// set href according to language
@@ -142,10 +156,6 @@
 				},
 				// Use compact version of ULS
 				compact: true,
-				// Top position of the language selector. Top it 250px above to take care of
-				// caret pointing the trigger. See .interlanguage-uls-menu:after style definition
-				top: compactLinks.$trigger.offset().top - compactLinks.$trigger.height() / 2 - 250,
-				// List of languages to be shown
 				languages: ulsLanguageList,
 				// Show common languages
 				quickList: compactLinks.filterByCommonLanguages( languages )