Merge "Move limitedWidthToggle.js and features.js to skins.vector.es6 module"

resources/skins.vector.es6/features.js

@@ -1,7 +1,7 @@
 /** @interface MwApi */
 
-var /** @type {MwApi} */api,
-	debounce = require( /** @type {string} */ ( 'mediawiki.util' ) ).debounce;
+let /** @type {MwApi} */ api;
+const debounce = require( /** @type {string} */ ( 'mediawiki.util' ) ).debounce;
 
 /**
  * Saves preference to user preferences and/or localStorage.
@@ -10,9 +10,9 @@ var /** @type {MwApi} */api,
  * @param {boolean} enabled
  */
 function save( feature, enabled ) {
-	var featuresJSON,
-		// @ts-ignore
-		features = mw.storage.get( 'VectorFeatures' ) || '{}';
+	let featuresJSON;
+	// @ts-ignore
+	const features = mw.storage.get( 'VectorFeatures' ) || '{}';
 
 	try {
 		featuresJSON = JSON.parse( features );
@@ -36,7 +36,7 @@ function save( feature, enabled ) {
  * @throws {Error} if unknown feature toggled.
  */
 function toggle( name ) {
-	var featureClassEnabled = 'vector-feature-' + name + '-enabled',
+	const featureClassEnabled = 'vector-feature-' + name + '-enabled',
 		classList = document.body.classList,
 		featureClassDisabled = 'vector-feature-' + name + '-disabled';
 

resources/skins.vector.es6/limitedWidthToggle.js

@@ -1,5 +1,5 @@
-var features = require( './features.js' );
-var LIMITED_WIDTH_FEATURE_NAME = 'limited-width';
+const features = require( './features.js' );
+const LIMITED_WIDTH_FEATURE_NAME = 'limited-width';
 
 /**
  * Sets data attribute for click tracking purposes.
@@ -14,7 +14,7 @@ function setDataAttribute( toggleBtn ) {
  * adds a toggle button
  */
 function init() {
-	var toggle = document.createElement( 'button' );
+	const toggle = document.createElement( 'button' );
 	toggle.classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-button', 'vector-limited-width-toggle' );
 	setDataAttribute( toggle );
 	document.body.appendChild( toggle );

resources/skins.vector.es6/main.js

@@ -1,5 +1,6 @@
 // Enable Vector features limited to ES6 browse
 const
+	limitedWidthToggle = require( './limitedWidthToggle.js' ),
 	searchToggle = require( './searchToggle.js' ),
 	stickyHeader = require( './stickyHeader.js' ),
 	scrollObserver = require( './scrollObserver.js' ),
@@ -159,6 +160,7 @@ const updateTocLocation = () => {
  * @return {void}
  */
 const main = () => {
+	limitedWidthToggle();
 	// Initialize the search toggle for the main header only. The sticky header
 	// toggle is initialized after Codex search loads.
 	const searchToggleElement = document.querySelector( '.mw-header .search-toggle' );

resources/skins.vector.js/skin.js

@@ -3,7 +3,6 @@ var languageButton = require( './languageButton.js' ),
 	initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
 	dropdownMenus = require( './dropdownMenus.js' ).dropdownMenus,
 	sidebarPersistence = require( './sidebarPersistence.js' ),
-	limitedWidthToggle = require( './limitedWidthToggle.js' ),
 	watchstar = require( './watchstar.js' ),
 	// @ts-ignore
 	menuTabs = require( './menuTabs.js' ),
@@ -82,7 +81,6 @@ function main( window ) {
 	// menuTabs should follow `dropdownMenus` as that can move menu items from a
 	// tab menu to a dropdown.
 	menuTabs();
-	limitedWidthToggle();
 	addNamespacesGadgetSupport();
 	watchstar();
 }

skin.json

@@ -348,6 +348,9 @@
 		},
 		"skins.vector.es6": {
 			"es6": true,
+			"styles": [
+				"resources/skins.vector.es6/limitedWidthToggle.less"
+			],
 			"packageFiles": [
 				"resources/skins.vector.es6/main.js",
 				"resources/skins.vector.es6/searchToggle.js",
@@ -358,6 +361,8 @@
 				"resources/skins.vector.es6/sectionObserver.js",
 				"resources/skins.vector.es6/deferUntilFrame.js",
 				"resources/skins.vector.es6/pinnableElement.js",
+				"resources/skins.vector.es6/features.js",
+				"resources/skins.vector.es6/limitedWidthToggle.js",
 				{
 					"name": "resources/skins.vector.es6/config.json",
 					"callback": "MediaWiki\\Skins\\Vector\\Hooks::getVectorResourceLoaderConfig"
@@ -397,9 +402,6 @@
 			]
 		},
 		"skins.vector.js": {
-			"styles": [
-				"resources/skins.vector.js/limitedWidthToggle.less"
-			],
 			"packageFiles": [
 				"resources/skins.vector.js/skin.js",
 				{
@@ -412,8 +414,6 @@
 				"resources/skins.vector.js/sidebarPersistence.js",
 				"resources/skins.vector.js/languageButton.js",
 				"resources/skins.vector.js/echo.js",
-				"resources/skins.vector.js/limitedWidthToggle.js",
-				"resources/skins.vector.js/features.js",
 				"resources/skins.vector.js/searchLoader.js",
 				"resources/skins.vector.js/menuTabs.js"
 			],

tests/jest/skins.vector.es6/features.test.js

@@ -1,4 +1,4 @@
-const features = require( '../../../resources/skins.vector.js/features.js' );
+const features = require( '../../../resources/skins.vector.es6/features.js' );
 
 describe( 'features', () => {
 	beforeEach( () => {