From a6fa3c4977b65550834b4eed5a7aaa489dcb1d17 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 13 Jun 2018 16:44:50 -0700
Subject: [PATCH] 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
---
 WhiteSmiley.png                           | Bin 810 -> 0 bytes
 extension.json                            |  14 ++++++++
 modules/ext.thanks.mobilediff.js          |  38 ++++++++++++----------
 modules/userTalk-ltr.svg                  |   4 +++
 modules/userTalk-rtl.svg                  |   4 +++
 tests/qunit/test_ext.thanks.mobilediff.js |   2 +-
 6 files changed, 44 insertions(+), 18 deletions(-)
 delete mode 100644 WhiteSmiley.png
 create mode 100644 modules/userTalk-ltr.svg
 create mode 100644 modules/userTalk-rtl.svg

diff --git a/WhiteSmiley.png b/WhiteSmiley.png
deleted file mode 100644
index 1fbd67880cc31d7fbd9f34b670800afa4b0d9a09..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 810
zcmV+_1J(SAP)<h;3K|Lk000e1NJLTq001%o001Zm1^@s6ymF~b0008<Nkl<ZcmdVf
z1CSg+6vpve#<p$Swr$(CZQHhO+qO}PZU0j>8+1+jW-ix@uj+T}cm2ljGn4P%zx)5W
z2WpvbLVJV-b~rS4Shdg1)Uv<^#~*A^(2P)!=OIu97vaiDR1&{$pjHwr$2YCcV+=u5
zrE`X&p)m-0d5WecYGub2=;avV`l$-V^Fo$$$YP*QP;7xL?GQ{w6CuzGvb;k#1GRGF
zJY+e5=qehCfO+sQGYr%!j4P1k24bsPKZZh<H|S(=5xodm&LXC&btE@rxrjUl>V(A_
z$kG!bRP95;U=%(=%nS52QL7xzK`)08S?Run#~|o|E4YelIDkfQYTq$4hd1DwR_ijB
zBZgQ<<&M#T#E9$KOq$uV3$J4!5yJlQp1MY41Lb|ywagdO-t)>x$EzK@B}Eif4JjCW
za)iZSZ`!aJvr!A_5LRB$BZH5E+-QXZ$PbIy$X>W|0^?B`nGi+(&y){7BkE!n?!uKc
zVk1^egI-QzE?T2B(jc6wlP2weGARn973Sh3^kNg&5i8omzdXi%%tRkFL@}g9OoTKs
z^__@<<j94JXo0cVin|65hk}SjEy#m_<PLUYC8l98dY~JcpbDy?CfcDFx?wyPV<*nz
zG0bE?9AYCsMZjkSW<KFDp5QqGGs9umJM^&QID92JVbNP=ZRh}B$bE$P=avMq@eSUd
zfv{`i);+SdVJ^HqiDB{6iEyam)tRF^H+1HT6$9aod4eRc7&=TqG+cnUr4B6GI1OLQ
zEQmMobiQeivk^KVr?gJAgg4|c;tOLmbvhdg?cm9rM`}qEhMNhAwjOLEt)vOl%>+dm
zyc3pNm6?G=#+xwSj0LH&1uF9vEf7K8g!yK~hQgr+9xB*6O+^xDN44s2_Sg^=b#W5^
zlh>GpByhrgx8H<@LLw6eVGmvyJbImh3Wx@Wu?EyPWPu${O-vL(aTL>(L>h!b5IA5p
o(ST>JI>Mqy>D3tZ&8Z*w4^Xgh9JTKH-2eap07*qoM6N<$g87GSssI20

diff --git a/extension.json b/extension.json
index 7809b2b5..58a6b74b 100644
--- a/extension.json
+++ b/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"
diff --git a/modules/ext.thanks.mobilediff.js b/modules/ext.thanks.mobilediff.js
index 403329dc..ccb1ee9a 100644
--- a/modules/ext.thanks.mobilediff.js
+++ b/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 );
 					} );
 				}
 			} );
diff --git a/modules/userTalk-ltr.svg b/modules/userTalk-ltr.svg
new file mode 100644
index 00000000..53b80fdd
--- /dev/null
+++ b/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>
diff --git a/modules/userTalk-rtl.svg b/modules/userTalk-rtl.svg
new file mode 100644
index 00000000..d50868bc
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/tests/qunit/test_ext.thanks.mobilediff.js b/tests/qunit/test_ext.thanks.mobilediff.js
index db51415c..2c7911f4 100644
--- a/tests/qunit/test_ext.thanks.mobilediff.js
+++ b/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 ) );