Set the position of display settings to match ULS

Bug: 47822
Change-Id: I7b04a831b2c5d7932564a3cdde94be0e233f7a7b

resources/js/ext.uls.displaysettings.js

@@ -297,6 +297,18 @@
 						.data( 'i18n', 'ext-uls-display-settings-ui-language' )
 						.i18n();
 				},
+				onVisible: function () {
+					var $parent = $( '#language-settings-dialog' );
+
+					// Re-position the element according to the window that called it
+					this.top = $parent.css( 'top' );
+					this.left = $parent.css( 'left' );
+					this.$menu.css( this.position() );
+
+					this.$menu.find( '.caret-before, .caret-after' ).css( 'top',
+						this.$menu.find( '.row' ).height()
+					);
+				},
 				onSelect: function ( langCode ) {
 					displaySettings.enableApplyButton();
 					displaySettings.uiLanguage = langCode;
@@ -311,6 +323,15 @@
 				}
 			} );
 
+			// 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

@@ -318,6 +318,18 @@
 						.data( 'i18n', 'ext-uls-input-settings-ui-language' )
 						.i18n();
 				},
+				onVisible: function () {
+					var $parent = $( '#language-settings-dialog' );
+
+					// Re-position the element according to the window that called it
+					this.top = $parent.css( 'top' );
+					this.left = $parent.css( 'left' );
+					this.$menu.css( this.position() );
+
+					this.$menu.find( '.caret-before, .caret-after' ).css( 'top',
+						this.$menu.find( '.row' ).height()
+					);
+				},
 				onSelect: function ( langCode ) {
 					inputSettings.enableApplyButton();
 					inputSettings.imeLanguage = langCode;
@@ -329,6 +341,13 @@
 				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

@@ -166,6 +166,7 @@
 				var scrollPosition,
 					$currentMenu,
 					ulsHeight, ulsTop, ulsBottom,
+					correctedPosition,
 					$languageSettingsTrigger = this.$menu.find( '#display-settings-block' ),
 					padding = 10,
 					$window = $( window ),
@@ -180,7 +181,9 @@
 				this.left = rtlPage ?
 					ulsTriggerOffset.left - 22 - this.$menu.width() :
 					ulsTriggerOffset.left + 50;
-				this.$menu.css( this.position() );
+
+				correctedPosition = this.position();
+				this.$menu.css( correctedPosition );
 
 				// Show the Display settings panel:
 				// We are using the ULS trigger in the sidebar,
@@ -189,7 +192,7 @@
 				$languageSettingsTrigger.click();
 
 				$currentMenu = $( '.uls-menu:visible' );
-				$currentMenu.css( this.position() );
+				$currentMenu.css( correctedPosition );
 				ulsHeight = $currentMenu.height();
 				ulsTop = $currentMenu.offset().top;
 				ulsBottom = ulsTop + ulsHeight;
@@ -216,7 +219,6 @@
 				$currentMenu.find( '.caret-before, .caret-after' ).css( 'top',
 					$currentMenu.find( '.row' ).height()
 				);
-
 			};
 		} else if ( anonMode ) {
 			ulsOptions.onVisible = function () {