Change icons to use img tags, allowing easier customization:

* Icon can be defined using a path or a URL
* Extensions don't need custom CSS, but add icon through BeforeCreateEchoEvent
* Sites set their notification icon in LocalSettings.php or equivalent

Bug: 46585
Change-Id: Ifc02b653d07de19229dfb2604305e32f3bd595fe

Echo.php

@@ -128,7 +128,6 @@ $wgResourceModules += array(
 			'mediawiki.api',
 			'mediawiki.jqueryMsg',
 			'jquery.badge',
-			'ext.echo.icons',
 			'mediawiki.ui',
 		),
 		'messages' => array(
@@ -151,7 +150,6 @@ $wgResourceModules += array(
 			'ext.echo.base',
 			'mediawiki.api',
 			'mediawiki.jqueryMsg',
-			'ext.echo.icons',
 		),
 		'messages' => array(
 			'echo-load-more-error',
@@ -159,9 +157,6 @@ $wgResourceModules += array(
 			'echo-feedback',
 		),
 	),
-	'ext.echo.icons' => $echoResourceTemplate + array(
-		'styles' => 'icons/icons.css',
-	),
 );
 
 /**
@@ -296,6 +291,56 @@ $wgEchoNotificationCategories = array(
 	),
 );
 
+$echoIconPath = "Echo/modules/icons";
+
+// Defines icons, which are 30x30 images. This is passed to BeforeCreateEchoEvent so
+// extensions can define their own icons with the same structure.  It is recommended that
+// extensions prefix their icon key. An example is myextension-name.  This will help
+// avoid namespace conflicts.
+//
+// You can use either a path or a url, but not both.
+// The value of 'path' is relative to $wgExtensionAssetsPath.
+//
+// The value of 'url' should be a URL.
+//
+// You should customize the site icon URL, which is:
+// $wgEchoNotificationIcons['site']['url']
+$wgEchoNotificationIcons = array(
+	'placeholder' => array(
+		'path' => "$echoIconPath/Generic.png",
+	),
+	'trash' => array(
+		'path' => "$echoIconPath/Deletion.png",
+	),
+	'chat' => array(
+		'path' => "$echoIconPath/Talk.png",
+	),
+	'linked' => array(
+		'path' => "$echoIconPath/CrossReferenced.png",
+	),
+	'featured' => array(
+		'path' => "$echoIconPath/Featured.png",
+	),
+	'reviewed' => array(
+		'path' => "$echoIconPath/Reviewed.png",
+	),
+	'tagged' => array(
+		'path' => "$echoIconPath/ReviewedWithTags.png",
+	),
+	'revert' => array(
+		'path' => "$echoIconPath/Revert.png",
+	),
+	'checkmark' => array(
+		'path' => "$echoIconPath/Reviewed.png",
+	),
+	'gratitude' => array(
+		'path' => "$echoIconPath/Gratitude.png",
+	),
+	'site' => array(
+		'url' => false
+	),
+);
+
 // Definitions of the notification event types built into Echo.
 // If formatter-class isn't specified, defaults to EchoBasicFormatter.
 $wgEchoNotifications = array(
@@ -304,6 +349,7 @@ $wgEchoNotifications = array(
 		'group' => 'system',
 		'title-message' => 'notification-new-user',
 		'title-params' => array( 'agent' ),
+		'icon' => 'site',
 	),
 	'edit-user-talk' => array(
 		'category' => 'edit-user-talk',
@@ -399,6 +445,7 @@ $wgEchoNotifications = array(
 		'email-body-params' => array( 'agent', 'user-rights-list', 'email-footer' ),
 		'email-body-batch-message' => 'notification-user-rights-email-batch-body',
 		'email-body-batch-params' => array( 'agent', 'user-rights-list' ),
+		'icon' => 'site',
 	),
 );
 

Hooks.php

@@ -12,10 +12,10 @@ class EchoHooks {
 	 */
 	public static function initEchoExtension() {
 		global $wgEchoBackend, $wgEchoBackendName, $wgEchoNotifications,
-			$wgEchoNotificationCategories, $wgEchoConfig;
+			$wgEchoNotificationCategories, $wgEchoNotificationIcons, $wgEchoConfig;
 
 		// allow extensions to define their own event
-		wfRunHooks( 'BeforeCreateEchoEvent', array( &$wgEchoNotifications, &$wgEchoNotificationCategories ) );
+		wfRunHooks( 'BeforeCreateEchoEvent', array( &$wgEchoNotifications, &$wgEchoNotificationCategories, &$wgEchoNotificationIcons ) );
 
 		$wgEchoBackend = MWEchoBackend::factory( $wgEchoBackendName );
 

formatters/BasicFormatter.php

@@ -143,7 +143,7 @@ class EchoBasicFormatter extends EchoNotificationFormatter {
 	 * @return array|string
 	 */
 	public function format( $event, $user, $type ) {
-		global $wgEchoNotificationCategories;
+		global $wgEchoNotificationCategories, $wgExtensionAssetsPath, $wgEchoNotificationIcons;
 
 		// Use the bundle message if use-bundle is true and there is a bundle message
 		$this->generateBundleData( $event, $user, $type );
@@ -159,11 +159,24 @@ class EchoBasicFormatter extends EchoNotificationFormatter {
 			return $this->formatNotificationTitle( $event, $user )->text();
 		}
 
+		$iconInfo = $wgEchoNotificationIcons[$this->icon];
+		if ( isset( $iconInfo['url'] ) && $iconInfo['url'] ) {
+			$iconUrl = $iconInfo['url'];
+		} else {
+			if ( !isset( $iconInfo['path'] ) || !$iconInfo['path'] ) {
+				// Fallback in case icon is not configured; mainly intended for 'site'
+				$iconInfo = $wgEchoNotificationIcons['placeholder'];
+			}
+			$iconUrl = "$wgExtensionAssetsPath/{$iconInfo['path']}";
+		}
+
 		// Assume html as the format for the notification
-		$output = Xml::tags(
+		$output = Html::element(
-			'div',
+			'img',
-			array( 'class' => "mw-echo-icon mw-echo-icon-{$this->icon}" ),
+			array(
-			' '
+				'class' => "mw-echo-icon",
+				'src' => $iconUrl,
+			)
 		);
 
 		// Add the hidden dismiss interface if the notification is dismissable

modules/base/ext.echo.base.css

@@ -71,3 +71,10 @@
 .mw-echo-notification span.autocomment {
 	color: inherit;
 }
+.mw-echo-icon {
+	width: 30px;
+	height: 30px;
+	float: left;
+	margin-right: 10px;
+	margin-left: 10px;
+}

modules/icons/icons.css

@@ -1,54 +0,0 @@
-.mw-echo-icon {
-	width: 30px;
-	height: 30px;
-	float: left;
-	margin-right: 10px;
-	margin-left: 10px;
-	background: no-repeat center right;
-	background-size: 80%;
-}
-
-.mw-echo-icon-placeholder {
-	/* @embed */
-	background-image: url(Generic.png);
-}
-.mw-echo-icon-trash {
-	/* @embed */
-	background-image: url(Deletion.png);
-}
-.mw-echo-icon-chat {
-	/* @embed */
-	background-image: url(Talk.png);
-}
-.mw-echo-icon-linked {
-	/* @embed */
-	background-image: url(CrossReferenced.png);
-}
-.mw-echo-icon-featured {
-	/* @embed */
-	background-image: url(Featured.png);
-}
-.mw-echo-icon-reviewed {
-	/* @embed */
-	background-image: url(Reviewed.png);
-}
-.mw-echo-icon-tagged {
-	/* @embed */
-	background-image: url(ReviewedWithTags.png);
-}
-.mw-echo-icon-w {
-	/* @embed */
-	background-image: url(W.png);
-}
-.mw-echo-icon-revert {
-	/* @embed */
-	background-image: url(Revert.png);
-}
-.mw-echo-icon-checkmark {
-	/* @embed */
-	background-image: url(Reviewed.png);
-}
-.mw-echo-icon-gratitude {
-	/* @embed */
-	background-image: url(Gratitude.png);
-}

special/SpecialNotifications.php

@@ -114,7 +114,6 @@ class SpecialNotifications extends SpecialPage {
 		// For no-js support
 		global $wgExtensionAssetsPath;
 		$out->addExtensionStyle( "$wgExtensionAssetsPath/Echo/modules/base/ext.echo.base.css" );
-		$out->addExtensionStyle( "$wgExtensionAssetsPath/Echo/modules/icons/icons.css" );
 		// Mark items as read
 		if ( $unread ) {
 			EchoNotificationController::markRead( $user, $unread );