Separate code from ES6 browsers from ES5 code

This will allow us to write ES6 code for the new features which
is limited to those browsers.

For browsers that do not support ES6, the code will not execute
because of the "es6" flag. Doing this will help us avoid issues
like T293402

Change-Id: Iffb7098cb22395e33b87352fb4f08516f6f25e6f

.eslintignore

@@ -3,3 +3,5 @@
 /i18n/
 /node_modules/
 /vendor/
+# Temporary will be removed in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/732406
+/resources/skins.vector.es6/

resources/skins.vector.es6/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+	"root": true,
+	"extends": [
+		"wikimedia/client-es6",
+		"wikimedia/jquery",
+		"wikimedia/mediawiki"
+	],
+	"env": {
+		"browser": true
+	},
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"settings": {
+		"jsdoc": {
+			"preferredTypes": {
+				"VectorHeaderObserver": "VectorHeaderObserver"
+			}
+		}
+	}
+}

resources/skins.vector.es6/main.js

@@ -0,0 +1,20 @@
+// Enable Vector features limited to ES6 browse
+const stickyHeader = require( './stickyHeader.js' ),
+	searchToggle = require( './searchToggle.js' );
+
+/**
+ * @return {void}
+ */
+const main = () => {
+	// Initialize the search toggle for the main header only. The sticky header
+	// toggle is initialized after wvui search loads.
+	searchToggle( document.querySelector( '.mw-header .search-toggle' ) );
+	stickyHeader();
+}
+
+if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
+	main();
+} else {
+	// This is needed when document.readyState === 'loading'.
+	document.addEventListener( 'DOMContentLoaded', () => main );
+}

resources/skins.vector.js/skin.js

@@ -1,10 +1,8 @@
 var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' ),
 	vector = require( '../skins.vector.legacy.js/vector.js' ),
-	stickyHeader = require( './stickyHeader.js' ),
 	languageButton = require( './languageButton.js' ),
 	initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
 	dropdownMenus = require( './dropdownMenus.js' ),
-	searchToggle = require( './searchToggle.js' ),
 	sidebar = require( './sidebar.js' );
 
 /**
@@ -49,14 +47,7 @@ function main( window ) {
 	sidebar.init( window );
 	vector.init();
 	initSearchLoader( document );
-	// Initialize the search toggle for the main header only. The sticky header
-	// toggle is initialized after wvui search loads.
-	searchToggle( document.querySelector( '.mw-header .search-toggle' ) );
 	languageButton();
-	stickyHeader();
-	// dropdownMenus should be placed afer sticky header is initialized in order to
-	// bind the correct event handlers to the sticky header dropdown menus (e.g.
-	// user menu).
 	dropdownMenus();
 }
 

skin.json

@@ -22,6 +22,7 @@
 				{
 					"name": "vector",
 					"scripts": [
+						"skins.vector.es6",
 						"skins.vector.js"
 					],
 					"templateDirectory": "includes/templates",
@@ -200,6 +201,14 @@
 				"userGroup"
 			]
 		},
+		"skins.vector.es6": {
+			"es6": true,
+			"packageFiles": [
+				"resources/skins.vector.es6/main.js",
+				"resources/skins.vector.es6/searchToggle.js",
+				"resources/skins.vector.es6/stickyHeader.js"
+			]
+		},
 		"skins.vector.js": {
 			"packageFiles": [
 				"resources/skins.vector.js/skin.js",
@@ -207,14 +216,12 @@
 					"name": "resources/skins.vector.js/config.json",
 					"callback": "Vector\\Hooks::getVectorResourceLoaderConfig"
 				},
-				"resources/skins.vector.js/stickyHeader.js",
 				"resources/skins.vector.js/dropdownMenus.js",
 				"resources/skins.vector.js/sidebar.js",
 				"resources/skins.vector.legacy.js/collapsibleTabs.js",
 				"resources/skins.vector.legacy.js/vector.js",
 				"resources/skins.vector.js/languageButton.js",
-				"resources/skins.vector.js/searchLoader.js",
-				"resources/skins.vector.js/searchToggle.js"
+				"resources/skins.vector.js/searchLoader.js"
 			],
 			"dependencies": [
 				"skins.vector.icons.js",