Remove non-standard components folder

For skins, all templates should be in the same folder. This
is for security reasons, to limit access of templates to files
that are not templates. This also adds consistency with other skins
where templates are all in the same subdirectory. It also allows
us to reduce the creation of TemplateParser instances.

Note: All styles and scripts should be in the resources folder but this
is not rectified by this patchset. Will be done in follow ups following
more discussion.

This begins this work in the least disruptive way possible and drops
the README note to avoid this pattern growing.

Bug: T292558
Change-Id: I4c2e115451c0a76c742734730712814c1f1d838d

README.md

@@ -196,51 +196,3 @@ Group membership can be debugged from the console via:
 And since session ID is an input in calculating the group, reassignment occurs
 when clearing it: `mw.storage.session.remove('mwuser-sessionId')`.
 
-### Components
-
-Components may be shared between server and client. Keeping all code for a single component only in
-one directory makes it easier to understand the complete domain of a component, all of its implicit
-dependencies, and also what it is independent of. The structure does not hint at ResourceLoader
-module bundling of resources and code. That is the domain of skin.json.
-
-New components are stored under components/. Potential older components are stored under includes/
-and resources/, and those directory structures imperfectly represent ResourceLoader module
-divisions.
-
-#### Mustache
-
-Mustache templates at the root components/ directory, like components/PageActionsMenu.mustache or
-components/ToggleList.mustache, are designed to be rendered as root templates not partials. E.g.:
-
-```lang=php
-// 🆗
-
-$templatesDir = __DIR__ . '/../../components';
-$templateParser = new TemplateParser( $templatesDir );
-
-// Render components/ToggleList.mustache not components/ToggleList/ToggleList.mustache.
-$html = $templateParser->processTemplate( 'ToggleList',  $data );
-```
-
-Attempting to render a partial as a template root will fail because of components/ root path
-assumptions:
-
-```lang=php
-// 🚫
-
-$templatesDir = __DIR__ . '/../../components/ToggleList';
-$templateParser = new TemplateParser( $templatesDir );
-
-// Error: components/ToggleList/ToggleList.mustache references
-// components/ToggleList/ToggleList/ToggleListItem.mustache which does not exist.
-$html = $templateParser->processTemplate( 'ToggleList',  $data );
-```
-
-Partials in components/ subdirectories, like components/PageActionsMenu/PageActionsMenu.mustache or
-components/ToggleList/ToggleList.mustache, are for in-template partial composition only as their
-paths assume the render root is components/. E.g.:
-
-```lang=mustache
-{{! Include components/ToggleList/ToggleList.mustache, not components/ToggleList.mustache. }}
-{{> ToggleList/ToggleList}}
-```

includes/Menu/PageActions/PageActionsDirector.php

