Sticky header: Add a link to the 'subject' page when on talk pages

The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.

Something similar is done in VE.

Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe

includes/SkinVector.php

@@ -69,6 +69,15 @@ abstract class SkinVector extends SkinMustache {
 		'tabindex' => '-1',
 		'class' => 'sticky-header-icon'
 	];
+	private const SUBJECT_ICON = [
+		'href' => '#',
+		'id' => 'ca-subject-sticky-header',
+		'event' => 'subject-sticky-header',
+		'icon' => 'wikimedia-article',
+		'is-quiet' => true,
+		'tabindex' => '-1',
+		'class' => 'sticky-header-icon'
+	];
 	private const HISTORY_ICON = [
 		'href' => '#',
 		'id' => 'ca-history-sticky-header',
@@ -378,6 +387,7 @@ abstract class SkinVector extends SkinMustache {
 	final protected function getStickyHeaderData( $searchBoxData, $includeEditIcons ): array {
 		$btns = [
 			self::TALK_ICON,
+			self::SUBJECT_ICON,
 			self::HISTORY_ICON,
 			self::WATCHSTAR_ICON,
 		];

resources/skins.vector.es6/stickyHeader.js

@@ -183,14 +183,16 @@ function watchstarCallback( $link, isWatched, expiry ) {
  * @param {Element} header
  * @param {Element|null} history
  * @param {Element|null} talk
+ * @param {Element|null} subject
  * @param {Element|null} watch
  */
-function prepareIcons( header, history, talk, watch ) {
+function prepareIcons( header, history, talk, subject, watch ) {
 	const historySticky = header.querySelector( '#ca-history-sticky-header' ),
 		talkSticky = header.querySelector( '#ca-talk-sticky-header' ),
+		subjectSticky = header.querySelector( '#ca-subject-sticky-header' ),
 		watchSticky = header.querySelector( '#ca-watchstar-sticky-header' );
 
-	if ( !historySticky || !talkSticky || !watchSticky ) {
+	if ( !historySticky || !talkSticky || !subjectSticky || !watchSticky ) {
 		throw new Error( 'Sticky header has unexpected HTML' );
 	}
 
@@ -199,11 +201,19 @@ function prepareIcons( header, history, talk, watch ) {
 	} else {
 		removeNode( historySticky );
 	}
+
 	if ( talk ) {
 		copyButtonAttributes( talk, talkSticky );
 	} else {
 		removeNode( talkSticky );
 	}
+
+	if ( subject ) {
+		copyButtonAttributes( subject, subjectSticky );
+	} else {
+		removeNode( subjectSticky );
+	}
+
 	if ( watch && watch.parentNode instanceof Element ) {
 		const watchContainer = watch.parentNode;
 		copyButtonAttributes( watch, watchSticky );
@@ -410,9 +420,23 @@ function makeStickyHeaderFunctional(
 		userMenuStickyContainerInner.appendChild( prepareUserMenu( userMenu ) );
 	}
 
+	let namespaceName = mw.config.get( 'wgCanonicalNamespace' );
+	const namespaceNumber = mw.config.get( 'wgNamespaceNumber' );
+	if ( namespaceNumber >= 0 && namespaceNumber % 2 === 1 ) {
+		// Remove '_talk' to get subject namespace
+		namespaceName = namespaceName.slice( 0, -5 );
+	}
+	// Title::getNamespaceKey()
+	let namespaceKey = namespaceName.toLowerCase() || 'main';
+	if ( namespaceKey === 'file' ) {
+		namespaceKey = 'image';
+	}
+	const namespaceTabId = 'ca-nstab-' + namespaceKey;
+
 	prepareIcons( header,
 		document.querySelector( '#ca-history a' ),
 		document.querySelector( '#ca-talk:not( .selected ) a' ),
+		document.querySelector( '#' + namespaceTabId + ':not( .selected ) a' ),
 		document.querySelector( '#ca-watch a, #ca-unwatch a' )
 	);
 

skin.json

@@ -261,6 +261,7 @@
 			"class": "ResourceLoaderOOUIIconPackModule",
 			"variants": [],
 			"icons": [
+				"article",
 				"edit",
 				"editLock",
 				"halfStar",