From aa6a2dda4c2897dde7e590ba3a3a9be70016a654 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 10 Oct 2018 14:19:55 -0700
Subject: [PATCH] Watchstar is accessible to non-js users

Bug: T196893
Change-Id: I5dbd164ba68e6c74e80f8bcf90819a526cda5a5e
---
 includes/skins/SkinMinerva.php                 | 13 ++++++++++---
 .../skins.minerva.base.styles/pageactions.less | 18 ++++++++++++++++++
 resources/skins.minerva.icons.images/watch.svg |  1 +
 .../skins.minerva.icons.images/watched.svg     |  1 +
 skin.json                                      |  2 ++
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 resources/skins.minerva.icons.images/watch.svg
 create mode 100644 resources/skins.minerva.icons.images/watched.svg

diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 24ff769..a82cf3b 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -1165,13 +1165,20 @@ class SkinMinerva extends SkinTemplate {
 	 * @return array A map compatible with BaseTemplate#makeListItem
 	 */
 	protected function createWatchPageAction( $actions ) {
+		$title = $this->getTitle();
+		$user = $this->getUser();
+		$ctaUrl = $this->getLoginUrl( [ 'returnto' => $title ] );
+		if ( $title && $user->isWatched( $title ) ) {
+			$icon = 'watched';
+		} else {
+			$icon = 'watch';
+		}
 		$baseResult = [
 			'id' => 'ca-watch',
 			// Use blank icon to reserve space for watchstar icon once JS loads
-			'class' => MinervaUI::iconClass( '', 'element', 'watch-this-article' ),
+			'class' => MinervaUI::iconClass( $icon, 'element', 'watch-this-article' ),
 			'is_js_only' => true
 		];
-		$title = $this->getTitle();
 
 		if ( isset( $actions['watch'] ) ) {
 			$result = array_merge( $actions['watch'], $baseResult );
@@ -1183,7 +1190,7 @@ class SkinMinerva extends SkinTemplate {
 			$result = array_merge( $baseResult, [
 				// FIXME: makeLink (used by makeListItem) when no text is present defaults to use the key
 				'text' => '',
-				'href' => $this->getLoginUrl( [ 'returnto' => $title ] ),
+				'href' => $ctaUrl,
 			] );
 		}
 
diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less
index cf68ac1..c85caef 100644
--- a/resources/skins.minerva.base.styles/pageactions.less
+++ b/resources/skins.minerva.base.styles/pageactions.less
@@ -94,6 +94,24 @@
 	}
 }
 
+// Watchstar is hidden for anonymous no-js users
+// While we could link the icon to the login/signup form, this is not
+// a perfect experience and could be confusing.
+// In JavaScript this icon will be converted to a watch icon and will point
+// to a Call to action to sign up/login and explain why that's a good idea.
+// Thus, anonymous users without JS will never see this icon.
+// This is a small % of our users, so deemed okay.
+.client-nojs {
+	.watch-this-article {
+		visibility: hidden;
+	}
+	.is-authenticated {
+		.watch-this-article {
+			visibility: visible;
+		}
+	}
+}
+
 // On small devices that don't support Javascript, hide the page actions bar
 @media all and ( max-width: @width-breakpoint-mobile - 1 ) {
 	.client-nojs {
diff --git a/resources/skins.minerva.icons.images/watch.svg b/resources/skins.minerva.icons.images/watch.svg
new file mode 100644
index 0000000..9a4a99d
--- /dev/null
+++ b/resources/skins.minerva.icons.images/watch.svg
@@ -0,0 +1 @@
+<?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="Page-1" fill="none" fill-rule="evenodd"><g id="watchstar" fill="#54595d"><path d="M8.91 9H1l6.007 5.86L5 23l7-4.319L19 23l-1.995-8.14L23 9h-7.909l-3.09-8-3.09 8zm.054 5.188L5.312 11h4.818L12 5.747 13.881 11h4.82l-3.653 3.2 1.099 4.956L12 16.516l-4.136 2.627 1.1-4.955z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/skins.minerva.icons.images/watched.svg b/resources/skins.minerva.icons.images/watched.svg
new file mode 100644
index 0000000..958f1e5
--- /dev/null
+++ b/resources/skins.minerva.icons.images/watched.svg
@@ -0,0 +1 @@
+<?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 fill="#00af89" d="M8.91 9H1l6.007 5.86L5 23l7-4.319L19 23l-1.995-8.14L23 9h-7.909l-3.09-8z"/></svg>
\ No newline at end of file
diff --git a/skin.json b/skin.json
index 89744c1..fb2fbbd 100644
--- a/skin.json
+++ b/skin.json
@@ -228,6 +228,8 @@
 			"selector": ".mw-ui-icon-minerva-{name}:before",
 			"useDataURI": false,
 			"images": {
+				"watch": "resources/skins.minerva.icons.images/watch.svg",
+				"watched": "resources/skins.minerva.icons.images/watched.svg",
 				"warning": "resources/skins.minerva.icons.images/warning.svg",
 				"mainmenu": "resources/skins.minerva.icons.images/hamburger.svg",
 				"edit": "resources/skins.minerva.icons.images/editLocked.svg",