From 78cbb021918a4adff58bcfa0ff639612dd9a94cf Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Fri, 12 Apr 2019 13:22:37 +0100
Subject: [PATCH] Update OOUI icons to latest versions

* web.svg was deprecated in favour of browser.svg.
* Update sad-face.svg based on OOUI speechBubble-ltr/rtl
* Apply preview-generic/disambiguation grey colour using CSS.

Change-Id: I8feea1b526ff85c4ffdee21ef42c616e72881e76
---
 extension.json                                 | 18 ++++++++++++++----
 resources/ext.popups.images/articles-ltr.svg   |  8 ++++++++
 resources/ext.popups.images/articles-rtl.svg   |  8 ++++++++
 resources/ext.popups.images/browser-ltr.svg    |  7 +++++++
 resources/ext.popups.images/browser-rtl.svg    |  7 +++++++
 resources/ext.popups.images/close.svg          |  7 +++++--
 resources/ext.popups.images/journal-ltr.svg    |  2 +-
 resources/ext.popups.images/journal-rtl.svg    |  2 +-
 .../multiple-articles-ltr.svg                  |  7 -------
 .../multiple-articles-rtl.svg                  |  7 -------
 resources/ext.popups.images/newspaper-ltr.svg  |  2 +-
 resources/ext.popups.images/newspaper-rtl.svg  |  2 +-
 resources/ext.popups.images/reference.svg      |  2 +-
 resources/ext.popups.images/sad-face-ltr.svg   |  7 +++++++
 resources/ext.popups.images/sad-face-rtl.svg   |  7 +++++++
 resources/ext.popups.images/sad-face.svg       |  6 ------
 resources/ext.popups.images/web.svg            |  8 --------
 src/ui/templates/popup/popup.less              |  6 ++++++
 18 files changed, 74 insertions(+), 39 deletions(-)
 create mode 100644 resources/ext.popups.images/articles-ltr.svg
 create mode 100644 resources/ext.popups.images/articles-rtl.svg
 create mode 100644 resources/ext.popups.images/browser-ltr.svg
 create mode 100644 resources/ext.popups.images/browser-rtl.svg
 delete mode 100644 resources/ext.popups.images/multiple-articles-ltr.svg
 delete mode 100644 resources/ext.popups.images/multiple-articles-rtl.svg
 create mode 100644 resources/ext.popups.images/sad-face-ltr.svg
 create mode 100644 resources/ext.popups.images/sad-face-rtl.svg
 delete mode 100644 resources/ext.popups.images/sad-face.svg
 delete mode 100644 resources/ext.popups.images/web.svg

diff --git a/extension.json b/extension.json
index 1ccd7384c..1bad755a4 100644
--- a/extension.json
+++ b/extension.json
@@ -93,7 +93,12 @@
 			"images": {
 				"popups-settings": "resources/ext.popups.images/cog.svg",
 				"popups-close": "resources/ext.popups.images/close.svg",
-				"preview-generic": "resources/ext.popups.images/sad-face.svg",
+				"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",
@@ -102,8 +107,8 @@
 				},
 				"preview-disambiguation": {
 					"file": {
-						"ltr": "resources/ext.popups.images/multiple-articles-ltr.svg",
-						"rtl": "resources/ext.popups.images/multiple-articles-rtl.svg"
+						"ltr": "resources/ext.popups.images/articles-ltr.svg",
+						"rtl": "resources/ext.popups.images/articles-rtl.svg"
 					}
 				},
 				"reference-generic": "resources/ext.popups.images/reference.svg",
@@ -125,7 +130,12 @@
 						"rtl": "resources/ext.popups.images/newspaper-rtl.svg"
 					}
 				},
