Merge skins.vector.es6 into skins.vector.js

With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.

Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b

.eslintrcEs6.json

@@ -17,6 +17,7 @@
 	"settings": {
 	},
 	"rules": {
+		"no-var": "warn",
 		"compat/compat": "off",
 		"mediawiki/class-doc": "off"
 	}

bundlesize.config.json

@@ -7,13 +7,9 @@
 		"resourceModule": "skins.vector.styles",
 		"maxSize": "12.3 kB"
 	},
-	{
-		"resourceModule": "skins.vector.es6",
-		"maxSize": "11.0 kB"
-	},
 	{
 		"resourceModule": "skins.vector.js",
-		"maxSize": "3.3 kB"
+		"maxSize": "14.3 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",

resources/common/variables.less

@@ -213,7 +213,7 @@
 // T314419 - Scroll padding is modified primarily to bring section headings into a position that is
 // easier to read, which is slightly lower than the very top of the page. The primary use-case is when
 // navigating sections via the table of contents. When changing this value, also change the value in
-// resources/skins.vector.es6/main.js
+// resources/skins.vector.scripts/setupIntersectionObservers.js
 @scroll-padding-top: 75px;
 
 // Grid

resources/skins.vector.js/skin.js

@@ -3,6 +3,7 @@ var languageButton = require( './languageButton.js' ),
 	initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
 	dropdownMenus = require( './dropdownMenus.js' ).dropdownMenus,
 	watchstar = require( './watchstar.js' ),
+	setupIntersectionObservers = require( './setupIntersectionObservers.js' ),
 	// @ts-ignore
 	menuTabs = require( './menuTabs.js' );
 
@@ -79,6 +80,7 @@ function main( window ) {
 	menuTabs();
 	addNamespacesGadgetSupport();
 	watchstar();
+	setupIntersectionObservers.main();
 }
 
 /**
@@ -110,35 +112,11 @@ function init( window ) {
 }
 
 init( window );
-
-/**
- * Because stickyHeader.js clones the user menu, it must initialize before
- * dropdownMenus.js initializes in order for the sticky header's user menu to
- * bind the necessary checkboxHack event listeners. This is solved by using
- * mw.loader.using to ensure that the skins.vector.es6 module initializes first
- * followed by initializing this module. If the es6 module loading fails (which
- * can happen in browsers that don't support es6), continue to initialize this
- * module.
- */
-function initAfterEs6Module() {
-	mw.loader.using( 'skins.vector.es6' ).then( function () {
-		// Loading of the 'skins.vector.es6' module has succeeded. Initialize the
-		// `skins.vector.es6` module first.
-		require( /** @type {string} */ ( 'skins.vector.es6' ) ).main();
-		// Initialize this module second.
-		main( window );
-	}, function () {
-		// Loading of the 'skins.vector.es6' has failed (e.g. this will fail in
-		// browsers that don't support ES6) so only initialize this module.
-		main( window );
-	} );
-}
-
 if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
-	initAfterEs6Module();
+	main( window );
 } else {
 	// This is needed when document.readyState === 'loading'.
 	document.addEventListener( 'DOMContentLoaded', function () {
-		initAfterEs6Module();
+		main( window );
 	} );
 }

skin.json

@@ -54,8 +54,7 @@
 					],
 					"scripts": [
 						"skins.vector.user",
-						"skins.vector.js",
-						"skins.vector.es6"
+						"skins.vector.js"
 					],
 					"styles": [
 						"mediawiki.ui.button",
@@ -335,77 +334,49 @@
 				"listBullet"
 			]
 		},
