Make generic preview icon display in night mode

Remove the ext.popups.images module, replacing it with
references to the SVG image.

- The footer image is the same in dark and light mode so use
background image
- Use mask image for sad face to make it work correctly in dark mode.
- Rely on CSS Janus for the ltr to rtl swap out

Change-Id: Idf041730549b834126d9631ac95611526ae5daa3

extension.json

@@ -122,24 +122,6 @@
 				"settings"
 			]
 		},
-		"ext.popups.images": {
-			"selector": ".popups-icon--{name}",
-			"class": "MediaWiki\\ResourceLoader\\ImageModule",
-			"images": {
-				"preview-generic": {
-					"file": {
-						"ltr": "resources/ext.popups.images/sad-face-ltr.svg",
-						"rtl": "resources/ext.popups.images/sad-face-rtl.svg"
-					}
-				},
-				"footer": {
-					"file": {
-						"ltr": "resources/ext.popups.images/footer-ltr.svg",
-						"rtl": "resources/ext.popups.images/footer-rtl.svg"
-					}
-				}
-			}
-		},
 		"ext.popups": {
 			"packageFiles": [
 				{
@@ -182,7 +164,6 @@
 			],
 			"dependencies": [
 				"web2017-polyfills",
-				"ext.popups.images",
 				"mediawiki.experiments",
 				"mediawiki.jqueryMsg",
 				"mediawiki.storage",

resources/ext.popups.images/sad-face-ltr.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<title>
-		sad face
-	</title>
-	<path d="M2 0a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm4 4c1.336 0 2.007 1.617 1.06 2.56-.943.947-2.56.276-2.56-1.06A1.5 1.5 0 0 1 6 4m8 0c1.336 0 2.007 1.617 1.06 2.56-.943.947-2.56.276-2.56-1.06A1.5 1.5 0 0 1 14 4m-4 5c2.61 0 4.83.67 5.65 3H4.35C5.17 9.67 7.39 9 10 9"/>
-</svg>

resources/ext.popups.images/sad-face-rtl.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<title>
-		sad face
-	</title>
-	<path d="M18 0a2 2 0 0 1 2 2v18l-4-4H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm-4 4c-1.336 0-2.007 1.617-1.06 2.56.943.947 2.56.276 2.56-1.06A1.5 1.5 0 0 0 14 4M6 4C4.664 4 3.993 5.617 4.94 6.56c.943.947 2.56.276 2.56-1.06A1.5 1.5 0 0 0 6 4m4 5c-2.61 0-4.83.67-5.65 3h11.3c-.82-2.33-3.04-3-5.65-3"/>
-</svg>

src/ui/icons.less

@@ -9,3 +9,12 @@
 .popups-icon--close {
 	.cdx-mixin-css-icon( @cdx-icon-close );
 }
+
+.popups-icon--footer {
+	background-image: url( icons/footer-ltr.svg );
+}
+
+.popups-icon--preview-generic {
+	mask-image: url( icons/sad-face-ltr.svg );
+	background-color: @color-base;
+}

src/ui/icons/sad-face-ltr.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		sad face
+	</title>
+	<path fill="#000000" d="M2 0a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm4 4c1.336 0 2.007 1.617 1.06 2.56-.943.947-2.56.276-2.56-1.06A1.5 1.5 0 0 1 6 4m8 0c1.336 0 2.007 1.617 1.06 2.56-.943.947-2.56.276-2.56-1.06A1.5 1.5 0 0 1 14 4m-4 5c2.61 0 4.83.67 5.65 3H4.35C5.17 9.67 7.39 9 10 9"/>
+</svg>

src/ui/icons/sad-face-rtl.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		sad face
+	</title>
+	<path fill="#000000" d="M18 0a2 2 0 0 1 2 2v18l-4-4H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm-4 4c-1.336 0-2.007 1.617-1.06 2.56.943.947 2.56.276 2.56-1.06A1.5 1.5 0 0 0 14 4M6 4C4.664 4 3.993 5.617 4.94 6.56c.943.947 2.56.276 2.56-1.06A1.5 1.5 0 0 0 6 4m4 5c-2.61 0-4.83.67-5.65 3h11.3c-.82-2.33-3.04-3-5.65-3"/>
+</svg>