Convert SimpleCaptcha to OOUI

Change-Id: Ic904b53b2ac489be572f4b6096ddc8c92c482a59

SimpleCaptcha/SimpleCaptcha.php

@@ -122,21 +122,30 @@ class SimpleCaptcha {
 		$index = $this->storeCaptcha( $captcha );
 
 		return [
-			'html' => "<p><label for=\"wpCaptchaWord\">{$captcha['question']} = </label>" .
-				Xml::element( 'input', [
+			'html' =>
+				new OOUI\FieldLayout(
+					new OOUI\NumberInputWidget( [
 						'name' => 'wpCaptchaWord',
-					'class' => 'mw-ui-input',
+						'classes' => [ 'simplecaptcha-answer' ],
 						'id' => 'wpCaptchaWord',
-					'size'  => 5,
 						'autocomplete' => 'off',
 						// tab in before the edit textarea
-					'tabindex' => $tabIndex ] ) .
-				"</p>\n" .
-				Xml::element( 'input', [
-					'type'  => 'hidden',
+						'tabIndex' => $tabIndex
+					] ),
+					[
+						'align' => 'left',
+						'label' => $captcha['question'] . ' = ',
+						'classes' => [ 'simplecaptcha-field' ],
+					]
+				) .
+				new OOUI\HiddenInputWidget( [
 					'name' => 'wpCaptchaId',
 					'id' => 'wpCaptchaId',
-					'value' => $index ] )
+					'value' => $index
+				] ),
+			'modulestyles' => [
+				'ext.confirmEdit.simpleCaptcha'
+			]
 		];
 	}
 

SimpleCaptcha/resources/ext.confirmEdit.simpleCaptcha.css

@@ -0,0 +1,10 @@
+.simplecaptcha-field .oo-ui-fieldLayout-header {
+	/* stylelint-disable declaration-no-important */
+	width: auto !important;
+	padding-right: 1em !important;
+	/* stylelint-enable declaration-no-important */
+}
+
+.simplecaptcha-answer.oo-ui-textInputWidget {
+	width: 5em;
+}

extension.json

@@ -73,6 +73,9 @@
 		},
 		"ext.confirmEdit.visualEditor": {
 			"scripts": "ve-confirmedit/ve.init.mw.CaptchaSaveErrorHandler.js"
+		},
+		"ext.confirmEdit.simpleCaptcha": {
+			"styles": "../SimpleCaptcha/resources/ext.confirmEdit.simpleCaptcha.css"
 		}
 	},
 	"VisualEditorPluginModules": [