Move reload image into the _Refresh_ background

This makes the icon and text a single item, so they don't split across
lines, and reduces code and messages.

Bug: 47398
Change-Id: If81313b9fe03693dcdc06d5d682f0ef9a9994f76

FancyCaptcha.class.php

@@ -98,25 +98,16 @@ class FancyCaptcha extends SimpleCaptcha {
 		$index = $this->getCaptchaIndex();
 
 		if ( $wgEnableAPI ) {
-			$reloadText = wfMessage( 'fancycaptcha-reload-text' )->text();
-
 			// Loaded only if JS is enabled
 			$wgOut->addModules( 'ext.confirmEdit.fancyCaptcha' );
 
-			$captchaReload = "<span class='confirmedit-captcha-reload fancycaptcha-reload'>" .
+			$captchaReload = Html::element(
-			Html::element( 'img', array(
+				'small',
-					'class'  => 'fancycaptcha-reload-button',
+				array(
-					'src'    => $wgExtensionAssetsPath . '/ConfirmEdit/images/fancycaptcha-reload-icon.png',
+					'class' => 'confirmedit-captcha-reload fancycaptcha-reload'
-					'alt'    => wfMessage( 'fancycaptcha-reload-button' )->text(),
-					'title'  => $reloadText
-				)
-			) .
-			Html::element( 'small', array(
-					'class'  => 'fancycaptcha-reload-text'
 				),
-				$reloadText
+				wfMessage( 'fancycaptcha-reload-text' )->text()
-			) .
+			);
-			"</span>\n";
 		} else {
 			$captchaReload = '';
 		}

FancyCaptcha.i18n.php

@@ -19,7 +19,6 @@ To help protect against automated spam, please enter the words that appear below
 	'fancycaptcha-create'        => 'To create the page, please enter the words that appear below in the box ([[Special:Captcha/help|more info]]):',
 	'fancycaptcha-edit'          => 'To edit this page, please enter the words that appear below in the box ([[Special:Captcha/help|more info]]):',
 	'fancycaptcha-sendemail'     => 'To help protect against automated spamming, please enter the words that appear below in the box ([[Special:Captcha/help|more info]]):',
-	'fancycaptcha-reload-button' => 'Refresh',
 	'fancycaptcha-reload-text'   => 'Refresh',
 );
 
@@ -38,16 +37,7 @@ $messages['qqq'] = array(
 	'fancycaptcha-create' => '{{Related|ConfirmEdit-create}}',
 	'fancycaptcha-edit' => '{{Related|ConfirmEdit-edit}}',
 	'fancycaptcha-sendemail' => '{{Related|ConfirmEdit-sendemail}}',
-	'fancycaptcha-reload-button' => 'Alternative (alt) text for reload button to get a new FancyCaptcha image.
+	'fancycaptcha-reload-text' => 'Prompts a click to get a new FancyCaptcha image.',
-
-The title attribute for the reload button is {{msg-mw|Fancycaptcha-reload-text}}.
-{{Identical|Refresh}}',
-	'fancycaptcha-reload-text' => 'Prompts a click to get a new FancyCaptcha image.
-
-Used as <code>title</code> attribute for an image.
-
-The <code>alt</code> attribute for the image is {{msg-mw|Fancycaptcha-reload-button}}.
-{{Identical|Refresh}}',
 );
 
 /** Gheg Albanian (Gegë)
@@ -142,7 +132,6 @@ $messages['ast'] = array(
 	'fancycaptcha-create' => "Pa crear la páxina, por favor escribi nel caxellu les pallabres qu'apaecen embaxo ([[Special:Captcha/help|más información]]):",
 	'fancycaptcha-edit' => "Pa editar la páxina, por favor escribi nel caxellu les pallabres qu'apaecen embaxo ([[Special:Captcha/help|más información]]):",
 	'fancycaptcha-sendemail' => "P'ayudar a protexer escontra'l corréu puxarra automáticu, por favor escribi nel caxellu les pallabres qu'apaecen embaxo ([[Special:Captcha/help|más información]]):",
-	'fancycaptcha-reload-button' => 'Refrescar',
 	'fancycaptcha-reload-text' => 'Refrescar',
 );
 
@@ -184,7 +173,6 @@ $messages['be-tarask'] = array(
 	'fancycaptcha-create' => 'Для стварэньня старонкі, калі ласка, увядзіце словы, якія паказаныя ў выяве ([[Special:Captcha/help|болей інфармацыі]]):',
 	'fancycaptcha-edit' => 'Для рэдагаваньня гэтай старонкі, калі ласка, увядзіце словы, якія паказаныя ў выяве ([[Special:Captcha/help|болей інфармацыі]]):',
 	'fancycaptcha-sendemail' => 'У мэтах абароны супраць аўтаматычнага спаму, калі ласка, увядзіце словы паказаныя ніжэй у полі ([[Special:Captcha/help|дадатковая інфармацыя]]):',
-	'fancycaptcha-reload-button' => 'Абнавіць',
 	'fancycaptcha-reload-text' => 'Абнавіць',
 );
 
@@ -279,7 +267,6 @@ $messages['cs'] = array(
 	'fancycaptcha-create' => 'Abyste mohli založit stránku, musíte opsat text z následujícího obrázku: ([[Special:Captcha/help|Co tohle znamená?]])',
 	'fancycaptcha-edit' => 'Abyste mohli editovat tuto stránku, musíte opsat text z následujícího obrázku: ([[Special:Captcha/help|Co tohle znamená?]])',
 	'fancycaptcha-sendemail' => 'V rámci ochrany proti automatickému spamování musíte opsat níže zobrazená slova ([[Special:Captcha/help|více informací]]):',
-	'fancycaptcha-reload-button' => 'Obnovit',
 	'fancycaptcha-reload-text' => 'Vygenerovat nový kód',
 );
 
@@ -331,7 +318,6 @@ Zum Schutz vor automatisiertem Spamming gib das folgende Wort in das Feld unten
 	'fancycaptcha-create' => 'Zur Erstellung der Seite gib das folgende Wort in das Feld unten ein [[Special:Captcha/help|(Fragen oder Probleme?)]].',
 	'fancycaptcha-edit' => 'Zur Bearbeitung der Seite gib das folgende Wort in das Feld unten ein [[Special:Captcha/help|(Fragen oder Probleme?)]].',
 	'fancycaptcha-sendemail' => 'Um gegen automatischen Spam vorzugehen, gib bitte die Wörter unten in das Feld ein ([[Special:Captcha/help|mehr Informationen]]):',
-	'fancycaptcha-reload-button' => 'Aktualisieren',
 	'fancycaptcha-reload-text' => 'Aktualisieren',
 );
 
@@ -505,7 +491,6 @@ Pour vérifier qu’il ne s’agit pas de pourriels automatisés, veuillez entre
 	'fancycaptcha-create' => 'Pour créer la page, veuillez entrer les mots qui apparaissent dans la boîte ci-dessous ([[Special:Captcha|plus d’informations]]) :',
 	'fancycaptcha-edit' => 'Pour modifier cette page, veuillez saisir les mots qui apparaissent dans la boîte ci-dessous ([[Special:Captcha/help|plus d’information]]) :',
 	'fancycaptcha-sendemail' => 'Afin de nous aider à prévenir le pollupostage automatisé, veuillez entrer les mots qui apparaissent dans la boîte ci-dessous ([[Special:Captcha/help|plus d’informations]]) :',
-	'fancycaptcha-reload-button' => 'Actualiser',
 	'fancycaptcha-reload-text' => 'Actualiser',
 );
 
@@ -549,7 +534,6 @@ Para contribuír na protección contra o spam automatizado, introduza as palabra
 	'fancycaptcha-create' => 'Para crear a páxina, introduza as palabras que aparecen na caixa de embaixo ([[Special:Captcha/help|máis información]]):',
 	'fancycaptcha-edit' => 'Para editar esta páxina, introduza as palabras que aparecen na caixa de embaixo ([[Special:Captcha/help|máis información]]):',
 	'fancycaptcha-sendemail' => 'Para contribuír na protección contra o spam automatizado, introduza as palabras que aparecen na caixa ([[Special:Captcha/help|máis información]]):',
-	'fancycaptcha-reload-button' => 'Refrescar',
 	'fancycaptcha-reload-text' => 'Refrescar',
 );
 
@@ -595,7 +579,6 @@ $messages['he'] = array(
 	'fancycaptcha-create' => 'כדי ליצור את הדף, אנא הקלידו את המילים המופיעות להלן בתיבה ([[Special:Captcha/help|מידע נוסף]]):',
 	'fancycaptcha-edit' => 'כדי לערוך את הדף, אנא הקלידו את המילים המופיעות להלן בתיבה ([[Special:Captcha/help|מידע נוסף]]):',
 	'fancycaptcha-sendemail' => 'כדי לעזור להתגונן מפני שליחת זבל אוטומטית, אנא הכניסו את המילים שמופיעות בתיבה למטה ([[Special:Captcha/help|מידע נוסף]]):',
-	'fancycaptcha-reload-button' => 'רענון',
 	'fancycaptcha-reload-text' => 'רענון',
 );
 
@@ -719,7 +702,6 @@ $messages['it'] = array(
 	'fancycaptcha-create' => 'Per creare la pagina si prega di inserire nella casella sottostante le parole che compaiono nella casella di seguito ([[Special:Captcha/help|come funziona?]]):',
 	'fancycaptcha-edit' => 'Per modificare questa pagina si prega di inserire nella casella sottostante le parole che compaiono di seguito ([[Special:Captcha/help|come funziona?]]):',
 	'fancycaptcha-sendemail' => 'Come misura precauzionale nei confronti dei messaggi di spam automatici, si prega di inserire nella casella sottostante le parole che compaiono di seguito ([[Special:Captcha/help|come funziona?]]):',
-	'fancycaptcha-reload-button' => 'Aggiorna',
 	'fancycaptcha-reload-text' => 'Aggiorna',
 );
 
@@ -738,7 +720,6 @@ $messages['ja'] = array(
 	'fancycaptcha-create' => 'ページを新規作成するには、下記の確認用の文字列を欄に入力してください ([[Special:Captcha/help|詳細]]):',
 	'fancycaptcha-edit' => 'このページを編集するには、下記の確認用の文字列を欄に入力してください ([[Special:Captcha/help|詳細]]):',
 	'fancycaptcha-sendemail' => '自動でのスパム攻撃を防ぐため、下記の確認用の文字列を欄に入力してください ([[Special:Captcha/help|詳細]]):',
-	'fancycaptcha-reload-button' => '更新',
 	'fancycaptcha-reload-text' => '更新',
 );
 
@@ -969,7 +950,6 @@ $messages['mk'] = array(
 	'fancycaptcha-create' => 'За да создадете страница, внесете ги зборовите на сликичката подолу ([[Special:Captcha/help|повеќе информации]]):',
 	'fancycaptcha-edit' => 'За да ја уредите страницава, внесете ги зборовите на сликичката подолу ([[Special:Captcha/help|повеќе информации]]):',
 	'fancycaptcha-sendemail' => 'За да се заштитиме од автоматизирано спамирање, препишете ги зборовите од сликичката во полето подолу ([[Special:Captcha/help|повеќе информации]]):',
-	'fancycaptcha-reload-button' => 'Превчитај',
 	'fancycaptcha-reload-text' => 'Превчитај',
 );
 
@@ -1012,7 +992,6 @@ $messages['ms'] = array(
 	'fancycaptcha-create' => 'Untuk mencipta laman ini, anda diminta mengisi huruf-huruf berikut dalam kotak yang disediakan ([[Special:Captcha/help|maklumat lanjut]]):',
 	'fancycaptcha-edit' => 'Untuk menyunting laman ini, anda diminta mengisi huruf-huruf berikut dalam kotak yang disediakan ([[Special:Captcha/help|maklumat lanjut]]):',
 	'fancycaptcha-sendemail' => 'Untuk membanteras kegiatan spam secara automatik, anda diminta mengisi huruf-huruf berikut dalam kotak yang disediakan ([[Special:Captcha/help|maklumat lanjut]]):',
-	'fancycaptcha-reload-button' => 'Muat semula',
 	'fancycaptcha-reload-text' => 'Muat semula',
 );
 
@@ -1082,7 +1061,6 @@ Voer de woorden die hieronder verschijnen in het invoerveld in als bescherming t
 	'fancycaptcha-create' => 'Voer de woorden die hieronder verschijnen in het invoerveld in om de pagina aan te maken ([[Special:Captcha/help|meer informatie]]):',
 	'fancycaptcha-edit' => 'Voer de woorden die hieronder verschijnen in het invoerveld in om deze pagina te bewerken ([[Special:Captcha/help|meer informatie]]):',
 	'fancycaptcha-sendemail' => 'Voer de woorden die hieronder verschijnen in het invoerveld in als bescherming tegen geautomatiseerde spam ([[Special:Captcha/help|meer informatie]]):',
-	'fancycaptcha-reload-button' => 'Verversen',
 	'fancycaptcha-reload-text' => 'Verversen',
 );
 
@@ -1242,7 +1220,6 @@ Pe aiutà a proteggere condre a 'u spam automateche, pe piacere mitte le parole
 	'fancycaptcha-create' => 'Pe ccrejà sta pàgene, pe piacere mitte le parole ca combare aqquà sotte ([[Special:Captcha/help|more info]]):',
 	'fancycaptcha-edit' => 'Pe cangià sta pàgene, pe piacere mitte le parole combare aqquà sotte ([[Special:Captcha/help|more info]]):',
 	'fancycaptcha-sendemail' => "Pe aiutà a proteggere condre a spam automatece, pe piacere mitte le parole ca combare aqquà sotte ([[Special:Captcha/help|cchiù 'mbormaziune]]):",
-	'fancycaptcha-reload-button' => 'Aggiorne',
 	'fancycaptcha-reload-text' => 'Aggiorne',
 );
 
@@ -1573,7 +1550,6 @@ $messages['vi'] = array(
 	'fancycaptcha-create' => 'Để tạo trang, xin hãy nhập những chữ xuất hiện ở dưới vào ô ([[Special:Captcha/help|thông tin thêm]]):',
 	'fancycaptcha-edit' => 'Để sửa trang này, xin hãy nhập những từ xuất hiện ở dưới vào ô ([[Special:Captcha/help|thông tin thêm]]):',
 	'fancycaptcha-sendemail' => 'Để giúp chúng tôi chống lại spam tự động, xin hãy nhập những từ xuất hiện ở dưới vào ô ([[Special:Captcha/help|thông tin thêm]]):',
-	'fancycaptcha-reload-button' => 'Làm tươi',
 	'fancycaptcha-reload-text' => 'Làm tươi',
 );
 

resources/ext.confirmEdit.fancyCaptcha.css

@@ -9,30 +9,25 @@ layout, for normal CAPTCHA sizes. */
 	min-height: 95px;
 }
 
