Help links for ime selector menu

Change-Id: Ia6a0db9af25216f3d03c5130de96000141ccaa57

resources/css/ext.uls.css

@@ -111,6 +111,34 @@ div.display-settings-block:hover .settings-text {
 	color: #252525;
 }
 
+/* Ime menu customizations */
+.ime-perime-help {
+	display: none;
+}
+
+.ime-checked .ime-perime-help {
+	display: inline-block;
+	width: 20px;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	opacity: 0.75;
+	padding: 0;
+	/* @embed */
+	background: transparent url('../images/help.png') left center no-repeat;
+	/* @embed */
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
+}
+
+.ime-checked .ime-perime-help:hover {
+	opacity: 1;
+}
+
+
 button.button {
 	display: inline-block;
 	padding: 0.4065em 1.2195em 0.4065em;

resources/css/ext.uls.inputsettings.css

@@ -25,12 +25,6 @@ div.input-settings-block {
 	float: left;
 }
 
-.ime-selector-more-languages:hover {
-	text-decoration: none;
-	color: #ffffff;
-	background-color: #5089e8;
-}
-
 .uls-ime-menu-settings-item {
 	background-color: #f0f0f0;
 	/* Workaround for bug https://bugzilla.wikimedia.org/49074 */
@@ -53,6 +47,7 @@ div.input-settings-block {
 	padding-left: 22px;
 	padding-right: 26px;
 	padding-bottom: 10px;
+	cursor: pointer;
 }
 
 .uls-ime-more-settings-link {
@@ -67,6 +62,7 @@ div.input-settings-block {
 	height: 14px;
 	position: absolute;
 	right: 0;
+	cursor: pointer;
 }
 
 .uls-ime-menu-settings-item > a:hover {

resources/images/help.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="18"
+   height="18"
+   viewBox="0 0 18 18.000001"
+   id="Layer_1"
+   xml:space="preserve"><metadata
+   id="metadata9"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs7" />
+<path
+   d="m 9.0000003,1.4996437 c -4.1414191,0 -7.5000004,3.357869 -7.5000004,7.5000014 0,4.1421309 3.3585813,7.5007119 7.5000004,7.5007119 C 13.142844,16.500357 16.5,13.141776 16.5,8.9996451 16.5,4.8575127 13.143556,1.4996437 9.0000003,1.4996437 z m -0.00142,11.9434423 c -0.6133062,0 -1.067053,-0.490074 -1.067053,-1.079874 0,-0.614018 0.4537468,-1.092697 1.067053,-1.092697 0.5897995,0 1.0684787,0.478679 1.0684787,1.092697 0,0.589087 -0.4786792,1.079874 -1.0684787,1.079874 z M 10.520808,8.8044702 C 10.005803,9.2090668 9.8084893,9.4676384 9.8084893,10.043191 V 10.39935 H 8.2378195 V 9.9698226 c 0,-1.0805866 0.319831,-1.521513 0.8220158,-1.914713 0.5036093,-0.3931991 0.8113306,-0.6019091 0.8113306,-1.1660648 0,-0.4786781 -0.2949,-0.7486467 -0.8832748,-0.7486467 -0.5036094,0 -0.9459591,0.1346281 -1.4118153,0.4544592 L 6.8274291,5.3076978 C 7.4407353,4.8774575 8.2022036,4.5711607 9.2079969,4.5711607 c 1.3619531,0 2.5045121,0.7486465 2.5045121,2.1839682 -7.12e-4,1.0186149 -0.56558,1.5585525 -1.191709,2.0493413 z"
+   id="path3"
+   style="fill:#575757" />
+</svg>

resources/js/ext.uls.ime.js

@@ -111,8 +111,7 @@
 
 	// Add a 'more setttings' link that takes to input settings of ULS
 	$.fn.imeselector.Constructor.prototype.helpLink = function () {
-		var $disableInputToolsLink, $moreSettingsLink, imeselector;
-
+		var $disableInputToolsLink, $moreSettingsLink,
 			imeselector = this;
 
 		$disableInputToolsLink = $( '<span>' )
@@ -186,7 +185,7 @@
 					var $ulsTrigger;
 
 					$ulsTrigger = $( '<a>' ).text( '...' )
-						.addClass( 'ime-selector-more-languages' )
+						.addClass( 'ime-selector-more-languages selectable-row selectable-row-item' )
 						.attr( {
 							title: $.i18n( 'ext-uls-input-settings-more-languages-tooltip' )
 						} );
@@ -200,6 +199,18 @@
 					} );
 
 					return $ulsTrigger;
+				},
+				helpHandler: function ( ime ) {
+					return $( '<a>' )
+						.attr( {
+							href: mw.msg( 'uls-ime-helppage' ).replace( '$1', ime ),
+							target: '_blank',
+							title: $.i18n( 'ext-uls-ime-help' )
+						} )
+						.addClass( 'ime-perime-help' )
+						.click( function ( event ) {
+							event.stopPropagation();
+						} );
 				}
 			} );