-		"skins.vector.es6": {
+		"skins.vector.js": {
 			"es6": true,
 			"styles": [
-				"resources/skins.vector.es6/limitedWidthToggle.less"
+				"resources/skins.vector.js/limitedWidthToggle.less"
 			],
 			"packageFiles": [
-				"resources/skins.vector.es6/main.js",
-				"resources/skins.vector.es6/searchToggle.js",
-				"resources/skins.vector.es6/stickyHeader.js",
-				"resources/skins.vector.es6/scrollObserver.js",
-				"resources/skins.vector.es6/AB.js",
-				"resources/skins.vector.es6/tableOfContents.js",
-				"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",
-				"resources/skins.vector.es6/popupNotification.js",
+				"resources/skins.vector.js/skin.js",
+				"resources/skins.vector.js/setupIntersectionObservers.js",
+				"resources/skins.vector.js/searchToggle.js",
+				"resources/skins.vector.js/stickyHeader.js",
+				"resources/skins.vector.js/scrollObserver.js",
+				"resources/skins.vector.js/AB.js",
+				"resources/skins.vector.js/tableOfContents.js",
+				"resources/skins.vector.js/sectionObserver.js",
+				"resources/skins.vector.js/deferUntilFrame.js",
+				"resources/skins.vector.js/pinnableElement.js",
+				"resources/skins.vector.js/features.js",
+				"resources/skins.vector.js/limitedWidthToggle.js",
+				"resources/skins.vector.js/popupNotification.js",
 				{
-					"name": "resources/skins.vector.es6/activeABTest.json",
+					"name": "resources/skins.vector.js/activeABTest.json",
 					"callback": "MediaWiki\\Skins\\Vector\\Hooks::getActiveABTest"
 				},
 				{
-					"name": "resources/skins.vector.es6/config.json",
+					"name": "resources/skins.vector.js/config.json",
 					"config": [ "VectorSearchApiUrl" ]
 				},
 				{
-					"name": "resources/skins.vector.es6/tableOfContentsConfig.json",
+					"name": "resources/skins.vector.js/tableOfContentsConfig.json",
 					"config": [
 						"VectorTableOfContentsCollapseAtCount",
 						"VectorTableOfContentsBeginning"
 					]
 				},
 				{
-					"name": "resources/skins.vector.es6/templates/TableOfContents__list.mustache",
+					"name": "resources/skins.vector.js/templates/TableOfContents__list.mustache",
 					"file": "includes/templates/TableOfContents__list.mustache",
 					"type": "text"
 				},
 				{
-					"name": "resources/skins.vector.es6/templates/TableOfContents__line.mustache",
+					"name": "resources/skins.vector.js/templates/TableOfContents__line.mustache",
 					"file": "includes/templates/TableOfContents__line.mustache",
 					"type": "text"
-				}
-			],
-			"dependencies": [
-				"mediawiki.user",
-				"skins.vector.icons.js",
-				"mediawiki.page.ready",
-				"mediawiki.page.watch.ajax",
-				"mediawiki.util",
-				"mediawiki.storage",
-				"mediawiki.cookie",
-				"mediawiki.experiments"
-			],
-			"messages": [
-				"vector-limited-width-toggle",
-				"vector-toc-beginning",
-				"vector-toc-label",
-				"vector-pin-element-label",
-				"vector-unpin-element-label",
-				"vector-toc-unpinned-popup",
-				"vector-page-tools-unpinned-popup",
-				"vector-main-menu-unpinned-popup"
-			]
-		},
-		"skins.vector.js": {
-			"packageFiles": [
-				"resources/skins.vector.js/skin.js",
-				{
-					"name": "resources/skins.vector.js/config.json",
-					"config": [ "VectorSearchApiUrl" ]
 				},
 				"resources/skins.vector.js/watchstar.js",
 				"resources/skins.vector.js/dropdownMenus.js",
@@ -415,11 +386,26 @@
 				"resources/skins.vector.js/menuTabs.js"
 			],
 			"dependencies": [
+				"mediawiki.user",
+				"mediawiki.page.watch.ajax",
+				"mediawiki.storage",
+				"mediawiki.cookie",
+				"mediawiki.experiments",
 				"skins.vector.icons.js",
 				"mediawiki.page.ready",
 				"mediawiki.util"
 			],
-			"messages": [ "vector-search-loader" ]
+			"messages": [
+				"vector-search-loader",
+				"vector-limited-width-toggle",
+				"vector-toc-beginning",
+				"vector-toc-label",
+				"vector-pin-element-label",
+				"vector-unpin-element-label",
+				"vector-toc-unpinned-popup",
+				"vector-page-tools-unpinned-popup",
+				"vector-main-menu-unpinned-popup"
+			]
 		},
 		"skins.vector.legacy.js": {
 			"packageFiles": [

tests/jest/AB.test.js

@@ -1,4 +1,4 @@
-const AB = require( '../../resources/skins.vector.es6/AB.js' );
+const AB = require( '../../resources/skins.vector.js/AB.js' );
 const NAME_OF_EXPERIMENT = 'name-of-experiment';
 const TOKEN = 'token';
 const MW_EXPERIMENT_PARAM = {

tests/jest/deferUntilFrame.test.js

@@ -1,4 +1,4 @@
-const deferUntilFrame = require( '../../resources/skins.vector.es6/deferUntilFrame.js' );
+const deferUntilFrame = require( '../../resources/skins.vector.js/deferUntilFrame.js' );
 
 describe( 'deferUntilFrame.js', () => {
 	let /** @type {jest.SpyInstance} */ spy;

tests/jest/pinnableElement.test.js

@@ -1,10 +1,10 @@
-jest.mock( '../../resources/skins.vector.es6/features.js' );
+jest.mock( '../../resources/skins.vector.js/features.js' );
 
-const features = require( '../../resources/skins.vector.es6/features.js' );
+const features = require( '../../resources/skins.vector.js/features.js' );
 const mustache = require( 'mustache' );
 const fs = require( 'fs' );
 const pinnableHeaderTemplate = fs.readFileSync( 'includes/templates/PinnableHeader.mustache', 'utf8' );
-const pinnableElement = require( '../../resources/skins.vector.es6/pinnableElement.js' );
+const pinnableElement = require( '../../resources/skins.vector.js/pinnableElement.js' );
 
 /**
  * Mock for matchMedia, which is not included in JSDOM.

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

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

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

@@ -6,11 +6,11 @@ window.matchMedia = window.matchMedia || function () {
 	};
 };
 
-const { test } = require( '../../../resources/skins.vector.es6/main.js' );
+const { test } = require( '../../../resources/skins.vector.js/setupIntersectionObservers.js' );
 const {
 	STICKY_HEADER_EXPERIMENT_NAME,
 	STICKY_HEADER_EDIT_EXPERIMENT_NAME
-} = require( '../../../resources/skins.vector.es6/stickyHeader.js' );
+} = require( '../../../resources/skins.vector.js/stickyHeader.js' );
 describe( 'main.js', () => {
 	it( 'getHeadingIntersectionHandler', () => {
 		const section = document.createElement( 'div' );

tests/jest/stickyHeader.test.js

@@ -2,7 +2,7 @@ const mustache = require( 'mustache' );
 const fs = require( 'fs' );
 const stickyHeaderTemplate = fs.readFileSync( 'includes/templates/StickyHeader.mustache', 'utf8' );
 const buttonTemplate = fs.readFileSync( 'includes/templates/Button.mustache', 'utf8' );
-const sticky = require( '../../resources/skins.vector.es6/stickyHeader.js' );
+const sticky = require( '../../resources/skins.vector.js/stickyHeader.js' );
 const { userLinksHTML, dropdownPartials } = require( './userLinksData.js' );
 
 const defaultButtonsTemplateData = [ {

tests/jest/tableOfContents.test.js

@@ -6,7 +6,7 @@ const tableOfContentsLineTemplate = fs.readFileSync( 'includes/templates/TableOf
 const pinnableElementOpenTemplate = fs.readFileSync( 'includes/templates/PinnableElement/Open.mustache', 'utf8' );
 const pinnableElementCloseTemplate = fs.readFileSync( 'includes/templates/PinnableElement/Close.mustache', 'utf8' );
 const pinnableHeaderTemplate = fs.readFileSync( 'includes/templates/PinnableHeader.mustache', 'utf8' );
-const initTableOfContents = require( '../../resources/skins.vector.es6/tableOfContents.js' );
+const initTableOfContents = require( '../../resources/skins.vector.js/tableOfContents.js' );
 
 let /** @type {HTMLElement} */ container,
 	/** @type {HTMLElement} */ fooSection,