Fix: ULS popup moves to sidebar if opened from ime menu

Issues fixed:
Incorrect position of ULS when accessed from more languages button
of input/display settings, when language settings opened from ime
menu.

Arrow(callout) appearing for ULS when opened from more languages
button of input/display settings, when language settings opened from ime
menu.

Used a class 'callout' to mark whether windows need callout arrow or not.

Bug: 49060
Change-Id: Ic4c0a1e386918494a0d006a02dd0cf93ef269163

resources/css/ext.uls.css

@@ -58,7 +58,7 @@ x:-o-prefocus, body.rtl li#pt-uls {
 	cursor: pointer;
 }
 
-.uls-menu .caret-before {
+.uls-menu.callout .caret-before {
 	border-top: 20px solid transparent;
 	border-right: 20px solid #AAA;
 	border-bottom: 20px solid transparent;
@@ -68,7 +68,7 @@ x:-o-prefocus, body.rtl li#pt-uls {
 	position: absolute;
 }
 
-.uls-menu .caret-after {
+.uls-menu.callout .caret-after {
 	border-top: 20px solid transparent;
 	border-right: 20px solid #FCFCFC;
 	border-bottom: 20px solid transparent;

resources/js/ext.uls.displaysettings.js

@@ -260,8 +260,17 @@
 					uls.$menu.find( 'h1.uls-title' )
 						.data( 'i18n', 'ext-uls-display-settings-ui-language' )
 						.i18n();
+					uls.$menu.prepend(
+						$( '<span>' ).addClass( 'caret-before' ),
+						$( '<span>' ).addClass( 'caret-after' )
+					);
 				},
 				onVisible: function () {
+					if ( !displaySettings.$parent.$window.hasClass( 'callout' ) ) {
+						// callout menus will have position rules. others use
+						// default position
+						return;
+					}
 					var $parent = $( '#language-settings-dialog' );
 					// Re-position the element according to the window that called it
 					if ( parseInt( $parent.css( 'left' ), 10 ) ) {
@@ -270,6 +279,13 @@
 					if ( parseInt( $parent.css( 'top' ), 10 ) ) {
 						this.$menu.css( 'top', $parent.css( 'top' ) );
 					}
+					// If the ULS is shown in the the sidebar,
+					// add a caret pointing to the icon
+					if ( displaySettings.$parent.$window.hasClass( 'callout' ) ) {
+						this.$menu.addClass( 'callout' );
+					} else {
+						this.$menu.removeClass( 'callout' );
+					}
 				},
 				onSelect: function ( langCode ) {
 					displaySettings.enableApplyButton();
@@ -285,15 +301,6 @@
 				}
 			} );
 
-			// If the ULS is shown in the the sidebar,
-			// add a caret pointing to the icon
-			if ( mw.config.get( 'wgULSPosition' ) === 'interlanguage' ) {
-				$moreLanguagesButton.data( 'uls' ).$menu.prepend(
-					$( '<span>' ).addClass( 'caret-before' ),
-					$( '<span>' ).addClass( 'caret-after' )
-				);
-			}
-
 			$moreLanguagesButton.on( 'click', function () {
 				displaySettings.$parent.hide();
 			} );

resources/js/ext.uls.inputsettings.js

@@ -330,8 +330,17 @@
 					uls.$menu.find( 'h1.uls-title' )
 						.data( 'i18n', 'ext-uls-input-settings-ui-language' )
 						.i18n();
+					uls.$menu.prepend(
+						$( '<span>' ).addClass( 'caret-before' ),
+						$( '<span>' ).addClass( 'caret-after' )
+					);
 				},
 				onVisible: function () {
+					if ( !inputSettings.$parent.$window.hasClass( 'callout' ) ) {
+						// callout menus will have position rules. others use
+						// default position
+						return;
+					}
 					var $parent = $( '#language-settings-dialog' );
 					// Re-position the element according to the window that called it
 					if ( parseInt( $parent.css( 'left' ), 10 ) ) {
@@ -340,6 +349,12 @@
 					if ( parseInt( $parent.css( 'top' ), 10 ) ) {
 						this.$menu.css( 'top', $parent.css( 'top' ) );
 					}
+
+					if ( inputSettings.$parent.$window.hasClass( 'callout' ) ) {
+						this.$menu.addClass( 'callout' );
+					} else {
+						this.$menu.removeClass( 'callout' );
+					}
 				},
 				onSelect: function ( langCode ) {
 					inputSettings.enableApplyButton();
@@ -351,13 +366,6 @@
 				lazyload: false
 			} );
 
-			if ( mw.config.get( 'wgULSPosition' ) === 'interlanguage' ) {
-				$moreLanguagesButton.data( 'uls' ).$menu.prepend(
-					$( '<span>' ).addClass( 'caret-before' ),
-					$( '<span>' ).addClass( 'caret-after' )
-				);
-			}
-
 			$moreLanguagesButton.on( 'click', function () {
 				inputSettings.$parent.hide();
 			} );

resources/js/ext.uls.interface.js

@@ -288,6 +288,7 @@
 					var left,
 						ulsTriggerOffset = $ulsSettingsTrigger.offset();
 
+					this.$window.addClass( 'callout' );
 					if ( rtlPage ) {
 						left = ulsTriggerOffset.left - this.$window.width() - 30;
 					} else {
@@ -297,14 +298,11 @@
 					this.left = left;
 					this.top = ulsTriggerOffset.top - 50;
 					this.position();
-				}
+					this.$window.prepend(
-			} );
-
-			$( '.uls-menu' ).each( function () {
-				$( this ).prepend(
 						$( '<span>' ).addClass( 'caret-before' ),
 						$( '<span>' ).addClass( 'caret-after' )
 					);
+				}
 			} );
 		} else if ( anonMode ) {
 			$ulsTrigger.languagesettings();