Add help text above the buttons

Change-Id: I73dfb7e9386f965a49ae8734d136972286f82605

i18n/en.json

@@ -16,6 +16,7 @@
 "ext-uls-language-settings-title": "Language settings",
 "ext-uls-language-settings-apply": "Apply settings",
 "ext-uls-language-settings-cancel": "Cancel",
+"ext-uls-language-buttons-help": "Change the language of menus. Content language will not be affected.",
 "ext-uls-display-settings-font-settings": "Font settings",
 "ext-uls-display-settings-ui-language": "Display language",
 "ext-uls-webfonts-settings-title": "Download font when needed",

i18n/qqq.json

@@ -18,6 +18,7 @@
     "ext-uls-language-settings-title": "Title text for language settings screen.\n{{Identical|Language settings}}",
     "ext-uls-language-settings-apply": "Label for apply settings button in language settings screen",
     "ext-uls-language-settings-cancel": "Label for cancel button in language settings screen",
+    "ext-uls-language-buttons-help": "Help text that appears above the language selection buttons in the Display settings panel.",
     "ext-uls-display-settings-font-settings": "Subsection title for font settings",
     "ext-uls-display-settings-ui-language": "Sub section title for selecting UI language.\n{{Identical|Display language}}",
     "ext-uls-webfonts-settings-title": "Short title for enabling webfonts",
@@ -44,4 +45,4 @@
     "ext-uls-input-enable": "Label for enable input tools button",
     "ext-uls-input-disable-info": "Info text for the disable input tools button",
     "ext-uls-input-settings-noime": "Text to be shown when no input methods are available for a selected language"
-}
+}

resources/css/ext.uls.languagesettings.css

@@ -138,6 +138,7 @@
 	margin-left: 15px;
 }
 
+.uls-ui-languages p,
 .checkbox {
 	color: #555555;
 	font-size: 10pt;

resources/js/ext.uls.displaysettings.js

@@ -42,7 +42,9 @@
 
 		// UI languages buttons row
 		+ '<div class="row">'
-		+ '<div class="uls-ui-languages eleven columns"></div>'
+		+ '<div class="uls-ui-languages eleven columns">'
+		+ '<p data-i18n="ext-uls-language-buttons-help"></p>'
+		+ '</div>'
 		+ '</div>'
 
 		+ '</div>' // End display language section
@@ -162,7 +164,7 @@
 
 			// This is needed when drawing the panel for the second time
 			// after selecting a different language
-			$languages.empty();
+			$languages.find( 'button' ).remove();
 
 			// UI language must always be present
 			if ( this.uiLanguage !== this.contentLanguage ) {