@@ -76,7 +76,7 @@ final class PageActionsDirector {
 			'toolbar' => $toolbar->getEntries()
 		];
 		if ( $overflowMenu->hasEntries() ) {
-			// See components/ToggleList.
+			// See includes/Skins/components/ToggleList.
 			$menu[ 'overflowMenu' ] = [
 				'item-id' => 'page-actions-overflow',
 				'checkboxID' => 'page-actions-overflow-checkbox',

includes/Menu/User/UserMenuDirector.php

@@ -55,7 +55,7 @@ final class UserMenuDirector {
 		$group = $this->builder->getGroup( $personalTools );
 		$entries = $group->getEntries();
 
-		$templateParser = new TemplateParser( __DIR__ . '/../../../components' );
+		$templateParser = new TemplateParser( __DIR__ . '/../../Skins/components' );
 		return empty( $entries )
 			? null
 			: $templateParser->processTemplate( 'ToggleList', [

includes/Skins/MinervaTemplate.php

@@ -63,7 +63,7 @@ class MinervaTemplate extends BaseTemplate {
 	 * @return string
 	 */
 	protected function getPageActionsHtml() {
-		$templateParser = new TemplateParser( __DIR__ . '/../../components' );
+		$templateParser = new TemplateParser( __DIR__ . '/../../includes/Skins/components' );
 		$pageActions = $this->getPageActions();
 		$html = '';
 

includes/Skins/components/ToggleList/DropDownList.less

@@ -1,6 +1,6 @@
 // A DropDownList is a ToggleList that extends downward.
 
-@import '../../minerva.less/minerva.mixins.less';
+@import '../../../../minerva.less/minerva.mixins.less';
 
 .toggle-list__list--drop-down {
 	.transform( translateY( -8px ) );

includes/Skins/components/ToggleList/MenuListItem.less

@@ -1,7 +1,7 @@
 // A MenuListItem is a ToggleList item for menus.
 
-@import '../../minerva.less/minerva.variables.less';
-@import '../../minerva.less/minerva.mixins.less';
+@import '../../../../minerva.less/minerva.variables.less';
+@import '../../../../minerva.less/minerva.mixins.less';
 
 .toggle-list-item {
 	display: block;

includes/Skins/components/ToggleList/ToggleList.less

@@ -1,4 +1,4 @@
-@import '../../minerva.less/minerva.variables.less';
+@import '../../../../minerva.less/minerva.variables.less';
 
 .toggle-list__checkbox {
 	// Always occlude the checkbox. The checkbox display cannot be none since its focus state is used

resources/skins.minerva.amc.styles/index.less

@@ -5,8 +5,8 @@
 @import 'tabs.less';
 
 // wgMinervaPersonalMenu
-@import '../../components/ToggleList/DropDownList.less';
-@import '../../components/ToggleList/MenuListItem.less';
+@import '../../includes/Skins/components/ToggleList/DropDownList.less';
+@import '../../includes/Skins/components/ToggleList/MenuListItem.less';
 
 // wgMinervaPersonalMenu
 @import '../../resources/skins.minerva.amc.styles/userMenu.less';

resources/skins.minerva.mainMenu.styles/index.less

@@ -2,4 +2,4 @@
 @import 'MainMenuItem.less';
 @import 'MainMenuFooter.less';
 @import 'NotificationsOverlay.less';
-@import '../../components/ToggleList/ToggleList.less';
+@import '../../includes/Skins/components/ToggleList/ToggleList.less';

resources/skins.minerva.scripts/Toolbar.js

@@ -1,7 +1,7 @@
 ( function ( M ) {
 	var
 		mobile = M.require( 'mobile.startup' ),
-		ToggleList = require( '../../components/ToggleList/ToggleList.js' ),
+		ToggleList = require( '../../includes/Skins/components/ToggleList/ToggleList.js' ),
 		Icon = mobile.Icon,
 		page = mobile.currentPage(),
 		/** The top level menu. */

resources/skins.minerva.scripts/initMobile.js

@@ -23,7 +23,7 @@ module.exports = function () {
 		TitleUtil = require( './TitleUtil.js' ),
 		issues = require( './page-issues/index.js' ),
 		Toolbar = require( './Toolbar.js' ),
-		ToggleList = require( '../../components/ToggleList/ToggleList.js' ),
+		ToggleList = require( '../../includes/Skins/components/ToggleList/ToggleList.js' ),
 		TabScroll = require( './TabScroll.js' ),
 		router = require( 'mediawiki.router' ),
 		ctaDrawers = require( './ctaDrawers.js' ),

skin.json

@@ -582,7 +582,7 @@
 				"resources/skins.minerva.scripts/page-issues/index.js",
 				"resources/skins.minerva.scripts/UriUtil.js",
 				"resources/skins.minerva.scripts/TitleUtil.js",
-				"components/ToggleList/ToggleList.js",
+				"includes/Skins/components/ToggleList/ToggleList.js",
 				"resources/skins.minerva.scripts/TabScroll.js",
 				"resources/skins.minerva.scripts/Toolbar.js",
 				"resources/skins.minerva.scripts/mobileRedirect.js",