Do not use PNG for thanks button

Instead use mediawiki.ui and ResourceLoaderImageModule

Other changes:
* Add gender support to thanks-button-thanked

Depends-On: I0745e112d11026ed59d8daca990b313305cd094a
Bug: T198151
Change-Id: I82ae596330aff8387653c65a6bab5ff729641a80

extension.json

@@ -62,6 +62,19 @@
 		"SpecialThanks": "includes/SpecialThanks.php"
 	},
 	"ResourceModules": {
+		"ext.thanks.images": {
+			"class": "ResourceLoaderImageModule",
+			"selector": ".mw-ui-icon-{name}:before",
+			"defaultColor": "#fff",
+			"images": {
+				"userTalk": {
+					"file": {
+							"ltr": "userTalk-ltr.svg",
+							"rtl": "userTalk-rtl.svg"
+					}
+				}
+			}
+		},
 		"ext.thanks": {
 			"scripts": [
 				"ext.thanks.thank.js"
@@ -110,6 +123,7 @@
 				"thanks-thanked-notice"
 			],
 			"dependencies": [
+				"ext.thanks.images",
 				"mediawiki.api",
 				"mediawiki.jqueryMsg",
 				"mediawiki.notify"

modules/ext.thanks.mobilediff.js

@@ -31,6 +31,20 @@
 		} );
 	}
 
+	/**
+	 * Disables the thank button marking the user as thanked
+	 *
+	 * @param {jQuery} $button used for thanking
+	 * @param {string} gender The gender of the user who made the edit
+	 * @return {jQuery} $button now disabled
+	 */
+	function disableThanks( $button, gender ) {
+		return $button
+			.addClass( 'thanked' )
+			.prop( 'disabled', true )
+			.text( mw.message( 'thanks-button-thanked', mw.user, gender ).text() );
+	}
+
 	/**
 	 * Create a thank button for a given edit
 	 *
@@ -40,11 +54,10 @@
 	 * @return {jQuery|null} The HTML of the button.
 	 */
 	function createThankLink( name, rev, gender ) {
-		var $thankImg = $( '<img>' ).attr( {
-			width: 25,
-			height: 20,
-			src: mw.config.get( 'wgExtensionAssetsPath' ) + '/Thanks/WhiteSmiley.png'
-		} ).addClass( 'mw-mf-action-button-icon' );
+		var $button = $( '<button>' )
+			.addClass(
+				'mw-mf-action-button mw-ui-button mw-ui-progressive mw-ui-icon mw-ui-icon-before mw-ui-icon-userTalk'
+			).text( mw.message( 'thanks-button-thank', mw.user, gender ).text() );
 
 		// Don't make thank button for self
 		if ( name === mw.config.get( 'wgUserName' ) ) {
@@ -52,23 +65,14 @@
 		}
 		// See if user has already been thanked for this edit
 		if ( mw.config.get( 'wgThanksAlreadySent' ) ) {
-			return $( '<button>' )
-				.addClass( 'mw-mf-action-button mw-ui-button mw-ui-progressive thanked' )
-				.prop( 'disabled', true )
-				.text( mw.message( 'thanks-button-thanked', mw.user ).text() )
-				.prepend( $thankImg );
+			return disableThanks( $button, gender );
 		}
-		return $( '<button>' )
-			.addClass( 'mw-mf-action-button mw-ui-button mw-ui-progressive' )
-			.text( mw.message( 'thanks-button-thank', mw.user, gender ).text() )
-			.prepend( $thankImg )
+		return $button
 			.on( 'click', function () {
 				var $this = $( this );
 				if ( !$this.hasClass( 'thanked' ) ) {
 					thankUser( name, rev, gender ).done( function () {
-						$this.addClass( 'thanked' ).prop( 'disabled', true )
-							.text( mw.message( 'thanks-button-thanked', mw.user, gender ).text() )
-							.prepend( $thankImg );
+						disableThanks( $this, gender );
 					} );
 				}
 			} );

modules/userTalk-ltr.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path d="M18 0H2a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-4 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 14 4zM6 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 6 4zm4 8c-2.61 0-4.83-.67-5.65-3h11.3c-.82 2.33-3.04 3-5.65 3z"/>
+</svg>

modules/userTalk-rtl.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path d="M0 2v12c0 1.1.9 2 2 2h14l4 4V2c0-1.1-.9-2-2-2H2C.9 0 0 .9 0 2zm7.5 3.5C7.5 6.3 6.8 7 6 7s-1.5-.7-1.5-1.5S5.2 4 6 4s1.5.7 1.5 1.5zm8 0c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5S13.2 4 14 4s1.5.7 1.5 1.5zM4.4 9h11.3c-.8 2.3-3 3-5.6 3s-4.9-.7-5.7-3z"/>
+</svg>

tests/qunit/test_ext.thanks.mobilediff.js

@@ -9,7 +9,7 @@
 
 		// eslint-disable-next-line no-underscore-dangle
 		mw.thanks._mobileDiffInit( $user, $container );
-		assert.strictEqual( $container.find( 'button' ).length, 1, 'Thanks button was created.' );
+		assert.strictEqual( $container.find( '.mw-ui-button' ).length, 1, 'Thanks button was created.' );
 	} );
 
 }( jQuery, mediaWiki ) );