-.fancycaptcha-reload {
-	padding: 0 5px;
-}
-
 .client-nojs .fancycaptcha-reload {
 	display: none;
 }
 
-.fancycaptcha-reload-button {
+.fancycaptcha-reload {
-	padding: 5px;
+	/* @embed */
-}
+	background: url(images/fancycaptcha-reload-icon.png) no-repeat scroll left center transparent;
 
-.fancycaptcha-reload-button:hover {
+	margin: 0 0 0 3px;
-	cursor: pointer;
+	padding: 1px 2px 1px 12px;
-	cursor: hand;
-}
-
-.fancycaptcha-reload-text {
 	color: #0645AD;
-	display: inline !important;
-}
-
-.fancycaptcha-reload-text:hover {
-	text-decoration: underline;
 	cursor: pointer;
 	cursor: hand;
 }
+
+.fancycaptcha-reload:hover {
+	text-decoration: underline;
+}
+.fancycaptcha-reload-loading {
+	/* @embed */
+	background: url(images/ajax-loader-10x10.gif) no-repeat scroll left center transparent;
+}

resources/ext.confirmEdit.fancyCaptcha.js

@@ -1,14 +1,11 @@
 ( function ( $, mw ) {
 	var api = new mw.Api();
 	$( document ).on( 'click', '.fancycaptcha-reload', function () {
-		var staticImageDirectory = mw.config.get( 'wgExtensionAssetsPath' ) + '/ConfirmEdit/images/',
+		var $this = $( this ), $captchaImage;
-			$this = $( this ), reloadButtonImage, captchaImage;
 
-		reloadButtonImage = $this
+		$this.addClass( 'fancycaptcha-reload-loading' );
-			.find( '.fancycaptcha-reload-button' )
-			.attr( 'src', staticImageDirectory + 'ajax-loader-10x10.gif' );
 
-		captchaImage = $( '.fancycaptcha-image' );
+		$captchaImage = $( '.fancycaptcha-image' );
 
 		// AJAX request to get captcha index key
 		api.post( {
@@ -22,9 +19,9 @@
 			captchaIndex = $( xmldata ).find( 'fancycaptchareload' ).attr( 'index' );
 			if ( typeof captchaIndex === 'string' ) {
 				// replace index key with a new one for captcha image
-				imgSrc = captchaImage.attr( 'src' )
+				imgSrc = $captchaImage.attr( 'src' )
 				.replace( /(wpCaptchaId=)\w+/, '$1' + captchaIndex );
-				captchaImage.attr( 'src', imgSrc );
+				$captchaImage.attr( 'src', imgSrc );
 
 				// replace index key with a new one for hidden tag
 				$( '#wpCaptchaId' ).val( captchaIndex );
@@ -32,7 +29,7 @@
 			}
 		} )
 		.always( function () {
-			reloadButtonImage.attr( 'src', staticImageDirectory + 'fancycaptcha-reload-icon.png' );
+			$this.removeClass( 'fancycaptcha-reload-loading' );
 		} );
 
 		return false;