From 52204c0f1a974b963915c7a2dcae07e331364721 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 14 Sep 2021 09:53:35 -0700
Subject: [PATCH] Add history and talk page icons to sticky header

Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
---
 includes/SkinVector.php                   | 18 ++++++++-
 includes/templates/Button.mustache        |  3 +-
 jsdoc.json                                |  1 +
 resources/skins.vector.js/stickyHeader.js | 47 +++++++++++++++++++++++
 skin.json                                 | 13 +++++++
 5 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index aa315d1e7..5685caa6b 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -49,6 +49,22 @@ class SkinVector extends SkinMustache {
 		'is-quiet' => true,
 		'class' => 'sticky-header-icon'
 	];
+	private const TALK_ICON = [
+		'href' => '#',
+		'id' => 'ca-talk-sticky-header',
+		'event' => 'talk-sticky-header',
+		'icon' => 'wikimedia-speechBubbles',
+		'is-quiet' => true,
+		'class' => 'sticky-header-icon'
+	];
+	private const HISTORY_ICON = [
+		'href' => '#',
+		'id' => 'ca-history-sticky-header',
+		'event' => 'history-sticky-header',
+		'icon' => 'wikimedia-history',
+		'is-quiet' => true,
+		'class' => 'sticky-header-icon'
+	];
 
 	/**
 	 * T243281: Code used to track clicks to opt-out link.
@@ -311,7 +327,7 @@ class SkinVector extends SkinMustache {
 			'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
 			'data-button-start' => self::NO_ICON,
 			'data-buttons' => [
-				self::NO_ICON, self::NO_ICON, self::NO_ICON, self::NO_ICON
+				self::TALK_ICON, self::HISTORY_ICON, self::NO_ICON, self::NO_ICON
 			]
 		];
 	}
diff --git a/includes/templates/Button.mustache b/includes/templates/Button.mustache
index c67b1607b..4263af868 100644
--- a/includes/templates/Button.mustache
+++ b/includes/templates/Button.mustache
@@ -1,6 +1,7 @@
 {{#href}}<a href="{{.}}"{{/href}}
 {{^href}}<button{{/href}}
-	id="{{id}}"
+	{{#id}}id="{{.}}"{{/id}}
+	{{#event}}data-event-name="{{.}}"{{/event}}
 	class="mw-ui-button {{#is-quiet}}mw-ui-quiet{{/is-quiet}} {{#icon}}mw-ui-icon mw-ui-icon-element mw-ui-icon-{{.}}{{/icon}} {{class}}">
 	{{{html-vector-button-icon}}}
 	<span>{{label}}</span>
diff --git a/jsdoc.json b/jsdoc.json
index 1f7788e4b..28eedc2c7 100644
--- a/jsdoc.json
+++ b/jsdoc.json
@@ -19,6 +19,7 @@
 			"linkMap": {
 				"\"addEventListener\"": "https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener",
 				"Document": "https://developer.mozilla.org/docs/Web/API/Document",
+				"Element": "https://developer.mozilla.org/docs/Web/API/Element",
 				"Event": "https://developer.mozilla.org/docs/Web/API/Event",
 				"HTMLElement": "https://developer.mozilla.org/docs/Web/API/HTMLElement",
 				"HTMLInputElement": "https://developer.mozilla.org/docs/Web/API/HTMLInputElement",
diff --git a/resources/skins.vector.js/stickyHeader.js b/resources/skins.vector.js/stickyHeader.js
index 08448664b..5489de501 100644
--- a/resources/skins.vector.js/stickyHeader.js
+++ b/resources/skins.vector.js/stickyHeader.js
@@ -8,6 +8,49 @@ var
 	VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
 	VECTOR_MENU_CONTENT_LIST_SELECTOR = '.vector-menu-content-list';
 
+/**
+ * Copies attribute from an element to another.
+ *
+ * @param {Element} from
+ * @param {Element} to
+ * @param {string} attribute
+ */
+function copyAttribute( from, to, attribute ) {
+	var fromAttr = from.getAttribute( attribute );
+	if ( fromAttr ) {
+		to.setAttribute( attribute, fromAttr );
+	}
+}
+
+/**
+ * Makes sticky header icons functional for modern Vector.
+ *
+ * @param {HTMLElement} header
+ * @param {HTMLElement|null} history
+ * @param {HTMLElement|null} talk
+ */
+function prepareIcons( header, history, talk ) {
+	var historySticky = header.querySelector( '#ca-history-sticky-header' ),
+		talkSticky = header.querySelector( '#ca-talk-sticky-header' );
+
+	if ( !historySticky || !talkSticky ) {
+		throw new Error( 'Sticky header has unexpected HTML' );
+	}
+
+	if ( history ) {
+		copyAttribute( history, historySticky, 'href' );
+	} else {
+		// @ts-ignore
+		historySticky.parentNode.removeChild( historySticky );
+	}
+	if ( talk ) {
+		copyAttribute( talk, talkSticky, 'href' );
+	} else {
+		// @ts-ignore
+		talkSticky.parentNode.removeChild( talkSticky );
+	}
+}
+
 /**
  * Makes sticky header functional for modern Vector.
  *
@@ -78,6 +121,10 @@ function makeStickyHeaderFunctional(
 	// Clone the updated user menu to the sticky header.
 	userMenuStickyContainerInner.appendChild( userMenuClone );
 
+	prepareIcons( header,
+		document.querySelector( '#ca-history a' ),
+		document.querySelector( '#ca-talk a' )
+	);
 	stickyObserver.observe( stickyIntersection );
 }
 
diff --git a/skin.json b/skin.json
index 012d42d3d..80802165a 100644
--- a/skin.json
+++ b/skin.json
@@ -164,6 +164,18 @@
 				"parentheses-end"
 			]
 		},
+		"skins.vector.icons.js": {
+			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
+			"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
+			"useDataURI": false,
+			"defaultColor": "#000",
+			"class": "ResourceLoaderOOUIIconPackModule",
+			"variants": [],
+			"icons": [
+				"history",
+				"speechBubbles"
+			]
+		},
 		"skins.vector.icons": {
 			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
 			"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
@@ -205,6 +217,7 @@
 				"resources/skins.vector.js/searchToggle.js"
 			],
 			"dependencies": [
+				"skins.vector.icons.js",
 				"mediawiki.page.ready",
 				"mediawiki.util"
 			],