Hack around OOUI's icon pack being too large by creating our own

Bug: T112401
Change-Id: Id2a527dc1f4846985beb2cc4d5562a27d5636d55

Hooks.php

@@ -591,7 +591,7 @@ class EchoHooks {
 			// Load the styles for the Notifications badge
 			$out->addModuleStyles( array(
 				'ext.echo.nojs',
-				'oojs-ui.styles.icons-alerts'
+				'ext.echo.badgeicons'
 			) );
 		}
 

Resources.php

@@ -153,6 +153,17 @@ $wgResourceModules += array(
 			'echo-feedback',
 		),
 	),
+
+	// HACK: OOUI has an icon pack for these, but it's unhelpfully large and we don't
+	// want to load more as render-blocking CSS than we have to (T112401)
+	'ext.echo.badgeicons' => $echoResourceTemplate + array(
+		'class' => 'ResourceLoaderOOUIImageModule',
+		'position' => 'top',
+		'name' => 'badgeicons',
+		'rootPath' => 'icons',
+		'selectorWithoutVariant' => '.oo-ui-icon-{name}',
+		'selectorWithVariant' => '.oo-ui-image-{variant}.oo-ui-icon-{name}',
+	),
 );
 
 unset( $echoResourceTemplate );

modules/icons/apex/badgeicons.json

@@ -0,0 +1,14 @@
+{
+	"prefix": "oo-ui-icon",
+	"images": {
+		"bell": { "file": "../bell.svg" },
+		"bellOn": { "file": {
+			"ltr": "../bellOn-ltr.svg",
+			"rtl": "../bellOn-rtl.svg"
+		} },
+		"speechBubble": { "file": {
+			"ltr": "../speechBubble-ltr.svg",
+			"rtl": "../speechBubble-rtl.svg"
+		} }
+	}
+}

modules/icons/bell.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z"/>
+</svg>

modules/icons/bellOn-ltr.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M17.8 14.7l1.7-4.7c1-2.8-.5-5.5-3.5-6.6s-5.9 0-6.9 2.8l-1.7 4.7c-.7 1.9-1 2.8-2.9 2.1l-.3 1 14.1 5.1.3-.9c-1.9-.7-1.5-1.6-.8-3.5zM12 19.8l-2.8-1c-.3.9.8 2.4 2.1 2.9s3.2.1 3.5-.9l-2.8-1z"/>
+</svg>

modules/icons/bellOn-rtl.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M6.21 14.7L4.51 10c-1-2.8.5-5.5 3.5-6.6 3-1.1 5.9 0 6.9 2.8l1.7 4.7c.7 1.9 1 2.8 2.9 2.1l.3 1-14.1 5.1-.3-.9c1.9-.7 1.5-1.6.8-3.5zm5.8 5.1l2.8-1c.3.9-.8 2.4-2.1 2.9s-3.2.1-3.5-.9l2.8-1z" id="path56"/>
+</svg>

modules/icons/mediawiki/badgeicons.json

@@ -0,0 +1,20 @@
+{
+	"prefix": "oo-ui-icon",
+	"variants": {
+		"invert": {
+			"color": "#FFFFFF",
+			"global": true
+		}
+	},
+	"images": {
+		"bell": { "file": "../bell.svg" },
+		"bellOn": { "file": {
+			"ltr": "../bellOn-ltr.svg",
+			"rtl": "../bellOn-rtl.svg"
+		} },
+		"speechBubble": { "file": {
+			"ltr": "../speechBubble-ltr.svg",
+			"rtl": "../speechBubble-rtl.svg"
+		} }
+	}
+}

modules/icons/speechBubble-ltr.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g>
+        <path d="M19 20H2l3-3V6h17v11c0 1.7-1.3 3-3 3z"/>
+    </g>
+</svg>

modules/icons/speechBubble-rtl.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="g586">
+        <path d="M5 20h17l-3-3V6H2v11c0 1.7 1.3 3 3 3z" id="path588"/>
+    </g>
+</svg>