-				"reference-web": "resources/ext.popups.images/web.svg"
+				"reference-web": {
+					"file": {
+						"ltr": "resources/ext.popups.images/browser-ltr.svg",
+						"rtl": "resources/ext.popups.images/browser-rtl.svg"
+					}
+				}
 			}
 		},
 		"ext.popups": {
diff --git a/resources/ext.popups.images/articles-ltr.svg b/resources/ext.popups.images/articles-ltr.svg
new file mode 100644
index 000000000..cdc71b3fd
--- /dev/null
+++ b/resources/ext.popups.images/articles-ltr.svg
@@ -0,0 +1,8 @@
+<?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>
+		articles
+	</title>
+	<path d="M5 0v2h11v14h2V2a2 2 0 0 0-2-2z"/>
+	<path d="M13 20a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2zM9 5h4v5H9zM4 5h4v1H4zm0 2h4v1H4zm0 2h4v1H4zm0 2h9v1H4zm0 2h9v1H4zm0 2h9v1H4z"/>
+</svg>
diff --git a/resources/ext.popups.images/articles-rtl.svg b/resources/ext.popups.images/articles-rtl.svg
new file mode 100644
index 000000000..ba3dcf39e
--- /dev/null
+++ b/resources/ext.popups.images/articles-rtl.svg
@@ -0,0 +1,8 @@
+<?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>
+		articles
+	</title>
+	<path d="M15 0v2H4v14H2V2a2 2 0 0 1 2-2z"/>
+	<path d="M18 5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2zm-7 5H7V5h4zm5-4h-4V5h4zm0 2h-4V7h4zm0 2h-4V9h4zm0 2H7v-1h9zm0 2H7v-1h9zm0 2H7v-1h9z"/>
+</svg>
diff --git a/resources/ext.popups.images/browser-ltr.svg b/resources/ext.popups.images/browser-ltr.svg
new file mode 100644
index 000000000..91ae0a696
--- /dev/null
+++ b/resources/ext.popups.images/browser-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>
+		browser
+	</title>
+	<path d="M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 3.5A1.5 1.5 0 1 1 2.5 5 1.5 1.5 0 0 1 4 3.5zM18 16H2V8h16z"/>
+</svg>
diff --git a/resources/ext.popups.images/browser-rtl.svg b/resources/ext.popups.images/browser-rtl.svg
new file mode 100644
index 000000000..d9d8f683d
--- /dev/null
+++ b/resources/ext.popups.images/browser-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>
+		browser
+	</title>
+	<path d="M0 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2H2C.9 2 0 2.9 0 4zM17.5 5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5.7-1.5 1.5-1.5 1.5.7 1.5 1.5zM2 8h16v8H2z"/>
+</svg>
diff --git a/resources/ext.popups.images/close.svg b/resources/ext.popups.images/close.svg
index 22619b95b..4ed25ba2e 100644
--- a/resources/ext.popups.images/close.svg
+++ b/resources/ext.popups.images/close.svg
@@ -1,5 +1,8 @@
 <?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="M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z"/>
-	<path d="M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z"/>
+	<title>
+		close
+	</title>
+	<path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/>
+	<path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/>
 </svg>
diff --git a/resources/ext.popups.images/journal-ltr.svg b/resources/ext.popups.images/journal-ltr.svg
index 482154adc..e1dea555b 100644
--- a/resources/ext.popups.images/journal-ltr.svg
+++ b/resources/ext.popups.images/journal-ltr.svg
@@ -3,5 +3,5 @@
 	<title>
 		journal
 	</title>
-	<path d="M2 1.5v17A1.5 1.5 0 0 0 3.5 20H5V0H3.5A1.5 1.5 0 0 0 2 1.5zM16 0H6v20h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-3 8H8V7h5zm3-2H8V5h8z"/>
+	<path d="M2 18.5A1.5 1.5 0 0 0 3.5 20H5V0H3.5A1.5 1.5 0 0 0 2 1.5zM6 0v20h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm7 8H8V7h5zm3-2H8V5h8z"/>
 </svg>
diff --git a/resources/ext.popups.images/journal-rtl.svg b/resources/ext.popups.images/journal-rtl.svg
index 20331b952..236045911 100644
--- a/resources/ext.popups.images/journal-rtl.svg
+++ b/resources/ext.popups.images/journal-rtl.svg
@@ -3,5 +3,5 @@
 	<title>
 		journal
 	</title>
-	<path d="M16.5 0H15v20h1.5c.8 0 1.5-.7 1.5-1.5v-17c0-.8-.7-1.5-1.5-1.5zM2 2v16c0 1.1.9 2 2 2h10V0H4C2.9 0 2 .9 2 2zm5 5h5v1H7V7zM4 5h8v1H4V5z"/>
+	<path d="M15 0v20h1.5c.8 0 1.5-.7 1.5-1.5v-17c0-.8-.7-1.5-1.5-1.5zM2 18c0 1.1.9 2 2 2h10V0H4C2.9 0 2 .9 2 2zM4 5h8v1H4zm3 2h5v1H7z"/>
 </svg>
diff --git a/resources/ext.popups.images/multiple-articles-ltr.svg b/resources/ext.popups.images/multiple-articles-ltr.svg
deleted file mode 100644
index 032536c6d..000000000
--- a/resources/ext.popups.images/multiple-articles-ltr.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 2 20 20">
-	<g fill="#c8ccd1">
-		<path d="M11 12h4V7h-4v5zm-5 2h9v-1H6v1zm0 2h9v-1H6v1zm0 2h9v-1H6v1zm4-9H6v1h4V9zm0 2H6v1h4v-1zm0-4H6v1h4V7zM4 5h13v16H7c-1.7 0-3-1.3-3-3V5z"/>
-		<path d="M18 4v14h2V2H7v2"/>
-	</g>
-</svg>
diff --git a/resources/ext.popups.images/multiple-articles-rtl.svg b/resources/ext.popups.images/multiple-articles-rtl.svg
deleted file mode 100644
index 8ce047c91..000000000
--- a/resources/ext.popups.images/multiple-articles-rtl.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 2 20 20">
-	<g fill="#c8ccd1">
-		<path d="M13 12H9V7h4v5zm5 2H9v-1h9v1zm0 2H9v-1h9v1zm0 2H9v-1h9v1zm-4-9h4v1h-4V9zm0 2h4v1h-4v-1zm0-4h4v1h-4V7zm6-2H7v16h10c1.7 0 3-1.3 3-3V5z"/>
-		<path d="M6 4v14H4V2h13v2"/>
-	</g>
-</svg>
diff --git a/resources/ext.popups.images/newspaper-ltr.svg b/resources/ext.popups.images/newspaper-ltr.svg
index c5cdde77e..1f1e496ab 100644
--- a/resources/ext.popups.images/newspaper-ltr.svg
+++ b/resources/ext.popups.images/newspaper-ltr.svg
@@ -3,5 +3,5 @@
 	<title>
 		newspaper
 	</title>
-	<path d="M18 2H5a2 2 0 0 0-2 2v12a1 1 0 0 1-1-1V5h-.5A1.5 1.5 0 0 0 0 6.5v10A1.5 1.5 0 0 0 1.5 18H18a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-6 13H6v-1h6zm0-2H6v-1h6zm0-2H6v-1h6zm5 4h-4v-5h4zm0-7H6V4h11z"/>
+	<path d="M5 2a2 2 0 0 0-2 2v12a1 1 0 0 1-1-1V5h-.5A1.5 1.5 0 0 0 0 6.5v10A1.5 1.5 0 0 0 1.5 18H18a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm1 2h11v4H6zm0 6h6v1H6zm0 2h6v1H6zm0 2h6v1H6zm7-4h4v5h-4z"/>
 </svg>
diff --git a/resources/ext.popups.images/newspaper-rtl.svg b/resources/ext.popups.images/newspaper-rtl.svg
index cb6d78529..da22d65c4 100644
--- a/resources/ext.popups.images/newspaper-rtl.svg
+++ b/resources/ext.popups.images/newspaper-rtl.svg
@@ -3,5 +3,5 @@
 	<title>
 		newspaper
 	</title>
-	<path d="M0 4v12c0 1.1.9 2 2 2h16.5c.8 0 1.5-.7 1.5-1.5v-10c0-.8-.7-1.5-1.5-1.5H18v10c0 .6-.4 1-1 1V4c0-1.1-.9-2-2-2H2C.9 2 0 2.9 0 4zm8 10h6v1H8v-1zm0-2h6v1H8v-1zm0-2h6v1H8v-1zm-5 0h4v5H3v-5zm0-6h11v4H3V4z"/>
+	<path d="M0 16c0 1.1.9 2 2 2h16.5c.8 0 1.5-.7 1.5-1.5v-10c0-.8-.7-1.5-1.5-1.5H18v10c0 .6-.4 1-1 1V4c0-1.1-.9-2-2-2H2C.9 2 0 2.9 0 4zM3 4h11v4H3zm0 6h4v5H3zm5 0h6v1H8zm0 2h6v1H8zm0 2h6v1H8z"/>
 </svg>
diff --git a/resources/ext.popups.images/reference.svg b/resources/ext.popups.images/reference.svg
index 65746f5da..a255cc49e 100644
--- a/resources/ext.popups.images/reference.svg
+++ b/resources/ext.popups.images/reference.svg
@@ -3,5 +3,5 @@
 	<title>
 		reference
 	</title>
-	<path d="M15 1v9l-2.78-2.78L9.44 10V1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/>
+	<path d="M15 10l-2.78-2.78L9.44 10V1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/>
 </svg>
diff --git a/resources/ext.popups.images/sad-face-ltr.svg b/resources/ext.popups.images/sad-face-ltr.svg
new file mode 100644
index 000000000..c9eb9e326
--- /dev/null
+++ b/resources/ext.popups.images/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 d="M2 0a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm4 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 4zm8 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 4zm-4 5c2.61 0 4.83.67 5.65 3H4.35C5.17 9.67 7.39 9 10 9z"/>
+</svg>
diff --git a/resources/ext.popups.images/sad-face-rtl.svg b/resources/ext.popups.images/sad-face-rtl.svg
new file mode 100644
index 000000000..6eacd6cb8
--- /dev/null
+++ b/resources/ext.popups.images/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 d="m18 0a2 2 0 0 1 2 2v18l-4-4h-14a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2zm-4 4c-1.336 0-2.007 1.617-1.06 2.56 0.943 0.947 2.56 0.276 2.56-1.06a1.5 1.5 0 0 0-1.5-1.5zm-8 0c-1.336 0-2.007 1.617-1.06 2.56 0.943 0.947 2.56 0.276 2.56-1.06a1.5 1.5 0 0 0-1.5-1.5zm4 5c-2.61 0-4.83 0.67-5.65 3h11.3c-0.82-2.33-3.04-3-5.65-3z"/>
+</svg>
diff --git a/resources/ext.popups.images/sad-face.svg b/resources/ext.popups.images/sad-face.svg
deleted file mode 100644
index 9b64c2ab9..000000000
--- a/resources/ext.popups.images/sad-face.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="37" height="27" viewBox="0 0 37 27">
-	<g fill="#c8ccd1" fill-rule="evenodd">
-		<path d="M5.475.7v20.075L0 26.25h31.025c3.102 0 5.475-2.372 5.475-5.475V.7H5.475zm20.44 4.562c1.277 0 2.19 1.095 2.19 2.19 0 1.096-.913 2.373-2.19 2.373-1.278 0-2.19-1.095-2.19-2.19s1.095-2.373 2.19-2.373zm-9.855 0c1.277 0 2.19 1.095 2.19 2.19 0 1.096-1.095 2.373-2.19 2.373s-2.19-1.095-2.19-2.19.913-2.373 2.19-2.373zm4.928 8.213c-7.153 0-8.415 7.012-8.415 7.012s2.805-1.403 8.415-1.403c5.61 0 8.414 1.403 8.414 1.403S28 13.475 20.988 13.475z"/>
-	</g>
-</svg>
diff --git a/resources/ext.popups.images/web.svg b/resources/ext.popups.images/web.svg
deleted file mode 100644
index 96436f633..000000000
--- a/resources/ext.popups.images/web.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 2 20 20">
-	<title>
-		web
-	</title>
-	<path d="M22.78 18.46L21 16V4H3v12l-1.757 2.463a.974.974 0 0 0-.157 1.043c.157.347.533.494.914.494h20c.382 0 .783-.148.94-.496a.976.976 0 0 0-.16-1.044zM4 18l1-2V6h14v10l1 2H4z"/>
-	<path d="M7 16h10V8H7v8zm2-2v-3h6v3H9z"/>
-</svg>
diff --git a/src/ui/templates/popup/popup.less b/src/ui/templates/popup/popup.less
index 718e5e1d2..2a74dd5ce 100644
--- a/src/ui/templates/popup/popup.less
+++ b/src/ui/templates/popup/popup.less
@@ -26,12 +26,18 @@
 	.mw-ui-icon {
 		// mw-ui-icon assumes a font size of 16px so we must declare it here
 		font-size: 16px;
+
+		&:before {
+			// Use fixed size to prevent icon blur.
+			background-size: 20px;
+		}
 	}
 
 	// icons positioned at the top of the popup
 	.mw-ui-icon-preview-disambiguation,
 	.mw-ui-icon-preview-generic {
 		margin: 21px 0 8px 0;
+		opacity: 0.25;
 	}
 
 	.mwe-popups-container {