[WIP] Removes the TOC class in body and adds in html

Adds new constants for TOC and registers feature.

Bug: T325032
Change-Id: I5e0f5f3a6d186b245bdbc98c2bb9e4cc17a03fdb

includes/Components/VectorComponentTableOfContents.php

@@ -2,6 +2,8 @@
 namespace MediaWiki\Skins\Vector\Components;
 
 use Config;
+use MediaWiki\Skins\Vector\Constants;
+use MediaWiki\Skins\Vector\FeatureManagement\FeatureManager;
 use MessageLocalizer;
 
 /**
@@ -31,22 +33,23 @@ class VectorComponentTableOfContents implements VectorComponent {
 	 * @param array $tocData
 	 * @param MessageLocalizer $localizer
 	 * @param Config $config
+	 * @param FeatureManager $featureManager
 	 */
 	public function __construct(
 		array $tocData,
 		MessageLocalizer $localizer,
-		Config $config
+		Config $config,
+		FeatureManager $featureManager
 	) {
 		$this->tocData = $tocData;
 		$this->localizer = $localizer;
-		// ToC is pinned by default, hardcoded for now
-		$this->isPinned = true;
+		$this->isPinned = $featureManager->isFeatureEnabled( Constants::FEATURE_TOC_PINNED );
 		$this->config = $config;
 		$this->pinnableHeader = new VectorComponentPinnableHeader(
 			$this->localizer,
 			$this->isPinned,
 			self::ID,
-			null,
+			'toc-pinned',
 			false,
 			'h2'
 		);

includes/Constants.php

@@ -220,6 +220,21 @@ final class Constants {
 	 */
 	public const PREF_KEY_PAGE_TOOLS_PINNED = 'vector-page-tools-pinned';
 
+	/**
+	 * @var string
+	 */
+	public const REQUIREMENT_TOC_PINNED = 'TOCPinned';
+
+	/**
+	 * @var string
+	 */
+	public const PREF_KEY_TOC_PINNED = 'vector-toc-pinned';
+
+	/**
+	 * @var string
+	 */
+	public const FEATURE_TOC_PINNED = 'TOCPinned';
+
 	/**
 	 * @var string
 	 */

includes/Hooks.php

@@ -628,6 +628,9 @@ class Hooks implements
 			Constants::PREF_KEY_MAIN_MENU_PINNED => [
 				'type' => 'api'
 			],
+			Constants::PREF_KEY_TOC_PINNED => [
+				'type' => 'api'
+			],
 			Constants::PREF_KEY_LIMITED_WIDTH => [
 				'type' => 'toggle',
 				'label-message' => 'vector-prefs-limited-width',

includes/ServiceWiring.php

@@ -217,6 +217,26 @@ return [
 			]
 		);
 
+		// Feature: Table of Contents pinned
+		// ================================
+		$featureManager->registerRequirement(
+			new UserPreferenceRequirement(
+				$context->getUser(),
+				$services->getUserOptionsLookup(),
+				Constants::PREF_KEY_TOC_PINNED,
+				Constants::REQUIREMENT_TOC_PINNED,
+				$context->getTitle()
+			)
+		);
+
+		$featureManager->registerFeature(
+			Constants::FEATURE_TOC_PINNED,
+			[
+				Constants::REQUIREMENT_FULLY_INITIALISED,
+				Constants::REQUIREMENT_TOC_PINNED
+			]
+		);
+
 		// Feature: Main menu pinned
 		// ================================
 		$featureManager->registerRequirement(

includes/SkinVector22.php

@@ -349,7 +349,8 @@ class SkinVector22 extends SkinMustache {
 			$dataToc = new VectorComponentTableOfContents(
 				$parentData['data-toc'],
 				$localizer,
-				$this->getConfig()
+				$this->getConfig(),
+				VectorServices::getFeatureManager()
 			);
 			$tocComponents = [
 				'data-toc' => $dataToc,

includes/templates/PageTitlebar.mustache

@@ -22,6 +22,9 @@
 		{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}
 			{{#data-page-titlebar-toc-pinnable-container}}
 			{{>PinnableContainer/Unpinned/Open}}
+				{{^is-pinned}}
+					{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
+				{{/is-pinned}}
 			{{>PinnableContainer/Close}}
 			{{/data-page-titlebar-toc-pinnable-container}}
 		{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}

resources/skins.vector.es6/main.js

@@ -8,6 +8,7 @@ const
 	initSectionObserver = require( './sectionObserver.js' ),
 	initTableOfContents = require( './tableOfContents.js' ),
 	pinnableElement = require( './pinnableElement.js' ),
+	features = require( './features.js' ),
 	deferUntilFrame = require( './deferUntilFrame.js' ),
 	ABTestConfig = require( /** @type {string} */ ( './config.json' ) ).wgVectorWebABTestEnrollment || {},
 	STICKY_HEADER_VISIBLE_CLASS = 'vector-sticky-header-visible',
@@ -111,8 +112,7 @@ function initStickyHeaderABTests( abConfig, isStickyHeaderFeatureAllowed, getEna
  * @return {void}
  */
 const updateTocLocation = () => {
-	const TOC_PINNED_CLASS = 'vector-toc-pinned';
-	const isPinned = document.body.classList.contains( TOC_PINNED_CLASS );
+	const isPinned = features.isEnabled( 'toc-pinned' );
 	const isStickyHeaderVisible = document.body.classList.contains( STICKY_HEADER_VISIBLE_CLASS );
 	const isBelowDesktop = belowDesktopMedia.matches;
 

skin.json

@@ -40,8 +40,7 @@
 					},
 					"bodyClasses": [
 						"skin-vector",
-						"skin-vector-search-vue",
-						"vector-toc-pinned"
+						"skin-vector-search-vue"
 					],
 					"menus": [
 						"user-interface-preferences",
@@ -167,7 +166,9 @@
 	"DefaultUserOptions": {
 		"vector-limited-width": 1,
 		"vector-page-tools-pinned": 1,
-		"vector-main-menu-pinned": 1
+		"vector-main-menu-pinned": 1,
+		"vector-toc-pinned": 1
+
 	},
 	"HookHandlers": {
 		"VectorHooks": {

tests/phpunit/unit/components/VectorComponentTableOfContentsTest.php

@@ -23,6 +23,7 @@ namespace MediaWiki\Skins\Vector\Tests\Unit\Components;
 
 use HashConfig;
 use MediaWiki\Skins\Vector\Components\VectorComponentTableOfContents;
+use MediaWiki\Skins\Vector\FeatureManagement\FeatureManager;
 use Message;
 use MessageLocalizer;
 
@@ -113,7 +114,7 @@ class VectorComponentTableOfContentsTest extends \MediaWikiUnitTestCase {
 			'data-pinnable-header' => [
 				'is-pinned' => true,
 				'data-name' => 'vector-toc',
-				'data-feature-name' => null,
+				'data-feature-name' => 'toc-pinned',
 				'label' => 'vector-toc-label',
 				'unpin-label' => 'vector-unpin-element-label',
 				'pin-label' => 'vector-pin-element-label',
@@ -188,11 +189,14 @@ class VectorComponentTableOfContentsTest extends \MediaWikiUnitTestCase {
 			$msg->method( 'text' )->willReturn( $key );
 			return $msg;
 		} );
+		$featureManager = $this->createMock( FeatureManager::class );
+		$featureManager->method( 'isFeatureEnabled' )->willReturn( true );
 
 		$toc = new VectorComponentTableOfContents(
 			$tocData,
 			$localizer,
-			new HashConfig( $config )
+			new HashConfig( $config ),
+			$featureManager
 		);
 		$this->assertEquals( $expected, $toc->getTemplateData() );
 	}