diff --git a/core/misc/active-link.js b/core/misc/active-link.es6.js
similarity index 100%
copy from core/misc/active-link.js
copy to core/misc/active-link.es6.js
diff --git a/core/misc/active-link.js b/core/misc/active-link.js
index 9cf55b4344..d489fb5312 100644
--- a/core/misc/active-link.js
+++ b/core/misc/active-link.js
@@ -1,60 +1,42 @@
 /**
- * @file
- * Attaches behaviors for Drupal's active link marking.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/active-link.es6.js
+* @preserve
+**/
 
 (function (Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Append is-active class.
-   *
-   * The link is only active if its path corresponds to the current path, the
-   * language of the linked path is equal to the current language, and if the
-   * query parameters of the link equal those of the current request, since the
-   * same request with different query parameters may yield a different page
-   * (e.g. pagers, exposed View filters).
-   *
-   * Does not discriminate based on element type, so allows you to set the
-   * is-active class on any element: a, li…
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.activeLinks = {
-    attach: function (context) {
-      // Start by finding all potentially active links.
+    attach: function attach(context) {
       var path = drupalSettings.path;
       var queryString = JSON.stringify(path.currentQuery);
       var querySelector = path.currentQuery ? "[data-drupal-link-query='" + queryString + "']" : ':not([data-drupal-link-query])';
       var originalSelectors = ['[data-drupal-link-system-path="' + path.currentPath + '"]'];
       var selectors;
 
-      // If this is the front page, we have to check for the <front> path as
-      // well.
       if (path.isFront) {
         originalSelectors.push('[data-drupal-link-system-path="<front>"]');
       }
 
-      // Add language filtering.
-      selectors = [].concat(
-        // Links without any hreflang attributes (most of them).
-        originalSelectors.map(function (selector) { return selector + ':not([hreflang])'; }),
-        // Links with hreflang equals to the current language.
-        originalSelectors.map(function (selector) { return selector + '[hreflang="' + path.currentLanguage + '"]'; })
-      );
+      selectors = [].concat(originalSelectors.map(function (selector) {
+        return selector + ':not([hreflang])';
+      }), originalSelectors.map(function (selector) {
+        return selector + '[hreflang="' + path.currentLanguage + '"]';
+      }));
 
-      // Add query string selector for pagers, exposed filters.
-      selectors = selectors.map(function (current) { return current + querySelector; });
+      selectors = selectors.map(function (current) {
+        return current + querySelector;
+      });
 
-      // Query the DOM.
       var activeLinks = context.querySelectorAll(selectors.join(','));
       var il = activeLinks.length;
       for (var i = 0; i < il; i++) {
         activeLinks[i].classList.add('is-active');
       }
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         var activeLinks = context.querySelectorAll('[data-drupal-link-system-path].is-active');
         var il = activeLinks.length;
@@ -64,5 +46,4 @@
       }
     }
   };
-
-})(Drupal, drupalSettings);
+})(Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/ajax.js b/core/misc/ajax.es6.js
similarity index 100%
copy from core/misc/ajax.js
copy to core/misc/ajax.es6.js
diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index fefe9f3031..b8adccbc8a 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -1,35 +1,15 @@
 /**
- * @file
- * Provides Ajax page updating via jQuery $.ajax.
- *
- * Ajax is a method of making a request via JavaScript while viewing an HTML
- * page. The request returns an array of commands encoded in JSON, which is
- * then executed to make any changes that are necessary to the page.
- *
- * Drupal uses this file to enhance form elements with `#ajax['url']` and
- * `#ajax['wrapper']` properties. If set, this file will automatically be
- * included to provide Ajax capabilities.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/ajax.es6.js
+* @preserve
+**/
 
 (function ($, window, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Attaches the Ajax behavior to each Ajax form element.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Initialize all {@link Drupal.Ajax} objects declared in
-   *   `drupalSettings.ajax` or initialize {@link Drupal.Ajax} objects from
-   *   DOM elements having the `use-ajax-submit` or `use-ajax` css class.
-   * @prop {Drupal~behaviorDetach} detach
-   *   During `unload` remove all {@link Drupal.Ajax} objects related to
-   *   the removed content.
-   */
   Drupal.behaviors.AJAX = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
 
       function loadAjaxBehavior(base) {
         var element_settings = settings.ajax[base];
@@ -43,21 +23,17 @@
         });
       }
 
-      // Load all Ajax behaviors specified in the settings.
       for (var base in settings.ajax) {
         if (settings.ajax.hasOwnProperty(base)) {
           loadAjaxBehavior(base);
         }
       }
 
-      // Bind Ajax behaviors to all items showing the class.
       $('.use-ajax').once('ajax').each(function () {
         var element_settings = {};
-        // Clicked links look better with the throbber than the progress bar.
-        element_settings.progress = {type: 'throbber'};
 
-        // For anchor tags, these will go to the target of the anchor rather
-        // than the usual location.
+        element_settings.progress = { type: 'throbber' };
+
         var href = $(this).attr('href');
         if (href) {
           element_settings.url = href;
@@ -70,21 +46,16 @@
         Drupal.ajax(element_settings);
       });
 
-      // This class means to submit the form to the action using Ajax.
       $('.use-ajax-submit').once('ajax').each(function () {
         var element_settings = {};
 
-        // Ajax submits specified in this manner automatically submit to the
-        // normal form action.
         element_settings.url = $(this.form).attr('action');
-        // Form submit button clicks need to tell the form what was clicked so
-        // it gets passed in the POST request.
+
         element_settings.setClick = true;
-        // Form buttons use the 'click' event rather than mousedown.
+
         element_settings.event = 'click';
-        // Clicked form buttons look better with the throbber than the progress
-        // bar.
-        element_settings.progress = {type: 'throbber'};
+
+        element_settings.progress = { type: 'throbber' };
         element_settings.base = $(this).attr('id');
         element_settings.element = this;
 
@@ -92,31 +63,15 @@
       });
     },
 
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         Drupal.ajax.expired().forEach(function (instance) {
-          // Set this to null and allow garbage collection to reclaim
-          // the memory.
           Drupal.ajax.instances[instance.instanceIndex] = null;
         });
       }
     }
   };
 
-  /**
-   * Extends Error to provide handling for Errors in Ajax.
-   *
-   * @constructor
-   *
-   * @augments Error
-   *
-   * @param {XMLHttpRequest} xmlhttp
-   *   XMLHttpRequest object used for the failed request.
-   * @param {string} uri
-   *   The URI where the error occurred.
-   * @param {string} customMessage
-   *   The custom message.
-   */
   Drupal.AjaxError = function (xmlhttp, uri, customMessage) {
 
     var statusCode;
@@ -125,124 +80,49 @@
     var responseText;
     var readyStateText;
     if (xmlhttp.status) {
-      statusCode = '\n' + Drupal.t('An AJAX HTTP error occurred.') + '\n' + Drupal.t('HTTP Result Code: !status', {'!status': xmlhttp.status});
-    }
-    else {
+      statusCode = '\n' + Drupal.t('An AJAX HTTP error occurred.') + '\n' + Drupal.t('HTTP Result Code: !status', { '!status': xmlhttp.status });
+    } else {
       statusCode = '\n' + Drupal.t('An AJAX HTTP request terminated abnormally.');
     }
     statusCode += '\n' + Drupal.t('Debugging information follows.');
-    pathText = '\n' + Drupal.t('Path: !uri', {'!uri': uri});
+    pathText = '\n' + Drupal.t('Path: !uri', { '!uri': uri });
     statusText = '';
-    // In some cases, when statusCode === 0, xmlhttp.statusText may not be
-    // defined. Unfortunately, testing for it with typeof, etc, doesn't seem to
-    // catch that and the test causes an exception. So we need to catch the
-    // exception here.
+
     try {
-      statusText = '\n' + Drupal.t('StatusText: !statusText', {'!statusText': $.trim(xmlhttp.statusText)});
-    }
-    catch (e) {
-      // Empty.
-    }
+      statusText = '\n' + Drupal.t('StatusText: !statusText', { '!statusText': $.trim(xmlhttp.statusText) });
+    } catch (e) {}
 
     responseText = '';
-    // Again, we don't have a way to know for sure whether accessing
-    // xmlhttp.responseText is going to throw an exception. So we'll catch it.
+
     try {
-      responseText = '\n' + Drupal.t('ResponseText: !responseText', {'!responseText': $.trim(xmlhttp.responseText)});
-    }
-    catch (e) {
-      // Empty.
-    }
+      responseText = '\n' + Drupal.t('ResponseText: !responseText', { '!responseText': $.trim(xmlhttp.responseText) });
+    } catch (e) {}
 
-    // Make the responseText more readable by stripping HTML tags and newlines.
     responseText = responseText.replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '');
     responseText = responseText.replace(/[\n]+\s+/g, '\n');
 
-    // We don't need readyState except for status == 0.
-    readyStateText = xmlhttp.status === 0 ? ('\n' + Drupal.t('ReadyState: !readyState', {'!readyState': xmlhttp.readyState})) : '';
+    readyStateText = xmlhttp.status === 0 ? '\n' + Drupal.t('ReadyState: !readyState', { '!readyState': xmlhttp.readyState }) : '';
 
-    customMessage = customMessage ? ('\n' + Drupal.t('CustomMessage: !customMessage', {'!customMessage': customMessage})) : '';
+    customMessage = customMessage ? '\n' + Drupal.t('CustomMessage: !customMessage', { '!customMessage': customMessage }) : '';
 
-    /**
-     * Formatted and translated error message.
-     *
-     * @type {string}
-     */
     this.message = statusCode + pathText + statusText + customMessage + responseText + readyStateText;
 
-    /**
-     * Used by some browsers to display a more accurate stack trace.
-     *
-     * @type {string}
-     */
     this.name = 'AjaxError';
   };
 
   Drupal.AjaxError.prototype = new Error();
   Drupal.AjaxError.prototype.constructor = Drupal.AjaxError;
 
-  /**
-   * Provides Ajax page updating via jQuery $.ajax.
-   *
-   * This function is designed to improve developer experience by wrapping the
-   * initialization of {@link Drupal.Ajax} objects and storing all created
-   * objects in the {@link Drupal.ajax.instances} array.
-   *
-   * @example
-   * Drupal.behaviors.myCustomAJAXStuff = {
-   *   attach: function (context, settings) {
-   *
-   *     var ajaxSettings = {
-   *       url: 'my/url/path',
-   *       // If the old version of Drupal.ajax() needs to be used those
-   *       // properties can be added
-   *       base: 'myBase',
-   *       element: $(context).find('.someElement')
-   *     };
-   *
-   *     var myAjaxObject = Drupal.ajax(ajaxSettings);
-   *
-   *     // Declare a new Ajax command specifically for this Ajax object.
-   *     myAjaxObject.commands.insert = function (ajax, response, status) {
-   *       $('#my-wrapper').append(response.data);
-   *       alert('New content was appended to #my-wrapper');
-   *     };
-   *
-   *     // This command will remove this Ajax object from the page.
-   *     myAjaxObject.commands.destroyObject = function (ajax, response, status) {
-   *       Drupal.ajax.instances[this.instanceIndex] = null;
-   *     };
-   *
-   *     // Programmatically trigger the Ajax request.
-   *     myAjaxObject.execute();
-   *   }
-   * };
-   *
-   * @param {object} settings
-   *   The settings object passed to {@link Drupal.Ajax} constructor.
-   * @param {string} [settings.base]
-   *   Base is passed to {@link Drupal.Ajax} constructor as the 'base'
-   *   parameter.
-   * @param {HTMLElement} [settings.element]
-   *   Element parameter of {@link Drupal.Ajax} constructor, element on which
-   *   event listeners will be bound.
-   *
-   * @return {Drupal.Ajax}
-   *   The created Ajax object.
-   *
-   * @see Drupal.AjaxCommands
-   */
   Drupal.ajax = function (settings) {
     if (arguments.length !== 1) {
       throw new Error('Drupal.ajax() function must be called with one configuration object only');
     }
-    // Map those config keys to variables for the old Drupal.ajax function.
+
     var base = settings.base || false;
     var element = settings.element || false;
     delete settings.base;
     delete settings.element;
 
-    // By default do not display progress for ajax calls without an element.
     if (!settings.progress && !element) {
       settings.progress = false;
     }
@@ -254,88 +134,14 @@
     return ajax;
   };
 
-  /**
-   * Contains all created Ajax objects.
-   *
-   * @type {Array.<Drupal.Ajax|null>}
-   */
   Drupal.ajax.instances = [];
 
-  /**
-   * List all objects where the associated element is not in the DOM
-   *
-   * This method ignores {@link Drupal.Ajax} objects not bound to DOM elements
-   * when created with {@link Drupal.ajax}.
-   *
-   * @return {Array.<Drupal.Ajax>}
-   *   The list of expired {@link Drupal.Ajax} objects.
-   */
   Drupal.ajax.expired = function () {
     return Drupal.ajax.instances.filter(function (instance) {
       return instance && instance.element !== false && !document.body.contains(instance.element);
     });
   };
 
-  /**
-   * Settings for an Ajax object.
-   *
-   * @typedef {object} Drupal.Ajax~element_settings
-   *
-   * @prop {string} url
-   *   Target of the Ajax request.
-   * @prop {?string} [event]
-   *   Event bound to settings.element which will trigger the Ajax request.
-   * @prop {bool} [keypress=true]
-   *   Triggers a request on keypress events.
-   * @prop {?string} selector
-   *   jQuery selector targeting the element to bind events to or used with
-   *   {@link Drupal.AjaxCommands}.
-   * @prop {string} [effect='none']
-   *   Name of the jQuery method to use for displaying new Ajax content.
-   * @prop {string|number} [speed='none']
-   *   Speed with which to apply the effect.
-   * @prop {string} [method]
-   *   Name of the jQuery method used to insert new content in the targeted
-   *   element.
-   * @prop {object} [progress]
-   *   Settings for the display of a user-friendly loader.
-   * @prop {string} [progress.type='throbber']
-   *   Type of progress element, core provides `'bar'`, `'throbber'` and
-   *   `'fullscreen'`.
-   * @prop {string} [progress.message=Drupal.t('Please wait...')]
-   *   Custom message to be used with the bar indicator.
-   * @prop {object} [submit]
-   *   Extra data to be sent with the Ajax request.
-   * @prop {bool} [submit.js=true]
-   *   Allows the PHP side to know this comes from an Ajax request.
-   * @prop {object} [dialog]
-   *   Options for {@link Drupal.dialog}.
-   * @prop {string} [dialogType]
-   *   One of `'modal'` or `'dialog'`.
-   * @prop {string} [prevent]
-   *   List of events on which to stop default action and stop propagation.
-   */
-
-  /**
-   * Ajax constructor.
-   *
-   * The Ajax request returns an array of commands encoded in JSON, which is
-   * then executed to make any changes that are necessary to the page.
-   *
-   * Drupal uses this file to enhance form elements with `#ajax['url']` and
-   * `#ajax['wrapper']` properties. If set, this file will automatically be
-   * included to provide Ajax capabilities.
-   *
-   * @constructor
-   *
-   * @param {string} [base]
-   *   Base parameter of {@link Drupal.Ajax} constructor
-   * @param {HTMLElement} [element]
-   *   Element parameter of {@link Drupal.Ajax} constructor, element on which
-   *   event listeners will be bound.
-   * @param {Drupal.Ajax~element_settings} element_settings
-   *   Settings for this Ajax object.
-   */
   Drupal.Ajax = function (base, element, element_settings) {
     var defaults = {
       event: element ? 'mousedown' : null,
@@ -355,146 +161,60 @@
 
     $.extend(this, defaults, element_settings);
 
-    /**
-     * @type {Drupal.AjaxCommands}
-     */
     this.commands = new Drupal.AjaxCommands();
 
-    /**
-     * @type {bool|number}
-     */
     this.instanceIndex = false;
 
-    // @todo Remove this after refactoring the PHP code to:
-    //   - Call this 'selector'.
-    //   - Include the '#' for ID-based selectors.
-    //   - Support non-ID-based selectors.
     if (this.wrapper) {
-
-      /**
-       * @type {string}
-       */
       this.wrapper = '#' + this.wrapper;
     }
 
-    /**
-     * @type {HTMLElement}
-     */
     this.element = element;
 
-    /**
-     * @type {Drupal.Ajax~element_settings}
-     */
     this.element_settings = element_settings;
 
-    // If there isn't a form, jQuery.ajax() will be used instead, allowing us to
-    // bind Ajax to links as well.
     if (this.element && this.element.form) {
-
-      /**
-       * @type {jQuery}
-       */
       this.$form = $(this.element.form);
     }
 
-    // If no Ajax callback URL was given, use the link href or form action.
     if (!this.url) {
       var $element = $(this.element);
       if ($element.is('a')) {
         this.url = $element.attr('href');
-      }
-      else if (this.element && element.form) {
+      } else if (this.element && element.form) {
         this.url = this.$form.attr('action');
       }
     }
 
-    // Replacing 'nojs' with 'ajax' in the URL allows for an easy method to let
-    // the server detect when it needs to degrade gracefully.
-    // There are four scenarios to check for:
-    // 1. /nojs/
-    // 2. /nojs$ - The end of a URL string.
-    // 3. /nojs? - Followed by a query (e.g. path/nojs?destination=foobar).
-    // 4. /nojs# - Followed by a fragment (e.g.: path/nojs#myfragment).
     var originalUrl = this.url;
 
-    /**
-     * Processed Ajax URL.
-     *
-     * @type {string}
-     */
     this.url = this.url.replace(/\/nojs(\/|$|\?|#)/g, '/ajax$1');
-    // If the 'nojs' version of the URL is trusted, also trust the 'ajax'
-    // version.
+
     if (drupalSettings.ajaxTrustedUrl[originalUrl]) {
       drupalSettings.ajaxTrustedUrl[this.url] = true;
     }
 
-    // Set the options for the ajaxSubmit function.
-    // The 'this' variable will not persist inside of the options object.
     var ajax = this;
 
-    /**
-     * Options for the jQuery.ajax function.
-     *
-     * @name Drupal.Ajax#options
-     *
-     * @type {object}
-     *
-     * @prop {string} url
-     *   Ajax URL to be called.
-     * @prop {object} data
-     *   Ajax payload.
-     * @prop {function} beforeSerialize
-     *   Implement jQuery beforeSerialize function to call
-     *   {@link Drupal.Ajax#beforeSerialize}.
-     * @prop {function} beforeSubmit
-     *   Implement jQuery beforeSubmit function to call
-     *   {@link Drupal.Ajax#beforeSubmit}.
-     * @prop {function} beforeSend
-     *   Implement jQuery beforeSend function to call
-     *   {@link Drupal.Ajax#beforeSend}.
-     * @prop {function} success
-     *   Implement jQuery success function to call
-     *   {@link Drupal.Ajax#success}.
-     * @prop {function} complete
-     *   Implement jQuery success function to clean up ajax state and trigger an
-     *   error if needed.
-     * @prop {string} dataType='json'
-     *   Type of the response expected.
-     * @prop {string} type='POST'
-     *   HTTP method to use for the Ajax request.
-     */
     ajax.options = {
       url: ajax.url,
       data: ajax.submit,
-      beforeSerialize: function (element_settings, options) {
+      beforeSerialize: function beforeSerialize(element_settings, options) {
         return ajax.beforeSerialize(element_settings, options);
       },
-      beforeSubmit: function (form_values, element_settings, options) {
+      beforeSubmit: function beforeSubmit(form_values, element_settings, options) {
         ajax.ajaxing = true;
         return ajax.beforeSubmit(form_values, element_settings, options);
       },
-      beforeSend: function (xmlhttprequest, options) {
+      beforeSend: function beforeSend(xmlhttprequest, options) {
         ajax.ajaxing = true;
         return ajax.beforeSend(xmlhttprequest, options);
       },
-      success: function (response, status, xmlhttprequest) {
-        // Sanity check for browser support (object expected).
-        // When using iFrame uploads, responses must be returned as a string.
+      success: function success(response, status, xmlhttprequest) {
         if (typeof response === 'string') {
           response = $.parseJSON(response);
         }
 
-        // Prior to invoking the response's commands, verify that they can be
-        // trusted by checking for a response header. See
-        // \Drupal\Core\EventSubscriber\AjaxResponseSubscriber for details.
-        // - Empty responses are harmless so can bypass verification. This
-        //   avoids an alert message for server-generated no-op responses that
-        //   skip Ajax rendering.
-        // - Ajax objects with trusted URLs (e.g., ones defined server-side via
-        //   #ajax) can bypass header verification. This is especially useful
-        //   for Ajax with multipart forms. Because IFRAME transport is used,
-        //   the response headers cannot be accessed for verification.
         if (response !== null && !drupalSettings.ajaxTrustedUrl[ajax.url]) {
           if (xmlhttprequest.getResponseHeader('X-Drupal-Ajax-Token') !== '1') {
             var customMessage = Drupal.t('The response failed verification so will not be processed.');
@@ -504,7 +224,7 @@
 
         return ajax.success(response, status);
       },
-      complete: function (xmlhttprequest, status) {
+      complete: function complete(xmlhttprequest, status) {
         ajax.ajaxing = false;
         if (status === 'error' || status === 'parsererror') {
           return ajax.error(xmlhttprequest, ajax.url);
@@ -518,288 +238,129 @@
       ajax.options.data.dialogOptions = element_settings.dialog;
     }
 
-    // Ensure that we have a valid URL by adding ? when no query parameter is
-    // yet available, otherwise append using &.
     if (ajax.options.url.indexOf('?') === -1) {
       ajax.options.url += '?';
-    }
-    else {
+    } else {
       ajax.options.url += '&';
     }
     ajax.options.url += Drupal.ajax.WRAPPER_FORMAT + '=drupal_' + (element_settings.dialogType || 'ajax');
 
-    // Bind the ajaxSubmit function to the element event.
     $(ajax.element).on(element_settings.event, function (event) {
       if (!drupalSettings.ajaxTrustedUrl[ajax.url] && !Drupal.url.isLocal(ajax.url)) {
-        throw new Error(Drupal.t('The callback URL is not local and not trusted: !url', {'!url': ajax.url}));
+        throw new Error(Drupal.t('The callback URL is not local and not trusted: !url', { '!url': ajax.url }));
       }
       return ajax.eventResponse(this, event);
     });
 
-    // If necessary, enable keyboard submission so that Ajax behaviors
-    // can be triggered through keyboard input as well as e.g. a mousedown
-    // action.
     if (element_settings.keypress) {
       $(ajax.element).on('keypress', function (event) {
         return ajax.keypressResponse(this, event);
       });
     }
 
-    // If necessary, prevent the browser default action of an additional event.
-    // For example, prevent the browser default action of a click, even if the
-    // Ajax behavior binds to mousedown.
     if (element_settings.prevent) {
       $(ajax.element).on(element_settings.prevent, false);
     }
   };
 
-  /**
-   * URL query attribute to indicate the wrapper used to render a request.
-   *
-   * The wrapper format determines how the HTML is wrapped, for example in a
-   * modal dialog.
-   *
-   * @const {string}
-   *
-   * @default
-   */
   Drupal.ajax.WRAPPER_FORMAT = '_wrapper_format';
 
-  /**
-   * Request parameter to indicate that a request is a Drupal Ajax request.
-   *
-   * @const {string}
-   *
-   * @default
-   */
   Drupal.Ajax.AJAX_REQUEST_PARAMETER = '_drupal_ajax';
 
-  /**
-   * Execute the ajax request.
-   *
-   * Allows developers to execute an Ajax request manually without specifying
-   * an event to respond to.
-   *
-   * @return {object}
-   *   Returns the jQuery.Deferred object underlying the Ajax request. If
-   *   pre-serialization fails, the Deferred will be returned in the rejected
-   *   state.
-   */
   Drupal.Ajax.prototype.execute = function () {
-    // Do not perform another ajax command if one is already in progress.
     if (this.ajaxing) {
       return;
     }
 
     try {
       this.beforeSerialize(this.element, this.options);
-      // Return the jqXHR so that external code can hook into the Deferred API.
+
       return $.ajax(this.options);
-    }
-    catch (e) {
-      // Unset the ajax.ajaxing flag here because it won't be unset during
-      // the complete response.
+    } catch (e) {
       this.ajaxing = false;
       window.alert('An error occurred while attempting to process ' + this.options.url + ': ' + e.message);
-      // For consistency, return a rejected Deferred (i.e., jqXHR's superclass)
-      // so that calling code can take appropriate action.
+
       return $.Deferred().reject();
     }
   };
 
-  /**
-   * Handle a key press.
-   *
-   * The Ajax object will, if instructed, bind to a key press response. This
-   * will test to see if the key press is valid to trigger this event and
-   * if it is, trigger it for us and prevent other keypresses from triggering.
-   * In this case we're handling RETURN and SPACEBAR keypresses (event codes 13
-   * and 32. RETURN is often used to submit a form when in a textfield, and
-   * SPACE is often used to activate an element without submitting.
-   *
-   * @param {HTMLElement} element
-   *   Element the event was triggered on.
-   * @param {jQuery.Event} event
-   *   Triggered event.
-   */
   Drupal.Ajax.prototype.keypressResponse = function (element, event) {
-    // Create a synonym for this to reduce code confusion.
     var ajax = this;
 
-    // Detect enter key and space bar and allow the standard response for them,
-    // except for form elements of type 'text', 'tel', 'number' and 'textarea',
-    // where the spacebar activation causes inappropriate activation if
-    // #ajax['keypress'] is TRUE. On a text-type widget a space should always
-    // be a space.
-    if (event.which === 13 || (event.which === 32 && element.type !== 'text' &&
-      element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number')) {
+    if (event.which === 13 || event.which === 32 && element.type !== 'text' && element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number') {
       event.preventDefault();
       event.stopPropagation();
       $(ajax.element_settings.element).trigger(ajax.element_settings.event);
     }
   };
 
-  /**
-   * Handle an event that triggers an Ajax response.
-   *
-   * When an event that triggers an Ajax response happens, this method will
-   * perform the actual Ajax call. It is bound to the event using
-   * bind() in the constructor, and it uses the options specified on the
-   * Ajax object.
-   *
-   * @param {HTMLElement} element
-   *   Element the event was triggered on.
-   * @param {jQuery.Event} event
-   *   Triggered event.
-   */
   Drupal.Ajax.prototype.eventResponse = function (element, event) {
     event.preventDefault();
     event.stopPropagation();
 
-    // Create a synonym for this to reduce code confusion.
     var ajax = this;
 
-    // Do not perform another Ajax command if one is already in progress.
     if (ajax.ajaxing) {
       return;
     }
 
     try {
       if (ajax.$form) {
-        // If setClick is set, we must set this to ensure that the button's
-        // value is passed.
         if (ajax.setClick) {
-          // Mark the clicked button. 'form.clk' is a special variable for
-          // ajaxSubmit that tells the system which element got clicked to
-          // trigger the submit. Without it there would be no 'op' or
-          // equivalent.
           element.form.clk = element;
         }
 
         ajax.$form.ajaxSubmit(ajax.options);
-      }
-      else {
+      } else {
         ajax.beforeSerialize(ajax.element, ajax.options);
         $.ajax(ajax.options);
       }
-    }
-    catch (e) {
-      // Unset the ajax.ajaxing flag here because it won't be unset during
-      // the complete response.
+    } catch (e) {
       ajax.ajaxing = false;
       window.alert('An error occurred while attempting to process ' + ajax.options.url + ': ' + e.message);
     }
   };
 
-  /**
-   * Handler for the form serialization.
-   *
-   * Runs before the beforeSend() handler (see below), and unlike that one, runs
-   * before field data is collected.
-   *
-   * @param {object} [element]
-   *   Ajax object's `element_settings`.
-   * @param {object} options
-   *   jQuery.ajax options.
-   */
   Drupal.Ajax.prototype.beforeSerialize = function (element, options) {
-    // Allow detaching behaviors to update field values before collecting them.
-    // This is only needed when field values are added to the POST data, so only
-    // when there is a form such that this.$form.ajaxSubmit() is used instead of
-    // $.ajax(). When there is no form and $.ajax() is used, beforeSerialize()
-    // isn't called, but don't rely on that: explicitly check this.$form.
     if (this.$form) {
       var settings = this.settings || drupalSettings;
       Drupal.detachBehaviors(this.$form.get(0), settings, 'serialize');
     }
 
-    // Inform Drupal that this is an AJAX request.
     options.data[Drupal.Ajax.AJAX_REQUEST_PARAMETER] = 1;
 
-    // Allow Drupal to return new JavaScript and CSS files to load without
-    // returning the ones already loaded.
-    // @see \Drupal\Core\Theme\AjaxBasePageNegotiator
-    // @see \Drupal\Core\Asset\LibraryDependencyResolverInterface::getMinimalRepresentativeSubset()
-    // @see system_js_settings_alter()
     var pageState = drupalSettings.ajaxPageState;
     options.data['ajax_page_state[theme]'] = pageState.theme;
     options.data['ajax_page_state[theme_token]'] = pageState.theme_token;
     options.data['ajax_page_state[libraries]'] = pageState.libraries;
   };
 
-  /**
-   * Modify form values prior to form submission.
-   *
-   * @param {Array.<object>} form_values
-   *   Processed form values.
-   * @param {jQuery} element
-   *   The form node as a jQuery object.
-   * @param {object} options
-   *   jQuery.ajax options.
-   */
-  Drupal.Ajax.prototype.beforeSubmit = function (form_values, element, options) {
-    // This function is left empty to make it simple to override for modules
-    // that wish to add functionality here.
-  };
+  Drupal.Ajax.prototype.beforeSubmit = function (form_values, element, options) {};
 
-  /**
-   * Prepare the Ajax request before it is sent.
-   *
-   * @param {XMLHttpRequest} xmlhttprequest
-   *   Native Ajax object.
-   * @param {object} options
-   *   jQuery.ajax options.
-   */
   Drupal.Ajax.prototype.beforeSend = function (xmlhttprequest, options) {
-    // For forms without file inputs, the jQuery Form plugin serializes the
-    // form values, and then calls jQuery's $.ajax() function, which invokes
-    // this handler. In this circumstance, options.extraData is never used. For
-    // forms with file inputs, the jQuery Form plugin uses the browser's normal
-    // form submission mechanism, but captures the response in a hidden IFRAME.
-    // In this circumstance, it calls this handler first, and then appends
-    // hidden fields to the form to submit the values in options.extraData.
-    // There is no simple way to know which submission mechanism will be used,
-    // so we add to extraData regardless, and allow it to be ignored in the
-    // former case.
     if (this.$form) {
       options.extraData = options.extraData || {};
 
-      // Let the server know when the IFRAME submission mechanism is used. The
-      // server can use this information to wrap the JSON response in a
-      // TEXTAREA, as per http://jquery.malsup.com/form/#file-upload.
       options.extraData.ajax_iframe_upload = '1';
 
-      // The triggering element is about to be disabled (see below), but if it
-      // contains a value (e.g., a checkbox, textfield, select, etc.), ensure
-      // that value is included in the submission. As per above, submissions
-      // that use $.ajax() are already serialized prior to the element being
-      // disabled, so this is only needed for IFRAME submissions.
       var v = $.fieldValue(this.element);
       if (v !== null) {
         options.extraData[this.element.name] = v;
       }
     }
 
-    // Disable the element that received the change to prevent user interface
-    // interaction while the Ajax request is in progress. ajax.ajaxing prevents
-    // the element from triggering a new request, but does not prevent the user
-    // from changing its value.
     $(this.element).prop('disabled', true);
 
     if (!this.progress || !this.progress.type) {
       return;
     }
 
-    // Insert progress indicator.
     var progressIndicatorMethod = 'setProgressIndicator' + this.progress.type.slice(0, 1).toUpperCase() + this.progress.type.slice(1).toLowerCase();
     if (progressIndicatorMethod in this && typeof this[progressIndicatorMethod] === 'function') {
       this[progressIndicatorMethod].call(this);
     }
   };
 
-  /**
-   * Sets the progress bar progress indicator.
-   */
   Drupal.Ajax.prototype.setProgressIndicatorBar = function () {
     var progressBar = new Drupal.ProgressBar('ajax-progress-' + this.element.id, $.noop, this.progress.method, $.noop);
     if (this.progress.message) {
@@ -813,9 +374,6 @@
     $(this.element).after(this.progress.element);
   };
 
-  /**
-   * Sets the throbber progress indicator.
-   */
   Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
     this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
     if (this.progress.message) {
@@ -824,24 +382,12 @@
     $(this.element).after(this.progress.element);
   };
 
-  /**
-   * Sets the fullscreen progress indicator.
-   */
   Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () {
     this.progress.element = $('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
     $('body').after(this.progress.element);
   };
 
-  /**
-   * Handler for the form redirection completion.
-   *
-   * @param {Array.<Drupal.AjaxCommands~commandDefinition>} response
-   *   Drupal Ajax response.
-   * @param {number} status
-   *   XMLHttpRequest status.
-   */
   Drupal.Ajax.prototype.success = function (response, status) {
-    // Remove the progress element.
     if (this.progress.element) {
       $(this.progress.element).remove();
     }
@@ -850,14 +396,8 @@
     }
     $(this.element).prop('disabled', false);
 
-    // Save element's ancestors tree so if the element is removed from the dom
-    // we can try to refocus one of its parents. Using addBack reverse the
-    // result array, meaning that index 0 is the highest parent in the hierarchy
-    // in this situation it is usually a <form> element.
     var elementParents = $(this.element).parents('[data-drupal-selector]').addBack().toArray();
 
-    // Track if any command is altering the focus so we can avoid changing the
-    // focus set by the Ajax command.
     var focusChanged = false;
     for (var i in response) {
       if (response.hasOwnProperty(i) && response[i].command && this.commands[response[i].command]) {
@@ -868,9 +408,6 @@
       }
     }
 
-    // If the focus hasn't be changed by the ajax commands, try to refocus the
-    // triggering element or one of its parents if that element does not exist
-    // anymore.
     if (!focusChanged && this.element && !$(this.element).data('disable-refocus')) {
       var target = false;
 
@@ -883,34 +420,14 @@
       }
     }
 
-    // Reattach behaviors, if they were detached in beforeSerialize(). The
-    // attachBehaviors() called on the new content from processing the response
-    // commands is not sufficient, because behaviors from the entire form need
-    // to be reattached.
     if (this.$form) {
       var settings = this.settings || drupalSettings;
       Drupal.attachBehaviors(this.$form.get(0), settings);
     }
 
-    // Remove any response-specific settings so they don't get used on the next
-    // call by mistake.
     this.settings = null;
   };
 
-  /**
-   * Build an effect object to apply an effect when adding new HTML.
-   *
-   * @param {object} response
-   *   Drupal Ajax response.
-   * @param {string} [response.effect]
-   *   Override the default value of {@link Drupal.Ajax#element_settings}.
-   * @param {string|number} [response.speed]
-   *   Override the default value of {@link Drupal.Ajax#element_settings}.
-   *
-   * @return {object}
-   *   Returns an object with `showEffect`, `hideEffect` and `showSpeed`
-   *   properties.
-   */
   Drupal.Ajax.prototype.getEffect = function (response) {
     var type = response.effect || this.effect;
     var speed = response.speed || this.speed;
@@ -920,13 +437,11 @@
       effect.showEffect = 'show';
       effect.hideEffect = 'hide';
       effect.showSpeed = '';
-    }
-    else if (type === 'fade') {
+    } else if (type === 'fade') {
       effect.showEffect = 'fadeIn';
       effect.hideEffect = 'fadeOut';
       effect.showSpeed = speed;
-    }
-    else {
+    } else {
       effect.showEffect = type + 'Toggle';
       effect.hideEffect = type + 'Toggle';
       effect.showSpeed = speed;
@@ -935,29 +450,18 @@
     return effect;
   };
 
-  /**
-   * Handler for the form redirection error.
-   *
-   * @param {object} xmlhttprequest
-   *   Native XMLHttpRequest object.
-   * @param {string} uri
-   *   Ajax Request URI.
-   * @param {string} [customMessage]
-   *   Extra message to print with the Ajax error.
-   */
   Drupal.Ajax.prototype.error = function (xmlhttprequest, uri, customMessage) {
-    // Remove the progress element.
     if (this.progress.element) {
       $(this.progress.element).remove();
     }
     if (this.progress.object) {
       this.progress.object.stopMonitoring();
     }
-    // Undo hide.
+
     $(this.wrapper).show();
-    // Re-enable the element.
+
     $(this.element).prop('disabled', false);
-    // Reattach behaviors, if they were detached in beforeSerialize().
+
     if (this.$form) {
       var settings = this.settings || drupalSettings;
       Drupal.attachBehaviors(this.$form.get(0), settings);
@@ -965,87 +469,21 @@
     throw new Drupal.AjaxError(xmlhttprequest, uri, customMessage);
   };
 
-  /**
-   * @typedef {object} Drupal.AjaxCommands~commandDefinition
-   *
-   * @prop {string} command
-   * @prop {string} [method]
-   * @prop {string} [selector]
-   * @prop {string} [data]
-   * @prop {object} [settings]
-   * @prop {bool} [asterisk]
-   * @prop {string} [text]
-   * @prop {string} [title]
-   * @prop {string} [url]
-   * @prop {object} [argument]
-   * @prop {string} [name]
-   * @prop {string} [value]
-   * @prop {string} [old]
-   * @prop {string} [new]
-   * @prop {bool} [merge]
-   * @prop {Array} [args]
-   *
-   * @see Drupal.AjaxCommands
-   */
-
-  /**
-   * Provide a series of commands that the client will perform.
-   *
-   * @constructor
-   */
   Drupal.AjaxCommands = function () {};
   Drupal.AjaxCommands.prototype = {
-
-    /**
-     * Command to insert new content into the DOM.
-     *
-     * @param {Drupal.Ajax} ajax
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.data
-     *   The data to use with the jQuery method.
-     * @param {string} [response.method]
-     *   The jQuery DOM manipulation method to be used.
-     * @param {string} [response.selector]
-     *   A optional jQuery selector string.
-     * @param {object} [response.settings]
-     *   An optional array of settings that will be used.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    insert: function (ajax, response, status) {
-      // Get information from the response. If it is not there, default to
-      // our presets.
+    insert: function insert(ajax, response, status) {
       var $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
       var method = response.method || ajax.method;
       var effect = ajax.getEffect(response);
       var settings;
 
-      // We don't know what response.data contains: it might be a string of text
-      // without HTML, so don't rely on jQuery correctly interpreting
-      // $(response.data) as new HTML rather than a CSS selector. Also, if
-      // response.data contains top-level text nodes, they get lost with either
-      // $(response.data) or $('<div></div>').replaceWith(response.data).
       var $new_content_wrapped = $('<div></div>').html(response.data);
       var $new_content = $new_content_wrapped.contents();
 
-      // For legacy reasons, the effects processing code assumes that
-      // $new_content consists of a single top-level element. Also, it has not
-      // been sufficiently tested whether attachBehaviors() can be successfully
-      // called with a context object that includes top-level text nodes.
-      // However, to give developers full control of the HTML appearing in the
-      // page, and to enable Ajax content to be inserted in places where <div>
-      // elements are not allowed (e.g., within <table>, <tr>, and <span>
-      // parents), we check if the new content satisfies the requirement
-      // of a single top-level element, and only use the container <div> created
-      // above when it doesn't. For more information, please see
-      // https://www.drupal.org/node/736066.
       if ($new_content.length !== 1 || $new_content.get(0).nodeType !== 1) {
         $new_content = $new_content_wrapped;
       }
 
-      // If removing content from the wrapper, detach behaviors first.
       switch (method) {
         case 'html':
         case 'replaceWith':
@@ -1056,73 +494,34 @@
           Drupal.detachBehaviors($wrapper.get(0), settings);
       }
 
-      // Add the new content to the page.
       $wrapper[method]($new_content);
 
-      // Immediately hide the new content if we're using any effects.
       if (effect.showEffect !== 'show') {
         $new_content.hide();
       }
 
-      // Determine which effect to use and what content will receive the
-      // effect, then show the new content.
       if ($new_content.find('.ajax-new-content').length > 0) {
         $new_content.find('.ajax-new-content').hide();
         $new_content.show();
         $new_content.find('.ajax-new-content')[effect.showEffect](effect.showSpeed);
-      }
-      else if (effect.showEffect !== 'show') {
+      } else if (effect.showEffect !== 'show') {
         $new_content[effect.showEffect](effect.showSpeed);
       }
 
-      // Attach all JavaScript behaviors to the new content, if it was
-      // successfully added to the page, this if statement allows
-      // `#ajax['wrapper']` to be optional.
       if ($new_content.parents('html').length > 0) {
-        // Apply any settings from the returned JSON if available.
         settings = response.settings || ajax.settings || drupalSettings;
         Drupal.attachBehaviors($new_content.get(0), settings);
       }
     },
 
-    /**
-     * Command to remove a chunk from the page.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.selector
-     *   A jQuery selector string.
-     * @param {object} [response.settings]
-     *   An optional array of settings that will be used.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    remove: function (ajax, response, status) {
+    remove: function remove(ajax, response, status) {
       var settings = response.settings || ajax.settings || drupalSettings;
       $(response.selector).each(function () {
         Drupal.detachBehaviors(this, settings);
-      })
-        .remove();
+      }).remove();
     },
 
-    /**
-     * Command to mark a chunk changed.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The JSON response object from the Ajax request.
-     * @param {string} response.selector
-     *   A jQuery selector string.
-     * @param {bool} [response.asterisk]
-     *   An optional CSS selector. If specified, an asterisk will be
-     *   appended to the HTML inside the provided selector.
-     * @param {number} [status]
-     *   The request status.
-     */
-    changed: function (ajax, response, status) {
+    changed: function changed(ajax, response, status) {
       var $element = $(response.selector);
       if (!$element.hasClass('ajax-changed')) {
         $element.addClass('ajax-changed');
@@ -1132,83 +531,23 @@
       }
     },
 
-    /**
-     * Command to provide an alert.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The JSON response from the Ajax request.
-     * @param {string} response.text
-     *   The text that will be displayed in an alert dialog.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    alert: function (ajax, response, status) {
+    alert: function alert(ajax, response, status) {
       window.alert(response.text, response.title);
     },
 
-    /**
-     * Command to set the window.location, redirecting the browser.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.url
-     *   The URL to redirect to.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    redirect: function (ajax, response, status) {
+    redirect: function redirect(ajax, response, status) {
       window.location = response.url;
     },
 
-    /**
-     * Command to provide the jQuery css() function.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.selector
-     *   A jQuery selector string.
-     * @param {object} response.argument
-     *   An array of key/value pairs to set in the CSS for the selector.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    css: function (ajax, response, status) {
+    css: function css(ajax, response, status) {
       $(response.selector).css(response.argument);
     },
 
-    /**
-     * Command to set the settings used for other commands in this response.
-     *
-     * This method will also remove expired `drupalSettings.ajax` settings.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {bool} response.merge
-     *   Determines whether the additional settings should be merged to the
-     *   global settings.
-     * @param {object} response.settings
-     *   Contains additional settings to add to the global settings.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    settings: function (ajax, response, status) {
+    settings: function settings(ajax, response, status) {
       var ajaxSettings = drupalSettings.ajax;
 
-      // Clean up drupalSettings.ajax.
       if (ajaxSettings) {
         Drupal.ajax.expired().forEach(function (instance) {
-          // If the Ajax object has been created through drupalSettings.ajax
-          // it will have a selector. When there is no selector the object
-          // has been initialized with a special class name picked up by the
-          // Ajax behavior.
 
           if (instance.selector) {
             var selector = instance.selector.replace('#', '');
@@ -1221,114 +560,31 @@
 
       if (response.merge) {
         $.extend(true, drupalSettings, response.settings);
-      }
-      else {
+      } else {
         ajax.settings = response.settings;
       }
     },
 
-    /**
-     * Command to attach data using jQuery's data API.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.name
-     *   The name or key (in the key value pair) of the data attached to this
-     *   selector.
-     * @param {string} response.selector
-     *   A jQuery selector string.
-     * @param {string|object} response.value
-     *   The value of to be attached.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    data: function (ajax, response, status) {
+    data: function data(ajax, response, status) {
       $(response.selector).data(response.name, response.value);
     },
 
-    /**
-     * Command to apply a jQuery method.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {Array} response.args
-     *   An array of arguments to the jQuery method, if any.
-     * @param {string} response.method
-     *   The jQuery method to invoke.
-     * @param {string} response.selector
-     *   A jQuery selector string.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    invoke: function (ajax, response, status) {
+    invoke: function invoke(ajax, response, status) {
       var $element = $(response.selector);
       $element[response.method].apply($element, response.args);
     },
 
-    /**
-     * Command to restripe a table.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.selector
-     *   A jQuery selector string.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    restripe: function (ajax, response, status) {
-      // :even and :odd are reversed because jQuery counts from 0 and
-      // we count from 1, so we're out of sync.
-      // Match immediate children of the parent element to allow nesting.
-      $(response.selector).find('> tbody > tr:visible, > tr:visible')
-        .removeClass('odd even')
-        .filter(':even').addClass('odd').end()
-        .filter(':odd').addClass('even');
+    restripe: function restripe(ajax, response, status) {
+      $(response.selector).find('> tbody > tr:visible, > tr:visible').removeClass('odd even').filter(':even').addClass('odd').end().filter(':odd').addClass('even');
     },
 
-    /**
-     * Command to update a form's build ID.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.old
-     *   The old form build ID.
-     * @param {string} response.new
-     *   The new form build ID.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    update_build_id: function (ajax, response, status) {
+    update_build_id: function update_build_id(ajax, response, status) {
       $('input[name="form_build_id"][value="' + response.old + '"]').val(response.new);
     },
 
-    /**
-     * Command to add css.
-     *
-     * Uses the proprietary addImport method if available as browsers which
-     * support that method ignore @import statements in dynamically added
-     * stylesheets.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.data
-     *   A string that contains the styles to be added.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     */
-    add_css: function (ajax, response, status) {
-      // Add the styles in the normal way.
+    add_css: function add_css(ajax, response, status) {
       $('head').prepend(response.data);
-      // Add imports in the styles using the addImport method if available.
+
       var match;
       var importMatch = /^@import url\("(.*)"\);$/igm;
       if (document.styleSheets[0].addImport && importMatch.test(response.data)) {
@@ -1340,5 +596,4 @@
       }
     }
   };
-
-})(jQuery, window, Drupal, drupalSettings);
+})(jQuery, window, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/announce.js b/core/misc/announce.es6.js
similarity index 100%
copy from core/misc/announce.js
copy to core/misc/announce.es6.js
diff --git a/core/misc/announce.js b/core/misc/announce.js
index acf850a641..a6766edb04 100644
--- a/core/misc/announce.js
+++ b/core/misc/announce.js
@@ -1,22 +1,8 @@
 /**
- * @file
- * Adds an HTML element and method to trigger audio UAs to read system messages.
- *
- * Use {@link Drupal.announce} to indicate to screen reader users that an
- * element on the page has changed state. For instance, if clicking a link
- * loads 10 more items into a list, one might announce the change like this.
- *
- * @example
- * $('#search-list')
- *   .on('itemInsert', function (event, data) {
- *     // Insert the new items.
- *     $(data.container.el).append(data.items.el);
- *     // Announce the change to the page contents.
- *     Drupal.announce(Drupal.t('@count items added to @container',
- *       {'@count': data.items.length, '@container': data.container.title}
- *     ));
- *   });
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/announce.es6.js
+* @preserve
+**/
 
 (function (Drupal, debounce) {
 
@@ -25,17 +11,8 @@
   var liveElement;
   var announcements = [];
 
-  /**
-   * Builds a div element with the aria-live attribute and add it to the DOM.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behavior for drupalAnnouce.
-   */
   Drupal.behaviors.drupalAnnounce = {
-    attach: function (context) {
-      // Create only one aria-live element.
+    attach: function attach(context) {
       if (!liveElement) {
         liveElement = document.createElement('div');
         liveElement.id = 'drupal-live-announce';
@@ -47,74 +24,40 @@
     }
   };
 
-  /**
-   * Concatenates announcements to a single string; appends to the live region.
-   */
   function announce() {
     var text = [];
     var priority = 'polite';
     var announcement;
 
-    // Create an array of announcement strings to be joined and appended to the
-    // aria live region.
     var il = announcements.length;
     for (var i = 0; i < il; i++) {
       announcement = announcements.pop();
       text.unshift(announcement.text);
-      // If any of the announcements has a priority of assertive then the group
-      // of joined announcements will have this priority.
+
       if (announcement.priority === 'assertive') {
         priority = 'assertive';
       }
     }
 
     if (text.length) {
-      // Clear the liveElement so that repeated strings will be read.
       liveElement.innerHTML = '';
-      // Set the busy state to true until the node changes are complete.
+
       liveElement.setAttribute('aria-busy', 'true');
-      // Set the priority to assertive, or default to polite.
+
       liveElement.setAttribute('aria-live', priority);
-      // Print the text to the live region. Text should be run through
-      // Drupal.t() before being passed to Drupal.announce().
+
       liveElement.innerHTML = text.join('\n');
-      // The live text area is updated. Allow the AT to announce the text.
+
       liveElement.setAttribute('aria-busy', 'false');
     }
   }
 
-  /**
-   * Triggers audio UAs to read the supplied text.
-   *
-   * The aria-live region will only read the text that currently populates its
-   * text node. Replacing text quickly in rapid calls to announce results in
-   * only the text from the most recent call to {@link Drupal.announce} being
-   * read. By wrapping the call to announce in a debounce function, we allow for
-   * time for multiple calls to {@link Drupal.announce} to queue up their
-   * messages. These messages are then joined and append to the aria-live region
-   * as one text node.
-   *
-   * @param {string} text
-   *   A string to be read by the UA.
-   * @param {string} [priority='polite']
-   *   A string to indicate the priority of the message. Can be either
-   *   'polite' or 'assertive'.
-   *
-   * @return {function}
-   *   The return of the call to debounce.
-   *
-   * @see http://www.w3.org/WAI/PF/aria-practices/#liveprops
-   */
   Drupal.announce = function (text, priority) {
-    // Save the text and priority into a closure variable. Multiple simultaneous
-    // announcements will be concatenated and read in sequence.
     announcements.push({
       text: text,
       priority: priority
     });
-    // Immediately invoke the function that debounce returns. 200 ms is right at
-    // the cusp where humans notice a pause, so we will wait
-    // at most this much time before the set of queued announcements is read.
-    return (debounce(announce, 200)());
+
+    return debounce(announce, 200)();
   };
-}(Drupal, Drupal.debounce));
+})(Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/misc/autocomplete.js b/core/misc/autocomplete.es6.js
similarity index 100%
copy from core/misc/autocomplete.js
copy to core/misc/autocomplete.es6.js
diff --git a/core/misc/autocomplete.js b/core/misc/autocomplete.js
index 5a1c156d0b..d5ee7f9a65 100644
--- a/core/misc/autocomplete.js
+++ b/core/misc/autocomplete.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Autocomplete based on jQuery UI.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/autocomplete.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
@@ -9,19 +10,7 @@
 
   var autocomplete;
 
-  /**
-   * Helper splitting terms from the autocomplete value.
-   *
-   * @function Drupal.autocomplete.splitValues
-   *
-   * @param {string} value
-   *   The value being entered by the user.
-   *
-   * @return {Array}
-   *   Array of values, split by comma.
-   */
   function autocompleteSplitValues(value) {
-    // We will match the value against comma-separated terms.
     var result = [];
     var quote = false;
     var current = '';
@@ -33,12 +22,10 @@
       if (character === '"') {
         current += character;
         quote = !quote;
-      }
-      else if (character === ',' && !quote) {
+      } else if (character === ',' && !quote) {
         result.push(current.trim());
         current = '';
-      }
-      else {
+      } else {
         current += character;
       }
     }
@@ -49,32 +36,10 @@
     return result;
   }
 
-  /**
-   * Returns the last value of an multi-value textfield.
-   *
-   * @function Drupal.autocomplete.extractLastTerm
-   *
-   * @param {string} terms
-   *   The value of the field.
-   *
-   * @return {string}
-   *   The last value of the input field.
-   */
   function extractLastTerm(terms) {
     return autocomplete.splitValues(terms).pop();
   }
 
-  /**
-   * The search handler is called before a search is performed.
-   *
-   * @function Drupal.autocomplete.options.search
-   *
-   * @param {object} event
-   *   The event triggered.
-   *
-   * @return {bool}
-   *   Whether to perform a search or not.
-   */
   function searchHandler(event) {
     var options = autocomplete.options;
 
@@ -83,22 +48,14 @@
     }
 
     var term = autocomplete.extractLastTerm(event.target.value);
-    // Abort search if the first character is in firstCharacterBlacklist.
+
     if (term.length > 0 && options.firstCharacterBlacklist.indexOf(term[0]) !== -1) {
       return false;
     }
-    // Only search when the term is at least the minimum length.
+
     return term.length >= options.minLength;
   }
 
-  /**
-   * JQuery UI autocomplete source callback.
-   *
-   * @param {object} request
-   *   The request object.
-   * @param {function} response
-   *   The function to call with the response.
-   */
   function sourceData(request, response) {
     var elementId = this.element.attr('id');
 
@@ -106,13 +63,6 @@
       autocomplete.cache[elementId] = {};
     }
 
-    /**
-     * Filter through the suggestions removing all terms already tagged and
-     * display the available terms to the user.
-     *
-     * @param {object} suggestions
-     *   Suggestions returned by the server.
-     */
     function showSuggestions(suggestions) {
       var tagged = autocomplete.splitValues(request.term);
       var il = tagged.length;
@@ -125,113 +75,58 @@
       response(suggestions);
     }
 
-    /**
-     * Transforms the data object into an array and update autocomplete results.
-     *
-     * @param {object} data
-     *   The data sent back from the server.
-     */
     function sourceCallbackHandler(data) {
       autocomplete.cache[elementId][term] = data;
 
-      // Send the new string array of terms to the jQuery UI list.
       showSuggestions(data);
     }
 
-    // Get the desired term and construct the autocomplete URL for it.
     var term = autocomplete.extractLastTerm(request.term);
 
-    // Check if the term is already cached.
     if (autocomplete.cache[elementId].hasOwnProperty(term)) {
       showSuggestions(autocomplete.cache[elementId][term]);
-    }
-    else {
-      var options = $.extend({success: sourceCallbackHandler, data: {q: term}}, autocomplete.ajax);
+    } else {
+      var options = $.extend({ success: sourceCallbackHandler, data: { q: term } }, autocomplete.ajax);
       $.ajax(this.element.attr('data-autocomplete-path'), options);
     }
   }
 
-  /**
-   * Handles an autocompletefocus event.
-   *
-   * @return {bool}
-   *   Always returns false.
-   */
   function focusHandler() {
     return false;
   }
 
-  /**
-   * Handles an autocompleteselect event.
-   *
-   * @param {jQuery.Event} event
-   *   The event triggered.
-   * @param {object} ui
-   *   The jQuery UI settings object.
-   *
-   * @return {bool}
-   *   Returns false to indicate the event status.
-   */
   function selectHandler(event, ui) {
     var terms = autocomplete.splitValues(event.target.value);
-    // Remove the current input.
+
     terms.pop();
-    // Add the selected item.
+
     if (ui.item.value.search(',') > 0) {
       terms.push('"' + ui.item.value + '"');
-    }
-    else {
+    } else {
       terms.push(ui.item.value);
     }
     event.target.value = terms.join(', ');
-    // Return false to tell jQuery UI that we've filled in the value already.
+
     return false;
   }
 
-  /**
-   * Override jQuery UI _renderItem function to output HTML by default.
-   *
-   * @param {jQuery} ul
-   *   jQuery collection of the ul element.
-   * @param {object} item
-   *   The list item to append.
-   *
-   * @return {jQuery}
-   *   jQuery collection of the ul element.
-   */
   function renderItem(ul, item) {
-    return $('<li>')
-      .append($('<a>').html(item.label))
-      .appendTo(ul);
+    return $('<li>').append($('<a>').html(item.label)).appendTo(ul);
   }
 
-  /**
-   * Attaches the autocomplete behavior to all required fields.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the autocomplete behaviors.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches the autocomplete behaviors.
-   */
   Drupal.behaviors.autocomplete = {
-    attach: function (context) {
-      // Act on textfields with the "form-autocomplete" class.
+    attach: function attach(context) {
       var $autocomplete = $(context).find('input.form-autocomplete').once('autocomplete');
       if ($autocomplete.length) {
-        // Allow options to be overriden per instance.
         var blacklist = $autocomplete.attr('data-autocomplete-first-character-blacklist');
         $.extend(autocomplete.options, {
-          firstCharacterBlacklist: (blacklist) ? blacklist : ''
+          firstCharacterBlacklist: blacklist ? blacklist : ''
+        });
+
+        $autocomplete.autocomplete(autocomplete.options).each(function () {
+          $(this).data('ui-autocomplete')._renderItem = autocomplete.options.renderItem;
         });
-        // Use jQuery UI Autocomplete on the textfield.
-        $autocomplete.autocomplete(autocomplete.options)
-          .each(function () {
-            $(this).data('ui-autocomplete')._renderItem = autocomplete.options.renderItem;
-          });
 
-        // Use CompositionEvent to handle IME inputs. It requests remote server on "compositionend" event only.
         $autocomplete.on('compositionstart.autocomplete', function () {
           autocomplete.options.isComposing = true;
         });
@@ -240,32 +135,19 @@
         });
       }
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
-        $(context).find('input.form-autocomplete')
-          .removeOnce('autocomplete')
-          .autocomplete('destroy');
+        $(context).find('input.form-autocomplete').removeOnce('autocomplete').autocomplete('destroy');
       }
     }
   };
 
-  /**
-   * Autocomplete object implementation.
-   *
-   * @namespace Drupal.autocomplete
-   */
   autocomplete = {
     cache: {},
-    // Exposes options to allow overriding by contrib.
+
     splitValues: autocompleteSplitValues,
     extractLastTerm: extractLastTerm,
-    // jQuery UI autocomplete options.
 
-    /**
-     * JQuery UI option object.
-     *
-     * @name Drupal.autocomplete.options
-     */
     options: {
       source: sourceData,
       focus: focusHandler,
@@ -273,9 +155,9 @@
       select: selectHandler,
       renderItem: renderItem,
       minLength: 1,
-      // Custom options, used by Drupal.autocomplete.
+
       firstCharacterBlacklist: '',
-      // Custom options, indicate IME usage status.
+
       isComposing: false
     },
     ajax: {
@@ -284,5 +166,4 @@
   };
 
   Drupal.autocomplete = autocomplete;
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/batch.js b/core/misc/batch.es6.js
similarity index 100%
copy from core/misc/batch.js
copy to core/misc/batch.es6.js
diff --git a/core/misc/batch.js b/core/misc/batch.js
index 411badba42..c8ecb96117 100644
--- a/core/misc/batch.js
+++ b/core/misc/batch.js
@@ -1,24 +1,19 @@
 /**
- * @file
- * Drupal's batch API.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/batch.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Attaches the batch behavior to progress bars.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.batch = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var batch = settings.batch;
       var $progress = $('[data-drupal-progress]').once('batch');
       var progressBar;
 
-      // Success: redirect to the summary.
       function updateCallback(progress, status, pb) {
         if (progress === '100') {
           pb.stopMonitoring();
@@ -35,12 +30,11 @@
         progressBar = new Drupal.ProgressBar('updateprogress', updateCallback, 'POST', errorCallback);
         progressBar.setProgress(-1, batch.initMessage);
         progressBar.startMonitoring(batch.uri + '&op=do', 10);
-        // Remove HTML from no-js progress bar.
+
         $progress.empty();
-        // Append the JS progressbar element.
+
         $progress.append(progressBar.element);
       }
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/collapse.js b/core/misc/collapse.es6.js
similarity index 100%
copy from core/misc/collapse.js
copy to core/misc/collapse.es6.js
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 767325ec1a..6f3124404b 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -1,133 +1,74 @@
 /**
- * @file
- * Polyfill for HTML5 details elements.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/collapse.es6.js
+* @preserve
+**/
 
 (function ($, Modernizr, Drupal) {
 
   'use strict';
 
-  /**
-   * The collapsible details object represents a single details element.
-   *
-   * @constructor Drupal.CollapsibleDetails
-   *
-   * @param {HTMLElement} node
-   *   The details element.
-   */
   function CollapsibleDetails(node) {
     this.$node = $(node);
     this.$node.data('details', this);
-    // Expand details if there are errors inside, or if it contains an
-    // element that is targeted by the URI fragment identifier.
+
     var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
     if (this.$node.find('.error' + anchor).length) {
       this.$node.attr('open', true);
     }
-    // Initialize and setup the summary,
+
     this.setupSummary();
-    // Initialize and setup the legend.
+
     this.setupLegend();
   }
 
-  $.extend(CollapsibleDetails, /** @lends Drupal.CollapsibleDetails */{
-
-    /**
-     * Holds references to instantiated CollapsibleDetails objects.
-     *
-     * @type {Array.<Drupal.CollapsibleDetails>}
-     */
+  $.extend(CollapsibleDetails, {
     instances: []
   });
 
-  $.extend(CollapsibleDetails.prototype, /** @lends Drupal.CollapsibleDetails# */{
-
-    /**
-     * Initialize and setup summary events and markup.
-     *
-     * @fires event:summaryUpdated
-     *
-     * @listens event:summaryUpdated
-     */
-    setupSummary: function () {
+  $.extend(CollapsibleDetails.prototype, {
+    setupSummary: function setupSummary() {
       this.$summary = $('<span class="summary"></span>');
-      this.$node
-        .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
-        .trigger('summaryUpdated');
+      this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated');
     },
 
-    /**
-     * Initialize and setup legend markup.
-     */
-    setupLegend: function () {
-      // Turn the summary into a clickable link.
+    setupLegend: function setupLegend() {
       var $legend = this.$node.find('> summary');
 
-      $('<span class="details-summary-prefix visually-hidden"></span>')
-        .append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))
-        .prependTo($legend)
-        .after(document.createTextNode(' '));
+      $('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($legend).after(document.createTextNode(' '));
 
-      // .wrapInner() does not retain bound events.
-      $('<a class="details-title"></a>')
-        .attr('href', '#' + this.$node.attr('id'))
-        .prepend($legend.contents())
-        .appendTo($legend);
+      $('<a class="details-title"></a>').attr('href', '#' + this.$node.attr('id')).prepend($legend.contents()).appendTo($legend);
 
-      $legend
-        .append(this.$summary)
-        .on('click', $.proxy(this.onLegendClick, this));
+      $legend.append(this.$summary).on('click', $.proxy(this.onLegendClick, this));
     },
 
-    /**
-     * Handle legend clicks.
-     *
-     * @param {jQuery.Event} e
-     *   The event triggered.
-     */
-    onLegendClick: function (e) {
+    onLegendClick: function onLegendClick(e) {
       this.toggle();
       e.preventDefault();
     },
 
-    /**
-     * Update summary.
-     */
-    onSummaryUpdated: function () {
+    onSummaryUpdated: function onSummaryUpdated() {
       var text = $.trim(this.$node.drupalGetSummary());
       this.$summary.html(text ? ' (' + text + ')' : '');
     },
 
-    /**
-     * Toggle the visibility of a details element using smooth animations.
-     */
-    toggle: function () {
+    toggle: function toggle() {
       var isOpen = !!this.$node.attr('open');
       var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
       if (isOpen) {
         $summaryPrefix.html(Drupal.t('Show'));
-      }
-      else {
+      } else {
         $summaryPrefix.html(Drupal.t('Hide'));
       }
-      // Delay setting the attribute to emulate chrome behavior and make
-      // details-aria.js work as expected with this polyfill.
+
       setTimeout(function () {
         this.$node.attr('open', !isOpen);
       }.bind(this), 0);
     }
   });
 
-  /**
-   * Polyfill HTML5 details element.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for the details element.
-   */
   Drupal.behaviors.collapse = {
-    attach: function (context) {
+    attach: function attach(context) {
       if (Modernizr.details) {
         return;
       }
@@ -140,7 +81,5 @@
     }
   };
 
-  // Expose constructor in the public space.
   Drupal.CollapsibleDetails = CollapsibleDetails;
-
-})(jQuery, Modernizr, Drupal);
+})(jQuery, Modernizr, Drupal);
\ No newline at end of file
diff --git a/core/misc/date.js b/core/misc/date.es6.js
similarity index 100%
copy from core/misc/date.js
copy to core/misc/date.es6.js
diff --git a/core/misc/date.js b/core/misc/date.js
index 8b6b71cb1d..6b9b215c17 100644
--- a/core/misc/date.js
+++ b/core/misc/date.js
@@ -1,28 +1,17 @@
 /**
- * @file
- * Polyfill for HTML5 date input.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/date.es6.js
+* @preserve
+**/
 
 (function ($, Modernizr, Drupal) {
 
   'use strict';
 
-  /**
-   * Attach datepicker fallback on date elements.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behavior. Accepts in `settings.date` an object listing
-   *   elements to process, keyed by the HTML ID of the form element containing
-   *   the human-readable value. Each element is an datepicker settings object.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detach the behavior destroying datepickers on effected elements.
-   */
   Drupal.behaviors.date = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $context = $(context);
-      // Skip if date are supported by the browser.
+
       if (Modernizr.inputtypes.date === true) {
         return;
       }
@@ -30,13 +19,9 @@
         var $input = $(this);
         var datepickerSettings = {};
         var dateFormat = $input.data('drupalDateFormat');
-        // The date format is saved in PHP style, we need to convert to jQuery
-        // datepicker.
-        datepickerSettings.dateFormat = dateFormat
-          .replace('Y', 'yy')
-          .replace('m', 'mm')
-          .replace('d', 'dd');
-        // Add min and max date if set on the input.
+
+        datepickerSettings.dateFormat = dateFormat.replace('Y', 'yy').replace('m', 'mm').replace('d', 'dd');
+
         if ($input.attr('min')) {
           datepickerSettings.minDate = $input.attr('min');
         }
@@ -46,11 +31,10 @@
         $input.datepicker(datepickerSettings);
       });
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         $(context).find('input[data-drupal-date-format]').findOnce('datePicker').datepicker('destroy');
       }
     }
   };
-
-})(jQuery, Modernizr, Drupal);
+})(jQuery, Modernizr, Drupal);
\ No newline at end of file
diff --git a/core/misc/debounce.js b/core/misc/debounce.es6.js
similarity index 100%
copy from core/misc/debounce.js
copy to core/misc/debounce.es6.js
diff --git a/core/misc/debounce.js b/core/misc/debounce.js
index 995e3d7135..4d6f3360b5 100644
--- a/core/misc/debounce.js
+++ b/core/misc/debounce.js
@@ -1,31 +1,9 @@
 /**
- * @file
- * Adapted from underscore.js with the addition Drupal namespace.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/debounce.es6.js
+* @preserve
+**/
 
-/**
- * Limits the invocations of a function in a given time frame.
- *
- * The debounce function wrapper should be used sparingly. One clear use case
- * is limiting the invocation of a callback attached to the window resize event.
- *
- * Before using the debounce function wrapper, consider first whether the
- * callback could be attached to an event that fires less frequently or if the
- * function can be written in such a way that it is only invoked under specific
- * conditions.
- *
- * @param {function} func
- *   The function to be invoked.
- * @param {number} wait
- *   The time period within which the callback function should only be
- *   invoked once. For example if the wait period is 250ms, then the callback
- *   will only be called at most 4 times per second.
- * @param {bool} immediate
- *   Whether we wait at the beginning or end to execute the function.
- *
- * @return {function}
- *   The debounced function.
- */
 Drupal.debounce = function (func, wait, immediate) {
 
   'use strict';
@@ -35,7 +13,7 @@ Drupal.debounce = function (func, wait, immediate) {
   return function () {
     var context = this;
     var args = arguments;
-    var later = function () {
+    var later = function later() {
       timeout = null;
       if (!immediate) {
         result = func.apply(context, args);
@@ -49,4 +27,4 @@ Drupal.debounce = function (func, wait, immediate) {
     }
     return result;
   };
-};
+};
\ No newline at end of file
diff --git a/core/misc/details-aria.js b/core/misc/details-aria.es6.js
similarity index 100%
copy from core/misc/details-aria.js
copy to core/misc/details-aria.es6.js
diff --git a/core/misc/details-aria.js b/core/misc/details-aria.js
index d341422351..045ee897a7 100644
--- a/core/misc/details-aria.js
+++ b/core/misc/details-aria.js
@@ -1,19 +1,15 @@
 /**
- * @file
- * Add aria attribute handling for details and summary elements.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/details-aria.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Handles `aria-expanded` and `aria-pressed` attributes on details elements.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.detailsAria = {
-    attach: function () {
+    attach: function attach() {
       $('body').once('detailsAria').on('click.detailsAria', 'summary', function (event) {
         var $summary = $(event.currentTarget);
         var open = $(event.currentTarget.parentNode).attr('open') === 'open' ? 'false' : 'true';
@@ -25,5 +21,4 @@
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.es6.js
similarity index 100%
copy from core/misc/dialog/dialog.ajax.js
copy to core/misc/dialog/dialog.ajax.es6.js
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
index 3f1b0c2efd..e85e54aee2 100644
--- a/core/misc/dialog/dialog.ajax.js
+++ b/core/misc/dialog/dialog.ajax.js
@@ -1,74 +1,42 @@
 /**
- * @file
- * Extends the Drupal AJAX functionality to integrate the dialog API.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/dialog/dialog.ajax.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Initialize dialogs for Ajax purposes.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behaviors for dialog ajax functionality.
-   */
   Drupal.behaviors.dialog = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $context = $(context);
 
-      // Provide a known 'drupal-modal' DOM element for Drupal-based modal
-      // dialogs. Non-modal dialogs are responsible for creating their own
-      // elements, since there can be multiple non-modal dialogs at a time.
       if (!$('#drupal-modal').length) {
-        // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
-        // sit on top of dialogs. For more information see
-        // http://api.jqueryui.com/theming/stacking-elements/.
         $('<div id="drupal-modal" class="ui-front"/>').hide().appendTo('body');
       }
 
-      // Special behaviors specific when attaching content within a dialog.
-      // These behaviors usually fire after a validation error inside a dialog.
       var $dialog = $context.closest('.ui-dialog-content');
       if ($dialog.length) {
-        // Remove and replace the dialog buttons with those from the new form.
         if ($dialog.dialog('option', 'drupalAutoButtons')) {
-          // Trigger an event to detect/sync changes to buttons.
           $dialog.trigger('dialogButtonsChange');
         }
 
-        // Force focus on the modal when the behavior is run.
         $dialog.dialog('widget').trigger('focus');
       }
 
       var originalClose = settings.dialog.close;
-      // Overwrite the close method to remove the dialog on closing.
+
       settings.dialog.close = function (event) {
         originalClose.apply(settings.dialog, arguments);
         $(event.target).remove();
       };
     },
 
-    /**
-     * Scan a dialog for any primary buttons and move them to the button area.
-     *
-     * @param {jQuery} $dialog
-     *   An jQuery object containing the element that is the dialog target.
-     *
-     * @return {Array}
-     *   An array of buttons that need to be added to the button area.
-     */
-    prepareDialogButtons: function ($dialog) {
+    prepareDialogButtons: function prepareDialogButtons($dialog) {
       var buttons = [];
       var $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
       $buttons.each(function () {
-        // Hidden form buttons need special attention. For browser consistency,
-        // the button needs to be "visible" in order to have the enter key fire
-        // the form submit event. So instead of a simple "hide" or
-        // "display: none", we set its dimensions to zero.
-        // See http://mattsnider.com/how-forms-submit-when-pressing-enter/
         var $originalButton = $(this).css({
           display: 'block',
           width: 0,
@@ -80,13 +48,10 @@
         buttons.push({
           text: $originalButton.html() || $originalButton.attr('value'),
           class: $originalButton.attr('class'),
-          click: function (e) {
-            // If the original button is an anchor tag, triggering the "click"
-            // event will not simulate a click. Use the click method instead.
+          click: function click(e) {
             if ($originalButton.is('a')) {
               $originalButton[0].click();
-            }
-            else {
+            } else {
               $originalButton.trigger('mousedown').trigger('mouseup').trigger('click');
               e.preventDefault();
             }
@@ -97,80 +62,44 @@
     }
   };
 
-  /**
-   * Command to open a dialog.
-   *
-   * @param {Drupal.Ajax} ajax
-   *   The Drupal Ajax object.
-   * @param {object} response
-   *   Object holding the server response.
-   * @param {number} [status]
-   *   The HTTP status code.
-   *
-   * @return {bool|undefined}
-   *   Returns false if there was no selector property in the response object.
-   */
   Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
     if (!response.selector) {
       return false;
     }
     var $dialog = $(response.selector);
     if (!$dialog.length) {
-      // Create the element if needed.
       $dialog = $('<div id="' + response.selector.replace(/^#/, '') + '" class="ui-front"/>').appendTo('body');
     }
-    // Set up the wrapper, if there isn't one.
+
     if (!ajax.wrapper) {
       ajax.wrapper = $dialog.attr('id');
     }
 
-    // Use the ajax.js insert command to populate the dialog contents.
     response.command = 'insert';
     response.method = 'html';
     ajax.commands.insert(ajax, response, status);
 
-    // Move the buttons to the jQuery UI dialog buttons area.
     if (!response.dialogOptions.buttons) {
       response.dialogOptions.drupalAutoButtons = true;
       response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
     }
 
-    // Bind dialogButtonsChange.
     $dialog.on('dialogButtonsChange', function () {
       var buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
       $dialog.dialog('option', 'buttons', buttons);
     });
 
-    // Open the dialog itself.
     response.dialogOptions = response.dialogOptions || {};
     var dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
     if (response.dialogOptions.modal) {
       dialog.showModal();
-    }
-    else {
+    } else {
       dialog.show();
     }
 
-    // Add the standard Drupal class for buttons for style consistency.
     $dialog.parent().find('.ui-dialog-buttonset').addClass('form-actions');
   };
 
-  /**
-   * Command to close a dialog.
-   *
-   * If no selector is given, it defaults to trying to close the modal.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   The ajax object.
-   * @param {object} response
-   *   Object holding the server response.
-   * @param {string} response.selector
-   *   The selector of the dialog.
-   * @param {bool} response.persist
-   *   Whether to persist the dialog element or not.
-   * @param {number} [status]
-   *   The HTTP status code.
-   */
   Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
     var $dialog = $(response.selector);
     if ($dialog.length) {
@@ -180,28 +109,9 @@
       }
     }
 
-    // Unbind dialogButtonsChange.
     $dialog.off('dialogButtonsChange');
   };
 
-  /**
-   * Command to set a dialog property.
-   *
-   * JQuery UI specific way of setting dialog options.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   The Drupal Ajax object.
-   * @param {object} response
-   *   Object holding the server response.
-   * @param {string} response.selector
-   *   Selector for the dialog element.
-   * @param {string} response.optionsName
-   *   Name of a key to set.
-   * @param {string} response.optionValue
-   *   Value to set.
-   * @param {number} [status]
-   *   The HTTP status code.
-   */
   Drupal.AjaxCommands.prototype.setDialogOption = function (ajax, response, status) {
     var $dialog = $(response.selector);
     if ($dialog.length) {
@@ -209,18 +119,6 @@
     }
   };
 
-  /**
-   * Binds a listener on dialog creation to handle the cancel link.
-   *
-   * @param {jQuery.Event} e
-   *   The event triggered.
-   * @param {Drupal.dialog~dialogDefinition} dialog
-   *   The dialog instance.
-   * @param {jQuery} $element
-   *   The jQuery collection of the dialog element.
-   * @param {object} [settings]
-   *   Dialog settings.
-   */
   $(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
     $element.on('click.dialog', '.dialog-cancel', function (e) {
       dialog.close('cancel');
@@ -229,18 +127,7 @@
     });
   });
 
-  /**
-   * Removes all 'dialog' listeners.
-   *
-   * @param {jQuery.Event} e
-   *   The event triggered.
-   * @param {Drupal.dialog~dialogDefinition} dialog
-   *   The dialog instance.
-   * @param {jQuery} $element
-   *   jQuery collection of the dialog element.
-   */
   $(window).on('dialog:beforeclose', function (e, dialog, $element) {
     $element.off('.dialog');
   });
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.js b/core/misc/dialog/dialog.es6.js
similarity index 100%
copy from core/misc/dialog/dialog.js
copy to core/misc/dialog/dialog.es6.js
diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.es6.js
similarity index 100%
copy from core/misc/dialog/dialog.jquery-ui.js
copy to core/misc/dialog/dialog.jquery-ui.es6.js
diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.js
index 2526e30953..a123f26e69 100644
--- a/core/misc/dialog/dialog.jquery-ui.js
+++ b/core/misc/dialog/dialog.jquery-ui.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Adds default classes to buttons for styling purposes.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/dialog/dialog.jquery-ui.es6.js
+* @preserve
+**/
 
 (function ($) {
 
@@ -12,7 +13,7 @@
       buttonClass: 'button',
       buttonPrimaryClass: 'button--primary'
     },
-    _createButtons: function () {
+    _createButtons: function _createButtons() {
       var opts = this.options;
       var primaryIndex;
       var $buttons;
@@ -32,5 +33,4 @@
       }
     }
   });
-
-})(jQuery);
+})(jQuery);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.js b/core/misc/dialog/dialog.js
index ea1e52c8dc..ab2ceef804 100644
--- a/core/misc/dialog/dialog.js
+++ b/core/misc/dialog/dialog.js
@@ -1,85 +1,44 @@
 /**
- * @file
- * Dialog API inspired by HTML5 dialog element.
- *
- * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/dialog/dialog.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Default dialog options.
-   *
-   * @type {object}
-   *
-   * @prop {bool} [autoOpen=true]
-   * @prop {string} [dialogClass='']
-   * @prop {string} [buttonClass='button']
-   * @prop {string} [buttonPrimaryClass='button--primary']
-   * @prop {function} close
-   */
   drupalSettings.dialog = {
     autoOpen: true,
     dialogClass: '',
-    // Drupal-specific extensions: see dialog.jquery-ui.js.
+
     buttonClass: 'button',
     buttonPrimaryClass: 'button--primary',
-    // When using this API directly (when generating dialogs on the client
-    // side), you may want to override this method and do
-    // `jQuery(event.target).remove()` as well, to remove the dialog on
-    // closing.
-    close: function (event) {
+
+    close: function close(event) {
       Drupal.dialog(event.target).close();
       Drupal.detachBehaviors(event.target, null, 'unload');
     }
   };
 
-  /**
-   * @typedef {object} Drupal.dialog~dialogDefinition
-   *
-   * @prop {boolean} open
-   *   Is the dialog open or not.
-   * @prop {*} returnValue
-   *   Return value of the dialog.
-   * @prop {function} show
-   *   Method to display the dialog on the page.
-   * @prop {function} showModal
-   *   Method to display the dialog as a modal on the page.
-   * @prop {function} close
-   *   Method to hide the dialog from the page.
-   */
-
-  /**
-   * Polyfill HTML5 dialog element with jQueryUI.
-   *
-   * @param {HTMLElement} element
-   *   The element that holds the dialog.
-   * @param {object} options
-   *   jQuery UI options to be passed to the dialog.
-   *
-   * @return {Drupal.dialog~dialogDefinition}
-   *   The dialog instance.
-   */
   Drupal.dialog = function (element, options) {
     var undef;
     var $element = $(element);
     var dialog = {
       open: false,
       returnValue: undef,
-      show: function () {
-        openDialog({modal: false});
+      show: function show() {
+        openDialog({ modal: false });
       },
-      showModal: function () {
-        openDialog({modal: true});
+      showModal: function showModal() {
+        openDialog({ modal: true });
       },
       close: closeDialog
     };
 
     function openDialog(settings) {
       settings = $.extend({}, drupalSettings.dialog, options, settings);
-      // Trigger a global event to allow scripts to bind events to the dialog.
+
       $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
       $element.dialog(settings);
       dialog.open = true;
@@ -96,5 +55,4 @@
 
     return dialog;
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.es6.js
similarity index 100%
copy from core/misc/dialog/dialog.position.js
copy to core/misc/dialog/dialog.position.es6.js
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js
index e3c058f844..84ef175455 100644
--- a/core/misc/dialog/dialog.position.js
+++ b/core/misc/dialog/dialog.position.js
@@ -1,36 +1,15 @@
 /**
- * @file
- * Positioning extensions for dialogs.
- */
-
-/**
- * Triggers when content inside a dialog changes.
- *
- * @event dialogContentResize
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/dialog/dialog.position.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, debounce, displace) {
 
   'use strict';
 
-  // autoResize option will turn off resizable and draggable.
-  drupalSettings.dialog = $.extend({autoResize: true, maxHeight: '95%'}, drupalSettings.dialog);
+  drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
 
-  /**
-   * Resets the current options for positioning.
-   *
-   * This is used as a window resize and scroll callback to reposition the
-   * jQuery UI dialog. Although not a built-in jQuery UI option, this can
-   * be disabled by setting autoResize: false in the options array when creating
-   * a new {@link Drupal.dialog}.
-   *
-   * @function Drupal.dialog~resetSize
-   *
-   * @param {jQuery.Event} event
-   *   The event triggered.
-   *
-   * @fires event:dialogContentResize
-   */
   function resetSize(event) {
     var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
     var adjustedOptions = {};
@@ -42,12 +21,10 @@
       option = positionOptions[n];
       optionValue = event.data.settings[option];
       if (optionValue) {
-        // jQuery UI does not support percentages on heights, convert to pixels.
         if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
-          // Take offsets in account.
           windowHeight -= displace.offsets.top + displace.offsets.bottom;
           adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
-          // Don't force the dialog to be bigger vertically than needed.
+
           if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
             adjustedValue = 'auto';
           }
@@ -55,26 +32,13 @@
         }
       }
     }
-    // Offset the dialog center to be at the center of Drupal.displace.offsets.
+
     if (!event.data.settings.modal) {
       adjustedOptions = resetPosition(adjustedOptions);
     }
-    event.data.$element
-      .dialog('option', adjustedOptions)
-      .trigger('dialogContentResize');
+    event.data.$element.dialog('option', adjustedOptions).trigger('dialogContentResize');
   }
 
-  /**
-   * Position the dialog's center at the center of displace.offsets boundaries.
-   *
-   * @function Drupal.dialog~resetPosition
-   *
-   * @param {object} options
-   *   Options object.
-   *
-   * @return {object}
-   *   Altered options object.
-   */
   function resetPosition(options) {
     var offsets = displace.offsets;
     var left = offsets.left - offsets.right;
@@ -90,23 +54,18 @@
   }
 
   $(window).on({
-    'dialog:aftercreate': function (event, dialog, $element, settings) {
+    'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
       var autoResize = debounce(resetSize, 20);
-      var eventData = {settings: settings, $element: $element};
+      var eventData = { settings: settings, $element: $element };
       if (settings.autoResize === true || settings.autoResize === 'true') {
-        $element
-          .dialog('option', {resizable: false, draggable: false})
-          .dialog('widget').css('position', 'fixed');
-        $(window)
-          .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
-          .trigger('resize.dialogResize');
+        $element.dialog('option', { resizable: false, draggable: false }).dialog('widget').css('position', 'fixed');
+        $(window).on('resize.dialogResize scroll.dialogResize', eventData, autoResize).trigger('resize.dialogResize');
         $(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
       }
     },
-    'dialog:beforeclose': function (event, dialog, $element) {
+    'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
       $(window).off('.dialogResize');
       $(document).off('.dialogResize');
     }
   });
-
-})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
+})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
\ No newline at end of file
diff --git a/core/misc/displace.js b/core/misc/displace.es6.js
similarity index 100%
copy from core/misc/displace.js
copy to core/misc/displace.es6.js
diff --git a/core/misc/displace.js b/core/misc/displace.js
index 3e89c563ec..14f6d1134d 100644
--- a/core/misc/displace.js
+++ b/core/misc/displace.js
@@ -1,38 +1,13 @@
 /**
- * @file
- * Manages elements that can offset the size of the viewport.
- *
- * Measures and reports viewport offset dimensions from elements like the
- * toolbar that can potentially displace the positioning of other elements.
- */
-
-/**
- * @typedef {object} Drupal~displaceOffset
- *
- * @prop {number} top
- * @prop {number} left
- * @prop {number} right
- * @prop {number} bottom
- */
-
-/**
- * Triggers when layout of the page changes.
- *
- * This is used to position fixed element on the page during page resize and
- * Toolbar toggling.
- *
- * @event drupalViewportOffsetChange
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/displace.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, debounce) {
 
   'use strict';
 
-  /**
-   * @name Drupal.displace.offsets
-   *
-   * @type {Drupal~displaceOffset}
-   */
   var offsets = {
     top: 0,
     right: 0,
@@ -40,14 +15,8 @@
     left: 0
   };
 
-  /**
-   * Registers a resize handler on the window.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.drupalDisplace = {
-    attach: function () {
-      // Mark this behavior as processed on the first pass.
+    attach: function attach() {
       if (this.displaceProcessed) {
         return;
       }
@@ -57,24 +26,6 @@
     }
   };
 
-  /**
-   * Informs listeners of the current offset dimensions.
-   *
-   * @function Drupal.displace
-   *
-   * @prop {Drupal~displaceOffset} offsets
-   *
-   * @param {bool} [broadcast]
-   *   When true or undefined, causes the recalculated offsets values to be
-   *   broadcast to listeners.
-   *
-   * @return {Drupal~displaceOffset}
-   *   An object whose keys are the for sides an element -- top, right, bottom
-   *   and left. The value of each key is the viewport displacement distance for
-   *   that edge.
-   *
-   * @fires event:drupalViewportOffsetChange
-   */
   function displace(broadcast) {
     offsets = Drupal.displace.offsets = calculateOffsets();
     if (typeof broadcast === 'undefined' || broadcast) {
@@ -83,14 +34,6 @@
     return offsets;
   }
 
-  /**
-   * Determines the viewport offsets.
-   *
-   * @return {Drupal~displaceOffset}
-   *   An object whose keys are the for sides an element -- top, right, bottom
-   *   and left. The value of each key is the viewport displacement distance for
-   *   that edge.
-   */
   function calculateOffsets() {
     return {
       top: calculateOffset('top'),
@@ -100,88 +43,48 @@
     };
   }
 
-  /**
-   * Gets a specific edge's offset.
-   *
-   * Any element with the attribute data-offset-{edge} e.g. data-offset-top will
-   * be considered in the viewport offset calculations. If the attribute has a
-   * numeric value, that value will be used. If no value is provided, one will
-   * be calculated using the element's dimensions and placement.
-   *
-   * @function Drupal.displace.calculateOffset
-   *
-   * @param {string} edge
-   *   The name of the edge to calculate. Can be 'top', 'right',
-   *   'bottom' or 'left'.
-   *
-   * @return {number}
-   *   The viewport displacement distance for the requested edge.
-   */
   function calculateOffset(edge) {
     var edgeOffset = 0;
     var displacingElements = document.querySelectorAll('[data-offset-' + edge + ']');
     var n = displacingElements.length;
     for (var i = 0; i < n; i++) {
       var el = displacingElements[i];
-      // If the element is not visible, do consider its dimensions.
+
       if (el.style.display === 'none') {
         continue;
       }
-      // If the offset data attribute contains a displacing value, use it.
+
       var displacement = parseInt(el.getAttribute('data-offset-' + edge), 10);
-      // If the element's offset data attribute exits
-      // but is not a valid number then get the displacement
-      // dimensions directly from the element.
+
       if (isNaN(displacement)) {
         displacement = getRawOffset(el, edge);
       }
-      // If the displacement value is larger than the current value for this
-      // edge, use the displacement value.
+
       edgeOffset = Math.max(edgeOffset, displacement);
     }
 
     return edgeOffset;
   }
 
-  /**
-   * Calculates displacement for element based on its dimensions and placement.
-   *
-   * @param {HTMLElement} el
-   *   The jQuery element whose dimensions and placement will be measured.
-   *
-   * @param {string} edge
-   *   The name of the edge of the viewport that the element is associated
-   *   with.
-   *
-   * @return {number}
-   *   The viewport displacement distance for the requested edge.
-   */
   function getRawOffset(el, edge) {
     var $el = $(el);
     var documentElement = document.documentElement;
     var displacement = 0;
-    var horizontal = (edge === 'left' || edge === 'right');
-    // Get the offset of the element itself.
+    var horizontal = edge === 'left' || edge === 'right';
+
     var placement = $el.offset()[horizontal ? 'left' : 'top'];
-    // Subtract scroll distance from placement to get the distance
-    // to the edge of the viewport.
+
     placement -= window['scroll' + (horizontal ? 'X' : 'Y')] || document.documentElement['scroll' + (horizontal ? 'Left' : 'Top')] || 0;
-    // Find the displacement value according to the edge.
+
     switch (edge) {
-      // Left and top elements displace as a sum of their own offset value
-      // plus their size.
       case 'top':
-        // Total displacement is the sum of the elements placement and size.
         displacement = placement + $el.outerHeight();
         break;
 
       case 'left':
-        // Total displacement is the sum of the elements placement and size.
         displacement = placement + $el.outerWidth();
         break;
 
-      // Right and bottom elements displace according to their left and
-      // top offset. Their size isn't important.
       case 'bottom':
         displacement = documentElement.clientHeight - placement;
         break;
@@ -196,27 +99,10 @@
     return displacement;
   }
 
-  /**
-   * Assign the displace function to a property of the Drupal global object.
-   *
-   * @ignore
-   */
   Drupal.displace = displace;
   $.extend(Drupal.displace, {
-
-    /**
-     * Expose offsets to other scripts to avoid having to recalculate offsets.
-     *
-     * @ignore
-     */
     offsets: offsets,
 
-    /**
-     * Expose method to compute a single edge offsets.
-     *
-     * @ignore
-     */
     calculateOffset: calculateOffset
   });
-
-})(jQuery, Drupal, Drupal.debounce);
+})(jQuery, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.es6.js
similarity index 100%
copy from core/misc/dropbutton/dropbutton.js
copy to core/misc/dropbutton/dropbutton.es6.js
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index 04f9491ad7..c90445f9b3 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -1,30 +1,22 @@
 /**
- * @file
- * Dropbutton feature.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/dropbutton/dropbutton.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Process elements with the .dropbutton class on page load.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches dropButton behaviors.
-   */
   Drupal.behaviors.dropButton = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
       if ($dropbuttons.length) {
-        // Adds the delegated handler that will toggle dropdowns on click.
         var $body = $('body').once('dropbutton-click');
         if ($body.length) {
           $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
         }
-        // Initialize all buttons.
+
         var il = $dropbuttons.length;
         for (var i = 0; i < il; i++) {
           DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
@@ -33,201 +25,86 @@
     }
   };
 
-  /**
-   * Delegated callback for opening and closing dropbutton secondary actions.
-   *
-   * @function Drupal.DropButton~dropbuttonClickHandler
-   *
-   * @param {jQuery.Event} e
-   *   The event triggered.
-   */
   function dropbuttonClickHandler(e) {
     e.preventDefault();
     $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
   }
 
-  /**
-   * A DropButton presents an HTML list as a button with a primary action.
-   *
-   * All secondary actions beyond the first in the list are presented in a
-   * dropdown list accessible through a toggle arrow associated with the button.
-   *
-   * @constructor Drupal.DropButton
-   *
-   * @param {HTMLElement} dropbutton
-   *   A DOM element.
-   * @param {object} settings
-   *   A list of options including:
-   * @param {string} settings.title
-   *   The text inside the toggle link element. This text is hidden
-   *   from visual UAs.
-   */
   function DropButton(dropbutton, settings) {
-    // Merge defaults with settings.
-    var options = $.extend({title: Drupal.t('List additional actions')}, settings);
+    var options = $.extend({ title: Drupal.t('List additional actions') }, settings);
     var $dropbutton = $(dropbutton);
 
-    /**
-     * @type {jQuery}
-     */
     this.$dropbutton = $dropbutton;
 
-    /**
-     * @type {jQuery}
-     */
     this.$list = $dropbutton.find('.dropbutton');
 
-    /**
-     * Find actions and mark them.
-     *
-     * @type {jQuery}
-     */
     this.$actions = this.$list.find('li').addClass('dropbutton-action');
 
-    // Add the special dropdown only if there are hidden actions.
     if (this.$actions.length > 1) {
-      // Identify the first element of the collection.
       var $primary = this.$actions.slice(0, 1);
-      // Identify the secondary actions.
+
       var $secondary = this.$actions.slice(1);
       $secondary.addClass('secondary-action');
-      // Add toggle link.
+
       $primary.after(Drupal.theme('dropbuttonToggle', options));
-      // Bind mouse events.
-      this.$dropbutton
-        .addClass('dropbutton-multiple')
-        .on({
-
-          /**
-           * Adds a timeout to close the dropdown on mouseleave.
-           *
-           * @ignore
-           */
-          'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
-
-          /**
-           * Clears timeout when mouseout of the dropdown.
-           *
-           * @ignore
-           */
-          'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
-
-          /**
-           * Similar to mouseleave/mouseenter, but for keyboard navigation.
-           *
-           * @ignore
-           */
-          'focusout.dropbutton': $.proxy(this.focusOut, this),
-
-          /**
-           * @ignore
-           */
-          'focusin.dropbutton': $.proxy(this.focusIn, this)
-        });
-    }
-    else {
+
+      this.$dropbutton.addClass('dropbutton-multiple').on({
+        'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
+
+        'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
+
+        'focusout.dropbutton': $.proxy(this.focusOut, this),
+
+        'focusin.dropbutton': $.proxy(this.focusIn, this)
+      });
+    } else {
       this.$dropbutton.addClass('dropbutton-single');
     }
   }
 
-  /**
-   * Extend the DropButton constructor.
-   */
-  $.extend(DropButton, /** @lends Drupal.DropButton */{
-    /**
-     * Store all processed DropButtons.
-     *
-     * @type {Array.<Drupal.DropButton>}
-     */
+  $.extend(DropButton, {
     dropbuttons: []
   });
 
-  /**
-   * Extend the DropButton prototype.
-   */
-  $.extend(DropButton.prototype, /** @lends Drupal.DropButton# */{
-
-    /**
-     * Toggle the dropbutton open and closed.
-     *
-     * @param {bool} [show]
-     *   Force the dropbutton to open by passing true or to close by
-     *   passing false.
-     */
-    toggle: function (show) {
+  $.extend(DropButton.prototype, {
+    toggle: function toggle(show) {
       var isBool = typeof show === 'boolean';
       show = isBool ? show : !this.$dropbutton.hasClass('open');
       this.$dropbutton.toggleClass('open', show);
     },
 
-    /**
-     * @method
-     */
-    hoverIn: function () {
-      // Clear any previous timer we were using.
+    hoverIn: function hoverIn() {
       if (this.timerID) {
         window.clearTimeout(this.timerID);
       }
     },
 
-    /**
-     * @method
-     */
-    hoverOut: function () {
-      // Wait half a second before closing.
+    hoverOut: function hoverOut() {
       this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
     },
 
-    /**
-     * @method
-     */
-    open: function () {
+    open: function open() {
       this.toggle(true);
     },
 
-    /**
-     * @method
-     */
-    close: function () {
+    close: function close() {
       this.toggle(false);
     },
 
-    /**
-     * @param {jQuery.Event} e
-     *   The event triggered.
-     */
-    focusOut: function (e) {
+    focusOut: function focusOut(e) {
       this.hoverOut.call(this, e);
     },
 
-    /**
-     * @param {jQuery.Event} e
-     *   The event triggered.
-     */
-    focusIn: function (e) {
+    focusIn: function focusIn(e) {
       this.hoverIn.call(this, e);
     }
   });
 
-  $.extend(Drupal.theme, /** @lends Drupal.theme */{
-
-    /**
-     * A toggle is an interactive element often bound to a click handler.
-     *
-     * @param {object} options
-     *   Options object.
-     * @param {string} [options.title]
-     *   The HTML anchor title attribute and text for the inner span element.
-     *
-     * @return {string}
-     *   A string representing a DOM fragment.
-     */
-    dropbuttonToggle: function (options) {
+  $.extend(Drupal.theme, {
+    dropbuttonToggle: function dropbuttonToggle(options) {
       return '<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
     }
   });
 
-  // Expose constructor in the public space.
   Drupal.DropButton = DropButton;
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/drupal.js b/core/misc/drupal.es6.js
similarity index 100%
copy from core/misc/drupal.js
copy to core/misc/drupal.es6.js
diff --git a/core/misc/drupal.init.js b/core/misc/drupal.init.es6.js
similarity index 100%
copy from core/misc/drupal.init.js
copy to core/misc/drupal.init.es6.js
diff --git a/core/misc/drupal.init.js b/core/misc/drupal.init.js
index 0e55e190ef..597dacc76f 100644
--- a/core/misc/drupal.init.js
+++ b/core/misc/drupal.init.js
@@ -1,19 +1,20 @@
-// Allow other JavaScript libraries to use $.
+/**
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/drupal.init.es6.js
+* @preserve
+**/
+
 if (window.jQuery) {
   jQuery.noConflict();
 }
 
-// Class indicating that JS is enabled; used for styling purpose.
 document.documentElement.className += ' js';
 
-// JavaScript should be made compatible with libraries other than jQuery by
-// wrapping it in an anonymous closure.
-
 (function (domready, Drupal, drupalSettings) {
 
   'use strict';
 
-  // Attach all behaviors.
-  domready(function () { Drupal.attachBehaviors(document, drupalSettings); });
-
-})(domready, Drupal, window.drupalSettings);
+  domready(function () {
+    Drupal.attachBehaviors(document, drupalSettings);
+  });
+})(domready, Drupal, window.drupalSettings);
\ No newline at end of file
diff --git a/core/misc/drupal.js b/core/misc/drupal.js
index d509795b86..3b3131ed73 100644
--- a/core/misc/drupal.js
+++ b/core/misc/drupal.js
@@ -1,289 +1,73 @@
 /**
- * @file
- * Defines the Drupal JavaScript API.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/drupal.es6.js
+* @preserve
+**/
 
-/**
- * A jQuery object, typically the return value from a `$(selector)` call.
- *
- * Holds an HTMLElement or a collection of HTMLElements.
- *
- * @typedef {object} jQuery
- *
- * @prop {number} length=0
- *   Number of elements contained in the jQuery object.
- */
-
-/**
- * Variable generated by Drupal that holds all translated strings from PHP.
- *
- * Content of this variable is automatically created by Drupal when using the
- * Interface Translation module. It holds the translation of strings used on
- * the page.
- *
- * This variable is used to pass data from the backend to the frontend. Data
- * contained in `drupalSettings` is used during behavior initialization.
- *
- * @global
- *
- * @var {object} drupalTranslations
- */
+window.Drupal = { behaviors: {}, locale: {} };
 
-/**
- * Global Drupal object.
- *
- * All Drupal JavaScript APIs are contained in this namespace.
- *
- * @global
- *
- * @namespace
- */
-window.Drupal = {behaviors: {}, locale: {}};
-
-// JavaScript should be made compatible with libraries other than jQuery by
-// wrapping it in an anonymous closure.
 (function (Drupal, drupalSettings, drupalTranslations) {
 
   'use strict';
 
-  /**
-   * Helper to rethrow errors asynchronously.
-   *
-   * This way Errors bubbles up outside of the original callstack, making it
-   * easier to debug errors in the browser.
-   *
-   * @param {Error|string} error
-   *   The error to be thrown.
-   */
   Drupal.throwError = function (error) {
-    setTimeout(function () { throw error; }, 0);
+    setTimeout(function () {
+      throw error;
+    }, 0);
   };
 
-  /**
-   * Custom error thrown after attach/detach if one or more behaviors failed.
-   * Initializes the JavaScript behaviors for page loads and Ajax requests.
-   *
-   * @callback Drupal~behaviorAttach
-   *
-   * @param {HTMLDocument|HTMLElement} context
-   *   An element to detach behaviors from.
-   * @param {?object} settings
-   *   An object containing settings for the current context. It is rarely used.
-   *
-   * @see Drupal.attachBehaviors
-   */
-
-  /**
-   * Reverts and cleans up JavaScript behavior initialization.
-   *
-   * @callback Drupal~behaviorDetach
-   *
-   * @param {HTMLDocument|HTMLElement} context
-   *   An element to attach behaviors to.
-   * @param {object} settings
-   *   An object containing settings for the current context.
-   * @param {string} trigger
-   *   One of `'unload'`, `'move'`, or `'serialize'`.
-   *
-   * @see Drupal.detachBehaviors
-   */
-
-  /**
-   * @typedef {object} Drupal~behavior
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Function run on page load and after an Ajax call.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Function run when content is serialized or removed from the page.
-   */
-
-  /**
-   * Holds all initialization methods.
-   *
-   * @namespace Drupal.behaviors
-   *
-   * @type {Object.<string, Drupal~behavior>}
-   */
-
-  /**
-   * Defines a behavior to be run during attach and detach phases.
-   *
-   * Attaches all registered behaviors to a page element.
-   *
-   * Behaviors are event-triggered actions that attach to page elements,
-   * enhancing default non-JavaScript UIs. Behaviors are registered in the
-   * {@link Drupal.behaviors} object using the method 'attach' and optionally
-   * also 'detach'.
-   *
-   * {@link Drupal.attachBehaviors} is added below to the `jQuery.ready` event
-   * and therefore runs on initial page load. Developers implementing Ajax in
-   * their solutions should also call this function after new page content has
-   * been loaded, feeding in an element to be processed, in order to attach all
-   * behaviors to the new content.
-   *
-   * Behaviors should use `var elements =
-   * $(context).find(selector).once('behavior-name');` to ensure the behavior is
-   * attached only once to a given element. (Doing so enables the reprocessing
-   * of given elements, which may be needed on occasion despite the ability to
-   * limit behavior attachment to a particular element.)
-   *
-   * @example
-   * Drupal.behaviors.behaviorName = {
-   *   attach: function (context, settings) {
-   *     // ...
-   *   },
-   *   detach: function (context, settings, trigger) {
-   *     // ...
-   *   }
-   * };
-   *
-   * @param {HTMLDocument|HTMLElement} [context=document]
-   *   An element to attach behaviors to.
-   * @param {object} [settings=drupalSettings]
-   *   An object containing settings for the current context. If none is given,
-   *   the global {@link drupalSettings} object is used.
-   *
-   * @see Drupal~behaviorAttach
-   * @see Drupal.detachBehaviors
-   *
-   * @throws {Drupal~DrupalBehaviorError}
-   */
   Drupal.attachBehaviors = function (context, settings) {
     context = context || document;
     settings = settings || drupalSettings;
     var behaviors = Drupal.behaviors;
-    // Execute all of them.
+
     for (var i in behaviors) {
       if (behaviors.hasOwnProperty(i) && typeof behaviors[i].attach === 'function') {
-        // Don't stop the execution of behaviors in case of an error.
         try {
           behaviors[i].attach(context, settings);
-        }
-        catch (e) {
+        } catch (e) {
           Drupal.throwError(e);
         }
       }
     }
   };
 
-  /**
-   * Detaches registered behaviors from a page element.
-   *
-   * Developers implementing Ajax in their solutions should call this function
-   * before page content is about to be removed, feeding in an element to be
-   * processed, in order to allow special behaviors to detach from the content.
-   *
-   * Such implementations should use `.findOnce()` and `.removeOnce()` to find
-   * elements with their corresponding `Drupal.behaviors.behaviorName.attach`
-   * implementation, i.e. `.removeOnce('behaviorName')`, to ensure the behavior
-   * is detached only from previously processed elements.
-   *
-   * @param {HTMLDocument|HTMLElement} [context=document]
-   *   An element to detach behaviors from.
-   * @param {object} [settings=drupalSettings]
-   *   An object containing settings for the current context. If none given,
-   *   the global {@link drupalSettings} object is used.
-   * @param {string} [trigger='unload']
-   *   A string containing what's causing the behaviors to be detached. The
-   *   possible triggers are:
-   *   - `'unload'`: The context element is being removed from the DOM.
-   *   - `'move'`: The element is about to be moved within the DOM (for example,
-   *     during a tabledrag row swap). After the move is completed,
-   *     {@link Drupal.attachBehaviors} is called, so that the behavior can undo
-   *     whatever it did in response to the move. Many behaviors won't need to
-   *     do anything simply in response to the element being moved, but because
-   *     IFRAME elements reload their "src" when being moved within the DOM,
-   *     behaviors bound to IFRAME elements (like WYSIWYG editors) may need to
-   *     take some action.
-   *   - `'serialize'`: When an Ajax form is submitted, this is called with the
-   *     form as the context. This provides every behavior within the form an
-   *     opportunity to ensure that the field elements have correct content
-   *     in them before the form is serialized. The canonical use-case is so
-   *     that WYSIWYG editors can update the hidden textarea to which they are
-   *     bound.
-   *
-   * @throws {Drupal~DrupalBehaviorError}
-   *
-   * @see Drupal~behaviorDetach
-   * @see Drupal.attachBehaviors
-   */
   Drupal.detachBehaviors = function (context, settings, trigger) {
     context = context || document;
     settings = settings || drupalSettings;
     trigger = trigger || 'unload';
     var behaviors = Drupal.behaviors;
-    // Execute all of them.
+
     for (var i in behaviors) {
       if (behaviors.hasOwnProperty(i) && typeof behaviors[i].detach === 'function') {
-        // Don't stop the execution of behaviors in case of an error.
         try {
           behaviors[i].detach(context, settings, trigger);
-        }
-        catch (e) {
+        } catch (e) {
           Drupal.throwError(e);
         }
       }
     }
   };
 
-  /**
-   * Encodes special characters in a plain-text string for display as HTML.
-   *
-   * @param {string} str
-   *   The string to be encoded.
-   *
-   * @return {string}
-   *   The encoded string.
-   *
-   * @ingroup sanitization
-   */
   Drupal.checkPlain = function (str) {
-    str = str.toString()
-      .replace(/&/g, '&amp;')
-      .replace(/"/g, '&quot;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+    str = str.toString().replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     return str;
   };
 
-  /**
-   * Replaces placeholders with sanitized values in a string.
-   *
-   * @param {string} str
-   *   A string with placeholders.
-   * @param {object} args
-   *   An object of replacements pairs to make. Incidences of any key in this
-   *   array are replaced with the corresponding value. Based on the first
-   *   character of the key, the value is escaped and/or themed:
-   *    - `'!variable'`: inserted as is.
-   *    - `'@variable'`: escape plain text to HTML ({@link Drupal.checkPlain}).
-   *    - `'%variable'`: escape text and theme as a placeholder for user-
-   *      submitted content ({@link Drupal.checkPlain} +
-   *      `{@link Drupal.theme}('placeholder')`).
-   *
-   * @return {string}
-   *   The formatted string.
-   *
-   * @see Drupal.t
-   */
   Drupal.formatString = function (str, args) {
-    // Keep args intact.
     var processedArgs = {};
-    // Transform arguments before inserting them.
+
     for (var key in args) {
       if (args.hasOwnProperty(key)) {
         switch (key.charAt(0)) {
-          // Escaped only.
           case '@':
             processedArgs[key] = Drupal.checkPlain(args[key]);
             break;
 
-          // Pass-through.
           case '!':
             processedArgs[key] = args[key];
             break;
 
-          // Escaped and placeholder.
           default:
             processedArgs[key] = Drupal.theme('placeholder', args[key]);
             break;
@@ -294,28 +78,11 @@ window.Drupal = {behaviors: {}, locale: {}};
     return Drupal.stringReplace(str, processedArgs, null);
   };
 
-  /**
-   * Replaces substring.
-   *
-   * The longest keys will be tried first. Once a substring has been replaced,
-   * its new value will not be searched again.
-   *
-   * @param {string} str
-   *   A string with placeholders.
-   * @param {object} args
-   *   Key-value pairs.
-   * @param {Array|null} keys
-   *   Array of keys from `args`. Internal use only.
-   *
-   * @return {string}
-   *   The replaced string.
-   */
   Drupal.stringReplace = function (str, args, keys) {
     if (str.length === 0) {
       return str;
     }
 
-    // If the array of keys is not passed then collect the keys from the args.
     if (!Array.isArray(keys)) {
       keys = [];
       for (var k in args) {
@@ -324,21 +91,20 @@ window.Drupal = {behaviors: {}, locale: {}};
         }
       }
 
-      // Order the keys by the character length. The shortest one is the first.
-      keys.sort(function (a, b) { return a.length - b.length; });
+      keys.sort(function (a, b) {
+        return a.length - b.length;
+      });
     }
 
     if (keys.length === 0) {
       return str;
     }
 
-    // Take next longest one from the end.
     var key = keys.pop();
     var fragments = str.split(key);
 
     if (keys.length) {
       for (var i = 0; i < fragments.length; i++) {
-        // Process each fragment with a copy of remaining keys.
         fragments[i] = Drupal.stringReplace(fragments[i], args, keys.slice(0));
       }
     }
@@ -346,31 +112,10 @@ window.Drupal = {behaviors: {}, locale: {}};
     return fragments.join(args[key]);
   };
 
-  /**
-   * Translates strings to the page language, or a given language.
-   *
-   * See the documentation of the server-side t() function for further details.
-   *
-   * @param {string} str
-   *   A string containing the English text to translate.
-   * @param {Object.<string, string>} [args]
-   *   An object of replacements pairs to make after translation. Incidences
-   *   of any key in this array are replaced with the corresponding value.
-   *   See {@link Drupal.formatString}.
-   * @param {object} [options]
-   *   Additional options for translation.
-   * @param {string} [options.context='']
-   *   The context the source string belongs to.
-   *
-   * @return {string}
-   *   The formatted string.
-   *   The translated string.
-   */
   Drupal.t = function (str, args, options) {
     options = options || {};
     options.context = options.context || '';
 
-    // Fetch the localized version of the string.
     if (typeof drupalTranslations !== 'undefined' && drupalTranslations.strings && drupalTranslations.strings[options.context] && drupalTranslations.strings[options.context][str]) {
       str = drupalTranslations.strings[options.context][str];
     }
@@ -381,127 +126,41 @@ window.Drupal = {behaviors: {}, locale: {}};
     return str;
   };
 
-  /**
-   * Returns the URL to a Drupal page.
-   *
-   * @param {string} path
-   *   Drupal path to transform to URL.
-   *
-   * @return {string}
-   *   The full URL.
-   */
   Drupal.url = function (path) {
     return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
   };
 
-  /**
-   * Returns the passed in URL as an absolute URL.
-   *
-   * @param {string} url
-   *   The URL string to be normalized to an absolute URL.
-   *
-   * @return {string}
-   *   The normalized, absolute URL.
-   *
-   * @see https://github.com/angular/angular.js/blob/v1.4.4/src/ng/urlUtils.js
-   * @see https://grack.com/blog/2009/11/17/absolutizing-url-in-javascript
-   * @see https://github.com/jquery/jquery-ui/blob/1.11.4/ui/tabs.js#L53
-   */
   Drupal.url.toAbsolute = function (url) {
     var urlParsingNode = document.createElement('a');
 
-    // Decode the URL first; this is required by IE <= 6. Decoding non-UTF-8
-    // strings may throw an exception.
     try {
       url = decodeURIComponent(url);
-    }
-    catch (e) {
-      // Empty.
-    }
+    } catch (e) {}
 
     urlParsingNode.setAttribute('href', url);
 
-    // IE <= 7 normalizes the URL when assigned to the anchor node similar to
-    // the other browsers.
     return urlParsingNode.cloneNode(false).href;
   };
 
-  /**
-   * Returns true if the URL is within Drupal's base path.
-   *
-   * @param {string} url
-   *   The URL string to be tested.
-   *
-   * @return {bool}
-   *   `true` if local.
-   *
-   * @see https://github.com/jquery/jquery-ui/blob/1.11.4/ui/tabs.js#L58
-   */
   Drupal.url.isLocal = function (url) {
-    // Always use browser-derived absolute URLs in the comparison, to avoid
-    // attempts to break out of the base path using directory traversal.
     var absoluteUrl = Drupal.url.toAbsolute(url);
     var protocol = location.protocol;
 
-    // Consider URLs that match this site's base URL but use HTTPS instead of HTTP
-    // as local as well.
     if (protocol === 'http:' && absoluteUrl.indexOf('https:') === 0) {
       protocol = 'https:';
     }
     var baseUrl = protocol + '//' + location.host + drupalSettings.path.baseUrl.slice(0, -1);
 
-    // Decoding non-UTF-8 strings may throw an exception.
     try {
       absoluteUrl = decodeURIComponent(absoluteUrl);
-    }
-    catch (e) {
-      // Empty.
-    }
+    } catch (e) {}
     try {
       baseUrl = decodeURIComponent(baseUrl);
-    }
-    catch (e) {
-      // Empty.
-    }
+    } catch (e) {}
 
-    // The given URL matches the site's base URL, or has a path under the site's
-    // base URL.
     return absoluteUrl === baseUrl || absoluteUrl.indexOf(baseUrl + '/') === 0;
   };
 
-  /**
-   * Formats a string containing a count of items.
-   *
-   * This function ensures that the string is pluralized correctly. Since
-   * {@link Drupal.t} is called by this function, make sure not to pass
-   * already-localized strings to it.
-   *
-   * See the documentation of the server-side
-   * \Drupal\Core\StringTranslation\TranslationInterface::formatPlural()
-   * function for more details.
-   *
-   * @param {number} count
-   *   The item count to display.
-   * @param {string} singular
-   *   The string for the singular case. Please make sure it is clear this is
-   *   singular, to ease translation (e.g. use "1 new comment" instead of "1
-   *   new"). Do not use @count in the singular string.
-   * @param {string} plural
-   *   The string for the plural case. Please make sure it is clear this is
-   *   plural, to ease translation. Use @count in place of the item count, as in
-   *   "@count new comments".
-   * @param {object} [args]
-   *   An object of replacements pairs to make after translation. Incidences
-   *   of any key in this array are replaced with the corresponding value.
-   *   See {@link Drupal.formatString}.
-   *   Note that you do not need to include @count in this array.
-   *   This replacement is done automatically for the plural case.
-   * @param {object} [options]
-   *   The options to pass to the {@link Drupal.t} function.
-   *
-   * @return {string}
-   *   A translated string.
-   */
   Drupal.formatPlural = function (count, singular, plural, args, options) {
     args = args || {};
     args['@count'] = count;
@@ -510,56 +169,19 @@ window.Drupal = {behaviors: {}, locale: {}};
     var translations = Drupal.t(singular + pluralDelimiter + plural, args, options).split(pluralDelimiter);
     var index = 0;
 
-    // Determine the index of the plural form.
     if (typeof drupalTranslations !== 'undefined' && drupalTranslations.pluralFormula) {
       index = count in drupalTranslations.pluralFormula ? drupalTranslations.pluralFormula[count] : drupalTranslations.pluralFormula['default'];
-    }
-    else if (args['@count'] !== 1) {
+    } else if (args['@count'] !== 1) {
       index = 1;
     }
 
     return translations[index];
   };
 
-  /**
-   * Encodes a Drupal path for use in a URL.
-   *
-   * For aesthetic reasons slashes are not escaped.
-   *
-   * @param {string} item
-   *   Unencoded path.
-   *
-   * @return {string}
-   *   The encoded path.
-   */
   Drupal.encodePath = function (item) {
     return window.encodeURIComponent(item).replace(/%2F/g, '/');
   };
 
-  /**
-   * Generates the themed representation of a Drupal object.
-   *
-   * All requests for themed output must go through this function. It examines
-   * the request and routes it to the appropriate theme function. If the current
-   * theme does not provide an override function, the generic theme function is
-   * called.
-   *
-   * @example
-   * <caption>To retrieve the HTML for text that should be emphasized and
-   * displayed as a placeholder inside a sentence.</caption>
-   * Drupal.theme('placeholder', text);
-   *
-   * @namespace
-   *
-   * @param {function} func
-   *   The name of the theme function to call.
-   * @param {...args}
-   *   Additional arguments to pass along to the theme function.
-   *
-   * @return {string|object|HTMLElement|jQuery}
-   *   Any data the theme function returns. This could be a plain HTML string,
-   *   but also a complex object.
-   */
   Drupal.theme = function (func) {
     var args = Array.prototype.slice.apply(arguments, [1]);
     if (func in Drupal.theme) {
@@ -567,17 +189,7 @@ window.Drupal = {behaviors: {}, locale: {}};
     }
   };
 
-  /**
-   * Formats text for emphasized display in a placeholder inside a sentence.
-   *
-   * @param {string} str
-   *   The text to format (plain-text).
-   *
-   * @return {string}
-   *   The formatted text (html).
-   */
   Drupal.theme.placeholder = function (str) {
     return '<em class="placeholder">' + Drupal.checkPlain(str) + '</em>';
   };
-
-})(Drupal, window.drupalSettings, window.drupalTranslations);
+})(Drupal, window.drupalSettings, window.drupalTranslations);
\ No newline at end of file
diff --git a/core/misc/drupalSettingsLoader.js b/core/misc/drupalSettingsLoader.es6.js
similarity index 100%
copy from core/misc/drupalSettingsLoader.js
copy to core/misc/drupalSettingsLoader.es6.js
diff --git a/core/misc/drupalSettingsLoader.js b/core/misc/drupalSettingsLoader.js
index 7ff292efbf..1e4fea9041 100644
--- a/core/misc/drupalSettingsLoader.js
+++ b/core/misc/drupalSettingsLoader.js
@@ -1,25 +1,18 @@
 /**
- * @file
- * Parse inline JSON and initialize the drupalSettings global object.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/drupalSettingsLoader.es6.js
+* @preserve
+**/
 
 (function () {
 
   'use strict';
 
-  // Use direct child elements to harden against XSS exploits when CSP is on.
   var settingsElement = document.querySelector('head > script[type="application/json"][data-drupal-selector="drupal-settings-json"], body > script[type="application/json"][data-drupal-selector="drupal-settings-json"]');
 
-  /**
-   * Variable generated by Drupal with all the configuration created from PHP.
-   *
-   * @global
-   *
-   * @type {object}
-   */
   window.drupalSettings = {};
 
   if (settingsElement !== null) {
     window.drupalSettings = JSON.parse(settingsElement.textContent);
   }
-})();
+})();
\ No newline at end of file
diff --git a/core/misc/entity-form.js b/core/misc/entity-form.es6.js
similarity index 100%
copy from core/misc/entity-form.js
copy to core/misc/entity-form.es6.js
diff --git a/core/misc/entity-form.js b/core/misc/entity-form.js
index 87253c9022..732dbf345e 100644
--- a/core/misc/entity-form.js
+++ b/core/misc/entity-form.js
@@ -1,35 +1,21 @@
 /**
- * @file
- * Defines Javascript behaviors for the block_content module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/entity-form.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Sets summaries about revision and translation of entities.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behaviour entity form tabs.
-   *
-   *   Specifically, it updates summaries to the revision information and the
-   *   translation options.
-   */
   Drupal.behaviors.entityContentDetailsSummaries = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       $context.find('.entity-content-form-revision-information').drupalSetSummary(function (context) {
         var $revisionContext = $(context);
         var revisionCheckbox = $revisionContext.find('.js-form-item-revision input');
 
-        // Return 'New revision' if the 'Create new revision' checkbox is checked,
-        // or if the checkbox doesn't exist, but the revision log does. For users
-        // without the "Administer content" permission the checkbox won't appear,
-        // but the revision log will if the content type is set to auto-revision.
-        if (revisionCheckbox.is(':checked') || (!revisionCheckbox.length && $revisionContext.find('.js-form-item-revision-log textarea').length)) {
+        if (revisionCheckbox.is(':checked') || !revisionCheckbox.length && $revisionContext.find('.js-form-item-revision-log textarea').length) {
           return Drupal.t('New revision');
         }
 
@@ -43,8 +29,7 @@
 
         if ($checkbox.length) {
           translate = $checkbox.is(':checked') ? Drupal.t('Needs to be updated') : Drupal.t('Does not need to be updated');
-        }
-        else {
+        } else {
           $checkbox = $translationContext.find('.js-form-item-translation-retranslate input');
           translate = $checkbox.is(':checked') ? Drupal.t('Flag other translations as outdated') : Drupal.t('Do not flag other translations as outdated');
         }
@@ -53,5 +38,4 @@
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/form.js b/core/misc/form.es6.js
similarity index 100%
copy from core/misc/form.js
copy to core/misc/form.es6.js
diff --git a/core/misc/form.js b/core/misc/form.js
index 7ca64fc425..2d046c67b3 100644
--- a/core/misc/form.js
+++ b/core/misc/form.js
@@ -1,205 +1,93 @@
 /**
- * @file
- * Form features.
- */
-
-/**
- * Triggers when a value in the form changed.
- *
- * The event triggers when content is typed or pasted in a text field, before
- * the change event triggers.
- *
- * @event formUpdated
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/form.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, debounce) {
 
   'use strict';
 
-  /**
-   * Retrieves the summary for the first element.
-   *
-   * @return {string}
-   *   The text of the summary.
-   */
   $.fn.drupalGetSummary = function () {
     var callback = this.data('summaryCallback');
-    return (this[0] && callback) ? $.trim(callback(this[0])) : '';
+    return this[0] && callback ? $.trim(callback(this[0])) : '';
   };
 
-  /**
-   * Sets the summary for all matched elements.
-   *
-   * @param {function} callback
-   *   Either a function that will be called each time the summary is
-   *   retrieved or a string (which is returned each time).
-   *
-   * @return {jQuery}
-   *   jQuery collection of the current element.
-   *
-   * @fires event:summaryUpdated
-   *
-   * @listens event:formUpdated
-   */
   $.fn.drupalSetSummary = function (callback) {
     var self = this;
 
-    // To facilitate things, the callback should always be a function. If it's
-    // not, we wrap it into an anonymous function which just returns the value.
     if (typeof callback !== 'function') {
       var val = callback;
-      callback = function () { return val; };
+      callback = function callback() {
+        return val;
+      };
     }
 
-    return this
-      .data('summaryCallback', callback)
-      // To prevent duplicate events, the handlers are first removed and then
-      // (re-)added.
-      .off('formUpdated.summary')
-      .on('formUpdated.summary', function () {
-        self.trigger('summaryUpdated');
-      })
-      // The actual summaryUpdated handler doesn't fire when the callback is
-      // changed, so we have to do this manually.
-      .trigger('summaryUpdated');
+    return this.data('summaryCallback', callback).off('formUpdated.summary').on('formUpdated.summary', function () {
+      self.trigger('summaryUpdated');
+    }).trigger('summaryUpdated');
   };
 
-  /**
-   * Prevents consecutive form submissions of identical form values.
-   *
-   * Repetitive form submissions that would submit the identical form values
-   * are prevented, unless the form values are different to the previously
-   * submitted values.
-   *
-   * This is a simplified re-implementation of a user-agent behavior that
-   * should be natively supported by major web browsers, but at this time, only
-   * Firefox has a built-in protection.
-   *
-   * A form value-based approach ensures that the constraint is triggered for
-   * consecutive, identical form submissions only. Compared to that, a form
-   * button-based approach would (1) rely on [visible] buttons to exist where
-   * technically not required and (2) require more complex state management if
-   * there are multiple buttons in a form.
-   *
-   * This implementation is based on form-level submit events only and relies
-   * on jQuery's serialize() method to determine submitted form values. As such,
-   * the following limitations exist:
-   *
-   * - Event handlers on form buttons that preventDefault() do not receive a
-   *   double-submit protection. That is deemed to be fine, since such button
-   *   events typically trigger reversible client-side or server-side
-   *   operations that are local to the context of a form only.
-   * - Changed values in advanced form controls, such as file inputs, are not
-   *   part of the form values being compared between consecutive form submits
-   *   (due to limitations of jQuery.serialize()). That is deemed to be
-   *   acceptable, because if the user forgot to attach a file, then the size of
-   *   HTTP payload will most likely be small enough to be fully passed to the
-   *   server endpoint within (milli)seconds. If a user mistakenly attached a
-   *   wrong file and is technically versed enough to cancel the form submission
-   *   (and HTTP payload) in order to attach a different file, then that
-   *   edge-case is not supported here.
-   *
-   * Lastly, all forms submitted via HTTP GET are idempotent by definition of
-   * HTTP standards, so excluded in this implementation.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.formSingleSubmit = {
-    attach: function () {
+    attach: function attach() {
       function onFormSubmit(e) {
         var $form = $(e.currentTarget);
         var formValues = $form.serialize();
         var previousValues = $form.attr('data-drupal-form-submit-last');
         if (previousValues === formValues) {
           e.preventDefault();
-        }
-        else {
+        } else {
           $form.attr('data-drupal-form-submit-last', formValues);
         }
       }
 
-      $('body').once('form-single-submit')
-        .on('submit.singleSubmit', 'form:not([method~="GET"])', onFormSubmit);
+      $('body').once('form-single-submit').on('submit.singleSubmit', 'form:not([method~="GET"])', onFormSubmit);
     }
   };
 
-  /**
-   * Sends a 'formUpdated' event each time a form element is modified.
-   *
-   * @param {HTMLElement} element
-   *   The element to trigger a form updated event on.
-   *
-   * @fires event:formUpdated
-   */
   function triggerFormUpdated(element) {
     $(element).trigger('formUpdated');
   }
 
-  /**
-   * Collects the IDs of all form fields in the given form.
-   *
-   * @param {HTMLFormElement} form
-   *   The form element to search.
-   *
-   * @return {Array}
-   *   Array of IDs for form fields.
-   */
   function fieldsList(form) {
     var $fieldList = $(form).find('[name]').map(function (index, element) {
-      // We use id to avoid name duplicates on radio fields and filter out
-      // elements with a name but no id.
       return element.getAttribute('id');
     });
-    // Return a true array.
+
     return $.makeArray($fieldList);
   }
 
-  /**
-   * Triggers the 'formUpdated' event on form elements when they are modified.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches formUpdated behaviors.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches formUpdated behaviors.
-   *
-   * @fires event:formUpdated
-   */
   Drupal.behaviors.formUpdated = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       var contextIsForm = $context.is('form');
       var $forms = (contextIsForm ? $context : $context.find('form')).once('form-updated');
       var formFields;
 
       if ($forms.length) {
-        // Initialize form behaviors, use $.makeArray to be able to use native
-        // forEach array method and have the callback parameters in the right
-        // order.
         $.makeArray($forms).forEach(function (form) {
           var events = 'change.formUpdated input.formUpdated ';
-          var eventHandler = debounce(function (event) { triggerFormUpdated(event.target); }, 300);
+          var eventHandler = debounce(function (event) {
+            triggerFormUpdated(event.target);
+          }, 300);
           formFields = fieldsList(form).join(',');
 
           form.setAttribute('data-drupal-form-fields', formFields);
           $(form).on(events, eventHandler);
         });
       }
-      // On ajax requests context is the form element.
+
       if (contextIsForm) {
         formFields = fieldsList(context).join(',');
-        // @todo replace with form.getAttribute() when #1979468 is in.
+
         var currentFields = $(context).attr('data-drupal-form-fields');
-        // If there has been a change in the fields or their order, trigger
-        // formUpdated.
+
         if (formFields !== currentFields) {
           triggerFormUpdated(context);
         }
       }
-
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       var $context = $(context);
       var contextIsForm = $context.is('form');
       if (trigger === 'unload') {
@@ -214,23 +102,15 @@
     }
   };
 
-  /**
-   * Prepopulate form fields with information from the visitor browser.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behavior for filling user info from browser.
-   */
   Drupal.behaviors.fillUserInfoFromBrowser = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var userInfo = ['name', 'mail', 'homepage'];
       var $forms = $('[data-user-info-from-browser]').once('user-info-from-browser');
       if ($forms.length) {
         userInfo.map(function (info) {
           var $element = $forms.find('[name=' + info + ']');
           var browserData = localStorage.getItem('Drupal.visitor.' + info);
-          var emptyOrDefault = ($element.val() === '' || ($element.attr('data-drupal-default-value') === $element.val()));
+          var emptyOrDefault = $element.val() === '' || $element.attr('data-drupal-default-value') === $element.val();
           if ($element.length && emptyOrDefault && browserData) {
             $element.val(browserData);
           }
@@ -246,5 +126,4 @@
       });
     }
   };
-
-})(jQuery, Drupal, Drupal.debounce);
+})(jQuery, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/misc/machine-name.js b/core/misc/machine-name.es6.js
similarity index 100%
copy from core/misc/machine-name.js
copy to core/misc/machine-name.es6.js
diff --git a/core/misc/machine-name.js b/core/misc/machine-name.js
index e76292e265..0942add173 100644
--- a/core/misc/machine-name.js
+++ b/core/misc/machine-name.js
@@ -1,48 +1,15 @@
 /**
- * @file
- * Machine name functionality.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/machine-name.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Attach the machine-readable name form element behavior.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches machine-name behaviors.
-   */
   Drupal.behaviors.machineName = {
-
-    /**
-     * Attaches the behavior.
-     *
-     * @param {Element} context
-     *   The context for attaching the behavior.
-     * @param {object} settings
-     *   Settings object.
-     * @param {object} settings.machineName
-     *   A list of elements to process, keyed by the HTML ID of the form
-     *   element containing the human-readable value. Each element is an object
-     *   defining the following properties:
-     *   - target: The HTML ID of the machine name form element.
-     *   - suffix: The HTML ID of a container to show the machine name preview
-     *     in (usually a field suffix after the human-readable name
-     *     form element).
-     *   - label: The label to show for the machine name preview.
-     *   - replace_pattern: A regular expression (without modifiers) matching
-     *     disallowed characters in the machine name; e.g., '[^a-z0-9]+'.
-     *   - replace: A character to replace disallowed characters with; e.g.,
-     *     '_' or '-'.
-     *   - standalone: Whether the preview should stay in its own element
-     *     rather than the suffix of the source element.
-     *   - field_prefix: The #field_prefix of the form element.
-     *   - field_suffix: The #field_suffix of the form element.
-     */
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var self = this;
       var $context = $(context);
       var timeout = null;
@@ -64,15 +31,11 @@
         var rx = new RegExp(options.replace_pattern, 'g');
         var expected = baseValue.toLowerCase().replace(rx, options.replace).substr(0, options.maxlength);
 
-        // Abort the last pending request because the label has changed and it
-        // is no longer valid.
         if (xhr && xhr.readystate !== 4) {
           xhr.abort();
           xhr = null;
         }
 
-        // Wait 300 milliseconds for Ajax request since the last event to update
-        // the machine name i.e., after the user has stopped typing.
         if (timeout) {
           clearTimeout(timeout);
           timeout = null;
@@ -83,8 +46,7 @@
               self.showMachineName(machine.substr(0, options.maxlength), data);
             });
           }, 300);
-        }
-        else {
+        } else {
           self.showMachineName(expected, data);
         }
       }
@@ -98,28 +60,25 @@
         var $target = $context.find(options.target).addClass('machine-name-target');
         var $suffix = $context.find(options.suffix);
         var $wrapper = $target.closest('.js-form-item');
-        // All elements have to exist.
+
         if (!$source.length || !$target.length || !$suffix.length || !$wrapper.length) {
           return;
         }
-        // Skip processing upon a form validation error on the machine name.
+
         if ($target.hasClass('error')) {
           return;
         }
-        // Figure out the maximum length for the machine name.
+
         options.maxlength = $target.attr('maxlength');
-        // Hide the form item container of the machine name form element.
+
         $wrapper.addClass('visually-hidden');
-        // Determine the initial machine name value. Unless the machine name
-        // form element is disabled or not empty, the initial default value is
-        // based on the human-readable form element value.
+
         if ($target.is(':disabled') || $target.val() !== '') {
           machine = $target.val();
-        }
-        else if ($source.val() !== '') {
+        } else if ($source.val() !== '') {
           machine = self.transliterate($source.val(), options);
         }
-        // Append the machine name preview to the source field.
+
         var $preview = $('<span class="machine-name-value">' + options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix + '</span>');
         $suffix.empty();
         if (options.label) {
@@ -127,7 +86,6 @@
         }
         $suffix.append($preview);
 
-        // If the machine name cannot be edited, stop further processing.
         if ($target.is(':disabled')) {
           return;
         }
@@ -140,63 +98,35 @@
           $preview: $preview,
           options: options
         };
-        // If it is editable, append an edit link.
+
         var $link = $('<span class="admin-link"><button type="button" class="link">' + Drupal.t('Edit') + '</button></span>').on('click', eventData, clickEditHandler);
         $suffix.append($link);
 
-        // Preview the machine name in realtime when the human-readable name
-        // changes, but only if there is no machine name yet; i.e., only upon
-        // initial creation, not when editing.
         if ($target.val() === '') {
-          $source.on('formUpdated.machineName', eventData, machineNameHandler)
-            // Initialize machine name preview.
-            .trigger('formUpdated.machineName');
+          $source.on('formUpdated.machineName', eventData, machineNameHandler).trigger('formUpdated.machineName');
         }
 
-        // Add a listener for an invalid event on the machine name input
-        // to show its container and focus it.
         $target.on('invalid', eventData, clickEditHandler);
       });
     },
 
-    showMachineName: function (machine, data) {
+    showMachineName: function showMachineName(machine, data) {
       var settings = data.options;
-      // Set the machine name to the transliterated value.
+
       if (machine !== '') {
         if (machine !== settings.replace) {
           data.$target.val(machine);
           data.$preview.html(settings.field_prefix + Drupal.checkPlain(machine) + settings.field_suffix);
         }
         data.$suffix.show();
-      }
-      else {
+      } else {
         data.$suffix.hide();
         data.$target.val(machine);
         data.$preview.empty();
       }
     },
 
-    /**
-     * Transliterate a human-readable name to a machine name.
-     *
-     * @param {string} source
-     *   A string to transliterate.
-     * @param {object} settings
-     *   The machine name settings for the corresponding field.
-     * @param {string} settings.replace_pattern
-     *   A regular expression (without modifiers) matching disallowed characters
-     *   in the machine name; e.g., '[^a-z0-9]+'.
-     * @param {string} settings.replace_token
-     *   A token to validate the regular expression.
-     * @param {string} settings.replace
-     *   A character to replace disallowed characters with; e.g., '_' or '-'.
-     * @param {number} settings.maxlength
-     *   The maximum length of the machine name.
-     *
-     * @return {jQuery}
-     *   The transliterated source string.
-     */
-    transliterate: function (source, settings) {
+    transliterate: function transliterate(source, settings) {
       return $.get(Drupal.url('machine_name/transliterate'), {
         text: source,
         langcode: drupalSettings.langcode,
@@ -207,5 +137,4 @@
       });
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/progress.js b/core/misc/progress.es6.js
similarity index 100%
copy from core/misc/progress.js
copy to core/misc/progress.es6.js
diff --git a/core/misc/progress.js b/core/misc/progress.js
index a6694892b2..17ef7ada49 100644
--- a/core/misc/progress.js
+++ b/core/misc/progress.js
@@ -1,78 +1,28 @@
 /**
- * @file
- * Progress bar.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/progress.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Theme function for the progress bar.
-   *
-   * @param {string} id
-   *   The id for the progress bar.
-   *
-   * @return {string}
-   *   The HTML for the progress bar.
-   */
   Drupal.theme.progressBar = function (id) {
-    return '<div id="' + id + '" class="progress" aria-live="polite">' +
-      '<div class="progress__label">&nbsp;</div>' +
-      '<div class="progress__track"><div class="progress__bar"></div></div>' +
-      '<div class="progress__percentage"></div>' +
-      '<div class="progress__description">&nbsp;</div>' +
-      '</div>';
+    return '<div id="' + id + '" class="progress" aria-live="polite">' + '<div class="progress__label">&nbsp;</div>' + '<div class="progress__track"><div class="progress__bar"></div></div>' + '<div class="progress__percentage"></div>' + '<div class="progress__description">&nbsp;</div>' + '</div>';
   };
 
-  /**
-   * A progressbar object. Initialized with the given id. Must be inserted into
-   * the DOM afterwards through progressBar.element.
-   *
-   * Method is the function which will perform the HTTP request to get the
-   * progress bar state. Either "GET" or "POST".
-   *
-   * @example
-   * pb = new Drupal.ProgressBar('myProgressBar');
-   * some_element.appendChild(pb.element);
-   *
-   * @constructor
-   *
-   * @param {string} id
-   *   The id for the progressbar.
-   * @param {function} updateCallback
-   *   Callback to run on update.
-   * @param {string} method
-   *   HTTP method to use.
-   * @param {function} errorCallback
-   *   Callback to call on error.
-   */
   Drupal.ProgressBar = function (id, updateCallback, method, errorCallback) {
     this.id = id;
     this.method = method || 'GET';
     this.updateCallback = updateCallback;
     this.errorCallback = errorCallback;
 
-    // The WAI-ARIA setting aria-live="polite" will announce changes after
-    // users
-    // have completed their current activity and not interrupt the screen
-    // reader.
     this.element = $(Drupal.theme('progressBar', id));
   };
 
-  $.extend(Drupal.ProgressBar.prototype, /** @lends Drupal.ProgressBar# */{
-
-    /**
-     * Set the percentage and status message for the progressbar.
-     *
-     * @param {number} percentage
-     *   The progress percentage.
-     * @param {string} message
-     *   The message to show the user.
-     * @param {string} label
-     *   The text for the progressbar label.
-     */
-    setProgress: function (percentage, message, label) {
+  $.extend(Drupal.ProgressBar.prototype, {
+    setProgress: function setProgress(percentage, message, label) {
       if (percentage >= 0 && percentage <= 100) {
         $(this.element).find('div.progress__bar').css('width', percentage + '%');
         $(this.element).find('div.progress__percentage').html(percentage + '%');
@@ -84,45 +34,29 @@
       }
     },
 
-    /**
-     * Start monitoring progress via Ajax.
-     *
-     * @param {string} uri
-     *   The URI to use for monitoring.
-     * @param {number} delay
-     *   The delay for calling the monitoring URI.
-     */
-    startMonitoring: function (uri, delay) {
+    startMonitoring: function startMonitoring(uri, delay) {
       this.delay = delay;
       this.uri = uri;
       this.sendPing();
     },
 
-    /**
-     * Stop monitoring progress via Ajax.
-     */
-    stopMonitoring: function () {
+    stopMonitoring: function stopMonitoring() {
       clearTimeout(this.timer);
-      // This allows monitoring to be stopped from within the callback.
+
       this.uri = null;
     },
 
-    /**
-     * Request progress data from server.
-     */
-    sendPing: function () {
+    sendPing: function sendPing() {
       if (this.timer) {
         clearTimeout(this.timer);
       }
       if (this.uri) {
         var pb = this;
-        // When doing a post request, you need non-null data. Otherwise a
-        // HTTP 411 or HTTP 406 (with Apache mod_security) error may result.
+
         var uri = this.uri;
         if (uri.indexOf('?') === -1) {
           uri += '?';
-        }
-        else {
+        } else {
           uri += '&';
         }
         uri += '_format=json';
@@ -131,18 +65,19 @@
           url: uri,
           data: '',
           dataType: 'json',
-          success: function (progress) {
-            // Display errors.
+          success: function success(progress) {
             if (progress.status === 0) {
               pb.displayError(progress.data);
               return;
             }
-            // Update display.
+
             pb.setProgress(progress.percentage, progress.message, progress.label);
-            // Schedule next timer.
-            pb.timer = setTimeout(function () { pb.sendPing(); }, pb.delay);
+
+            pb.timer = setTimeout(function () {
+              pb.sendPing();
+            }, pb.delay);
           },
-          error: function (xmlhttp) {
+          error: function error(xmlhttp) {
             var e = new Drupal.AjaxError(xmlhttp, pb.uri);
             pb.displayError('<pre>' + e.message + '</pre>');
           }
@@ -150,13 +85,7 @@
       }
     },
 
-    /**
-     * Display errors on the page.
-     *
-     * @param {string} string
-     *   The error message to show the user.
-     */
-    displayError: function (string) {
+    displayError: function displayError(string) {
       var error = $('<div class="messages messages--error"></div>').html(string);
       $(this.element).before(error).hide();
 
@@ -165,5 +94,4 @@
       }
     }
   });
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/states.js b/core/misc/states.es6.js
similarity index 100%
copy from core/misc/states.js
copy to core/misc/states.es6.js
diff --git a/core/misc/states.js b/core/misc/states.js
index 24374b625f..52ccbab32d 100644
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -1,38 +1,19 @@
 /**
- * @file
- * Drupal's states library.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/states.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * The base States namespace.
-   *
-   * Having the local states variable allows us to use the States namespace
-   * without having to always declare "Drupal.states".
-   *
-   * @namespace Drupal.states
-   */
   var states = Drupal.states = {
-
-    /**
-     * An array of functions that should be postponed.
-     */
     postponed: []
   };
 
-  /**
-   * Attaches the states.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches states behaviors.
-   */
   Drupal.behaviors.states = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $states = $(context).find('[data-drupal-states]');
       var config;
       var state;
@@ -50,31 +31,14 @@
         }
       }
 
-      // Execute all postponed functions now.
       while (states.postponed.length) {
-        (states.postponed.shift())();
+        states.postponed.shift()();
       }
     }
   };
 
-  /**
-   * Object representing an element that depends on other elements.
-   *
-   * @constructor Drupal.states.Dependent
-   *
-   * @param {object} args
-   *   Object with the following keys (all of which are required)
-   * @param {jQuery} args.element
-   *   A jQuery object of the dependent element
-   * @param {Drupal.states.State} args.state
-   *   A State object describing the state that is dependent
-   * @param {object} args.constraints
-   *   An object with dependency specifications. Lists all elements that this
-   *   element depends on. It can be nested and can contain
-   *   arbitrary AND and OR clauses.
-   */
   states.Dependent = function (args) {
-    $.extend(this, {values: {}, oldValue: null}, args);
+    $.extend(this, { values: {}, oldValue: null }, args);
 
     this.dependees = this.getDependees();
     for (var selector in this.dependees) {
@@ -84,49 +48,20 @@
     }
   };
 
-  /**
-   * Comparison functions for comparing the value of an element with the
-   * specification from the dependency settings. If the object type can't be
-   * found in this list, the === operator is used by default.
-   *
-   * @name Drupal.states.Dependent.comparisons
-   *
-   * @prop {function} RegExp
-   * @prop {function} Function
-   * @prop {function} Number
-   */
   states.Dependent.comparisons = {
-    RegExp: function (reference, value) {
+    RegExp: function RegExp(reference, value) {
       return reference.test(value);
     },
-    Function: function (reference, value) {
-      // The "reference" variable is a comparison function.
+    Function: function Function(reference, value) {
       return reference(value);
     },
-    Number: function (reference, value) {
-      // If "reference" is a number and "value" is a string, then cast
-      // reference as a string before applying the strict comparison in
-      // compare().
-      // Otherwise numeric keys in the form's #states array fail to match
-      // string values returned from jQuery's val().
-      return (typeof value === 'string') ? compare(reference.toString(), value) : compare(reference, value);
+    Number: function Number(reference, value) {
+      return typeof value === 'string' ? _compare2(reference.toString(), value) : _compare2(reference, value);
     }
   };
 
   states.Dependent.prototype = {
-
-    /**
-     * Initializes one of the elements this dependent depends on.
-     *
-     * @memberof Drupal.states.Dependent#
-     *
-     * @param {string} selector
-     *   The CSS selector describing the dependee.
-     * @param {object} dependeeStates
-     *   The list of states that have to be monitored for tracking the
-     *   dependee's compliance status.
-     */
-    initializeDependee: function (selector, dependeeStates) {
+    initializeDependee: function initializeDependee(selector, dependeeStates) {
       var state;
       var self = this;
 
@@ -134,245 +69,122 @@
         self.update(e.data.selector, e.data.state, e.value);
       }
 
-      // Cache for the states of this dependee.
       this.values[selector] = {};
 
       for (var i in dependeeStates) {
         if (dependeeStates.hasOwnProperty(i)) {
           state = dependeeStates[i];
-          // Make sure we're not initializing this selector/state combination
-          // twice.
+
           if ($.inArray(state, dependeeStates) === -1) {
             continue;
           }
 
           state = states.State.sanitize(state);
 
-          // Initialize the value of this state.
           this.values[selector][state.name] = null;
 
-          // Monitor state changes of the specified state for this dependee.
-          $(selector).on('state:' + state, {selector: selector, state: state}, stateEventHandler);
+          $(selector).on('state:' + state, { selector: selector, state: state }, stateEventHandler);
 
-          // Make sure the event we just bound ourselves to is actually fired.
-          new states.Trigger({selector: selector, state: state});
+          new states.Trigger({ selector: selector, state: state });
         }
       }
     },
 
-    /**
-     * Compares a value with a reference value.
-     *
-     * @memberof Drupal.states.Dependent#
-     *
-     * @param {object} reference
-     *   The value used for reference.
-     * @param {string} selector
-     *   CSS selector describing the dependee.
-     * @param {Drupal.states.State} state
-     *   A State object describing the dependee's updated state.
-     *
-     * @return {bool}
-     *   true or false.
-     */
-    compare: function (reference, selector, state) {
+    compare: function compare(reference, selector, state) {
       var value = this.values[selector][state.name];
       if (reference.constructor.name in states.Dependent.comparisons) {
-        // Use a custom compare function for certain reference value types.
         return states.Dependent.comparisons[reference.constructor.name](reference, value);
-      }
-      else {
-        // Do a plain comparison otherwise.
-        return compare(reference, value);
+      } else {
+        return _compare2(reference, value);
       }
     },
 
-    /**
-     * Update the value of a dependee's state.
-     *
-     * @memberof Drupal.states.Dependent#
-     *
-     * @param {string} selector
-     *   CSS selector describing the dependee.
-     * @param {Drupal.states.state} state
-     *   A State object describing the dependee's updated state.
-     * @param {string} value
-     *   The new value for the dependee's updated state.
-     */
-    update: function (selector, state, value) {
-      // Only act when the 'new' value is actually new.
+    update: function update(selector, state, value) {
       if (value !== this.values[selector][state.name]) {
         this.values[selector][state.name] = value;
         this.reevaluate();
       }
     },
 
-    /**
-     * Triggers change events in case a state changed.
-     *
-     * @memberof Drupal.states.Dependent#
-     */
-    reevaluate: function () {
-      // Check whether any constraint for this dependent state is satisfied.
+    reevaluate: function reevaluate() {
       var value = this.verifyConstraints(this.constraints);
 
-      // Only invoke a state change event when the value actually changed.
       if (value !== this.oldValue) {
-        // Store the new value so that we can compare later whether the value
-        // actually changed.
         this.oldValue = value;
 
-        // Normalize the value to match the normalized state name.
         value = invert(value, this.state.invert);
 
-        // By adding "trigger: true", we ensure that state changes don't go into
-        // infinite loops.
-        this.element.trigger({type: 'state:' + this.state, value: value, trigger: true});
+        this.element.trigger({ type: 'state:' + this.state, value: value, trigger: true });
       }
     },
 
-    /**
-     * Evaluates child constraints to determine if a constraint is satisfied.
-     *
-     * @memberof Drupal.states.Dependent#
-     *
-     * @param {object|Array} constraints
-     *   A constraint object or an array of constraints.
-     * @param {string} selector
-     *   The selector for these constraints. If undefined, there isn't yet a
-     *   selector that these constraints apply to. In that case, the keys of the
-     *   object are interpreted as the selector if encountered.
-     *
-     * @return {bool}
-     *   true or false, depending on whether these constraints are satisfied.
-     */
-    verifyConstraints: function (constraints, selector) {
+    verifyConstraints: function verifyConstraints(constraints, selector) {
       var result;
       if ($.isArray(constraints)) {
-        // This constraint is an array (OR or XOR).
         var hasXor = $.inArray('xor', constraints) === -1;
         var len = constraints.length;
         for (var i = 0; i < len; i++) {
           if (constraints[i] !== 'xor') {
             var constraint = this.checkConstraints(constraints[i], selector, i);
-            // Return if this is OR and we have a satisfied constraint or if
-            // this is XOR and we have a second satisfied constraint.
+
             if (constraint && (hasXor || result)) {
               return hasXor;
             }
             result = result || constraint;
           }
         }
-      }
-      // Make sure we don't try to iterate over things other than objects. This
-      // shouldn't normally occur, but in case the condition definition is
-      // bogus, we don't want to end up with an infinite loop.
-      else if ($.isPlainObject(constraints)) {
-        // This constraint is an object (AND).
-        for (var n in constraints) {
-          if (constraints.hasOwnProperty(n)) {
-            result = ternary(result, this.checkConstraints(constraints[n], selector, n));
-            // False and anything else will evaluate to false, so return when
-            // any false condition is found.
-            if (result === false) { return false; }
+      } else if ($.isPlainObject(constraints)) {
+          for (var n in constraints) {
+            if (constraints.hasOwnProperty(n)) {
+              result = ternary(result, this.checkConstraints(constraints[n], selector, n));
+
+              if (result === false) {
+                return false;
+              }
+            }
           }
         }
-      }
       return result;
     },
 
-    /**
-     * Checks whether the value matches the requirements for this constraint.
-     *
-     * @memberof Drupal.states.Dependent#
-     *
-     * @param {string|Array|object} value
-     *   Either the value of a state or an array/object of constraints. In the
-     *   latter case, resolving the constraint continues.
-     * @param {string} [selector]
-     *   The selector for this constraint. If undefined, there isn't yet a
-     *   selector that this constraint applies to. In that case, the state key
-     *   is propagates to a selector and resolving continues.
-     * @param {Drupal.states.State} [state]
-     *   The state to check for this constraint. If undefined, resolving
-     *   continues. If both selector and state aren't undefined and valid
-     *   non-numeric strings, a lookup for the actual value of that selector's
-     *   state is performed. This parameter is not a State object but a pristine
-     *   state string.
-     *
-     * @return {bool}
-     *   true or false, depending on whether this constraint is satisfied.
-     */
-    checkConstraints: function (value, selector, state) {
-      // Normalize the last parameter. If it's non-numeric, we treat it either
-      // as a selector (in case there isn't one yet) or as a trigger/state.
-      if (typeof state !== 'string' || (/[0-9]/).test(state[0])) {
+    checkConstraints: function checkConstraints(value, selector, state) {
+      if (typeof state !== 'string' || /[0-9]/.test(state[0])) {
         state = null;
-      }
-      else if (typeof selector === 'undefined') {
-        // Propagate the state to the selector when there isn't one yet.
+      } else if (typeof selector === 'undefined') {
         selector = state;
         state = null;
       }
 
       if (state !== null) {
-        // Constraints is the actual constraints of an element to check for.
         state = states.State.sanitize(state);
         return invert(this.compare(value, selector, state), state.invert);
-      }
-      else {
-        // Resolve this constraint as an AND/OR operator.
+      } else {
         return this.verifyConstraints(value, selector);
       }
     },
 
-    /**
-     * Gathers information about all required triggers.
-     *
-     * @memberof Drupal.states.Dependent#
-     *
-     * @return {object}
-     *   An object describing the required triggers.
-     */
-    getDependees: function () {
+    getDependees: function getDependees() {
       var cache = {};
-      // Swivel the lookup function so that we can record all available
-      // selector- state combinations for initialization.
+
       var _compare = this.compare;
       this.compare = function (reference, selector, state) {
         (cache[selector] || (cache[selector] = [])).push(state.name);
-        // Return nothing (=== undefined) so that the constraint loops are not
-        // broken.
       };
 
-      // This call doesn't actually verify anything but uses the resolving
-      // mechanism to go through the constraints array, trying to look up each
-      // value. Since we swivelled the compare function, this comparison returns
-      // undefined and lookup continues until the very end. Instead of lookup up
-      // the value, we record that combination of selector and state so that we
-      // can initialize all triggers.
       this.verifyConstraints(this.constraints);
-      // Restore the original function.
+
       this.compare = _compare;
 
       return cache;
     }
   };
 
-  /**
-   * @constructor Drupal.states.Trigger
-   *
-   * @param {object} args
-   *   Trigger arguments.
-   */
   states.Trigger = function (args) {
     $.extend(this, args);
 
     if (this.state in states.Trigger.states) {
       this.element = $(this.selector);
 
-      // Only call the trigger initializer when it wasn't yet attached to this
-      // element. Otherwise we'd end up with duplicate events.
       if (!this.element.data('trigger:' + this.state)) {
         this.initialize();
       }
@@ -380,18 +192,12 @@
   };
 
   states.Trigger.prototype = {
-
-    /**
-     * @memberof Drupal.states.Trigger#
-     */
-    initialize: function () {
+    initialize: function initialize() {
       var trigger = states.Trigger.states[this.state];
 
       if (typeof trigger === 'function') {
-        // We have a custom trigger initialization function.
         trigger.call(window, this.element);
-      }
-      else {
+      } else {
         for (var event in trigger) {
           if (trigger.hasOwnProperty(event)) {
             this.defaultTrigger(event, trigger[event]);
@@ -399,93 +205,55 @@
         }
       }
 
-      // Mark this trigger as initialized for this element.
       this.element.data('trigger:' + this.state, true);
     },
 
-    /**
-     * @memberof Drupal.states.Trigger#
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered.
-     * @param {function} valueFn
-     *   The function to call.
-     */
-    defaultTrigger: function (event, valueFn) {
+    defaultTrigger: function defaultTrigger(event, valueFn) {
       var oldValue = valueFn.call(this.element);
 
-      // Attach the event callback.
       this.element.on(event, $.proxy(function (e) {
         var value = valueFn.call(this.element, e);
-        // Only trigger the event if the value has actually changed.
+
         if (oldValue !== value) {
-          this.element.trigger({type: 'state:' + this.state, value: value, oldValue: oldValue});
+          this.element.trigger({ type: 'state:' + this.state, value: value, oldValue: oldValue });
           oldValue = value;
         }
       }, this));
 
       states.postponed.push($.proxy(function () {
-        // Trigger the event once for initialization purposes.
-        this.element.trigger({type: 'state:' + this.state, value: oldValue, oldValue: null});
+        this.element.trigger({ type: 'state:' + this.state, value: oldValue, oldValue: null });
       }, this));
     }
   };
 
-  /**
-   * This list of states contains functions that are used to monitor the state
-   * of an element. Whenever an element depends on the state of another element,
-   * one of these trigger functions is added to the dependee so that the
-   * dependent element can be updated.
-   *
-   * @name Drupal.states.Trigger.states
-   *
-   * @prop empty
-   * @prop checked
-   * @prop value
-   * @prop collapsed
-   */
   states.Trigger.states = {
-    // 'empty' describes the state to be monitored.
     empty: {
-      // 'keyup' is the (native DOM) event that we watch for.
-      keyup: function () {
-        // The function associated with that trigger returns the new value for
-        // the state.
+      keyup: function keyup() {
         return this.val() === '';
       }
     },
 
     checked: {
-      change: function () {
-        // prop() and attr() only takes the first element into account. To
-        // support selectors matching multiple checkboxes, iterate over all and
-        // return whether any is checked.
+      change: function change() {
         var checked = false;
         this.each(function () {
-          // Use prop() here as we want a boolean of the checkbox state.
-          // @see http://api.jquery.com/prop/
           checked = $(this).prop('checked');
-          // Break the each() loop if this is checked.
+
           return !checked;
         });
         return checked;
       }
     },
 
-    // For radio buttons, only return the value if the radio button is selected.
     value: {
-      keyup: function () {
-        // Radio buttons share the same :input[name="key"] selector.
+      keyup: function keyup() {
         if (this.length > 1) {
-          // Initial checked value of radios is undefined, so we return false.
           return this.filter(':checked').val() || false;
         }
         return this.val();
       },
-      change: function () {
-        // Radio buttons share the same :input[name="key"] selector.
+      change: function change() {
         if (this.length > 1) {
-          // Initial checked value of radios is undefined, so we return false.
           return this.filter(':checked').val() || false;
         }
         return this.val();
@@ -493,72 +261,38 @@
     },
 
     collapsed: {
-      collapsed: function (e) {
-        return (typeof e !== 'undefined' && 'value' in e) ? e.value : !this.is('[open]');
+      collapsed: function collapsed(e) {
+        return typeof e !== 'undefined' && 'value' in e ? e.value : !this.is('[open]');
       }
     }
   };
 
-  /**
-   * A state object is used for describing the state and performing aliasing.
-   *
-   * @constructor Drupal.states.State
-   *
-   * @param {string} state
-   *   The name of the state.
-   */
   states.State = function (state) {
-
-    /**
-     * Original unresolved name.
-     */
     this.pristine = this.name = state;
 
-    // Normalize the state name.
     var process = true;
     do {
-      // Iteratively remove exclamation marks and invert the value.
       while (this.name.charAt(0) === '!') {
         this.name = this.name.substring(1);
         this.invert = !this.invert;
       }
 
-      // Replace the state with its normalized name.
       if (this.name in states.State.aliases) {
         this.name = states.State.aliases[this.name];
-      }
-      else {
+      } else {
         process = false;
       }
     } while (process);
   };
 
-  /**
-   * Creates a new State object by sanitizing the passed value.
-   *
-   * @name Drupal.states.State.sanitize
-   *
-   * @param {string|Drupal.states.State} state
-   *   A state object or the name of a state.
-   *
-   * @return {Drupal.states.state}
-   *   A state object.
-   */
   states.State.sanitize = function (state) {
     if (state instanceof states.State) {
       return state;
-    }
-    else {
+    } else {
       return new states.State(state);
     }
   };
 
-  /**
-   * This list of aliases is used to normalize states and associates negated
-   * names with their respective inverse state.
-   *
-   * @name Drupal.states.State.aliases
-   */
   states.State.aliases = {
     enabled: '!disabled',
     invisible: '!visible',
@@ -575,44 +309,17 @@
   };
 
   states.State.prototype = {
-
-    /**
-     * @memberof Drupal.states.State#
-     */
     invert: false,
 
-    /**
-     * Ensures that just using the state object returns the name.
-     *
-     * @memberof Drupal.states.State#
-     *
-     * @return {string}
-     *   The name of the state.
-     */
-    toString: function () {
+    toString: function toString() {
       return this.name;
     }
   };
 
-  /**
-   * Global state change handlers. These are bound to "document" to cover all
-   * elements whose state changes. Events sent to elements within the page
-   * bubble up to these handlers. We use this system so that themes and modules
-   * can override these state change handlers for particular parts of a page.
-   */
-
   var $document = $(document);
   $document.on('state:disabled', function (e) {
-    // Only act when this change was triggered by a dependency and not by the
-    // element monitoring itself.
     if (e.trigger) {
-      $(e.target)
-        .prop('disabled', e.value)
-        .closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggleClass('form-disabled', e.value)
-        .find('select, input, textarea').prop('disabled', e.value);
-
-      // Note: WebKit nightlies don't reflect that change correctly.
-      // See https://bugs.webkit.org/show_bug.cgi?id=23789
+      $(e.target).prop('disabled', e.value).closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggleClass('form-disabled', e.value).find('select, input, textarea').prop('disabled', e.value);
     }
   });
 
@@ -620,13 +327,12 @@
     if (e.trigger) {
       if (e.value) {
         var label = 'label' + (e.target.id ? '[for=' + e.target.id + ']' : '');
-        var $label = $(e.target).attr({'required': 'required', 'aria-required': 'aria-required'}).closest('.js-form-item, .js-form-wrapper').find(label);
-        // Avoids duplicate required markers on initialization.
+        var $label = $(e.target).attr({ 'required': 'required', 'aria-required': 'aria-required' }).closest('.js-form-item, .js-form-wrapper').find(label);
+
         if (!$label.hasClass('js-form-required').length) {
           $label.addClass('js-form-required form-required');
         }
-      }
-      else {
+      } else {
         $(e.target).removeAttr('required aria-required').closest('.js-form-item, .js-form-wrapper').find('label.js-form-required').removeClass('js-form-required form-required');
       }
     }
@@ -652,73 +358,25 @@
     }
   });
 
-  /**
-   * These are helper functions implementing addition "operators" and don't
-   * implement any logic that is particular to states.
-   */
-
-  /**
-   * Bitwise AND with a third undefined state.
-   *
-   * @function Drupal.states~ternary
-   *
-   * @param {*} a
-   *   Value a.
-   * @param {*} b
-   *   Value b
-   *
-   * @return {bool}
-   *   The result.
-   */
   function ternary(a, b) {
     if (typeof a === 'undefined') {
       return b;
-    }
-    else if (typeof b === 'undefined') {
+    } else if (typeof b === 'undefined') {
       return a;
-    }
-    else {
+    } else {
       return a && b;
     }
   }
 
-  /**
-   * Inverts a (if it's not undefined) when invertState is true.
-   *
-   * @function Drupal.states~invert
-   *
-   * @param {*} a
-   *   The value to maybe invert.
-   * @param {bool} invertState
-   *   Whether to invert state or not.
-   *
-   * @return {bool}
-   *   The result.
-   */
   function invert(a, invertState) {
-    return (invertState && typeof a !== 'undefined') ? !a : a;
+    return invertState && typeof a !== 'undefined' ? !a : a;
   }
 
-  /**
-   * Compares two values while ignoring undefined values.
-   *
-   * @function Drupal.states~compare
-   *
-   * @param {*} a
-   *   Value a.
-   * @param {*} b
-   *   Value b.
-   *
-   * @return {bool}
-   *   The comparison result.
-   */
-  function compare(a, b) {
+  function _compare2(a, b) {
     if (a === b) {
       return typeof a === 'undefined' ? a : true;
-    }
-    else {
+    } else {
       return typeof a === 'undefined' || typeof b === 'undefined';
     }
   }
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/tabbingmanager.js b/core/misc/tabbingmanager.es6.js
similarity index 100%
copy from core/misc/tabbingmanager.js
copy to core/misc/tabbingmanager.es6.js
diff --git a/core/misc/tabbingmanager.js b/core/misc/tabbingmanager.js
index 134523f5bf..d937f1308f 100644
--- a/core/misc/tabbingmanager.js
+++ b/core/misc/tabbingmanager.js
@@ -1,184 +1,77 @@
 /**
- * @file
- * Manages page tabbing modifications made by modules.
- */
-
-/**
- * Allow modules to respond to the constrain event.
- *
- * @event drupalTabbingConstrained
- */
-
-/**
- * Allow modules to respond to the tabbingContext release event.
- *
- * @event drupalTabbingContextReleased
- */
-
-/**
- * Allow modules to respond to the constrain event.
- *
- * @event drupalTabbingContextActivated
- */
-
-/**
- * Allow modules to respond to the constrain event.
- *
- * @event drupalTabbingContextDeactivated
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/tabbingmanager.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Provides an API for managing page tabbing order modifications.
-   *
-   * @constructor Drupal~TabbingManager
-   */
   function TabbingManager() {
-
-    /**
-     * Tabbing sets are stored as a stack. The active set is at the top of the
-     * stack. We use a JavaScript array as if it were a stack; we consider the
-     * first element to be the bottom and the last element to be the top. This
-     * allows us to use JavaScript's built-in Array.push() and Array.pop()
-     * methods.
-     *
-     * @type {Array.<Drupal~TabbingContext>}
-     */
     this.stack = [];
   }
 
-  /**
-   * Add public methods to the TabbingManager class.
-   */
-  $.extend(TabbingManager.prototype, /** @lends Drupal~TabbingManager# */{
-
-    /**
-     * Constrain tabbing to the specified set of elements only.
-     *
-     * Makes elements outside of the specified set of elements unreachable via
-     * the tab key.
-     *
-     * @param {jQuery} elements
-     *   The set of elements to which tabbing should be constrained. Can also
-     *   be a jQuery-compatible selector string.
-     *
-     * @return {Drupal~TabbingContext}
-     *   The TabbingContext instance.
-     *
-     * @fires event:drupalTabbingConstrained
-     */
-    constrain: function (elements) {
-      // Deactivate all tabbingContexts to prepare for the new constraint. A
-      // tabbingContext instance will only be reactivated if the stack is
-      // unwound to it in the _unwindStack() method.
+  $.extend(TabbingManager.prototype, {
+    constrain: function constrain(elements) {
       var il = this.stack.length;
       for (var i = 0; i < il; i++) {
         this.stack[i].deactivate();
       }
 
-      // The "active tabbing set" are the elements tabbing should be constrained
-      // to.
       var $elements = $(elements).find(':tabbable').addBack(':tabbable');
 
       var tabbingContext = new TabbingContext({
-        // The level is the current height of the stack before this new
-        // tabbingContext is pushed on top of the stack.
         level: this.stack.length,
         $tabbableElements: $elements
       });
 
       this.stack.push(tabbingContext);
 
-      // Activates the tabbingContext; this will manipulate the DOM to constrain
-      // tabbing.
       tabbingContext.activate();
 
-      // Allow modules to respond to the constrain event.
       $(document).trigger('drupalTabbingConstrained', tabbingContext);
 
       return tabbingContext;
     },
 
-    /**
-     * Restores a former tabbingContext when an active one is released.
-     *
-     * The TabbingManager stack of tabbingContext instances will be unwound
-     * from the top-most released tabbingContext down to the first non-released
-     * tabbingContext instance. This non-released instance is then activated.
-     */
-    release: function () {
-      // Unwind as far as possible: find the topmost non-released
-      // tabbingContext.
+    release: function release() {
       var toActivate = this.stack.length - 1;
       while (toActivate >= 0 && this.stack[toActivate].released) {
         toActivate--;
       }
 
-      // Delete all tabbingContexts after the to be activated one. They have
-      // already been deactivated, so their effect on the DOM has been reversed.
       this.stack.splice(toActivate + 1);
 
-      // Get topmost tabbingContext, if one exists, and activate it.
       if (toActivate >= 0) {
         this.stack[toActivate].activate();
       }
     },
 
-    /**
-     * Makes all elements outside of the tabbingContext's set untabbable.
-     *
-     * Elements made untabbable have their original tabindex and autofocus
-     * values stored so that they might be restored later when this
-     * tabbingContext is deactivated.
-     *
-     * @param {Drupal~TabbingContext} tabbingContext
-     *   The TabbingContext instance that has been activated.
-     */
-    activate: function (tabbingContext) {
+    activate: function activate(tabbingContext) {
       var $set = tabbingContext.$tabbableElements;
       var level = tabbingContext.level;
-      // Determine which elements are reachable via tabbing by default.
-      var $disabledSet = $(':tabbable')
-        // Exclude elements of the active tabbing set.
-        .not($set);
-      // Set the disabled set on the tabbingContext.
+
+      var $disabledSet = $(':tabbable').not($set);
+
       tabbingContext.$disabledElements = $disabledSet;
-      // Record the tabindex for each element, so we can restore it later.
+
       var il = $disabledSet.length;
       for (var i = 0; i < il; i++) {
         this.recordTabindex($disabledSet.eq(i), level);
       }
-      // Make all tabbable elements outside of the active tabbing set
-      // unreachable.
-      $disabledSet
-        .prop('tabindex', -1)
-        .prop('autofocus', false);
-
-      // Set focus on an element in the tabbingContext's set of tabbable
-      // elements. First, check if there is an element with an autofocus
-      // attribute. Select the last one from the DOM order.
+
+      $disabledSet.prop('tabindex', -1).prop('autofocus', false);
+
       var $hasFocus = $set.filter('[autofocus]').eq(-1);
-      // If no element in the tabbable set has an autofocus attribute, select
-      // the first element in the set.
+
       if ($hasFocus.length === 0) {
         $hasFocus = $set.eq(0);
       }
       $hasFocus.trigger('focus');
     },
 
-    /**
-     * Restores that tabbable state of a tabbingContext's disabled elements.
-     *
-     * Elements that were made untabbable have their original tabindex and
-     * autofocus values restored.
-     *
-     * @param {Drupal~TabbingContext} tabbingContext
-     *   The TabbingContext instance that has been deactivated.
-     */
-    deactivate: function (tabbingContext) {
+    deactivate: function deactivate(tabbingContext) {
       var $set = tabbingContext.$disabledElements;
       var level = tabbingContext.level;
       var il = $set.length;
@@ -187,15 +80,7 @@
       }
     },
 
-    /**
-     * Records the tabindex and autofocus values of an untabbable element.
-     *
-     * @param {jQuery} $el
-     *   The set of elements that have been disabled.
-     * @param {number} level
-     *   The stack level for which the tabindex attribute should be recorded.
-     */
-    recordTabindex: function ($el, level) {
+    recordTabindex: function recordTabindex($el, level) {
       var tabInfo = $el.data('drupalOriginalTabIndices') || {};
       tabInfo[level] = {
         tabindex: $el[0].getAttribute('tabindex'),
@@ -204,37 +89,22 @@
       $el.data('drupalOriginalTabIndices', tabInfo);
     },
 
-    /**
-     * Restores the tabindex and autofocus values of a reactivated element.
-     *
-     * @param {jQuery} $el
-     *   The element that is being reactivated.
-     * @param {number} level
-     *   The stack level for which the tabindex attribute should be restored.
-     */
-    restoreTabindex: function ($el, level) {
+    restoreTabindex: function restoreTabindex($el, level) {
       var tabInfo = $el.data('drupalOriginalTabIndices');
       if (tabInfo && tabInfo[level]) {
         var data = tabInfo[level];
         if (data.tabindex) {
           $el[0].setAttribute('tabindex', data.tabindex);
-        }
-        // If the element did not have a tabindex at this stack level then
-        // remove it.
-        else {
-          $el[0].removeAttribute('tabindex');
-        }
+        } else {
+            $el[0].removeAttribute('tabindex');
+          }
         if (data.autofocus) {
           $el[0].setAttribute('autofocus', 'autofocus');
         }
 
-        // Clean up $.data.
         if (level === 0) {
-          // Remove all data.
           $el.removeData('drupalOriginalTabIndices');
-        }
-        else {
-          // Remove the data for this stack level and higher.
+        } else {
           var levelToDelete = level;
           while (tabInfo.hasOwnProperty(levelToDelete)) {
             delete tabInfo[levelToDelete];
@@ -246,124 +116,54 @@
     }
   });
 
-  /**
-   * Stores a set of tabbable elements.
-   *
-   * This constraint can be removed with the release() method.
-   *
-   * @constructor Drupal~TabbingContext
-   *
-   * @param {object} options
-   *   A set of initiating values
-   * @param {number} options.level
-   *   The level in the TabbingManager's stack of this tabbingContext.
-   * @param {jQuery} options.$tabbableElements
-   *   The DOM elements that should be reachable via the tab key when this
-   *   tabbingContext is active.
-   * @param {jQuery} options.$disabledElements
-   *   The DOM elements that should not be reachable via the tab key when this
-   *   tabbingContext is active.
-   * @param {bool} options.released
-   *   A released tabbingContext can never be activated again. It will be
-   *   cleaned up when the TabbingManager unwinds its stack.
-   * @param {bool} options.active
-   *   When true, the tabbable elements of this tabbingContext will be reachable
-   *   via the tab key and the disabled elements will not. Only one
-   *   tabbingContext can be active at a time.
-   */
   function TabbingContext(options) {
 
-    $.extend(this, /** @lends Drupal~TabbingContext# */{
-
-      /**
-       * @type {?number}
-       */
+    $.extend(this, {
       level: null,
 
-      /**
-       * @type {jQuery}
-       */
       $tabbableElements: $(),
 
-      /**
-       * @type {jQuery}
-       */
       $disabledElements: $(),
 
-      /**
-       * @type {bool}
-       */
       released: false,
 
-      /**
-       * @type {bool}
-       */
       active: false
     }, options);
   }
 
-  /**
-   * Add public methods to the TabbingContext class.
-   */
-  $.extend(TabbingContext.prototype, /** @lends Drupal~TabbingContext# */{
-
-    /**
-     * Releases this TabbingContext.
-     *
-     * Once a TabbingContext object is released, it can never be activated
-     * again.
-     *
-     * @fires event:drupalTabbingContextReleased
-     */
-    release: function () {
+  $.extend(TabbingContext.prototype, {
+    release: function release() {
       if (!this.released) {
         this.deactivate();
         this.released = true;
         Drupal.tabbingManager.release(this);
-        // Allow modules to respond to the tabbingContext release event.
+
         $(document).trigger('drupalTabbingContextReleased', this);
       }
     },
 
-    /**
-     * Activates this TabbingContext.
-     *
-     * @fires event:drupalTabbingContextActivated
-     */
-    activate: function () {
-      // A released TabbingContext object can never be activated again.
+    activate: function activate() {
       if (!this.active && !this.released) {
         this.active = true;
         Drupal.tabbingManager.activate(this);
-        // Allow modules to respond to the constrain event.
+
         $(document).trigger('drupalTabbingContextActivated', this);
       }
     },
 
-    /**
-     * Deactivates this TabbingContext.
-     *
-     * @fires event:drupalTabbingContextDeactivated
-     */
-    deactivate: function () {
+    deactivate: function deactivate() {
       if (this.active) {
         this.active = false;
         Drupal.tabbingManager.deactivate(this);
-        // Allow modules to respond to the constrain event.
+
         $(document).trigger('drupalTabbingContextDeactivated', this);
       }
     }
   });
 
-  // Mark this behavior as processed on the first pass and return if it is
-  // already processed.
   if (Drupal.tabbingManager) {
     return;
   }
 
-  /**
-   * @type {Drupal~TabbingManager}
-   */
   Drupal.tabbingManager = new TabbingManager();
-
-}(jQuery, Drupal));
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/tabledrag.js b/core/misc/tabledrag.es6.js
similarity index 100%
copy from core/misc/tabledrag.js
copy to core/misc/tabledrag.es6.js
diff --git a/core/misc/tabledrag.js b/core/misc/tabledrag.js
index 75468e60dd..e92f061204 100644
--- a/core/misc/tabledrag.js
+++ b/core/misc/tabledrag.js
@@ -1,45 +1,19 @@
 /**
- * @file
- * Provide dragging capabilities to admin uis.
- */
-
-/**
- * Triggers when weights columns are toggled.
- *
- * @event columnschange
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/tabledrag.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Store the state of weight columns display for all tables.
-   *
-   * Default value is to hide weight columns.
-   */
   var showWeight = JSON.parse(localStorage.getItem('Drupal.tableDrag.showWeight'));
 
-  /**
-   * Drag and drop table rows with field manipulation.
-   *
-   * Using the drupal_attach_tabledrag() function, any table with weights or
-   * parent relationships may be made into draggable tables. Columns containing
-   * a field may optionally be hidden, providing a better user experience.
-   *
-   * Created tableDrag instances may be modified with custom behaviors by
-   * overriding the .onDrag, .onDrop, .row.onSwap, and .row.onIndent methods.
-   * See blocks.js for an example of adding additional functionality to
-   * tableDrag.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.tableDrag = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       function initTableDrag(table, base) {
         if (table.length) {
-          // Create the new tableDrag instance. Save in the Drupal variable
-          // to allow other scripts access to the object.
           Drupal.tableDrag[base] = new Drupal.tableDrag(table[0], settings.tableDrag[base]);
         }
       }
@@ -52,128 +26,40 @@
     }
   };
 
-  /**
-   * Provides table and field manipulation.
-   *
-   * @constructor
-   *
-   * @param {HTMLElement} table
-   *   DOM object for the table to be made draggable.
-   * @param {object} tableSettings
-   *   Settings for the table added via drupal_add_dragtable().
-   */
   Drupal.tableDrag = function (table, tableSettings) {
     var self = this;
     var $table = $(table);
 
-    /**
-     * @type {jQuery}
-     */
     this.$table = $(table);
 
-    /**
-     *
-     * @type {HTMLElement}
-     */
     this.table = table;
 
-    /**
-     * @type {object}
-     */
     this.tableSettings = tableSettings;
 
-    /**
-     * Used to hold information about a current drag operation.
-     *
-     * @type {?HTMLElement}
-     */
     this.dragObject = null;
 
-    /**
-     * Provides operations for row manipulation.
-     *
-     * @type {?HTMLElement}
-     */
     this.rowObject = null;
 
-    /**
-     * Remember the previous element.
-     *
-     * @type {?HTMLElement}
-     */
     this.oldRowElement = null;
 
-    /**
-     * Used to determine up or down direction from last mouse move.
-     *
-     * @type {number}
-     */
     this.oldY = 0;
 
-    /**
-     * Whether anything in the entire table has changed.
-     *
-     * @type {bool}
-     */
     this.changed = false;
 
-    /**
-     * Maximum amount of allowed parenting.
-     *
-     * @type {number}
-     */
     this.maxDepth = 0;
 
-    /**
-     * Direction of the table.
-     *
-     * @type {number}
-     */
     this.rtl = $(this.table).css('direction') === 'rtl' ? -1 : 1;
 
-    /**
-     *
-     * @type {bool}
-     */
     this.striping = $(this.table).data('striping') === 1;
 
-    /**
-     * Configure the scroll settings.
-     *
-     * @type {object}
-     *
-     * @prop {number} amount
-     * @prop {number} interval
-     * @prop {number} trigger
-     */
-    this.scrollSettings = {amount: 4, interval: 50, trigger: 70};
-
-    /**
-     *
-     * @type {?number}
-     */
+    this.scrollSettings = { amount: 4, interval: 50, trigger: 70 };
+
     this.scrollInterval = null;
 
-    /**
-     *
-     * @type {number}
-     */
     this.scrollY = 0;
 
-    /**
-     *
-     * @type {number}
-     */
     this.windowHeight = 0;
 
-    /**
-     * Check this table's settings for parent relationships.
-     *
-     * For efficiency, large sections of code can be skipped if we don't need to
-     * track horizontal movement and indentations.
-     *
-     * @type {bool}
-     */
     this.indentEnabled = false;
     for (var group in tableSettings) {
       if (tableSettings.hasOwnProperty(group)) {
@@ -190,77 +76,49 @@
       }
     }
     if (this.indentEnabled) {
-
-      /**
-       * Total width of indents, set in makeDraggable.
-       *
-       * @type {number}
-       */
       this.indentCount = 1;
-      // Find the width of indentations to measure mouse movements against.
-      // Because the table doesn't need to start with any indentations, we
-      // manually append 2 indentations in the first draggable row, measure
-      // the offset, then remove.
+
       var indent = Drupal.theme('tableDragIndentation');
       var testRow = $('<tr/>').addClass('draggable').appendTo(table);
       var testCell = $('<td/>').appendTo(testRow).prepend(indent).prepend(indent);
       var $indentation = testCell.find('.js-indentation');
 
-      /**
-       *
-       * @type {number}
-       */
       this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;
       testRow.remove();
     }
 
-    // Make each applicable row draggable.
-    // Match immediate children of the parent element to allow nesting.
-    $table.find('> tr.draggable, > tbody > tr.draggable').each(function () { self.makeDraggable(this); });
-
-    // Add a link before the table for users to show or hide weight columns.
-    $table.before($('<button type="button" class="link tabledrag-toggle-weight"></button>')
-      .attr('title', Drupal.t('Re-order rows by numerical weight instead of dragging.'))
-      .on('click', $.proxy(function (e) {
-        e.preventDefault();
-        this.toggleColumns();
-      }, this))
-      .wrap('<div class="tabledrag-toggle-weight-wrapper"></div>')
-      .parent()
-    );
-
-    // Initialize the specified columns (for example, weight or parent columns)
-    // to show or hide according to user preference. This aids accessibility
-    // so that, e.g., screen reader users can choose to enter weight values and
-    // manipulate form elements directly, rather than using drag-and-drop..
+    $table.find('> tr.draggable, > tbody > tr.draggable').each(function () {
+      self.makeDraggable(this);
+    });
+
+    $table.before($('<button type="button" class="link tabledrag-toggle-weight"></button>').attr('title', Drupal.t('Re-order rows by numerical weight instead of dragging.')).on('click', $.proxy(function (e) {
+      e.preventDefault();
+      this.toggleColumns();
+    }, this)).wrap('<div class="tabledrag-toggle-weight-wrapper"></div>').parent());
+
     self.initColumns();
 
-    // Add event bindings to the document. The self variable is passed along
-    // as event handlers do not have direct access to the tableDrag object.
-    $(document).on('touchmove', function (event) { return self.dragRow(event.originalEvent.touches[0], self); });
-    $(document).on('touchend', function (event) { return self.dropRow(event.originalEvent.touches[0], self); });
-    $(document).on('mousemove pointermove', function (event) { return self.dragRow(event, self); });
-    $(document).on('mouseup pointerup', function (event) { return self.dropRow(event, self); });
+    $(document).on('touchmove', function (event) {
+      return self.dragRow(event.originalEvent.touches[0], self);
+    });
+    $(document).on('touchend', function (event) {
+      return self.dropRow(event.originalEvent.touches[0], self);
+    });
+    $(document).on('mousemove pointermove', function (event) {
+      return self.dragRow(event, self);
+    });
+    $(document).on('mouseup pointerup', function (event) {
+      return self.dropRow(event, self);
+    });
 
-    // React to localStorage event showing or hiding weight columns.
     $(window).on('storage', $.proxy(function (e) {
-      // Only react to 'Drupal.tableDrag.showWeight' value change.
       if (e.originalEvent.key === 'Drupal.tableDrag.showWeight') {
-        // This was changed in another window, get the new value for this
-        // window.
         showWeight = JSON.parse(e.originalEvent.newValue);
         this.displayColumns(showWeight);
       }
     }, this));
   };
 
-  /**
-   * Initialize columns containing form elements to be hidden by default.
-   *
-   * Identify and mark each cell with a CSS class so we can easily toggle
-   * show/hide it. Finally, hide columns if user does not have a
-   * 'Drupal.tableDrag.showWeight' localStorage value.
-   */
   Drupal.tableDrag.prototype.initColumns = function () {
     var $table = this.$table;
     var hidden;
@@ -268,8 +126,6 @@
     var columnIndex;
     for (var group in this.tableSettings) {
       if (this.tableSettings.hasOwnProperty(group)) {
-
-        // Find the first field in this group.
         for (var d in this.tableSettings[group]) {
           if (this.tableSettings[group].hasOwnProperty(d)) {
             var field = $table.find('.' + this.tableSettings[group][d].target).eq(0);
@@ -281,11 +137,7 @@
           }
         }
 
-        // Mark the column containing this field so it can be hidden.
         if (hidden && cell[0]) {
-          // Add 1 to our indexes. The nth-child selector is 1 based, not 0
-          // based. Match immediate children of the parent element to allow
-          // nesting.
           columnIndex = cell.parent().find('> td').index(cell.get(0)) + 1;
           $table.find('> thead > tr, > tbody > tr, > tr').each(this.addColspanClass(columnIndex));
         }
@@ -294,20 +146,8 @@
     this.displayColumns(showWeight);
   };
 
-  /**
-   * Mark cells that have colspan.
-   *
-   * In order to adjust the colspan instead of hiding them altogether.
-   *
-   * @param {number} columnIndex
-   *   The column index to add colspan class to.
-   *
-   * @return {function}
-   *   Function to add colspan class.
-   */
   Drupal.tableDrag.prototype.addColspanClass = function (columnIndex) {
     return function () {
-      // Get the columnIndex and adjust for any colspans in this row.
       var $row = $(this);
       var index = columnIndex;
       var cells = $row.children();
@@ -320,105 +160,62 @@
       if (index > 0) {
         cell = cells.filter(':nth-child(' + index + ')');
         if (cell[0].colSpan && cell[0].colSpan > 1) {
-          // If this cell has a colspan, mark it so we can reduce the colspan.
           cell.addClass('tabledrag-has-colspan');
-        }
-        else {
-          // Mark this cell so we can hide it.
+        } else {
           cell.addClass('tabledrag-hide');
         }
       }
     };
   };
 
-  /**
-   * Hide or display weight columns. Triggers an event on change.
-   *
-   * @fires event:columnschange
-   *
-   * @param {bool} displayWeight
-   *   'true' will show weight columns.
-   */
   Drupal.tableDrag.prototype.displayColumns = function (displayWeight) {
     if (displayWeight) {
       this.showColumns();
-    }
-    // Default action is to hide columns.
-    else {
-      this.hideColumns();
-    }
-    // Trigger an event to allow other scripts to react to this display change.
-    // Force the extra parameter as a bool.
+    } else {
+        this.hideColumns();
+      }
+
     $('table').findOnce('tabledrag').trigger('columnschange', !!displayWeight);
   };
 
-  /**
-   * Toggle the weight column depending on 'showWeight' value.
-   *
-   * Store only default override.
-   */
   Drupal.tableDrag.prototype.toggleColumns = function () {
     showWeight = !showWeight;
     this.displayColumns(showWeight);
     if (showWeight) {
-      // Save default override.
       localStorage.setItem('Drupal.tableDrag.showWeight', showWeight);
-    }
-    else {
-      // Reset the value to its default.
+    } else {
       localStorage.removeItem('Drupal.tableDrag.showWeight');
     }
   };
 
-  /**
-   * Hide the columns containing weight/parent form elements.
-   *
-   * Undo showColumns().
-   */
   Drupal.tableDrag.prototype.hideColumns = function () {
     var $tables = $('table').findOnce('tabledrag');
-    // Hide weight/parent cells and headers.
+
     $tables.find('.tabledrag-hide').css('display', 'none');
-    // Show TableDrag handles.
+
     $tables.find('.tabledrag-handle').css('display', '');
-    // Reduce the colspan of any effected multi-span columns.
+
     $tables.find('.tabledrag-has-colspan').each(function () {
       this.colSpan = this.colSpan - 1;
     });
-    // Change link text.
+
     $('.tabledrag-toggle-weight').text(Drupal.t('Show row weights'));
   };
 
-  /**
-   * Show the columns containing weight/parent form elements.
-   *
-   * Undo hideColumns().
-   */
   Drupal.tableDrag.prototype.showColumns = function () {
     var $tables = $('table').findOnce('tabledrag');
-    // Show weight/parent cells and headers.
+
     $tables.find('.tabledrag-hide').css('display', '');
-    // Hide TableDrag handles.
+
     $tables.find('.tabledrag-handle').css('display', 'none');
-    // Increase the colspan for any columns where it was previously reduced.
+
     $tables.find('.tabledrag-has-colspan').each(function () {
       this.colSpan = this.colSpan + 1;
     });
-    // Change link text.
+
     $('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights'));
   };
 
-  /**
-   * Find the target used within a particular row and group.
-   *
-   * @param {string} group
-   *   Group selector.
-   * @param {HTMLElement} row
-   *   The row HTML element.
-   *
-   * @return {object}
-   *   The table row settings.
-   */
   Drupal.tableDrag.prototype.rowSettings = function (group, row) {
     var field = $(row).find('.' + group);
     var tableSettingsGroup = this.tableSettings[group];
@@ -426,7 +223,6 @@
       if (tableSettingsGroup.hasOwnProperty(delta)) {
         var targetClass = tableSettingsGroup[delta].target;
         if (field.is('.' + targetClass)) {
-          // Return a copy of the row settings.
           var rowSettings = {};
           for (var n in tableSettingsGroup[delta]) {
             if (tableSettingsGroup[delta].hasOwnProperty(n)) {
@@ -439,27 +235,20 @@
     }
   };
 
-  /**
-   * Take an item and add event handlers to make it become draggable.
-   *
-   * @param {HTMLElement} item
-   *   The item to add event handlers to.
-   */
   Drupal.tableDrag.prototype.makeDraggable = function (item) {
     var self = this;
     var $item = $(item);
-    // Add a class to the title link.
+
     $item.find('td:first-of-type').find('a').addClass('menu-item__link');
-    // Create the handle.
+
     var handle = $('<a href="#" class="tabledrag-handle"><div class="handle">&nbsp;</div></a>').attr('title', Drupal.t('Drag to re-order'));
-    // Insert the handle after indentations (if any).
+
     var $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1);
     if ($indentationLast.length) {
       $indentationLast.after(handle);
-      // Update the total width of indentation in this entire table.
+
       self.indentCount = Math.max($item.find('.js-indentation').length, self.indentCount);
-    }
-    else {
+    } else {
       $item.find('td').eq(0).prepend(handle);
     }
 
@@ -471,27 +260,21 @@
       self.dragStart(event, self, item);
     });
 
-    // Prevent the anchor tag from jumping us to the top of the page.
     handle.on('click', function (e) {
       e.preventDefault();
     });
 
-    // Set blur cleanup when a handle is focused.
     handle.on('focus', function () {
       self.safeBlur = true;
     });
 
-    // On blur, fire the same function as a touchend/mouseup. This is used to
-    // update values after a row has been moved through the keyboard support.
     handle.on('blur', function (event) {
       if (self.rowObject && self.safeBlur) {
         self.dropRow(event, self);
       }
     });
 
-    // Add arrow-key support to the handle.
     handle.on('keydown', function (event) {
-      // If a rowObject doesn't yet exist and this isn't the tab key.
       if (event.keyCode !== 9 && !self.rowObject) {
         self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true);
       }
@@ -499,20 +282,14 @@
       var keyChange = false;
       var groupHeight;
 
-      /* eslint-disable no-fallthrough */
-
       switch (event.keyCode) {
-        // Left arrow.
         case 37:
-        // Safari left arrow.
         case 63234:
           keyChange = true;
           self.rowObject.indent(-1 * self.rtl);
           break;
 
-        // Up arrow.
         case 38:
-        // Safari up arrow.
         case 63232:
           var $previousRow = $(self.rowObject.element).prev('tr:first-of-type');
           var previousRow = $previousRow.get(0);
@@ -521,13 +298,11 @@
             previousRow = $previousRow.get(0);
           }
           if (previousRow) {
-            // Do not allow the onBlur cleanup.
             self.safeBlur = false;
             self.rowObject.direction = 'up';
             keyChange = true;
 
             if ($(item).is('.tabledrag-root')) {
-              // Swap with the previous top-level row.
               groupHeight = 0;
               while (previousRow && $previousRow.find('.js-indentation').length) {
                 $previousRow = $(previousRow).prev('tr:first-of-type');
@@ -536,34 +311,27 @@
               }
               if (previousRow) {
                 self.rowObject.swap('before', previousRow);
-                // No need to check for indentation, 0 is the only valid one.
+
                 window.scrollBy(0, -groupHeight);
               }
-            }
-            else if (self.table.tBodies[0].rows[0] !== previousRow || $previousRow.is('.draggable')) {
-              // Swap with the previous row (unless previous row is the first
-              // one and undraggable).
+            } else if (self.table.tBodies[0].rows[0] !== previousRow || $previousRow.is('.draggable')) {
               self.rowObject.swap('before', previousRow);
               self.rowObject.interval = null;
               self.rowObject.indent(0);
               window.scrollBy(0, -parseInt(item.offsetHeight, 10));
             }
-            // Regain focus after the DOM manipulation.
+
             handle.trigger('focus');
           }
           break;
 
-        // Right arrow.
         case 39:
-        // Safari right arrow.
         case 63235:
           keyChange = true;
           self.rowObject.indent(self.rtl);
           break;
 
-        // Down arrow.
         case 40:
-        // Safari down arrow.
         case 63233:
           var $nextRow = $(self.rowObject.group).eq(-1).next('tr:first-of-type');
           var nextRow = $nextRow.get(0);
@@ -572,13 +340,11 @@
             nextRow = $nextRow.get(0);
           }
           if (nextRow) {
-            // Do not allow the onBlur cleanup.
             self.safeBlur = false;
             self.rowObject.direction = 'down';
             keyChange = true;
 
             if ($(item).is('.tabledrag-root')) {
-              // Swap with the next group (necessarily a top-level one).
               groupHeight = 0;
               var nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false);
               if (nextGroup) {
@@ -587,25 +353,21 @@
                 });
                 var nextGroupRow = $(nextGroup.group).eq(-1).get(0);
                 self.rowObject.swap('after', nextGroupRow);
-                // No need to check for indentation, 0 is the only valid one.
+
                 window.scrollBy(0, parseInt(groupHeight, 10));
               }
-            }
-            else {
-              // Swap with the next row.
+            } else {
               self.rowObject.swap('after', nextRow);
               self.rowObject.interval = null;
               self.rowObject.indent(0);
               window.scrollBy(0, parseInt(item.offsetHeight, 10));
             }
-            // Regain focus after the DOM manipulation.
+
             handle.trigger('focus');
           }
           break;
       }
 
-      /* eslint-enable no-fallthrough */
-
       if (self.rowObject && self.rowObject.changed === true) {
         $(item).addClass('drag');
         if (self.oldRowElement) {
@@ -618,49 +380,24 @@
         self.onDrag();
       }
 
-      // Returning false if we have an arrow key to prevent scrolling.
       if (keyChange) {
         return false;
       }
     });
 
-    // Compatibility addition, return false on keypress to prevent unwanted
-    // scrolling. IE and Safari will suppress scrolling on keydown, but all
-    // other browsers need to return false on keypress.
-    // http://www.quirksmode.org/js/keys.html
     handle.on('keypress', function (event) {
 
-      /* eslint-disable no-fallthrough */
-
       switch (event.keyCode) {
-        // Left arrow.
         case 37:
-        // Up arrow.
         case 38:
-        // Right arrow.
         case 39:
-        // Down arrow.
         case 40:
           return false;
       }
-
-      /* eslint-enable no-fallthrough */
-
     });
   };
 
-  /**
-   * Pointer event initiator, creates drag object and information.
-   *
-   * @param {jQuery.Event} event
-   *   The event object that trigger the drag.
-   * @param {Drupal.tableDrag} self
-   *   The drag handle.
-   * @param {HTMLElement} item
-   *   The item that that is being dragged.
-   */
   Drupal.tableDrag.prototype.dragStart = function (event, self, item) {
-    // Create a new dragObject recording the pointer information.
     self.dragObject = {};
     self.dragObject.initOffset = self.getPointerOffset(item, event);
     self.dragObject.initPointerCoords = self.pointerCoords(event);
@@ -668,66 +405,47 @@
       self.dragObject.indentPointerPos = self.dragObject.initPointerCoords;
     }
 
-    // If there's a lingering row object from the keyboard, remove its focus.
     if (self.rowObject) {
       $(self.rowObject.element).find('a.tabledrag-handle').trigger('blur');
     }
 
-    // Create a new rowObject for manipulation of this row.
     self.rowObject = new self.row(item, 'pointer', self.indentEnabled, self.maxDepth, true);
 
-    // Save the position of the table.
     self.table.topY = $(self.table).offset().top;
     self.table.bottomY = self.table.topY + self.table.offsetHeight;
 
-    // Add classes to the handle and row.
     $(item).addClass('drag');
 
-    // Set the document to use the move cursor during drag.
     $('body').addClass('drag');
     if (self.oldRowElement) {
       $(self.oldRowElement).removeClass('drag-previous');
     }
   };
 
-  /**
-   * Pointer movement handler, bound to document.
-   *
-   * @param {jQuery.Event} event
-   *   The pointer event.
-   * @param {Drupal.tableDrag} self
-   *   The tableDrag instance.
-   *
-   * @return {bool|undefined}
-   *   Undefined if no dragObject is defined, false otherwise.
-   */
   Drupal.tableDrag.prototype.dragRow = function (event, self) {
     if (self.dragObject) {
       self.currentPointerCoords = self.pointerCoords(event);
       var y = self.currentPointerCoords.y - self.dragObject.initOffset.y;
       var x = self.currentPointerCoords.x - self.dragObject.initOffset.x;
 
-      // Check for row swapping and vertical scrolling.
       if (y !== self.oldY) {
         self.rowObject.direction = y > self.oldY ? 'down' : 'up';
-        // Update the old value.
+
         self.oldY = y;
-        // Check if the window should be scrolled (and how fast).
+
         var scrollAmount = self.checkScroll(self.currentPointerCoords.y);
-        // Stop any current scrolling.
+
         clearInterval(self.scrollInterval);
-        // Continue scrolling if the mouse has moved in the scroll direction.
+
         if (scrollAmount > 0 && self.rowObject.direction === 'down' || scrollAmount < 0 && self.rowObject.direction === 'up') {
           self.setScroll(scrollAmount);
         }
 
-        // If we have a valid target, perform the swap and restripe the table.
         var currentRow = self.findDropTargetRow(x, y);
         if (currentRow) {
           if (self.rowObject.direction === 'down') {
             self.rowObject.swap('after', currentRow, self);
-          }
-          else {
+          } else {
             self.rowObject.swap('before', currentRow, self);
           }
           if (self.striping === true) {
@@ -736,16 +454,13 @@
         }
       }
 
-      // Similar to row swapping, handle indentations.
       if (self.indentEnabled) {
         var xDiff = self.currentPointerCoords.x - self.dragObject.indentPointerPos.x;
-        // Set the number of indentations the pointer has been moved left or
-        // right.
+
         var indentDiff = Math.round(xDiff / self.indentAmount);
-        // Indent the row with our estimated diff, which may be further
-        // restricted according to the rows around this row.
+
         var indentChange = self.rowObject.indent(indentDiff);
-        // Update table and pointer indentations.
+
         self.dragObject.indentPointerPos.x += self.indentAmount * indentChange * self.rtl;
         self.indentCount = Math.max(self.indentCount, self.rowObject.indents);
       }
@@ -754,29 +469,17 @@
     }
   };
 
-  /**
-   * Pointerup behavior.
-   *
-   * @param {jQuery.Event} event
-   *   The pointer event.
-   * @param {Drupal.tableDrag} self
-   *   The tableDrag instance.
-   */
   Drupal.tableDrag.prototype.dropRow = function (event, self) {
     var droppedRow;
     var $droppedRow;
 
-    // Drop row functionality.
     if (self.rowObject !== null) {
       droppedRow = self.rowObject.element;
       $droppedRow = $(droppedRow);
-      // The row is already in the right place so we just release it.
+
       if (self.rowObject.changed === true) {
-        // Update the fields in the dropped row.
         self.updateFields(droppedRow);
 
-        // If a setting exists for affecting the entire group, update all the
-        // fields in the entire dragged group.
         for (var group in self.tableSettings) {
           if (self.tableSettings.hasOwnProperty(group)) {
             var rowSettings = self.rowSettings(group, droppedRow);
@@ -809,7 +512,6 @@
       self.rowObject = null;
     }
 
-    // Functionality specific only to pointerup events.
     if (self.dragObject !== null) {
       self.dragObject = null;
       $('body').removeClass('drag');
@@ -817,18 +519,9 @@
     }
   };
 
-  /**
-   * Get the coordinates from the event (allowing for browser differences).
-   *
-   * @param {jQuery.Event} event
-   *   The pointer event.
-   *
-   * @return {object}
-   *   An object with `x` and `y` keys indicating the position.
-   */
   Drupal.tableDrag.prototype.pointerCoords = function (event) {
     if (event.pageX || event.pageY) {
-      return {x: event.pageX, y: event.pageY};
+      return { x: event.pageX, y: event.pageY };
     }
     return {
       x: event.clientX + document.body.scrollLeft - document.body.clientLeft,
@@ -836,39 +529,12 @@
     };
   };
 
-  /**
-   * Get the event offset from the target element.
-   *
-   * Given a target element and a pointer event, get the event offset from that
-   * element. To do this we need the element's position and the target position.
-   *
-   * @param {HTMLElement} target
-   *   The target HTML element.
-   * @param {jQuery.Event} event
-   *   The pointer event.
-   *
-   * @return {object}
-   *   An object with `x` and `y` keys indicating the position.
-   */
   Drupal.tableDrag.prototype.getPointerOffset = function (target, event) {
     var docPos = $(target).offset();
     var pointerPos = this.pointerCoords(event);
-    return {x: pointerPos.x - docPos.left, y: pointerPos.y - docPos.top};
+    return { x: pointerPos.x - docPos.left, y: pointerPos.y - docPos.top };
   };
 
-  /**
-   * Find the row the mouse is currently over.
-   *
-   * This row is then taken and swapped with the one being dragged.
-   *
-   * @param {number} x
-   *   The x coordinate of the mouse on the page (not the screen).
-   * @param {number} y
-   *   The y coordinate of the mouse on the page (not the screen).
-   *
-   * @return {*}
-   *   The drop target row, if found.
-   */
   Drupal.tableDrag.prototype.findDropTargetRow = function (x, y) {
     var rows = $(this.table.tBodies[0].rows).not(':hidden');
     for (var n = 0; n < rows.length; n++) {
@@ -876,42 +542,30 @@
       var $row = $(row);
       var rowY = $row.offset().top;
       var rowHeight;
-      // Because Safari does not report offsetHeight on table rows, but does on
-      // table cells, grab the firstChild of the row and use that instead.
-      // http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari.
+
       if (row.offsetHeight === 0) {
         rowHeight = parseInt(row.firstChild.offsetHeight, 10) / 2;
-      }
-      // Other browsers.
-      else {
-        rowHeight = parseInt(row.offsetHeight, 10) / 2;
-      }
+      } else {
+          rowHeight = parseInt(row.offsetHeight, 10) / 2;
+        }
 
-      // Because we always insert before, we need to offset the height a bit.
-      if ((y > (rowY - rowHeight)) && (y < (rowY + rowHeight))) {
+      if (y > rowY - rowHeight && y < rowY + rowHeight) {
         if (this.indentEnabled) {
-          // Check that this row is not a child of the row being dragged.
           for (n in this.rowObject.group) {
             if (this.rowObject.group[n] === row) {
               return null;
             }
           }
-        }
-        else {
-          // Do not allow a row to be swapped with itself.
+        } else {
           if (row === this.rowObject.element) {
             return null;
           }
         }
 
-        // Check that swapping with this row is allowed.
         if (!this.rowObject.isValidSwap(row)) {
           return null;
         }
 
-        // We may have found the row the mouse just passed over, but it doesn't
-        // take into account hidden rows. Skip backwards until we find a
-        // draggable row.
         while ($row.is(':hidden') && $row.prev('tr').is(':hidden')) {
           $row = $row.prev('tr:first-of-type');
           row = $row.get(0);
@@ -922,30 +576,14 @@
     return null;
   };
 
-  /**
-   * After the row is dropped, update the table fields.
-   *
-   * @param {HTMLElement} changedRow
-   *   DOM object for the row that was just dropped.
-   */
   Drupal.tableDrag.prototype.updateFields = function (changedRow) {
     for (var group in this.tableSettings) {
       if (this.tableSettings.hasOwnProperty(group)) {
-        // Each group may have a different setting for relationship, so we find
-        // the source rows for each separately.
         this.updateField(changedRow, group);
       }
     }
   };
 
-  /**
-   * After the row is dropped, update a single table field.
-   *
-   * @param {HTMLElement} changedRow
-   *   DOM object for the row that was just dropped.
-   * @param {string} group
-   *   The settings group on which field updates will occur.
-   */
   Drupal.tableDrag.prototype.updateField = function (changedRow, group) {
     var rowSettings = this.rowSettings(group, changedRow);
     var $changedRow = $(changedRow);
@@ -953,72 +591,54 @@
     var $previousRow;
     var previousRow;
     var useSibling;
-    // Set the row as its own target.
+
     if (rowSettings.relationship === 'self' || rowSettings.relationship === 'group') {
       sourceRow = changedRow;
-    }
-    // Siblings are easy, check previous and next rows.
-    else if (rowSettings.relationship === 'sibling') {
-      $previousRow = $changedRow.prev('tr:first-of-type');
-      previousRow = $previousRow.get(0);
-      var $nextRow = $changedRow.next('tr:first-of-type');
-      var nextRow = $nextRow.get(0);
-      sourceRow = changedRow;
-      if ($previousRow.is('.draggable') && $previousRow.find('.' + group).length) {
-        if (this.indentEnabled) {
-          if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
+    } else if (rowSettings.relationship === 'sibling') {
+        $previousRow = $changedRow.prev('tr:first-of-type');
+        previousRow = $previousRow.get(0);
+        var $nextRow = $changedRow.next('tr:first-of-type');
+        var nextRow = $nextRow.get(0);
+        sourceRow = changedRow;
+        if ($previousRow.is('.draggable') && $previousRow.find('.' + group).length) {
+          if (this.indentEnabled) {
+            if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
+              sourceRow = previousRow;
+            }
+          } else {
             sourceRow = previousRow;
           }
-        }
-        else {
-          sourceRow = previousRow;
-        }
-      }
-      else if ($nextRow.is('.draggable') && $nextRow.find('.' + group).length) {
-        if (this.indentEnabled) {
-          if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
+        } else if ($nextRow.is('.draggable') && $nextRow.find('.' + group).length) {
+          if (this.indentEnabled) {
+            if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) {
+              sourceRow = nextRow;
+            }
+          } else {
             sourceRow = nextRow;
           }
         }
-        else {
-          sourceRow = nextRow;
-        }
-      }
-    }
-    // Parents, look up the tree until we find a field not in this group.
-    // Go up as many parents as indentations in the changed row.
-    else if (rowSettings.relationship === 'parent') {
-      $previousRow = $changedRow.prev('tr');
-      previousRow = $previousRow;
-      while ($previousRow.length && $previousRow.find('.js-indentation').length >= this.rowObject.indents) {
-        $previousRow = $previousRow.prev('tr');
-        previousRow = $previousRow;
-      }
-      // If we found a row.
-      if ($previousRow.length) {
-        sourceRow = $previousRow.get(0);
-      }
-      // Otherwise we went all the way to the left of the table without finding
-      // a parent, meaning this item has been placed at the root level.
-      else {
-        // Use the first row in the table as source, because it's guaranteed to
-        // be at the root level. Find the first item, then compare this row
-        // against it as a sibling.
-        sourceRow = $(this.table).find('tr.draggable:first-of-type').get(0);
-        if (sourceRow === this.rowObject.element) {
-          sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]).next('tr.draggable').get(0);
+      } else if (rowSettings.relationship === 'parent') {
+          $previousRow = $changedRow.prev('tr');
+          previousRow = $previousRow;
+          while ($previousRow.length && $previousRow.find('.js-indentation').length >= this.rowObject.indents) {
+            $previousRow = $previousRow.prev('tr');
+            previousRow = $previousRow;
+          }
+
+          if ($previousRow.length) {
+            sourceRow = $previousRow.get(0);
+          } else {
+              sourceRow = $(this.table).find('tr.draggable:first-of-type').get(0);
+              if (sourceRow === this.rowObject.element) {
+                sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]).next('tr.draggable').get(0);
+              }
+              useSibling = true;
+            }
         }
-        useSibling = true;
-      }
-    }
 
-    // Because we may have moved the row from one category to another,
-    // take a look at our sibling and borrow its sources and targets.
     this.copyDragClasses(sourceRow, changedRow, group);
     rowSettings = this.rowSettings(group, changedRow);
 
-    // In the case that we're looking for a parent, but the row is at the top
-    // of the tree, copy our sibling's values.
     if (useSibling) {
       rowSettings.relationship = 'sibling';
       rowSettings.source = rowSettings.target;
@@ -1027,44 +647,35 @@
     var targetClass = '.' + rowSettings.target;
     var targetElement = $changedRow.find(targetClass).get(0);
 
-    // Check if a target element exists in this row.
     if (targetElement) {
       var sourceClass = '.' + rowSettings.source;
       var sourceElement = $(sourceClass, sourceRow).get(0);
       switch (rowSettings.action) {
         case 'depth':
-          // Get the depth of the target row.
           targetElement.value = $(sourceElement).closest('tr').find('.js-indentation').length;
           break;
 
         case 'match':
-          // Update the value.
           targetElement.value = sourceElement.value;
           break;
 
         case 'order':
           var siblings = this.rowObject.findSiblings(rowSettings);
           if ($(targetElement).is('select')) {
-            // Get a list of acceptable values.
             var values = [];
             $(targetElement).find('option').each(function () {
               values.push(this.value);
             });
             var maxVal = values[values.length - 1];
-            // Populate the values in the siblings.
+
             $(siblings).find(targetClass).each(function () {
-              // If there are more items than possible values, assign the
-              // maximum value to the row.
               if (values.length > 0) {
                 this.value = values.shift();
-              }
-              else {
+              } else {
                 this.value = maxVal;
               }
             });
-          }
-          else {
-            // Assume a numeric input field.
+          } else {
             var weight = parseInt($(siblings[0]).find(targetClass).val(), 10) || 0;
             $(siblings).find(targetClass).each(function () {
               this.value = weight;
@@ -1076,20 +687,6 @@
     }
   };
 
-  /**
-   * Copy all tableDrag related classes from one row to another.
-   *
-   * Copy all special tableDrag classes from one row's form elements to a
-   * different one, removing any special classes that the destination row
-   * may have had.
-   *
-   * @param {HTMLElement} sourceRow
-   *   The element for the source row.
-   * @param {HTMLElement} targetRow
-   *   The element for the target row.
-   * @param {string} group
-   *   The group selector.
-   */
   Drupal.tableDrag.prototype.copyDragClasses = function (sourceRow, targetRow, group) {
     var sourceElement = $(sourceRow).find('.' + group);
     var targetElement = $(targetRow).find('.' + group);
@@ -1098,15 +695,6 @@
     }
   };
 
-  /**
-   * Check the suggested scroll of the table.
-   *
-   * @param {number} cursorY
-   *   The Y position of the cursor.
-   *
-   * @return {number}
-   *   The suggested scroll.
-   */
   Drupal.tableDrag.prototype.checkScroll = function (cursorY) {
     var de = document.documentElement;
     var b = document.body;
@@ -1115,37 +703,27 @@
     var scrollY;
     if (document.all) {
       scrollY = this.scrollY = !de.scrollTop ? b.scrollTop : de.scrollTop;
-    }
-    else {
+    } else {
       scrollY = this.scrollY = window.pageYOffset ? window.pageYOffset : window.scrollY;
     }
     var trigger = this.scrollSettings.trigger;
     var delta = 0;
 
-    // Return a scroll speed relative to the edge of the screen.
     if (cursorY - scrollY > windowHeight - trigger) {
       delta = trigger / (windowHeight + scrollY - cursorY);
-      delta = (delta > 0 && delta < trigger) ? delta : trigger;
+      delta = delta > 0 && delta < trigger ? delta : trigger;
       return delta * this.scrollSettings.amount;
-    }
-    else if (cursorY - scrollY < trigger) {
+    } else if (cursorY - scrollY < trigger) {
       delta = trigger / (cursorY - scrollY);
-      delta = (delta > 0 && delta < trigger) ? delta : trigger;
+      delta = delta > 0 && delta < trigger ? delta : trigger;
       return -delta * this.scrollSettings.amount;
     }
   };
 
-  /**
-   * Set the scroll for the table.
-   *
-   * @param {number} scrollAmount
-   *   The amount of scroll to apply to the window.
-   */
   Drupal.tableDrag.prototype.setScroll = function (scrollAmount) {
     var self = this;
 
     this.scrollInterval = setInterval(function () {
-      // Update the scroll values stored in the object.
       self.checkScroll(self.currentPointerCoords.y);
       var aboveTable = self.scrollY > self.table.topY;
       var belowTable = self.scrollY + self.windowHeight < self.table.bottomY;
@@ -1155,55 +733,18 @@
     }, this.scrollSettings.interval);
   };
 
-  /**
-   * Command to restripe table properly.
-   */
   Drupal.tableDrag.prototype.restripeTable = function () {
-    // :even and :odd are reversed because jQuery counts from 0 and
-    // we count from 1, so we're out of sync.
-    // Match immediate children of the parent element to allow nesting.
-    $(this.table).find('> tbody > tr.draggable, > tr.draggable')
-      .filter(':visible')
-      .filter(':odd').removeClass('odd').addClass('even').end()
-      .filter(':even').removeClass('even').addClass('odd');
+    $(this.table).find('> tbody > tr.draggable, > tr.draggable').filter(':visible').filter(':odd').removeClass('odd').addClass('even').end().filter(':even').removeClass('even').addClass('odd');
   };
 
-  /**
-   * Stub function. Allows a custom handler when a row begins dragging.
-   *
-   * @return {null}
-   *   Returns null when the stub function is used.
-   */
   Drupal.tableDrag.prototype.onDrag = function () {
     return null;
   };
 
-  /**
-   * Stub function. Allows a custom handler when a row is dropped.
-   *
-   * @return {null}
-   *   Returns null when the stub function is used.
-   */
   Drupal.tableDrag.prototype.onDrop = function () {
     return null;
   };
 
-  /**
-   * Constructor to make a new object to manipulate a table row.
-   *
-   * @param {HTMLElement} tableRow
-   *   The DOM element for the table row we will be manipulating.
-   * @param {string} method
-   *   The method in which this row is being moved. Either 'keyboard' or
-   *   'mouse'.
-   * @param {bool} indentEnabled
-   *   Whether the containing table uses indentations. Used for optimizations.
-   * @param {number} maxDepth
-   *   The maximum amount of indentations this row may contain.
-   * @param {bool} addClasses
-   *   Whether we want to add classes to this row to indicate child
-   *   relationships.
-   */
   Drupal.tableDrag.prototype.row = function (tableRow, method, indentEnabled, maxDepth, addClasses) {
     var $tableRow = $(tableRow);
 
@@ -1215,29 +756,19 @@
     this.table = $tableRow.closest('table')[0];
     this.indentEnabled = indentEnabled;
     this.maxDepth = maxDepth;
-    // Direction the row is being moved.
+
     this.direction = '';
     if (this.indentEnabled) {
       this.indents = $tableRow.find('.js-indentation').length;
       this.children = this.findChildren(addClasses);
       this.group = $.merge(this.group, this.children);
-      // Find the depth of this entire group.
+
       for (var n = 0; n < this.group.length; n++) {
         this.groupDepth = Math.max($(this.group[n]).find('.js-indentation').length, this.groupDepth);
       }
     }
   };
 
-  /**
-   * Find all children of rowObject by indentation.
-   *
-   * @param {bool} addClasses
-   *   Whether we want to add classes to this row to indicate child
-   *   relationships.
-   *
-   * @return {Array}
-   *   An array of children of the row.
-   */
   Drupal.tableDrag.prototype.row.prototype.findChildren = function (addClasses) {
     var parentIndentation = this.indents;
     var currentRow = $(this.element, this.table).next('tr.draggable');
@@ -1246,27 +777,24 @@
 
     function rowIndentation(indentNum, el) {
       var self = $(el);
-      if (child === 1 && (indentNum === parentIndentation)) {
+      if (child === 1 && indentNum === parentIndentation) {
         self.addClass('tree-child-first');
       }
       if (indentNum === parentIndentation) {
         self.addClass('tree-child');
-      }
-      else if (indentNum > parentIndentation) {
+      } else if (indentNum > parentIndentation) {
         self.addClass('tree-child-horizontal');
       }
     }
 
     while (currentRow.length) {
-      // A greater indentation indicates this is a child.
       if (currentRow.find('.js-indentation').length > parentIndentation) {
         child++;
         rows.push(currentRow[0]);
         if (addClasses) {
           currentRow.find('.js-indentation').each(rowIndentation);
         }
-      }
-      else {
+      } else {
         break;
       }
       currentRow = currentRow.next('tr.draggable');
@@ -1277,15 +805,6 @@
     return rows;
   };
 
-  /**
-   * Ensure that two rows are allowed to be swapped.
-   *
-   * @param {HTMLElement} row
-   *   DOM object for the row being considered for swapping.
-   *
-   * @return {bool}
-   *   Whether the swap is a valid swap or not.
-   */
   Drupal.tableDrag.prototype.row.prototype.isValidSwap = function (row) {
     var $row = $(row);
     if (this.indentEnabled) {
@@ -1294,20 +813,17 @@
       if (this.direction === 'down') {
         prevRow = row;
         nextRow = $row.next('tr').get(0);
-      }
-      else {
+      } else {
         prevRow = $row.prev('tr').get(0);
         nextRow = row;
       }
       this.interval = this.validIndentInterval(prevRow, nextRow);
 
-      // We have an invalid swap if the valid indentations interval is empty.
       if (this.interval.min > this.interval.max) {
         return false;
       }
     }
 
-    // Do not let an un-draggable first row have anything put before it.
     if (this.table.tBodies[0].rows[0] === row && $row.is(':not(.draggable)')) {
       return false;
     }
@@ -1315,21 +831,12 @@
     return true;
   };
 
-  /**
-   * Perform the swap between two rows.
-   *
-   * @param {string} position
-   *   Whether the swap will occur 'before' or 'after' the given row.
-   * @param {HTMLElement} row
-   *   DOM element what will be swapped with the row group.
-   */
   Drupal.tableDrag.prototype.row.prototype.swap = function (position, row) {
-    // Makes sure only DOM object are passed to Drupal.detachBehaviors().
     this.group.forEach(function (row) {
       Drupal.detachBehaviors(row, drupalSettings, 'move');
     });
     $(row)[position](this.group);
-    // Makes sure only DOM object are passed to Drupal.attachBehaviors()s.
+
     this.group.forEach(function (row) {
       Drupal.attachBehaviors(row, drupalSettings);
     });
@@ -1337,88 +844,50 @@
     this.onSwap(row);
   };
 
-  /**
-   * Determine the valid indentations interval for the row at a given position.
-   *
-   * @param {?HTMLElement} prevRow
-   *   DOM object for the row before the tested position
-   *   (or null for first position in the table).
-   * @param {?HTMLElement} nextRow
-   *   DOM object for the row after the tested position
-   *   (or null for last position in the table).
-   *
-   * @return {object}
-   *   An object with the keys `min` and `max` to indicate the valid indent
-   *   interval.
-   */
   Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function (prevRow, nextRow) {
     var $prevRow = $(prevRow);
     var minIndent;
     var maxIndent;
 
-    // Minimum indentation:
-    // Do not orphan the next row.
     minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0;
 
-    // Maximum indentation:
     if (!prevRow || $prevRow.is(':not(.draggable)') || $(this.element).is('.tabledrag-root')) {
-      // Do not indent:
-      // - the first row in the table,
-      // - rows dragged below a non-draggable row,
-      // - 'root' rows.
       maxIndent = 0;
-    }
-    else {
-      // Do not go deeper than as a child of the previous row.
+    } else {
       maxIndent = $prevRow.find('.js-indentation').length + ($prevRow.is('.tabledrag-leaf') ? 0 : 1);
-      // Limit by the maximum allowed depth for the table.
+
       if (this.maxDepth) {
         maxIndent = Math.min(maxIndent, this.maxDepth - (this.groupDepth - this.indents));
       }
     }
 
-    return {min: minIndent, max: maxIndent};
+    return { min: minIndent, max: maxIndent };
   };
 
-  /**
-   * Indent a row within the legal bounds of the table.
-   *
-   * @param {number} indentDiff
-   *   The number of additional indentations proposed for the row (can be
-   *   positive or negative). This number will be adjusted to nearest valid
-   *   indentation level for the row.
-   *
-   * @return {number}
-   *   The number of indentations applied.
-   */
   Drupal.tableDrag.prototype.row.prototype.indent = function (indentDiff) {
     var $group = $(this.group);
-    // Determine the valid indentations interval if not available yet.
+
     if (!this.interval) {
       var prevRow = $(this.element).prev('tr').get(0);
       var nextRow = $group.eq(-1).next('tr').get(0);
       this.interval = this.validIndentInterval(prevRow, nextRow);
     }
 
-    // Adjust to the nearest valid indentation.
     var indent = this.indents + indentDiff;
     indent = Math.max(indent, this.interval.min);
     indent = Math.min(indent, this.interval.max);
     indentDiff = indent - this.indents;
 
     for (var n = 1; n <= Math.abs(indentDiff); n++) {
-      // Add or remove indentations.
       if (indentDiff < 0) {
         $group.find('.js-indentation:first-of-type').remove();
         this.indents--;
-      }
-      else {
+      } else {
         $group.find('td:first-of-type').prepend(Drupal.theme('tableDragIndentation'));
         this.indents++;
       }
     }
     if (indentDiff) {
-      // Update indentation for this row.
       this.changed = true;
       this.groupDepth += indentDiff;
       this.onIndent();
@@ -1427,18 +896,6 @@
     return indentDiff;
   };
 
-  /**
-   * Find all siblings for a row.
-   *
-   * According to its subgroup or indentation. Note that the passed-in row is
-   * included in the list of siblings.
-   *
-   * @param {object} rowSettings
-   *   The field settings we're using to identify what constitutes a sibling.
-   *
-   * @return {Array}
-   *   An array of siblings.
-   */
   Drupal.tableDrag.prototype.row.prototype.findSiblings = function (rowSettings) {
     var siblings = [];
     var directions = ['prev', 'next'];
@@ -1447,29 +904,22 @@
     for (var d = 0; d < directions.length; d++) {
       var checkRow = $(this.element)[directions[d]]();
       while (checkRow.length) {
-        // Check that the sibling contains a similar target field.
         if (checkRow.find('.' + rowSettings.target)) {
-          // Either add immediately if this is a flat table, or check to ensure
-          // that this row has the same level of indentation.
           if (this.indentEnabled) {
             checkRowIndentation = checkRow.find('.js-indentation').length;
           }
 
-          if (!(this.indentEnabled) || (checkRowIndentation === rowIndentation)) {
+          if (!this.indentEnabled || checkRowIndentation === rowIndentation) {
             siblings.push(checkRow[0]);
-          }
-          else if (checkRowIndentation < rowIndentation) {
-            // No need to keep looking for siblings when we get to a parent.
+          } else if (checkRowIndentation < rowIndentation) {
             break;
           }
-        }
-        else {
+        } else {
           break;
         }
         checkRow = checkRow[directions[d]]();
       }
-      // Since siblings are added in reverse order for previous, reverse the
-      // completed list of previous siblings. Add the current row and continue.
+
       if (directions[d] === 'prev') {
         siblings.reverse();
         siblings.push(this.element);
@@ -1478,24 +928,14 @@
     return siblings;
   };
 
-  /**
-   * Remove indentation helper classes from the current row group.
-   */
   Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function () {
     for (var n in this.children) {
       if (this.children.hasOwnProperty(n)) {
-        $(this.children[n]).find('.js-indentation')
-          .removeClass('tree-child')
-          .removeClass('tree-child-first')
-          .removeClass('tree-child-last')
-          .removeClass('tree-child-horizontal');
+        $(this.children[n]).find('.js-indentation').removeClass('tree-child').removeClass('tree-child-first').removeClass('tree-child-last').removeClass('tree-child-horizontal');
       }
     }
   };
 
-  /**
-   * Add an asterisk or other marker to the changed row.
-   */
   Drupal.tableDrag.prototype.row.prototype.markChanged = function () {
     var marker = Drupal.theme('tableDragChangedMarker');
     var cell = $(this.element).find('td:first-of-type');
@@ -1504,54 +944,25 @@
     }
   };
 
-  /**
-   * Stub function. Allows a custom handler when a row is indented.
-   *
-   * @return {null}
-   *   Returns null when the stub function is used.
-   */
   Drupal.tableDrag.prototype.row.prototype.onIndent = function () {
     return null;
   };
 
-  /**
-   * Stub function. Allows a custom handler when a row is swapped.
-   *
-   * @param {HTMLElement} swappedRow
-   *   The element for the swapped row.
-   *
-   * @return {null}
-   *   Returns null when the stub function is used.
-   */
   Drupal.tableDrag.prototype.row.prototype.onSwap = function (swappedRow) {
     return null;
   };
 
-  $.extend(Drupal.theme, /** @lends Drupal.theme */{
-
-    /**
-     * @return {string}
-     *  Markup for the marker.
-     */
-    tableDragChangedMarker: function () {
+  $.extend(Drupal.theme, {
+    tableDragChangedMarker: function tableDragChangedMarker() {
       return '<abbr class="warning tabledrag-changed" title="' + Drupal.t('Changed') + '">*</abbr>';
     },
 
-    /**
-     * @return {string}
-     *   Markup for the indentation.
-     */
-    tableDragIndentation: function () {
+    tableDragIndentation: function tableDragIndentation() {
       return '<div class="js-indentation indentation">&nbsp;</div>';
     },
 
-    /**
-     * @return {string}
-     *   Markup for the warning.
-     */
-    tableDragChangedWarning: function () {
+    tableDragChangedWarning: function tableDragChangedWarning() {
       return '<div class="tabledrag-changed-warning messages messages--warning" role="alert">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t('You have unsaved changes.') + '</div>';
     }
   });
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/misc/tableheader.js b/core/misc/tableheader.es6.js
similarity index 100%
copy from core/misc/tableheader.js
copy to core/misc/tableheader.es6.js
diff --git a/core/misc/tableheader.js b/core/misc/tableheader.js
index 8fc1b04896..ebae716e00 100644
--- a/core/misc/tableheader.js
+++ b/core/misc/tableheader.js
@@ -1,23 +1,16 @@
 /**
- * @file
- * Sticky table headers.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/tableheader.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, displace) {
 
   'use strict';
 
-  /**
-   * Attaches sticky table headers.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the sticky table header behavior.
-   */
   Drupal.behaviors.tableHeader = {
-    attach: function (context) {
-      $(window).one('scroll.TableHeaderInit', {context: context}, tableHeaderInitHandler);
+    attach: function attach(context) {
+      $(window).one('scroll.TableHeaderInit', { context: context }, tableHeaderInitHandler);
     }
   };
 
@@ -25,7 +18,6 @@
     return document.documentElement[position] || document.body[position];
   }
 
-  // Select and initialize sticky table headers.
   function tableHeaderInitHandler(e) {
     var $tables = $(e.data.context).find('table.sticky-enabled').once('tableheader');
     var il = $tables.length;
@@ -35,7 +27,6 @@
     forTables('onScroll');
   }
 
-  // Helper method to loop through tables and execute a method.
   function forTables(method, arg) {
     var tables = TableHeader.tables;
     var il = tables.length;
@@ -56,85 +47,33 @@
     forTables('stickyPosition', offsets.top);
   }
 
-  // Bind event that need to change all tables.
   $(window).on({
-
-    /**
-     * When resizing table width can change, recalculate everything.
-     *
-     * @ignore
-     */
     'resize.TableHeader': tableHeaderResizeHandler,
 
-    /**
-     * Bind only one event to take care of calling all scroll callbacks.
-     *
-     * @ignore
-     */
     'scroll.TableHeader': tableHeaderOnScrollHandler
   });
-  // Bind to custom Drupal events.
-  $(document).on({
 
-    /**
-     * Recalculate columns width when window is resized and when show/hide
-     * weight is triggered.
-     *
-     * @ignore
-     */
+  $(document).on({
     'columnschange.TableHeader': tableHeaderResizeHandler,
 
-    /**
-     * Recalculate TableHeader.topOffset when viewport is resized.
-     *
-     * @ignore
-     */
     'drupalViewportOffsetChange.TableHeader': tableHeaderOffsetChangeHandler
   });
 
-  /**
-   * Constructor for the tableHeader object. Provides sticky table headers.
-   *
-   * TableHeader will make the current table header stick to the top of the page
-   * if the table is very long.
-   *
-   * @constructor Drupal.TableHeader
-   *
-   * @param {HTMLElement} table
-   *   DOM object for the table to add a sticky header to.
-   *
-   * @listens event:columnschange
-   */
   function TableHeader(table) {
     var $table = $(table);
 
-    /**
-     * @name Drupal.TableHeader#$originalTable
-     *
-     * @type {HTMLElement}
-     */
     this.$originalTable = $table;
 
-    /**
-     * @type {jQuery}
-     */
     this.$originalHeader = $table.children('thead');
 
-    /**
-     * @type {jQuery}
-     */
     this.$originalHeaderCells = this.$originalHeader.find('> tr > th');
 
-    /**
-     * @type {null|bool}
-     */
     this.displayWeight = null;
     this.$originalTable.addClass('sticky-table');
     this.tableHeight = $table[0].clientHeight;
     this.tableOffset = this.$originalTable.offset();
 
-    // React to columns change to avoid making checks in the scroll callback.
-    this.$originalTable.on('columnschange', {tableHeader: this}, function (e, display) {
+    this.$originalTable.on('columnschange', { tableHeader: this }, function (e, display) {
       var tableHeader = e.data.tableHeader;
       if (tableHeader.displayWeight === null || tableHeader.displayWeight !== display) {
         tableHeader.recalculateSticky();
@@ -142,113 +81,54 @@
       tableHeader.displayWeight = display;
     });
 
-    // Create and display sticky header.
     this.createSticky();
   }
 
-  /**
-   * Store the state of TableHeader.
-   */
-  $.extend(TableHeader, /** @lends Drupal.TableHeader */{
-
-    /**
-     * This will store the state of all processed tables.
-     *
-     * @type {Array.<Drupal.TableHeader>}
-     */
+  $.extend(TableHeader, {
     tables: []
   });
 
-  /**
-   * Extend TableHeader prototype.
-   */
-  $.extend(TableHeader.prototype, /** @lends Drupal.TableHeader# */{
-
-    /**
-     * Minimum height in pixels for the table to have a sticky header.
-     *
-     * @type {number}
-     */
+  $.extend(TableHeader.prototype, {
     minHeight: 100,
 
-    /**
-     * Absolute position of the table on the page.
-     *
-     * @type {?Drupal~displaceOffset}
-     */
     tableOffset: null,
 
-    /**
-     * Absolute position of the table on the page.
-     *
-     * @type {?number}
-     */
     tableHeight: null,
 
-    /**
-     * Boolean storing the sticky header visibility state.
-     *
-     * @type {bool}
-     */
     stickyVisible: false,
 
-    /**
-     * Create the duplicate header.
-     */
-    createSticky: function () {
-      // Clone the table header so it inherits original jQuery properties.
+    createSticky: function createSticky() {
       var $stickyHeader = this.$originalHeader.clone(true);
-      // Hide the table to avoid a flash of the header clone upon page load.
-      this.$stickyTable = $('<table class="sticky-header"/>')
-        .css({
-          visibility: 'hidden',
-          position: 'fixed',
-          top: '0px'
-        })
-        .append($stickyHeader)
-        .insertBefore(this.$originalTable);
+
+      this.$stickyTable = $('<table class="sticky-header"/>').css({
+        visibility: 'hidden',
+        position: 'fixed',
+        top: '0px'
+      }).append($stickyHeader).insertBefore(this.$originalTable);
 
       this.$stickyHeaderCells = $stickyHeader.find('> tr > th');
 
-      // Initialize all computations.
       this.recalculateSticky();
     },
 
-    /**
-     * Set absolute position of sticky.
-     *
-     * @param {number} offsetTop
-     *   The top offset for the sticky header.
-     * @param {number} offsetLeft
-     *   The left offset for the sticky header.
-     *
-     * @return {jQuery}
-     *   The sticky table as a jQuery collection.
-     */
-    stickyPosition: function (offsetTop, offsetLeft) {
+    stickyPosition: function stickyPosition(offsetTop, offsetLeft) {
       var css = {};
       if (typeof offsetTop === 'number') {
         css.top = offsetTop + 'px';
       }
       if (typeof offsetLeft === 'number') {
-        css.left = (this.tableOffset.left - offsetLeft) + 'px';
+        css.left = this.tableOffset.left - offsetLeft + 'px';
       }
       return this.$stickyTable.css(css);
     },
 
-    /**
-     * Returns true if sticky is currently visible.
-     *
-     * @return {bool}
-     *   The visibility status.
-     */
-    checkStickyVisible: function () {
+    checkStickyVisible: function checkStickyVisible() {
       var scrollTop = scrollValue('scrollTop');
       var tableTop = this.tableOffset.top - displace.offsets.top;
       var tableBottom = tableTop + this.tableHeight;
       var visible = false;
 
-      if (tableTop < scrollTop && scrollTop < (tableBottom - this.minHeight)) {
+      if (tableTop < scrollTop && scrollTop < tableBottom - this.minHeight) {
         visible = true;
       }
 
@@ -256,53 +136,32 @@
       return visible;
     },
 
-    /**
-     * Check if sticky header should be displayed.
-     *
-     * This function is throttled to once every 250ms to avoid unnecessary
-     * calls.
-     *
-     * @param {jQuery.Event} e
-     *   The scroll event.
-     */
-    onScroll: function (e) {
+    onScroll: function onScroll(e) {
       this.checkStickyVisible();
-      // Track horizontal positioning relative to the viewport.
+
       this.stickyPosition(null, scrollValue('scrollLeft'));
       this.$stickyTable.css('visibility', this.stickyVisible ? 'visible' : 'hidden');
     },
 
-    /**
-     * Event handler: recalculates position of the sticky table header.
-     *
-     * @param {jQuery.Event} event
-     *   Event being triggered.
-     */
-    recalculateSticky: function (event) {
-      // Update table size.
+    recalculateSticky: function recalculateSticky(event) {
       this.tableHeight = this.$originalTable[0].clientHeight;
 
-      // Update offset top.
       displace.offsets.top = displace.calculateOffset('top');
       this.tableOffset = this.$originalTable.offset();
       this.stickyPosition(displace.offsets.top, scrollValue('scrollLeft'));
 
-      // Update columns width.
       var $that = null;
       var $stickyCell = null;
       var display = null;
-      // Resize header and its cell widths.
-      // Only apply width to visible table cells. This prevents the header from
-      // displaying incorrectly when the sticky header is no longer visible.
+
       var il = this.$originalHeaderCells.length;
       for (var i = 0; i < il; i++) {
         $that = $(this.$originalHeaderCells[i]);
         $stickyCell = this.$stickyHeaderCells.eq($that.index());
         display = $that.css('display');
         if (display !== 'none') {
-          $stickyCell.css({width: $that.css('width'), display: display});
-        }
-        else {
+          $stickyCell.css({ width: $that.css('width'), display: display });
+        } else {
           $stickyCell.css('display', 'none');
         }
       }
@@ -310,7 +169,5 @@
     }
   });
 
-  // Expose constructor in the public space.
   Drupal.TableHeader = TableHeader;
-
-}(jQuery, Drupal, window.parent.Drupal.displace));
+})(jQuery, Drupal, window.parent.Drupal.displace);
\ No newline at end of file
diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.es6.js
similarity index 100%
copy from core/misc/tableresponsive.js
copy to core/misc/tableresponsive.es6.js
diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.js
index 0127ec8873..b9beaf6cfb 100644
--- a/core/misc/tableresponsive.js
+++ b/core/misc/tableresponsive.js
@@ -1,22 +1,15 @@
 /**
- * @file
- * Responsive table functionality.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/tableresponsive.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, window) {
 
   'use strict';
 
-  /**
-   * Attach the tableResponsive function to {@link Drupal.behaviors}.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches tableResponsive functionality.
-   */
   Drupal.behaviors.tableResponsive = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $tables = $(context).find('table.responsive-enabled').once('tableresponsive');
       if ($tables.length) {
         var il = $tables.length;
@@ -27,97 +20,45 @@
     }
   };
 
-  /**
-   * The TableResponsive object optimizes table presentation for screen size.
-   *
-   * A responsive table hides columns at small screen sizes, leaving the most
-   * important columns visible to the end user. Users should not be prevented
-   * from accessing all columns, however. This class adds a toggle to a table
-   * with hidden columns that exposes the columns. Exposing the columns will
-   * likely break layouts, but it provides the user with a means to access
-   * data, which is a guiding principle of responsive design.
-   *
-   * @constructor Drupal.TableResponsive
-   *
-   * @param {HTMLElement} table
-   *   The table element to initialize the responsive table on.
-   */
   function TableResponsive(table) {
     this.table = table;
     this.$table = $(table);
     this.showText = Drupal.t('Show all columns');
     this.hideText = Drupal.t('Hide lower priority columns');
-    // Store a reference to the header elements of the table so that the DOM is
-    // traversed only once to find them.
+
     this.$headers = this.$table.find('th');
-    // Add a link before the table for users to show or hide weight columns.
-    this.$link = $('<button type="button" class="link tableresponsive-toggle"></button>')
-      .attr('title', Drupal.t('Show table cells that were hidden to make the table fit within a small screen.'))
-      .on('click', $.proxy(this, 'eventhandlerToggleColumns'));
+
+    this.$link = $('<button type="button" class="link tableresponsive-toggle"></button>').attr('title', Drupal.t('Show table cells that were hidden to make the table fit within a small screen.')).on('click', $.proxy(this, 'eventhandlerToggleColumns'));
 
     this.$table.before($('<div class="tableresponsive-toggle-columns"></div>').append(this.$link));
 
-    // Attach a resize handler to the window.
-    $(window)
-      .on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility'))
-      .trigger('resize.tableresponsive');
+    $(window).on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility')).trigger('resize.tableresponsive');
   }
 
-  /**
-   * Extend the TableResponsive function with a list of managed tables.
-   */
-  $.extend(TableResponsive, /** @lends Drupal.TableResponsive */{
-
-    /**
-     * Store all created instances.
-     *
-     * @type {Array.<Drupal.TableResponsive>}
-     */
+  $.extend(TableResponsive, {
     tables: []
   });
 
-  /**
-   * Associates an action link with the table that will show hidden columns.
-   *
-   * Columns are assumed to be hidden if their header has the class priority-low
-   * or priority-medium.
-   */
-  $.extend(TableResponsive.prototype, /** @lends Drupal.TableResponsive# */{
-
-    /**
-     * @param {jQuery.Event} e
-     *   The event triggered.
-     */
-    eventhandlerEvaluateColumnVisibility: function (e) {
+  $.extend(TableResponsive.prototype, {
+    eventhandlerEvaluateColumnVisibility: function eventhandlerEvaluateColumnVisibility(e) {
       var pegged = parseInt(this.$link.data('pegged'), 10);
       var hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
-      // If the table has hidden columns, associate an action link with the
-      // table to show the columns.
+
       if (hiddenLength > 0) {
         this.$link.show().text(this.showText);
       }
-      // When the toggle is pegged, its presence is maintained because the user
-      // has interacted with it. This is necessary to keep the link visible if
-      // the user adjusts screen size and changes the visibility of columns.
+
       if (!pegged && hiddenLength === 0) {
         this.$link.hide().text(this.hideText);
       }
     },
 
-    /**
-     * Toggle the visibility of columns based on their priority.
-     *
-     * Columns are classed with either 'priority-low' or 'priority-medium'.
-     *
-     * @param {jQuery.Event} e
-     *   The event triggered.
-     */
-    eventhandlerToggleColumns: function (e) {
+    eventhandlerToggleColumns: function eventhandlerToggleColumns(e) {
       e.preventDefault();
       var self = this;
       var $hiddenHeaders = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden');
       this.$revealedCells = this.$revealedCells || $();
-      // Reveal hidden columns.
+
       if ($hiddenHeaders.length > 0) {
         $hiddenHeaders.each(function (index, element) {
           var $header = $(this);
@@ -125,50 +66,42 @@
           self.$table.find('tbody tr').each(function () {
             var $cells = $(this).find('td').eq(position);
             $cells.show();
-            // Keep track of the revealed cells, so they can be hidden later.
+
             self.$revealedCells = $().add(self.$revealedCells).add($cells);
           });
           $header.show();
-          // Keep track of the revealed headers, so they can be hidden later.
+
           self.$revealedCells = $().add(self.$revealedCells).add($header);
         });
         this.$link.text(this.hideText).data('pegged', 1);
-      }
-      // Hide revealed columns.
-      else {
-        this.$revealedCells.hide();
-        // Strip the 'display:none' declaration from the style attributes of
-        // the table cells that .hide() added.
-        this.$revealedCells.each(function (index, element) {
-          var $cell = $(this);
-          var properties = $cell.attr('style').split(';');
-          var newProps = [];
-          // The hide method adds display none to the element. The element
-          // should be returned to the same state it was in before the columns
-          // were revealed, so it is necessary to remove the display none value
-          // from the style attribute.
-          var match = /^display\s*\:\s*none$/;
-          for (var i = 0; i < properties.length; i++) {
-            var prop = properties[i];
-            prop.trim();
-            // Find the display:none property and remove it.
-            var isDisplayNone = match.exec(prop);
-            if (isDisplayNone) {
-              continue;
+      } else {
+          this.$revealedCells.hide();
+
+          this.$revealedCells.each(function (index, element) {
+            var $cell = $(this);
+            var properties = $cell.attr('style').split(';');
+            var newProps = [];
+
+            var match = /^display\s*\:\s*none$/;
+            for (var i = 0; i < properties.length; i++) {
+              var prop = properties[i];
+              prop.trim();
+
+              var isDisplayNone = match.exec(prop);
+              if (isDisplayNone) {
+                continue;
+              }
+              newProps.push(prop);
             }
-            newProps.push(prop);
-          }
-          // Return the rest of the style attribute values to the element.
-          $cell.attr('style', newProps.join(';'));
-        });
-        this.$link.text(this.showText).data('pegged', 0);
-        // Refresh the toggle link.
-        $(window).trigger('resize.tableresponsive');
-      }
+
+            $cell.attr('style', newProps.join(';'));
+          });
+          this.$link.text(this.showText).data('pegged', 0);
+
+          $(window).trigger('resize.tableresponsive');
+        }
     }
   });
 
-  // Make the TableResponsive object available in the Drupal namespace.
   Drupal.TableResponsive = TableResponsive;
-
-})(jQuery, Drupal, window);
+})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/misc/tableselect.js b/core/misc/tableselect.es6.js
similarity index 100%
copy from core/misc/tableselect.js
copy to core/misc/tableselect.es6.js
diff --git a/core/misc/tableselect.js b/core/misc/tableselect.js
index 243e000110..20f285fc8a 100644
--- a/core/misc/tableselect.js
+++ b/core/misc/tableselect.js
@@ -1,39 +1,24 @@
 /**
- * @file
- * Table select functionality.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/tableselect.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Initialize tableSelects.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches tableSelect functionality.
-   */
   Drupal.behaviors.tableSelect = {
-    attach: function (context, settings) {
-      // Select the inner-most table in case of nested tables.
+    attach: function attach(context, settings) {
       $(context).find('th.select-all').closest('table').once('table-select').each(Drupal.tableSelect);
     }
   };
 
-  /**
-   * Callback used in {@link Drupal.behaviors.tableSelect}.
-   */
   Drupal.tableSelect = function () {
-    // Do not add a "Select all" checkbox if there are no rows with checkboxes
-    // in the table.
     if ($(this).find('td input[type="checkbox"]').length === 0) {
       return;
     }
 
-    // Keep track of the table, which checkbox is checked and alias the
-    // settings.
     var table = this;
     var checkboxes;
     var lastChecked;
@@ -42,118 +27,72 @@
       selectAll: Drupal.t('Select all rows in this table'),
       selectNone: Drupal.t('Deselect all rows in this table')
     };
-    var updateSelectAll = function (state) {
-      // Update table's select-all checkbox (and sticky header's if available).
+    var updateSelectAll = function updateSelectAll(state) {
       $table.prev('table.sticky-header').addBack().find('th.select-all input[type="checkbox"]').each(function () {
         var $checkbox = $(this);
         var stateChanged = $checkbox.prop('checked') !== state;
 
         $checkbox.attr('title', state ? strings.selectNone : strings.selectAll);
 
-        /**
-         * @checkbox {HTMLElement}
-         */
         if (stateChanged) {
           $checkbox.prop('checked', state).trigger('change');
         }
       });
     };
 
-    // Find all <th> with class select-all, and insert the check all checkbox.
     $table.find('th.select-all').prepend($('<input type="checkbox" class="form-checkbox" />').attr('title', strings.selectAll)).on('click', function (event) {
       if ($(event.target).is('input[type="checkbox"]')) {
-        // Loop through all checkboxes and set their state to the select all
-        // checkbox' state.
         checkboxes.each(function () {
           var $checkbox = $(this);
           var stateChanged = $checkbox.prop('checked') !== event.target.checked;
 
-          /**
-           * @checkbox {HTMLElement}
-           */
           if (stateChanged) {
             $checkbox.prop('checked', event.target.checked).trigger('change');
           }
-          // Either add or remove the selected class based on the state of the
-          // check all checkbox.
 
-          /**
-           * @checkbox {HTMLElement}
-           */
           $checkbox.closest('tr').toggleClass('selected', this.checked);
         });
-        // Update the title and the state of the check all box.
+
         updateSelectAll(event.target.checked);
       }
     });
 
-    // For each of the checkboxes within the table that are not disabled.
     checkboxes = $table.find('td input[type="checkbox"]:enabled').on('click', function (e) {
-      // Either add or remove the selected class based on the state of the
-      // check all checkbox.
-
-      /**
-       * @this {HTMLElement}
-       */
       $(this).closest('tr').toggleClass('selected', this.checked);
 
-      // If this is a shift click, we need to highlight everything in the
-      // range. Also make sure that we are actually checking checkboxes
-      // over a range and that a checkbox has been checked or unchecked before.
       if (e.shiftKey && lastChecked && lastChecked !== e.target) {
-        // We use the checkbox's parent <tr> to do our range searching.
         Drupal.tableSelectRange($(e.target).closest('tr')[0], $(lastChecked).closest('tr')[0], e.target.checked);
       }
 
-      // If all checkboxes are checked, make sure the select-all one is checked
-      // too, otherwise keep unchecked.
-      updateSelectAll((checkboxes.length === checkboxes.filter(':checked').length));
+      updateSelectAll(checkboxes.length === checkboxes.filter(':checked').length);
 
-      // Keep track of the last checked checkbox.
       lastChecked = e.target;
     });
 
-    // If all checkboxes are checked on page load, make sure the select-all one
-    // is checked too, otherwise keep unchecked.
-    updateSelectAll((checkboxes.length === checkboxes.filter(':checked').length));
+    updateSelectAll(checkboxes.length === checkboxes.filter(':checked').length);
   };
 
-  /**
-   * @param {HTMLElement} from
-   *   The HTML element representing the "from" part of the range.
-   * @param {HTMLElement} to
-   *   The HTML element representing the "to" part of the range.
-   * @param {bool} state
-   *   The state to set on the range.
-   */
   Drupal.tableSelectRange = function (from, to, state) {
-    // We determine the looping mode based on the order of from and to.
     var mode = from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
 
-    // Traverse through the sibling nodes.
     for (var i = from[mode]; i; i = i[mode]) {
       var $i;
-      // Make sure that we're only dealing with elements.
+
       if (i.nodeType !== 1) {
         continue;
       }
       $i = $(i);
-      // Either add or remove the selected class based on the state of the
-      // target checkbox.
+
       $i.toggleClass('selected', state);
       $i.find('input[type="checkbox"]').prop('checked', state);
 
       if (to.nodeType) {
-        // If we are at the end of the range, stop.
         if (i === to) {
           break;
         }
-      }
-      // A faster alternative to doing $(i).filter(to).length.
-      else if ($.filter(to, [i]).r.length) {
-        break;
-      }
+      } else if ($.filter(to, [i]).r.length) {
+          break;
+        }
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/timezone.js b/core/misc/timezone.es6.js
similarity index 100%
copy from core/misc/timezone.js
copy to core/misc/timezone.es6.js
diff --git a/core/misc/timezone.js b/core/misc/timezone.js
index 3c88d463dd..12e43b033c 100644
--- a/core/misc/timezone.js
+++ b/core/misc/timezone.js
@@ -1,69 +1,47 @@
 /**
- * @file
- * Timezone detection.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/timezone.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Set the client's system time zone as default values of form fields.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.setTimezone = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $timezone = $(context).find('.timezone-detect').once('timezone');
       if ($timezone.length) {
         var dateString = Date();
-        // In some client environments, date strings include a time zone
-        // abbreviation, between 3 and 5 letters enclosed in parentheses,
-        // which can be interpreted by PHP.
+
         var matches = dateString.match(/\(([A-Z]{3,5})\)/);
         var abbreviation = matches ? matches[1] : 0;
 
-        // For all other client environments, the abbreviation is set to "0"
-        // and the current offset from UTC and daylight saving time status are
-        // used to guess the time zone.
         var dateNow = new Date();
         var offsetNow = dateNow.getTimezoneOffset() * -60;
 
-        // Use January 1 and July 1 as test dates for determining daylight
-        // saving time status by comparing their offsets.
         var dateJan = new Date(dateNow.getFullYear(), 0, 1, 12, 0, 0, 0);
         var dateJul = new Date(dateNow.getFullYear(), 6, 1, 12, 0, 0, 0);
         var offsetJan = dateJan.getTimezoneOffset() * -60;
         var offsetJul = dateJul.getTimezoneOffset() * -60;
 
         var isDaylightSavingTime;
-        // If the offset from UTC is identical on January 1 and July 1,
-        // assume daylight saving time is not used in this time zone.
+
         if (offsetJan === offsetJul) {
           isDaylightSavingTime = '';
-        }
-        // If the maximum annual offset is equivalent to the current offset,
-        // assume daylight saving time is in effect.
-        else if (Math.max(offsetJan, offsetJul) === offsetNow) {
-          isDaylightSavingTime = 1;
-        }
-        // Otherwise, assume daylight saving time is not in effect.
-        else {
-          isDaylightSavingTime = 0;
-        }
+        } else if (Math.max(offsetJan, offsetJul) === offsetNow) {
+            isDaylightSavingTime = 1;
+          } else {
+              isDaylightSavingTime = 0;
+            }
 
-        // Submit request to the system/timezone callback and set the form
-        // field to the response time zone. The client date is passed to the
-        // callback for debugging purposes. Submit a synchronous request to
-        // avoid database errors associated with concurrent requests
-        // during install.
         var path = 'system/timezone/' + abbreviation + '/' + offsetNow + '/' + isDaylightSavingTime;
         $.ajax({
           async: false,
           url: Drupal.url(path),
-          data: {date: dateString},
+          data: { date: dateString },
           dataType: 'json',
-          success: function (data) {
+          success: function success(data) {
             if (data) {
               $timezone.val(data);
             }
@@ -72,5 +50,4 @@
       }
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.es6.js
similarity index 100%
copy from core/misc/vertical-tabs.js
copy to core/misc/vertical-tabs.es6.js
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index c7ad2fd2b4..187e7bfeb2 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -1,37 +1,15 @@
 /**
- * @file
- * Define vertical tabs functionality.
- */
-
-/**
- * Triggers when form values inside a vertical tab changes.
- *
- * This is used to update the summary in vertical tabs in order to know what
- * are the important fields' values.
- *
- * @event summaryUpdated
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./misc/vertical-tabs.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * This script transforms a set of details into a stack of vertical tabs.
-   *
-   * Each tab may have a summary which can be updated by another
-   * script. For that to work, each details element has an associated
-   * 'verticalTabCallback' (with jQuery.data() attached to the details),
-   * which is called every time the user performs an update to a form
-   * element inside the tab pane.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behaviors for vertical tabs.
-   */
   Drupal.behaviors.verticalTabs = {
-    attach: function (context) {
+    attach: function attach(context) {
       var width = drupalSettings.widthBreakpoint || 640;
       var mq = '(max-width: ' + width + 'px)';
 
@@ -44,18 +22,14 @@
         var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
         var tab_focus;
 
-        // Check if there are some details that can be converted to
-        // vertical-tabs.
         var $details = $this.find('> details');
         if ($details.length === 0) {
           return;
         }
 
-        // Create the tab column.
         var tab_list = $('<ul class="vertical-tabs__menu"></ul>');
         $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
 
-        // Transform each details into a tab.
         $details.each(function () {
           var $that = $(this);
           var vertical_tab = new Drupal.verticalTab({
@@ -63,13 +37,7 @@
             details: $that
           });
           tab_list.append(vertical_tab.item);
-          $that
-            .removeClass('collapsed')
-            // prop() can't be used on browsers not supporting details element,
-            // the style won't apply to them if prop() is used.
-            .attr('open', true)
-            .addClass('vertical-tabs__pane')
-            .data('verticalTab', vertical_tab);
+          $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', vertical_tab);
           if (this.id === focusID) {
             tab_focus = $that;
           }
@@ -79,13 +47,10 @@
         $(tab_list).find('> li').eq(-1).addClass('last');
 
         if (!tab_focus) {
-          // If the current URL has a fragment and one of the tabs contains an
-          // element that matches the URL fragment, activate that tab.
           var $locationHash = $this.find(window.location.hash);
           if (window.location.hash && $locationHash.length) {
             tab_focus = $locationHash.closest('.vertical-tabs__pane');
-          }
-          else {
+          } else {
             tab_focus = $this.find('> .vertical-tabs__pane').eq(0);
           }
         }
@@ -96,22 +61,6 @@
     }
   };
 
-  /**
-   * The vertical tab object represents a single tab within a tab group.
-   *
-   * @constructor
-   *
-   * @param {object} settings
-   *   Settings object.
-   * @param {string} settings.title
-   *   The name of the tab.
-   * @param {jQuery} settings.details
-   *   The jQuery object of the details element that is the tab pane.
-   *
-   * @fires event:summaryUpdated
-   *
-   * @listens event:summaryUpdated
-   */
   Drupal.verticalTab = function (settings) {
     var self = this;
     $.extend(this, settings, Drupal.theme('verticalTab', settings));
@@ -123,130 +72,70 @@
       self.focus();
     });
 
-    // Keyboard events added:
-    // Pressing the Enter key will open the tab pane.
     this.link.on('keydown', function (event) {
       if (event.keyCode === 13) {
         event.preventDefault();
         self.focus();
-        // Set focus on the first input field of the visible details/tab pane.
+
         $('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
       }
     });
 
-    this.details
-      .on('summaryUpdated', function () {
-        self.updateSummary();
-      })
-      .trigger('summaryUpdated');
+    this.details.on('summaryUpdated', function () {
+      self.updateSummary();
+    }).trigger('summaryUpdated');
   };
 
   Drupal.verticalTab.prototype = {
-
-    /**
-     * Displays the tab's content pane.
-     */
-    focus: function () {
-      this.details
-        .siblings('.vertical-tabs__pane')
-        .each(function () {
-          var tab = $(this).data('verticalTab');
-          tab.details.hide();
-          tab.item.removeClass('is-selected');
-        })
-        .end()
-        .show()
-        .siblings(':hidden.vertical-tabs__active-tab')
-        .val(this.details.attr('id'));
+    focus: function focus() {
+      this.details.siblings('.vertical-tabs__pane').each(function () {
+        var tab = $(this).data('verticalTab');
+        tab.details.hide();
+        tab.item.removeClass('is-selected');
+      }).end().show().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
       this.item.addClass('is-selected');
-      // Mark the active tab for screen readers.
+
       $('#active-vertical-tab').remove();
       this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
     },
 
-    /**
-     * Updates the tab's summary.
-     */
-    updateSummary: function () {
+    updateSummary: function updateSummary() {
       this.summary.html(this.details.drupalGetSummary());
     },
 
-    /**
-     * Shows a vertical tab pane.
-     *
-     * @return {Drupal.verticalTab}
-     *   The verticalTab instance.
-     */
-    tabShow: function () {
-      // Display the tab.
+    tabShow: function tabShow() {
       this.item.show();
-      // Show the vertical tabs.
+
       this.item.closest('.js-form-type-vertical-tabs').show();
-      // Update .first marker for items. We need recurse from parent to retain
-      // the actual DOM element order as jQuery implements sortOrder, but not
-      // as public method.
-      this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')
-        .filter(':visible').eq(0).addClass('first');
-      // Display the details element.
+
+      this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
+
       this.details.removeClass('vertical-tab--hidden').show();
-      // Focus this tab.
+
       this.focus();
       return this;
     },
 
-    /**
-     * Hides a vertical tab pane.
-     *
-     * @return {Drupal.verticalTab}
-     *   The verticalTab instance.
-     */
-    tabHide: function () {
-      // Hide this tab.
+    tabHide: function tabHide() {
       this.item.hide();
-      // Update .first marker for items. We need recurse from parent to retain
-      // the actual DOM element order as jQuery implements sortOrder, but not
-      // as public method.
-      this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')
-        .filter(':visible').eq(0).addClass('first');
-      // Hide the details element.
+
+      this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
+
       this.details.addClass('vertical-tab--hidden').hide();
-      // Focus the first visible tab (if there is one).
+
       var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
       if ($firstTab.length) {
         $firstTab.data('verticalTab').focus();
-      }
-      // Hide the vertical tabs (if no tabs remain).
-      else {
-        this.item.closest('.js-form-type-vertical-tabs').hide();
-      }
+      } else {
+          this.item.closest('.js-form-type-vertical-tabs').hide();
+        }
       return this;
     }
   };
 
-  /**
-   * Theme function for a vertical tab.
-   *
-   * @param {object} settings
-   *   An object with the following keys:
-   * @param {string} settings.title
-   *   The name of the tab.
-   *
-   * @return {object}
-   *   This function has to return an object with at least these keys:
-   *   - item: The root tab jQuery element
-   *   - link: The anchor tag that acts as the clickable area of the tab
-   *       (jQuery version)
-   *   - summary: The jQuery element that contains the tab summary
-   */
   Drupal.theme.verticalTab = function (settings) {
     var tab = {};
-    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>')
-      .append(tab.link = $('<a href="#"></a>')
-        .append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title))
-        .append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')
-        )
-      );
+    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
     return tab;
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/big_pipe/js/big_pipe.js b/core/modules/big_pipe/js/big_pipe.es6.js
similarity index 100%
copy from core/modules/big_pipe/js/big_pipe.js
copy to core/modules/big_pipe/js/big_pipe.es6.js
diff --git a/core/modules/big_pipe/js/big_pipe.js b/core/modules/big_pipe/js/big_pipe.js
index cdfd766f13..af92911d33 100644
--- a/core/modules/big_pipe/js/big_pipe.js
+++ b/core/modules/big_pipe/js/big_pipe.js
@@ -1,76 +1,42 @@
 /**
- * @file
- * Renders BigPipe placeholders using Drupal's Ajax system.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/big_pipe/js/big_pipe.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Executes Ajax commands in <script type="application/vnd.drupal-ajax"> tag.
-   *
-   * These Ajax commands replace placeholders with HTML and load missing CSS/JS.
-   *
-   * @param {number} index
-   *   Current index.
-   * @param {HTMLScriptElement} placeholderReplacement
-   *   Script tag created by BigPipe.
-   */
   function bigPipeProcessPlaceholderReplacement(index, placeholderReplacement) {
     var placeholderId = placeholderReplacement.getAttribute('data-big-pipe-replacement-for-placeholder-with-id');
     var content = this.textContent.trim();
-    // Ignore any placeholders that are not in the known placeholder list. Used
-    // to avoid someone trying to XSS the site via the placeholdering mechanism.
+
     if (typeof drupalSettings.bigPipePlaceholderIds[placeholderId] !== 'undefined') {
-      // If we try to parse the content too early (when the JSON containing Ajax
-      // commands is still arriving), textContent will be empty which will cause
-      // JSON.parse() to fail. Remove once so that it can be processed again
-      // later.
-      // @see bigPipeProcessDocument()
       if (content === '') {
         $(this).removeOnce('big-pipe');
-      }
-      else {
+      } else {
         var response = JSON.parse(content);
-        // Create a Drupal.Ajax object without associating an element, a
-        // progress indicator or a URL.
+
         var ajaxObject = Drupal.ajax({
           url: '',
           base: false,
           element: false,
           progress: false
         });
-        // Then, simulate an AJAX response having arrived, and let the Ajax
-        // system handle it.
+
         ajaxObject.success(response, 'success');
       }
     }
   }
 
-  /**
-   * Processes a streamed HTML document receiving placeholder replacements.
-   *
-   * @param {HTMLDocument} context
-   *   The HTML document containing <script type="application/vnd.drupal-ajax">
-   *   tags generated by BigPipe.
-   *
-   * @return {bool}
-   *   Returns true when processing has been finished and a stop signal has been
-   *   found.
-   */
   function bigPipeProcessDocument(context) {
-    // Make sure we have BigPipe-related scripts before processing further.
     if (!context.querySelector('script[data-big-pipe-event="start"]')) {
       return false;
     }
 
-    $(context).find('script[data-big-pipe-replacement-for-placeholder-with-id]')
-      .once('big-pipe')
-      .each(bigPipeProcessPlaceholderReplacement);
+    $(context).find('script[data-big-pipe-replacement-for-placeholder-with-id]').once('big-pipe').each(bigPipeProcessPlaceholderReplacement);
 
-    // If we see the stop signal, clear the timeout: all placeholder
-    // replacements are guaranteed to be received and processed.
     if (context.querySelector('script[data-big-pipe-event="stop"]')) {
       if (timeoutID) {
         clearTimeout(timeoutID);
@@ -89,22 +55,16 @@
     }, interval);
   }
 
-  // The frequency with which to check for newly arrived BigPipe placeholders.
-  // Hence 50 ms means we check 20 times per second. Setting this to 100 ms or
-  // more would cause the user to see content appear noticeably slower.
   var interval = drupalSettings.bigPipeInterval || 50;
-  // The internal ID to contain the watcher service.
+
   var timeoutID;
 
   bigPipeProcess();
 
-  // If something goes wrong, make sure everything is cleaned up and has had a
-  // chance to be processed with everything loaded.
   $(window).on('load', function () {
     if (timeoutID) {
       clearTimeout(timeoutID);
     }
     bigPipeProcessDocument(document);
   });
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/block/js/block.admin.js b/core/modules/block/js/block.admin.es6.js
similarity index 100%
copy from core/modules/block/js/block.admin.js
copy to core/modules/block/js/block.admin.es6.js
diff --git a/core/modules/block/js/block.admin.js b/core/modules/block/js/block.admin.js
index 9f99b7faba..e4512f8de2 100644
--- a/core/modules/block/js/block.admin.js
+++ b/core/modules/block/js/block.admin.js
@@ -1,51 +1,22 @@
 /**
- * @file
- * Block admin behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/block/js/block.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Filters the block list by a text input search string.
-   *
-   * The text input will have the selector `input.block-filter-text`.
-   *
-   * The target element to do searching in will be in the selector
-   * `input.block-filter-text[data-element]`
-   *
-   * The text source where the text should be found will have the selector
-   * `.block-filter-text-source`
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behavior for the block filtering.
-   */
   Drupal.behaviors.blockFilterByText = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $input = $('input.block-filter-text').once('block-filter-text');
       var $table = $($input.attr('data-element'));
       var $filter_rows;
 
-      /**
-       * Filters the block list.
-       *
-       * @param {jQuery.Event} e
-       *   The jQuery event for the keyup event that triggered the filter.
-       */
       function filterBlockList(e) {
         var query = $(e.target).val().toLowerCase();
 
-        /**
-         * Shows or hides the block entry based on the query.
-         *
-         * @param {number} index
-         *   The index in the loop, as provided by `jQuery.each`
-         * @param {HTMLElement} label
-         *   The label of the block.
-         */
         function toggleBlockEntry(index, label) {
           var $label = $(label);
           var $row = $label.parent().parent();
@@ -53,11 +24,9 @@
           $row.toggle(textMatch);
         }
 
-        // Filter if the length of the query is at least 2 characters.
         if (query.length >= 2) {
           $filter_rows.each(toggleBlockEntry);
-        }
-        else {
+        } else {
           $filter_rows.each(function (index) {
             $(this).parent().parent().show();
           });
@@ -71,21 +40,12 @@
     }
   };
 
-  /**
-   * Highlights the block that was just placed into the block listing.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behavior for the block placement highlighting.
-   */
   Drupal.behaviors.blockHighlightPlacement = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       if (settings.blockPlacement) {
         $(context).find('[data-drupal-selector="edit-blocks"]').once('block-highlight').each(function () {
           var $container = $(this);
-          // Just scrolling the document.body will not work in Firefox. The html
-          // element is needed as well.
+
           $('html, body').animate({
             scrollTop: $('.js-block-placed').offset().top - $container.offset().top + $container.scrollTop()
           }, 500);
@@ -93,5 +53,4 @@
       }
     }
   };
-
-}(jQuery, Drupal));
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/block/js/block.js b/core/modules/block/js/block.es6.js
similarity index 100%
copy from core/modules/block/js/block.js
copy to core/modules/block/js/block.es6.js
diff --git a/core/modules/block/js/block.js b/core/modules/block/js/block.js
index f276527365..06bb08b4c7 100644
--- a/core/modules/block/js/block.js
+++ b/core/modules/block/js/block.js
@@ -1,38 +1,19 @@
 /**
- * @file
- * Block behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/block/js/block.es6.js
+* @preserve
+**/
 
 (function ($, window, Drupal) {
 
   'use strict';
 
-  /**
-   * Provide the summary information for the block settings vertical tabs.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the behavior for the block settings summaries.
-   */
   Drupal.behaviors.blockSettingsSummary = {
-    attach: function () {
-      // The drupalSetSummary method required for this behavior is not available
-      // on the Blocks administration page, so we need to make sure this
-      // behavior is processed only if drupalSetSummary is defined.
+    attach: function attach() {
       if (typeof $.fn.drupalSetSummary === 'undefined') {
         return;
       }
 
-      /**
-       * Create a summary for checkboxes in the provided context.
-       *
-       * @param {HTMLDocument|HTMLElement} context
-       *   A context where one would find checkboxes to summarize.
-       *
-       * @return {string}
-       *   A string with the summary.
-       */
       function checkboxesSummary(context) {
         var vals = [];
         var $checkboxes = $(context).find('input[type="checkbox"]:checked + label');
@@ -52,73 +33,38 @@
         var $pages = $(context).find('textarea[name="visibility[request_path][pages]"]');
         if (!$pages.val()) {
           return Drupal.t('Not restricted');
-        }
-        else {
+        } else {
           return Drupal.t('Restricted to certain pages');
         }
       });
     }
   };
 
-  /**
-   * Move a block in the blocks table between regions via select list.
-   *
-   * This behavior is dependent on the tableDrag behavior, since it uses the
-   * objects initialized in that behavior to update the row.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the tableDrag behaviour for blocks in block administration.
-   */
   Drupal.behaviors.blockDrag = {
-    attach: function (context, settings) {
-      // tableDrag is required and we should be on the blocks admin page.
+    attach: function attach(context, settings) {
       if (typeof Drupal.tableDrag === 'undefined' || typeof Drupal.tableDrag.blocks === 'undefined') {
         return;
       }
 
-      /**
-       * Function to check empty regions and toggle classes based on this.
-       *
-       * @param {jQuery} table
-       *   The jQuery object representing the table to inspect.
-       * @param {jQuery} rowObject
-       *   The jQuery object representing the table row.
-       */
       function checkEmptyRegions(table, rowObject) {
         table.find('tr.region-message').each(function () {
           var $this = $(this);
-          // If the dragged row is in this region, but above the message row,
-          // swap it down one space.
+
           if ($this.prev('tr').get(0) === rowObject.element) {
-            // Prevent a recursion problem when using the keyboard to move rows
-            // up.
-            if ((rowObject.method !== 'keyboard' || rowObject.direction === 'down')) {
+            if (rowObject.method !== 'keyboard' || rowObject.direction === 'down') {
               rowObject.swap('after', this);
             }
           }
-          // This region has become empty.
+
           if ($this.next('tr').is(':not(.draggable)') || $this.next('tr').length === 0) {
             $this.removeClass('region-populated').addClass('region-empty');
-          }
-          // This region has become populated.
-          else if ($this.is('.region-empty')) {
-            $this.removeClass('region-empty').addClass('region-populated');
-          }
+          } else if ($this.is('.region-empty')) {
+              $this.removeClass('region-empty').addClass('region-populated');
+            }
         });
       }
 
-      /**
-       * Function to update the last placed row with the correct classes.
-       *
-       * @param {jQuery} table
-       *   The jQuery object representing the table to inspect.
-       * @param {jQuery} rowObject
-       *   The jQuery object representing the table row.
-       */
       function updateLastPlaced(table, rowObject) {
-        // Remove the color-success class from new block if applicable.
         table.find('.color-success').removeClass('color-success');
 
         var $rowObject = $(rowObject);
@@ -128,58 +74,37 @@
         }
       }
 
-      /**
-       * Update block weights in the given region.
-       *
-       * @param {jQuery} table
-       *   Table with draggable items.
-       * @param {string} region
-       *   Machine name of region containing blocks to update.
-       */
       function updateBlockWeights(table, region) {
-        // Calculate minimum weight.
         var weight = -Math.round(table.find('.draggable').length / 2);
-        // Update the block weights.
-        table.find('.region-' + region + '-message').nextUntil('.region-title')
-          .find('select.block-weight').val(function () {
-            // Increment the weight before assigning it to prevent using the
-            // absolute minimum available weight. This way we always have an
-            // unused upper and lower bound, which makes manually setting the
-            // weights easier for users who prefer to do it that way.
-            return ++weight;
-          });
+
+        table.find('.region-' + region + '-message').nextUntil('.region-title').find('select.block-weight').val(function () {
+          return ++weight;
+        });
       }
 
       var table = $('#blocks');
-      // Get the blocks tableDrag object.
+
       var tableDrag = Drupal.tableDrag.blocks;
-      // Add a handler for when a row is swapped, update empty regions.
+
       tableDrag.row.prototype.onSwap = function (swappedRow) {
         checkEmptyRegions(table, this);
         updateLastPlaced(table, this);
       };
 
-      // Add a handler so when a row is dropped, update fields dropped into
-      // new regions.
       tableDrag.onDrop = function () {
         var dragObject = this;
         var $rowElement = $(dragObject.rowObject.element);
-        // Use "region-message" row instead of "region" row because
-        // "region-{region_name}-message" is less prone to regexp match errors.
+
         var regionRow = $rowElement.prevAll('tr.region-message').get(0);
         var regionName = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
         var regionField = $rowElement.find('select.block-region-select');
-        // Check whether the newly picked region is available for this block.
+
         if (regionField.find('option[value=' + regionName + ']').length === 0) {
-          // If not, alert the user and keep the block in its old region
-          // setting.
           window.alert(Drupal.t('The block cannot be placed in this region.'));
-          // Simulate that there was a selected element change, so the row is
-          // put back to from where the user tried to drag it.
+
           regionField.trigger('change');
         }
 
-        // Update region and weight fields if the region has been changed.
         if (!regionField.is('.block-region-' + regionName)) {
           var weightField = $rowElement.find('select.block-weight');
           var oldRegionName = weightField[0].className.replace(/([^ ]+[ ]+)*block-weight-([^ ]+)([ ]+[^ ]+)*/, '$2');
@@ -191,38 +116,31 @@
         updateBlockWeights(table, regionName);
       };
 
-      // Add the behavior to each region select list.
-      $(context).find('select.block-region-select').once('block-region-select')
-        .on('change', function (event) {
-          // Make our new row and select field.
-          var row = $(this).closest('tr');
-          var select = $(this);
-          // Find the correct region and insert the row as the last in the
-          // region.
-          tableDrag.rowObject = new tableDrag.row(row[0]);
-          var region_message = table.find('.region-' + select[0].value + '-message');
-          var region_items = region_message.nextUntil('.region-message, .region-title');
-          if (region_items.length) {
-            region_items.last().after(row);
-          }
-          // We found that region_message is the last row.
-          else {
+      $(context).find('select.block-region-select').once('block-region-select').on('change', function (event) {
+        var row = $(this).closest('tr');
+        var select = $(this);
+
+        tableDrag.rowObject = new tableDrag.row(row[0]);
+        var region_message = table.find('.region-' + select[0].value + '-message');
+        var region_items = region_message.nextUntil('.region-message, .region-title');
+        if (region_items.length) {
+          region_items.last().after(row);
+        } else {
             region_message.after(row);
           }
-          updateBlockWeights(table, select[0].value);
-          // Modify empty regions with added or removed fields.
-          checkEmptyRegions(table, tableDrag.rowObject);
-          // Update last placed block indication.
-          updateLastPlaced(table, row);
-          // Show unsaved changes warning.
-          if (!tableDrag.changed) {
-            $(Drupal.theme('tableDragChangedWarning')).insertBefore(tableDrag.table).hide().fadeIn('slow');
-            tableDrag.changed = true;
-          }
-          // Remove focus from selectbox.
-          select.trigger('blur');
-        });
+        updateBlockWeights(table, select[0].value);
+
+        checkEmptyRegions(table, tableDrag.rowObject);
+
+        updateLastPlaced(table, row);
+
+        if (!tableDrag.changed) {
+          $(Drupal.theme('tableDragChangedWarning')).insertBefore(tableDrag.table).hide().fadeIn('slow');
+          tableDrag.changed = true;
+        }
+
+        select.trigger('blur');
+      });
     }
   };
-
-})(jQuery, window, Drupal);
+})(jQuery, window, Drupal);
\ No newline at end of file
diff --git a/core/modules/book/book.js b/core/modules/book/book.es6.js
similarity index 100%
copy from core/modules/book/book.js
copy to core/modules/book/book.es6.js
diff --git a/core/modules/book/book.js b/core/modules/book/book.js
index 2cc7881264..a9109bb3a0 100644
--- a/core/modules/book/book.js
+++ b/core/modules/book/book.js
@@ -1,37 +1,27 @@
 /**
- * @file
- * Javascript behaviors for the Book module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/book/book.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Adds summaries to the book outline form.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behavior to book outline forms.
-   */
   Drupal.behaviors.bookDetailsSummaries = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('.book-outline-form').drupalSetSummary(function (context) {
         var $select = $(context).find('.book-title-select');
         var val = $select.val();
 
         if (val === '0') {
           return Drupal.t('Not in book');
-        }
-        else if (val === 'new') {
+        } else if (val === 'new') {
           return Drupal.t('New book');
-        }
-        else {
+        } else {
           return Drupal.checkPlain($select.find(':selected').text());
         }
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/ckeditor.admin.js
copy to core/modules/ckeditor/js/ckeditor.admin.es6.js
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js
index 11fd369586..bab64e6d3f 100644
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * CKEditor button and group configuration user interface.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/ckeditor.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, _) {
 
@@ -9,41 +10,20 @@
 
   Drupal.ckeditor = Drupal.ckeditor || {};
 
-  /**
-   * Sets config behaviour and creates config views for the CKEditor toolbar.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches admin behaviour to the CKEditor buttons.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches admin behaviour from the CKEditor buttons on 'unload'.
-   */
   Drupal.behaviors.ckeditorAdmin = {
-    attach: function (context) {
-      // Process the CKEditor configuration fragment once.
+    attach: function attach(context) {
       var $configurationForm = $(context).find('.ckeditor-toolbar-configuration').once('ckeditor-configuration');
       if ($configurationForm.length) {
-        var $textarea = $configurationForm
-          // Hide the textarea that contains the serialized representation of the
-          // CKEditor configuration.
-          .find('.js-form-item-editor-settings-toolbar-button-groups')
-          .hide()
-          // Return the textarea child node from this expression.
-          .find('textarea');
-
-        // The HTML for the CKEditor configuration is assembled on the server
-        // and sent to the client as a serialized DOM fragment.
+        var $textarea = $configurationForm.find('.js-form-item-editor-settings-toolbar-button-groups').hide().find('textarea');
+
         $configurationForm.append(drupalSettings.ckeditor.toolbarAdmin);
 
-        // Create a configuration model.
         var model = Drupal.ckeditor.models.Model = new Drupal.ckeditor.Model({
           $textarea: $textarea,
           activeEditorConfig: JSON.parse($textarea.val()),
           hiddenEditorConfig: drupalSettings.ckeditor.hiddenCKEditorConfig
         });
 
-        // Create the configuration Views.
         var viewDefaults = {
           model: model,
           el: $('.ckeditor-toolbar-configuration')
@@ -56,17 +36,11 @@
         };
       }
     },
-    detach: function (context, settings, trigger) {
-      // Early-return if the trigger for detachment is something else than
-      // unload.
+    detach: function detach(context, settings, trigger) {
       if (trigger !== 'unload') {
         return;
       }
 
-      // We're detaching because CKEditor as text editor has been disabled; this
-      // really means that all CKEditor toolbar buttons have been removed.
-      // Hence,all editor features will be removed, so any reactions from
-      // filters will be undone.
       var $configurationForm = $(context).find('.ckeditor-toolbar-configuration').findOnce('ckeditor-configuration');
       if ($configurationForm.length && Drupal.ckeditor.models && Drupal.ckeditor.models.Model) {
         var config = Drupal.ckeditor.models.Model.toJSON().activeEditorConfig;
@@ -79,48 +53,14 @@
     }
   };
 
-  /**
-   * CKEditor configuration UI methods of Backbone objects.
-   *
-   * @namespace
-   */
   Drupal.ckeditor = {
-
-    /**
-     * A hash of View instances.
-     *
-     * @type {object}
-     */
     views: {},
 
-    /**
-     * A hash of Model instances.
-     *
-     * @type {object}
-     */
     models: {},
 
-    /**
-     * Translates changes in CKEditor config DOM structure to the config model.
-     *
-     * If the button is moved within an existing group, the DOM structure is
-     * simply translated to a configuration model. If the button is moved into a
-     * new group placeholder, then a process is launched to name that group
-     * before the button move is translated into configuration.
-     *
-     * @param {Backbone.View} view
-     *   The Backbone View that invoked this function.
-     * @param {jQuery} $button
-     *   A jQuery set that contains an li element that wraps a button element.
-     * @param {function} callback
-     *   A callback to invoke after the button group naming modal dialog has
-     *   been closed.
-     *
-     */
-    registerButtonMove: function (view, $button, callback) {
+    registerButtonMove: function registerButtonMove(view, $button, callback) {
       var $group = $button.closest('.ckeditor-toolbar-group');
 
-      // If dropped in a placeholder button group, the user must name it.
       if ($group.hasClass('placeholder')) {
         if (view.isProcessing) {
           return;
@@ -128,33 +68,18 @@
         view.isProcessing = true;
 
         Drupal.ckeditor.openGroupNameDialog(view, $group, callback);
-      }
-      else {
+      } else {
         view.model.set('isDirty', true);
         callback(true);
       }
     },
 
-    /**
-     * Translates changes in CKEditor config DOM structure to the config model.
-     *
-     * Each row has a placeholder group at the end of the row. A user may not
-     * move an existing button group past the placeholder group at the end of a
-     * row.
-     *
-     * @param {Backbone.View} view
-     *   The Backbone View that invoked this function.
-     * @param {jQuery} $group
-     *   A jQuery set that contains an li element that wraps a group of buttons.
-     */
-    registerGroupMove: function (view, $group) {
-      // Remove placeholder classes if necessary.
+    registerGroupMove: function registerGroupMove(view, $group) {
       var $row = $group.closest('.ckeditor-row');
       if ($row.hasClass('placeholder')) {
         $row.removeClass('placeholder');
       }
-      // If there are any rows with just a placeholder group, mark the row as a
-      // placeholder.
+
       $row.parent().children().each(function () {
         $row = $(this);
         if ($row.find('.ckeditor-toolbar-group').not('.placeholder').length === 0) {
@@ -164,39 +89,14 @@
       view.model.set('isDirty', true);
     },
 
-    /**
-     * Opens a dialog with a form for changing the title of a button group.
-     *
-     * @param {Backbone.View} view
-     *   The Backbone View that invoked this function.
-     * @param {jQuery} $group
-     *   A jQuery set that contains an li element that wraps a group of buttons.
-     * @param {function} callback
-     *   A callback to invoke after the button group naming modal dialog has
-     *   been closed.
-     */
-    openGroupNameDialog: function (view, $group, callback) {
+    openGroupNameDialog: function openGroupNameDialog(view, $group, callback) {
       callback = callback || function () {};
 
-      /**
-       * Validates the string provided as a button group title.
-       *
-       * @param {HTMLElement} form
-       *   The form DOM element that contains the input with the new button
-       *   group title string.
-       *
-       * @return {bool}
-       *   Returns true when an error exists, otherwise returns false.
-       */
       function validateForm(form) {
         if (form.elements[0].value.length === 0) {
           var $form = $(form);
           if (!$form.hasClass('errors')) {
-            $form
-              .addClass('errors')
-              .find('input')
-              .addClass('error')
-              .attr('aria-invalid', 'true');
+            $form.addClass('errors').find('input').addClass('error').attr('aria-invalid', 'true');
             $('<div class=\"description\" >' + Drupal.t('Please provide a name for the button group.') + '</div>').insertAfter(form.elements[0]);
           }
           return true;
@@ -204,129 +104,74 @@
         return false;
       }
 
-      /**
-       * Attempts to close the dialog; Validates user input.
-       *
-       * @param {string} action
-       *   The dialog action chosen by the user: 'apply' or 'cancel'.
-       * @param {HTMLElement} form
-       *   The form DOM element that contains the input with the new button
-       *   group title string.
-       */
       function closeDialog(action, form) {
-
-        /**
-         * Closes the dialog when the user cancels or supplies valid data.
-         */
         function shutdown() {
           dialog.close(action);
 
-          // The processing marker can be deleted since the dialog has been
-          // closed.
           delete view.isProcessing;
         }
 
-        /**
-         * Applies a string as the name of a CKEditor button group.
-         *
-         * @param {jQuery} $group
-         *   A jQuery set that contains an li element that wraps a group of
-         *   buttons.
-         * @param {string} name
-         *   The new name of the CKEditor button group.
-         */
         function namePlaceholderGroup($group, name) {
-          // If it's currently still a placeholder, then that means we're
-          // creating a new group, and we must do some extra work.
           if ($group.hasClass('placeholder')) {
-            // Remove all whitespace from the name, lowercase it and ensure
-            // HTML-safe encoding, then use this as the group ID for CKEditor
-            // configuration UI accessibility purposes only.
             var groupID = 'ckeditor-toolbar-group-aria-label-for-' + Drupal.checkPlain(name.toLowerCase().replace(/\s/g, '-'));
-            $group
-              // Update the group container.
-              .removeAttr('aria-label')
-              .attr('data-drupal-ckeditor-type', 'group')
-              .attr('tabindex', 0)
-              // Update the group heading.
-              .children('.ckeditor-toolbar-group-name')
-              .attr('id', groupID)
-              .end()
-              // Update the group items.
-              .children('.ckeditor-toolbar-group-buttons')
-              .attr('aria-labelledby', groupID);
+            $group.removeAttr('aria-label').attr('data-drupal-ckeditor-type', 'group').attr('tabindex', 0).children('.ckeditor-toolbar-group-name').attr('id', groupID).end().children('.ckeditor-toolbar-group-buttons').attr('aria-labelledby', groupID);
           }
 
-          $group
-            .attr('data-drupal-ckeditor-toolbar-group-name', name)
-            .children('.ckeditor-toolbar-group-name')
-            .text(name);
+          $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').text(name);
         }
 
-        // Invoke a user-provided callback and indicate failure.
         if (action === 'cancel') {
           shutdown();
           callback(false, $group);
           return;
         }
 
-        // Validate that a group name was provided.
         if (form && validateForm(form)) {
           return;
         }
 
-        // React to application of a valid group name.
         if (action === 'apply') {
           shutdown();
-          // Apply the provided name to the button group label.
+
           namePlaceholderGroup($group, Drupal.checkPlain(form.elements[0].value));
-          // Remove placeholder classes so that new placeholders will be
-          // inserted.
+
           $group.closest('.ckeditor-row.placeholder').addBack().removeClass('placeholder');
 
-          // Invoke a user-provided callback and indicate success.
           callback(true, $group);
 
-          // Signal that the active toolbar DOM structure has changed.
           view.model.set('isDirty', true);
         }
       }
 
-      // Create a Drupal dialog that will get a button group name from the user.
       var $ckeditorButtonGroupNameForm = $(Drupal.theme('ckeditorButtonGroupNameForm'));
       var dialog = Drupal.dialog($ckeditorButtonGroupNameForm.get(0), {
         title: Drupal.t('Button group name'),
         dialogClass: 'ckeditor-name-toolbar-group',
         resizable: false,
-        buttons: [
-          {
-            text: Drupal.t('Apply'),
-            click: function () {
-              closeDialog('apply', this);
-            },
-            primary: true
+        buttons: [{
+          text: Drupal.t('Apply'),
+          click: function click() {
+            closeDialog('apply', this);
           },
-          {
-            text: Drupal.t('Cancel'),
-            click: function () {
-              closeDialog('cancel');
-            }
+          primary: true
+        }, {
+          text: Drupal.t('Cancel'),
+          click: function click() {
+            closeDialog('cancel');
           }
-        ],
-        open: function () {
+        }],
+        open: function open() {
           var form = this;
           var $form = $(this);
           var $widget = $form.parent();
           $widget.find('.ui-dialog-titlebar-close').remove();
-          // Set a click handler on the input and button in the form.
+
           $widget.on('keypress.ckeditor', 'input, button', function (event) {
-            // React to enter key press.
             if (event.keyCode === 13) {
               var $target = $(event.currentTarget);
               var data = $target.data('ui-button');
               var action = 'apply';
-              // Assume 'apply', but take into account that the user might have
-              // pressed the enter key on the dialog buttons.
+
               if (data && data.options && data.options.label) {
                 action = data.options.label.toLowerCase();
               }
@@ -336,7 +181,7 @@
               event.preventDefault();
             }
           });
-          // Announce to the user that a modal dialog is open.
+
           var text = Drupal.t('Editing the name of the new button group in a dialog.');
           if (typeof $group.attr('data-drupal-ckeditor-toolbar-group-name') !== 'undefined') {
             text = Drupal.t('Editing the name of the "@groupName" button group in a dialog.', {
@@ -345,118 +190,71 @@
           }
           Drupal.announce(text);
         },
-        close: function (event) {
-          // Automatically destroy the DOM element that was used for the dialog.
+        close: function close(event) {
           $(event.target).remove();
         }
       });
-      // A modal dialog is used because the user must provide a button group
-      // name or cancel the button placement before taking any other action.
+
       dialog.showModal();
 
-      $(document.querySelector('.ckeditor-name-toolbar-group').querySelector('input'))
-        // When editing, set the "group name" input in the form to the current
-        // value.
-        .attr('value', $group.attr('data-drupal-ckeditor-toolbar-group-name'))
-        // Focus on the "group name" input in the form.
-        .trigger('focus');
+      $(document.querySelector('.ckeditor-name-toolbar-group').querySelector('input')).attr('value', $group.attr('data-drupal-ckeditor-toolbar-group-name')).trigger('focus');
     }
 
   };
 
-  /**
-   * Automatically shows/hides settings of buttons-only CKEditor plugins.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches show/hide behaviour to Plugin Settings buttons.
-   */
   Drupal.behaviors.ckeditorAdminButtonPluginSettings = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       var $ckeditorPluginSettings = $context.find('#ckeditor-plugin-settings').once('ckeditor-plugin-settings');
       if ($ckeditorPluginSettings.length) {
-        // Hide all button-dependent plugin settings initially.
         $ckeditorPluginSettings.find('[data-ckeditor-buttons]').each(function () {
           var $this = $(this);
           if ($this.data('verticalTab')) {
             $this.data('verticalTab').tabHide();
-          }
-          else {
-            // On very narrow viewports, Vertical Tabs are disabled.
+          } else {
             $this.hide();
           }
           $this.data('ckeditorButtonPluginSettingsActiveButtons', []);
         });
 
-        // Whenever a button is added or removed, check if we should show or
-        // hide the corresponding plugin settings. (Note that upon
-        // initialization, each button that already is part of the toolbar still
-        // is considered "added", hence it also works correctly for buttons that
-        // were added previously.)
-        $context
-          .find('.ckeditor-toolbar-active')
-          .off('CKEditorToolbarChanged.ckeditorAdminPluginSettings')
-          .on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', function (event, action, button) {
-            var $pluginSettings = $ckeditorPluginSettings
-              .find('[data-ckeditor-buttons~=' + button + ']');
-
-            // No settings for this button.
-            if ($pluginSettings.length === 0) {
-              return;
-            }
+        $context.find('.ckeditor-toolbar-active').off('CKEditorToolbarChanged.ckeditorAdminPluginSettings').on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', function (event, action, button) {
+          var $pluginSettings = $ckeditorPluginSettings.find('[data-ckeditor-buttons~=' + button + ']');
 
-            var verticalTab = $pluginSettings.data('verticalTab');
-            var activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
-            if (action === 'added') {
-              activeButtons.push(button);
-              // Show this plugin's settings if >=1 of its buttons are active.
-              if (verticalTab) {
-                verticalTab.tabShow();
-              }
-              else {
-                // On very narrow viewports, Vertical Tabs remain fieldsets.
-                $pluginSettings.show();
-              }
+          if ($pluginSettings.length === 0) {
+            return;
+          }
+
+          var verticalTab = $pluginSettings.data('verticalTab');
+          var activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
+          if (action === 'added') {
+            activeButtons.push(button);
 
+            if (verticalTab) {
+              verticalTab.tabShow();
+            } else {
+              $pluginSettings.show();
             }
-            else {
-              // Remove this button from the list of active buttons.
-              activeButtons.splice(activeButtons.indexOf(button), 1);
-              // Show this plugin's settings 0 of its buttons are active.
-              if (activeButtons.length === 0) {
-                if (verticalTab) {
-                  verticalTab.tabHide();
-                }
-                else {
-                  // On very narrow viewports, Vertical Tabs are disabled.
-                  $pluginSettings.hide();
-                }
+          } else {
+            activeButtons.splice(activeButtons.indexOf(button), 1);
+
+            if (activeButtons.length === 0) {
+              if (verticalTab) {
+                verticalTab.tabHide();
+              } else {
+                $pluginSettings.hide();
               }
             }
-            $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons', activeButtons);
-          });
+          }
+          $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons', activeButtons);
+        });
       }
     }
   };
 
-  /**
-   * Themes a blank CKEditor row.
-   *
-   * @return {string}
-   *   A HTML string for a CKEditor row.
-   */
   Drupal.theme.ckeditorRow = function () {
     return '<li class="ckeditor-row placeholder" role="group"><ul class="ckeditor-toolbar-groups clearfix"></ul></li>';
   };
 
-  /**
-   * Themes a blank CKEditor button group.
-   *
-   * @return {string}
-   *   A HTML string for a CKEditor button group.
-   */
   Drupal.theme.ckeditorToolbarGroup = function () {
     var group = '';
     group += '<li class="ckeditor-toolbar-group placeholder" role="presentation" aria-label="' + Drupal.t('Place a button to create a new button group.') + '">';
@@ -466,34 +264,15 @@
     return group;
   };
 
-  /**
-   * Themes a form for changing the title of a CKEditor button group.
-   *
-   * @return {string}
-   *   A HTML string for the form for the title of a CKEditor button group.
-   */
   Drupal.theme.ckeditorButtonGroupNameForm = function () {
     return '<form><input name="group-name" required="required"></form>';
   };
 
-  /**
-   * Themes a button that will toggle the button group names in active config.
-   *
-   * @return {string}
-   *   A HTML string for the button to toggle group names.
-   */
   Drupal.theme.ckeditorButtonGroupNamesToggle = function () {
     return '<button class="link ckeditor-groupnames-toggle" aria-pressed="false"></button>';
   };
 
-  /**
-   * Themes a button that will prompt the user to name a new button group.
-   *
-   * @return {string}
-   *   A HTML string for the button to create a name for a new button group.
-   */
   Drupal.theme.ckeditorNewButtonGroup = function () {
     return '<li class="ckeditor-add-new-group"><button aria-label="' + Drupal.t('Add a CKEditor button group to the end of this row.') + '">' + Drupal.t('Add group') + '</button></li>';
   };
-
-})(jQuery, Drupal, drupalSettings, _);
+})(jQuery, Drupal, drupalSettings, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js b/core/modules/ckeditor/js/ckeditor.drupalimage.admin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
copy to core/modules/ckeditor/js/ckeditor.drupalimage.admin.es6.js
diff --git a/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js b/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
index 256bb41c02..860d150e7f 100644
--- a/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.drupalimage.admin.js
@@ -1,22 +1,15 @@
 /**
- * @file
- * CKEditor 'drupalimage' plugin admin behavior.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/ckeditor.drupalimage.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Provides the summary for the "drupalimage" plugin settings vertical tab.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behaviour to the "drupalimage" settings vertical tab.
-   */
   Drupal.behaviors.ckeditorDrupalImageSettingsSummary = {
-    attach: function () {
+    attach: function attach() {
       $('[data-ckeditor-plugin-id="drupalimage"]').drupalSetSummary(function (context) {
         var root = 'input[name="editor[settings][plugins][drupalimage][image_upload]';
         var $status = $(root + '[status]"]');
@@ -26,14 +19,14 @@
         var $scheme = $(root + '[scheme]"]:checked');
 
         var maxFileSize = $maxFileSize.val() ? $maxFileSize.val() : $maxFileSize.attr('placeholder');
-        var maxDimensions = ($maxWidth.val() && $maxHeight.val()) ? '(' + $maxWidth.val() + 'x' + $maxHeight.val() + ')' : '';
+        var maxDimensions = $maxWidth.val() && $maxHeight.val() ? '(' + $maxWidth.val() + 'x' + $maxHeight.val() + ')' : '';
 
         if (!$status.is(':checked')) {
           return Drupal.t('Uploads disabled');
         }
 
         var output = '';
-        output += Drupal.t('Uploads enabled, max size: @size @dimensions', {'@size': maxFileSize, '@dimensions': maxDimensions});
+        output += Drupal.t('Uploads enabled, max size: @size @dimensions', { '@size': maxFileSize, '@dimensions': maxDimensions });
         if ($scheme.length) {
           output += '<br />' + $scheme.attr('data-label');
         }
@@ -41,5 +34,4 @@
       });
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.js b/core/modules/ckeditor/js/ckeditor.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/ckeditor.js
copy to core/modules/ckeditor/js/ckeditor.es6.js
diff --git a/core/modules/ckeditor/js/ckeditor.js b/core/modules/ckeditor/js/ckeditor.js
index 2b469c8037..4252c60b3c 100644
--- a/core/modules/ckeditor/js/ckeditor.js
+++ b/core/modules/ckeditor/js/ckeditor.js
@@ -1,65 +1,33 @@
 /**
- * @file
- * CKEditor implementation of {@link Drupal.editors} API.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/ckeditor.es6.js
+* @preserve
+**/
 
 (function (Drupal, debounce, CKEDITOR, $, displace, AjaxCommands) {
 
   'use strict';
 
-  /**
-   * @namespace
-   */
   Drupal.editors.ckeditor = {
-
-    /**
-     * Editor attach callback.
-     *
-     * @param {HTMLElement} element
-     *   The element to attach the editor to.
-     * @param {string} format
-     *   The text format for the editor.
-     *
-     * @return {bool}
-     *   Whether the call to `CKEDITOR.replace()` created an editor or not.
-     */
-    attach: function (element, format) {
+    attach: function attach(element, format) {
       this._loadExternalPlugins(format);
-      // Also pass settings that are Drupal-specific.
+
       format.editorSettings.drupal = {
         format: format.format
       };
 
-      // Set a title on the CKEditor instance that includes the text field's
-      // label so that screen readers say something that is understandable
-      // for end users.
       var label = $('label[for=' + element.getAttribute('id') + ']').html();
-      format.editorSettings.title = Drupal.t('Rich Text Editor, !label field', {'!label': label});
+      format.editorSettings.title = Drupal.t('Rich Text Editor, !label field', { '!label': label });
 
       return !!CKEDITOR.replace(element, format.editorSettings);
     },
 
-    /**
-     * Editor detach callback.
-     *
-     * @param {HTMLElement} element
-     *   The element to detach the editor from.
-     * @param {string} format
-     *   The text format used for the editor.
-     * @param {string} trigger
-     *   The event trigger for the detach.
-     *
-     * @return {bool}
-     *   Whether the call to `CKEDITOR.dom.element.get(element).getEditor()`
-     *   found an editor or not.
-     */
-    detach: function (element, format, trigger) {
+    detach: function detach(element, format, trigger) {
       var editor = CKEDITOR.dom.element.get(element).getEditor();
       if (editor) {
         if (trigger === 'serialize') {
           editor.updateElement();
-        }
-        else {
+        } else {
           editor.destroy();
           element.removeAttribute('contentEditable');
         }
@@ -67,28 +35,13 @@
       return !!editor;
     },
 
-    /**
-     * Reacts on a change in the editor element.
-     *
-     * @param {HTMLElement} element
-     *   The element where the change occured.
-     * @param {function} callback
-     *   Callback called with the value of the editor.
-     *
-     * @return {bool}
-     *   Whether the call to `CKEDITOR.dom.element.get(element).getEditor()`
-     *   found an editor or not.
-     */
-    onChange: function (element, callback) {
+    onChange: function onChange(element, callback) {
       var editor = CKEDITOR.dom.element.get(element).getEditor();
       if (editor) {
         editor.on('change', debounce(function () {
           callback(editor.getData());
         }, 400));
 
-        // A temporary workaround to control scrollbar appearance when using
-        // autoGrow event to control editor's height.
-        // @todo Remove when http://dev.ckeditor.com/ticket/12120 is fixed.
         editor.on('mode', function () {
           var editable = editor.editable();
           if (!editable.isInline()) {
@@ -98,8 +51,7 @@
 
               if (scrollable.$.scrollHeight < scrollable.$.clientHeight) {
                 scrollable.setStyle('overflow-y', 'hidden');
-              }
-              else {
+              } else {
                 scrollable.removeStyle('overflow-y');
               }
             }, null, null, 10000);
@@ -109,34 +61,15 @@
       return !!editor;
     },
 
-    /**
-     * Attaches an inline editor to a DOM element.
-     *
-     * @param {HTMLElement} element
-     *   The element to attach the editor to.
-     * @param {object} format
-     *   The text format used in the editor.
-     * @param {string} [mainToolbarId]
-     *   The id attribute for the main editor toolbar, if any.
-     * @param {string} [floatedToolbarId]
-     *   The id attribute for the floated editor toolbar, if any.
-     *
-     * @return {bool}
-     *   Whether the call to `CKEDITOR.replace()` created an editor or not.
-     */
-    attachInlineEditor: function (element, format, mainToolbarId, floatedToolbarId) {
+    attachInlineEditor: function attachInlineEditor(element, format, mainToolbarId, floatedToolbarId) {
       this._loadExternalPlugins(format);
-      // Also pass settings that are Drupal-specific.
+
       format.editorSettings.drupal = {
         format: format.format
       };
 
       var settings = $.extend(true, {}, format.editorSettings);
 
-      // If a toolbar is already provided for "true WYSIWYG" (in-place editing),
-      // then use that toolbar instead: override the default settings to render
-      // CKEditor UI's top toolbar into mainToolbar, and don't render the bottom
-      // toolbar at all. (CKEditor doesn't need a floated toolbar.)
       if (mainToolbarId) {
         var settingsOverride = {
           extraPlugins: 'sharedspace',
@@ -146,15 +79,13 @@
           }
         };
 
-        // Find the "Source" button, if any, and replace it with "Sourcedialog".
-        // (The 'sourcearea' plugin only works in CKEditor's iframe mode.)
         var sourceButtonFound = false;
         for (var i = 0; !sourceButtonFound && i < settings.toolbar.length; i++) {
           if (settings.toolbar[i] !== '/') {
             for (var j = 0; !sourceButtonFound && j < settings.toolbar[i].items.length; j++) {
               if (settings.toolbar[i].items[j] === 'Source') {
                 sourceButtonFound = true;
-                // Swap sourcearea's "Source" button for sourcedialog's.
+
                 settings.toolbar[i].items[j] = 'Sourcedialog';
                 settingsOverride.extraPlugins += ',sourcedialog';
                 settingsOverride.removePlugins += ',sourcearea';
@@ -168,22 +99,14 @@
         settings.sharedSpaces = settingsOverride.sharedSpaces;
       }
 
-      // CKEditor requires an element to already have the contentEditable
-      // attribute set to "true", otherwise it won't attach an inline editor.
       element.setAttribute('contentEditable', 'true');
 
       return !!CKEDITOR.inline(element, settings);
     },
 
-    /**
-     * Loads the required external plugins for the editor.
-     *
-     * @param {object} format
-     *   The text format used in the editor.
-     */
-    _loadExternalPlugins: function (format) {
+    _loadExternalPlugins: function _loadExternalPlugins(format) {
       var externalPlugins = format.editorSettings.drupalExternalPlugins;
-      // Register and load additional CKEditor plugins as necessary.
+
       if (externalPlugins) {
         for (var pluginName in externalPlugins) {
           if (externalPlugins.hasOwnProperty(pluginName)) {
@@ -197,51 +120,22 @@
   };
 
   Drupal.ckeditor = {
-
-    /**
-     * Variable storing the current dialog's save callback.
-     *
-     * @type {?function}
-     */
     saveCallback: null,
 
-    /**
-     * Open a dialog for a Drupal-based plugin.
-     *
-     * This dynamically loads jQuery UI (if necessary) using the Drupal AJAX
-     * framework, then opens a dialog at the specified Drupal path.
-     *
-     * @param {CKEditor} editor
-     *   The CKEditor instance that is opening the dialog.
-     * @param {string} url
-     *   The URL that contains the contents of the dialog.
-     * @param {object} existingValues
-     *   Existing values that will be sent via POST to the url for the dialog
-     *   contents.
-     * @param {function} saveCallback
-     *   A function to be called upon saving the dialog.
-     * @param {object} dialogSettings
-     *   An object containing settings to be passed to the jQuery UI.
-     */
-    openDialog: function (editor, url, existingValues, saveCallback, dialogSettings) {
-      // Locate a suitable place to display our loading indicator.
+    openDialog: function openDialog(editor, url, existingValues, saveCallback, dialogSettings) {
       var $target = $(editor.container.$);
       if (editor.elementMode === CKEDITOR.ELEMENT_MODE_REPLACE) {
         $target = $target.find('.cke_contents');
       }
 
-      // Remove any previous loading indicator.
       $target.css('position', 'relative').find('.ckeditor-dialog-loading').remove();
 
-      // Add a consistent dialog class.
       var classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
       classes.push('ui-dialog--narrow');
       dialogSettings.dialogClass = classes.join(' ');
       dialogSettings.autoResize = window.matchMedia('(min-width: 600px)').matches;
       dialogSettings.width = 'auto';
 
-      // Add a "Loading…" message, hide it underneath the CKEditor toolbar,
-      // create a Drupal.Ajax instance to load the dialog and trigger it.
       var $content = $('<div class="ckeditor-dialog-loading"><span style="top: -40px;" class="ckeditor-dialog-loading-link">' + Drupal.t('Loading...') + '</span></div>');
       $content.appendTo($target);
 
@@ -250,55 +144,47 @@
         dialogType: 'modal',
         selector: '.ckeditor-dialog-loading-link',
         url: url,
-        progress: {type: 'throbber'},
+        progress: { type: 'throbber' },
         submit: {
           editor_object: existingValues
         }
       });
       ckeditorAjaxDialog.execute();
 
-      // After a short delay, show "Loading…" message.
       window.setTimeout(function () {
-        $content.find('span').animate({top: '0px'});
+        $content.find('span').animate({ top: '0px' });
       }, 1000);
 
-      // Store the save callback to be executed when this dialog is closed.
       Drupal.ckeditor.saveCallback = saveCallback;
     }
   };
 
-  // Moves the dialog to the top of the CKEDITOR stack.
   $(window).on('dialogcreate', function (e, dialog, $element, settings) {
     $('.ui-dialog--narrow').css('zIndex', CKEDITOR.config.baseFloatZIndex + 1);
   });
 
-  // Respond to new dialogs that are opened by CKEditor, closing the AJAX loader.
   $(window).on('dialog:beforecreate', function (e, dialog, $element, settings) {
-    $('.ckeditor-dialog-loading').animate({top: '-40px'}, function () {
+    $('.ckeditor-dialog-loading').animate({ top: '-40px' }, function () {
       $(this).remove();
     });
   });
 
-  // Respond to dialogs that are saved, sending data back to CKEditor.
   $(window).on('editor:dialogsave', function (e, values) {
     if (Drupal.ckeditor.saveCallback) {
       Drupal.ckeditor.saveCallback(values);
     }
   });
 
-  // Respond to dialogs that are closed, removing the current save handler.
   $(window).on('dialog:afterclose', function (e, dialog, $element) {
     if (Drupal.ckeditor.saveCallback) {
       Drupal.ckeditor.saveCallback = null;
     }
   });
 
-  // Formulate a default formula for the maximum autoGrow height.
   $(document).on('drupalViewportOffsetChange', function () {
     CKEDITOR.config.autoGrow_maxHeight = 0.7 * (window.innerHeight - displace.offsets.top - displace.offsets.bottom);
   });
 
-  // Redirect on hash change when the original hash has an associated CKEditor.
   function redirectTextareaFragmentToCKEditorInstance() {
     var hash = location.hash.substr(1);
     var element = document.getElementById(hash);
@@ -312,30 +198,11 @@
   }
   $(window).on('hashchange.ckeditor', redirectTextareaFragmentToCKEditorInstance);
 
-  // Set autoGrow to make the editor grow the moment it is created.
   CKEDITOR.config.autoGrow_onStartup = true;
 
-  // Set the CKEditor cache-busting string to the same value as Drupal.
   CKEDITOR.timestamp = drupalSettings.ckeditor.timestamp;
 
   if (AjaxCommands) {
-
-    /**
-     * Command to add style sheets to a CKEditor instance.
-     *
-     * Works for both iframe and inline CKEditor instances.
-     *
-     * @param {Drupal.Ajax} [ajax]
-     *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-     * @param {object} response
-     *   The response from the Ajax request.
-     * @param {string} response.editor_id
-     *   The CKEditor instance ID.
-     * @param {number} [status]
-     *   The XMLHttpRequest status.
-     *
-     * @see http://docs.ckeditor.com/#!/api/CKEDITOR.dom.document
-     */
     AjaxCommands.prototype.ckeditor_add_stylesheet = function (ajax, response, status) {
       var editor = CKEDITOR.instances[response.editor_id];
 
@@ -346,5 +213,4 @@
       }
     };
   }
-
-})(Drupal, Drupal.debounce, CKEDITOR, jQuery, Drupal.displace, Drupal.AjaxCommands);
+})(Drupal, Drupal.debounce, CKEDITOR, jQuery, Drupal.displace, Drupal.AjaxCommands);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.language.admin.js b/core/modules/ckeditor/js/ckeditor.language.admin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/ckeditor.language.admin.js
copy to core/modules/ckeditor/js/ckeditor.language.admin.es6.js
diff --git a/core/modules/ckeditor/js/ckeditor.language.admin.js b/core/modules/ckeditor/js/ckeditor.language.admin.js
index 1b9b5a66f0..59b9c0e607 100644
--- a/core/modules/ckeditor/js/ckeditor.language.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.language.admin.js
@@ -1,16 +1,18 @@
+/**
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/ckeditor.language.admin.es6.js
+* @preserve
+**/
+
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Provides the summary for the "language" plugin settings vertical tab.
-   */
   Drupal.behaviors.ckeditorLanguageSettingsSummary = {
-    attach: function () {
+    attach: function attach() {
       $('#edit-editor-settings-plugins-language').drupalSetSummary(function (context) {
         return $('#edit-editor-settings-plugins-language-language-list-type option:selected').text();
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
copy to core/modules/ckeditor/js/ckeditor.stylescombo.admin.es6.js
diff --git a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
index c425dbb300..4fff1da58b 100644
--- a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js
@@ -1,69 +1,31 @@
 /**
- * @file
- * CKEditor StylesCombo admin behavior.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/ckeditor.stylescombo.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, _) {
 
   'use strict';
 
-  /**
-   * Ensures that the "stylescombo" button's metadata remains up-to-date.
-   *
-   * Triggers the CKEditorPluginSettingsChanged event whenever the "stylescombo"
-   * plugin settings change, to ensure that the corresponding feature metadata
-   * is immediately updated — i.e. ensure that HTML tags and classes entered
-   * here are known to be "required", which may affect filter settings.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches admin behaviour to the "stylescombo" button.
-   */
   Drupal.behaviors.ckeditorStylesComboSettings = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
 
-      // React to changes in the list of user-defined styles: calculate the new
-      // stylesSet setting up to 2 times per second, and if it is different,
-      // fire the CKEditorPluginSettingsChanged event with the updated parts of
-      // the CKEditor configuration. (This will, in turn, cause the hidden
-      // CKEditor instance to be updated and a drupalEditorFeatureModified event
-      // to fire.)
-      var $ckeditorActiveToolbar = $context
-        .find('.ckeditor-toolbar-configuration')
-        .find('.ckeditor-toolbar-active');
+      var $ckeditorActiveToolbar = $context.find('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
       var previousStylesSet = drupalSettings.ckeditor.hiddenCKEditorConfig.stylesSet;
       var that = this;
-      $context.find('[name="editor[settings][plugins][stylescombo][styles]"]')
-        .on('blur.ckeditorStylesComboSettings', function () {
-          var styles = $.trim($(this).val());
-          var stylesSet = that._generateStylesSetSetting(styles);
-          if (!_.isEqual(previousStylesSet, stylesSet)) {
-            previousStylesSet = stylesSet;
-            $ckeditorActiveToolbar.trigger('CKEditorPluginSettingsChanged', [
-              {stylesSet: stylesSet}
-            ]);
-          }
-        });
+      $context.find('[name="editor[settings][plugins][stylescombo][styles]"]').on('blur.ckeditorStylesComboSettings', function () {
+        var styles = $.trim($(this).val());
+        var stylesSet = that._generateStylesSetSetting(styles);
+        if (!_.isEqual(previousStylesSet, stylesSet)) {
+          previousStylesSet = stylesSet;
+          $ckeditorActiveToolbar.trigger('CKEditorPluginSettingsChanged', [{ stylesSet: stylesSet }]);
+        }
+      });
     },
 
-    /**
-     * Builds the "stylesSet" configuration part of the CKEditor JS settings.
-     *
-     * @see \Drupal\ckeditor\Plugin\ckeditor\plugin\StylesCombo::generateStylesSetSetting()
-     *
-     * Note that this is a more forgiving implementation than the PHP version:
-     * the parsing works identically, but instead of failing on invalid styles,
-     * we just ignore those.
-     *
-     * @param {string} styles
-     *   The "styles" setting.
-     *
-     * @return {Array}
-     *   An array containing the "stylesSet" configuration.
-     */
-    _generateStylesSetSetting: function (styles) {
+    _generateStylesSetSetting: function _generateStylesSetSetting(styles) {
       var stylesSet = [];
 
       styles = styles.replace(/\r/g, '\n');
@@ -71,28 +33,22 @@
       for (var i = 0; i < lines.length; i++) {
         var style = $.trim(lines[i]);
 
-        // Ignore empty lines in between non-empty lines.
         if (style.length === 0) {
           continue;
         }
 
-        // Validate syntax: element[.class...]|label pattern expected.
         if (style.match(/^ *[a-zA-Z0-9]+ *(\.[a-zA-Z0-9_-]+ *)*\| *.+ *$/) === null) {
-          // Instead of failing, we just ignore any invalid styles.
           continue;
         }
 
-        // Parse.
         var parts = style.split('|');
         var selector = parts[0];
         var label = parts[1];
         var classes = selector.split('.');
         var element = classes.shift();
 
-        // Build the data structure CKEditor's stylescombo plugin expects.
-        // @see http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles
         stylesSet.push({
-          attributes: {class: classes.join(' ')},
+          attributes: { class: classes.join(' ') },
           element: element,
           name: label
         });
@@ -102,27 +58,17 @@
     }
   };
 
-  /**
-   * Provides the summary for the "stylescombo" plugin settings vertical tab.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behaviour to the plugin settings vertical tab.
-   */
   Drupal.behaviors.ckeditorStylesComboSettingsSummary = {
-    attach: function () {
+    attach: function attach() {
       $('[data-ckeditor-plugin-id="stylescombo"]').drupalSetSummary(function (context) {
         var styles = $.trim($('[data-drupal-selector="edit-editor-settings-plugins-stylescombo-styles"]').val());
         if (styles.length === 0) {
           return Drupal.t('No styles configured');
-        }
-        else {
+        } else {
           var count = $.trim(styles).split('\n').length;
-          return Drupal.t('@count styles configured', {'@count': count});
+          return Drupal.t('@count styles configured', { '@count': count });
         }
       });
     }
   };
-
-})(jQuery, Drupal, drupalSettings, _);
+})(jQuery, Drupal, drupalSettings, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/models/Model.js b/core/modules/ckeditor/js/models/Model.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/models/Model.js
copy to core/modules/ckeditor/js/models/Model.es6.js
diff --git a/core/modules/ckeditor/js/models/Model.js b/core/modules/ckeditor/js/models/Model.js
index 162e363ead..f27b554d9c 100644
--- a/core/modules/ckeditor/js/models/Model.js
+++ b/core/modules/ckeditor/js/models/Model.js
@@ -1,75 +1,32 @@
 /**
- * @file
- * A Backbone Model for the state of a CKEditor toolbar configuration .
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/models/Model.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  /**
-   * Backbone model for the CKEditor toolbar configuration state.
-   *
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.ckeditor.Model = Backbone.Model.extend(/** @lends Drupal.ckeditor.Model# */{
-
-    /**
-     * Default values.
-     *
-     * @type {object}
-     */
-    defaults: /** @lends Drupal.ckeditor.Model# */{
-
-      /**
-       * The CKEditor configuration that is being manipulated through the UI.
-       */
+  Drupal.ckeditor.Model = Backbone.Model.extend({
+    defaults: {
       activeEditorConfig: null,
 
-      /**
-       * The textarea that contains the serialized representation of the active
-       * CKEditor configuration.
-       */
       $textarea: null,
 
-      /**
-       * Tracks whether the active toolbar DOM structure has been changed. When
-       * true, activeEditorConfig needs to be updated, and when that is updated,
-       * $textarea will also be updated.
-       */
       isDirty: false,
 
-      /**
-       * The configuration for the hidden CKEditor instance that is used to
-       * build the features metadata.
-       */
       hiddenEditorConfig: null,
 
-      /**
-       * A hash that maps buttons to features.
-       */
       buttonsToFeatures: null,
 
-      /**
-       * A hash, keyed by a feature name, that details CKEditor plugin features.
-       */
       featuresMetadata: null,
 
-      /**
-       * Whether the button group names are currently visible.
-       */
       groupNamesVisible: false
     },
 
-    /**
-     * @method
-     */
-    sync: function () {
-      // Push the settings into the textarea.
+    sync: function sync() {
       this.get('$textarea').val(JSON.stringify(this.get('activeEditorConfig')));
     }
   });
-
-})(Drupal, Backbone);
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js b/core/modules/ckeditor/js/plugins/drupalimage/plugin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/plugins/drupalimage/plugin.js
copy to core/modules/ckeditor/js/plugins/drupalimage/plugin.es6.js
diff --git a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js b/core/modules/ckeditor/js/plugins/drupalimage/plugin.js
index 0025664e09..af5301a8d4 100644
--- a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js
+++ b/core/modules/ckeditor/js/plugins/drupalimage/plugin.js
@@ -1,17 +1,8 @@
 /**
- * @file
- * Drupal Image plugin.
- *
- * This alters the existing CKEditor image2 widget plugin to:
- * - require a data-entity-type and a data-entity-uuid attribute (which Drupal
- *   uses to track where images are being used)
- * - use a Drupal-native dialog (that is in fact just an alterable Drupal form
- *   like any other) instead of CKEditor's own dialogs.
- *
- * @see \Drupal\editor\Form\EditorImageDialog
- *
- * @ignore
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/plugins/drupalimage/plugin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, CKEDITOR) {
 
@@ -22,25 +13,13 @@
     icons: 'drupalimage',
     hidpi: true,
 
-    beforeInit: function (editor) {
-      // Override the image2 widget definition to require and handle the
-      // additional data-entity-type and data-entity-uuid attributes.
+    beforeInit: function beforeInit(editor) {
       editor.on('widgetDefinition', function (event) {
         var widgetDefinition = event.data;
         if (widgetDefinition.name !== 'image') {
           return;
         }
 
-        // First, convert requiredContent & allowedContent from the string
-        // format that image2 uses for both to formats that are better suited
-        // for extending, so that both this basic drupalimage plugin and Drupal
-        // modules can easily extend it.
-        // @see http://docs.ckeditor.com/#!/api/CKEDITOR.filter.allowedContentRules
-        // Mapped from image2's allowedContent. Unlike image2, we don't allow
-        // <figure>, <figcaption>, <div> or <p>  in our downcast, so we omit
-        // those. For the <img> tag, we list all attributes it lists, but omit
-        // the classes, because the listed classes are for alignment, and for
-        // alignment we use the data-align attribute.
         widgetDefinition.allowedContent = {
           img: {
             attributes: {
@@ -52,10 +31,7 @@
             classes: {}
           }
         };
-        // Mapped from image2's requiredContent: "img[src,alt]". This does not
-        // use the object format unlike above, but a CKEDITOR.style instance,
-        // because requiredContent does not support the object format.
-        // @see https://www.drupal.org/node/2585173#comment-10456981
+
         widgetDefinition.requiredContent = new CKEDITOR.style({
           element: 'img',
           attributes: {
@@ -64,10 +40,6 @@
           }
         });
 
-        // Extend requiredContent & allowedContent.
-        // CKEDITOR.style is an immutable object: we cannot modify its
-        // definition to extend requiredContent. Hence we get the definition,
-        // modify it, and pass it to a new CKEDITOR.style instance.
         var requiredContent = widgetDefinition.requiredContent.getDefinition();
         requiredContent.attributes['data-entity-type'] = '';
         requiredContent.attributes['data-entity-uuid'] = '';
@@ -75,44 +47,25 @@
         widgetDefinition.allowedContent.img.attributes['!data-entity-type'] = true;
         widgetDefinition.allowedContent.img.attributes['!data-entity-uuid'] = true;
 
-        // Override downcast(): since we only accept <img> in our upcast method,
-        // the element is already correct. We only need to update the element's
-        // data-entity-uuid attribute.
         widgetDefinition.downcast = function (element) {
           element.attributes['data-entity-type'] = this.data['data-entity-type'];
           element.attributes['data-entity-uuid'] = this.data['data-entity-uuid'];
         };
 
-        // We want to upcast <img> elements to a DOM structure required by the
-        // image2 widget; we only accept an <img> tag, and that <img> tag MAY
-        // have a data-entity-type and a data-entity-uuid attribute.
         widgetDefinition.upcast = function (element, data) {
           if (element.name !== 'img') {
             return;
-          }
-          // Don't initialize on pasted fake objects.
-          else if (element.attributes['data-cke-realelement']) {
-            return;
-          }
+          } else if (element.attributes['data-cke-realelement']) {
+              return;
+            }
 
-          // Parse the data-entity-type attribute.
           data['data-entity-type'] = element.attributes['data-entity-type'];
-          // Parse the data-entity-uuid attribute.
+
           data['data-entity-uuid'] = element.attributes['data-entity-uuid'];
 
           return element;
         };
 
-        // Overrides default implementation. Used to populate the "classes"
-        // property of the widget's "data" property, which is used for the
-        // "widget styles" functionality
-        // (http://docs.ckeditor.com/#!/guide/dev_styles-section-widget-styles).
-        // Is applied to whatever the main element of the widget is (<figure> or
-        // <img>). The classes in image2_captionedClass are always added due to
-        // a bug in CKEditor. In the case of drupalimage, we don't ever want to
-        // add that class, because the widget template already contains it.
-        // @see http://dev.ckeditor.com/ticket/13888
-        // @see https://www.drupal.org/node/2268941
         var originalGetClasses = widgetDefinition.getClasses;
         widgetDefinition.getClasses = function () {
           var classes = originalGetClasses.call(this);
@@ -129,9 +82,6 @@
           return classes;
         };
 
-        // Protected; keys of the widget data to be sent to the Drupal dialog.
-        // Keys in the hash are the keys for image2's data, values are the keys
-        // that the Drupal dialog uses.
         widgetDefinition._mapDataToDialog = {
           'src': 'src',
           'alt': 'alt',
@@ -141,9 +91,6 @@
           'data-entity-uuid': 'data-entity-uuid'
         };
 
-        // Protected; transforms widget's data object to the format used by the
-        // \Drupal\editor\Form\EditorImageDialog dialog, keeping only the data
-        // listed in widgetDefinition._dataForDialog.
         widgetDefinition._dataToDialogValues = function (data) {
           var dialogValues = {};
           var map = widgetDefinition._mapDataToDialog;
@@ -153,7 +100,6 @@
           return dialogValues;
         };
 
-        // Protected; the inverse of _dataToDialogValues.
         widgetDefinition._dialogValuesToData = function (dialogReturnValues) {
           var data = {};
           var map = widgetDefinition._mapDataToDialog;
@@ -165,44 +111,31 @@
           return data;
         };
 
-        // Protected; creates Drupal dialog save callback.
         widgetDefinition._createDialogSaveCallback = function (editor, widget) {
           return function (dialogReturnValues) {
             var firstEdit = !widget.ready;
 
-            // Dialog may have blurred the widget. Re-focus it first.
             if (!firstEdit) {
               widget.focus();
             }
 
             editor.fire('saveSnapshot');
 
-            // Pass `true` so DocumentFragment will also be returned.
             var container = widget.wrapper.getParent(true);
             var image = widget.parts.image;
 
-            // Set the updated widget data, after the necessary conversions from
-            // the dialog's return values.
-            // Note: on widget#setData this widget instance might be destroyed.
             var data = widgetDefinition._dialogValuesToData(dialogReturnValues.attributes);
             widget.setData(data);
 
-            // Retrieve the widget once again. It could've been destroyed
-            // when shifting state, so might deal with a new instance.
             widget = editor.widgets.getByElement(image);
 
-            // It's first edit, just after widget instance creation, but before
-            // it was inserted into DOM. So we need to retrieve the widget
-            // wrapper from inside the DocumentFragment which we cached above
-            // and finalize other things (like ready event and flag).
             if (firstEdit) {
               editor.widgets.finalizeCreation(container);
             }
 
             setTimeout(function () {
-              // (Re-)focus the widget.
               widget.focus();
-              // Save snapshot for undo support.
+
               editor.fire('saveSnapshot');
             });
 
@@ -214,19 +147,12 @@
         widgetDefinition.init = function () {
           originalInit.call(this);
 
-          // Update data.link object with attributes if the link has been
-          // discovered.
-          // @see plugins/image2/plugin.js/init() in CKEditor; this is similar.
           if (this.parts.link) {
             this.setData('link', CKEDITOR.plugins.image2.getLinkAttributesParser()(editor, this.parts.link));
           }
         };
       });
 
-      // Add a widget#edit listener to every instance of image2 widget in order
-      // to handle its editing with a Drupal-native dialog.
-      // This includes also a case just after the image was created
-      // and dialog should be opened for it for the first time.
       editor.widgets.on('instanceCreated', function (event) {
         var widget = event.data;
 
@@ -235,30 +161,23 @@
         }
 
         widget.on('edit', function (event) {
-          // Cancel edit event to break image2's dialog binding
-          // (and also to prevent automatic insertion before opening dialog).
           event.cancel();
 
-          // Open drupalimage dialog.
           editor.execCommand('editdrupalimage', {
             existingValues: widget.definition._dataToDialogValues(widget.data),
             saveCallback: widget.definition._createDialogSaveCallback(editor, widget),
-            // Drupal.t() will not work inside CKEditor plugins because CKEditor
-            // loads the JavaScript file instead of Drupal. Pull translated
-            // strings from the plugin settings that are translated server-side.
+
             dialogTitle: widget.data.src ? editor.config.drupalImage_dialogTitleEdit : editor.config.drupalImage_dialogTitleAdd
           });
         });
       });
 
-      // Register the "editdrupalimage" command, which essentially just replaces
-      // the "image" command's CKEditor dialog with a Drupal-native dialog.
       editor.addCommand('editdrupalimage', {
         allowedContent: 'img[alt,!src,width,height,!data-entity-type,!data-entity-uuid]',
         requiredContent: 'img[alt,src,data-entity-type,data-entity-uuid]',
-        modes: {wysiwyg: 1},
+        modes: { wysiwyg: 1 },
         canUndo: true,
-        exec: function (editor, data) {
+        exec: function exec(editor, data) {
           var dialogSettings = {
             title: data.dialogTitle,
             dialogClass: 'editor-image-dialog'
@@ -267,24 +186,21 @@
         }
       });
 
-      // Register the toolbar button.
       if (editor.ui.addButton) {
         editor.ui.addButton('DrupalImage', {
           label: Drupal.t('Image'),
-          // Note that we use the original image2 command!
+
           command: 'image'
         });
       }
     },
 
-    afterInit: function (editor) {
+    afterInit: function afterInit(editor) {
       linkCommandIntegrator(editor);
     }
 
   });
 
-  // Override image2's integration with the official CKEditor link plugin:
-  // integrate with the drupallink plugin instead.
   CKEDITOR.plugins.image2.getLinkAttributesParser = function () {
     return CKEDITOR.plugins.drupallink.parseLinkAttributes;
   };
@@ -292,42 +208,25 @@
     return CKEDITOR.plugins.drupallink.getLinkAttributes;
   };
 
-  /**
-   * Integrates the drupalimage widget with the drupallink plugin.
-   *
-   * Makes images linkable.
-   *
-   * @param {CKEDITOR.editor} editor
-   *   A CKEditor instance.
-   */
   function linkCommandIntegrator(editor) {
-    // Nothing to integrate with if the drupallink plugin is not loaded.
     if (!editor.plugins.drupallink) {
       return;
     }
 
-    // Override default behaviour of 'drupalunlink' command.
     editor.getCommand('drupalunlink').on('exec', function (evt) {
       var widget = getFocusedWidget(editor);
 
-      // Override 'drupalunlink' only when link truly belongs to the widget. If
-      // wrapped inline widget in a link, let default unlink work.
-      // @see https://dev.ckeditor.com/ticket/11814
       if (!widget || !widget.parts.link) {
         return;
       }
 
       widget.setData('link', null);
 
-      // Selection (which is fake) may not change if unlinked image in focused
-      // widget, i.e. if captioned image. Let's refresh command state manually
-      // here.
       this.refresh(editor, editor.elementPath());
 
       evt.cancel();
     });
 
-    // Override default refresh of 'drupalunlink' command.
     editor.getCommand('drupalunlink').on('refresh', function (evt) {
       var widget = getFocusedWidget(editor);
 
@@ -335,24 +234,12 @@
         return;
       }
 
-      // Note that widget may be wrapped in a link, which
-      // does not belong to that widget (#11814).
-      this.setState(widget.data.link || widget.wrapper.getAscendant('a') ?
-        CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED);
+      this.setState(widget.data.link || widget.wrapper.getAscendant('a') ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED);
 
       evt.cancel();
     });
   }
 
-  /**
-   * Gets the focused widget, if of the type specific for this plugin.
-   *
-   * @param {CKEDITOR.editor} editor
-   *   A CKEditor instance.
-   *
-   * @return {?CKEDITOR.plugins.widget}
-   *   The focused image2 widget instance, or null.
-   */
   function getFocusedWidget(editor) {
     var widget = editor.widgets.focused;
 
@@ -363,9 +250,7 @@
     return null;
   }
 
-  // Expose an API for other plugins to interact with drupalimage widgets.
   CKEDITOR.plugins.drupalimage = {
     getFocusedWidget: getFocusedWidget
   };
-
-})(jQuery, Drupal, CKEDITOR);
+})(jQuery, Drupal, CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
copy to core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js
diff --git a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
index d1d666c5b9..fefb1dc5b2 100644
--- a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
+++ b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js
@@ -1,14 +1,8 @@
 /**
- * @file
- * Drupal Image Caption plugin.
- *
- * This alters the existing CKEditor image2 widget plugin, which is already
- * altered by the Drupal Image plugin, to:
- * - allow for the data-caption and data-align attributes to be set
- * - mimic the upcasting behavior of the caption_filter filter.
- *
- * @ignore
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js
+* @preserve
+**/
 
 (function (CKEDITOR) {
 
@@ -17,30 +11,20 @@
   CKEDITOR.plugins.add('drupalimagecaption', {
     requires: 'drupalimage',
 
-    beforeInit: function (editor) {
-      // Disable default placeholder text that comes with CKEditor's image2
-      // plugin: it has an inferior UX (it requires the user to manually delete
-      // the place holder text).
+    beforeInit: function beforeInit(editor) {
       editor.lang.image2.captionPlaceholder = '';
 
-      // Drupal.t() will not work inside CKEditor plugins because CKEditor loads
-      // the JavaScript file instead of Drupal. Pull translated strings from the
-      // plugin settings that are translated server-side.
       var placeholderText = editor.config.drupalImageCaption_captionPlaceholderText;
 
-      // Override the image2 widget definition to handle the additional
-      // data-align and data-caption attributes.
       editor.on('widgetDefinition', function (event) {
         var widgetDefinition = event.data;
         if (widgetDefinition.name !== 'image') {
           return;
         }
 
-        // Only perform the downcasting/upcasting for to the enabled filters.
         var captionFilterEnabled = editor.config.drupalImageCaption_captionFilterEnabled;
         var alignFilterEnabled = editor.config.drupalImageCaption_alignFilterEnabled;
 
-        // Override default features definitions for drupalimagecaption.
         CKEDITOR.tools.extend(widgetDefinition.features, {
           caption: {
             requiredContent: 'img[data-caption]'
@@ -50,10 +34,6 @@
           }
         }, true);
 
-        // Extend requiredContent & allowedContent.
-        // CKEDITOR.style is an immutable object: we cannot modify its
-        // definition to extend requiredContent. Hence we get the definition,
-        // modify it, and pass it to a new CKEDITOR.style instance.
         var requiredContent = widgetDefinition.requiredContent.getDefinition();
         requiredContent.attributes['data-align'] = '';
         requiredContent.attributes['data-caption'] = '';
@@ -61,15 +41,8 @@
         widgetDefinition.allowedContent.img.attributes['!data-align'] = true;
         widgetDefinition.allowedContent.img.attributes['!data-caption'] = true;
 
-        // Override allowedContent setting for the 'caption' nested editable.
-        // This must match what caption_filter enforces.
-        // @see \Drupal\filter\Plugin\Filter\FilterCaption::process()
-        // @see \Drupal\Component\Utility\Xss::filter()
         widgetDefinition.editables.caption.allowedContent = 'a[!href]; em strong cite code br';
 
-        // Override downcast(): ensure we *only* output <img>, but also ensure
-        // we include the data-entity-type, data-entity-uuid, data-align and
-        // data-caption attributes.
         var originalDowncast = widgetDefinition.downcast;
         widgetDefinition.downcast = function (element) {
           var img = findElementByName(element, 'img');
@@ -80,8 +53,6 @@
           var attrs = img.attributes;
 
           if (captionFilterEnabled) {
-            // If image contains a non-empty caption, serialize caption to the
-            // data-caption attribute.
             if (captionHtml) {
               attrs['data-caption'] = captionHtml;
             }
@@ -92,30 +63,20 @@
             }
           }
 
-          // If img is wrapped with a link, we want to return that link.
           if (img.parent.name === 'a') {
             return img.parent;
-          }
-          else {
+          } else {
             return img;
           }
         };
 
-        // We want to upcast <img> elements to a DOM structure required by the
-        // image2 widget. Depending on a case it may be:
-        //   - just an <img> tag (non-captioned, not-centered image),
-        //   - <img> tag in a paragraph (non-captioned, centered image),
-        //   - <figure> tag (captioned image).
-        // We take the same attributes into account as downcast() does.
         var originalUpcast = widgetDefinition.upcast;
         widgetDefinition.upcast = function (element, data) {
           if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
             return;
-          }
-          // Don't initialize on pasted fake objects.
-          else if (element.attributes['data-cke-realelement']) {
-            return;
-          }
+          } else if (element.attributes['data-cke-realelement']) {
+              return;
+            }
 
           element = originalUpcast.call(this, element, data);
           var attrs = element.attributes;
@@ -127,8 +88,6 @@
           var retElement = element;
           var caption;
 
-          // We won't need the attributes during editing: we'll use widget.data
-          // to store them (except the caption, which is stored in the DOM).
           if (captionFilterEnabled) {
             caption = attrs['data-caption'];
             delete attrs['data-caption'];
@@ -143,9 +102,6 @@
           delete attrs['data-entity-uuid'];
 
           if (captionFilterEnabled) {
-            // Unwrap from <p> wrapper created by HTML parser for a captioned
-            // image. The captioned image will be transformed to <figure>, so we
-            // don't want the <p> anymore.
             if (element.parent.name === 'p' && caption) {
               var index = element.getIndex();
               var splitBefore = index > 0;
@@ -163,15 +119,10 @@
               retElement = element;
             }
 
-            // If this image has a caption, create a full <figure> structure.
             if (caption) {
               var figure = new CKEDITOR.htmlParser.element('figure');
               caption = new CKEDITOR.htmlParser.fragment.fromHtml(caption, 'figcaption');
 
-              // Use Drupal's data-placeholder attribute to insert a CSS-based,
-              // translation-ready placeholder for empty captions. Note that it
-              // also must to be done for new instances (see
-              // widgetDefinition._createDialogSaveCallback).
               caption.attributes['data-placeholder'] = placeholderText;
 
               element.replaceWith(figure);
@@ -183,58 +134,37 @@
           }
 
           if (alignFilterEnabled) {
-            // If this image doesn't have a caption (or the caption filter is
-            // disabled), but it is centered, make sure that it's wrapped with
-            // <p>, which will become a part of the widget.
             if (data.align === 'center' && (!captionFilterEnabled || !caption)) {
               var p = new CKEDITOR.htmlParser.element('p');
               element.replaceWith(p);
               p.add(element);
-              // Apply the class for centered images.
+
               p.addClass(editor.config.image2_alignClasses[1]);
               retElement = p;
             }
           }
 
-          // Return the upcasted element (<img>, <figure> or <p>).
           return retElement;
         };
 
-        // Protected; keys of the widget data to be sent to the Drupal dialog.
-        // Append to the values defined by the drupalimage plugin.
-        // @see core/modules/ckeditor/js/plugins/drupalimage/plugin.js
         CKEDITOR.tools.extend(widgetDefinition._mapDataToDialog, {
           'align': 'data-align',
           'data-caption': 'data-caption',
           'hasCaption': 'hasCaption'
         });
 
-        // Override Drupal dialog save callback.
         var originalCreateDialogSaveCallback = widgetDefinition._createDialogSaveCallback;
         widgetDefinition._createDialogSaveCallback = function (editor, widget) {
           var saveCallback = originalCreateDialogSaveCallback.call(this, editor, widget);
 
           return function (dialogReturnValues) {
-            // Ensure hasCaption is a boolean. image2 assumes it always works
-            // with booleans; if this is not the case, then
-            // CKEDITOR.plugins.image2.stateShifter() will incorrectly mark
-            // widget.data.hasCaption as "changed" (e.g. when hasCaption === 0
-            // instead of hasCaption === false). This causes image2's "state
-            // shifter" to enter the wrong branch of the algorithm and blow up.
             dialogReturnValues.attributes.hasCaption = !!dialogReturnValues.attributes.hasCaption;
 
             var actualWidget = saveCallback(dialogReturnValues);
 
-            // By default, the template of captioned widget has no
-            // data-placeholder attribute. Note that it also must be done when
-            // upcasting existing elements (see widgetDefinition.upcast).
             if (dialogReturnValues.attributes.hasCaption) {
               actualWidget.editables.caption.setAttribute('data-placeholder', placeholderText);
 
-              // Some browsers will add a <br> tag to a newly created DOM
-              // element with no content. Remove this <br> if it is the only
-              // thing in the caption. Our placeholder support requires the
-              // element be entirely empty. See filter-caption.css.
               var captionElement = actualWidget.editables.caption.$;
               if (captionElement.childNodes.length === 1 && captionElement.childNodes.item(0).nodeName === 'BR') {
                 captionElement.removeChild(captionElement.childNodes.item(0));
@@ -242,12 +172,11 @@
             }
           };
         };
-      // Low priority to ensure drupalimage's event handler runs first.
       }, null, null, 20);
     },
 
-    afterInit: function (editor) {
-      var disableButtonIfOnWidget = function (evt) {
+    afterInit: function afterInit(editor) {
+      var disableButtonIfOnWidget = function disableButtonIfOnWidget(evt) {
         var widget = editor.widgets.focused;
         if (widget && widget.name === 'image') {
           this.setState(CKEDITOR.TRISTATE_DISABLED);
@@ -255,7 +184,6 @@
         }
       };
 
-      // Disable alignment buttons if the align filter is not enabled.
       if (editor.plugins.justify && !editor.config.drupalImageCaption_alignFilterEnabled) {
         var cmd;
         var commands = ['justifyleft', 'justifycenter', 'justifyright', 'justifyblock'];
@@ -268,20 +196,6 @@
     }
   });
 
-  /**
-   * Finds an element by its name.
-   *
-   * Function will check first the passed element itself and then all its
-   * children in DFS order.
-   *
-   * @param {CKEDITOR.htmlParser.element} element
-   *   The element to search.
-   * @param {string} name
-   *   The element name to search for.
-   *
-   * @return {?CKEDITOR.htmlParser.element}
-   *   The found element, or null.
-   */
   function findElementByName(element, name) {
     if (element.name === name) {
       return element;
@@ -291,11 +205,10 @@
     element.forEach(function (el) {
       if (el.name === name) {
         found = el;
-        // Stop here.
+
         return false;
       }
     }, CKEDITOR.NODE_ELEMENT);
     return found;
   }
-
-})(CKEDITOR);
+})(CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/plugins/drupallink/plugin.js b/core/modules/ckeditor/js/plugins/drupallink/plugin.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/plugins/drupallink/plugin.js
copy to core/modules/ckeditor/js/plugins/drupallink/plugin.es6.js
diff --git a/core/modules/ckeditor/js/plugins/drupallink/plugin.js b/core/modules/ckeditor/js/plugins/drupallink/plugin.js
index 9bd4dce985..87164779c5 100644
--- a/core/modules/ckeditor/js/plugins/drupallink/plugin.js
+++ b/core/modules/ckeditor/js/plugins/drupallink/plugin.js
@@ -1,9 +1,8 @@
 /**
- * @file
- * Drupal Link plugin.
- *
- * @ignore
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/plugins/drupallink/plugin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, CKEDITOR) {
 
@@ -18,16 +17,14 @@
     for (var attrIndex = 0; attrIndex < domElement.attributes.length; attrIndex++) {
       attribute = domElement.attributes.item(attrIndex);
       attributeName = attribute.nodeName.toLowerCase();
-      // Ignore data-cke-* attributes; they're CKEditor internals.
+
       if (attributeName.indexOf('data-cke-') === 0) {
         continue;
       }
-      // Store the value for this attribute, unless there's a data-cke-saved-
-      // alternative for it, which will contain the quirk-free, original value.
+
       parsedAttributes[attributeName] = element.data('cke-saved-' + attributeName) || attribute.nodeValue;
     }
 
-    // Remove any cke_* classes.
     if (parsedAttributes.class) {
       parsedAttributes.class = CKEDITOR.tools.trim(parsedAttributes.class.replace(/cke_\S+/, ''));
     }
@@ -43,11 +40,8 @@
       }
     }
 
-    // CKEditor tracks the *actual* saved href in a data-cke-saved-* attribute
-    // to work around browser quirks. We need to update it.
     set['data-cke-saved-href'] = set.href;
 
-    // Remove all attributes which are not currently set.
     var removed = {};
     for (var s in set) {
       if (set.hasOwnProperty(s)) {
@@ -65,8 +59,7 @@
     icons: 'drupallink,drupalunlink',
     hidpi: true,
 
-    init: function (editor) {
-      // Add the commands for link and unlink.
+    init: function init(editor) {
       editor.addCommand('drupallink', {
         allowedContent: {
           a: {
@@ -82,28 +75,21 @@
             href: ''
           }
         }),
-        modes: {wysiwyg: 1},
+        modes: { wysiwyg: 1 },
         canUndo: true,
-        exec: function (editor) {
+        exec: function exec(editor) {
           var drupalImageUtils = CKEDITOR.plugins.drupalimage;
           var focusedImageWidget = drupalImageUtils && drupalImageUtils.getFocusedWidget(editor);
           var linkElement = getSelectedLink(editor);
 
-          // Set existing values based on selected element.
           var existingValues = {};
           if (linkElement && linkElement.$) {
             existingValues = parseAttributes(editor, linkElement);
-          }
-          // Or, if an image widget is focused, we're editing a link wrapping
-          // an image widget.
-          else if (focusedImageWidget && focusedImageWidget.data.link) {
-            existingValues = CKEDITOR.tools.clone(focusedImageWidget.data.link);
-          }
+          } else if (focusedImageWidget && focusedImageWidget.data.link) {
+              existingValues = CKEDITOR.tools.clone(focusedImageWidget.data.link);
+            }
 
-          // Prepare a save callback to be used upon saving the dialog.
-          var saveCallback = function (returnValues) {
-            // If an image widget is focused, we're not editing an independent
-            // link, but we're wrapping an image widget in a link.
+          var saveCallback = function saveCallback(returnValues) {
             if (focusedImageWidget) {
               focusedImageWidget.setData('link', CKEDITOR.tools.extend(returnValues.attributes, focusedImageWidget.data.link));
               editor.fire('saveSnapshot');
@@ -112,58 +98,44 @@
 
             editor.fire('saveSnapshot');
 
-            // Create a new link element if needed.
             if (!linkElement && returnValues.attributes.href) {
               var selection = editor.getSelection();
               var range = selection.getRanges(1)[0];
 
-              // Use link URL as text with a collapsed cursor.
               if (range.collapsed) {
-                // Shorten mailto URLs to just the email address.
                 var text = new CKEDITOR.dom.text(returnValues.attributes.href.replace(/^mailto:/, ''), editor.document);
                 range.insertNode(text);
                 range.selectNodeContents(text);
               }
 
-              // Create the new link by applying a style to the new text.
-              var style = new CKEDITOR.style({element: 'a', attributes: returnValues.attributes});
+              var style = new CKEDITOR.style({ element: 'a', attributes: returnValues.attributes });
               style.type = CKEDITOR.STYLE_INLINE;
               style.applyToRange(range);
               range.select();
 
-              // Set the link so individual properties may be set below.
               linkElement = getSelectedLink(editor);
-            }
-            // Update the link properties.
-            else if (linkElement) {
-              for (var attrName in returnValues.attributes) {
-                if (returnValues.attributes.hasOwnProperty(attrName)) {
-                  // Update the property if a value is specified.
-                  if (returnValues.attributes[attrName].length > 0) {
-                    var value = returnValues.attributes[attrName];
-                    linkElement.data('cke-saved-' + attrName, value);
-                    linkElement.setAttribute(attrName, value);
-                  }
-                  // Delete the property if set to an empty string.
-                  else {
-                    linkElement.removeAttribute(attrName);
+            } else if (linkElement) {
+                for (var attrName in returnValues.attributes) {
+                  if (returnValues.attributes.hasOwnProperty(attrName)) {
+                    if (returnValues.attributes[attrName].length > 0) {
+                      var value = returnValues.attributes[attrName];
+                      linkElement.data('cke-saved-' + attrName, value);
+                      linkElement.setAttribute(attrName, value);
+                    } else {
+                        linkElement.removeAttribute(attrName);
+                      }
                   }
                 }
               }
-            }
 
-            // Save snapshot for undo support.
             editor.fire('saveSnapshot');
           };
-          // Drupal.t() will not work inside CKEditor plugins because CKEditor
-          // loads the JavaScript file instead of Drupal. Pull translated
-          // strings from the plugin settings that are translated server-side.
+
           var dialogSettings = {
             title: linkElement ? editor.config.drupalLink_dialogTitleEdit : editor.config.drupalLink_dialogTitleAdd,
             dialogClass: 'editor-link-dialog'
           };
 
-          // Open the dialog for the edit form.
           Drupal.ckeditor.openDialog(editor, Drupal.url('editor/dialog/link/' + editor.config.drupal.format), existingValues, saveCallback, dialogSettings);
         }
       });
@@ -176,25 +148,22 @@
             href: ''
           }
         }),
-        exec: function (editor) {
-          var style = new CKEDITOR.style({element: 'a', type: CKEDITOR.STYLE_INLINE, alwaysRemoveElement: 1});
+        exec: function exec(editor) {
+          var style = new CKEDITOR.style({ element: 'a', type: CKEDITOR.STYLE_INLINE, alwaysRemoveElement: 1 });
           editor.removeStyle(style);
         },
-        refresh: function (editor, path) {
+        refresh: function refresh(editor, path) {
           var element = path.lastElement && path.lastElement.getAscendant('a', true);
           if (element && element.getName() === 'a' && element.getAttribute('href') && element.getChildCount()) {
             this.setState(CKEDITOR.TRISTATE_OFF);
-          }
-          else {
+          } else {
             this.setState(CKEDITOR.TRISTATE_DISABLED);
           }
         }
       });
 
-      // CTRL + K.
       editor.setKeystroke(CKEDITOR.CTRL + 75, 'drupallink');
 
-      // Add buttons for link and unlink.
       if (editor.ui.addButton) {
         editor.ui.addButton('DrupalLink', {
           label: Drupal.t('Link'),
@@ -217,7 +186,6 @@
         }
       });
 
-      // If the "menu" plugin is loaded, register the menu items.
       if (editor.addMenuItems) {
         editor.addMenuItems({
           link: {
@@ -236,7 +204,6 @@
         });
       }
 
-      // If the "contextmenu" plugin is loaded, register the listeners.
       if (editor.contextMenu) {
         editor.contextMenu.addListener(function (element, selection) {
           if (!element || element.isReadOnly()) {
@@ -249,7 +216,7 @@
 
           var menu = {};
           if (anchor.getAttribute('href') && anchor.getChildCount()) {
-            menu = {link: CKEDITOR.TRISTATE_OFF, unlink: CKEDITOR.TRISTATE_OFF};
+            menu = { link: CKEDITOR.TRISTATE_OFF, unlink: CKEDITOR.TRISTATE_OFF };
           }
           return menu;
         });
@@ -257,26 +224,6 @@
     }
   });
 
-  /**
-   * Get the surrounding link element of current selection.
-   *
-   * The following selection will all return the link element.
-   *
-   * @example
-   *  <a href="#">li^nk</a>
-   *  <a href="#">[link]</a>
-   *  text[<a href="#">link]</a>
-   *  <a href="#">li[nk</a>]
-   *  [<b><a href="#">li]nk</a></b>]
-   *  [<a href="#"><b>li]nk</b></a>
-   *
-   * @param {CKEDITOR.editor} editor
-   *   The CKEditor editor object
-   *
-   * @return {?HTMLElement}
-   *   The selected link element, or null.
-   *
-   */
   function getSelectedLink(editor) {
     var selection = editor.getSelection();
     var selectedElement = selection.getSelectedElement();
@@ -293,12 +240,8 @@
     return null;
   }
 
-  // Expose an API for other plugins to interact with drupallink widgets.
-  // (Compatible with the official CKEditor link plugin's API:
-  // http://dev.ckeditor.com/ticket/13885.)
   CKEDITOR.plugins.drupallink = {
     parseLinkAttributes: parseAttributes,
     getLinkAttributes: getAttributes
   };
-
-})(jQuery, Drupal, drupalSettings, CKEDITOR);
+})(jQuery, Drupal, drupalSettings, CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/AuralView.js b/core/modules/ckeditor/js/views/AuralView.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/views/AuralView.js
copy to core/modules/ckeditor/js/views/AuralView.es6.js
diff --git a/core/modules/ckeditor/js/views/AuralView.js b/core/modules/ckeditor/js/views/AuralView.js
index 0659eb2061..73d5ab179e 100644
--- a/core/modules/ckeditor/js/views/AuralView.js
+++ b/core/modules/ckeditor/js/views/AuralView.js
@@ -1,18 +1,14 @@
 /**
- * @file
- * A Backbone View that provides the aural view of CKEditor toolbar
- * configuration.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/views/AuralView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone, $) {
 
   'use strict';
 
-  Drupal.ckeditor.AuralView = Backbone.View.extend(/** @lends Drupal.ckeditor.AuralView# */{
-
-    /**
-     * @type {object}
-     */
+  Drupal.ckeditor.AuralView = Backbone.View.extend({
     events: {
       'click .ckeditor-buttons a': 'announceButtonHelp',
       'click .ckeditor-multiple-buttons a': 'announceSeparatorHelp',
@@ -21,52 +17,25 @@
       'focus .ckeditor-toolbar-group': 'onFocus'
     },
 
-    /**
-     * Backbone View for CKEditor toolbar configuration; aural UX (output only).
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
-      // Announce the button and group positions when the model is no longer
-      // dirty.
+    initialize: function initialize() {
       this.listenTo(this.model, 'change:isDirty', this.announceMove);
     },
 
-    /**
-     * Calls announce on buttons and groups when their position is changed.
-     *
-     * @param {Drupal.ckeditor.ConfigurationModel} model
-     *   The ckeditor configuration model.
-     * @param {bool} isDirty
-     *   A model attribute that indicates if the changed toolbar configuration
-     *   has been stored or not.
-     */
-    announceMove: function (model, isDirty) {
-      // Announce the position of a button or group after the model has been
-      // updated.
+    announceMove: function announceMove(model, isDirty) {
       if (!isDirty) {
         var item = document.activeElement || null;
         if (item) {
           var $item = $(item);
           if ($item.hasClass('ckeditor-toolbar-group')) {
             this.announceButtonGroupPosition($item);
-          }
-          else if ($item.parent().hasClass('ckeditor-button')) {
+          } else if ($item.parent().hasClass('ckeditor-button')) {
             this.announceButtonPosition($item.parent());
           }
         }
       }
     },
 
-    /**
-     * Handles the focus event of elements in the active and available toolbars.
-     *
-     * @param {jQuery.Event} event
-     *   The focus event that was triggered.
-     */
-    onFocus: function (event) {
+    onFocus: function onFocus(event) {
       event.stopPropagation();
 
       var $originalTarget = $(event.target);
@@ -74,19 +43,12 @@
       var $parent = $currentTarget.parent();
       if ($parent.hasClass('ckeditor-button') || $parent.hasClass('ckeditor-button-separator')) {
         this.announceButtonPosition($currentTarget.parent());
-      }
-      else if ($originalTarget.attr('role') !== 'button' && $currentTarget.hasClass('ckeditor-toolbar-group')) {
+      } else if ($originalTarget.attr('role') !== 'button' && $currentTarget.hasClass('ckeditor-toolbar-group')) {
         this.announceButtonGroupPosition($currentTarget);
       }
     },
 
-    /**
-     * Announces the current position of a button group.
-     *
-     * @param {jQuery} $group
-     *   A jQuery set that contains an li element that wraps a group of buttons.
-     */
-    announceButtonGroupPosition: function ($group) {
+    announceButtonGroupPosition: function announceButtonGroupPosition($group) {
       var $groups = $group.parent().children();
       var $row = $group.closest('.ckeditor-row');
       var $rows = $row.parent().children();
@@ -101,8 +63,7 @@
         '@row': row,
         '@rowCount': rowCount
       });
-      // If this position is the first in the last row then tell the user that
-      // pressing the down arrow key will create a new row.
+
       if (position === 1 && row === rowCount) {
         text += '\n';
         text += Drupal.t('Press the down arrow key to create a new row.');
@@ -110,13 +71,7 @@
       Drupal.announce(text, 'assertive');
     },
 
-    /**
-     * Announces current button position.
-     *
-     * @param {jQuery} $button
-     *   A jQuery set that contains an li element that wraps a button.
-     */
-    announceButtonPosition: function ($button) {
+    announceButtonPosition: function announceButtonPosition($button) {
       var $row = $button.closest('.ckeditor-row');
       var $rows = $row.parent().children();
       var $buttons = $button.closest('.ckeditor-buttons').children();
@@ -128,12 +83,10 @@
       var positionCount = $buttons.length;
       var row = $rows.index($row) + 1;
       var rowCount = $rows.not('.placeholder').length;
-      // The name of the button separator is 'button separator' and its type
-      // is 'separator', so we do not want to print the type of this item,
-      // otherwise the UA will speak 'button separator separator'.
-      var type = ($button.attr('data-drupal-ckeditor-type') === 'separator') ? '' : Drupal.t('button');
+
+      var type = $button.attr('data-drupal-ckeditor-type') === 'separator' ? '' : Drupal.t('button');
       var text;
-      // The button is located in the available button set.
+
       if ($button.closest('.ckeditor-toolbar-disabled').length > 0) {
         text = Drupal.t('@name @type.', {
           '@name': $button.children().attr('aria-label'),
@@ -142,41 +95,31 @@
         text += '\n' + Drupal.t('Press the down arrow key to activate.');
 
         Drupal.announce(text, 'assertive');
-      }
-      // The button is in the active toolbar.
-      else if ($group.not('.placeholder').length === 1) {
-        text = Drupal.t('@name @type in position @position of @positionCount in @groupName button group in row @row of @rowCount.', {
-          '@name': $button.children().attr('aria-label'),
-          '@type': type,
-          '@position': position,
-          '@positionCount': positionCount,
-          '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
-          '@row': row,
-          '@rowCount': rowCount
-        });
-        // If this position is the first in the last row then tell the user that
-        // pressing the down arrow key will create a new row.
-        if (groupPosition === 1 && position === 1 && row === rowCount) {
-          text += '\n';
-          text += Drupal.t('Press the down arrow key to create a new button group in a new row.');
-        }
-        // If this position is the last one in this row then tell the user that
-        // moving the button to the next group will create a new group.
-        if (groupPosition === groupPositionCount && position === positionCount) {
-          text += '\n';
-          text += Drupal.t('This is the last group. Move the button forward to create a new group.');
+      } else if ($group.not('.placeholder').length === 1) {
+          text = Drupal.t('@name @type in position @position of @positionCount in @groupName button group in row @row of @rowCount.', {
+            '@name': $button.children().attr('aria-label'),
+            '@type': type,
+            '@position': position,
+            '@positionCount': positionCount,
+            '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
+            '@row': row,
+            '@rowCount': rowCount
+          });
+
+          if (groupPosition === 1 && position === 1 && row === rowCount) {
+            text += '\n';
+            text += Drupal.t('Press the down arrow key to create a new button group in a new row.');
+          }
+
+          if (groupPosition === groupPositionCount && position === positionCount) {
+            text += '\n';
+            text += Drupal.t('This is the last group. Move the button forward to create a new group.');
+          }
+          Drupal.announce(text, 'assertive');
         }
-        Drupal.announce(text, 'assertive');
-      }
     },
 
-    /**
-     * Provides help information when a button is clicked.
-     *
-     * @param {jQuery.Event} event
-     *   The click event for the button click.
-     */
-    announceButtonHelp: function (event) {
+    announceButtonHelp: function announceButtonHelp(event) {
       var $link = $(event.currentTarget);
       var $button = $link.parent();
       var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
@@ -188,8 +131,7 @@
         });
         message += '\n' + Drupal.t('Use the keyboard arrow keys to change the position of this button.');
         message += '\n' + Drupal.t('Press the up arrow key on the top row to disable the button.');
-      }
-      else {
+      } else {
         message = Drupal.t('The "@name" button is currently disabled.', {
           '@name': $link.attr('aria-label')
         });
@@ -199,13 +141,7 @@
       event.preventDefault();
     },
 
-    /**
-     * Provides help information when a separator is clicked.
-     *
-     * @param {jQuery.Event} event
-     *   The click event for the separator click.
-     */
-    announceSeparatorHelp: function (event) {
+    announceSeparatorHelp: function announceSeparatorHelp(event) {
       var $link = $(event.currentTarget);
       var $button = $link.parent();
       var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
@@ -216,8 +152,7 @@
           '@name': $link.attr('aria-label')
         });
         message += '\n' + Drupal.t('Use the keyboard arrow keys to change the position of this separator.');
-      }
-      else {
+      } else {
         message = Drupal.t('Separators are used to visually split individual buttons.');
         message += '\n' + Drupal.t('This @name is currently disabled.', {
           '@name': $link.attr('aria-label')
@@ -229,5 +164,4 @@
       event.preventDefault();
     }
   });
-
-})(Drupal, Backbone, jQuery);
+})(Drupal, Backbone, jQuery);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/ControllerView.js b/core/modules/ckeditor/js/views/ControllerView.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/views/ControllerView.js
copy to core/modules/ckeditor/js/views/ControllerView.es6.js
diff --git a/core/modules/ckeditor/js/views/ControllerView.js b/core/modules/ckeditor/js/views/ControllerView.js
index 0f48373a79..13b9963032 100644
--- a/core/modules/ckeditor/js/views/ControllerView.js
+++ b/core/modules/ckeditor/js/views/ControllerView.js
@@ -1,155 +1,97 @@
 /**
- * @file
- * A Backbone View acting as a controller for CKEditor toolbar configuration.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/views/ControllerView.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, Backbone, CKEDITOR, _) {
 
   'use strict';
 
-  Drupal.ckeditor.ControllerView = Backbone.View.extend(/** @lends Drupal.ckeditor.ControllerView# */{
-
-    /**
-     * @type {object}
-     */
+  Drupal.ckeditor.ControllerView = Backbone.View.extend({
     events: {},
 
-    /**
-     * Backbone View acting as a controller for CKEditor toolbar configuration.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.getCKEditorFeatures(this.model.get('hiddenEditorConfig'), this.disableFeaturesDisallowedByFilters.bind(this));
 
-      // Push the active editor configuration to the textarea.
       this.model.listenTo(this.model, 'change:activeEditorConfig', this.model.sync);
       this.listenTo(this.model, 'change:isDirty', this.parseEditorDOM);
     },
 
-    /**
-     * Converts the active toolbar DOM structure to an object representation.
-     *
-     * @param {Drupal.ckeditor.ConfigurationModel} model
-     *   The state model for the CKEditor configuration.
-     * @param {bool} isDirty
-     *   Tracks whether the active toolbar DOM structure has been changed.
-     *   isDirty is toggled back to false in this method.
-     * @param {object} options
-     *   An object that includes:
-     * @param {bool} [options.broadcast]
-     *   A flag that controls whether a CKEditorToolbarChanged event should be
-     *   fired for configuration changes.
-     *
-     * @fires event:CKEditorToolbarChanged
-     */
-    parseEditorDOM: function (model, isDirty, options) {
+    parseEditorDOM: function parseEditorDOM(model, isDirty, options) {
       if (isDirty) {
         var currentConfig = this.model.get('activeEditorConfig');
 
-        // Process the rows.
         var rows = [];
-        this.$el
-          .find('.ckeditor-active-toolbar-configuration')
-          .children('.ckeditor-row').each(function () {
-            var groups = [];
-            // Process the button groups.
-            $(this).find('.ckeditor-toolbar-group').each(function () {
-              var $group = $(this);
-              var $buttons = $group.find('.ckeditor-button');
-              if ($buttons.length) {
-                var group = {
-                  name: $group.attr('data-drupal-ckeditor-toolbar-group-name'),
-                  items: []
-                };
-                $group.find('.ckeditor-button, .ckeditor-multiple-button').each(function () {
-                  group.items.push($(this).attr('data-drupal-ckeditor-button-name'));
-                });
-                groups.push(group);
-              }
-            });
-            if (groups.length) {
-              rows.push(groups);
+        this.$el.find('.ckeditor-active-toolbar-configuration').children('.ckeditor-row').each(function () {
+          var groups = [];
+
+          $(this).find('.ckeditor-toolbar-group').each(function () {
+            var $group = $(this);
+            var $buttons = $group.find('.ckeditor-button');
+            if ($buttons.length) {
+              var group = {
+                name: $group.attr('data-drupal-ckeditor-toolbar-group-name'),
+                items: []
+              };
+              $group.find('.ckeditor-button, .ckeditor-multiple-button').each(function () {
+                group.items.push($(this).attr('data-drupal-ckeditor-button-name'));
+              });
+              groups.push(group);
             }
           });
+          if (groups.length) {
+            rows.push(groups);
+          }
+        });
         this.model.set('activeEditorConfig', rows);
-        // Mark the model as clean. Whether or not the sync to the textfield
-        // occurs depends on the activeEditorConfig attribute firing a change
-        // event. The DOM has at least been processed and posted, so as far as
-        // the model is concerned, it is clean.
+
         this.model.set('isDirty', false);
 
-        // Determine whether we should trigger an event.
         if (options.broadcast !== false) {
           var prev = this.getButtonList(currentConfig);
           var next = this.getButtonList(rows);
           if (prev.length !== next.length) {
-            this.$el
-              .find('.ckeditor-toolbar-active')
-              .trigger('CKEditorToolbarChanged', [
-                (prev.length < next.length) ? 'added' : 'removed',
-                _.difference(_.union(prev, next), _.intersection(prev, next))[0]
-              ]);
+            this.$el.find('.ckeditor-toolbar-active').trigger('CKEditorToolbarChanged', [prev.length < next.length ? 'added' : 'removed', _.difference(_.union(prev, next), _.intersection(prev, next))[0]]);
           }
         }
       }
     },
 
-    /**
-     * Asynchronously retrieve the metadata for all available CKEditor features.
-     *
-     * In order to get a list of all features needed by CKEditor, we create a
-     * hidden CKEditor instance, then check the CKEditor's "allowedContent"
-     * filter settings. Because creating an instance is expensive, a callback
-     * must be provided that will receive a hash of {@link Drupal.EditorFeature}
-     * features keyed by feature (button) name.
-     *
-     * @param {object} CKEditorConfig
-     *   An object that represents the configuration settings for a CKEditor
-     *   editor component.
-     * @param {function} callback
-     *   A function to invoke when the instanceReady event is fired by the
-     *   CKEditor object.
-     */
-    getCKEditorFeatures: function (CKEditorConfig, callback) {
-      var getProperties = function (CKEPropertiesList) {
-        return (_.isObject(CKEPropertiesList)) ? _.keys(CKEPropertiesList) : [];
+    getCKEditorFeatures: function getCKEditorFeatures(CKEditorConfig, callback) {
+      var getProperties = function getProperties(CKEPropertiesList) {
+        return _.isObject(CKEPropertiesList) ? _.keys(CKEPropertiesList) : [];
       };
 
-      var convertCKERulesToEditorFeature = function (feature, CKEFeatureRules) {
+      var convertCKERulesToEditorFeature = function convertCKERulesToEditorFeature(feature, CKEFeatureRules) {
         for (var i = 0; i < CKEFeatureRules.length; i++) {
           var CKERule = CKEFeatureRules[i];
           var rule = new Drupal.EditorFeatureHTMLRule();
 
-          // Tags.
           var tags = getProperties(CKERule.elements);
-          rule.required.tags = (CKERule.propertiesOnly) ? [] : tags;
+          rule.required.tags = CKERule.propertiesOnly ? [] : tags;
           rule.allowed.tags = tags;
-          // Attributes.
+
           rule.required.attributes = getProperties(CKERule.requiredAttributes);
           rule.allowed.attributes = getProperties(CKERule.attributes);
-          // Styles.
+
           rule.required.styles = getProperties(CKERule.requiredStyles);
           rule.allowed.styles = getProperties(CKERule.styles);
-          // Classes.
+
           rule.required.classes = getProperties(CKERule.requiredClasses);
           rule.allowed.classes = getProperties(CKERule.classes);
-          // Raw.
+
           rule.raw = CKERule;
 
           feature.addHTMLRule(rule);
         }
       };
 
-      // Create hidden CKEditor with all features enabled, retrieve metadata.
-      // @see \Drupal\ckeditor\Plugin\Editor\CKEditor::buildConfigurationForm().
       var hiddenCKEditorID = 'ckeditor-hidden';
       if (CKEDITOR.instances[hiddenCKEditorID]) {
         CKEDITOR.instances[hiddenCKEditorID].destroy(true);
       }
-      // Load external plugins, if any.
+
       var hiddenEditorConfig = this.model.get('hiddenEditorConfig');
       if (hiddenEditorConfig.drupalExternalPlugins) {
         var externalPlugins = hiddenEditorConfig.drupalExternalPlugins;
@@ -161,11 +103,8 @@
       }
       CKEDITOR.inline($('#' + hiddenCKEditorID).get(0), CKEditorConfig);
 
-      // Once the instance is ready, retrieve the allowedContent filter rules
-      // and convert them to Drupal.EditorFeature objects.
       CKEDITOR.once('instanceReady', function (e) {
         if (e.editor.name === hiddenCKEditorID) {
-          // First collect all CKEditor allowedContent rules.
           var CKEFeatureRulesMap = {};
           var rules = e.editor.filter.allowedContent;
           var rule;
@@ -179,9 +118,6 @@
             CKEFeatureRulesMap[name].push(rule);
           }
 
-          // Now convert these to Drupal.EditorFeature objects. And track which
-          // buttons are mapped to which features.
-          // @see getFeatureForButton()
           var features = {};
           var buttonsToFeatures = {};
           for (var featureName in CKEFeatureRulesMap) {
@@ -201,28 +137,13 @@
       });
     },
 
-    /**
-     * Retrieves the feature for a given button from featuresMetadata. Returns
-     * false if the given button is in fact a divider.
-     *
-     * @param {string} button
-     *   The name of a CKEditor button.
-     *
-     * @return {object}
-     *   The feature metadata object for a button.
-     */
-    getFeatureForButton: function (button) {
-      // Return false if the button being added is a divider.
+    getFeatureForButton: function getFeatureForButton(button) {
       if (button === '-') {
         return false;
       }
 
-      // Get a Drupal.editorFeature object that contains all metadata for
-      // the feature that was just added or removed. Not every feature has
-      // such metadata.
       var featureName = this.model.get('buttonsToFeatures')[button.toLowerCase()];
-      // Features without an associated command do not have a 'feature name' by
-      // default, so we use the lowercased button name instead.
+
       if (!featureName) {
         featureName = button.toLowerCase();
       }
@@ -234,150 +155,92 @@
       return featuresMetadata[featureName];
     },
 
-    /**
-     * Checks buttons against filter settings; disables disallowed buttons.
-     *
-     * @param {object} features
-     *   A map of {@link Drupal.EditorFeature} objects.
-     * @param {object} buttonsToFeatures
-     *   Object containing the button-to-feature mapping.
-     *
-     * @see Drupal.ckeditor.ControllerView#getFeatureForButton
-     */
-    disableFeaturesDisallowedByFilters: function (features, buttonsToFeatures) {
+    disableFeaturesDisallowedByFilters: function disableFeaturesDisallowedByFilters(features, buttonsToFeatures) {
       this.model.set('featuresMetadata', features);
-      // Store the button-to-feature mapping. Needs to happen only once, because
-      // the same buttons continue to have the same features; only the rules for
-      // specific features may change.
-      // @see getFeatureForButton()
+
       this.model.set('buttonsToFeatures', buttonsToFeatures);
 
-      // Ensure that toolbar configuration changes are broadcast.
       this.broadcastConfigurationChanges(this.$el);
 
-      // Initialization: not all of the default toolbar buttons may be allowed
-      // by the current filter settings. Remove any of the default toolbar
-      // buttons that require more permissive filter settings. The remaining
-      // default toolbar buttons are marked as "added".
       var existingButtons = [];
-      // Loop through each button group after flattening the groups from the
-      // toolbar row arrays.
+
       var buttonGroups = _.flatten(this.model.get('activeEditorConfig'));
       for (var i = 0; i < buttonGroups.length; i++) {
-        // Pull the button names from each toolbar button group.
         var buttons = buttonGroups[i].items;
         for (var k = 0; k < buttons.length; k++) {
           existingButtons.push(buttons[k]);
         }
       }
-      // Remove duplicate buttons.
+
       existingButtons = _.unique(existingButtons);
-      // Prepare the active toolbar and available-button toolbars.
+
       for (var n = 0; n < existingButtons.length; n++) {
         var button = existingButtons[n];
         var feature = this.getFeatureForButton(button);
-        // Skip dividers.
+
         if (feature === false) {
           continue;
         }
 
         if (Drupal.editorConfiguration.featureIsAllowedByFilters(feature)) {
-          // Existing toolbar buttons are in fact "added features".
           this.$el.find('.ckeditor-toolbar-active').trigger('CKEditorToolbarChanged', ['added', existingButtons[n]]);
-        }
-        else {
-          // Move the button element from the active the active toolbar to the
-          // list of available buttons.
-          $('.ckeditor-toolbar-active li[data-drupal-ckeditor-button-name="' + button + '"]')
-            .detach()
-            .appendTo('.ckeditor-toolbar-disabled > .ckeditor-toolbar-available > ul');
-          // Update the toolbar value field.
-          this.model.set({isDirty: true}, {broadcast: false});
+        } else {
+          $('.ckeditor-toolbar-active li[data-drupal-ckeditor-button-name="' + button + '"]').detach().appendTo('.ckeditor-toolbar-disabled > .ckeditor-toolbar-available > ul');
+
+          this.model.set({ isDirty: true }, { broadcast: false });
         }
       }
     },
 
-    /**
-     * Sets up broadcasting of CKEditor toolbar configuration changes.
-     *
-     * @param {jQuery} $ckeditorToolbar
-     *   The active toolbar DOM element wrapped in jQuery.
-     */
-    broadcastConfigurationChanges: function ($ckeditorToolbar) {
+    broadcastConfigurationChanges: function broadcastConfigurationChanges($ckeditorToolbar) {
       var view = this;
       var hiddenEditorConfig = this.model.get('hiddenEditorConfig');
       var getFeatureForButton = this.getFeatureForButton.bind(this);
       var getCKEditorFeatures = this.getCKEditorFeatures.bind(this);
-      $ckeditorToolbar
-        .find('.ckeditor-toolbar-active')
-        // Listen for CKEditor toolbar configuration changes. When a button is
-        // added/removed, call an appropriate Drupal.editorConfiguration method.
-        .on('CKEditorToolbarChanged.ckeditorAdmin', function (event, action, button) {
-          var feature = getFeatureForButton(button);
-
-          // Early-return if the button being added is a divider.
-          if (feature === false) {
-            return;
-          }
+      $ckeditorToolbar.find('.ckeditor-toolbar-active').on('CKEditorToolbarChanged.ckeditorAdmin', function (event, action, button) {
+        var feature = getFeatureForButton(button);
 
-          // Trigger a standardized text editor configuration event to indicate
-          // whether a feature was added or removed, so that filters can react.
-          var configEvent = (action === 'added') ? 'addedFeature' : 'removedFeature';
-          Drupal.editorConfiguration[configEvent](feature);
-        })
-        // Listen for CKEditor plugin settings changes. When a plugin setting is
-        // changed, rebuild the CKEditor features metadata.
-        .on('CKEditorPluginSettingsChanged.ckeditorAdmin', function (event, settingsChanges) {
-          // Update hidden CKEditor configuration.
-          for (var key in settingsChanges) {
-            if (settingsChanges.hasOwnProperty(key)) {
-              hiddenEditorConfig[key] = settingsChanges[key];
-            }
+        if (feature === false) {
+          return;
+        }
+
+        var configEvent = action === 'added' ? 'addedFeature' : 'removedFeature';
+        Drupal.editorConfiguration[configEvent](feature);
+      }).on('CKEditorPluginSettingsChanged.ckeditorAdmin', function (event, settingsChanges) {
+        for (var key in settingsChanges) {
+          if (settingsChanges.hasOwnProperty(key)) {
+            hiddenEditorConfig[key] = settingsChanges[key];
           }
+        }
 
-          // Retrieve features for the updated hidden CKEditor configuration.
-          getCKEditorFeatures(hiddenEditorConfig, function (features) {
-            // Trigger a standardized text editor configuration event for each
-            // feature that was modified by the configuration changes.
-            var featuresMetadata = view.model.get('featuresMetadata');
-            for (var name in features) {
-              if (features.hasOwnProperty(name)) {
-                var feature = features[name];
-                if (featuresMetadata.hasOwnProperty(name) && !_.isEqual(featuresMetadata[name], feature)) {
-                  Drupal.editorConfiguration.modifiedFeature(feature);
-                }
+        getCKEditorFeatures(hiddenEditorConfig, function (features) {
+          var featuresMetadata = view.model.get('featuresMetadata');
+          for (var name in features) {
+            if (features.hasOwnProperty(name)) {
+              var feature = features[name];
+              if (featuresMetadata.hasOwnProperty(name) && !_.isEqual(featuresMetadata[name], feature)) {
+                Drupal.editorConfiguration.modifiedFeature(feature);
               }
             }
-            // Update the CKEditor features metadata.
-            view.model.set('featuresMetadata', features);
-          });
+          }
+
+          view.model.set('featuresMetadata', features);
         });
+      });
     },
 
-    /**
-     * Returns the list of buttons from an editor configuration.
-     *
-     * @param {object} config
-     *   A CKEditor configuration object.
-     *
-     * @return {Array}
-     *   A list of buttons in the CKEditor configuration.
-     */
-    getButtonList: function (config) {
+    getButtonList: function getButtonList(config) {
       var buttons = [];
-      // Remove the rows.
+
       config = _.flatten(config);
 
-      // Loop through the button groups and pull out the buttons.
       config.forEach(function (group) {
         group.items.forEach(function (button) {
           buttons.push(button);
         });
       });
 
-      // Remove the dividing elements if any.
       return _.without(buttons, '-');
     }
   });
-
-})(jQuery, Drupal, Backbone, CKEDITOR, _);
+})(jQuery, Drupal, Backbone, CKEDITOR, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/KeyboardView.js b/core/modules/ckeditor/js/views/KeyboardView.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/views/KeyboardView.js
copy to core/modules/ckeditor/js/views/KeyboardView.es6.js
diff --git a/core/modules/ckeditor/js/views/KeyboardView.js b/core/modules/ckeditor/js/views/KeyboardView.js
index f44764e3aa..ceb2a19104 100644
--- a/core/modules/ckeditor/js/views/KeyboardView.js
+++ b/core/modules/ckeditor/js/views/KeyboardView.js
@@ -1,60 +1,29 @@
 /**
- * @file
- * Backbone View providing the aural view of CKEditor keyboard UX configuration.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/views/KeyboardView.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, Backbone, _) {
 
   'use strict';
 
-  Drupal.ckeditor.KeyboardView = Backbone.View.extend(/** @lends Drupal.ckeditor.KeyboardView# */{
-
-    /**
-     * Backbone View for CKEditor toolbar configuration; keyboard UX.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
-      // Add keyboard arrow support.
+  Drupal.ckeditor.KeyboardView = Backbone.View.extend({
+    initialize: function initialize() {
       this.$el.on('keydown.ckeditor', '.ckeditor-buttons a, .ckeditor-multiple-buttons a', this.onPressButton.bind(this));
       this.$el.on('keydown.ckeditor', '[data-drupal-ckeditor-type="group"]', this.onPressGroup.bind(this));
     },
 
-    /**
-     * @inheritdoc
-     */
-    render: function () {
-    },
+    render: function render() {},
 
-    /**
-     * Handles keypresses on a CKEditor configuration button.
-     *
-     * @param {jQuery.Event} event
-     *   The keypress event triggered.
-     */
-    onPressButton: function (event) {
-      var upDownKeys = [
-        38, // Up arrow.
-        63232, // Safari up arrow.
-        40, // Down arrow.
-        63233 // Safari down arrow.
-      ];
-      var leftRightKeys = [
-        37, // Left arrow.
-        63234, // Safari left arrow.
-        39, // Right arrow.
-        63235 // Safari right arrow.
-      ];
+    onPressButton: function onPressButton(event) {
+      var upDownKeys = [38, 63232, 40, 63233];
+      var leftRightKeys = [37, 63234, 39, 63235];
 
-      // Respond to an enter key press. Prevent the bubbling of the enter key
-      // press to the button group parent element.
       if (event.keyCode === 13) {
         event.stopPropagation();
       }
 
-      // Only take action when a direction key is pressed.
       if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
         var view = this;
         var $target = $(event.currentTarget);
@@ -65,114 +34,69 @@
         var containerType = $container.data('drupal-ckeditor-button-sorting');
         var $availableButtons = this.$el.find('[data-drupal-ckeditor-button-sorting="source"]');
         var $activeButtons = this.$el.find('.ckeditor-toolbar-active');
-        // The current location of the button, just in case it needs to be put
-        // back.
+
         var $originalGroup = $group;
         var dir;
 
-        // Move available buttons between their container and the active
-        // toolbar.
         if (containerType === 'source') {
-          // Move the button to the active toolbar configuration when the down
-          // or up keys are pressed.
           if (_.indexOf([40, 63233], event.keyCode) > -1) {
-            // Move the button to the first row, first button group index
-            // position.
             $activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
           }
-        }
-        else if (containerType === 'target') {
-          // Move buttons between sibling buttons in a group and between groups.
+        } else if (containerType === 'target') {
           if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
-            // Move left.
             var $siblings = $container.children();
             var index = $siblings.index($button);
             if (_.indexOf([37, 63234], event.keyCode) > -1) {
-              // Move between sibling buttons.
               if (index > 0) {
                 $button.insertBefore($container.children().eq(index - 1));
-              }
-              // Move between button groups and rows.
-              else {
-                // Move between button groups.
-                $group = $container.parent().prev();
-                if ($group.length > 0) {
-                  $group.find('.ckeditor-toolbar-group-buttons').append($button);
+              } else {
+                  $group = $container.parent().prev();
+                  if ($group.length > 0) {
+                    $group.find('.ckeditor-toolbar-group-buttons').append($button);
+                  } else {
+                      $container.closest('.ckeditor-row').prev().find('.ckeditor-toolbar-group').not('.placeholder').find('.ckeditor-toolbar-group-buttons').eq(-1).append($button);
+                    }
                 }
-                // Wrap between rows.
-                else {
-                  $container.closest('.ckeditor-row').prev().find('.ckeditor-toolbar-group').not('.placeholder').find('.ckeditor-toolbar-group-buttons').eq(-1).append($button);
-                }
-              }
-            }
-            // Move right.
-            else if (_.indexOf([39, 63235], event.keyCode) > -1) {
-              // Move between sibling buttons.
-              if (index < ($siblings.length - 1)) {
-                $button.insertAfter($container.children().eq(index + 1));
-              }
-              // Move between button groups. Moving right at the end of a row
-              // will create a new group.
-              else {
-                $container.parent().next().find('.ckeditor-toolbar-group-buttons').prepend($button);
+            } else if (_.indexOf([39, 63235], event.keyCode) > -1) {
+                if (index < $siblings.length - 1) {
+                  $button.insertAfter($container.children().eq(index + 1));
+                } else {
+                    $container.parent().next().find('.ckeditor-toolbar-group-buttons').prepend($button);
+                  }
               }
-            }
-          }
-          // Move buttons between rows and the available button set.
-          else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
-            dir = (_.indexOf([38, 63232], event.keyCode) > -1) ? 'prev' : 'next';
-            $row = $container.closest('.ckeditor-row')[dir]();
-            // Move the button back into the available button set.
-            if (dir === 'prev' && $row.length === 0) {
-              // If this is a divider, just destroy it.
-              if ($button.data('drupal-ckeditor-type') === 'separator') {
-                $button
-                  .off()
-                  .remove();
-                // Focus on the first button in the active toolbar.
-                $activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).children().eq(0).children().trigger('focus');
-              }
-              // Otherwise, move it.
-              else {
-                $availableButtons.prepend($button);
+          } else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
+              dir = _.indexOf([38, 63232], event.keyCode) > -1 ? 'prev' : 'next';
+              $row = $container.closest('.ckeditor-row')[dir]();
+
+              if (dir === 'prev' && $row.length === 0) {
+                if ($button.data('drupal-ckeditor-type') === 'separator') {
+                  $button.off().remove();
+
+                  $activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).children().eq(0).children().trigger('focus');
+                } else {
+                    $availableButtons.prepend($button);
+                  }
+              } else {
+                $row.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
               }
             }
-            else {
-              $row.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
+        } else if (containerType === 'dividers') {
+            if (_.indexOf([40, 63233], event.keyCode) > -1) {
+              $button = $button.clone(true);
+              $activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
+              $target = $button.children();
             }
           }
-        }
-        // Move dividers between their container and the active toolbar.
-        else if (containerType === 'dividers') {
-          // Move the button to the active toolbar configuration when the down
-          // or up keys are pressed.
-          if (_.indexOf([40, 63233], event.keyCode) > -1) {
-            // Move the button to the first row, first button group index
-            // position.
-            $button = $button.clone(true);
-            $activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
-            $target = $button.children();
-          }
-        }
 
         view = this;
-        // Attempt to move the button to the new toolbar position.
-        Drupal.ckeditor.registerButtonMove(this, $button, function (result) {
 
-          // Put the button back if the registration failed.
-          // If the button was in a row, then it was in the active toolbar
-          // configuration. The button was probably placed in a new group, but
-          // that action was canceled.
+        Drupal.ckeditor.registerButtonMove(this, $button, function (result) {
           if (!result && $originalGroup) {
             $originalGroup.find('.ckeditor-buttons').append($button);
-          }
-          // Otherwise refresh the sortables to acknowledge the new button
-          // positions.
-          else {
-            view.$el.find('.ui-sortable').sortable('refresh');
-          }
-          // Refocus the target button so that the user can continue from a
-          // known place.
+          } else {
+              view.$el.find('.ui-sortable').sortable('refresh');
+            }
+
           $target.trigger('focus');
         });
 
@@ -181,33 +105,13 @@
       }
     },
 
-    /**
-     * Handles keypresses on a CKEditor configuration group.
-     *
-     * @param {jQuery.Event} event
-     *   The keypress event triggered.
-     */
-    onPressGroup: function (event) {
-      var upDownKeys = [
-        38, // Up arrow.
-        63232, // Safari up arrow.
-        40, // Down arrow.
-        63233 // Safari down arrow.
-      ];
-      var leftRightKeys = [
-        37, // Left arrow.
-        63234, // Safari left arrow.
-        39, // Right arrow.
-        63235 // Safari right arrow.
-      ];
+    onPressGroup: function onPressGroup(event) {
+      var upDownKeys = [38, 63232, 40, 63233];
+      var leftRightKeys = [37, 63234, 39, 63235];
 
-      // Respond to an enter key press.
       if (event.keyCode === 13) {
         var view = this;
-        // Open the group renaming dialog in the next evaluation cycle so that
-        // this event can be cancelled and the bubbling wiped out. Otherwise,
-        // Firefox has issues because the page focus is shifted to the dialog
-        // along with the keydown event.
+
         window.setTimeout(function () {
           Drupal.ckeditor.openGroupNameDialog(view, $(event.currentTarget));
         }, 0);
@@ -215,46 +119,34 @@
         event.stopPropagation();
       }
 
-      // Respond to direction key presses.
       if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
         var $group = $(event.currentTarget);
         var $container = $group.parent();
         var $siblings = $container.children();
         var index;
         var dir;
-        // Move groups between sibling groups.
+
         if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
           index = $siblings.index($group);
-          // Move left between sibling groups.
-          if ((_.indexOf([37, 63234], event.keyCode) > -1)) {
+
+          if (_.indexOf([37, 63234], event.keyCode) > -1) {
             if (index > 0) {
               $group.insertBefore($siblings.eq(index - 1));
+            } else {
+                $group.insertBefore($container.closest('.ckeditor-row').prev().find('.ckeditor-toolbar-groups').children().eq(-1));
+              }
+          } else if (_.indexOf([39, 63235], event.keyCode) > -1) {
+              if (!$siblings.eq(index + 1).hasClass('placeholder')) {
+                $group.insertAfter($container.children().eq(index + 1));
+              } else {
+                  $container.closest('.ckeditor-row').next().find('.ckeditor-toolbar-groups').prepend($group);
+                }
             }
-            // Wrap between rows. Insert the group before the placeholder group
-            // at the end of the previous row.
-            else {
-              $group.insertBefore($container.closest('.ckeditor-row').prev().find('.ckeditor-toolbar-groups').children().eq(-1));
-            }
-          }
-          // Move right between sibling groups.
-          else if (_.indexOf([39, 63235], event.keyCode) > -1) {
-            // Move to the right if the next group is not a placeholder.
-            if (!$siblings.eq(index + 1).hasClass('placeholder')) {
-              $group.insertAfter($container.children().eq(index + 1));
-            }
-            // Wrap group between rows.
-            else {
-              $container.closest('.ckeditor-row').next().find('.ckeditor-toolbar-groups').prepend($group);
-            }
+        } else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
+            dir = _.indexOf([38, 63232], event.keyCode) > -1 ? 'prev' : 'next';
+            $group.closest('.ckeditor-row')[dir]().find('.ckeditor-toolbar-groups').eq(0).prepend($group);
           }
 
-        }
-        // Move groups between rows.
-        else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
-          dir = (_.indexOf([38, 63232], event.keyCode) > -1) ? 'prev' : 'next';
-          $group.closest('.ckeditor-row')[dir]().find('.ckeditor-toolbar-groups').eq(0).prepend($group);
-        }
-
         Drupal.ckeditor.registerGroupMove(this, $group);
         $group.trigger('focus');
         event.preventDefault();
@@ -262,5 +154,4 @@
       }
     }
   });
-
-})(jQuery, Drupal, Backbone, _);
+})(jQuery, Drupal, Backbone, _);
\ No newline at end of file
diff --git a/core/modules/ckeditor/js/views/VisualView.js b/core/modules/ckeditor/js/views/VisualView.es6.js
similarity index 100%
copy from core/modules/ckeditor/js/views/VisualView.js
copy to core/modules/ckeditor/js/views/VisualView.es6.js
diff --git a/core/modules/ckeditor/js/views/VisualView.js b/core/modules/ckeditor/js/views/VisualView.js
index 2d8042ebbf..47607f5767 100644
--- a/core/modules/ckeditor/js/views/VisualView.js
+++ b/core/modules/ckeditor/js/views/VisualView.js
@@ -1,14 +1,14 @@
 /**
- * @file
- * A Backbone View that provides the visual UX view of CKEditor toolbar
- *   configuration.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/js/views/VisualView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone, $) {
 
   'use strict';
 
-  Drupal.ckeditor.VisualView = Backbone.View.extend(/** @lends Drupal.ckeditor.VisualView# */{
+  Drupal.ckeditor.VisualView = Backbone.View.extend({
 
     events: {
       'click .ckeditor-toolbar-group-name': 'onGroupNameClick',
@@ -16,63 +16,31 @@
       'click .ckeditor-add-new-group button': 'onAddGroupButtonClick'
     },
 
-    /**
-     * Backbone View for CKEditor toolbar configuration; visual UX.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.listenTo(this.model, 'change:isDirty change:groupNamesVisible', this.render);
 
-      // Add a toggle for the button group names.
-      $(Drupal.theme('ckeditorButtonGroupNamesToggle'))
-        .prependTo(this.$el.find('#ckeditor-active-toolbar').parent());
+      $(Drupal.theme('ckeditorButtonGroupNamesToggle')).prependTo(this.$el.find('#ckeditor-active-toolbar').parent());
 
       this.render();
     },
 
-    /**
-     * Render function for rendering the toolbar configuration.
-     *
-     * @param {*} model
-     *   Model used for the view.
-     * @param {string} [value]
-     *   The value that was changed.
-     * @param {object} changedAttributes
-     *   The attributes that was changed.
-     *
-     * @return {Drupal.ckeditor.VisualView}
-     *   The {@link Drupal.ckeditor.VisualView} object.
-     */
-    render: function (model, value, changedAttributes) {
+    render: function render(model, value, changedAttributes) {
       this.insertPlaceholders();
       this.applySorting();
 
-      // Toggle button group names.
       var groupNamesVisible = this.model.get('groupNamesVisible');
-      // If a button was just placed in the active toolbar, ensure that the
-      // button group names are visible.
+
       if (changedAttributes && changedAttributes.changes && changedAttributes.changes.isDirty) {
-        this.model.set({groupNamesVisible: true}, {silent: true});
+        this.model.set({ groupNamesVisible: true }, { silent: true });
         groupNamesVisible = true;
       }
       this.$el.find('[data-toolbar="active"]').toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
-      this.$el.find('.ckeditor-groupnames-toggle')
-        .text((groupNamesVisible) ? Drupal.t('Hide group names') : Drupal.t('Show group names'))
-        .attr('aria-pressed', groupNamesVisible);
+      this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible);
 
       return this;
     },
 
-    /**
-     * Handles clicks to a button group name.
-     *
-     * @param {jQuery.Event} event
-     *   The click event on the button group.
-     */
-    onGroupNameClick: function (event) {
+    onGroupNameClick: function onGroupNameClick(event) {
       var $group = $(event.currentTarget).closest('.ckeditor-toolbar-group');
       Drupal.ckeditor.openGroupNameDialog(this, $group);
 
@@ -80,125 +48,63 @@
       event.preventDefault();
     },
 
-    /**
-     * Handles clicks on the button group names toggle button.
-     *
-     * @param {jQuery.Event} event
-     *   The click event on the toggle button.
-     */
-    onGroupNamesToggleClick: function (event) {
+    onGroupNamesToggleClick: function onGroupNamesToggleClick(event) {
       this.model.set('groupNamesVisible', !this.model.get('groupNamesVisible'));
       event.preventDefault();
     },
 
-    /**
-     * Prompts the user to provide a name for a new button group; inserts it.
-     *
-     * @param {jQuery.Event} event
-     *   The event of the button click.
-     */
-    onAddGroupButtonClick: function (event) {
-
-      /**
-       * Inserts a new button if the openGroupNameDialog function returns true.
-       *
-       * @param {bool} success
-       *   A flag that indicates if the user created a new group (true) or
-       *   canceled out of the dialog (false).
-       * @param {jQuery} $group
-       *   A jQuery DOM fragment that represents the new button group. It has
-       *   not been added to the DOM yet.
-       */
+    onAddGroupButtonClick: function onAddGroupButtonClick(event) {
       function insertNewGroup(success, $group) {
         if (success) {
           $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
-          // Focus on the new group.
+
           $group.trigger('focus');
         }
       }
 
-      // Pass in a DOM fragment of a placeholder group so that the new group
-      // name can be applied to it.
       Drupal.ckeditor.openGroupNameDialog(this, $(Drupal.theme('ckeditorToolbarGroup')), insertNewGroup);
 
       event.preventDefault();
     },
 
-    /**
-     * Handles jQuery Sortable stop sort of a button group.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered on the group drag.
-     * @param {object} ui
-     *   A jQuery.ui.sortable argument that contains information about the
-     *   elements involved in the sort action.
-     */
-    endGroupDrag: function (event, ui) {
+    endGroupDrag: function endGroupDrag(event, ui) {
       var view = this;
       Drupal.ckeditor.registerGroupMove(this, ui.item, function (success) {
         if (!success) {
-          // Cancel any sorting in the configuration area.
           view.$el.find('.ckeditor-toolbar-configuration').find('.ui-sortable').sortable('cancel');
         }
       });
     },
 
-    /**
-     * Handles jQuery Sortable start sort of a button.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered on the group drag.
-     * @param {object} ui
-     *   A jQuery.ui.sortable argument that contains information about the
-     *   elements involved in the sort action.
-     */
-    startButtonDrag: function (event, ui) {
+    startButtonDrag: function startButtonDrag(event, ui) {
       this.$el.find('a:focus').trigger('blur');
 
-      // Show the button group names as soon as the user starts dragging.
       this.model.set('groupNamesVisible', true);
     },
 
-    /**
-     * Handles jQuery Sortable stop sort of a button.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered on the button drag.
-     * @param {object} ui
-     *   A jQuery.ui.sortable argument that contains information about the
-     *   elements involved in the sort action.
-     */
-    endButtonDrag: function (event, ui) {
+    endButtonDrag: function endButtonDrag(event, ui) {
       var view = this;
       Drupal.ckeditor.registerButtonMove(this, ui.item, function (success) {
         if (!success) {
-          // Cancel any sorting in the configuration area.
           view.$el.find('.ui-sortable').sortable('cancel');
         }
-        // Refocus the target button so that the user can continue from a known
-        // place.
+
         ui.item.find('a').trigger('focus');
       });
     },
 
-    /**
-     * Invokes jQuery.sortable() on new buttons and groups in a CKEditor config.
-     */
-    applySorting: function () {
-      // Make the buttons sortable.
+    applySorting: function applySorting() {
       this.$el.find('.ckeditor-buttons').not('.ui-sortable').sortable({
-        // Change this to .ckeditor-toolbar-group-buttons.
         connectWith: '.ckeditor-buttons',
         placeholder: 'ckeditor-button-placeholder',
         forcePlaceholderSize: true,
         tolerance: 'pointer',
         cursor: 'move',
         start: this.startButtonDrag.bind(this),
-        // Sorting within a sortable.
+
         stop: this.endButtonDrag.bind(this)
       }).disableSelection();
 
-      // Add the drag and drop functionality to button groups.
       this.$el.find('.ckeditor-toolbar-groups').not('.ui-sortable').sortable({
         connectWith: '.ckeditor-toolbar-groups',
         cancel: '.ckeditor-add-new-group',
@@ -208,66 +114,46 @@
         stop: this.endGroupDrag.bind(this)
       });
 
-      // Add the drag and drop functionality to buttons.
       this.$el.find('.ckeditor-multiple-buttons li').draggable({
         connectToSortable: '.ckeditor-toolbar-active .ckeditor-buttons',
         helper: 'clone'
       });
     },
 
-    /**
-     * Wraps the invocation of methods to insert blank groups and rows.
-     */
-    insertPlaceholders: function () {
+    insertPlaceholders: function insertPlaceholders() {
       this.insertPlaceholderRow();
       this.insertNewGroupButtons();
     },
 
-    /**
-     * Inserts a blank row at the bottom of the CKEditor configuration.
-     */
-    insertPlaceholderRow: function () {
+    insertPlaceholderRow: function insertPlaceholderRow() {
       var $rows = this.$el.find('.ckeditor-row');
-      // Add a placeholder row. to the end of the list if one does not exist.
+
       if (!$rows.eq(-1).hasClass('placeholder')) {
-        this.$el
-          .find('.ckeditor-toolbar-active')
-          .children('.ckeditor-active-toolbar-configuration')
-          .append(Drupal.theme('ckeditorRow'));
+        this.$el.find('.ckeditor-toolbar-active').children('.ckeditor-active-toolbar-configuration').append(Drupal.theme('ckeditorRow'));
       }
-      // Update the $rows variable to include the new row.
+
       $rows = this.$el.find('.ckeditor-row');
-      // Remove blank rows except the last one.
+
       var len = $rows.length;
       $rows.filter(function (index, row) {
-        // Do not remove the last row.
         if (index + 1 === len) {
           return false;
         }
         return $(row).find('.ckeditor-toolbar-group').not('.placeholder').length === 0;
-      })
-        // Then get all rows that are placeholders and remove them.
-        .remove();
+      }).remove();
     },
 
-    /**
-     * Inserts a button in each row that will add a new CKEditor button group.
-     */
-    insertNewGroupButtons: function () {
-      // Insert an add group button to each row.
+    insertNewGroupButtons: function insertNewGroupButtons() {
       this.$el.find('.ckeditor-row').each(function () {
         var $row = $(this);
         var $groups = $row.find('.ckeditor-toolbar-group');
         var $button = $row.find('.ckeditor-add-new-group');
         if ($button.length === 0) {
           $row.children('.ckeditor-toolbar-groups').append(Drupal.theme('ckeditorNewButtonGroup'));
-        }
-        // If a placeholder group exists, make sure it's at the end of the row.
-        else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) {
-          $button.appendTo($row.children('.ckeditor-toolbar-groups'));
-        }
+        } else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) {
+            $button.appendTo($row.children('.ckeditor-toolbar-groups'));
+          }
       });
     }
   });
-
-})(Drupal, Backbone, jQuery);
+})(Drupal, Backbone, jQuery);
\ No newline at end of file
diff --git a/core/modules/ckeditor/tests/modules/js/ajax-css.js b/core/modules/ckeditor/tests/modules/js/ajax-css.es6.js
similarity index 100%
copy from core/modules/ckeditor/tests/modules/js/ajax-css.js
copy to core/modules/ckeditor/tests/modules/js/ajax-css.es6.js
diff --git a/core/modules/ckeditor/tests/modules/js/ajax-css.js b/core/modules/ckeditor/tests/modules/js/ajax-css.js
index 142b4eea0f..4402e44517 100644
--- a/core/modules/ckeditor/tests/modules/js/ajax-css.js
+++ b/core/modules/ckeditor/tests/modules/js/ajax-css.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Contains client-side code for testing CSS delivered to CKEditor via AJAX.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/ckeditor/tests/modules/js/ajax-css.es6.js
+* @preserve
+**/
 
 (function (Drupal, ckeditor, editorSettings, $) {
 
@@ -9,16 +10,10 @@
 
   Drupal.behaviors.ajaxCssForm = {
 
-    attach: function (context) {
-      // Initialize an inline CKEditor on the #edit-inline element if it
-      // isn't editable already.
-      $(context)
-        .find('#edit-inline')
-        .not('[contenteditable]')
-        .each(function () {
-          ckeditor.attachInlineEditor(this, editorSettings.formats.test_format);
-        });
+    attach: function attach(context) {
+      $(context).find('#edit-inline').not('[contenteditable]').each(function () {
+        ckeditor.attachInlineEditor(this, editorSettings.formats.test_format);
+      });
     }
   };
-
-})(Drupal, Drupal.editors.ckeditor, drupalSettings.editor, jQuery);
+})(Drupal, Drupal.editors.ckeditor, drupalSettings.editor, jQuery);
\ No newline at end of file
diff --git a/core/modules/color/color.js b/core/modules/color/color.es6.js
similarity index 100%
copy from core/modules/color/color.js
copy to core/modules/color/color.es6.js
diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 984f740126..d392aeae50 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -1,26 +1,19 @@
 /**
- * @file
- * Attaches the behaviors for the Color module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/color/color.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Displays farbtastic color selector and initialize color administration UI.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attach color selection behavior to relevant context.
-   */
   Drupal.behaviors.color = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var i;
       var j;
       var colors;
-      // This behavior attaches by ID, so is only valid once on a page.
+
       var form = $(context).find('#system-theme-settings .color-form').once('color');
       if (form.length === 0) {
         return;
@@ -30,11 +23,9 @@
       var locks = [];
       var focused = null;
 
-      // Add Farbtastic.
       $('<div class="color-placeholder"></div>').once('color').prependTo(form);
       var farb = $.farbtastic('.color-placeholder');
 
-      // Decode reference colors to HSL.
       var reference = settings.color.reference;
       for (i in reference) {
         if (reference.hasOwnProperty(i)) {
@@ -42,35 +33,28 @@
         }
       }
 
-      // Build a preview.
       var height = [];
       var width = [];
-      // Loop through all defined gradients.
+
       for (i in settings.gradients) {
         if (settings.gradients.hasOwnProperty(i)) {
-          // Add element to display the gradient.
           $('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>');
           var gradient = $('.color-preview #gradient-' + i);
-          // Add height of current gradient to the list (divided by 10).
+
           height.push(parseInt(gradient.css('height'), 10) / 10);
-          // Add width of current gradient to the list (divided by 10).
+
           width.push(parseInt(gradient.css('width'), 10) / 10);
-          // Add rows (or columns for horizontal gradients).
-          // Each gradient line should have a height (or width for horizontal
-          // gradients) of 10px (because we divided the height/width by 10
-          // above).
+
           for (j = 0; j < (settings.gradients[i].direction === 'vertical' ? height[i] : width[i]); ++j) {
             gradient.append('<div class="gradient-line"></div>');
           }
         }
       }
 
-      // Set up colorScheme selector.
       form.find('#edit-scheme').on('change', function () {
         var schemes = settings.color.schemes;
         var colorScheme = this.options[this.selectedIndex].value;
         if (colorScheme !== '' && schemes[colorScheme]) {
-          // Get colors of active scheme.
           colors = schemes[colorScheme];
           for (var fieldName in colors) {
             if (colors.hasOwnProperty(fieldName)) {
@@ -81,66 +65,35 @@
         }
       });
 
-      /**
-       * Renders the preview.
-       */
       function preview() {
         Drupal.color.callback(context, settings, form, farb, height, width);
       }
 
-      /**
-       * Shifts a given color, using a reference pair (ref in HSL).
-       *
-       * This algorithm ensures relative ordering on the saturation and
-       * luminance axes is preserved, and performs a simple hue shift.
-       *
-       * It is also symmetrical. If: shift_color(c, a, b) === d, then
-       * shift_color(d, b, a) === c.
-       *
-       * @function Drupal.color~shift_color
-       *
-       * @param {string} given
-       *   A hex color code to shift.
-       * @param {Array.<number>} ref1
-       *   First HSL color reference.
-       * @param {Array.<number>} ref2
-       *   Second HSL color reference.
-       *
-       * @return {string}
-       *   A hex color, shifted.
-       */
       function shift_color(given, ref1, ref2) {
         var d;
-        // Convert to HSL.
+
         given = farb.RGBToHSL(farb.unpack(given));
 
-        // Hue: apply delta.
         given[0] += ref2[0] - ref1[0];
 
-        // Saturation: interpolate.
         if (ref1[1] === 0 || ref2[1] === 0) {
           given[1] = ref2[1];
-        }
-        else {
+        } else {
           d = ref1[1] / ref2[1];
           if (d > 1) {
             given[1] /= d;
-          }
-          else {
+          } else {
             given[1] = 1 - (1 - given[1]) * d;
           }
         }
 
-        // Luminance: interpolate.
         if (ref1[2] === 0 || ref2[2] === 0) {
           given[2] = ref2[2];
-        }
-        else {
+        } else {
           d = ref1[2] / ref2[2];
           if (d > 1) {
             given[2] /= d;
-          }
-          else {
+          } else {
             given[2] = 1 - (1 - given[2]) * d;
           }
         }
@@ -148,42 +101,27 @@
         return farb.pack(farb.HSLToRGB(given));
       }
 
-      /**
-       * Callback for Farbtastic when a new color is chosen.
-       *
-       * @param {HTMLElement} input
-       *   The input element where the color is chosen.
-       * @param {string} color
-       *   The color that was chosen through the input.
-       * @param {bool} propagate
-       *   Whether or not to propagate the color to a locked pair value
-       * @param {bool} colorScheme
-       *   Flag to indicate if the user is using a color scheme when changing
-       *   the color.
-       */
       function callback(input, color, propagate, colorScheme) {
         var matched;
-        // Set background/foreground colors.
+
         $(input).css({
           backgroundColor: color,
           color: farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
         });
 
-        // Change input value.
         if ($(input).val() && $(input).val() !== color) {
           $(input).val(color);
 
-          // Update locked values.
           if (propagate) {
             i = input.i;
-            for (j = i + 1; ; ++j) {
+            for (j = i + 1;; ++j) {
               if (!locks[j - 1] || $(locks[j - 1]).is('.is-unlocked')) {
                 break;
               }
               matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
               callback(inputs[j], matched, false);
             }
-            for (j = i - 1; ; --j) {
+            for (j = i - 1;; --j) {
               if (!locks[j] || $(locks[j]).is('.is-unlocked')) {
                 break;
               }
@@ -191,107 +129,75 @@
               callback(inputs[j], matched, false);
             }
 
-            // Update preview.
             preview();
           }
 
-          // Reset colorScheme selector.
           if (!colorScheme) {
             resetScheme();
           }
         }
       }
 
-      /**
-       * Resets the color scheme selector.
-       */
       function resetScheme() {
         form.find('#edit-scheme').each(function () {
           this.selectedIndex = this.options.length - 1;
         });
       }
 
-      /**
-       * Focuses Farbtastic on a particular field.
-       *
-       * @param {jQuery.Event} e
-       *   The focus event on the field.
-       */
       function focus(e) {
         var input = e.target;
-        // Remove old bindings.
+
         if (focused) {
-          $(focused).off('keyup', farb.updateValue)
-            .off('keyup', preview).off('keyup', resetScheme)
-            .parent().removeClass('item-selected');
+          $(focused).off('keyup', farb.updateValue).off('keyup', preview).off('keyup', resetScheme).parent().removeClass('item-selected');
         }
 
-        // Add new bindings.
         focused = input;
-        farb.linkTo(function (color) { callback(input, color, true, false); });
+        farb.linkTo(function (color) {
+          callback(input, color, true, false);
+        });
         farb.setColor(input.value);
-        $(focused).on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme)
-          .parent().addClass('item-selected');
+        $(focused).on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme).parent().addClass('item-selected');
       }
 
-      // Initialize color fields.
-      form.find('.js-color-palette input.form-text')
-        .each(function () {
-          // Extract palette field name.
-          this.key = this.id.substring(13);
-
-          // Link to color picker temporarily to initialize.
-          farb.linkTo(function () {}).setColor('#000').linkTo(this);
-
-          // Add lock.
-          var i = inputs.length;
-          if (inputs.length) {
-            var toggleClick = true;
-            var lock = $('<button class="color-palette__lock">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
-              e.preventDefault();
-              if (toggleClick) {
-                $(this).addClass('is-unlocked').html(Drupal.t('Lock'));
-                $(hooks[i - 1]).attr('class',
-                  locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-up' : 'color-palette__hook'
-                );
-                $(hooks[i]).attr('class',
-                  locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-down' : 'color-palette__hook'
-                );
-              }
-              else {
-                $(this).removeClass('is-unlocked').html(Drupal.t('Unlock'));
-                $(hooks[i - 1]).attr('class',
-                  locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-down'
-                );
-                $(hooks[i]).attr('class',
-                  locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-up'
-                );
-              }
-              toggleClick = !toggleClick;
-            });
-            $(this).after(lock);
-            locks.push(lock);
-          }
+      form.find('.js-color-palette input.form-text').each(function () {
+        this.key = this.id.substring(13);
+
+        farb.linkTo(function () {}).setColor('#000').linkTo(this);
+
+        var i = inputs.length;
+        if (inputs.length) {
+          var toggleClick = true;
+          var lock = $('<button class="color-palette__lock">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
+            e.preventDefault();
+            if (toggleClick) {
+              $(this).addClass('is-unlocked').html(Drupal.t('Lock'));
+              $(hooks[i - 1]).attr('class', locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-up' : 'color-palette__hook');
+              $(hooks[i]).attr('class', locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-down' : 'color-palette__hook');
+            } else {
+              $(this).removeClass('is-unlocked').html(Drupal.t('Unlock'));
+              $(hooks[i - 1]).attr('class', locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-down');
+              $(hooks[i]).attr('class', locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-up');
+            }
+            toggleClick = !toggleClick;
+          });
+          $(this).after(lock);
+          locks.push(lock);
+        }
 
-          // Add hook.
-          var hook = $('<div class="color-palette__hook"></div>');
-          $(this).after(hook);
-          hooks.push(hook);
+        var hook = $('<div class="color-palette__hook"></div>');
+        $(this).after(hook);
+        hooks.push(hook);
 
-          $(this).parent().find('.color-palette__lock').trigger('click');
-          this.i = i;
-          inputs.push(this);
-        })
-        .on('focus', focus);
+        $(this).parent().find('.color-palette__lock').trigger('click');
+        this.i = i;
+        inputs.push(this);
+      }).on('focus', focus);
 
       form.find('.js-color-palette label');
 
-      // Focus first color.
       inputs[0].focus();
 
-      // Render preview.
       preview();
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.es6.js
similarity index 100%
copy from core/modules/color/preview.js
copy to core/modules/color/preview.es6.js
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index 38c62aef26..094f007bc3 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -1,42 +1,20 @@
 /**
- * @file
- * Attaches preview-related behavior for the Color module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/color/preview.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Namespace for color-related functionality for Drupal.
-   *
-   * @namespace
-   */
   Drupal.color = {
-
-    /**
-     * The callback for when the color preview has been attached.
-     *
-     * @param {Element} context
-     *   The context to initiate the color behaviour.
-     * @param {object} settings
-     *   Settings for the color functionality.
-     * @param {HTMLFormElement} form
-     *   The form to initiate the color behaviour on.
-     * @param {object} farb
-     *   The farbtastic object.
-     * @param {number} height
-     *   Height of gradient.
-     * @param {number} width
-     *   Width of gradient.
-     */
-    callback: function (context, settings, form, farb, height, width) {
+    callback: function callback(context, settings, form, farb, height, width) {
       var accum;
       var delta;
-      // Solid background.
+
       form.find('.color-preview').css('backgroundColor', form.find('.color-palette input[name="palette[base]"]').val());
 
-      // Text preview.
       form.find('#text').css('color', form.find('.color-palette input[name="palette[text]"]').val());
       form.find('#text a, #text h2').css('color', form.find('.color-palette input[name="palette[link]"]').val());
 
@@ -49,7 +27,6 @@
         element.style.backgroundColor = farb.pack(accum);
       }
 
-      // Set up gradients if there are some.
       var color_start;
       var color_end;
       for (var i in settings.gradients) {
@@ -64,11 +41,11 @@
               }
             }
             accum = color_start;
-            // Render gradient lines.
+
             form.find('#gradient-' + i + ' > div').each(gradientLineColor);
           }
         }
       }
     }
   };
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js b/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.es6.js
similarity index 100%
copy from core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
copy to core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.es6.js
diff --git a/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js b/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
index 232428164a..d57d594f55 100644
--- a/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
+++ b/core/modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.js
@@ -1,9 +1,11 @@
 /**
- * @file
- * Adds javascript functions for font resizing.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/color/tests/modules/color_test/themes/color_test_theme/js/color_test_theme-fontsize.es6.js
+* @preserve
+**/
+
 (function ($) {
   'use strict';
 
   $(document).ready(function () {});
-})(jQuery);
+})(jQuery);
\ No newline at end of file
diff --git a/core/modules/comment/comment-entity-form.js b/core/modules/comment/comment-entity-form.es6.js
similarity index 100%
copy from core/modules/comment/comment-entity-form.js
copy to core/modules/comment/comment-entity-form.es6.js
diff --git a/core/modules/comment/comment-entity-form.js b/core/modules/comment/comment-entity-form.js
index fd16d8bfb0..ea889c7595 100644
--- a/core/modules/comment/comment-entity-form.js
+++ b/core/modules/comment/comment-entity-form.js
@@ -1,23 +1,19 @@
 /**
- * @file
- * Attaches comment behaviors to the entity form.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/comment/comment-entity-form.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.commentFieldsetSummaries = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(function (context) {
         return Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text());
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/comment/js/comment-by-viewer.js b/core/modules/comment/js/comment-by-viewer.es6.js
similarity index 100%
copy from core/modules/comment/js/comment-by-viewer.js
copy to core/modules/comment/js/comment-by-viewer.es6.js
diff --git a/core/modules/comment/js/comment-by-viewer.js b/core/modules/comment/js/comment-by-viewer.js
index 22d4b54561..79f8f23d65 100644
--- a/core/modules/comment/js/comment-by-viewer.js
+++ b/core/modules/comment/js/comment-by-viewer.js
@@ -1,26 +1,19 @@
 /**
- * @file
- * Attaches behaviors for the Comment module's "by-viewer" class.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/comment/js/comment-by-viewer.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Add 'by-viewer' class to comments written by the current user.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.commentByViewer = {
-    attach: function (context) {
+    attach: function attach(context) {
       var currentUserID = parseInt(drupalSettings.user.uid, 10);
-      $('[data-comment-user-id]')
-        .filter(function () {
-          return parseInt(this.getAttribute('data-comment-user-id'), 10) === currentUserID;
-        })
-        .addClass('by-viewer');
+      $('[data-comment-user-id]').filter(function () {
+        return parseInt(this.getAttribute('data-comment-user-id'), 10) === currentUserID;
+      }).addClass('by-viewer');
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.es6.js
similarity index 100%
copy from core/modules/comment/js/comment-new-indicator.js
copy to core/modules/comment/js/comment-new-indicator.es6.js
diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.js
index d5f0a4f45c..243708b576 100644
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@@ -1,62 +1,38 @@
 /**
- * @file
- * Attaches behaviors for the Comment module's "new" indicator.
- *
- * May only be loaded for authenticated users, with the History module
- * installed.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/comment/js/comment-new-indicator.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, window) {
 
   'use strict';
 
-  /**
-   * Renders "new" comment indicators wherever necessary.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches "new" comment indicators behavior.
-   */
   Drupal.behaviors.commentNewIndicator = {
-    attach: function (context) {
-      // Collect all "new" comment indicator placeholders (and their
-      // corresponding node IDs) newer than 30 days ago that have not already
-      // been read after their last comment timestamp.
+    attach: function attach(context) {
       var nodeIDs = [];
-      var $placeholders = $(context)
-        .find('[data-comment-timestamp]')
-        .once('history')
-        .filter(function () {
-          var $placeholder = $(this);
-          var commentTimestamp = parseInt($placeholder.attr('data-comment-timestamp'), 10);
-          var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
-          if (Drupal.history.needsServerCheck(nodeID, commentTimestamp)) {
-            nodeIDs.push(nodeID);
-            return true;
-          }
-          else {
-            return false;
-          }
-        });
+      var $placeholders = $(context).find('[data-comment-timestamp]').once('history').filter(function () {
+        var $placeholder = $(this);
+        var commentTimestamp = parseInt($placeholder.attr('data-comment-timestamp'), 10);
+        var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
+        if (Drupal.history.needsServerCheck(nodeID, commentTimestamp)) {
+          nodeIDs.push(nodeID);
+          return true;
+        } else {
+          return false;
+        }
+      });
 
       if ($placeholders.length === 0) {
         return;
       }
 
-      // Fetch the node read timestamps from the server.
       Drupal.history.fetchTimestamps(nodeIDs, function () {
         processCommentNewIndicators($placeholders);
       });
     }
   };
 
-  /**
-   * Processes the markup for "new comment" indicators.
-   *
-   * @param {jQuery} $placeholders
-   *   The elements that should be processed.
-   */
   function processCommentNewIndicators($placeholders) {
     var isFirstNewComment = true;
     var newCommentString = Drupal.t('new');
@@ -70,21 +46,12 @@
       var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
 
       if (timestamp > lastViewTimestamp) {
-        // Turn the placeholder into an actual "new" indicator.
-        var $comment = $(placeholder)
-          .removeClass('hidden')
-          .text(newCommentString)
-          .closest('.js-comment')
-          // Add 'new' class to the comment, so it can be styled.
-          .addClass('new');
+        var $comment = $(placeholder).removeClass('hidden').text(newCommentString).closest('.js-comment').addClass('new');
 
-        // Insert "new" anchor just before the "comment-<cid>" anchor if
-        // this is the first new comment in the DOM.
         if (isFirstNewComment) {
           isFirstNewComment = false;
           $comment.prev().before('<a id="new" />');
-          // If the URL points to the first new comment, then scroll to that
-          // comment.
+
           if (window.location.hash === '#new') {
             window.scrollTo(0, $comment.offset().top - Drupal.displace.offsets.top);
           }
@@ -92,5 +59,4 @@
       }
     });
   }
-
-})(jQuery, Drupal, window);
+})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/modules/comment/js/node-new-comments-link.js b/core/modules/comment/js/node-new-comments-link.es6.js
similarity index 100%
copy from core/modules/comment/js/node-new-comments-link.js
copy to core/modules/comment/js/node-new-comments-link.es6.js
diff --git a/core/modules/comment/js/node-new-comments-link.js b/core/modules/comment/js/node-new-comments-link.js
index 291bcbd116..7c91cc9755 100644
--- a/core/modules/comment/js/node-new-comments-link.js
+++ b/core/modules/comment/js/node-new-comments-link.js
@@ -1,117 +1,54 @@
 /**
- * @file
- * Attaches behaviors for the Comment module's "X new comments" link.
- *
- * May only be loaded for authenticated users, with the History module
- * installed.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/comment/js/node-new-comments-link.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Render "X new comments" links wherever necessary.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches new comment links behavior.
-   */
   Drupal.behaviors.nodeNewCommentsLink = {
-    attach: function (context) {
-      // Collect all "X new comments" node link placeholders (and their
-      // corresponding node IDs) newer than 30 days ago that have not already
-      // been read after their last comment timestamp.
+    attach: function attach(context) {
       var nodeIDs = [];
-      var $placeholders = $(context)
-        .find('[data-history-node-last-comment-timestamp]')
-        .once('history')
-        .filter(function () {
-          var $placeholder = $(this);
-          var lastCommentTimestamp = parseInt($placeholder.attr('data-history-node-last-comment-timestamp'), 10);
-          var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
-          if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
-            nodeIDs.push(nodeID);
-            // Hide this placeholder link until it is certain we'll need it.
-            hide($placeholder);
-            return true;
-          }
-          else {
-            // Remove this placeholder link from the DOM because we won't need
-            // it.
-            remove($placeholder);
-            return false;
-          }
-        });
+      var $placeholders = $(context).find('[data-history-node-last-comment-timestamp]').once('history').filter(function () {
+        var $placeholder = $(this);
+        var lastCommentTimestamp = parseInt($placeholder.attr('data-history-node-last-comment-timestamp'), 10);
+        var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
+        if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
+          nodeIDs.push(nodeID);
+
+          hide($placeholder);
+          return true;
+        } else {
+          remove($placeholder);
+          return false;
+        }
+      });
 
       if ($placeholders.length === 0) {
         return;
       }
 
-      // Perform an AJAX request to retrieve node read timestamps.
       Drupal.history.fetchTimestamps(nodeIDs, function () {
         processNodeNewCommentLinks($placeholders);
       });
     }
   };
 
-  /**
-   * Hides a "new comment" element.
-   *
-   * @param {jQuery} $placeholder
-   *   The placeholder element of the new comment link.
-   *
-   * @return {jQuery}
-   *   The placeholder element passed in as a parameter.
-   */
   function hide($placeholder) {
-    return $placeholder
-      // Find the parent <li>.
-      .closest('.comment-new-comments')
-      // Find the preceding <li>, if any, and give it the 'last' class.
-      .prev().addClass('last')
-      // Go back to the parent <li> and hide it.
-      .end().hide();
+    return $placeholder.closest('.comment-new-comments').prev().addClass('last').end().hide();
   }
 
-  /**
-   * Removes a "new comment" element.
-   *
-   * @param {jQuery} $placeholder
-   *   The placeholder element of the new comment link.
-   */
   function remove($placeholder) {
     hide($placeholder).remove();
   }
 
-  /**
-   * Shows a "new comment" element.
-   *
-   * @param {jQuery} $placeholder
-   *   The placeholder element of the new comment link.
-   *
-   * @return {jQuery}
-   *   The placeholder element passed in as a parameter.
-   */
   function show($placeholder) {
-    return $placeholder
-      // Find the parent <li>.
-      .closest('.comment-new-comments')
-      // Find the preceding <li>, if any, and remove its 'last' class, if any.
-      .prev().removeClass('last')
-      // Go back to the parent <li> and show it.
-      .end().show();
+    return $placeholder.closest('.comment-new-comments').prev().removeClass('last').end().show();
   }
 
-  /**
-   * Processes new comment links and adds appropriate text in relevant cases.
-   *
-   * @param {jQuery} $placeholders
-   *   The placeholder elements of the current page.
-   */
   function processNodeNewCommentLinks($placeholders) {
-    // Figure out which placeholders need the "x new comments" links.
     var $placeholdersToUpdate = {};
     var fieldName = 'comment';
     var $placeholder;
@@ -122,39 +59,22 @@
       var nodeID = $placeholder.closest('[data-history-node-id]').attr('data-history-node-id');
       var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
 
-      // Queue this placeholder's "X new comments" link to be downloaded from
-      // the server.
       if (timestamp > lastViewTimestamp) {
         $placeholdersToUpdate[nodeID] = $placeholder;
-      }
-      // No "X new comments" link necessary; remove it from the DOM.
-      else {
-        remove($placeholder);
-      }
+      } else {
+          remove($placeholder);
+        }
     });
 
-    // Perform an AJAX request to retrieve node view timestamps.
     var nodeIDs = Object.keys($placeholdersToUpdate);
     if (nodeIDs.length === 0) {
       return;
     }
 
-    /**
-     * Renders the "X new comments" links.
-     *
-     * Either use the data embedded in the page or perform an AJAX request to
-     * retrieve the same data.
-     *
-     * @param {object} results
-     *   Data about new comment links indexed by nodeID.
-     */
     function render(results) {
       for (var nodeID in results) {
         if (results.hasOwnProperty(nodeID) && $placeholdersToUpdate.hasOwnProperty(nodeID)) {
-          $placeholdersToUpdate[nodeID]
-            .attr('href', results[nodeID].first_new_comment_link)
-            .text(Drupal.formatPlural(results[nodeID].new_comment_count, '1 new comment', '@count new comments'))
-            .removeClass('hidden');
+          $placeholdersToUpdate[nodeID].attr('href', results[nodeID].first_new_comment_link).text(Drupal.formatPlural(results[nodeID].new_comment_count, '1 new comment', '@count new comments')).removeClass('hidden');
           show($placeholdersToUpdate[nodeID]);
         }
       }
@@ -162,16 +82,14 @@
 
     if (drupalSettings.comment && drupalSettings.comment.newCommentsLinks) {
       render(drupalSettings.comment.newCommentsLinks.node[fieldName]);
-    }
-    else {
+    } else {
       $.ajax({
         url: Drupal.url('comments/render_new_comments_node_links'),
         type: 'POST',
-        data: {'node_ids[]': nodeIDs, 'field_name': fieldName},
+        data: { 'node_ids[]': nodeIDs, 'field_name': fieldName },
         dataType: 'json',
         success: render
       });
     }
   }
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/content_translation/content_translation.admin.js b/core/modules/content_translation/content_translation.admin.es6.js
similarity index 100%
copy from core/modules/content_translation/content_translation.admin.js
copy to core/modules/content_translation/content_translation.admin.es6.js
diff --git a/core/modules/content_translation/content_translation.admin.js b/core/modules/content_translation/content_translation.admin.js
index fcbf699f73..c2faf27361 100644
--- a/core/modules/content_translation/content_translation.admin.js
+++ b/core/modules/content_translation/content_translation.admin.js
@@ -1,22 +1,15 @@
 /**
- * @file
- * Content Translation admin behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/content_translation/content_translation.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Forces applicable options to be checked as translatable.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches content translation dependent options to the UI.
-   */
   Drupal.behaviors.contentTranslationDependentOptions = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       var options = drupalSettings.contentTranslationDependentOptions;
       var $fields;
@@ -28,9 +21,6 @@
         };
       }
 
-      // We're given a generic name to look for so we find all inputs containing
-      // that name and copy over the input values that require all columns to be
-      // translatable.
       if (options && options.dependent_selectors) {
         for (var field in options.dependent_selectors) {
           if (options.dependent_selectors.hasOwnProperty(field)) {
@@ -43,7 +33,7 @@
         }
       }
     },
-    check: function ($fields, dependent_columns, $changed) {
+    check: function check($fields, dependent_columns, $changed) {
       var $element = $changed;
       var column;
 
@@ -51,8 +41,6 @@
         return $(field).val() === column;
       }
 
-      // A field that has many different translatable parts can also define one
-      // or more columns that require all columns to be translatable.
       for (var index in dependent_columns) {
         if (dependent_columns.hasOwnProperty(index)) {
           column = dependent_columns[index];
@@ -62,44 +50,27 @@
           }
 
           if ($element.is('input[value="' + column + '"]:checked')) {
-            $fields.prop('checked', true)
-              .not($element).prop('disabled', true);
-          }
-          else {
+            $fields.prop('checked', true).not($element).prop('disabled', true);
+          } else {
             $fields.prop('disabled', false);
           }
-
         }
       }
     }
   };
 
-  /**
-   * Makes field translatability inherit bundle translatability.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches content translation behavior.
-   */
   Drupal.behaviors.contentTranslation = {
-    attach: function (context) {
-      // Initially hide all field rows for non translatable bundles and all
-      // column rows for non translatable fields.
+    attach: function attach(context) {
       $(context).find('table .bundle-settings .translatable :input').once('translation-entity-admin-hide').each(function () {
         var $input = $(this);
         var $bundleSettings = $input.closest('.bundle-settings');
         if (!$input.is(':checked')) {
           $bundleSettings.nextUntil('.bundle-settings').hide();
-        }
-        else {
+        } else {
           $bundleSettings.nextUntil('.bundle-settings', '.field-settings').find('.translatable :input:not(:checked)').closest('.field-settings').nextUntil(':not(.column-settings)').hide();
         }
       });
 
-      // When a bundle is made translatable all of its fields should inherit
-      // this setting. Instead when it is made non translatable its fields are
-      // hidden, since their translatability no longer matters.
       $('body').once('translation-entity-admin-bind').on('click', 'table .bundle-settings .translatable :input', function (e) {
         var $target = $(e.target);
         var $bundleSettings = $target.closest('.bundle-settings');
@@ -109,23 +80,19 @@
           $bundleSettings.find('.operations :input[name$="[language_alterable]"]').prop('checked', true);
           $fieldSettings.find('.translatable :input').prop('checked', true);
           $settings.show();
-        }
-        else {
+        } else {
           $settings.hide();
         }
-      })
-        .on('click', 'table .field-settings .translatable :input', function (e) {
-          var $target = $(e.target);
-          var $fieldSettings = $target.closest('.field-settings');
-          var $columnSettings = $fieldSettings.nextUntil('.field-settings, .bundle-settings');
-          if ($target.is(':checked')) {
-            $columnSettings.show();
-          }
-          else {
-            $columnSettings.hide();
-          }
-        });
+      }).on('click', 'table .field-settings .translatable :input', function (e) {
+        var $target = $(e.target);
+        var $fieldSettings = $target.closest('.field-settings');
+        var $columnSettings = $fieldSettings.nextUntil('.field-settings, .bundle-settings');
+        if ($target.is(':checked')) {
+          $columnSettings.show();
+        } else {
+          $columnSettings.hide();
+        }
+      });
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/contextual/js/contextual.js b/core/modules/contextual/js/contextual.es6.js
similarity index 100%
copy from core/modules/contextual/js/contextual.js
copy to core/modules/contextual/js/contextual.es6.js
diff --git a/core/modules/contextual/js/contextual.js b/core/modules/contextual/js/contextual.js
index 558ea105cc..0df137e45c 100644
--- a/core/modules/contextual/js/contextual.js
+++ b/core/modules/contextual/js/contextual.js
@@ -1,24 +1,20 @@
 /**
- * @file
- * Attaches behaviors for the Contextual module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/contextual.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, _, Backbone, JSON, storage) {
 
   'use strict';
 
-  var options = $.extend(drupalSettings.contextual,
-    // Merge strings on top of drupalSettings so that they are not mutable.
-    {
-      strings: {
-        open: Drupal.t('Open'),
-        close: Drupal.t('Close')
-      }
+  var options = $.extend(drupalSettings.contextual, {
+    strings: {
+      open: Drupal.t('Open'),
+      close: Drupal.t('Close')
     }
-  );
+  });
 
-  // Clear the cached contextual links whenever the current user's set of
-  // permissions changes.
   var cachedPermissionsHash = storage.getItem('Drupal.contextual.permissionsHash');
   var permissionsHash = drupalSettings.user.permissionsHash;
   if (cachedPermissionsHash !== permissionsHash) {
@@ -32,143 +28,81 @@
     storage.setItem('Drupal.contextual.permissionsHash', permissionsHash);
   }
 
-  /**
-   * Initializes a contextual link: updates its DOM, sets up model and views.
-   *
-   * @param {jQuery} $contextual
-   *   A contextual links placeholder DOM element, containing the actual
-   *   contextual links as rendered by the server.
-   * @param {string} html
-   *   The server-side rendered HTML for this contextual link.
-   */
   function initContextual($contextual, html) {
     var $region = $contextual.closest('.contextual-region');
     var contextual = Drupal.contextual;
 
-    $contextual
-      // Update the placeholder to contain its rendered contextual links.
-      .html(html)
-      // Use the placeholder as a wrapper with a specific class to provide
-      // positioning and behavior attachment context.
-      .addClass('contextual')
-      // Ensure a trigger element exists before the actual contextual links.
-      .prepend(Drupal.theme('contextualTrigger'));
+    $contextual.html(html).addClass('contextual').prepend(Drupal.theme('contextualTrigger'));
 
-    // Set the destination parameter on each of the contextual links.
     var destination = 'destination=' + Drupal.encodePath(drupalSettings.path.currentPath);
     $contextual.find('.contextual-links a').each(function () {
       var url = this.getAttribute('href');
-      var glue = (url.indexOf('?') === -1) ? '?' : '&';
+      var glue = url.indexOf('?') === -1 ? '?' : '&';
       this.setAttribute('href', url + glue + destination);
     });
 
-    // Create a model and the appropriate views.
     var model = new contextual.StateModel({
       title: $region.find('h2').eq(0).text().trim()
     });
-    var viewOptions = $.extend({el: $contextual, model: model}, options);
+    var viewOptions = $.extend({ el: $contextual, model: model }, options);
     contextual.views.push({
       visual: new contextual.VisualView(viewOptions),
       aural: new contextual.AuralView(viewOptions),
       keyboard: new contextual.KeyboardView(viewOptions)
     });
-    contextual.regionViews.push(new contextual.RegionView(
-      $.extend({el: $region, model: model}, options))
-    );
+    contextual.regionViews.push(new contextual.RegionView($.extend({ el: $region, model: model }, options)));
 
-    // Add the model to the collection. This must happen after the views have
-    // been associated with it, otherwise collection change event handlers can't
-    // trigger the model change event handler in its views.
     contextual.collection.add(model);
 
-    // Let other JavaScript react to the adding of a new contextual link.
     $(document).trigger('drupalContextualLinkAdded', {
       $el: $contextual,
       $region: $region,
       model: model
     });
 
-    // Fix visual collisions between contextual link triggers.
     adjustIfNestedAndOverlapping($contextual);
   }
 
-  /**
-   * Determines if a contextual link is nested & overlapping, if so: adjusts it.
-   *
-   * This only deals with two levels of nesting; deeper levels are not touched.
-   *
-   * @param {jQuery} $contextual
-   *   A contextual links placeholder DOM element, containing the actual
-   *   contextual links as rendered by the server.
-   */
   function adjustIfNestedAndOverlapping($contextual) {
-    var $contextuals = $contextual
-      // @todo confirm that .closest() is not sufficient
-      .parents('.contextual-region').eq(-1)
-      .find('.contextual');
+    var $contextuals = $contextual.parents('.contextual-region').eq(-1).find('.contextual');
 
-    // Early-return when there's no nesting.
     if ($contextuals.length === 1) {
       return;
     }
 
-    // If the two contextual links overlap, then we move the second one.
     var firstTop = $contextuals.eq(0).offset().top;
     var secondTop = $contextuals.eq(1).offset().top;
     if (firstTop === secondTop) {
       var $nestedContextual = $contextuals.eq(1);
 
-      // Retrieve height of nested contextual link.
       var height = 0;
       var $trigger = $nestedContextual.find('.trigger');
-      // Elements with the .visually-hidden class have no dimensions, so this
-      // class must be temporarily removed to the calculate the height.
+
       $trigger.removeClass('visually-hidden');
       height = $nestedContextual.height();
       $trigger.addClass('visually-hidden');
 
-      // Adjust nested contextual link's position.
-      $nestedContextual.css({top: $nestedContextual.position().top + height});
+      $nestedContextual.css({ top: $nestedContextual.position().top + height });
     }
   }
 
-  /**
-   * Attaches outline behavior for regions associated with contextual links.
-   *
-   * Events
-   *   Contextual triggers an event that can be used by other scripts.
-   *   - drupalContextualLinkAdded: Triggered when a contextual link is added.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *  Attaches the outline behavior to the right context.
-   */
   Drupal.behaviors.contextual = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
 
-      // Find all contextual links placeholders, if any.
       var $placeholders = $context.find('[data-contextual-id]').once('contextual-render');
       if ($placeholders.length === 0) {
         return;
       }
 
-      // Collect the IDs for all contextual links placeholders.
       var ids = [];
       $placeholders.each(function () {
         ids.push($(this).attr('data-contextual-id'));
       });
 
-      // Update all contextual links placeholders whose HTML is cached.
       var uncachedIDs = _.filter(ids, function initIfCached(contextualID) {
         var html = storage.getItem('Drupal.contextual.' + contextualID);
         if (html && html.length) {
-          // Initialize after the current execution cycle, to make the AJAX
-          // request for retrieving the uncached contextual links as soon as
-          // possible, but also to ensure that other Drupal behaviors have had
-          // the chance to set up an event listener on the Backbone collection
-          // Drupal.contextual.collection.
           window.setTimeout(function () {
             initContextual($context.find('[data-contextual-id="' + contextualID + '"]'), html);
           });
@@ -177,30 +111,19 @@
         return true;
       });
 
-      // Perform an AJAX request to let the server render the contextual links
-      // for each of the placeholders.
       if (uncachedIDs.length > 0) {
         $.ajax({
           url: Drupal.url('contextual/render'),
           type: 'POST',
-          data: {'ids[]': uncachedIDs},
+          data: { 'ids[]': uncachedIDs },
           dataType: 'json',
-          success: function (results) {
+          success: function success(results) {
             _.each(results, function (html, contextualID) {
-              // Store the metadata.
               storage.setItem('Drupal.contextual.' + contextualID, html);
-              // If the rendered contextual links are empty, then the current
-              // user does not have permission to access the associated links:
-              // don't render anything.
+
               if (html.length > 0) {
-                // Update the placeholders to contain its rendered contextual
-                // links. Usually there will only be one placeholder, but it's
-                // possible for multiple identical placeholders exist on the
-                // page (probably because the same content appears more than
-                // once).
                 $placeholders = $context.find('[data-contextual-id="' + contextualID + '"]');
 
-                // Initialize the contextual links.
                 for (var i = 0; i < $placeholders.length; i++) {
                   initContextual($placeholders.eq(i), html);
                 }
@@ -212,45 +135,15 @@
     }
   };
 
-  /**
-   * Namespace for contextual related functionality.
-   *
-   * @namespace
-   */
   Drupal.contextual = {
-
-    /**
-     * The {@link Drupal.contextual.View} instances associated with each list
-     * element of contextual links.
-     *
-     * @type {Array}
-     */
     views: [],
 
-    /**
-     * The {@link Drupal.contextual.RegionView} instances associated with each
-     * contextual region element.
-     *
-     * @type {Array}
-     */
     regionViews: []
   };
 
-  /**
-   * A Backbone.Collection of {@link Drupal.contextual.StateModel} instances.
-   *
-   * @type {Backbone.Collection}
-   */
-  Drupal.contextual.collection = new Backbone.Collection([], {model: Drupal.contextual.StateModel});
+  Drupal.contextual.collection = new Backbone.Collection([], { model: Drupal.contextual.StateModel });
 
-  /**
-   * A trigger is an interactive element often bound to a click handler.
-   *
-   * @return {string}
-   *   A string representing a DOM fragment.
-   */
   Drupal.theme.contextualTrigger = function () {
     return '<button class="trigger visually-hidden focusable" type="button"></button>';
   };
-
-})(jQuery, Drupal, drupalSettings, _, Backbone, window.JSON, window.sessionStorage);
+})(jQuery, Drupal, drupalSettings, _, Backbone, window.JSON, window.sessionStorage);
\ No newline at end of file
diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.es6.js
similarity index 100%
copy from core/modules/contextual/js/contextual.toolbar.js
copy to core/modules/contextual/js/contextual.toolbar.es6.js
diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.js
index b5a9053490..9228209727 100644
--- a/core/modules/contextual/js/contextual.toolbar.js
+++ b/core/modules/contextual/js/contextual.toolbar.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Attaches behaviors for the Contextual module's edit toolbar tab.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/contextual.toolbar.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, Backbone) {
 
@@ -13,12 +14,6 @@
     pressEsc: Drupal.t('Press the esc key to exit.')
   };
 
-  /**
-   * Initializes a contextual link: updates its DOM, sets up model and views.
-   *
-   * @param {HTMLElement} context
-   *   A contextual links DOM element as rendered by the server.
-   */
   function initContextualToolbar(context) {
     if (!Drupal.contextual || !Drupal.contextual.collection) {
       return;
@@ -26,9 +21,6 @@
 
     var contextualToolbar = Drupal.contextualToolbar;
     var model = contextualToolbar.model = new contextualToolbar.StateModel({
-      // Checks whether localStorage indicates we should start in edit mode
-      // rather than view mode.
-      // @see Drupal.contextualToolbar.VisualView.persist
       isViewing: localStorage.getItem('Drupal.contextualToolbar.isViewing') !== 'false'
     }, {
       contextualCollection: Drupal.contextual.collection
@@ -43,35 +35,15 @@
     new contextualToolbar.AuralView(viewOptions);
   }
 
-  /**
-   * Attaches contextual's edit toolbar tab behavior.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches contextual toolbar behavior on a contextualToolbar-init event.
-   */
   Drupal.behaviors.contextualToolbar = {
-    attach: function (context) {
+    attach: function attach(context) {
       if ($('body').once('contextualToolbar-init').length) {
         initContextualToolbar(context);
       }
     }
   };
 
-  /**
-   * Namespace for the contextual toolbar.
-   *
-   * @namespace
-   */
   Drupal.contextualToolbar = {
-
-    /**
-     * The {@link Drupal.contextualToolbar.StateModel} instance.
-     *
-     * @type {?Drupal.contextualToolbar.StateModel}
-     */
     model: null
   };
-
-})(jQuery, Drupal, Backbone);
+})(jQuery, Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/models/StateModel.js b/core/modules/contextual/js/models/StateModel.es6.js
similarity index 100%
copy from core/modules/contextual/js/models/StateModel.js
copy to core/modules/contextual/js/models/StateModel.es6.js
diff --git a/core/modules/contextual/js/models/StateModel.js b/core/modules/contextual/js/models/StateModel.js
index 465d717d56..efb425e22f 100644
--- a/core/modules/contextual/js/models/StateModel.js
+++ b/core/modules/contextual/js/models/StateModel.js
@@ -1,78 +1,27 @@
 /**
- * @file
- * A Backbone Model for the state of a contextual link's trigger, list & region.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/models/StateModel.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  /**
-   * Models the state of a contextual link's trigger, list & region.
-   *
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.contextual.StateModel = Backbone.Model.extend(/** @lends Drupal.contextual.StateModel# */{
-
-    /**
-     * @type {object}
-     *
-     * @prop {string} title
-     * @prop {bool} regionIsHovered
-     * @prop {bool} hasFocus
-     * @prop {bool} isOpen
-     * @prop {bool} isLocked
-     */
-    defaults: /** @lends Drupal.contextual.StateModel# */{
-
-      /**
-       * The title of the entity to which these contextual links apply.
-       *
-       * @type {string}
-       */
+  Drupal.contextual.StateModel = Backbone.Model.extend({
+    defaults: {
       title: '',
 
-      /**
-       * Represents if the contextual region is being hovered.
-       *
-       * @type {bool}
-       */
       regionIsHovered: false,
 
-      /**
-       * Represents if the contextual trigger or options have focus.
-       *
-       * @type {bool}
-       */
       hasFocus: false,
 
-      /**
-       * Represents if the contextual options for an entity are available to
-       * be selected (i.e. whether the list of options is visible).
-       *
-       * @type {bool}
-       */
       isOpen: false,
 
-      /**
-       * When the model is locked, the trigger remains active.
-       *
-       * @type {bool}
-       */
       isLocked: false
     },
 
-    /**
-     * Opens or closes the contextual link.
-     *
-     * If it is opened, then also give focus.
-     *
-     * @return {Drupal.contextual.StateModel}
-     *   The current contextual state model.
-     */
-    toggleOpen: function () {
+    toggleOpen: function toggleOpen() {
       var newIsOpen = !this.get('isOpen');
       this.set('isOpen', newIsOpen);
       if (newIsOpen) {
@@ -81,29 +30,12 @@
       return this;
     },
 
-    /**
-     * Closes this contextual link.
-     *
-     * Does not call blur() because we want to allow a contextual link to have
-     * focus, yet be closed for example when hovering.
-     *
-     * @return {Drupal.contextual.StateModel}
-     *   The current contextual state model.
-     */
-    close: function () {
+    close: function close() {
       this.set('isOpen', false);
       return this;
     },
 
-    /**
-     * Gives focus to this contextual link.
-     *
-     * Also closes + removes focus from every other contextual link.
-     *
-     * @return {Drupal.contextual.StateModel}
-     *   The current contextual state model.
-     */
-    focus: function () {
+    focus: function focus() {
       this.set('hasFocus', true);
       var cid = this.cid;
       this.collection.each(function (model) {
@@ -114,13 +46,7 @@
       return this;
     },
 
-    /**
-     * Removes focus from this contextual link, unless it is open.
-     *
-     * @return {Drupal.contextual.StateModel}
-     *   The current contextual state model.
-     */
-    blur: function () {
+    blur: function blur() {
       if (!this.get('isOpen')) {
         this.set('hasFocus', false);
       }
@@ -128,5 +54,4 @@
     }
 
   });
-
-})(Drupal, Backbone);
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/toolbar/models/StateModel.js b/core/modules/contextual/js/toolbar/models/StateModel.es6.js
similarity index 100%
copy from core/modules/contextual/js/toolbar/models/StateModel.js
copy to core/modules/contextual/js/toolbar/models/StateModel.es6.js
diff --git a/core/modules/contextual/js/toolbar/models/StateModel.js b/core/modules/contextual/js/toolbar/models/StateModel.js
index d9159e4e97..add7ceafc8 100644
--- a/core/modules/contextual/js/toolbar/models/StateModel.js
+++ b/core/modules/contextual/js/toolbar/models/StateModel.js
@@ -1,79 +1,30 @@
 /**
- * @file
- * A Backbone Model for the state of Contextual module's edit toolbar tab.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/toolbar/models/StateModel.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  Drupal.contextualToolbar.StateModel = Backbone.Model.extend(/** @lends Drupal.contextualToolbar.StateModel# */{
-
-    /**
-     * @type {object}
-     *
-     * @prop {bool} isViewing
-     * @prop {bool} isVisible
-     * @prop {number} contextualCount
-     * @prop {Drupal~TabbingContext} tabbingContext
-     */
-    defaults: /** @lends Drupal.contextualToolbar.StateModel# */{
-
-      /**
-       * Indicates whether the toggle is currently in "view" or "edit" mode.
-       *
-       * @type {bool}
-       */
+  Drupal.contextualToolbar.StateModel = Backbone.Model.extend({
+    defaults: {
       isViewing: true,
 
-      /**
-       * Indicates whether the toggle should be visible or hidden. Automatically
-       * calculated, depends on contextualCount.
-       *
-       * @type {bool}
-       */
       isVisible: false,
 
-      /**
-       * Tracks how many contextual links exist on the page.
-       *
-       * @type {number}
-       */
       contextualCount: 0,
 
-      /**
-       * A TabbingContext object as returned by {@link Drupal~TabbingManager}:
-       * the set of tabbable elements when edit mode is enabled.
-       *
-       * @type {?Drupal~TabbingContext}
-       */
       tabbingContext: null
     },
 
-    /**
-     * Models the state of the edit mode toggle.
-     *
-     * @constructs
-     *
-     * @augments Backbone.Model
-     *
-     * @param {object} attrs
-     *   Attributes for the backbone model.
-     * @param {object} options
-     *   An object with the following option:
-     * @param {Backbone.collection} options.contextualCollection
-     *   The collection of {@link Drupal.contextual.StateModel} models that
-     *   represent the contextual links on the page.
-     */
-    initialize: function (attrs, options) {
-      // Respond to new/removed contextual links.
+    initialize: function initialize(attrs, options) {
       this.listenTo(options.contextualCollection, 'reset remove add', this.countContextualLinks);
       this.listenTo(options.contextualCollection, 'add', this.lockNewContextualLinks);
 
-      // Automatically determine visibility.
       this.listenTo(this, 'change:contextualCount', this.updateVisibility);
 
-      // Whenever edit mode is toggled, lock all contextual links.
       this.listenTo(this, 'change:isViewing', function (model, isViewing) {
         options.contextualCollection.each(function (contextualModel) {
           contextualModel.set('isLocked', !isViewing);
@@ -81,39 +32,19 @@
       });
     },
 
-    /**
-     * Tracks the number of contextual link models in the collection.
-     *
-     * @param {Drupal.contextual.StateModel} contextualModel
-     *   The contextual links model that was added or removed.
-     * @param {Backbone.Collection} contextualCollection
-     *    The collection of contextual link models.
-     */
-    countContextualLinks: function (contextualModel, contextualCollection) {
+    countContextualLinks: function countContextualLinks(contextualModel, contextualCollection) {
       this.set('contextualCount', contextualCollection.length);
     },
 
-    /**
-     * Lock newly added contextual links if edit mode is enabled.
-     *
-     * @param {Drupal.contextual.StateModel} contextualModel
-     *   The contextual links model that was added.
-     * @param {Backbone.Collection} [contextualCollection]
-     *    The collection of contextual link models.
-     */
-    lockNewContextualLinks: function (contextualModel, contextualCollection) {
+    lockNewContextualLinks: function lockNewContextualLinks(contextualModel, contextualCollection) {
       if (!this.get('isViewing')) {
         contextualModel.set('isLocked', true);
       }
     },
 
-    /**
-     * Automatically updates visibility of the view/edit mode toggle.
-     */
-    updateVisibility: function () {
+    updateVisibility: function updateVisibility() {
       this.set('isVisible', this.get('contextualCount') > 0);
     }
 
   });
-
-})(Drupal, Backbone);
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/toolbar/views/AuralView.js b/core/modules/contextual/js/toolbar/views/AuralView.es6.js
similarity index 100%
copy from core/modules/contextual/js/toolbar/views/AuralView.js
copy to core/modules/contextual/js/toolbar/views/AuralView.es6.js
diff --git a/core/modules/contextual/js/toolbar/views/AuralView.js b/core/modules/contextual/js/toolbar/views/AuralView.js
index d684ffb9e6..ccc0ea1341 100644
--- a/core/modules/contextual/js/toolbar/views/AuralView.js
+++ b/core/modules/contextual/js/toolbar/views/AuralView.js
@@ -1,32 +1,17 @@
 /**
- * @file
- * A Backbone View that provides the aural view of the edit mode toggle.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/toolbar/views/AuralView.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, Backbone, _) {
 
   'use strict';
 
-  Drupal.contextualToolbar.AuralView = Backbone.View.extend(/** @lends Drupal.contextualToolbar.AuralView# */{
-
-    /**
-     * Tracks whether the tabbing constraint announcement has been read once.
-     *
-     * @type {bool}
-     */
+  Drupal.contextualToolbar.AuralView = Backbone.View.extend({
     announcedOnce: false,
 
-    /**
-     * Renders the aural view of the edit mode toggle (screen reader support).
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   Options for the view.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       this.options = options;
 
       this.listenTo(this.model, 'change', this.render);
@@ -35,30 +20,20 @@
       $(document).on('keyup', _.bind(this.onKeypress, this));
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.contextualToolbar.AuralView}
-     *   The current contextual toolbar aural view.
-     */
-    render: function () {
-      // Render the state.
+    render: function render() {
       this.$el.find('button').attr('aria-pressed', !this.model.get('isViewing'));
 
       return this;
     },
 
-    /**
-     * Limits tabbing to the contextual links and edit mode toolbar tab.
-     */
-    manageTabbing: function () {
+    manageTabbing: function manageTabbing() {
       var tabbingContext = this.model.get('tabbingContext');
-      // Always release an existing tabbing context.
+
       if (tabbingContext) {
         tabbingContext.release();
         Drupal.announce(this.options.strings.tabbingReleased);
       }
-      // Create a new tabbing context when edit mode is enabled.
+
       if (!this.model.get('isViewing')) {
         tabbingContext = Drupal.tabbingManager.constrain($('.contextual-toolbar-tab, .contextual'));
         this.model.set('tabbingContext', tabbingContext);
@@ -67,10 +42,7 @@
       }
     },
 
-    /**
-     * Announces the current tabbing constraint.
-     */
-    announceTabbingConstraint: function () {
+    announceTabbingConstraint: function announceTabbingConstraint() {
       var strings = this.options.strings;
       Drupal.announce(Drupal.formatString(strings.tabbingConstrained, {
         '@contextualsCount': Drupal.formatPlural(Drupal.contextual.collection.length, '@count contextual link', '@count contextual links')
@@ -78,27 +50,17 @@
       Drupal.announce(strings.pressEsc);
     },
 
-    /**
-     * Responds to esc and tab key press events.
-     *
-     * @param {jQuery.Event} event
-     *   The keypress event.
-     */
-    onKeypress: function (event) {
-      // The first tab key press is tracked so that an annoucement about tabbing
-      // constraints can be raised if edit mode is enabled when the page is
-      // loaded.
+    onKeypress: function onKeypress(event) {
       if (!this.announcedOnce && event.keyCode === 9 && !this.model.get('isViewing')) {
         this.announceTabbingConstraint();
-        // Set announce to true so that this conditional block won't run again.
+
         this.announcedOnce = true;
       }
-      // Respond to the ESC key. Exit out of edit mode.
+
       if (event.keyCode === 27) {
         this.model.set('isViewing', true);
       }
     }
 
   });
-
-})(jQuery, Drupal, Backbone, _);
+})(jQuery, Drupal, Backbone, _);
\ No newline at end of file
diff --git a/core/modules/contextual/js/toolbar/views/VisualView.js b/core/modules/contextual/js/toolbar/views/VisualView.es6.js
similarity index 100%
copy from core/modules/contextual/js/toolbar/views/VisualView.js
copy to core/modules/contextual/js/toolbar/views/VisualView.es6.js
diff --git a/core/modules/contextual/js/toolbar/views/VisualView.js b/core/modules/contextual/js/toolbar/views/VisualView.js
index d1d413502d..01017f8834 100644
--- a/core/modules/contextual/js/toolbar/views/VisualView.js
+++ b/core/modules/contextual/js/toolbar/views/VisualView.js
@@ -1,84 +1,48 @@
 /**
- * @file
- * A Backbone View that provides the visual view of the edit mode toggle.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/toolbar/views/VisualView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  Drupal.contextualToolbar.VisualView = Backbone.View.extend(/** @lends Drupal.contextualToolbar.VisualView# */{
-
-    /**
-     * Events for the Backbone view.
-     *
-     * @return {object}
-     *   A mapping of events to be used in the view.
-     */
-    events: function () {
-      // Prevents delay and simulated mouse events.
-      var touchEndToClick = function (event) {
+  Drupal.contextualToolbar.VisualView = Backbone.View.extend({
+    events: function events() {
+      var touchEndToClick = function touchEndToClick(event) {
         event.preventDefault();
         event.target.click();
       };
 
       return {
-        click: function () {
+        click: function click() {
           this.model.set('isViewing', !this.model.get('isViewing'));
         },
         touchend: touchEndToClick
       };
     },
 
-    /**
-     * Renders the visual view of the edit mode toggle.
-     *
-     * Listens to mouse & touch and handles edit mode toggle interactions.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.listenTo(this.model, 'change', this.render);
       this.listenTo(this.model, 'change:isViewing', this.persist);
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.contextualToolbar.VisualView}
-     *   The current contextual toolbar visual view.
-     */
-    render: function () {
-      // Render the visibility.
+    render: function render() {
       this.$el.toggleClass('hidden', !this.model.get('isVisible'));
-      // Render the state.
+
       this.$el.find('button').toggleClass('is-active', !this.model.get('isViewing'));
 
       return this;
     },
 
-    /**
-     * Model change handler; persists the isViewing value to localStorage.
-     *
-     * `isViewing === true` is the default, so only stores in localStorage when
-     * it's not the default value (i.e. false).
-     *
-     * @param {Drupal.contextualToolbar.StateModel} model
-     *   A {@link Drupal.contextualToolbar.StateModel} model.
-     * @param {bool} isViewing
-     *   The value of the isViewing attribute in the model.
-     */
-    persist: function (model, isViewing) {
+    persist: function persist(model, isViewing) {
       if (!isViewing) {
         localStorage.setItem('Drupal.contextualToolbar.isViewing', 'false');
-      }
-      else {
+      } else {
         localStorage.removeItem('Drupal.contextualToolbar.isViewing');
       }
     }
 
   });
-
-})(Drupal, Backbone);
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/AuralView.js b/core/modules/contextual/js/views/AuralView.es6.js
similarity index 100%
copy from core/modules/contextual/js/views/AuralView.js
copy to core/modules/contextual/js/views/AuralView.es6.js
diff --git a/core/modules/contextual/js/views/AuralView.js b/core/modules/contextual/js/views/AuralView.js
index 8ba2e33e34..0856f24719 100644
--- a/core/modules/contextual/js/views/AuralView.js
+++ b/core/modules/contextual/js/views/AuralView.js
@@ -1,55 +1,34 @@
 /**
- * @file
- * A Backbone View that provides the aural view of a contextual link.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/views/AuralView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  Drupal.contextual.AuralView = Backbone.View.extend(/** @lends Drupal.contextual.AuralView# */{
-
-    /**
-     * Renders the aural view of a contextual link (i.e. screen reader support).
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   Options for the view.
-     */
-    initialize: function (options) {
+  Drupal.contextual.AuralView = Backbone.View.extend({
+    initialize: function initialize(options) {
       this.options = options;
 
       this.listenTo(this.model, 'change', this.render);
 
-      // Use aria-role form so that the number of items in the list is spoken.
       this.$el.attr('role', 'form');
 
-      // Initial render.
       this.render();
     },
 
-    /**
-     * @inheritdoc
-     */
-    render: function () {
+    render: function render() {
       var isOpen = this.model.get('isOpen');
 
-      // Set the hidden property of the links.
-      this.$el.find('.contextual-links')
-        .prop('hidden', !isOpen);
-
-      // Update the view of the trigger.
-      this.$el.find('.trigger')
-        .text(Drupal.t('@action @title configuration options', {
-          '@action': (!isOpen) ? this.options.strings.open : this.options.strings.close,
-          '@title': this.model.get('title')
-        }))
-        .attr('aria-pressed', isOpen);
+      this.$el.find('.contextual-links').prop('hidden', !isOpen);
+
+      this.$el.find('.trigger').text(Drupal.t('@action @title configuration options', {
+        '@action': !isOpen ? this.options.strings.open : this.options.strings.close,
+        '@title': this.model.get('title')
+      })).attr('aria-pressed', isOpen);
     }
 
   });
-
-})(Drupal, Backbone);
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/KeyboardView.js b/core/modules/contextual/js/views/KeyboardView.es6.js
similarity index 100%
copy from core/modules/contextual/js/views/KeyboardView.js
copy to core/modules/contextual/js/views/KeyboardView.es6.js
diff --git a/core/modules/contextual/js/views/KeyboardView.js b/core/modules/contextual/js/views/KeyboardView.js
index 9c247730e3..74c56823ca 100644
--- a/core/modules/contextual/js/views/KeyboardView.js
+++ b/core/modules/contextual/js/views/KeyboardView.js
@@ -1,24 +1,21 @@
 /**
- * @file
- * A Backbone View that provides keyboard interaction for a contextual link.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/views/KeyboardView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  Drupal.contextual.KeyboardView = Backbone.View.extend(/** @lends Drupal.contextual.KeyboardView# */{
-
-    /**
-     * @type {object}
-     */
+  Drupal.contextual.KeyboardView = Backbone.View.extend({
     events: {
       'focus .trigger': 'focus',
       'focus .contextual-links a': 'focus',
-      'blur .trigger': function () { this.model.blur(); },
-      'blur .contextual-links a': function () {
-        // Set up a timeout to allow a user to tab between the trigger and the
-        // contextual links without the menu dismissing.
+      'blur .trigger': function blurTrigger() {
+        this.model.blur();
+      },
+      'blur .contextual-links a': function blurContextualLinksA() {
         var that = this;
         this.timer = window.setTimeout(function () {
           that.model.close().blur();
@@ -26,36 +23,14 @@
       }
     },
 
-    /**
-     * Provides keyboard interaction for a contextual link.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
-
-      /**
-       * The timer is used to create a delay before dismissing the contextual
-       * links on blur. This is only necessary when keyboard users tab into
-       * contextual links without edit mode (i.e. without TabbingManager).
-       * That means that if we decide to disable tabbing of contextual links
-       * without edit mode, all this timer logic can go away.
-       *
-       * @type {NaN|number}
-       */
+    initialize: function initialize() {
       this.timer = NaN;
     },
 
-    /**
-     * Sets focus on the model; Clears the timer that dismisses the links.
-     */
-    focus: function () {
-      // Clear the timeout that might have been set by blurring a link.
+    focus: function focus() {
       window.clearTimeout(this.timer);
       this.model.focus();
     }
 
   });
-
-})(Drupal, Backbone);
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/RegionView.js b/core/modules/contextual/js/views/RegionView.es6.js
similarity index 100%
copy from core/modules/contextual/js/views/RegionView.js
copy to core/modules/contextual/js/views/RegionView.es6.js
diff --git a/core/modules/contextual/js/views/RegionView.js b/core/modules/contextual/js/views/RegionView.js
index e960db36bf..31b4c4c38d 100644
--- a/core/modules/contextual/js/views/RegionView.js
+++ b/core/modules/contextual/js/views/RegionView.js
@@ -1,57 +1,39 @@
 /**
- * @file
- * A Backbone View that renders the visual view of a contextual region element.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/views/RegionView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone, Modernizr) {
 
   'use strict';
 
-  Drupal.contextual.RegionView = Backbone.View.extend(/** @lends Drupal.contextual.RegionView# */{
-
-    /**
-     * Events for the Backbone view.
-     *
-     * @return {object}
-     *   A mapping of events to be used in the view.
-     */
-    events: function () {
+  Drupal.contextual.RegionView = Backbone.View.extend({
+    events: function events() {
       var mapping = {
-        mouseenter: function () { this.model.set('regionIsHovered', true); },
-        mouseleave: function () {
+        mouseenter: function mouseenter() {
+          this.model.set('regionIsHovered', true);
+        },
+        mouseleave: function mouseleave() {
           this.model.close().blur().set('regionIsHovered', false);
         }
       };
-      // We don't want mouse hover events on touch.
+
       if (Modernizr.touchevents) {
         mapping = {};
       }
       return mapping;
     },
 
-    /**
-     * Renders the visual view of a contextual region element.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.listenTo(this.model, 'change:hasFocus', this.render);
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.contextual.RegionView}
-     *   The current contextual region view.
-     */
-    render: function () {
+    render: function render() {
       this.$el.toggleClass('focus', this.model.get('hasFocus'));
 
       return this;
     }
 
   });
-
-})(Drupal, Backbone, Modernizr);
+})(Drupal, Backbone, Modernizr);
\ No newline at end of file
diff --git a/core/modules/contextual/js/views/VisualView.js b/core/modules/contextual/js/views/VisualView.es6.js
similarity index 100%
copy from core/modules/contextual/js/views/VisualView.js
copy to core/modules/contextual/js/views/VisualView.es6.js
diff --git a/core/modules/contextual/js/views/VisualView.js b/core/modules/contextual/js/views/VisualView.js
index b22bb373dd..13bc6823f3 100644
--- a/core/modules/contextual/js/views/VisualView.js
+++ b/core/modules/contextual/js/views/VisualView.js
@@ -1,80 +1,55 @@
 /**
- * @file
- * A Backbone View that provides the visual view of a contextual link.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/contextual/js/views/VisualView.es6.js
+* @preserve
+**/
 
 (function (Drupal, Backbone, Modernizr) {
 
   'use strict';
 
-  Drupal.contextual.VisualView = Backbone.View.extend(/** @lends Drupal.contextual.VisualView# */{
-
-    /**
-     * Events for the Backbone view.
-     *
-     * @return {object}
-     *   A mapping of events to be used in the view.
-     */
-    events: function () {
-      // Prevents delay and simulated mouse events.
-      var touchEndToClick = function (event) {
+  Drupal.contextual.VisualView = Backbone.View.extend({
+    events: function events() {
+      var touchEndToClick = function touchEndToClick(event) {
         event.preventDefault();
         event.target.click();
       };
       var mapping = {
-        'click .trigger': function () { this.model.toggleOpen(); },
+        'click .trigger': function clickTrigger() {
+          this.model.toggleOpen();
+        },
         'touchend .trigger': touchEndToClick,
-        'click .contextual-links a': function () { this.model.close().blur(); },
+        'click .contextual-links a': function clickContextualLinksA() {
+          this.model.close().blur();
+        },
         'touchend .contextual-links a': touchEndToClick
       };
-      // We only want mouse hover events on non-touch.
+
       if (!Modernizr.touchevents) {
-        mapping.mouseenter = function () { this.model.focus(); };
+        mapping.mouseenter = function () {
+          this.model.focus();
+        };
       }
       return mapping;
     },
 
-    /**
-     * Renders the visual view of a contextual link. Listens to mouse & touch.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.listenTo(this.model, 'change', this.render);
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.contextual.VisualView}
-     *   The current contextual visual view.
-     */
-    render: function () {
+    render: function render() {
       var isOpen = this.model.get('isOpen');
-      // The trigger should be visible when:
-      //  - the mouse hovered over the region,
-      //  - the trigger is locked,
-      //  - and for as long as the contextual menu is open.
+
       var isVisible = this.model.get('isLocked') || this.model.get('regionIsHovered') || isOpen;
 
-      this.$el
-        // The open state determines if the links are visible.
-        .toggleClass('open', isOpen)
-        // Update the visibility of the trigger.
-        .find('.trigger').toggleClass('visually-hidden', !isVisible);
+      this.$el.toggleClass('open', isOpen).find('.trigger').toggleClass('visually-hidden', !isVisible);
 
-      // Nested contextual region handling: hide any nested contextual triggers.
       if ('isOpen' in this.model.changed) {
-        this.$el.closest('.contextual-region')
-          .find('.contextual .trigger:not(:first)')
-          .toggle(!isOpen);
+        this.$el.closest('.contextual-region').find('.contextual .trigger:not(:first)').toggle(!isOpen);
       }
 
       return this;
     }
 
   });
-
-})(Drupal, Backbone, Modernizr);
+})(Drupal, Backbone, Modernizr);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.admin.js b/core/modules/editor/js/editor.admin.es6.js
similarity index 100%
copy from core/modules/editor/js/editor.admin.js
copy to core/modules/editor/js/editor.admin.es6.js
diff --git a/core/modules/editor/js/editor.admin.js b/core/modules/editor/js/editor.admin.js
index 1fdb353202..c88ee9f0bc 100644
--- a/core/modules/editor/js/editor.admin.js
+++ b/core/modules/editor/js/editor.admin.js
@@ -1,147 +1,27 @@
 /**
- * @file
- * Provides a JavaScript API to broadcast text editor configuration changes.
- *
- * Filter implementations may listen to the drupalEditorFeatureAdded,
- * drupalEditorFeatureRemoved, and drupalEditorFeatureRemoved events on document
- * to automatically adjust their settings based on the editor configuration.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/editor/js/editor.admin.es6.js
+* @preserve
+**/
 
 (function ($, _, Drupal, document) {
 
   'use strict';
 
-  /**
-   * Editor configuration namespace.
-   *
-   * @namespace
-   */
   Drupal.editorConfiguration = {
-
-    /**
-     * Must be called by a specific text editor's configuration whenever a
-     * feature is added by the user.
-     *
-     * Triggers the drupalEditorFeatureAdded event on the document, which
-     * receives a {@link Drupal.EditorFeature} object.
-     *
-     * @param {Drupal.EditorFeature} feature
-     *   A text editor feature object.
-     *
-     * @fires event:drupalEditorFeatureAdded
-     */
-    addedFeature: function (feature) {
+    addedFeature: function addedFeature(feature) {
       $(document).trigger('drupalEditorFeatureAdded', feature);
     },
 
-    /**
-     * Must be called by a specific text editor's configuration whenever a
-     * feature is removed by the user.
-     *
-     * Triggers the drupalEditorFeatureRemoved event on the document, which
-     * receives a {@link Drupal.EditorFeature} object.
-     *
-     * @param {Drupal.EditorFeature} feature
-     *   A text editor feature object.
-     *
-     * @fires event:drupalEditorFeatureRemoved
-     */
-    removedFeature: function (feature) {
+    removedFeature: function removedFeature(feature) {
       $(document).trigger('drupalEditorFeatureRemoved', feature);
     },
 
-    /**
-     * Must be called by a specific text editor's configuration whenever a
-     * feature is modified, i.e. has different rules.
-     *
-     * For example when the "Bold" button is configured to use the `<b>` tag
-     * instead of the `<strong>` tag.
-     *
-     * Triggers the drupalEditorFeatureModified event on the document, which
-     * receives a {@link Drupal.EditorFeature} object.
-     *
-     * @param {Drupal.EditorFeature} feature
-     *   A text editor feature object.
-     *
-     * @fires event:drupalEditorFeatureModified
-     */
-    modifiedFeature: function (feature) {
+    modifiedFeature: function modifiedFeature(feature) {
       $(document).trigger('drupalEditorFeatureModified', feature);
     },
 
-    /**
-     * May be called by a specific text editor's configuration whenever a
-     * feature is being added, to check whether it would require the filter
-     * settings to be updated.
-     *
-     * The canonical use case is when a text editor is being enabled:
-     * preferably
-     * this would not cause the filter settings to be changed; rather, the
-     * default set of buttons (features) for the text editor should adjust
-     * itself to not cause filter setting changes.
-     *
-     * Note: for filters to integrate with this functionality, it is necessary
-     * that they implement
-     * `Drupal.filterSettingsForEditors[filterID].getRules()`.
-     *
-     * @param {Drupal.EditorFeature} feature
-     *   A text editor feature object.
-     *
-     * @return {bool}
-     *   Whether the given feature is allowed by the current filters.
-     */
-    featureIsAllowedByFilters: function (feature) {
-
-      /**
-       * Generate the universe U of possible values that can result from the
-       * feature's rules' requirements.
-       *
-       * This generates an object of this form:
-       *   var universe = {
-       *     a: {
-       *       'touchedByAllowedPropertyRule': false,
-       *       'tag': false,
-       *       'attributes:href': false,
-       *       'classes:external': false,
-       *     },
-       *     strong: {
-       *       'touchedByAllowedPropertyRule': false,
-       *       'tag': false,
-       *     },
-       *     img: {
-       *       'touchedByAllowedPropertyRule': false,
-       *       'tag': false,
-       *       'attributes:src': false
-       *     }
-       *   };
-       *
-       * In this example, the given text editor feature resulted in the above
-       * universe, which shows that it must be allowed to generate the a,
-       * strong and img tags. For the a tag, it must be able to set the "href"
-       * attribute and the "external" class. For the strong tag, no further
-       * properties are required. For the img tag, the "src" attribute is
-       * required. The "tag" key is used to track whether that tag was
-       * explicitly allowed by one of the filter's rules. The
-       * "touchedByAllowedPropertyRule" key is used for state tracking that is
-       * essential for filterStatusAllowsFeature() to be able to reason: when
-       * all of a filter's rules have been applied, and none of the forbidden
-       * rules matched (which would have resulted in early termination) yet the
-       * universe has not been made empty (which would be the end result if
-       * everything in the universe were explicitly allowed), then this piece
-       * of state data enables us to determine whether a tag whose properties
-       * were not all explicitly allowed are in fact still allowed, because its
-       * tag was explicitly allowed and there were no filter rules applying
-       * "allowed tag property value" restrictions for this particular tag.
-       *
-       * @param {object} feature
-       *   The feature in question.
-       *
-       * @return {object}
-       *   The universe generated.
-       *
-       * @see findPropertyValueOnTag()
-       * @see filterStatusAllowsFeature()
-       */
+    featureIsAllowedByFilters: function featureIsAllowedByFilters(feature) {
       function generateUniverseFromFeatureRequirements(feature) {
         var properties = ['attributes', 'styles', 'classes'];
         var universe = {};
@@ -149,31 +29,21 @@
         for (var r = 0; r < feature.rules.length; r++) {
           var featureRule = feature.rules[r];
 
-          // For each tag required by this feature rule, create a basic entry in
-          // the universe.
           var requiredTags = featureRule.required.tags;
           for (var t = 0; t < requiredTags.length; t++) {
             universe[requiredTags[t]] = {
-              // Whether this tag was allowed or not.
               tag: false,
-              // Whether any filter rule that applies to this tag had an allowed
-              // property rule. i.e. will become true if >=1 filter rule has >=1
-              // allowed property rule.
+
               touchedByAllowedPropertyRule: false,
-              // Analogous, but for forbidden property rule.
+
               touchedBytouchedByForbiddenPropertyRule: false
             };
           }
 
-          // If no required properties are defined for this rule, we can move on
-          // to the next feature.
           if (emptyProperties(featureRule.required)) {
             continue;
           }
 
-          // Expand the existing universe, assume that each tags' property
-          // value is disallowed. If the filter rules allow everything in the
-          // feature's universe, then the feature is allowed.
           for (var p = 0; p < properties.length; p++) {
             var property = properties[p];
             for (var pv = 0; pv < featureRule.required[property].length; pv++) {
@@ -186,41 +56,11 @@
         return universe;
       }
 
-      /**
-       * Provided a section of a feature or filter rule, checks if no property
-       * values are defined for all properties: attributes, classes and styles.
-       *
-       * @param {object} section
-       *   The section to check.
-       *
-       * @return {bool}
-       *   Returns true if the section has empty properties, false otherwise.
-       */
       function emptyProperties(section) {
         return section.attributes.length === 0 && section.classes.length === 0 && section.styles.length === 0;
       }
 
-      /**
-       * Calls findPropertyValueOnTag on the given tag for every property value
-       * that is listed in the "propertyValues" parameter. Supports the wildcard
-       * tag.
-       *
-       * @param {object} universe
-       *   The universe to check.
-       * @param {string} tag
-       *   The tag to look for.
-       * @param {string} property
-       *   The property to check.
-       * @param {Array} propertyValues
-       *   Values of the property to check.
-       * @param {bool} allowing
-       *   Whether to update the universe or not.
-       *
-       * @return {bool}
-       *   Returns true if found, false otherwise.
-       */
       function findPropertyValuesOnTag(universe, tag, property, propertyValues, allowing) {
-        // Detect the wildcard case.
         if (tag === '*') {
           return findPropertyValuesOnAllTags(universe, property, propertyValues, allowing);
         }
@@ -234,21 +74,6 @@
         return atLeastOneFound;
       }
 
-      /**
-       * Calls findPropertyValuesOnAllTags for all tags in the universe.
-       *
-       * @param {object} universe
-       *   The universe to check.
-       * @param {string} property
-       *   The property to check.
-       * @param {Array} propertyValues
-       *   Values of the property to check.
-       * @param {bool} allowing
-       *   Whether to update the universe or not.
-       *
-       * @return {bool}
-       *   Returns true if found, false otherwise.
-       */
       function findPropertyValuesOnAllTags(universe, property, propertyValues, allowing) {
         var atLeastOneFound = false;
         _.each(_.keys(universe), function (tag) {
@@ -259,43 +84,17 @@
         return atLeastOneFound;
       }
 
-      /**
-       * Finds out if a specific property value (potentially containing
-       * wildcards) exists on the given tag. When the "allowing" parameter
-       * equals true, the universe will be updated if that specific property
-       * value exists. Returns true if found, false otherwise.
-       *
-       * @param {object} universe
-       *   The universe to check.
-       * @param {string} tag
-       *   The tag to look for.
-       * @param {string} property
-       *   The property to check.
-       * @param {string} propertyValue
-       *   The property value to check.
-       * @param {bool} allowing
-       *   Whether to update the universe or not.
-       *
-       * @return {bool}
-       *   Returns true if found, false otherwise.
-       */
       function findPropertyValueOnTag(universe, tag, property, propertyValue, allowing) {
-        // If the tag does not exist in the universe, then it definitely can't
-        // have this specific property value.
         if (!_.has(universe, tag)) {
           return false;
         }
 
         var key = property + ':' + propertyValue;
 
-        // Track whether a tag was touched by a filter rule that allows specific
-        // property values on this particular tag.
-        // @see generateUniverseFromFeatureRequirements
         if (allowing) {
           universe[tag].touchedByAllowedPropertyRule = true;
         }
 
-        // The simple case: no wildcard in property value.
         if (_.indexOf(propertyValue, '*') === -1) {
           if (_.has(universe, tag) && _.has(universe[tag], key)) {
             if (allowing) {
@@ -304,37 +103,22 @@
             return true;
           }
           return false;
-        }
-        // The complex case: wildcard in property value.
-        else {
-          var atLeastOneFound = false;
-          var regex = key.replace(/\*/g, '[^ ]*');
-          _.each(_.keys(universe[tag]), function (key) {
-            if (key.match(regex)) {
-              atLeastOneFound = true;
-              if (allowing) {
-                universe[tag][key] = true;
+        } else {
+            var atLeastOneFound = false;
+            var regex = key.replace(/\*/g, '[^ ]*');
+            _.each(_.keys(universe[tag]), function (key) {
+              if (key.match(regex)) {
+                atLeastOneFound = true;
+                if (allowing) {
+                  universe[tag][key] = true;
+                }
               }
-            }
-          });
-          return atLeastOneFound;
-        }
+            });
+            return atLeastOneFound;
+          }
       }
 
-      /**
-       * Deletes a tag from the universe if the tag itself and each of its
-       * properties are marked as allowed.
-       *
-       * @param {object} universe
-       *   The universe to delete from.
-       * @param {string} tag
-       *   The tag to check.
-       *
-       * @return {bool}
-       *   Whether something was deleted from the universe.
-       */
       function deleteFromUniverseIfAllowed(universe, tag) {
-        // Detect the wildcard case.
         if (tag === '*') {
           return deleteAllTagsFromUniverseIfAllowed(universe);
         }
@@ -345,15 +129,6 @@
         return false;
       }
 
-      /**
-       * Calls deleteFromUniverseIfAllowed for all tags in the universe.
-       *
-       * @param {object} universe
-       *   The universe to delete from.
-       *
-       * @return {bool}
-       *   Whether something was deleted from the universe.
-       */
       function deleteAllTagsFromUniverseIfAllowed(universe) {
         var atLeastOneDeleted = false;
         _.each(_.keys(universe), function (tag) {
@@ -364,22 +139,9 @@
         return atLeastOneDeleted;
       }
 
-      /**
-       * Checks if any filter rule forbids either a tag or a tag property value
-       * that exists in the universe.
-       *
-       * @param {object} universe
-       *   Universe to check.
-       * @param {object} filterStatus
-       *   Filter status to use for check.
-       *
-       * @return {bool}
-       *   Whether any filter rule forbids something in the universe.
-       */
       function anyForbiddenFilterRuleMatches(universe, filterStatus) {
         var properties = ['attributes', 'styles', 'classes'];
 
-        // Check if a tag in the universe is forbidden.
         var allRequiredTags = _.keys(universe);
         var filterRule;
         for (var i = 0; i < filterStatus.rules.length; i++) {
@@ -391,20 +153,16 @@
           }
         }
 
-        // Check if a property value of a tag in the universe is forbidden.
-        // For all filter rules…
         for (var n = 0; n < filterStatus.rules.length; n++) {
           filterRule = filterStatus.rules[n];
-          // … if there are tags with restricted property values …
+
           if (filterRule.restrictedTags.tags.length && !emptyProperties(filterRule.restrictedTags.forbidden)) {
-            // … for all those tags …
             for (var j = 0; j < filterRule.restrictedTags.tags.length; j++) {
               var tag = filterRule.restrictedTags.tags[j];
-              // … then iterate over all properties …
+
               for (var k = 0; k < properties.length; k++) {
                 var property = properties[k];
-                // … and return true if just one of the forbidden property
-                // values for this tag and property is listed in the universe.
+
                 if (findPropertyValuesOnTag(universe, tag, property, filterRule.restrictedTags.forbidden[property], false)) {
                   return true;
                 }
@@ -416,21 +174,9 @@
         return false;
       }
 
-      /**
-       * Applies every filter rule's explicit allowing of a tag or a tag
-       * property value to the universe. Whenever both the tag and all of its
-       * required property values are marked as explicitly allowed, they are
-       * deleted from the universe.
-       *
-       * @param {object} universe
-       *   Universe to delete from.
-       * @param {object} filterStatus
-       *   The filter status in question.
-       */
       function markAllowedTagsAndPropertyValues(universe, filterStatus) {
         var properties = ['attributes', 'styles', 'classes'];
 
-        // Check if a tag in the universe is allowed.
         var filterRule;
         var tag;
         for (var l = 0; !_.isEmpty(universe) && l < filterStatus.rules.length; l++) {
@@ -446,22 +192,16 @@
           }
         }
 
-        // Check if a property value of a tag in the universe is allowed.
-        // For all filter rules…
         for (var i = 0; !_.isEmpty(universe) && i < filterStatus.rules.length; i++) {
           filterRule = filterStatus.rules[i];
-          // … if there are tags with restricted property values …
+
           if (filterRule.restrictedTags.tags.length && !emptyProperties(filterRule.restrictedTags.allowed)) {
-            // … for all those tags …
             for (var j = 0; !_.isEmpty(universe) && j < filterRule.restrictedTags.tags.length; j++) {
               tag = filterRule.restrictedTags.tags[j];
-              // … then iterate over all properties …
+
               for (var k = 0; k < properties.length; k++) {
                 var property = properties[k];
-                // … and try to delete this tag from the universe if just one
-                // of the allowed property values for this tag and property is
-                // listed in the universe. (Because everything might be allowed
-                // now.)
+
                 if (findPropertyValuesOnTag(universe, tag, property, filterRule.restrictedTags.allowed[property], true)) {
                   deleteFromUniverseIfAllowed(universe, tag);
                 }
@@ -471,114 +211,57 @@
         }
       }
 
-      /**
-       * Checks whether the current status of a filter allows a specific feature
-       * by building the universe of potential values from the feature's
-       * requirements and then checking whether anything in the filter prevents
-       * that.
-       *
-       * @param {object} filterStatus
-       *   The filter status in question.
-       * @param {object} feature
-       *   The feature requested.
-       *
-       * @return {bool}
-       *   Whether the current status of the filter allows specified feature.
-       *
-       * @see generateUniverseFromFeatureRequirements()
-       */
       function filterStatusAllowsFeature(filterStatus, feature) {
-        // An inactive filter by definition allows the feature.
         if (!filterStatus.active) {
           return true;
         }
 
-        // A feature that specifies no rules has no HTML requirements and is
-        // hence allowed by definition.
         if (feature.rules.length === 0) {
           return true;
         }
 
-        // Analogously for a filter that specifies no rules.
         if (filterStatus.rules.length === 0) {
           return true;
         }
 
-        // Generate the universe U of possible values that can result from the
-        // feature's rules' requirements.
         var universe = generateUniverseFromFeatureRequirements(feature);
 
-        // If anything that is in the universe (and is thus required by the
-        // feature) is forbidden by any of the filter's rules, then this filter
-        // does not allow this feature.
         if (anyForbiddenFilterRuleMatches(universe, filterStatus)) {
           return false;
         }
 
-        // Mark anything in the universe that is allowed by any of the filter's
-        // rules as allowed. If everything is explicitly allowed, then the
-        // universe will become empty.
         markAllowedTagsAndPropertyValues(universe, filterStatus);
 
-        // If there was at least one filter rule allowing tags, then everything
-        // in the universe must be allowed for this feature to be allowed, and
-        // thus by now it must be empty. However, it is still possible that the
-        // filter allows the feature, due to no rules for allowing tag property
-        // values and/or rules for forbidding tag property values. For details:
-        // see the comments below.
-        // @see generateUniverseFromFeatureRequirements()
         if (_.some(_.pluck(filterStatus.rules, 'allow'))) {
-          // If the universe is empty, then everything was explicitly allowed
-          // and our job is done: this filter allows this feature!
           if (_.isEmpty(universe)) {
             return true;
-          }
-          // Otherwise, it is still possible that this feature is allowed.
-          else {
-            // Every tag must be explicitly allowed if there are filter rules
-            // doing tag whitelisting.
-            if (!_.every(_.pluck(universe, 'tag'))) {
-              return false;
-            }
-            // Every tag was explicitly allowed, but since the universe is not
-            // empty, one or more tag properties are disallowed. However, if
-            // only blacklisting of tag properties was applied to these tags,
-            // and no whitelisting was ever applied, then it's still fine:
-            // since none of the tag properties were blacklisted, we got to
-            // this point, and since no whitelisting was applied, it doesn't
-            // matter that the properties: this could never have happened
-            // anyway. It's only this late that we can know this for certain.
-            else {
-              var tags = _.keys(universe);
-              // Figure out if there was any rule applying whitelisting tag
-              // restrictions to each of the remaining tags.
-              for (var i = 0; i < tags.length; i++) {
-                var tag = tags[i];
-                if (_.has(universe, tag)) {
-                  if (universe[tag].touchedByAllowedPropertyRule === false) {
-                    delete universe[tag];
+          } else {
+              if (!_.every(_.pluck(universe, 'tag'))) {
+                return false;
+              } else {
+                  var tags = _.keys(universe);
+
+                  for (var i = 0; i < tags.length; i++) {
+                    var tag = tags[i];
+                    if (_.has(universe, tag)) {
+                      if (universe[tag].touchedByAllowedPropertyRule === false) {
+                        delete universe[tag];
+                      }
+                    }
                   }
+                  return _.isEmpty(universe);
                 }
-              }
-              return _.isEmpty(universe);
             }
+        } else {
+            return true;
           }
-        }
-        // Otherwise, if all filter rules were doing blacklisting, then the sole
-        // fact that we got to this point indicates that this filter allows for
-        // everything that is required for this feature.
-        else {
-          return true;
-        }
       }
 
-      // If any filter's current status forbids the editor feature, return
-      // false.
       Drupal.filterConfiguration.update();
       for (var filterID in Drupal.filterConfiguration.statuses) {
         if (Drupal.filterConfiguration.statuses.hasOwnProperty(filterID)) {
           var filterStatus = Drupal.filterConfiguration.statuses[filterID];
-          if (!(filterStatusAllowsFeature(filterStatus, feature))) {
+          if (!filterStatusAllowsFeature(filterStatus, feature)) {
             return false;
           }
         }
@@ -588,248 +271,43 @@
     }
   };
 
-  /**
-   * Constructor for an editor feature HTML rule.
-   *
-   * Intended to be used in combination with {@link Drupal.EditorFeature}.
-   *
-   * A text editor feature rule object describes both:
-   *  - required HTML tags, attributes, styles and classes: without these, the
-   *    text editor feature is unable to function. It's possible that a
-   *  - allowed HTML tags, attributes, styles and classes: these are optional
-   *    in the strictest sense, but it is possible that the feature generates
-   *    them.
-   *
-   * The structure can be very clearly seen below: there's a "required" and an
-   * "allowed" key. For each of those, there are objects with the "tags",
-   * "attributes", "styles" and "classes" keys. For all these keys the values
-   * are initialized to the empty array. List each possible value as an array
-   * value. Besides the "required" and "allowed" keys, there's an optional
-   * "raw" key: it allows text editor implementations to optionally pass in
-   * their raw representation instead of the Drupal-defined representation for
-   * HTML rules.
-   *
-   * @example
-   * tags: ['<a>']
-   * attributes: ['href', 'alt']
-   * styles: ['color', 'text-decoration']
-   * classes: ['external', 'internal']
-   *
-   * @constructor
-   *
-   * @see Drupal.EditorFeature
-   */
   Drupal.EditorFeatureHTMLRule = function () {
+    this.required = { tags: [], attributes: [], styles: [], classes: [] };
+
+    this.allowed = { tags: [], attributes: [], styles: [], classes: [] };
 
-    /**
-     *
-     * @type {object}
-     *
-     * @prop {Array} tags
-     * @prop {Array} attributes
-     * @prop {Array} styles
-     * @prop {Array} classes
-     */
-    this.required = {tags: [], attributes: [], styles: [], classes: []};
-
-    /**
-     *
-     * @type {object}
-     *
-     * @prop {Array} tags
-     * @prop {Array} attributes
-     * @prop {Array} styles
-     * @prop {Array} classes
-     */
-    this.allowed = {tags: [], attributes: [], styles: [], classes: []};
-
-    /**
-     *
-     * @type {null}
-     */
     this.raw = null;
   };
 
-  /**
-   * A text editor feature object. Initialized with the feature name.
-   *
-   * Contains a set of HTML rules ({@link Drupal.EditorFeatureHTMLRule} objects)
-   * that describe which HTML tags, attributes, styles and classes are required
-   * (i.e. essential for the feature to function at all) and which are allowed
-   * (i.e. the feature may generate this, but they're not essential).
-   *
-   * It is necessary to allow for multiple HTML rules per feature: with just
-   * one HTML rule per feature, there is not enough expressiveness to describe
-   * certain cases. For example: a "table" feature would probably require the
-   * `<table>` tag, and might allow e.g. the "summary" attribute on that tag.
-   * However, the table feature would also require the `<tr>` and `<td>` tags,
-   * but it doesn't make sense to allow for a "summary" attribute on these tags.
-   * Hence these would need to be split in two separate rules.
-   *
-   * HTML rules must be added with the `addHTMLRule()` method. A feature that
-   * has zero HTML rules does not create or modify HTML.
-   *
-   * @constructor
-   *
-   * @param {string} name
-   *   The name of the feature.
-   *
-   * @see Drupal.EditorFeatureHTMLRule
-   */
   Drupal.EditorFeature = function (name) {
     this.name = name;
     this.rules = [];
   };
 
-  /**
-   * Adds a HTML rule to the list of HTML rules for this feature.
-   *
-   * @param {Drupal.EditorFeatureHTMLRule} rule
-   *   A text editor feature HTML rule.
-   */
   Drupal.EditorFeature.prototype.addHTMLRule = function (rule) {
     this.rules.push(rule);
   };
 
-  /**
-   * Text filter status object. Initialized with the filter ID.
-   *
-   * Indicates whether the text filter is currently active (enabled) or not.
-   *
-   * Contains a set of HTML rules ({@link Drupal.FilterHTMLRule} objects) that
-   * describe which HTML tags are allowed or forbidden. They can also describe
-   * for a set of tags (or all tags) which attributes, styles and classes are
-   * allowed and which are forbidden.
-   *
-   * It is necessary to allow for multiple HTML rules per feature, for
-   * analogous reasons as {@link Drupal.EditorFeature}.
-   *
-   * HTML rules must be added with the `addHTMLRule()` method. A filter that has
-   * zero HTML rules does not disallow any HTML.
-   *
-   * @constructor
-   *
-   * @param {string} name
-   *   The name of the feature.
-   *
-   * @see Drupal.FilterHTMLRule
-   */
   Drupal.FilterStatus = function (name) {
-
-    /**
-     *
-     * @type {string}
-     */
     this.name = name;
 
-    /**
-     *
-     * @type {bool}
-     */
     this.active = false;
 
-    /**
-     *
-     * @type {Array.<Drupal.FilterHTMLRule>}
-     */
     this.rules = [];
   };
 
-  /**
-   * Adds a HTML rule to the list of HTML rules for this filter.
-   *
-   * @param {Drupal.FilterHTMLRule} rule
-   *   A text filter HTML rule.
-   */
   Drupal.FilterStatus.prototype.addHTMLRule = function (rule) {
     this.rules.push(rule);
   };
 
-  /**
-   * A text filter HTML rule object.
-   *
-   * Intended to be used in combination with {@link Drupal.FilterStatus}.
-   *
-   * A text filter rule object describes:
-   *  1. allowed or forbidden tags: (optional) whitelist or blacklist HTML tags
-   *  2. restricted tag properties: (optional) whitelist or blacklist
-   *     attributes, styles and classes on a set of HTML tags.
-   *
-   * Typically, each text filter rule object does either 1 or 2, not both.
-   *
-   * The structure can be very clearly seen below:
-   *  1. use the "tags" key to list HTML tags, and set the "allow" key to
-   *     either true (to allow these HTML tags) or false (to forbid these HTML
-   *     tags). If you leave the "tags" key's default value (the empty array),
-   *     no restrictions are applied.
-   *  2. all nested within the "restrictedTags" key: use the "tags" subkey to
-   *     list HTML tags to which you want to apply property restrictions, then
-   *     use the "allowed" subkey to whitelist specific property values, and
-   *     similarly use the "forbidden" subkey to blacklist specific property
-   *     values.
-   *
-   * @example
-   * <caption>Whitelist the "p", "strong" and "a" HTML tags.</caption>
-   * {
-   *   tags: ['p', 'strong', 'a'],
-   *   allow: true,
-   *   restrictedTags: {
-   *     tags: [],
-   *     allowed: { attributes: [], styles: [], classes: [] },
-   *     forbidden: { attributes: [], styles: [], classes: [] }
-   *   }
-   * }
-   * @example
-   * <caption>For the "a" HTML tag, only allow the "href" attribute
-   * and the "external" class and disallow the "target" attribute.</caption>
-   * {
-   *   tags: [],
-   *   allow: null,
-   *   restrictedTags: {
-   *     tags: ['a'],
-   *     allowed: { attributes: ['href'], styles: [], classes: ['external'] },
-   *     forbidden: { attributes: ['target'], styles: [], classes: [] }
-   *   }
-   * }
-   * @example
-   * <caption>For all tags, allow the "data-*" attribute (that is, any
-   * attribute that begins with "data-").</caption>
-   * {
-   *   tags: [],
-   *   allow: null,
-   *   restrictedTags: {
-   *     tags: ['*'],
-   *     allowed: { attributes: ['data-*'], styles: [], classes: [] },
-   *     forbidden: { attributes: [], styles: [], classes: [] }
-   *   }
-   * }
-   *
-   * @return {object}
-   *   An object with the following structure:
-   * ```
-   * {
-   *   tags: Array,
-   *   allow: null,
-   *   restrictedTags: {
-   *     tags: Array,
-   *     allowed: {attributes: Array, styles: Array, classes: Array},
-   *     forbidden: {attributes: Array, styles: Array, classes: Array}
-   *   }
-   * }
-   * ```
-   *
-   * @see Drupal.FilterStatus
-   */
   Drupal.FilterHTMLRule = function () {
-    // Allow or forbid tags.
     this.tags = [];
     this.allow = null;
 
-    // Apply restrictions to properties set on tags.
     this.restrictedTags = {
       tags: [],
-      allowed: {attributes: [], styles: [], classes: []},
-      forbidden: {attributes: [], styles: [], classes: []}
+      allowed: { attributes: [], styles: [], classes: [] },
+      forbidden: { attributes: [], styles: [], classes: [] }
     };
 
     return this;
@@ -849,52 +327,16 @@
     return clone;
   };
 
-  /**
-   * Tracks the configuration of all text filters in {@link Drupal.FilterStatus}
-   * objects for {@link Drupal.editorConfiguration.featureIsAllowedByFilters}.
-   *
-   * @namespace
-   */
   Drupal.filterConfiguration = {
-
-    /**
-     * Drupal.FilterStatus objects, keyed by filter ID.
-     *
-     * @type {Object.<string, Drupal.FilterStatus>}
-     */
     statuses: {},
 
-    /**
-     * Live filter setting parsers.
-     *
-     * Object keyed by filter ID, for those filters that implement it.
-     *
-     * Filters should load the implementing JavaScript on the filter
-     * configuration form and implement
-     * `Drupal.filterSettings[filterID].getRules()`, which should return an
-     * array of {@link Drupal.FilterHTMLRule} objects.
-     *
-     * @namespace
-     */
     liveSettingParsers: {},
 
-    /**
-     * Updates all {@link Drupal.FilterStatus} objects to reflect current state.
-     *
-     * Automatically checks whether a filter is currently enabled or not. To
-     * support more finegrained.
-     *
-     * If a filter implements a live setting parser, then that will be used to
-     * keep the HTML rules for the {@link Drupal.FilterStatus} object
-     * up-to-date.
-     */
-    update: function () {
+    update: function update() {
       for (var filterID in Drupal.filterConfiguration.statuses) {
         if (Drupal.filterConfiguration.statuses.hasOwnProperty(filterID)) {
-          // Update status.
           Drupal.filterConfiguration.statuses[filterID].active = $('[name="filters[' + filterID + '][status]"]').is(':checked');
 
-          // Update current rules.
           if (Drupal.filterConfiguration.liveSettingParsers[filterID]) {
             Drupal.filterConfiguration.statuses[filterID].rules = Drupal.filterConfiguration.liveSettingParsers[filterID].getRules();
           }
@@ -904,32 +346,18 @@
 
   };
 
-  /**
-   * Initializes {@link Drupal.filterConfiguration}.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Gets filter configuration from filter form input.
-   */
   Drupal.behaviors.initializeFilterConfiguration = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $context = $(context);
 
       $context.find('#filters-status-wrapper input.form-checkbox').once('filter-editor-status').each(function () {
         var $checkbox = $(this);
         var nameAttribute = $checkbox.attr('name');
 
-        // The filter's checkbox has a name attribute of the form
-        // "filters[<name of filter>][status]", parse "<name of filter>"
-        // from it.
         var filterID = nameAttribute.substring(8, nameAttribute.indexOf(']'));
 
-        // Create a Drupal.FilterStatus object to track the state (whether it's
-        // active or not and its current settings, if any) of each filter.
         Drupal.filterConfiguration.statuses[filterID] = new Drupal.FilterStatus(filterID);
       });
     }
   };
-
-})(jQuery, _, Drupal, document);
+})(jQuery, _, Drupal, document);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.dialog.js b/core/modules/editor/js/editor.dialog.es6.js
similarity index 100%
copy from core/modules/editor/js/editor.dialog.js
copy to core/modules/editor/js/editor.dialog.es6.js
diff --git a/core/modules/editor/js/editor.dialog.js b/core/modules/editor/js/editor.dialog.js
index 3bf6120c7a..a1a33843bf 100644
--- a/core/modules/editor/js/editor.dialog.js
+++ b/core/modules/editor/js/editor.dialog.js
@@ -1,34 +1,14 @@
 /**
- * @file
- * AJAX commands used by Editor module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/editor/js/editor.dialog.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Command to save the contents of an editor-provided modal.
-   *
-   * This command does not close the open modal. It should be followed by a
-   * call to `Drupal.AjaxCommands.prototype.closeDialog`. Editors that are
-   * integrated with dialogs must independently listen for an
-   * `editor:dialogsave` event to save the changes into the contents of their
-   * interface.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   The Drupal.Ajax object.
-   * @param {object} response
-   *   The server response from the ajax request.
-   * @param {Array} response.values
-   *   The values that were saved.
-   * @param {number} [status]
-   *   The status code from the ajax request.
-   *
-   * @fires event:editor:dialogsave
-   */
   Drupal.AjaxCommands.prototype.editorDialogSave = function (ajax, response, status) {
     $(window).trigger('editor:dialogsave', [response.values]);
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.js b/core/modules/editor/js/editor.es6.js
similarity index 100%
copy from core/modules/editor/js/editor.js
copy to core/modules/editor/js/editor.es6.js
diff --git a/core/modules/editor/js/editor.formattedTextEditor.js b/core/modules/editor/js/editor.formattedTextEditor.es6.js
similarity index 100%
copy from core/modules/editor/js/editor.formattedTextEditor.js
copy to core/modules/editor/js/editor.formattedTextEditor.es6.js
diff --git a/core/modules/editor/js/editor.formattedTextEditor.js b/core/modules/editor/js/editor.formattedTextEditor.js
index fec73e03a0..18b44451ab 100644
--- a/core/modules/editor/js/editor.formattedTextEditor.js
+++ b/core/modules/editor/js/editor.formattedTextEditor.js
@@ -1,59 +1,23 @@
 /**
- * @file
- * Text editor-based in-place editor for formatted text content in Drupal.
- *
- * Depends on editor.module. Works with any (WYSIWYG) editor that implements the
- * editor.js API, including the optional attachInlineEditor() and onChange()
- * methods.
- * For example, assuming that a hypothetical editor's name was "Magical Editor"
- * and its editor.js API implementation lived at Drupal.editors.magical, this
- * JavaScript would use:
- *  - Drupal.editors.magical.attachInlineEditor()
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/editor/js/editor.formattedTextEditor.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, _) {
 
   'use strict';
 
-  Drupal.quickedit.editors.editor = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.editor# */{
-
-    /**
-     * The text format for this field.
-     *
-     * @type {string}
-     */
+  Drupal.quickedit.editors.editor = Drupal.quickedit.EditorView.extend({
     textFormat: null,
 
-    /**
-     * Indicates whether this text format has transformations.
-     *
-     * @type {bool}
-     */
     textFormatHasTransformations: null,
 
-    /**
-     * Stores a reference to the text editor object for this field.
-     *
-     * @type {Drupal.quickedit.EditorModel}
-     */
     textEditor: null,
 
-    /**
-     * Stores the textual DOM element that is being in-place edited.
-     *
-     * @type {jQuery}
-     */
     $textElement: null,
 
-    /**
-     * @constructs
-     *
-     * @augments Drupal.quickedit.EditorView
-     *
-     * @param {object} options
-     *   Options for the editor view.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
 
       var metadata = Drupal.quickedit.metadata.get(this.fieldModel.get('fieldID'), 'custom');
@@ -61,37 +25,20 @@
       this.textFormatHasTransformations = metadata.formatHasTransformations;
       this.textEditor = Drupal.editors[this.textFormat.editor];
 
-      // Store the actual value of this field. We'll need this to restore the
-      // original value when the user discards his modifications.
       var $fieldItems = this.$el.find('.quickedit-field');
       if ($fieldItems.length) {
         this.$textElement = $fieldItems.eq(0);
-      }
-      else {
+      } else {
         this.$textElement = this.$el;
       }
       this.model.set('originalValue', this.$textElement.html());
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {jQuery}
-     *   The text element edited.
-     */
-    getEditedElement: function () {
+    getEditedElement: function getEditedElement() {
       return this.$textElement;
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @param {object} fieldModel
-     *   The field model.
-     * @param {string} state
-     *   The current state.
-     */
-    stateChange: function (fieldModel, state) {
+    stateChange: function stateChange(fieldModel, state) {
       var editorModel = this.model;
       var from = fieldModel.previous('state');
       var to = state;
@@ -100,16 +47,10 @@
           break;
 
         case 'candidate':
-          // Detach the text editor when entering the 'candidate' state from one
-          // of the states where it could have been attached.
           if (from !== 'inactive' && from !== 'highlighted') {
             this.textEditor.detach(this.$textElement.get(0), this.textFormat);
           }
-          // A field model's editor view revert() method is invoked when an
-          // 'active' field becomes a 'candidate' field. But, in the case of
-          // this in-place editor, the content will have been *replaced* if the
-          // text format has transformation filters. Therefore, if we stop
-          // in-place editing this entity, revert explicitly.
+
           if (from === 'active' && this.textFormatHasTransformations) {
             this.revert();
           }
@@ -122,37 +63,24 @@
           break;
 
         case 'activating':
-          // When transformation filters have been applied to the formatted text
-          // of this field, then we'll need to load a re-formatted version of it
-          // without the transformation filters.
           if (this.textFormatHasTransformations) {
             var $textElement = this.$textElement;
             this._getUntransformedText(function (untransformedText) {
               $textElement.html(untransformedText);
               fieldModel.set('state', 'active');
             });
-          }
-          // When no transformation filters have been applied: start WYSIWYG
-          // editing immediately!
-          else {
-            // Defer updating the model until the current state change has
-            // propagated, to not trigger a nested state change event.
-            _.defer(function () {
-              fieldModel.set('state', 'active');
-            });
-          }
+          } else {
+              _.defer(function () {
+                fieldModel.set('state', 'active');
+              });
+            }
           break;
 
         case 'active':
           var textElement = this.$textElement.get(0);
           var toolbarView = fieldModel.toolbarView;
-          this.textEditor.attachInlineEditor(
-            textElement,
-            this.textFormat,
-            toolbarView.getMainWysiwygToolgroupId(),
-            toolbarView.getFloatedWysiwygToolgroupId()
-          );
-          // Set the state to 'changed' whenever the content has changed.
+          this.textEditor.attachInlineEditor(textElement, this.textFormat, toolbarView.getMainWysiwygToolgroupId(), toolbarView.getFloatedWysiwygToolgroupId());
+
           this.textEditor.onChange(textElement, function (htmlText) {
             editorModel.set('currentValue', htmlText);
             fieldModel.set('state', 'changed');
@@ -178,54 +106,28 @@
       }
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {object}
-     *   The sttings for the quick edit UI.
-     */
-    getQuickEditUISettings: function () {
-      return {padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: false};
+    getQuickEditUISettings: function getQuickEditUISettings() {
+      return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: false };
     },
 
-    /**
-     * @inheritdoc
-     */
-    revert: function () {
+    revert: function revert() {
       this.$textElement.html(this.model.get('originalValue'));
     },
 
-    /**
-     * Loads untransformed text for this field.
-     *
-     * More accurately: it re-filters formatted text to exclude transformation
-     * filters used by the text format.
-     *
-     * @param {function} callback
-     *   A callback function that will receive the untransformed text.
-     *
-     * @see \Drupal\editor\Ajax\GetUntransformedTextCommand
-     */
-    _getUntransformedText: function (callback) {
+    _getUntransformedText: function _getUntransformedText(callback) {
       var fieldID = this.fieldModel.get('fieldID');
 
-      // Create a Drupal.ajax instance to load the form.
       var textLoaderAjax = Drupal.ajax({
         url: Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('editor/!entity_type/!id/!field_name/!langcode/!view_mode')),
-        submit: {nocssjs: true}
+        submit: { nocssjs: true }
       });
 
-      // Implement a scoped editorGetUntransformedText AJAX command: calls the
-      // callback.
       textLoaderAjax.commands.editorGetUntransformedText = function (ajax, response, status) {
         callback(response.data);
       };
 
-      // This will ensure our scoped editorGetUntransformedText AJAX command
-      // gets called.
       textLoaderAjax.execute();
     }
 
   });
-
-})(jQuery, Drupal, drupalSettings, _);
+})(jQuery, Drupal, drupalSettings, _);
\ No newline at end of file
diff --git a/core/modules/editor/js/editor.js b/core/modules/editor/js/editor.js
index 2be16f57c5..e584e2824e 100644
--- a/core/modules/editor/js/editor.js
+++ b/core/modules/editor/js/editor.js
@@ -1,83 +1,48 @@
 /**
- * @file
- * Attaches behavior for the Editor module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/editor/js/editor.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Finds the text area field associated with the given text format selector.
-   *
-   * @param {jQuery} $formatSelector
-   *   A text format selector DOM element.
-   *
-   * @return {HTMLElement}
-   *   The text area DOM element, if it was found.
-   */
   function findFieldForFormatSelector($formatSelector) {
     var field_id = $formatSelector.attr('data-editor-for');
-    // This selector will only find text areas in the top-level document. We do
-    // not support attaching editors on text areas within iframes.
+
     return $('#' + field_id).get(0);
   }
 
-  /**
-   * Changes the text editor on a text area.
-   *
-   * @param {HTMLElement} field
-   *   The text area DOM element.
-   * @param {string} newFormatID
-   *   The text format we're changing to; the text editor for the currently
-   *   active text format will be detached, and the text editor for the new text
-   *   format will be attached.
-   */
   function changeTextEditor(field, newFormatID) {
     var previousFormatID = field.getAttribute('data-editor-active-text-format');
 
-    // Detach the current editor (if any) and attach a new editor.
     if (drupalSettings.editor.formats[previousFormatID]) {
       Drupal.editorDetach(field, drupalSettings.editor.formats[previousFormatID]);
-    }
-    // When no text editor is currently active, stop tracking changes.
-    else {
-      $(field).off('.editor');
-    }
+    } else {
+        $(field).off('.editor');
+      }
 
-    // Attach the new text editor (if any).
     if (drupalSettings.editor.formats[newFormatID]) {
       var format = drupalSettings.editor.formats[newFormatID];
       filterXssWhenSwitching(field, format, previousFormatID, Drupal.editorAttach);
     }
 
-    // Store the new active format.
     field.setAttribute('data-editor-active-text-format', newFormatID);
   }
 
-  /**
-   * Handles changes in text format.
-   *
-   * @param {jQuery.Event} event
-   *   The text format change event.
-   */
   function onTextFormatChange(event) {
     var $select = $(event.target);
     var field = event.data.field;
     var activeFormatID = field.getAttribute('data-editor-active-text-format');
     var newFormatID = $select.val();
 
-    // Prevent double-attaching if the change event is triggered manually.
     if (newFormatID === activeFormatID) {
       return;
     }
 
-    // When changing to a text format that has a text editor associated
-    // with it that supports content filtering, then first ask for
-    // confirmation, because switching text formats might cause certain
-    // markup to be stripped away.
     var supportContentFiltering = drupalSettings.editor.formats[newFormatID] && drupalSettings.editor.formats[newFormatID].editorSupportsContentFiltering;
-    // If there is no content yet, it's always safe to change the text format.
+
     var hasContent = field.value !== '';
     if (hasContent && supportContentFiltering) {
       var message = Drupal.t('Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.', {
@@ -87,68 +52,42 @@
         title: Drupal.t('Change text format?'),
         dialogClass: 'editor-change-text-format-modal',
         resizable: false,
-        buttons: [
-          {
-            text: Drupal.t('Continue'),
-            class: 'button button--primary',
-            click: function () {
-              changeTextEditor(field, newFormatID);
-              confirmationDialog.close();
-            }
-          },
-          {
-            text: Drupal.t('Cancel'),
-            class: 'button',
-            click: function () {
-              // Restore the active format ID: cancel changing text format. We
-              // cannot simply call event.preventDefault() because jQuery's
-              // change event is only triggered after the change has already
-              // been accepted.
-              $select.val(activeFormatID);
-              confirmationDialog.close();
-            }
+        buttons: [{
+          text: Drupal.t('Continue'),
+          class: 'button button--primary',
+          click: function click() {
+            changeTextEditor(field, newFormatID);
+            confirmationDialog.close();
+          }
+        }, {
+          text: Drupal.t('Cancel'),
+          class: 'button',
+          click: function click() {
+            $select.val(activeFormatID);
+            confirmationDialog.close();
           }
-        ],
-        // Prevent this modal from being closed without the user making a choice
-        // as per http://stackoverflow.com/a/5438771.
+        }],
+
         closeOnEscape: false,
-        create: function () {
+        create: function create() {
           $(this).parent().find('.ui-dialog-titlebar-close').remove();
         },
         beforeClose: false,
-        close: function (event) {
-          // Automatically destroy the DOM element that was used for the dialog.
+        close: function close(event) {
           $(event.target).remove();
         }
       });
 
       confirmationDialog.showModal();
-    }
-    else {
+    } else {
       changeTextEditor(field, newFormatID);
     }
   }
 
-  /**
-   * Initialize an empty object for editors to place their attachment code.
-   *
-   * @namespace
-   */
   Drupal.editors = {};
 
-  /**
-   * Enables editors on text_format elements.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches an editor to an input element.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches an editor from an input element.
-   */
   Drupal.behaviors.editor = {
-    attach: function (context, settings) {
-      // If there are no editor settings, there are no editors to enable.
+    attach: function attach(context, settings) {
       if (!settings.editor) {
         return;
       }
@@ -157,41 +96,32 @@
         var $this = $(this);
         var field = findFieldForFormatSelector($this);
 
-        // Opt-out if no supported text area was found.
         if (!field) {
           return;
         }
 
-        // Store the current active format.
         var activeFormatID = $this.val();
         field.setAttribute('data-editor-active-text-format', activeFormatID);
 
-        // Directly attach this text editor, if the text format is enabled.
         if (settings.editor.formats[activeFormatID]) {
-          // XSS protection for the current text format/editor is performed on
-          // the server side, so we don't need to do anything special here.
           Drupal.editorAttach(field, settings.editor.formats[activeFormatID]);
         }
-        // When there is no text editor for this text format, still track
-        // changes, because the user has the ability to switch to some text
-        // editor, otherwise this code would not be executed.
+
         $(field).on('change.editor keypress.editor', function () {
           field.setAttribute('data-editor-value-is-changed', 'true');
-          // Just knowing that the value was changed is enough, stop tracking.
+
           $(field).off('.editor');
         });
 
-        // Attach onChange handler to text format selector element.
         if ($this.is('select')) {
-          $this.on('change.editorAttach', {field: field}, onTextFormatChange);
+          $this.on('change.editorAttach', { field: field }, onTextFormatChange);
         }
-        // Detach any editor when the containing form is submitted.
+
         $this.parents('form').on('submit', function (event) {
-          // Do not detach if the event was canceled.
           if (event.isDefaultPrevented()) {
             return;
           }
-          // Detach the current editor (if any).
+
           if (settings.editor.formats[activeFormatID]) {
             Drupal.editorDetach(field, settings.editor.formats[activeFormatID], 'serialize');
           }
@@ -199,16 +129,12 @@
       });
     },
 
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       var editors;
-      // The 'serialize' trigger indicates that we should simply update the
-      // underlying element with the new text, without destroying the editor.
+
       if (trigger === 'serialize') {
-        // Removing the editor-processed class guarantees that the editor will
-        // be reattached. Only do this if we're planning to destroy the editor.
         editors = $(context).find('[data-editor-for]').findOnce('editor');
-      }
-      else {
+      } else {
         editors = $(context).find('[data-editor-for]').removeOnce('editor');
       }
 
@@ -223,96 +149,47 @@
     }
   };
 
-  /**
-   * Attaches editor behaviors to the field.
-   *
-   * @param {HTMLElement} field
-   *   The textarea DOM element.
-   * @param {object} format
-   *   The text format that's being activated, from
-   *   drupalSettings.editor.formats.
-   *
-   * @listens event:change
-   *
-   * @fires event:formUpdated
-   */
   Drupal.editorAttach = function (field, format) {
     if (format.editor) {
-      // Attach the text editor.
       Drupal.editors[format.editor].attach(field, format);
 
-      // Ensures form.js' 'formUpdated' event is triggered even for changes that
-      // happen within the text editor.
       Drupal.editors[format.editor].onChange(field, function () {
         $(field).trigger('formUpdated');
 
-        // Keep track of changes, so we know what to do when switching text
-        // formats and guaranteeing XSS protection.
         field.setAttribute('data-editor-value-is-changed', 'true');
       });
     }
   };
 
-  /**
-   * Detaches editor behaviors from the field.
-   *
-   * @param {HTMLElement} field
-   *   The textarea DOM element.
-   * @param {object} format
-   *   The text format that's being activated, from
-   *   drupalSettings.editor.formats.
-   * @param {string} trigger
-   *   Trigger value from the detach behavior.
-   */
   Drupal.editorDetach = function (field, format, trigger) {
     if (format.editor) {
       Drupal.editors[format.editor].detach(field, format, trigger);
 
-      // Restore the original value if the user didn't make any changes yet.
       if (field.getAttribute('data-editor-value-is-changed') === 'false') {
         field.value = field.getAttribute('data-editor-value-original');
       }
     }
   };
 
-  /**
-   * Filter away XSS attack vectors when switching text formats.
-   *
-   * @param {HTMLElement} field
-   *   The textarea DOM element.
-   * @param {object} format
-   *   The text format that's being activated, from
-   *   drupalSettings.editor.formats.
-   * @param {string} originalFormatID
-   *   The text format ID of the original text format.
-   * @param {function} callback
-   *   A callback to be called (with no parameters) after the field's value has
-   *   been XSS filtered.
-   */
   function filterXssWhenSwitching(field, format, originalFormatID, callback) {
-    // A text editor that already is XSS-safe needs no additional measures.
     if (format.editor.isXssSafe) {
       callback(field, format);
-    }
-    // Otherwise, ensure XSS safety: let the server XSS filter this value.
-    else {
-      $.ajax({
-        url: Drupal.url('editor/filter_xss/' + format.format),
-        type: 'POST',
-        data: {
-          value: field.value,
-          original_format_id: originalFormatID
-        },
-        dataType: 'json',
-        success: function (xssFilteredValue) {
-          // If the server returns false, then no XSS filtering is needed.
-          if (xssFilteredValue !== false) {
-            field.value = xssFilteredValue;
+    } else {
+        $.ajax({
+          url: Drupal.url('editor/filter_xss/' + format.format),
+          type: 'POST',
+          data: {
+            value: field.value,
+            original_format_id: originalFormatID
+          },
+          dataType: 'json',
+          success: function success(xssFilteredValue) {
+            if (xssFilteredValue !== false) {
+              field.value = xssFilteredValue;
+            }
+            callback(field, format);
           }
-          callback(field, format);
-        }
-      });
-    }
+        });
+      }
   }
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/field_ui/field_ui.js b/core/modules/field_ui/field_ui.es6.js
similarity index 100%
copy from core/modules/field_ui/field_ui.js
copy to core/modules/field_ui/field_ui.es6.js
diff --git a/core/modules/field_ui/field_ui.js b/core/modules/field_ui/field_ui.js
index 30e983a143..6082028834 100644
--- a/core/modules/field_ui/field_ui.js
+++ b/core/modules/field_ui/field_ui.js
@@ -1,55 +1,34 @@
 /**
- * @file
- * Attaches the behaviors for the Field UI module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/field_ui/field_ui.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Adds behaviors to the field storage add form.
-   */
   Drupal.behaviors.fieldUIFieldStorageAddForm = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $form = $(context).find('[data-drupal-selector="field-ui-field-storage-add-form"]').once('field_ui_add');
       if ($form.length) {
-        // Add a few 'js-form-required' and 'form-required' css classes here.
-        // We can not use the Form API '#required' property because both label
-        // elements for "add new" and "re-use existing" can never be filled and
-        // submitted at the same time. The actual validation will happen
-        // server-side.
-        $form.find(
-          '.js-form-item-label label,' +
-          '.js-form-item-field-name label,' +
-          '.js-form-item-existing-storage-label label')
-          .addClass('js-form-required form-required');
+        $form.find('.js-form-item-label label,' + '.js-form-item-field-name label,' + '.js-form-item-existing-storage-label label').addClass('js-form-required form-required');
 
         var $newFieldType = $form.find('select[name="new_storage_type"]');
         var $existingStorageName = $form.find('select[name="existing_storage_name"]');
         var $existingStorageLabel = $form.find('input[name="existing_storage_label"]');
 
-        // When the user selects a new field type, clear the "existing field"
-        // selection.
         $newFieldType.on('change', function () {
           if ($(this).val() !== '') {
-            // Reset the "existing storage name" selection.
             $existingStorageName.val('').trigger('change');
           }
         });
 
-        // When the user selects an existing storage name, clear the "new field
-        // type" selection and populate the 'existing_storage_label' element.
         $existingStorageName.on('change', function () {
           var value = $(this).val();
           if (value !== '') {
-            // Reset the "new field type" selection.
             $newFieldType.val('').trigger('change');
 
-            // Pre-populate the "existing storage label" element.
             if (typeof drupalSettings.existingFieldLabels[value] !== 'undefined') {
               $existingStorageLabel.val(drupalSettings.existingFieldLabels[value]);
             }
@@ -59,68 +38,34 @@
     }
   };
 
-  /**
-   * Attaches the fieldUIOverview behavior.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the fieldUIOverview behavior.
-   *
-   * @see Drupal.fieldUIOverview.attach
-   */
   Drupal.behaviors.fieldUIDisplayOverview = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       $(context).find('table#field-display-overview').once('field-display-overview').each(function () {
         Drupal.fieldUIOverview.attach(this, settings.fieldUIRowsData, Drupal.fieldUIDisplayOverview);
       });
     }
   };
 
-  /**
-   * Namespace for the field UI overview.
-   *
-   * @namespace
-   */
   Drupal.fieldUIOverview = {
-
-    /**
-     * Attaches the fieldUIOverview behavior.
-     *
-     * @param {HTMLTableElement} table
-     *   The table element for the overview.
-     * @param {object} rowsData
-     *   The data of the rows in the table.
-     * @param {object} rowHandlers
-     *   Handlers to be added to the rows.
-     */
-    attach: function (table, rowsData, rowHandlers) {
+    attach: function attach(table, rowsData, rowHandlers) {
       var tableDrag = Drupal.tableDrag[table.id];
 
-      // Add custom tabledrag callbacks.
       tableDrag.onDrop = this.onDrop;
       tableDrag.row.prototype.onSwap = this.onSwap;
 
-      // Create row handlers.
       $(table).find('tr.draggable').each(function () {
-        // Extract server-side data for the row.
         var row = this;
         if (row.id in rowsData) {
           var data = rowsData[row.id];
           data.tableDrag = tableDrag;
 
-          // Create the row handler, make it accessible from the DOM row
-          // element.
           var rowHandler = new rowHandlers[data.rowHandler](row, data);
           $(row).data('fieldUIRowHandler', rowHandler);
         }
       });
     },
 
-    /**
-     * Event handler to be attached to form inputs triggering a region change.
-     */
-    onChange: function () {
+    onChange: function onChange() {
       var $trigger = $(this);
       var $row = $trigger.closest('tr');
       var rowHandler = $row.data('fieldUIRowHandler');
@@ -128,25 +73,19 @@
       var refreshRows = {};
       refreshRows[rowHandler.name] = $trigger.get(0);
 
-      // Handle region change.
       var region = rowHandler.getRegion();
       if (region !== rowHandler.region) {
-        // Remove parenting.
         $row.find('select.js-field-parent').val('');
-        // Let the row handler deal with the region change.
+
         $.extend(refreshRows, rowHandler.regionChange(region));
-        // Update the row region.
+
         rowHandler.region = region;
       }
 
-      // Ajax-update the rows.
       Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
     },
 
-    /**
-     * Lets row handlers react when a row is dropped into a new region.
-     */
-    onDrop: function () {
+    onDrop: function onDrop() {
       var dragObject = this;
       var row = dragObject.rowObject.element;
       var $row = $(row);
@@ -156,63 +95,35 @@
         var region = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
 
         if (region !== rowHandler.region) {
-          // Let the row handler deal with the region change.
           var refreshRows = rowHandler.regionChange(region);
-          // Update the row region.
+
           rowHandler.region = region;
-          // Ajax-update the rows.
+
           Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
         }
       }
     },
 
-    /**
-     * Refreshes placeholder rows in empty regions while a row is being dragged.
-     *
-     * Copied from block.js.
-     *
-     * @param {HTMLElement} draggedRow
-     *   The tableDrag rowObject for the row being dragged.
-     */
-    onSwap: function (draggedRow) {
+    onSwap: function onSwap(draggedRow) {
       var rowObject = this;
       $(rowObject.table).find('tr.region-message').each(function () {
         var $this = $(this);
-        // If the dragged row is in this region, but above the message row, swap
-        // it down one space.
+
         if ($this.prev('tr').get(0) === rowObject.group[rowObject.group.length - 1]) {
-          // Prevent a recursion problem when using the keyboard to move rows
-          // up.
-          if ((rowObject.method !== 'keyboard' || rowObject.direction === 'down')) {
+          if (rowObject.method !== 'keyboard' || rowObject.direction === 'down') {
             rowObject.swap('after', this);
           }
         }
-        // This region has become empty.
+
         if ($this.next('tr').is(':not(.draggable)') || $this.next('tr').length === 0) {
           $this.removeClass('region-populated').addClass('region-empty');
-        }
-        // This region has become populated.
-        else if ($this.is('.region-empty')) {
-          $this.removeClass('region-empty').addClass('region-populated');
-        }
+        } else if ($this.is('.region-empty')) {
+            $this.removeClass('region-empty').addClass('region-populated');
+          }
       });
     },
 
-    /**
-     * Triggers Ajax refresh of selected rows.
-     *
-     * The 'format type' selects can trigger a series of changes in child rows.
-     * The #ajax behavior is therefore not attached directly to the selects, but
-     * triggered manually through a hidden #ajax 'Refresh' button.
-     *
-     * @param {object} rows
-     *   A hash object, whose keys are the names of the rows to refresh (they
-     *   will receive the 'ajax-new-content' effect on the server side), and
-     *   whose values are the DOM element in the row that should get an Ajax
-     *   throbber.
-     */
-    AJAXRefreshRows: function (rows) {
-      // Separate keys and values.
+    AJAXRefreshRows: function AJAXRefreshRows(rows) {
       var rowNames = [];
       var ajaxElements = [];
       var rowName;
@@ -224,42 +135,18 @@
       }
 
       if (rowNames.length) {
-        // Add a throbber next each of the ajaxElements.
         $(ajaxElements).after('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
 
-        // Fire the Ajax update.
         $('input[name=refresh_rows]').val(rowNames.join(' '));
         $('input[data-drupal-selector="edit-refresh"]').trigger('mousedown');
 
-        // Disabled elements do not appear in POST ajax data, so we mark the
-        // elements disabled only after firing the request.
         $(ajaxElements).prop('disabled', true);
       }
     }
   };
 
-  /**
-   * Row handlers for the 'Manage display' screen.
-   *
-   * @namespace
-   */
   Drupal.fieldUIDisplayOverview = {};
 
-  /**
-   * Constructor for a 'field' row handler.
-   *
-   * This handler is used for both fields and 'extra fields' rows.
-   *
-   * @constructor
-   *
-   * @param {HTMLTableRowElement} row
-   *   The row DOM element.
-   * @param {object} data
-   *   Additional data to be populated in the constructed object.
-   *
-   * @return {Drupal.fieldUIDisplayOverview.field}
-   *   The field row handler constructed.
-   */
   Drupal.fieldUIDisplayOverview.field = function (row, data) {
     this.row = row;
     this.name = data.name;
@@ -267,11 +154,9 @@
     this.tableDrag = data.tableDrag;
     this.defaultPlugin = data.defaultPlugin;
 
-    // Attach change listener to the 'plugin type' select.
     this.$pluginSelect = $(row).find('.field-plugin-type');
     this.$pluginSelect.on('change', Drupal.fieldUIOverview.onChange);
 
-    // Attach change listener to the 'region' select.
     this.$regionSelect = $(row).find('select.field-region');
     this.$regionSelect.on('change', Drupal.fieldUIOverview.onChange);
 
@@ -279,47 +164,16 @@
   };
 
   Drupal.fieldUIDisplayOverview.field.prototype = {
-
-    /**
-     * Returns the region corresponding to the current form values of the row.
-     *
-     * @return {string}
-     *   Either 'hidden' or 'content'.
-     */
-    getRegion: function () {
+    getRegion: function getRegion() {
       return this.$regionSelect.val();
     },
 
-    /**
-     * Reacts to a row being changed regions.
-     *
-     * This function is called when the row is moved to a different region, as
-     * a
-     * result of either :
-     * - a drag-and-drop action (the row's form elements then probably need to
-     * be updated accordingly)
-     * - user input in one of the form elements watched by the
-     *   {@link Drupal.fieldUIOverview.onChange} change listener.
-     *
-     * @param {string} region
-     *   The name of the new region for the row.
-     *
-     * @return {object}
-     *   A hash object indicating which rows should be Ajax-updated as a result
-     *   of the change, in the format expected by
-     *   {@link Drupal.fieldUIOverview.AJAXRefreshRows}.
-     */
-    regionChange: function (region) {
-      // Replace dashes with underscores.
+    regionChange: function regionChange(region) {
       region = region.replace(/-/g, '_');
 
-      // Set the region of the select list.
       this.$regionSelect.val(region);
 
-      // Restore the formatter back to the default formatter. Pseudo-fields
-      // do not have default formatters, we just return to 'visible' for
-      // those.
-      var value = (typeof this.defaultPlugin !== 'undefined') ? this.defaultPlugin : this.$pluginSelect.find('option').val();
+      var value = typeof this.defaultPlugin !== 'undefined' ? this.defaultPlugin : this.$pluginSelect.find('option').val();
 
       if (typeof value !== 'undefined') {
         this.$pluginSelect.val(value);
@@ -331,5 +185,4 @@
       return refreshRows;
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/file/file.js b/core/modules/file/file.es6.js
similarity index 100%
copy from core/modules/file/file.js
copy to core/modules/file/file.es6.js
diff --git a/core/modules/file/file.js b/core/modules/file/file.js
index 8ed377eec3..f1c8e9158d 100644
--- a/core/modules/file/file.js
+++ b/core/modules/file/file.js
@@ -1,35 +1,20 @@
 /**
- * @file
- * Provides JavaScript additions to the managed file field type.
- *
- * This file provides progress bar support (if available), popup windows for
- * file previews, and disabling of other file fields during Ajax uploads (which
- * prevents separate file fields from accidentally uploading files).
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/file/file.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Attach behaviors to the file fields passed in the settings.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches validation for file extensions.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches validation for file extensions.
-   */
   Drupal.behaviors.fileValidateAutoAttach = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $context = $(context);
       var elements;
 
       function initFileValidation(selector) {
-        $context.find(selector)
-          .once('fileValidate')
-          .on('change.fileValidate', {extensions: elements[selector]}, Drupal.file.validateExtension);
+        $context.find(selector).once('fileValidate').on('change.fileValidate', { extensions: elements[selector] }, Drupal.file.validateExtension);
       }
 
       if (settings.file && settings.file.elements) {
@@ -37,14 +22,12 @@
         Object.keys(elements).forEach(initFileValidation);
       }
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       var $context = $(context);
       var elements;
 
       function removeFileValidation(selector) {
-        $context.find(selector)
-          .removeOnce('fileValidate')
-          .off('change.fileValidate', Drupal.file.validateExtension);
+        $context.find(selector).removeOnce('fileValidate').off('change.fileValidate', Drupal.file.validateExtension);
       }
 
       if (trigger === 'unload' && settings.file && settings.file.elements) {
@@ -54,156 +37,77 @@
     }
   };
 
-  /**
-   * Attach behaviors to file element auto upload.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches triggers for the upload button.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches auto file upload trigger.
-   */
   Drupal.behaviors.fileAutoUpload = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('input[type="file"]').once('auto-file-upload').on('change.autoFileUpload', Drupal.file.triggerUploadButton);
     },
-    detach: function (context, setting, trigger) {
+    detach: function detach(context, setting, trigger) {
       if (trigger === 'unload') {
         $(context).find('input[type="file"]').removeOnce('auto-file-upload').off('.autoFileUpload');
       }
     }
   };
 
-  /**
-   * Attach behaviors to the file upload and remove buttons.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches form submit events.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches form submit events.
-   */
   Drupal.behaviors.fileButtons = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       $context.find('.js-form-submit').on('mousedown', Drupal.file.disableFields);
       $context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar);
     },
-    detach: function (context) {
+    detach: function detach(context) {
       var $context = $(context);
       $context.find('.js-form-submit').off('mousedown', Drupal.file.disableFields);
       $context.find('.js-form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar);
     }
   };
 
-  /**
-   * Attach behaviors to links within managed file elements for preview windows.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches triggers.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches triggers.
-   */
   Drupal.behaviors.filePreviewLinks = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('div.js-form-managed-file .file a').on('click', Drupal.file.openInNewWindow);
     },
-    detach: function (context) {
+    detach: function detach(context) {
       $(context).find('div.js-form-managed-file .file a').off('click', Drupal.file.openInNewWindow);
     }
   };
 
-  /**
-   * File upload utility functions.
-   *
-   * @namespace
-   */
   Drupal.file = Drupal.file || {
-
-    /**
-     * Client-side file input validation of file extensions.
-     *
-     * @name Drupal.file.validateExtension
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered. For example `change.fileValidate`.
-     */
-    validateExtension: function (event) {
+    validateExtension: function validateExtension(event) {
       event.preventDefault();
-      // Remove any previous errors.
+
       $('.file-upload-js-error').remove();
 
-      // Add client side validation for the input[type=file].
       var extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
       if (extensionPattern.length > 1 && this.value.length > 0) {
         var acceptableMatch = new RegExp('\\.(' + extensionPattern + ')$', 'gi');
         if (!acceptableMatch.test(this.value)) {
           var error = Drupal.t('The selected file %filename cannot be uploaded. Only files with the following extensions are allowed: %extensions.', {
-            // According to the specifications of HTML5, a file upload control
-            // should not reveal the real local path to the file that a user
-            // has selected. Some web browsers implement this restriction by
-            // replacing the local path with "C:\fakepath\", which can cause
-            // confusion by leaving the user thinking perhaps Drupal could not
-            // find the file because it messed up the file path. To avoid this
-            // confusion, therefore, we strip out the bogus fakepath string.
             '%filename': this.value.replace('C:\\fakepath\\', ''),
             '%extensions': extensionPattern.replace(/\|/g, ', ')
           });
           $(this).closest('div.js-form-managed-file').prepend('<div class="messages messages--error file-upload-js-error" aria-live="polite">' + error + '</div>');
           this.value = '';
-          // Cancel all other change event handlers.
+
           event.stopImmediatePropagation();
         }
       }
     },
 
-    /**
-     * Trigger the upload_button mouse event to auto-upload as a managed file.
-     *
-     * @name Drupal.file.triggerUploadButton
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered. For example `change.autoFileUpload`.
-     */
-    triggerUploadButton: function (event) {
+    triggerUploadButton: function triggerUploadButton(event) {
       $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown');
     },
 
-    /**
-     * Prevent file uploads when using buttons not intended to upload.
-     *
-     * @name Drupal.file.disableFields
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered, most likely a `mousedown` event.
-     */
-    disableFields: function (event) {
+    disableFields: function disableFields(event) {
       var $clickedButton = $(this).findOnce('ajax');
 
-      // Only disable upload fields for Ajax buttons.
       if (!$clickedButton.length) {
         return;
       }
 
-      // Check if we're working with an "Upload" button.
       var $enabledFields = [];
       if ($clickedButton.closest('div.js-form-managed-file').length > 0) {
         $enabledFields = $clickedButton.closest('div.js-form-managed-file').find('input.js-form-file');
       }
 
-      // Temporarily disable upload fields other than the one we're currently
-      // working with. Filter out fields that are already disabled so that they
-      // do not get enabled when we re-enable these fields at the end of
-      // behavior processing. Re-enable in a setTimeout set to a relatively
-      // short amount of time (1 second). All the other mousedown handlers
-      // (like Drupal's Ajax behaviors) are executed before any timeout
-      // functions are called, so we don't have to worry about the fields being
-      // re-enabled too soon. @todo If the previous sentence is true, why not
-      // set the timeout to 0?
       var $fieldsToTemporarilyDisable = $('div.js-form-managed-file input.js-form-file').not($enabledFields).not(':disabled');
       $fieldsToTemporarilyDisable.prop('disabled', true);
       setTimeout(function () {
@@ -211,47 +115,28 @@
       }, 1000);
     },
 
-    /**
-     * Add progress bar support if possible.
-     *
-     * @name Drupal.file.progressBar
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered, most likely a `mousedown` event.
-     */
-    progressBar: function (event) {
+    progressBar: function progressBar(event) {
       var $clickedButton = $(this);
       var $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress');
       if ($progressId.length) {
         var originalName = $progressId.attr('name');
 
-        // Replace the name with the required identifier.
         $progressId.attr('name', originalName.match(/APC_UPLOAD_PROGRESS|UPLOAD_IDENTIFIER/)[0]);
 
-        // Restore the original name after the upload begins.
         setTimeout(function () {
           $progressId.attr('name', originalName);
         }, 1000);
       }
-      // Show the progress bar if the upload takes longer than half a second.
+
       setTimeout(function () {
         $clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown();
       }, 500);
     },
 
-    /**
-     * Open links to files within forms in a new window.
-     *
-     * @name Drupal.file.openInNewWindow
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered, most likely a `click` event.
-     */
-    openInNewWindow: function (event) {
+    openInNewWindow: function openInNewWindow(event) {
       event.preventDefault();
       $(this).attr('target', '_blank');
       window.open(this.href, 'filePreview', 'toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width=500,height=550');
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/filter/filter.admin.js b/core/modules/filter/filter.admin.es6.js
similarity index 100%
copy from core/modules/filter/filter.admin.js
copy to core/modules/filter/filter.admin.es6.js
diff --git a/core/modules/filter/filter.admin.js b/core/modules/filter/filter.admin.js
index 31e0582c18..9e04abb000 100644
--- a/core/modules/filter/filter.admin.js
+++ b/core/modules/filter/filter.admin.js
@@ -1,69 +1,52 @@
 /**
- * @file
- * Attaches administration-specific behavior for the Filter module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/filter/filter.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Displays and updates the status of filters on the admin page.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behaviors to the filter admin view.
-   */
   Drupal.behaviors.filterStatus = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $context = $(context);
       $context.find('#filters-status-wrapper input.form-checkbox').once('filter-status').each(function () {
         var $checkbox = $(this);
-        // Retrieve the tabledrag row belonging to this filter.
+
         var $row = $context.find('#' + $checkbox.attr('id').replace(/-status$/, '-weight')).closest('tr');
-        // Retrieve the vertical tab belonging to this filter.
+
         var $filterSettings = $context.find('#' + $checkbox.attr('id').replace(/-status$/, '-settings'));
         var filterSettingsTab = $filterSettings.data('verticalTab');
 
-        // Bind click handler to this checkbox to conditionally show and hide
-        // the filter's tableDrag row and vertical tab pane.
         $checkbox.on('click.filterUpdate', function () {
           if ($checkbox.is(':checked')) {
             $row.show();
             if (filterSettingsTab) {
               filterSettingsTab.tabShow().updateSummary();
-            }
-            else {
-              // On very narrow viewports, Vertical Tabs are disabled.
+            } else {
               $filterSettings.show();
             }
-          }
-          else {
+          } else {
             $row.hide();
             if (filterSettingsTab) {
               filterSettingsTab.tabHide().updateSummary();
-            }
-            else {
-              // On very narrow viewports, Vertical Tabs are disabled.
+            } else {
               $filterSettings.hide();
             }
           }
-          // Restripe table after toggling visibility of table row.
+
           Drupal.tableDrag['filter-order'].restripeTable();
         });
 
-        // Attach summary for configurable filters (only for screen readers).
         if (filterSettingsTab) {
           filterSettingsTab.details.drupalSetSummary(function (tabContext) {
             return $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled');
           });
         }
 
-        // Trigger our bound click handler to update elements to initial state.
         $checkbox.triggerHandler('click.filterUpdate');
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/filter/filter.js b/core/modules/filter/filter.es6.js
similarity index 100%
copy from core/modules/filter/filter.js
copy to core/modules/filter/filter.es6.js
diff --git a/core/modules/filter/filter.filter_html.admin.js b/core/modules/filter/filter.filter_html.admin.es6.js
similarity index 100%
copy from core/modules/filter/filter.filter_html.admin.js
copy to core/modules/filter/filter.filter_html.admin.es6.js
diff --git a/core/modules/filter/filter.filter_html.admin.js b/core/modules/filter/filter.filter_html.admin.js
index 7ddca90bba..bd5c1f644c 100644
--- a/core/modules/filter/filter.filter_html.admin.js
+++ b/core/modules/filter/filter.filter_html.admin.js
@@ -1,32 +1,19 @@
 /**
- * @file
- * Attaches behavior for updating filter_html's settings automatically.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/filter/filter.filter_html.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, _, document) {
 
   'use strict';
 
   if (Drupal.filterConfiguration) {
-
-    /**
-     * Implement a live setting parser to prevent text editors from automatically
-     * enabling buttons that are not allowed by this filter's configuration.
-     *
-     * @namespace
-     */
     Drupal.filterConfiguration.liveSettingParsers.filter_html = {
-
-      /**
-       * @return {Array}
-       *   An array of filter rules.
-       */
-      getRules: function () {
+      getRules: function getRules() {
         var currentValue = $('#edit-filters-filter-html-settings-allowed-html').val();
         var rules = Drupal.behaviors.filterFilterHtmlUpdating._parseSetting(currentValue);
 
-        // Build a FilterHTMLRule that reflects the hard-coded behavior that
-        // strips all "style" attribute and all "on*" attributes.
         var rule = new Drupal.FilterHTMLRule();
         rule.restrictedTags.tags = ['*'];
         rule.restrictedTags.forbidden.attributes = ['style', 'on*'];
@@ -37,116 +24,67 @@
     };
   }
 
-  /**
-   * Displays and updates what HTML tags are allowed to use in a filter.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @todo Remove everything but 'attach' and 'detach' and make a proper object.
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for updating allowed HTML tags.
-   */
   Drupal.behaviors.filterFilterHtmlUpdating = {
-
-    // The form item contains the "Allowed HTML tags" setting.
     $allowedHTMLFormItem: null,
 
-    // The description for the "Allowed HTML tags" field.
     $allowedHTMLDescription: null,
 
-    /**
-     * The parsed, user-entered tag list of $allowedHTMLFormItem
-     *
-     * @var {Object.<string, Drupal.FilterHTMLRule>}
-     */
     userTags: {},
 
-    // The auto-created tag list thus far added.
     autoTags: null,
 
-    // Track which new features have been added to the text editor.
     newFeatures: {},
 
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var that = this;
       $(context).find('[name="filters[filter_html][settings][allowed_html]"]').once('filter-filter_html-updating').each(function () {
         that.$allowedHTMLFormItem = $(this);
         that.$allowedHTMLDescription = that.$allowedHTMLFormItem.closest('.js-form-item').find('.description');
         that.userTags = that._parseSetting(this.value);
 
-        // Update the new allowed tags based on added text editor features.
-        $(document)
-          .on('drupalEditorFeatureAdded', function (e, feature) {
+        $(document).on('drupalEditorFeatureAdded', function (e, feature) {
+          that.newFeatures[feature.name] = feature.rules;
+          that._updateAllowedTags();
+        }).on('drupalEditorFeatureModified', function (e, feature) {
+          if (that.newFeatures.hasOwnProperty(feature.name)) {
             that.newFeatures[feature.name] = feature.rules;
             that._updateAllowedTags();
-          })
-          .on('drupalEditorFeatureModified', function (e, feature) {
-            if (that.newFeatures.hasOwnProperty(feature.name)) {
-              that.newFeatures[feature.name] = feature.rules;
-              that._updateAllowedTags();
-            }
-          })
-          .on('drupalEditorFeatureRemoved', function (e, feature) {
-            if (that.newFeatures.hasOwnProperty(feature.name)) {
-              delete that.newFeatures[feature.name];
-              that._updateAllowedTags();
-            }
-          });
+          }
+        }).on('drupalEditorFeatureRemoved', function (e, feature) {
+          if (that.newFeatures.hasOwnProperty(feature.name)) {
+            delete that.newFeatures[feature.name];
+            that._updateAllowedTags();
+          }
+        });
 
-        // When the allowed tags list is manually changed, update userTags.
         that.$allowedHTMLFormItem.on('change.updateUserTags', function () {
           that.userTags = _.difference(that._parseSetting(this.value), that.autoTags);
         });
       });
     },
 
-    /**
-     * Updates the "Allowed HTML tags" setting and shows an informative message.
-     */
-    _updateAllowedTags: function () {
-      // Update the list of auto-created tags.
+    _updateAllowedTags: function _updateAllowedTags() {
       this.autoTags = this._calculateAutoAllowedTags(this.userTags, this.newFeatures);
 
-      // Remove any previous auto-created tag message.
       this.$allowedHTMLDescription.find('.editor-update-message').remove();
 
-      // If any auto-created tags: insert message and update form item.
       if (!_.isEmpty(this.autoTags)) {
         this.$allowedHTMLDescription.append(Drupal.theme('filterFilterHTMLUpdateMessage', this.autoTags));
         var userTagsWithoutOverrides = _.omit(this.userTags, _.keys(this.autoTags));
         this.$allowedHTMLFormItem.val(this._generateSetting(userTagsWithoutOverrides) + ' ' + this._generateSetting(this.autoTags));
-      }
-      // Restore to original state.
-      else {
-        this.$allowedHTMLFormItem.val(this._generateSetting(this.userTags));
-      }
+      } else {
+          this.$allowedHTMLFormItem.val(this._generateSetting(this.userTags));
+        }
     },
 
-    /**
-     * Calculates which HTML tags the added text editor buttons need to work.
-     *
-     * The filter_html filter is only concerned with the required tags, not with
-     * any properties, nor with each feature's "allowed" tags.
-     *
-     * @param {Array} userAllowedTags
-     *   The list of user-defined allowed tags.
-     * @param {object} newFeatures
-     *   A list of {@link Drupal.EditorFeature} objects' rules, keyed by
-     *   their name.
-     *
-     * @return {Array}
-     *   A list of new allowed tags.
-     */
-    _calculateAutoAllowedTags: function (userAllowedTags, newFeatures) {
+    _calculateAutoAllowedTags: function _calculateAutoAllowedTags(userAllowedTags, newFeatures) {
       var featureName;
       var feature;
       var featureRule;
       var filterRule;
       var tag;
       var editorRequiredTags = {};
-      // Map the newly added Text Editor features to Drupal.FilterHtmlRule
-      // objects (to allow comparing userTags with autoTags).
+
       for (featureName in newFeatures) {
         if (newFeatures.hasOwnProperty(featureName)) {
           feature = newFeatures[featureName];
@@ -157,79 +95,47 @@
               if (!_.has(editorRequiredTags, tag)) {
                 filterRule = new Drupal.FilterHTMLRule();
                 filterRule.restrictedTags.tags = [tag];
-                // @todo Neither Drupal.FilterHtmlRule nor
-                //   Drupal.EditorFeatureHTMLRule allow for generic attribute
-                //   value restrictions, only for the "class" and "style"
-                //   attribute's values to be restricted. The filter_html filter
-                //   always disallows the "style" attribute, so we only need to
-                //   support "class" attribute value restrictions. Fix once
-                //   https://www.drupal.org/node/2567801 lands.
+
                 filterRule.restrictedTags.allowed.attributes = featureRule.required.attributes.slice(0);
                 filterRule.restrictedTags.allowed.classes = featureRule.required.classes.slice(0);
                 editorRequiredTags[tag] = filterRule;
-              }
-              // The tag is already allowed, add any additionally allowed
-              // attributes.
-              else {
-                filterRule = editorRequiredTags[tag];
-                filterRule.restrictedTags.allowed.attributes = _.union(filterRule.restrictedTags.allowed.attributes, featureRule.required.attributes);
-                filterRule.restrictedTags.allowed.classes = _.union(filterRule.restrictedTags.allowed.classes, featureRule.required.classes);
-              }
+              } else {
+                  filterRule = editorRequiredTags[tag];
+                  filterRule.restrictedTags.allowed.attributes = _.union(filterRule.restrictedTags.allowed.attributes, featureRule.required.attributes);
+                  filterRule.restrictedTags.allowed.classes = _.union(filterRule.restrictedTags.allowed.classes, featureRule.required.classes);
+                }
             }
           }
         }
       }
 
-      // Now compare userAllowedTags with editorRequiredTags, and build
-      // autoAllowedTags, which contains:
-      // - any tags in editorRequiredTags but not in userAllowedTags (i.e. tags
-      //   that are additionally going to be allowed)
-      // - any tags in editorRequiredTags that already exists in userAllowedTags
-      //   but does not allow all attributes or attribute values
       var autoAllowedTags = {};
       for (tag in editorRequiredTags) {
-        // If userAllowedTags does not contain a rule for this editor-required
-        // tag, then add it to the list of automatically allowed tags.
         if (!_.has(userAllowedTags, tag)) {
           autoAllowedTags[tag] = editorRequiredTags[tag];
-        }
-        // Otherwise, if userAllowedTags already allows this tag, then check if
-        // additional attributes and classes on this tag are required by the
-        // editor.
-        else {
-          var requiredAttributes = editorRequiredTags[tag].restrictedTags.allowed.attributes;
-          var allowedAttributes = userAllowedTags[tag].restrictedTags.allowed.attributes;
-          var needsAdditionalAttributes = requiredAttributes.length && _.difference(requiredAttributes, allowedAttributes).length;
-          var requiredClasses = editorRequiredTags[tag].restrictedTags.allowed.classes;
-          var allowedClasses = userAllowedTags[tag].restrictedTags.allowed.classes;
-          var needsAdditionalClasses = requiredClasses.length && _.difference(requiredClasses, allowedClasses).length;
-          if (needsAdditionalAttributes || needsAdditionalClasses) {
-            autoAllowedTags[tag] = userAllowedTags[tag].clone();
-          }
-          if (needsAdditionalAttributes) {
-            autoAllowedTags[tag].restrictedTags.allowed.attributes = _.union(allowedAttributes, requiredAttributes);
-          }
-          if (needsAdditionalClasses) {
-            autoAllowedTags[tag].restrictedTags.allowed.classes = _.union(allowedClasses, requiredClasses);
+        } else {
+            var requiredAttributes = editorRequiredTags[tag].restrictedTags.allowed.attributes;
+            var allowedAttributes = userAllowedTags[tag].restrictedTags.allowed.attributes;
+            var needsAdditionalAttributes = requiredAttributes.length && _.difference(requiredAttributes, allowedAttributes).length;
+            var requiredClasses = editorRequiredTags[tag].restrictedTags.allowed.classes;
+            var allowedClasses = userAllowedTags[tag].restrictedTags.allowed.classes;
+            var needsAdditionalClasses = requiredClasses.length && _.difference(requiredClasses, allowedClasses).length;
+            if (needsAdditionalAttributes || needsAdditionalClasses) {
+              autoAllowedTags[tag] = userAllowedTags[tag].clone();
+            }
+            if (needsAdditionalAttributes) {
+              autoAllowedTags[tag].restrictedTags.allowed.attributes = _.union(allowedAttributes, requiredAttributes);
+            }
+            if (needsAdditionalClasses) {
+              autoAllowedTags[tag].restrictedTags.allowed.classes = _.union(allowedClasses, requiredClasses);
+            }
           }
-        }
       }
 
       return autoAllowedTags;
     },
 
-    /**
-     * Parses the value of this.$allowedHTMLFormItem.
-     *
-     * @param {string} setting
-     *   The string representation of the setting. For example:
-     *     <p class="callout"> <br> <a href hreflang>
-     *
-     * @return {Object.<string, Drupal.FilterHTMLRule>}
-     *   The corresponding text filter HTML rule objects, one per tag, keyed by
-     *   tag name.
-     */
-    _parseSetting: function (setting) {
+    _parseSetting: function _parseSetting(setting) {
       var node;
       var tag;
       var rule;
@@ -239,30 +145,23 @@
       var sandbox = document.createElement('div');
       var rules = {};
       for (var t = 0; t < allowedTags.length; t++) {
-        // Let the browser do the parsing work for us.
         sandbox.innerHTML = allowedTags[t];
         node = sandbox.firstChild;
         tag = node.tagName.toLowerCase();
 
-        // Build the Drupal.FilterHtmlRule object.
         rule = new Drupal.FilterHTMLRule();
-        // We create one rule per allowed tag, so always one tag.
+
         rule.restrictedTags.tags = [tag];
-        // Add the attribute restrictions.
+
         attributes = node.attributes;
         for (var i = 0; i < attributes.length; i++) {
           attribute = attributes.item(i);
           var attributeName = attribute.nodeName;
-          // @todo Drupal.FilterHtmlRule does not allow for generic attribute
-          //   value restrictions, only for the "class" and "style" attribute's
-          //   values. The filter_html filter always disallows the "style"
-          //   attribute, so we only need to support "class" attribute value
-          //   restrictions. Fix once https://www.drupal.org/node/2567801 lands.
+
           if (attributeName === 'class') {
             var attributeValue = attribute.textContent;
             rule.restrictedTags.allowed.classes = attributeValue.split(' ');
-          }
-          else {
+          } else {
             rule.restrictedTags.allowed.attributes.push(attributeName);
           }
         }
@@ -272,16 +171,7 @@
       return rules;
     },
 
-    /**
-     * Generates the value of this.$allowedHTMLFormItem.
-     *
-     * @param {Object.<string, Drupal.FilterHTMLRule>} tags
-     *   The parsed representation of the setting.
-     *
-     * @return {Array}
-     *   The string representation of the setting. e.g. "<p> <br> <a>"
-     */
-    _generateSetting: function (tags) {
+    _generateSetting: function _generateSetting(tags) {
       return _.reduce(tags, function (setting, rule, tag) {
         if (setting.length) {
           setting += ' ';
@@ -291,11 +181,7 @@
         if (rule.restrictedTags.allowed.attributes.length) {
           setting += ' ' + rule.restrictedTags.allowed.attributes.join(' ');
         }
-        // @todo Drupal.FilterHtmlRule does not allow for generic attribute
-        //   value restrictions, only for the "class" and "style" attribute's
-        //   values. The filter_html filter always disallows the "style"
-        //   attribute, so we only need to support "class" attribute value
-        //   restrictions. Fix once https://www.drupal.org/node/2567801 lands.
+
         if (rule.restrictedTags.allowed.classes.length) {
           setting += ' class="' + rule.restrictedTags.allowed.classes.join(' ') + '"';
         }
@@ -307,22 +193,12 @@
 
   };
 
-  /**
-   * Theme function for the filter_html update message.
-   *
-   * @param {Array} tags
-   *   An array of the new tags that are to be allowed.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.filterFilterHTMLUpdateMessage = function (tags) {
     var html = '';
     var tagList = Drupal.behaviors.filterFilterHtmlUpdating._generateSetting(tags);
     html += '<p class="editor-update-message">';
-    html += Drupal.t('Based on the text editor configuration, these tags have automatically been added: <strong>@tag-list</strong>.', {'@tag-list': tagList});
+    html += Drupal.t('Based on the text editor configuration, these tags have automatically been added: <strong>@tag-list</strong>.', { '@tag-list': tagList });
     html += '</p>';
     return html;
   };
-
-})(jQuery, Drupal, _, document);
+})(jQuery, Drupal, _, document);
\ No newline at end of file
diff --git a/core/modules/filter/filter.js b/core/modules/filter/filter.js
index b79104733e..d73f6bdad2 100644
--- a/core/modules/filter/filter.js
+++ b/core/modules/filter/filter.js
@@ -1,39 +1,23 @@
 /**
- * @file
- * Attaches behavior for the Filter module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/filter/filter.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Displays the guidelines of the selected text format automatically.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for updating filter guidelines.
-   */
   Drupal.behaviors.filterGuidelines = {
-    attach: function (context) {
+    attach: function attach(context) {
 
       function updateFilterGuidelines(event) {
         var $this = $(event.target);
         var value = $this.val();
-        $this.closest('.filter-wrapper')
-          .find('.filter-guidelines-item').hide()
-          .filter('.filter-guidelines-' + value).show();
+        $this.closest('.filter-wrapper').find('.filter-guidelines-item').hide().filter('.filter-guidelines-' + value).show();
       }
 
-      $(context).find('.filter-guidelines').once('filter-guidelines')
-        .find(':header').hide()
-        .closest('.filter-wrapper').find('select.filter-list')
-        .on('change.filterGuidelines', updateFilterGuidelines)
-        // Need to trigger the namespaced event to avoid triggering formUpdated
-        // when initializing the select.
-        .trigger('change.filterGuidelines');
+      $(context).find('.filter-guidelines').once('filter-guidelines').find(':header').hide().closest('.filter-wrapper').find('select.filter-list').on('change.filterGuidelines', updateFilterGuidelines).trigger('change.filterGuidelines');
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/history/js/history.js b/core/modules/history/js/history.es6.js
similarity index 100%
copy from core/modules/history/js/history.js
copy to core/modules/history/js/history.es6.js
diff --git a/core/modules/history/js/history.js b/core/modules/history/js/history.js
index 6ce807c074..1bf46f814f 100644
--- a/core/modules/history/js/history.js
+++ b/core/modules/history/js/history.js
@@ -1,9 +1,8 @@
 /**
- * @file
- * JavaScript API for the History module, with client-side caching.
- *
- * May only be loaded for authenticated users, with the History module enabled.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/history/js/history.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, storage) {
 
@@ -11,31 +10,15 @@
 
   var currentUserID = parseInt(drupalSettings.user.uid, 10);
 
-  // Any comment that is older than 30 days is automatically considered read,
-  // so for these we don't need to perform a request at all!
   var thirtyDaysAgo = Math.round(new Date().getTime() / 1000) - 30 * 24 * 60 * 60;
 
-  // Use the data embedded in the page, if available.
   var embeddedLastReadTimestamps = false;
   if (drupalSettings.history && drupalSettings.history.lastReadTimestamps) {
     embeddedLastReadTimestamps = drupalSettings.history.lastReadTimestamps;
   }
 
-  /**
-   * @namespace
-   */
   Drupal.history = {
-
-    /**
-     * Fetch "last read" timestamps for the given nodes.
-     *
-     * @param {Array} nodeIDs
-     *   An array of node IDs.
-     * @param {function} callback
-     *   A callback that is called after the requested timestamps were fetched.
-     */
-    fetchTimestamps: function (nodeIDs, callback) {
-      // Use the data embedded in the page, if available.
+    fetchTimestamps: function fetchTimestamps(nodeIDs, callback) {
       if (embeddedLastReadTimestamps) {
         callback();
         return;
@@ -44,9 +27,9 @@
       $.ajax({
         url: Drupal.url('history/get_node_read_timestamps'),
         type: 'POST',
-        data: {'node_ids[]': nodeIDs},
+        data: { 'node_ids[]': nodeIDs },
         dataType: 'json',
-        success: function (results) {
+        success: function success(results) {
           for (var nodeID in results) {
             if (results.hasOwnProperty(nodeID)) {
               storage.setItem('Drupal.history.' + currentUserID + '.' + nodeID, results[nodeID]);
@@ -57,37 +40,19 @@
       });
     },
 
-    /**
-     * Get the last read timestamp for the given node.
-     *
-     * @param {number|string} nodeID
-     *   A node ID.
-     *
-     * @return {number}
-     *   A UNIX timestamp.
-     */
-    getLastRead: function (nodeID) {
-      // Use the data embedded in the page, if available.
+    getLastRead: function getLastRead(nodeID) {
       if (embeddedLastReadTimestamps && embeddedLastReadTimestamps[nodeID]) {
         return parseInt(embeddedLastReadTimestamps[nodeID], 10);
       }
       return parseInt(storage.getItem('Drupal.history.' + currentUserID + '.' + nodeID) || 0, 10);
     },
 
-    /**
-     * Marks a node as read, store the last read timestamp client-side.
-     *
-     * @param {number|string} nodeID
-     *   A node ID.
-     */
-    markAsRead: function (nodeID) {
+    markAsRead: function markAsRead(nodeID) {
       $.ajax({
         url: Drupal.url('history/' + nodeID + '/read'),
         type: 'POST',
         dataType: 'json',
-        success: function (timestamp) {
-          // If the data is embedded in the page, don't store on the client
-          // side.
+        success: function success(timestamp) {
           if (embeddedLastReadTimestamps && embeddedLastReadTimestamps[nodeID]) {
             return;
           }
@@ -97,31 +62,11 @@
       });
     },
 
-    /**
-     * Determines whether a server check is necessary.
-     *
-     * Any content that is >30 days old never gets a "new" or "updated"
-     * indicator. Any content that was published before the oldest known reading
-     * also never gets a "new" or "updated" indicator, because it must've been
-     * read already.
-     *
-     * @param {number|string} nodeID
-     *   A node ID.
-     * @param {number} contentTimestamp
-     *   The time at which some content (e.g. a comment) was published.
-     *
-     * @return {bool}
-     *   Whether a server check is necessary for the given node and its
-     *   timestamp.
-     */
-    needsServerCheck: function (nodeID, contentTimestamp) {
-      // First check if the content is older than 30 days, then we can bail
-      // early.
+    needsServerCheck: function needsServerCheck(nodeID, contentTimestamp) {
       if (contentTimestamp < thirtyDaysAgo) {
         return false;
       }
 
-      // Use the data embedded in the page, if available.
       if (embeddedLastReadTimestamps && embeddedLastReadTimestamps[nodeID]) {
         return contentTimestamp > parseInt(embeddedLastReadTimestamps[nodeID], 10);
       }
@@ -130,5 +75,4 @@
       return contentTimestamp > minLastReadTimestamp;
     }
   };
-
-})(jQuery, Drupal, drupalSettings, window.localStorage);
+})(jQuery, Drupal, drupalSettings, window.localStorage);
\ No newline at end of file
diff --git a/core/modules/history/js/mark-as-read.js b/core/modules/history/js/mark-as-read.es6.js
similarity index 100%
copy from core/modules/history/js/mark-as-read.js
copy to core/modules/history/js/mark-as-read.es6.js
diff --git a/core/modules/history/js/mark-as-read.js b/core/modules/history/js/mark-as-read.js
index e225401e33..a27f2a5126 100644
--- a/core/modules/history/js/mark-as-read.js
+++ b/core/modules/history/js/mark-as-read.js
@@ -1,23 +1,16 @@
 /**
- * @file
- * Marks the nodes listed in drupalSettings.history.nodesToMarkAsRead as read.
- *
- * Uses the History module JavaScript API.
- *
- * @see Drupal.history
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/history/js/mark-as-read.es6.js
+* @preserve
+**/
 
 (function (window, Drupal, drupalSettings) {
 
   'use strict';
 
-  // When the window's "load" event is triggered, mark all enumerated nodes as
-  // read. This still allows for Drupal behaviors (which are triggered on the
-  // "DOMContentReady" event) to add "new" and "updated" indicators.
   window.addEventListener('load', function () {
     if (drupalSettings.history && drupalSettings.history.nodesToMarkAsRead) {
       Object.keys(drupalSettings.history.nodesToMarkAsRead).forEach(Drupal.history.markAsRead);
     }
   });
-
-})(window, Drupal, drupalSettings);
+})(window, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/image/js/editors/image.js b/core/modules/image/js/editors/image.es6.js
similarity index 100%
copy from core/modules/image/js/editors/image.js
copy to core/modules/image/js/editors/image.es6.js
diff --git a/core/modules/image/js/editors/image.js b/core/modules/image/js/editors/image.js
index dea08df59e..7e76efbd08 100644
--- a/core/modules/image/js/editors/image.js
+++ b/core/modules/image/js/editors/image.js
@@ -1,28 +1,19 @@
 /**
- * @file
- * Drag+drop based in-place editor for images.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/image/js/editors/image.es6.js
+* @preserve
+**/
 
 (function ($, _, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.image# */{
-
-    /**
-     * @constructs
-     *
-     * @augments Drupal.quickedit.EditorView
-     *
-     * @param {object} options
-     *   Options for the image editor.
-     */
-    initialize: function (options) {
+  Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend({
+    initialize: function initialize(options) {
       Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
-      // Set our original value to our current HTML (for reverting).
+
       this.model.set('originalValue', this.$el.html().trim());
-      // $.val() callback function for copying input from our custom form to
-      // the Quick Edit Field Form.
+
       this.model.set('currentValue', function (index, value) {
         var matches = $(this).attr('name').match(/(alt|title)]$/);
         if (matches) {
@@ -36,17 +27,7 @@
       });
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The field model that holds the state.
-     * @param {string} state
-     *   The state to change to.
-     * @param {object} options
-     *   State options, if needed by the state change.
-     */
-    stateChange: function (fieldModel, state, options) {
+    stateChange: function stateChange(fieldModel, state, options) {
       var from = fieldModel.previous('state');
       switch (state) {
         case 'inactive':
@@ -66,8 +47,6 @@
           break;
 
         case 'activating':
-          // Defer updating the field model until the current state change has
-          // propagated, to not trigger a nested state change event.
           _.defer(function () {
             fieldModel.set('state', 'active');
           });
@@ -76,11 +55,8 @@
         case 'active':
           var self = this;
 
-          // Indicate that this element is being edited by Quick Edit Image.
           this.$el.addClass('quickedit-image-element');
 
-          // Render our initial dropzone element. Once the user reverts changes
-          // or saves a new image, this element is removed.
           var $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
 
           $dropzone.on('dragenter', function (e) {
@@ -91,7 +67,6 @@
           });
 
           $dropzone.on('drop', function (e) {
-            // Only respond when a file is dropped (could be another element).
             if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
               $(this).removeClass('hover');
               self.uploadImage(e.originalEvent.dataTransfer.files[0]);
@@ -99,20 +74,13 @@
           });
 
           $dropzone.on('click', function (e) {
-            // Create an <input> element without appending it to the DOM, and
-            // trigger a click event. This is the easiest way to arbitrarily
-            // open the browser's upload dialog.
-            $('<input type="file">')
-              .trigger('click')
-              .on('change', function () {
-                if (this.files.length) {
-                  self.uploadImage(this.files[0]);
-                }
-              });
+            $('<input type="file">').trigger('click').on('change', function () {
+              if (this.files.length) {
+                self.uploadImage(this.files[0]);
+              }
+            });
           });
 
-          // Prevent the browser's default behavior when dragging files onto
-          // the document (usually opens them in the same tab).
           $dropzone.on('dragover dragenter dragleave drop click', function (e) {
             e.preventDefault();
             e.stopPropagation();
@@ -141,77 +109,41 @@
       }
     },
 
-    /**
-     * Validates/uploads a given file.
-     *
-     * @param {File} file
-     *   The file to upload.
-     */
-    uploadImage: function (file) {
-      // Indicate loading by adding a special class to our icon.
-      this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', {'@file': file.name}));
-
-      // Build a valid URL for our endpoint.
+    uploadImage: function uploadImage(file) {
+      this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', { '@file': file.name }));
+
       var fieldID = this.fieldModel.get('fieldID');
       var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
 
-      // Construct form data that our endpoint can consume.
       var data = new FormData();
       data.append('files[image]', file);
 
-      // Construct a POST request to our endpoint.
       var self = this;
       this.ajax({
         type: 'POST',
         url: url,
         data: data,
-        success: function (response) {
+        success: function success(response) {
           var $el = $(self.fieldModel.get('el'));
-          // Indicate that the field has changed - this enables the
-          // "Save" button.
+
           self.fieldModel.set('state', 'changed');
           self.fieldModel.get('entity').set('inTempStore', true);
           self.removeValidationErrors();
 
-          // Replace our html with the new image. If we replaced our entire
-          // element with data.html, we would have to implement complicated logic
-          // like what's in Drupal.quickedit.AppView.renderUpdatedField.
           var $content = $(response.html).closest('[data-quickedit-field-id]').children();
           $el.empty().append($content);
         }
       });
     },
 
-    /**
-     * Utility function to make an AJAX request to the server.
-     *
-     * In addition to formatting the correct request, this also handles error
-     * codes and messages by displaying them visually inline with the image.
-     *
-     * Drupal.ajax is not called here as the Form API is unused by this
-     * in-place editor, and our JSON requests/responses try to be
-     * editor-agnostic. Ideally similar logic and routes could be used by
-     * modules like CKEditor for drag+drop file uploads as well.
-     *
-     * @param {object} options
-     *   Ajax options.
-     * @param {string} options.type
-     *   The type of request (i.e. GET, POST, PUT, DELETE, etc.)
-     * @param {string} options.url
-     *   The URL for the request.
-     * @param {*} options.data
-     *   The data to send to the server.
-     * @param {function} options.success
-     *   A callback function used when a request is successful, without errors.
-     */
-    ajax: function (options) {
+    ajax: function ajax(options) {
       var defaultOptions = {
         context: this,
         dataType: 'json',
         cache: false,
         contentType: false,
         processData: false,
-        error: function () {
+        error: function error() {
           this.renderDropzone('error', Drupal.t('A server error has occurred.'));
         }
       };
@@ -219,7 +151,6 @@
       var ajaxOptions = $.extend(defaultOptions, options);
       var successCallback = ajaxOptions.success;
 
-      // Handle the success callback.
       ajaxOptions.success = function (response) {
         if (response.main_error) {
           this.renderDropzone('error', response.main_error);
@@ -227,8 +158,7 @@
             this.model.set('validationErrors', response.errors);
           }
           this.showValidationErrors();
-        }
-        else {
+        } else {
           successCallback(response);
         }
       };
@@ -236,58 +166,35 @@
       $.ajax(ajaxOptions);
     },
 
-    /**
-     * Renders our toolbar form for editing metadata.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The current Field Model.
-     */
-    renderToolbar: function (fieldModel) {
+    renderToolbar: function renderToolbar(fieldModel) {
       var $toolgroup = $('#' + fieldModel.toolbarView.getMainWysiwygToolgroupId());
       var $toolbar = $toolgroup.find('.quickedit-image-field-info');
       if ($toolbar.length === 0) {
-        // Perform an AJAX request for extra image info (alt/title).
         var fieldID = fieldModel.get('fieldID');
         var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
         var self = this;
         self.ajax({
           type: 'GET',
           url: url,
-          success: function (response) {
+          success: function success(response) {
             $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
             $toolgroup.append($toolbar);
             $toolbar.on('keyup paste', function () {
               fieldModel.set('state', 'changed');
             });
-            // Re-position the toolbar, which could have changed size.
+
             fieldModel.get('entity').toolbarView.position();
           }
         });
       }
     },
 
-    /**
-     * Renders our dropzone element.
-     *
-     * @param {string} state
-     *   The current state of our editor. Only used for visual styling.
-     * @param {string} text
-     *   The text to display in the dropzone area.
-     *
-     * @return {jQuery}
-     *   The rendered dropzone.
-     */
-    renderDropzone: function (state, text) {
+    renderDropzone: function renderDropzone(state, text) {
       var $dropzone = this.$el.find('.quickedit-image-dropzone');
-      // If the element already exists, modify its contents.
+
       if ($dropzone.length) {
-        $dropzone
-          .removeClass('upload error hover loading')
-          .addClass('.quickedit-image-dropzone ' + state)
-          .children('.quickedit-image-text')
-            .html(text);
-      }
-      else {
+        $dropzone.removeClass('upload error hover loading').addClass('.quickedit-image-dropzone ' + state).children('.quickedit-image-text').html(text);
+      } else {
         $dropzone = $(Drupal.theme('quickeditImageDropzone', {
           state: state,
           text: text
@@ -298,45 +205,28 @@
       return $dropzone;
     },
 
-    /**
-     * @inheritdoc
-     */
-    revert: function () {
+    revert: function revert() {
       this.$el.html(this.model.get('originalValue'));
     },
 
-    /**
-     * @inheritdoc
-     */
-    getQuickEditUISettings: function () {
-      return {padding: false, unifiedToolbar: true, fullWidthToolbar: true, popup: false};
+    getQuickEditUISettings: function getQuickEditUISettings() {
+      return { padding: false, unifiedToolbar: true, fullWidthToolbar: true, popup: false };
     },
 
-    /**
-     * @inheritdoc
-     */
-    showValidationErrors: function () {
+    showValidationErrors: function showValidationErrors() {
       var errors = Drupal.theme('quickeditImageErrors', {
         errors: this.model.get('validationErrors')
       });
-      $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId())
-        .append(errors);
-      this.getEditedElement()
-        .addClass('quickedit-validation-error');
-      // Re-position the toolbar, which could have changed size.
+      $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).append(errors);
+      this.getEditedElement().addClass('quickedit-validation-error');
+
       this.fieldModel.get('entity').toolbarView.position();
     },
 
-    /**
-     * @inheritdoc
-     */
-    removeValidationErrors: function () {
-      $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId())
-        .find('.quickedit-image-errors').remove();
-      this.getEditedElement()
-        .removeClass('quickedit-validation-error');
+    removeValidationErrors: function removeValidationErrors() {
+      $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).find('.quickedit-image-errors').remove();
+      this.getEditedElement().removeClass('quickedit-validation-error');
     }
 
   });
-
-})(jQuery, _, Drupal);
+})(jQuery, _, Drupal);
\ No newline at end of file
diff --git a/core/modules/image/js/theme.js b/core/modules/image/js/theme.es6.js
similarity index 100%
copy from core/modules/image/js/theme.js
copy to core/modules/image/js/theme.es6.js
diff --git a/core/modules/image/js/theme.js b/core/modules/image/js/theme.js
index cba8f7bbca..ff697c4cb9 100644
--- a/core/modules/image/js/theme.js
+++ b/core/modules/image/js/theme.js
@@ -1,86 +1,31 @@
 /**
- * @file
- * Provides theme functions for image Quick Edit's client-side HTML.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/image/js/theme.es6.js
+* @preserve
+**/
 
 (function (Drupal) {
 
   'use strict';
 
-  /**
-   * Theme function for validation errors of the Image in-place editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.errors
-   *   Already escaped HTML representing error messages.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditImageErrors = function (settings) {
     return '<div class="quickedit-image-errors">' + settings.errors + '</div>';
   };
 
-  /**
-   * Theme function for the dropzone element of the Image module's in-place
-   * editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.state
-   *   State of the upload.
-   * @param {string} settings.text
-   *   Text to display inline with the dropzone element.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditImageDropzone = function (settings) {
-    return '<div class="quickedit-image-dropzone ' + settings.state + '">' +
-      '  <i class="quickedit-image-icon"></i>' +
-      '  <span class="quickedit-image-text">' + settings.text + '</span>' +
-      '</div>';
+    return '<div class="quickedit-image-dropzone ' + settings.state + '">' + '  <i class="quickedit-image-icon"></i>' + '  <span class="quickedit-image-text">' + settings.text + '</span>' + '</div>';
   };
 
-  /**
-   * Theme function for the toolbar of the Image module's in-place editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {bool} settings.alt_field
-   *   Whether or not the "Alt" field is enabled for this field.
-   * @param {bool} settings.alt_field_required
-   *   Whether or not the "Alt" field is required for this field.
-   * @param {string} settings.alt
-   *   The current value for the "Alt" field.
-   * @param {bool} settings.title_field
-   *   Whether or not the "Title" field is enabled for this field.
-   * @param {bool} settings.title_field_required
-   *   Whether or not the "Title" field is required for this field.
-   * @param {string} settings.title
-   *   The current value for the "Title" field.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditImageToolbar = function (settings) {
     var html = '<form class="quickedit-image-field-info">';
     if (settings.alt_field) {
-      html += '  <div>' +
-        '    <label for="alt" class="' + (settings.alt_field_required ? 'required' : '') + '">' + Drupal.t('Alternative text') + '</label>' +
-        '    <input type="text" placeholder="' + settings.alt + '" value="' + settings.alt + '" name="alt" ' + (settings.alt_field_required ? 'required' : '') + '/>' +
-        '  </div>';
+      html += '  <div>' + '    <label for="alt" class="' + (settings.alt_field_required ? 'required' : '') + '">' + Drupal.t('Alternative text') + '</label>' + '    <input type="text" placeholder="' + settings.alt + '" value="' + settings.alt + '" name="alt" ' + (settings.alt_field_required ? 'required' : '') + '/>' + '  </div>';
     }
     if (settings.title_field) {
-      html += '  <div>' +
-        '    <label for="title" class="' + (settings.title_field_required ? 'form-required' : '') + '">' + Drupal.t('Title') + '</label>' +
-        '    <input type="text" placeholder="' + settings.title + '" value="' + settings.title + '" name="title" ' + (settings.title_field_required ? 'required' : '') + '/>' +
-        '  </div>';
+      html += '  <div>' + '    <label for="title" class="' + (settings.title_field_required ? 'form-required' : '') + '">' + Drupal.t('Title') + '</label>' + '    <input type="text" placeholder="' + settings.title + '" value="' + settings.title + '" name="title" ' + (settings.title_field_required ? 'required' : '') + '/>' + '  </div>';
     }
     html += '</form>';
 
     return html;
   };
-
-})(Drupal);
+})(Drupal);
\ No newline at end of file
diff --git a/core/modules/language/language.admin.js b/core/modules/language/language.admin.es6.js
similarity index 100%
copy from core/modules/language/language.admin.js
copy to core/modules/language/language.admin.es6.js
diff --git a/core/modules/language/language.admin.js b/core/modules/language/language.admin.js
index 9d3daa4ce2..c220c37762 100644
--- a/core/modules/language/language.admin.js
+++ b/core/modules/language/language.admin.js
@@ -1,43 +1,31 @@
 /**
- * @file
- * Language admin behavior.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/language/language.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Makes language negotiation inherit user interface negotiation.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attach behavior to language negotiation admin user interface.
-   */
   Drupal.behaviors.negotiationLanguage = {
-    attach: function () {
+    attach: function attach() {
       var $configForm = $('#language-negotiation-configure-form');
       var inputSelector = 'input[name$="[configurable]"]';
-      // Given a customization checkbox derive the language type being changed.
+
       function toggleTable(checkbox) {
         var $checkbox = $(checkbox);
-        // Get the language detection type such as Interface text language
-        // detection or Content language detection.
-        $checkbox.closest('.table-language-group')
-          .find('table, .tabledrag-toggle-weight')
-          .toggle($checkbox.prop('checked'));
+
+        $checkbox.closest('.table-language-group').find('table, .tabledrag-toggle-weight').toggle($checkbox.prop('checked'));
       }
 
-      // Bind hide/show and rearrange customization checkboxes.
       $configForm.once('negotiation-language-admin-bind').on('change', inputSelector, function (event) {
         toggleTable(event.target);
       });
-      // Initially, hide language detection types that are not customized.
+
       $configForm.find(inputSelector + ':not(:checked)').each(function (index, element) {
         toggleTable(element);
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/locale/locale.admin.js b/core/modules/locale/locale.admin.es6.js
similarity index 100%
copy from core/modules/locale/locale.admin.js
copy to core/modules/locale/locale.admin.es6.js
diff --git a/core/modules/locale/locale.admin.js b/core/modules/locale/locale.admin.js
index d9701ef94d..fb97183ae3 100644
--- a/core/modules/locale/locale.admin.js
+++ b/core/modules/locale/locale.admin.js
@@ -1,47 +1,37 @@
 /**
- * @file
- * Locale admin behavior.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/locale/locale.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Marks changes of translations.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior to show the user if translations has changed.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detach behavior to show the user if translations has changed.
-   */
   Drupal.behaviors.localeTranslateDirty = {
-    attach: function () {
+    attach: function attach() {
       var $form = $('#locale-translate-edit-form').once('localetranslatedirty');
       if ($form.length) {
-        // Display a notice if any row changed.
         $form.one('formUpdated.localeTranslateDirty', 'table', function () {
           var $marker = $(Drupal.theme('localeTranslateChangedWarning')).hide();
           $(this).addClass('changed').before($marker);
           $marker.fadeIn('slow');
         });
-        // Highlight changed row.
+
         $form.on('formUpdated.localeTranslateDirty', 'tr', function () {
           var $row = $(this);
           var $rowToMark = $row.once('localemark');
           var marker = Drupal.theme('localeTranslateChangedMarker');
 
           $row.addClass('changed');
-          // Add an asterisk only once if row changed.
+
           if ($rowToMark.length) {
             $rowToMark.find('td:first-child .js-form-item').append(marker);
           }
         });
       }
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         var $form = $('#locale-translate-edit-form').removeOnce('localetranslatedirty');
         if ($form.length) {
@@ -51,23 +41,14 @@
     }
   };
 
-  /**
-   * Show/hide the description details on Available translation updates page.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for toggling details on the translation update page.
-   */
   Drupal.behaviors.hideUpdateInformation = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $table = $('#locale-translation-status-form').once('expand-updates');
       if ($table.length) {
         var $tbodies = $table.find('tbody');
 
-        // Open/close the description details by toggling a tr class.
         $tbodies.on('click keydown', '.description', function (e) {
-          if (e.keyCode && (e.keyCode !== 13 && e.keyCode !== 32)) {
+          if (e.keyCode && e.keyCode !== 13 && e.keyCode !== 32) {
             return;
           }
           e.preventDefault();
@@ -75,12 +56,10 @@
 
           $tr.toggleClass('expanded');
 
-          // Change screen reader text.
           $tr.find('.locale-translation-update__prefix').text(function () {
             if ($tr.hasClass('expanded')) {
               return Drupal.t('Hide description');
-            }
-            else {
+            } else {
               return Drupal.t('Show description');
             }
           });
@@ -90,27 +69,13 @@
     }
   };
 
-  $.extend(Drupal.theme, /** @lends Drupal.theme */{
-
-    /**
-     * Creates markup for a changed translation marker.
-     *
-     * @return {string}
-     *   Markup for the marker.
-     */
-    localeTranslateChangedMarker: function () {
+  $.extend(Drupal.theme, {
+    localeTranslateChangedMarker: function localeTranslateChangedMarker() {
       return '<abbr class="warning ajax-changed" title="' + Drupal.t('Changed') + '">*</abbr>';
     },
 
-    /**
-     * Creates markup for the translation changed warning.
-     *
-     * @return {string}
-     *   Markup for the warning.
-     */
-    localeTranslateChangedWarning: function () {
+    localeTranslateChangedWarning: function localeTranslateChangedWarning() {
       return '<div class="clearfix messages messages--warning">' + Drupal.theme('localeTranslateChangedMarker') + ' ' + Drupal.t('Changes made in this table will not be saved until the form is submitted.') + '</div>';
     }
   });
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/locale/locale.bulk.js b/core/modules/locale/locale.bulk.es6.js
similarity index 100%
copy from core/modules/locale/locale.bulk.js
copy to core/modules/locale/locale.bulk.es6.js
diff --git a/core/modules/locale/locale.bulk.js b/core/modules/locale/locale.bulk.js
index c6743e8321..d8ba74bc7f 100644
--- a/core/modules/locale/locale.bulk.js
+++ b/core/modules/locale/locale.bulk.js
@@ -1,38 +1,25 @@
 /**
- * @file
- * Locale behavior.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/locale/locale.bulk.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Select the language code of an imported file based on its filename.
-   *
-   * This only works if the file name ends with "LANGCODE.po".
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for preselecting language code based on filename.
-   */
   Drupal.behaviors.importLanguageCodeSelector = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $form = $('#locale-translate-import-form').once('autodetect-lang');
       if ($form.length) {
         var $langcode = $form.find('.langcode-input');
-        $form.find('.file-import-input')
-          .on('change', function () {
-            // If the filename is fully the language code or the filename
-            // ends with a language code, pre-select that one.
-            var matches = $(this).val().match(/([^.][\.]*)([\w-]+)\.po$/);
-            if (matches && $langcode.find('option[value="' + matches[2] + '"]').length) {
-              $langcode.val(matches[2]);
-            }
-          });
+        $form.find('.file-import-input').on('change', function () {
+          var matches = $(this).val().match(/([^.][\.]*)([\w-]+)\.po$/);
+          if (matches && $langcode.find('option[value="' + matches[2] + '"]').length) {
+            $langcode.val(matches[2]);
+          }
+        });
       }
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/locale/locale.datepicker.js b/core/modules/locale/locale.datepicker.es6.js
similarity index 100%
copy from core/modules/locale/locale.datepicker.js
copy to core/modules/locale/locale.datepicker.es6.js
diff --git a/core/modules/locale/locale.datepicker.js b/core/modules/locale/locale.datepicker.js
index a952ade320..e69ff5c415 100644
--- a/core/modules/locale/locale.datepicker.js
+++ b/core/modules/locale/locale.datepicker.js
@@ -1,82 +1,25 @@
 /**
- * @file
- * Datepicker JavaScript for the Locale module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/locale/locale.datepicker.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Attaches language support to the jQuery UI datepicker component.
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.localeDatepicker = {
-    attach: function (context, settings) {
-      // This code accesses drupalSettings and localized strings via Drupal.t().
-      // So this code should run after these are initialized. By placing it in an
-      // attach behavior this is assured.
+    attach: function attach(context, settings) {
       $.datepicker.regional['drupal-locale'] = $.extend({
         closeText: Drupal.t('Done'),
         prevText: Drupal.t('Prev'),
         nextText: Drupal.t('Next'),
         currentText: Drupal.t('Today'),
-        monthNames: [
-          Drupal.t('January', {}, {context: 'Long month name'}),
-          Drupal.t('February', {}, {context: 'Long month name'}),
-          Drupal.t('March', {}, {context: 'Long month name'}),
-          Drupal.t('April', {}, {context: 'Long month name'}),
-          Drupal.t('May', {}, {context: 'Long month name'}),
-          Drupal.t('June', {}, {context: 'Long month name'}),
-          Drupal.t('July', {}, {context: 'Long month name'}),
-          Drupal.t('August', {}, {context: 'Long month name'}),
-          Drupal.t('September', {}, {context: 'Long month name'}),
-          Drupal.t('October', {}, {context: 'Long month name'}),
-          Drupal.t('November', {}, {context: 'Long month name'}),
-          Drupal.t('December', {}, {context: 'Long month name'})
-        ],
-        monthNamesShort: [
-          Drupal.t('Jan'),
-          Drupal.t('Feb'),
-          Drupal.t('Mar'),
-          Drupal.t('Apr'),
-          Drupal.t('May'),
-          Drupal.t('Jun'),
-          Drupal.t('Jul'),
-          Drupal.t('Aug'),
-          Drupal.t('Sep'),
-          Drupal.t('Oct'),
-          Drupal.t('Nov'),
-          Drupal.t('Dec')
-        ],
-        dayNames: [
-          Drupal.t('Sunday'),
-          Drupal.t('Monday'),
-          Drupal.t('Tuesday'),
-          Drupal.t('Wednesday'),
-          Drupal.t('Thursday'),
-          Drupal.t('Friday'),
-          Drupal.t('Saturday')
-        ],
-        dayNamesShort: [
-          Drupal.t('Sun'),
-          Drupal.t('Mon'),
-          Drupal.t('Tue'),
-          Drupal.t('Wed'),
-          Drupal.t('Thu'),
-          Drupal.t('Fri'),
-          Drupal.t('Sat')
-        ],
-        dayNamesMin: [
-          Drupal.t('Su'),
-          Drupal.t('Mo'),
-          Drupal.t('Tu'),
-          Drupal.t('We'),
-          Drupal.t('Th'),
-          Drupal.t('Fr'),
-          Drupal.t('Sa')
-        ],
+        monthNames: [Drupal.t('January', {}, { context: 'Long month name' }), Drupal.t('February', {}, { context: 'Long month name' }), Drupal.t('March', {}, { context: 'Long month name' }), Drupal.t('April', {}, { context: 'Long month name' }), Drupal.t('May', {}, { context: 'Long month name' }), Drupal.t('June', {}, { context: 'Long month name' }), Drupal.t('July', {}, { context: 'Long month name' }), Drupal.t('August', {}, { context: 'Long month name' }), Drupal.t('September', {}, { context: 'Long month name' }), Drupal.t('October', {}, { context: 'Long month name' }), Drupal.t('November', {}, { context: 'Long month name' }), Drupal.t('December', {}, { context: 'Long month name' })],
+        monthNamesShort: [Drupal.t('Jan'), Drupal.t('Feb'), Drupal.t('Mar'), Drupal.t('Apr'), Drupal.t('May'), Drupal.t('Jun'), Drupal.t('Jul'), Drupal.t('Aug'), Drupal.t('Sep'), Drupal.t('Oct'), Drupal.t('Nov'), Drupal.t('Dec')],
+        dayNames: [Drupal.t('Sunday'), Drupal.t('Monday'), Drupal.t('Tuesday'), Drupal.t('Wednesday'), Drupal.t('Thursday'), Drupal.t('Friday'), Drupal.t('Saturday')],
+        dayNamesShort: [Drupal.t('Sun'), Drupal.t('Mon'), Drupal.t('Tue'), Drupal.t('Wed'), Drupal.t('Thu'), Drupal.t('Fri'), Drupal.t('Sat')],
+        dayNamesMin: [Drupal.t('Su'), Drupal.t('Mo'), Drupal.t('Tu'), Drupal.t('We'), Drupal.t('Th'), Drupal.t('Fr'), Drupal.t('Sa')],
         dateFormat: Drupal.t('mm/dd/yy'),
         firstDay: 0,
         isRTL: 0
@@ -84,5 +27,4 @@
       $.datepicker.setDefaults($.datepicker.regional['drupal-locale']);
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/locale/tests/locale_test.js b/core/modules/locale/tests/locale_test.es6.js
similarity index 100%
copy from core/modules/locale/tests/locale_test.js
copy to core/modules/locale/tests/locale_test.es6.js
diff --git a/core/modules/locale/tests/locale_test.js b/core/modules/locale/tests/locale_test.js
index ba62b7504e..1a3db9b3a7 100644
--- a/core/modules/locale/tests/locale_test.js
+++ b/core/modules/locale/tests/locale_test.js
@@ -1,18 +1,11 @@
 /**
- * @file
- * JavaScript for locale_test.module.
- *
- * @ignore
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/locale/tests/locale_test.es6.js
+* @preserve
+**/
 
 Drupal.t("Standard Call t");
-Drupal
-  .
-  t
-  (
-    "Whitespace Call t"
-  )
-;
+Drupal.t("Whitespace Call t");
 
 Drupal.t('Single Quote t');
 Drupal.t('Single Quote \'Escaped\' t');
@@ -22,22 +15,14 @@ Drupal.t("Double Quote t");
 Drupal.t("Double Quote \"Escaped\" t");
 Drupal.t("Double Quote " + "Concat " + "strings " + "t");
 
-Drupal.t("Context Unquoted t", {}, {context: "Context string unquoted"});
-Drupal.t("Context Single Quoted t", {}, {'context': "Context string single quoted"});
-Drupal.t("Context Double Quoted t", {}, {"context": "Context string double quoted"});
+Drupal.t("Context Unquoted t", {}, { context: "Context string unquoted" });
+Drupal.t("Context Single Quoted t", {}, { 'context': "Context string single quoted" });
+Drupal.t("Context Double Quoted t", {}, { "context": "Context string double quoted" });
 
-Drupal.t("Context !key Args t", {'!key': 'value'}, {context: "Context string"});
+Drupal.t("Context !key Args t", { '!key': 'value' }, { context: "Context string" });
 
 Drupal.formatPlural(1, "Standard Call plural", "Standard Call @count plural");
-Drupal
-  .
-  formatPlural
-  (
-    1,
-    "Whitespace Call plural",
-    "Whitespace Call @count plural"
-  )
-;
+Drupal.formatPlural(1, "Whitespace Call plural", "Whitespace Call @count plural");
 
 Drupal.formatPlural(1, 'Single Quote plural', 'Single Quote @count plural');
 Drupal.formatPlural(1, 'Single Quote \'Escaped\' plural', 'Single Quote \'Escaped\' @count plural');
@@ -45,8 +30,8 @@ Drupal.formatPlural(1, 'Single Quote \'Escaped\' plural', 'Single Quote \'Escape
 Drupal.formatPlural(1, "Double Quote plural", "Double Quote @count plural");
 Drupal.formatPlural(1, "Double Quote \"Escaped\" plural", "Double Quote \"Escaped\" @count plural");
 
-Drupal.formatPlural(1, "Context Unquoted plural", "Context Unquoted @count plural", {}, {context: "Context string unquoted"});
-Drupal.formatPlural(1, "Context Single Quoted plural", "Context Single Quoted @count plural", {}, {'context': "Context string single quoted"});
-Drupal.formatPlural(1, "Context Double Quoted plural", "Context Double Quoted @count plural", {}, {"context": "Context string double quoted"});
+Drupal.formatPlural(1, "Context Unquoted plural", "Context Unquoted @count plural", {}, { context: "Context string unquoted" });
+Drupal.formatPlural(1, "Context Single Quoted plural", "Context Single Quoted @count plural", {}, { 'context': "Context string single quoted" });
+Drupal.formatPlural(1, "Context Double Quoted plural", "Context Double Quoted @count plural", {}, { "context": "Context string double quoted" });
 
-Drupal.formatPlural(1, "Context !key Args plural", "Context !key Args @count plural", {'!key': 'value'}, {context: "Context string"});
+Drupal.formatPlural(1, "Context !key Args plural", "Context !key Args @count plural", { '!key': 'value' }, { context: "Context string" });
\ No newline at end of file
diff --git a/core/modules/menu_ui/menu_ui.admin.js b/core/modules/menu_ui/menu_ui.admin.es6.js
similarity index 100%
copy from core/modules/menu_ui/menu_ui.admin.js
copy to core/modules/menu_ui/menu_ui.admin.es6.js
diff --git a/core/modules/menu_ui/menu_ui.admin.js b/core/modules/menu_ui/menu_ui.admin.js
index 345138f17a..3131e279aa 100644
--- a/core/modules/menu_ui/menu_ui.admin.js
+++ b/core/modules/menu_ui/menu_ui.admin.js
@@ -1,68 +1,54 @@
 /**
- * @file
- * Menu UI admin behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/menu_ui/menu_ui.admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.menuUiChangeParentItems = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $menu = $('#edit-menu').once('menu-parent');
       if ($menu.length) {
-        // Update the list of available parent menu items to match the initial
-        // available menus.
         Drupal.menuUiUpdateParentList();
 
-        // Update list of available parent menu items.
         $menu.on('change', 'input', Drupal.menuUiUpdateParentList);
       }
     }
   };
 
-  /**
-   * Function to set the options of the menu parent item dropdown.
-   */
   Drupal.menuUiUpdateParentList = function () {
     var $menu = $('#edit-menu');
     var values = [];
 
     $menu.find('input:checked').each(function () {
-      // Get the names of all checked menus.
       values.push(Drupal.checkPlain($.trim($(this).val())));
     });
 
     $.ajax({
       url: location.protocol + '//' + location.host + Drupal.url('admin/structure/menu/parents'),
       type: 'POST',
-      data: {'menus[]': values},
+      data: { 'menus[]': values },
       dataType: 'json',
-      success: function (options) {
+      success: function success(options) {
         var $select = $('#edit-menu-parent');
-        // Save key of last selected element.
+
         var selected = $select.val();
-        // Remove all existing options from dropdown.
+
         $select.children().remove();
-        // Add new options to dropdown. Keep a count of options for testing later.
+
         var totalOptions = 0;
         for (var machineName in options) {
           if (options.hasOwnProperty(machineName)) {
-            $select.append(
-              $('<option ' + (machineName === selected ? ' selected="selected"' : '') + '></option>').val(machineName).text(options[machineName])
-            );
+            $select.append($('<option ' + (machineName === selected ? ' selected="selected"' : '') + '></option>').val(machineName).text(options[machineName]));
             totalOptions++;
           }
         }
 
-        // Hide the parent options if there are no options for it.
         $select.closest('div').toggle(totalOptions > 0).attr('hidden', totalOptions === 0);
       }
     });
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/menu_ui/menu_ui.js b/core/modules/menu_ui/menu_ui.es6.js
similarity index 100%
copy from core/modules/menu_ui/menu_ui.js
copy to core/modules/menu_ui/menu_ui.es6.js
diff --git a/core/modules/menu_ui/menu_ui.js b/core/modules/menu_ui/menu_ui.js
index 5eb10e0781..7c101bc676 100644
--- a/core/modules/menu_ui/menu_ui.js
+++ b/core/modules/menu_ui/menu_ui.js
@@ -1,83 +1,61 @@
 /**
- * @file
- * Menu UI behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/menu_ui/menu_ui.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Set a summary on the menu link form.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Find the form and call `drupalSetSummary` on it.
-   */
   Drupal.behaviors.menuUiDetailsSummaries = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('.menu-link-form').drupalSetSummary(function (context) {
         var $context = $(context);
         if ($context.find('.js-form-item-menu-enabled input').is(':checked')) {
           return Drupal.checkPlain($context.find('.js-form-item-menu-title input').val());
-        }
-        else {
+        } else {
           return Drupal.t('Not in menu');
         }
       });
     }
   };
 
-  /**
-   * Automatically fill in a menu link title, if possible.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches change and keyup behavior for automatically filling out menu
-   *   link titles.
-   */
   Drupal.behaviors.menuUiLinkAutomaticTitle = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       $context.find('.menu-link-form').each(function () {
         var $this = $(this);
-        // Try to find menu settings widget elements as well as a 'title' field
-        // in the form, but play nicely with user permissions and form
-        // alterations.
+
         var $checkbox = $this.find('.js-form-item-menu-enabled input');
         var $link_title = $context.find('.js-form-item-menu-title input');
         var $title = $this.closest('form').find('.js-form-item-title-0-value input');
-        // Bail out if we do not have all required fields.
+
         if (!($checkbox.length && $link_title.length && $title.length)) {
           return;
         }
-        // If there is a link title already, mark it as overridden. The user
-        // expects that toggling the checkbox twice will take over the node's
-        // title.
+
         if ($checkbox.is(':checked') && $link_title.val().length) {
           $link_title.data('menuLinkAutomaticTitleOverridden', true);
         }
-        // Whenever the value is changed manually, disable this behavior.
+
         $link_title.on('keyup', function () {
           $link_title.data('menuLinkAutomaticTitleOverridden', true);
         });
-        // Global trigger on checkbox (do not fill-in a value when disabled).
+
         $checkbox.on('change', function () {
           if ($checkbox.is(':checked')) {
             if (!$link_title.data('menuLinkAutomaticTitleOverridden')) {
               $link_title.val($title.val());
             }
-          }
-          else {
+          } else {
             $link_title.val('');
             $link_title.removeData('menuLinkAutomaticTitleOverridden');
           }
           $checkbox.closest('.vertical-tabs-pane').trigger('summaryUpdated');
           $checkbox.trigger('formUpdated');
         });
-        // Take over any title change.
+
         $title.on('keyup', function () {
           if (!$link_title.data('menuLinkAutomaticTitleOverridden') && $checkbox.is(':checked')) {
             $link_title.val($title.val());
@@ -87,5 +65,4 @@
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.es6.js
similarity index 100%
copy from core/modules/node/content_types.js
copy to core/modules/node/content_types.es6.js
diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.js
index 4ec34aa05e..47b565cd47 100644
--- a/core/modules/node/content_types.js
+++ b/core/modules/node/content_types.js
@@ -1,24 +1,17 @@
 /**
- * @file
- * Javascript for the node content editing form.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/node/content_types.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Behaviors for setting summaries on content type form.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behaviors on content type edit forms.
-   */
   Drupal.behaviors.contentTypes = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
-      // Provide the vertical tab summaries.
+
       $context.find('#edit-submission').drupalSetSummary(function (context) {
         var vals = [];
         vals.push(Drupal.checkPlain($(context).find('#edit-title-label').val()) || Drupal.t('Requires a title'));
@@ -58,5 +51,4 @@
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/node/node.js b/core/modules/node/node.es6.js
similarity index 100%
copy from core/modules/node/node.js
copy to core/modules/node/node.es6.js
diff --git a/core/modules/node/node.js b/core/modules/node/node.js
index 086263d2a8..c1e76db096 100644
--- a/core/modules/node/node.js
+++ b/core/modules/node/node.js
@@ -1,22 +1,15 @@
 /**
- * @file
- * Defines Javascript behaviors for the node module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/node/node.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Behaviors for tabs in the node edit form.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behavior for tabs in the node edit form.
-   */
   Drupal.behaviors.nodeDetailsSummaries = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
 
       $context.find('.node-form-author').drupalSetSummary(function (context) {
@@ -25,13 +18,11 @@
         var date = $authorContext.find('.field--name-created input').val();
 
         if (name && date) {
-          return Drupal.t('By @name on @date', {'@name': name, '@date': date});
-        }
-        else if (name) {
-          return Drupal.t('By @name', {'@name': name});
-        }
-        else if (date) {
-          return Drupal.t('Authored on @date', {'@date': date});
+          return Drupal.t('By @name on @date', { '@name': name, '@date': date });
+        } else if (name) {
+          return Drupal.t('By @name', { '@name': name });
+        } else if (date) {
+          return Drupal.t('Authored on @date', { '@date': date });
         }
       });
 
@@ -44,12 +35,10 @@
             vals.push(Drupal.checkPlain($.trim($(this).text())));
           });
           return vals.join(', ');
-        }
-        else {
+        } else {
           return Drupal.t('Not promoted');
         }
       });
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/node/node.preview.js b/core/modules/node/node.preview.es6.js
similarity index 100%
copy from core/modules/node/node.preview.js
copy to core/modules/node/node.preview.es6.js
diff --git a/core/modules/node/node.preview.js b/core/modules/node/node.preview.js
index 4054183a1f..83623781e3 100644
--- a/core/modules/node/node.preview.js
+++ b/core/modules/node/node.preview.js
@@ -1,50 +1,33 @@
 /**
- * @file
- * Preview behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/node/node.preview.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Disables all non-relevant links in node previews.
-   *
-   * Destroys links (except local fragment identifiers such as href="#frag") in
-   * node previews to prevent users from leaving the page.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches confirmation prompt for clicking links in node preview mode.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches confirmation prompt for clicking links in node preview mode.
-   */
   Drupal.behaviors.nodePreviewDestroyLinks = {
-    attach: function (context) {
+    attach: function attach(context) {
 
       function clickPreviewModal(event) {
-        // Only confirm leaving previews when left-clicking and user is not
-        // pressing the ALT, CTRL, META (Command key on the Macintosh keyboard)
-        // or SHIFT key.
         if (event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
           event.preventDefault();
           var $previewDialog = $('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');
           Drupal.dialog($previewDialog, {
             title: Drupal.t('Leave preview?'),
-            buttons: [
-              {
-                text: Drupal.t('Cancel'),
-                click: function () {
-                  $(this).dialog('close');
-                }
-              }, {
-                text: Drupal.t('Leave preview'),
-                click: function () {
-                  window.top.location.href = event.target.href;
-                }
+            buttons: [{
+              text: Drupal.t('Cancel'),
+              click: function click() {
+                $(this).dialog('close');
               }
-            ]
+            }, {
+              text: Drupal.t('Leave preview'),
+              click: function click() {
+                window.top.location.href = event.target.href;
+              }
+            }]
           }).showModal();
         }
       }
@@ -54,7 +37,7 @@
         $preview.on('click.preview', 'a:not([href^=#], #edit-backlink, #toolbar-administration a)', clickPreviewModal);
       }
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         var $preview = $(context).find('.content').removeOnce('node-preview');
         if ($preview.length) {
@@ -64,16 +47,8 @@
     }
   };
 
-  /**
-   * Switch view mode.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches automatic submit on `formUpdated.preview` events.
-   */
   Drupal.behaviors.nodePreviewSwitchViewMode = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $autosubmit = $(context).find('[data-drupal-autosubmit]').once('autosubmit');
       if ($autosubmit.length) {
         $autosubmit.on('formUpdated.preview', function () {
@@ -83,17 +58,7 @@
     }
   };
 
-  /**
-   * Theme function for node preview modal.
-   *
-   * @return {string}
-   *   Markup for the node preview modal.
-   */
   Drupal.theme.nodePreviewModal = function () {
-    return '<p>' +
-      Drupal.t('Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?') +
-      '</p><small class="description">' +
-      Drupal.t('CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.') + '</small>';
+    return '<p>' + Drupal.t('Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?') + '</p><small class="description">' + Drupal.t('CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.') + '</small>';
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/outside_in/js/off-canvas.es6.js
similarity index 100%
copy from core/modules/outside_in/js/off-canvas.js
copy to core/modules/outside_in/js/off-canvas.es6.js
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/outside_in/js/off-canvas.js
index d7c8d906f6..18602f814c 100644
--- a/core/modules/outside_in/js/off-canvas.js
+++ b/core/modules/outside_in/js/off-canvas.js
@@ -1,42 +1,25 @@
 /**
- * @file
- * Drupal's off-canvas library.
- *
- * @todo This functionality should extracted into a new core library or a part
- *  of the current drupal.dialog.ajax library.
- *  https://www.drupal.org/node/2784443
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/outside_in/js/off-canvas.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, debounce, displace) {
 
   'use strict';
 
-  // The minimum width to use body displace needs to match the width at which
-  // the tray will be %100 width. @see outside_in.module.css
   var minDisplaceWidth = 768;
 
-  /**
-   * The edge of the screen that the dialog should appear on.
-   *
-   * @type {string}
-   */
   var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
 
   var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
 
-  /**
-   * Resets the size of the dialog.
-   *
-   * @param {jQuery.Event} event
-   *   The event triggered.
-   */
   function resetSize(event) {
     var offsets = displace.offsets;
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
 
     var adjustedOptions = {
-      // @see http://api.jqueryui.com/position/
       position: {
         my: edge + ' top',
         at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
@@ -46,20 +29,12 @@
 
     $widget.css({
       position: 'fixed',
-      height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
+      height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
     });
 
-    $element
-      .dialog('option', adjustedOptions)
-      .trigger('dialogContentResize.off-canvas');
+    $element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
   }
 
-  /**
-   * Adjusts the dialog on resize.
-   *
-   * @param {jQuery.Event} event
-   *   The event triggered.
-   */
   function handleDialogResize(event) {
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
@@ -68,22 +43,16 @@
     var offset = 0;
     var modalHeight;
 
-    // Let scroll element take all the height available.
-    $element.css({height: 'auto'});
+    $element.css({ height: 'auto' });
     modalHeight = $widget.height();
-    $offsets.each(function () { offset += $(this).outerHeight(); });
+    $offsets.each(function () {
+      offset += $(this).outerHeight();
+    });
 
-    // Take internal padding into account.
     var scrollOffset = $element.outerHeight() - $element.height();
     $element.height(modalHeight - offset - scrollOffset);
   }
 
-  /**
-   * Adjusts the body padding when the dialog is resized.
-   *
-   * @param {jQuery.Event} event
-   *   The event triggered.
-   */
   function bodyPadding(event) {
     if ($('body').outerWidth() < minDisplaceWidth) {
       return;
@@ -100,54 +69,39 @@
     }
   }
 
-  /**
-   * Attaches off-canvas dialog behaviors.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches event listeners for off-canvas dialogs.
-   */
   Drupal.behaviors.offCanvasEvents = {
-    attach: function () {
+    attach: function attach() {
       $(window).once('off-canvas').on({
-        'dialog:aftercreate': function (event, dialog, $element, settings) {
+        'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
           if ($element.is('#drupal-off-canvas')) {
-            var eventData = {settings: settings, $element: $element};
+            var eventData = { settings: settings, $element: $element };
             $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
 
-            $element
-              .on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100))
-              .on('dialogContentResize.off-canvas', eventData, handleDialogResize)
-              .on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100))
-              .trigger('dialogresize.off-canvas');
+            $element.on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100)).on('dialogContentResize.off-canvas', eventData, handleDialogResize).on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100)).trigger('dialogresize.off-canvas');
 
             $element.dialog('widget').attr('data-offset-' + edge, '');
 
-            $(window)
-              .on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100))
-              .trigger('resize.off-canvas');
+            $(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100)).trigger('resize.off-canvas');
           }
         },
-        'dialog:beforecreate': function (event, dialog, $element, settings) {
+        'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
           if ($element.is('#drupal-off-canvas')) {
             $('body').addClass('js-tray-open');
-            // @see http://api.jqueryui.com/position/
+
             settings.position = {
               my: 'left top',
               at: edge + ' top',
               of: window
             };
             settings.dialogClass += ' ui-dialog-off-canvas';
-            // Applies initial height to dialog based on window height.
-            // See http://api.jqueryui.com/dialog for all dialog options.
+
             settings.height = $(window).height();
           }
         },
-        'dialog:beforeclose': function (event, dialog, $element) {
+        'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
           if ($element.is('#drupal-off-canvas')) {
             $('body').removeClass('js-tray-open');
-            // Remove all *.off-canvas events
+
             $(document).off('.off-canvas');
             $(window).off('.off-canvas');
             $mainCanvasWrapper.css('padding-' + edge, 0);
@@ -156,5 +110,4 @@
       });
     }
   };
-
-})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
+})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
\ No newline at end of file
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.es6.js
similarity index 100%
copy from core/modules/outside_in/js/outside_in.js
copy to core/modules/outside_in/js/outside_in.es6.js
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index eea9075cab..beb366bcda 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Drupal's Settings Tray library.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/outside_in/js/outside_in.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
@@ -13,116 +14,56 @@
   var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   var quickEditItemSelector = '[data-quickedit-entity-id]';
 
-  /**
-   * Reacts to contextual links being added.
-   *
-   * @param {jQuery.Event} event
-   *   The `drupalContextualLinkAdded` event.
-   * @param {object} data
-   *   An object containing the data relevant to the event.
-   *
-   * @listens event:drupalContextualLinkAdded
-   */
   $(document).on('drupalContextualLinkAdded', function (event, data) {
-    // Bind Ajax behaviors to all items showing the class.
-    // @todo Fix contextual links to work with use-ajax links in
-    //    https://www.drupal.org/node/2764931.
     Drupal.attachBehaviors(data.$el[0]);
 
-    // Bind a listener to all 'Quick edit' links for blocks
-    // Click "Edit" button in toolbar to force Contextual Edit which starts
-    // Settings Tray edit mode also.
-    data.$el.find(blockConfigureSelector)
-      .on('click.outsidein', function () {
-        if (!isInEditMode()) {
-          $(toggleEditSelector).trigger('click').trigger('click.outside_in');
-        }
-        // Always disable QuickEdit regardless of whether "EditMode" was just enabled.
-        disableQuickEdit();
-      });
+    data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
+      if (!isInEditMode()) {
+        $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+      }
+
+      disableQuickEdit();
+    });
   });
 
   $(document).on('keyup.outsidein', function (e) {
     if (isInEditMode() && e.keyCode === 27) {
-      Drupal.announce(
-        Drupal.t('Exited edit mode.')
-      );
+      Drupal.announce(Drupal.t('Exited edit mode.'));
       toggleEditMode();
     }
   });
 
-  /**
-   * Gets all items that should be toggled with class during edit mode.
-   *
-   * @return {jQuery}
-   *   Items that should be toggled.
-   */
   function getItemsToToggle() {
     return $(itemsToToggleSelector).not(contextualItemsSelector);
   }
 
-  /**
-   * Helper to check the state of the outside-in mode.
-   *
-   * @todo don't use a class for this.
-   *
-   * @return {boolean}
-   *  State of the outside-in edit mode.
-   */
   function isInEditMode() {
     return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
   }
 
-  /**
-   * Helper to toggle Edit mode.
-   */
   function toggleEditMode() {
     setEditModeState(!isInEditMode());
   }
 
-  /**
-   * Prevent default click events except contextual links.
-   *
-   * In edit mode the default action of click events is suppressed.
-   *
-   * @param {jQuery.Event} event
-   *   The click event.
-   */
   function preventClick(event) {
-    // Do not prevent contextual links.
     if ($(event.target).closest('.contextual-links').length) {
       return;
     }
     event.preventDefault();
   }
 
-  /**
-   * Close any active toolbar tray before entering edit mode.
-   */
   function closeToolbarTrays() {
     $(Drupal.toolbar.models.toolbarModel.get('activeTab')).trigger('click');
   }
 
-  /**
-   * Disables the QuickEdit module editor if open.
-   */
   function disableQuickEdit() {
     $('.quickedit-toolbar button.action-cancel').trigger('click');
   }
 
-  /**
-   * Closes/removes off-canvas.
-   */
   function closeOffCanvas() {
     $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
   }
 
-  /**
-   *  Helper to switch edit mode state.
-   *
-   * @param {boolean} editMode
-   *  True enable edit mode, false disable edit mode.
-   */
   function setEditModeState(editMode) {
     if (!document.querySelector('[data-off-canvas-main-canvas]')) {
       throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig');
@@ -130,70 +71,51 @@
     editMode = !!editMode;
     var $editButton = $(toggleEditSelector);
     var $editables;
-    // Turn on edit mode.
+
     if (editMode) {
       $editButton.text(Drupal.t('Editing'));
       closeToolbarTrays();
 
       $editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
       if ($editables.length) {
-        // Use event capture to prevent clicks on links.
         document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
 
-        // When a click occurs try and find the outside-in edit link
-        // and click it.
-        $editables
-          .not(contextualItemsSelector)
-          .on('click.outsidein', function (e) {
-            // Contextual links are allowed to function in Edit mode.
-            if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
-              return;
-            }
-            $(e.currentTarget).find(blockConfigureSelector).trigger('click');
-            disableQuickEdit();
-          });
-        $(quickEditItemSelector)
-          .not(contextualItemsSelector)
-          .on('click.outsidein', function (e) {
-            // For all non-contextual links or the contextual QuickEdit link close the off-canvas dialog.
-            if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
-              closeOffCanvas();
-            }
-            // Do not trigger if target is quick edit link to avoid loop.
-            if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
-              return;
-            }
-            $(e.currentTarget).find('li.quickedit a').trigger('click');
-          });
-      }
-    }
-    // Disable edit mode.
-    else {
-      $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
-      if ($editables.length) {
-        document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
-        $editables.off('.outsidein');
-        $(quickEditItemSelector).off('.outsidein');
+        $editables.not(contextualItemsSelector).on('click.outsidein', function (e) {
+          if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
+            return;
+          }
+          $(e.currentTarget).find(blockConfigureSelector).trigger('click');
+          disableQuickEdit();
+        });
+        $(quickEditItemSelector).not(contextualItemsSelector).on('click.outsidein', function (e) {
+          if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
+            closeOffCanvas();
+          }
+
+          if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
+            return;
+          }
+          $(e.currentTarget).find('li.quickedit a').trigger('click');
+        });
       }
+    } else {
+        $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
+        if ($editables.length) {
+          document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
+          $editables.off('.outsidein');
+          $(quickEditItemSelector).off('.outsidein');
+        }
 
-      $editButton.text(Drupal.t('Edit'));
-      closeOffCanvas();
-      disableQuickEdit();
-    }
+        $editButton.text(Drupal.t('Edit'));
+        closeOffCanvas();
+        disableQuickEdit();
+      }
     getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
   }
 
-  /**
-   * Attaches contextual's edit toolbar tab behavior.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches contextual toolbar behavior on a contextualToolbar-init event.
-   */
   Drupal.behaviors.outsideInEdit = {
-    attach: function () {
+    attach: function attach() {
       var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
       if (editMode) {
         setEditModeState(true);
@@ -201,51 +123,37 @@
     }
   };
 
-  /**
-   * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Toggle the js-outside-edit-mode class.
-   */
   Drupal.behaviors.toggleEditMode = {
-    attach: function () {
+    attach: function attach() {
 
       $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
 
       var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog';
       var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_off_canvas';
-      // Loop through all Ajax links and change the format to dialog-off-canvas when
-      // needed.
-      Drupal.ajax.instances
-        .filter(function (instance) {
-          var hasElement = instance && !!instance.element;
-          var rendererOffCanvas = false;
-          var wrapperOffCanvas = false;
-          if (hasElement) {
-            rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas';
-            wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1;
-          }
-          return hasElement && rendererOffCanvas && wrapperOffCanvas;
-        })
-        .forEach(function (instance) {
-          // @todo Move logic for data-dialog-renderer attribute into ajax.js
-          //   https://www.drupal.org/node/2784443
-          instance.options.url = instance.options.url.replace(search, replace);
-          // Check to make sure existing dialogOptions aren't overridden.
-          if (!('dialogOptions' in instance.options.data)) {
-            instance.options.data.dialogOptions = {};
-          }
-          instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
-          instance.progress = {type: 'fullscreen'};
-        });
+
+      Drupal.ajax.instances.filter(function (instance) {
+        var hasElement = instance && !!instance.element;
+        var rendererOffCanvas = false;
+        var wrapperOffCanvas = false;
+        if (hasElement) {
+          rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas';
+          wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1;
+        }
+        return hasElement && rendererOffCanvas && wrapperOffCanvas;
+      }).forEach(function (instance) {
+        instance.options.url = instance.options.url.replace(search, replace);
+
+        if (!('dialogOptions' in instance.options.data)) {
+          instance.options.data.dialogOptions = {};
+        }
+        instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
+        instance.progress = { type: 'fullscreen' };
+      });
     }
   };
 
-  // Manage Active editable class on opening and closing of the dialog.
   $(window).on({
-    'dialog:beforecreate': function (event, dialog, $element, settings) {
+    'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
       if ($element.is('#drupal-off-canvas')) {
         $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
         var $activeElement = $('#' + settings.outsideInActiveEditableId);
@@ -255,11 +163,10 @@
         }
       }
     },
-    'dialog:beforeclose': function (event, dialog, $element) {
+    'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
       if ($element.is('#drupal-off-canvas')) {
         $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
       }
     }
   });
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/path/path.js b/core/modules/path/path.es6.js
similarity index 100%
copy from core/modules/path/path.js
copy to core/modules/path/path.es6.js
diff --git a/core/modules/path/path.js b/core/modules/path/path.js
index dfa2c052a1..12d5fae7c6 100644
--- a/core/modules/path/path.js
+++ b/core/modules/path/path.js
@@ -1,29 +1,20 @@
 /**
- * @file
- * Attaches behaviors for the Path module.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/path/path.es6.js
+* @preserve
+**/
+
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Behaviors for settings summaries on path edit forms.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches summary behavior on path edit forms.
-   */
   Drupal.behaviors.pathDetailsSummaries = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('.path-form').drupalSetSummary(function (context) {
         var path = $('.js-form-item-path-0-alias input').val();
 
-        return path ?
-          Drupal.t('Alias: @alias', {'@alias': path}) :
-          Drupal.t('No alias');
+        return path ? Drupal.t('Alias: @alias', { '@alias': path }) : Drupal.t('No alias');
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/editors/formEditor.js b/core/modules/quickedit/js/editors/formEditor.es6.js
similarity index 100%
copy from core/modules/quickedit/js/editors/formEditor.js
copy to core/modules/quickedit/js/editors/formEditor.es6.js
diff --git a/core/modules/quickedit/js/editors/formEditor.js b/core/modules/quickedit/js/editors/formEditor.js
index 374e5c21eb..0734e1f587 100644
--- a/core/modules/quickedit/js/editors/formEditor.js
+++ b/core/modules/quickedit/js/editors/formEditor.js
@@ -1,42 +1,19 @@
 /**
- * @file
- * Form-based in-place editor. Works for any field type.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/editors/formEditor.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, _) {
 
   'use strict';
 
-  /**
-   * @constructor
-   *
-   * @augments Drupal.quickedit.EditorView
-   */
-  Drupal.quickedit.editors.form = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.form# */{
-
-    /**
-     * Tracks form container DOM element that is used while in-place editing.
-     *
-     * @type {jQuery}
-     */
+  Drupal.quickedit.editors.form = Drupal.quickedit.EditorView.extend({
     $formContainer: null,
 
-    /**
-     * Holds the {@link Drupal.Ajax} object.
-     *
-     * @type {Drupal.Ajax}
-     */
     formSaveAjax: null,
 
-    /**
-     * @inheritdoc
-     *
-     * @param {object} fieldModel
-     *   The field model that holds the state.
-     * @param {string} state
-     *   The state to change to.
-     */
-    stateChange: function (fieldModel, state) {
+    stateChange: function stateChange(fieldModel, state) {
       var from = fieldModel.previous('state');
       var to = state;
       switch (to) {
@@ -53,7 +30,6 @@
           break;
 
         case 'activating':
-          // If coming from an invalid state, then the form is already loaded.
           if (from !== 'invalid') {
             this.loadForm();
           }
@@ -78,58 +54,35 @@
       }
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {object}
-     *   A settings object for the quick edit UI.
-     */
-    getQuickEditUISettings: function () {
-      return {padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: true};
+    getQuickEditUISettings: function getQuickEditUISettings() {
+      return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: true };
     },
 
-    /**
-     * Loads the form for this field, displays it on top of the actual field.
-     */
-    loadForm: function () {
+    loadForm: function loadForm() {
       var fieldModel = this.fieldModel;
 
-      // Generate a DOM-compatible ID for the form container DOM element.
       var id = 'quickedit-form-for-' + fieldModel.id.replace(/[\/\[\]]/g, '_');
 
-      // Render form container.
       var $formContainer = this.$formContainer = $(Drupal.theme('quickeditFormContainer', {
         id: id,
         loadingMsg: Drupal.t('Loading…')
       }));
-      $formContainer
-        .find('.quickedit-form')
-        .addClass('quickedit-editable quickedit-highlighted quickedit-editing')
-        .attr('role', 'dialog');
+      $formContainer.find('.quickedit-form').addClass('quickedit-editable quickedit-highlighted quickedit-editing').attr('role', 'dialog');
 
-      // Insert form container in DOM.
       if (this.$el.css('display') === 'inline') {
         $formContainer.prependTo(this.$el.offsetParent());
-        // Position the form container to render on top of the field's element.
+
         var pos = this.$el.position();
         $formContainer.css('left', pos.left).css('top', pos.top);
-      }
-      else {
+      } else {
         $formContainer.insertBefore(this.$el);
       }
 
-      // Load form, insert it into the form container and attach event handlers.
       var formOptions = {
         fieldID: fieldModel.get('fieldID'),
         $el: this.$el,
         nocssjs: false,
-        // Reset an existing entry for this entity in the PrivateTempStore (if
-        // any) when loading the field. Logically speaking, this should happen
-        // in a separate request because this is an entity-level operation, not
-        // a field-level operation. But that would require an additional
-        // request, that might not even be necessary: it is only when a user
-        // loads a first changed field for an entity that this needs to happen:
-        // precisely now!
+
         reset: !fieldModel.get('entity').get('inTempStore')
       };
       Drupal.quickedit.util.form.load(formOptions, function (form, ajax) {
@@ -138,54 +91,37 @@
           selector: '#' + id + ' .placeholder'
         });
 
-        $formContainer
-          .on('formUpdated.quickedit', ':input', function (event) {
-            var state = fieldModel.get('state');
-            // If the form is in an invalid state, it will persist on the page.
-            // Set the field to activating so that the user can correct the
-            // invalid value.
-            if (state === 'invalid') {
-              fieldModel.set('state', 'activating');
-            }
-            // Otherwise assume that the fieldModel is in a candidate state and
-            // set it to changed on formUpdate.
-            else {
+        $formContainer.on('formUpdated.quickedit', ':input', function (event) {
+          var state = fieldModel.get('state');
+
+          if (state === 'invalid') {
+            fieldModel.set('state', 'activating');
+          } else {
               fieldModel.set('state', 'changed');
             }
-          })
-          .on('keypress.quickedit', 'input', function (event) {
-            if (event.keyCode === 13) {
-              return false;
-            }
-          });
+        }).on('keypress.quickedit', 'input', function (event) {
+          if (event.keyCode === 13) {
+            return false;
+          }
+        });
 
-        // The in-place editor has loaded; change state to 'active'.
         fieldModel.set('state', 'active');
       });
     },
 
-    /**
-     * Removes the form for this field, detaches behaviors and event handlers.
-     */
-    removeForm: function () {
+    removeForm: function removeForm() {
       if (this.$formContainer === null) {
         return;
       }
 
       delete this.formSaveAjax;
-      // Allow form widgets to detach properly.
+
       Drupal.detachBehaviors(this.$formContainer.get(0), null, 'unload');
-      this.$formContainer
-        .off('change.quickedit', ':input')
-        .off('keypress.quickedit', 'input')
-        .remove();
+      this.$formContainer.off('change.quickedit', ':input').off('keypress.quickedit', 'input').remove();
       this.$formContainer = null;
     },
 
-    /**
-     * @inheritdoc
-     */
-    save: function () {
+    save: function save() {
       var $formContainer = this.$formContainer;
       var $submit = $formContainer.find('.quickedit-form-submit');
       var editorModel = this.model;
@@ -196,38 +132,28 @@
         formSaveAjax = null;
       }
 
-      // Create an AJAX object for the form associated with the field.
       var formSaveAjax = Drupal.quickedit.util.form.ajaxifySaving({
         nocssjs: false,
         other_view_modes: fieldModel.findOtherViewModes()
       }, $submit);
 
-      // Successfully saved.
       formSaveAjax.commands.quickeditFieldFormSaved = function (ajax, response, status) {
         cleanUpAjax();
-        // First, transition the state to 'saved'.
+
         fieldModel.set('state', 'saved');
-        // Second, set the 'htmlForOtherViewModes' attribute, so that when this
-        // field is rerendered, the change can be propagated to other instances
-        // of this field, which may be displayed in different view modes.
+
         fieldModel.set('htmlForOtherViewModes', response.other_view_modes);
-        // Finally, set the 'html' attribute on the field model. This will cause
-        // the field to be rerendered.
+
         _.defer(function () {
           fieldModel.set('html', response.data);
         });
       };
 
-      // Unsuccessfully saved; validation errors.
       formSaveAjax.commands.quickeditFieldFormValidationErrors = function (ajax, response, status) {
         editorModel.set('validationErrors', response.data);
         fieldModel.set('state', 'invalid');
       };
 
-      // The quickeditFieldForm AJAX command is called upon attempting to save
-      // the form; Form API will mark which form items have errors, if any. This
-      // command is invoked only if validation errors exist and then it runs
-      // before editFieldFormValidationErrors().
       formSaveAjax.commands.quickeditFieldForm = function (ajax, response, status) {
         Drupal.AjaxCommands.prototype.insert(ajax, {
           data: response.data,
@@ -235,21 +161,11 @@
         });
       };
 
-      // Click the form's submit button; the scoped AJAX commands above will
-      // handle the server's response.
       $submit.trigger('click.quickedit');
     },
 
-    /**
-     * @inheritdoc
-     */
-    showValidationErrors: function () {
-      this.$formContainer
-        .find('.quickedit-form')
-        .addClass('quickedit-validation-error')
-        .find('form')
-        .prepend(this.model.get('validationErrors'));
+    showValidationErrors: function showValidationErrors() {
+      this.$formContainer.find('.quickedit-form').addClass('quickedit-validation-error').find('form').prepend(this.model.get('validationErrors'));
     }
   });
-
-})(jQuery, Drupal, _);
+})(jQuery, Drupal, _);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/editors/plainTextEditor.js b/core/modules/quickedit/js/editors/plainTextEditor.es6.js
similarity index 100%
copy from core/modules/quickedit/js/editors/plainTextEditor.js
copy to core/modules/quickedit/js/editors/plainTextEditor.es6.js
diff --git a/core/modules/quickedit/js/editors/plainTextEditor.js b/core/modules/quickedit/js/editors/plainTextEditor.js
index 71f9b74e58..cd2441b88f 100644
--- a/core/modules/quickedit/js/editors/plainTextEditor.js
+++ b/core/modules/quickedit/js/editors/plainTextEditor.js
@@ -1,46 +1,31 @@
 /**
- * @file
- * ContentEditable-based in-place editor for plain text content.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/editors/plainTextEditor.es6.js
+* @preserve
+**/
 
 (function ($, _, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.plain_text# */{
-
-    /**
-     * Stores the textual DOM element that is being in-place edited.
-     */
+  Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend({
     $textElement: null,
 
-    /**
-     * @constructs
-     *
-     * @augments Drupal.quickedit.EditorView
-     *
-     * @param {object} options
-     *   Options for the plain text editor.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
 
       var editorModel = this.model;
       var fieldModel = this.fieldModel;
 
-      // Store the original value of this field. Necessary for reverting
-      // changes.
       var $textElement;
       var $fieldItems = this.$el.find('.quickedit-field');
       if ($fieldItems.length) {
         $textElement = this.$textElement = $fieldItems.eq(0);
-      }
-      else {
+      } else {
         $textElement = this.$textElement = this.$el;
       }
       editorModel.set('originalValue', $.trim(this.$textElement.text()));
 
-      // Sets the state to 'changed' whenever the value changes.
       var previousText = editorModel.get('originalValue');
       $textElement.on('keyup paste', function (event) {
         var currentText = $.trim($textElement.text());
@@ -52,27 +37,11 @@
       });
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {jQuery}
-     *   The text element for the plain text editor.
-     */
-    getEditedElement: function () {
+    getEditedElement: function getEditedElement() {
       return this.$textElement;
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @param {object} fieldModel
-     *   The field model that holds the state.
-     * @param {string} state
-     *   The state to change to.
-     * @param {object} options
-     *   State options, if needed by the state change.
-     */
-    stateChange: function (fieldModel, state, options) {
+    stateChange: function stateChange(fieldModel, state, options) {
       var from = fieldModel.previous('state');
       var to = state;
       switch (to) {
@@ -92,8 +61,6 @@
           break;
 
         case 'activating':
-          // Defer updating the field model until the current state change has
-          // propagated, to not trigger a nested state change event.
           _.defer(function () {
             fieldModel.set('state', 'active');
           });
@@ -122,23 +89,13 @@
       }
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {object}
-     *   A settings object for the quick edit UI.
-     */
-    getQuickEditUISettings: function () {
-      return {padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false};
+    getQuickEditUISettings: function getQuickEditUISettings() {
+      return { padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false };
     },
 
-    /**
-     * @inheritdoc
-     */
-    revert: function () {
+    revert: function revert() {
       this.$textElement.html(this.model.get('originalValue'));
     }
 
   });
-
-})(jQuery, _, Drupal);
+})(jQuery, _, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/AppModel.js b/core/modules/quickedit/js/models/AppModel.es6.js
similarity index 100%
copy from core/modules/quickedit/js/models/AppModel.js
copy to core/modules/quickedit/js/models/AppModel.es6.js
diff --git a/core/modules/quickedit/js/models/AppModel.js b/core/modules/quickedit/js/models/AppModel.js
index 6c473ac974..3f0bd470a8 100644
--- a/core/modules/quickedit/js/models/AppModel.js
+++ b/core/modules/quickedit/js/models/AppModel.js
@@ -1,57 +1,21 @@
 /**
- * @file
- * A Backbone Model for the state of the in-place editing application.
- *
- * @see Drupal.quickedit.AppView
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/models/AppModel.es6.js
+* @preserve
+**/
 
 (function (Backbone, Drupal) {
 
   'use strict';
 
-  /**
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.quickedit.AppModel = Backbone.Model.extend(/** @lends Drupal.quickedit.AppModel# */{
-
-    /**
-     * @type {object}
-     *
-     * @prop {Drupal.quickedit.FieldModel} highlightedField
-     * @prop {Drupal.quickedit.FieldModel} activeField
-     * @prop {Drupal.dialog~dialogDefinition} activeModal
-     */
-    defaults: /** @lends Drupal.quickedit.AppModel# */{
-
-      /**
-       * The currently state='highlighted' Drupal.quickedit.FieldModel, if any.
-       *
-       * @type {Drupal.quickedit.FieldModel}
-       *
-       * @see Drupal.quickedit.FieldModel.states
-       */
+  Drupal.quickedit.AppModel = Backbone.Model.extend({
+    defaults: {
       highlightedField: null,
 
-      /**
-       * The currently state = 'active' Drupal.quickedit.FieldModel, if any.
-       *
-       * @type {Drupal.quickedit.FieldModel}
-       *
-       * @see Drupal.quickedit.FieldModel.states
-       */
       activeField: null,
 
-      /**
-       * Reference to a {@link Drupal.dialog} instance if a state change
-       * requires confirmation.
-       *
-       * @type {Drupal.dialog~dialogDefinition}
-       */
       activeModal: null
     }
 
   });
-
-}(Backbone, Drupal));
+})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/BaseModel.js b/core/modules/quickedit/js/models/BaseModel.es6.js
similarity index 100%
copy from core/modules/quickedit/js/models/BaseModel.js
copy to core/modules/quickedit/js/models/BaseModel.es6.js
diff --git a/core/modules/quickedit/js/models/BaseModel.js b/core/modules/quickedit/js/models/BaseModel.js
index 7579b6f03b..f1fd677e71 100644
--- a/core/modules/quickedit/js/models/BaseModel.js
+++ b/core/modules/quickedit/js/models/BaseModel.js
@@ -1,51 +1,25 @@
 /**
- * @file
- * A Backbone Model subclass that enforces validation when calling set().
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/models/BaseModel.es6.js
+* @preserve
+**/
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 (function (Drupal, Backbone) {
 
   'use strict';
 
-  Drupal.quickedit.BaseModel = Backbone.Model.extend(/** @lends Drupal.quickedit.BaseModel# */{
-
-    /**
-     * @constructs
-     *
-     * @augments Backbone.Model
-     *
-     * @param {object} options
-     *   Options for the base model-
-     *
-     * @return {Drupal.quickedit.BaseModel}
-     *   A quickedit base model.
-     */
-    initialize: function (options) {
+  Drupal.quickedit.BaseModel = Backbone.Model.extend({
+    initialize: function initialize(options) {
       this.__initialized = true;
       return Backbone.Model.prototype.initialize.call(this, options);
     },
 
-    /**
-     * Set a value on the model
-     *
-     * @param {object|string} key
-     *   The key to set a value for.
-     * @param {*} val
-     *   The value to set.
-     * @param {object} [options]
-     *   Options for the model.
-     *
-     * @return {*}
-     *   The result of `Backbone.Model.prototype.set` with the specified
-     *   parameters.
-     */
-    set: function (key, val, options) {
+    set: function set(key, val, options) {
       if (this.__initialized) {
-        // Deal with both the "key", value and {key:value}-style arguments.
-        if (typeof key === 'object') {
+        if ((typeof key === 'undefined' ? 'undefined' : _typeof(key)) === 'object') {
           key.validate = true;
-        }
-        else {
+        } else {
           if (!options) {
             options = {};
           }
@@ -56,5 +30,4 @@
     }
 
   });
-
-}(Drupal, Backbone));
+})(Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/EditorModel.js b/core/modules/quickedit/js/models/EditorModel.es6.js
similarity index 100%
copy from core/modules/quickedit/js/models/EditorModel.js
copy to core/modules/quickedit/js/models/EditorModel.es6.js
diff --git a/core/modules/quickedit/js/models/EditorModel.js b/core/modules/quickedit/js/models/EditorModel.js
index 4b6177bc43..fe0567aae2 100644
--- a/core/modules/quickedit/js/models/EditorModel.js
+++ b/core/modules/quickedit/js/models/EditorModel.js
@@ -1,54 +1,21 @@
 /**
- * @file
- * A Backbone Model for the state of an in-place editor.
- *
- * @see Drupal.quickedit.EditorView
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/models/EditorModel.es6.js
+* @preserve
+**/
 
 (function (Backbone, Drupal) {
 
   'use strict';
 
-  /**
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.quickedit.EditorModel = Backbone.Model.extend(/** @lends Drupal.quickedit.EditorModel# */{
-
-    /**
-     * @type {object}
-     *
-     * @prop {string} originalValue
-     * @prop {string} currentValue
-     * @prop {Array} validationErrors
-     */
-    defaults: /** @lends Drupal.quickedit.EditorModel# */{
-
-      /**
-       * Not the full HTML representation of this field, but the "actual"
-       * original value of the field, stored by the used in-place editor, and
-       * in a representation that can be chosen by the in-place editor.
-       *
-       * @type {string}
-       */
+  Drupal.quickedit.EditorModel = Backbone.Model.extend({
+    defaults: {
       originalValue: null,
 
-      /**
-       * Analogous to originalValue, but the current value.
-       *
-       * @type {string}
-       */
       currentValue: null,
 
-      /**
-       * Stores any validation errors to be rendered.
-       *
-       * @type {Array}
-       */
       validationErrors: null
     }
 
   });
-
-}(Backbone, Drupal));
+})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/EntityModel.js b/core/modules/quickedit/js/models/EntityModel.es6.js
similarity index 100%
copy from core/modules/quickedit/js/models/EntityModel.js
copy to core/modules/quickedit/js/models/EntityModel.es6.js
diff --git a/core/modules/quickedit/js/models/EntityModel.js b/core/modules/quickedit/js/models/EntityModel.js
index f444fbb917..11ab9cc513 100644
--- a/core/modules/quickedit/js/models/EntityModel.js
+++ b/core/modules/quickedit/js/models/EntityModel.js
@@ -1,172 +1,53 @@
 /**
- * @file
- * A Backbone Model for the state of an in-place editable entity in the DOM.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/models/EntityModel.es6.js
+* @preserve
+**/
 
 (function (_, $, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.EntityModel = Drupal.quickedit.BaseModel.extend(/** @lends Drupal.quickedit.EntityModel# */{
-
-    /**
-     * @type {object}
-     */
-    defaults: /** @lends Drupal.quickedit.EntityModel# */{
-
-      /**
-       * The DOM element that represents this entity.
-       *
-       * It may seem bizarre to have a DOM element in a Backbone Model, but we
-       * need to be able to map entities in the DOM to EntityModels in memory.
-       *
-       * @type {HTMLElement}
-       */
+  Drupal.quickedit.EntityModel = Drupal.quickedit.BaseModel.extend({
+    defaults: {
       el: null,
 
-      /**
-       * An entity ID, of the form `<entity type>/<entity ID>`
-       *
-       * @example
-       * "node/1"
-       *
-       * @type {string}
-       */
       entityID: null,
 
-      /**
-       * An entity instance ID.
-       *
-       * The first instance of a specific entity (i.e. with a given entity ID)
-       * is assigned 0, the second 1, and so on.
-       *
-       * @type {number}
-       */
       entityInstanceID: null,
 
-      /**
-       * The unique ID of this entity instance on the page, of the form
-       * `<entity type>/<entity ID>[entity instance ID]`
-       *
-       * @example
-       * "node/1[0]"
-       *
-       * @type {string}
-       */
       id: null,
 
-      /**
-       * The label of the entity.
-       *
-       * @type {string}
-       */
       label: null,
 
-      /**
-       * A FieldCollection for all fields of the entity.
-       *
-       * @type {Drupal.quickedit.FieldCollection}
-       *
-       * @see Drupal.quickedit.FieldCollection
-       */
       fields: null,
 
-      // The attributes below are stateful. The ones above will never change
-      // during the life of a EntityModel instance.
-
-      /**
-       * Indicates whether this entity is currently being edited in-place.
-       *
-       * @type {bool}
-       */
       isActive: false,
 
-      /**
-       * Whether one or more fields are already been stored in PrivateTempStore.
-       *
-       * @type {bool}
-       */
       inTempStore: false,
 
-      /**
-       * Indicates whether a "Save" button is necessary or not.
-       *
-       * Whether one or more fields have already been stored in PrivateTempStore
-       * *or* the field that's currently being edited is in the 'changed' or a
-       * later state.
-       *
-       * @type {bool}
-       */
       isDirty: false,
 
-      /**
-       * Whether the request to the server has been made to commit this entity.
-       *
-       * Used to prevent multiple such requests.
-       *
-       * @type {bool}
-       */
       isCommitting: false,
 
-      /**
-       * The current processing state of an entity.
-       *
-       * @type {string}
-       */
       state: 'closed',
 
-      /**
-       * IDs of fields whose new values have been stored in PrivateTempStore.
-       *
-       * We must store this on the EntityModel as well (even though it already
-       * is on the FieldModel) because when a field is rerendered, its
-       * FieldModel is destroyed and this allows us to transition it back to
-       * the proper state.
-       *
-       * @type {Array.<string>}
-       */
       fieldsInTempStore: [],
 
-      /**
-       * A flag the tells the application that this EntityModel must be reloaded
-       * in order to restore the original values to its fields in the client.
-       *
-       * @type {bool}
-       */
       reload: false
     },
 
-    /**
-     * @constructs
-     *
-     * @augments Drupal.quickedit.BaseModel
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.set('fields', new Drupal.quickedit.FieldCollection());
 
-      // Respond to entity state changes.
       this.listenTo(this, 'change:state', this.stateChange);
 
-      // The state of the entity is largely dependent on the state of its
-      // fields.
       this.listenTo(this.get('fields'), 'change:state', this.fieldStateChange);
 
-      // Call Drupal.quickedit.BaseModel's initialize() method.
       Drupal.quickedit.BaseModel.prototype.initialize.call(this);
     },
 
-    /**
-     * Updates FieldModels' states when an EntityModel change occurs.
-     *
-     * @param {Drupal.quickedit.EntityModel} entityModel
-     *   The entity model
-     * @param {string} state
-     *   The state of the associated entity. One of
-     *   {@link Drupal.quickedit.EntityModel.states}.
-     * @param {object} options
-     *   Options for the entity model.
-     */
-    stateChange: function (entityModel, state, options) {
+    stateChange: function stateChange(entityModel, state, options) {
       var to = state;
       switch (to) {
         case 'closed':
@@ -181,81 +62,53 @@
           break;
 
         case 'opening':
-          // Set the fields to candidate state.
           entityModel.get('fields').each(function (fieldModel) {
             fieldModel.set('state', 'candidate', options);
           });
           break;
 
         case 'opened':
-          // The entity is now ready for editing!
           this.set('isActive', true);
           break;
 
         case 'committing':
-          // The user indicated they want to save the entity.
           var fields = this.get('fields');
-          // For fields that are in an active state, transition them to
-          // candidate.
-          fields.chain()
-            .filter(function (fieldModel) {
-              return _.intersection([fieldModel.get('state')], ['active']).length;
-            })
-            .each(function (fieldModel) {
-              fieldModel.set('state', 'candidate');
-            });
-          // For fields that are in a changed state, field values must first be
-          // stored in PrivateTempStore.
-          fields.chain()
-            .filter(function (fieldModel) {
-              return _.intersection([fieldModel.get('state')], Drupal.quickedit.app.changedFieldStates).length;
-            })
-            .each(function (fieldModel) {
-              fieldModel.set('state', 'saving');
-            });
+
+          fields.chain().filter(function (fieldModel) {
+            return _.intersection([fieldModel.get('state')], ['active']).length;
+          }).each(function (fieldModel) {
+            fieldModel.set('state', 'candidate');
+          });
+
+          fields.chain().filter(function (fieldModel) {
+            return _.intersection([fieldModel.get('state')], Drupal.quickedit.app.changedFieldStates).length;
+          }).each(function (fieldModel) {
+            fieldModel.set('state', 'saving');
+          });
           break;
 
         case 'deactivating':
-          var changedFields = this.get('fields')
-            .filter(function (fieldModel) {
-              return _.intersection([fieldModel.get('state')], ['changed', 'invalid']).length;
-            });
-          // If the entity contains unconfirmed or unsaved changes, return the
-          // entity to an opened state and ask the user if they would like to
-          // save the changes or discard the changes.
-          //   1. One of the fields is in a changed state. The changed field
-          //   might just be a change in the client or it might have been saved
-          //   to tempstore.
-          //   2. The saved flag is empty and the confirmed flag is empty. If
-          //   the entity has been saved to the server, the fields changed in
-          //   the client are irrelevant. If the changes are confirmed, then
-          //   proceed to set the fields to candidate state.
-          if ((changedFields.length || this.get('fieldsInTempStore').length) && (!options.saved && !options.confirmed)) {
-            // Cancel deactivation until the user confirms save or discard.
-            this.set('state', 'opened', {confirming: true});
-            // An action in reaction to state change must be deferred.
+          var changedFields = this.get('fields').filter(function (fieldModel) {
+            return _.intersection([fieldModel.get('state')], ['changed', 'invalid']).length;
+          });
+
+          if ((changedFields.length || this.get('fieldsInTempStore').length) && !options.saved && !options.confirmed) {
+            this.set('state', 'opened', { confirming: true });
+
             _.defer(function () {
               Drupal.quickedit.app.confirmEntityDeactivation(entityModel);
             });
-          }
-          else {
-            var invalidFields = this.get('fields')
-              .filter(function (fieldModel) {
-                return _.intersection([fieldModel.get('state')], ['invalid']).length;
-              });
-            // Indicate if this EntityModel needs to be reloaded in order to
-            // restore the original values of its fields.
-            entityModel.set('reload', (this.get('fieldsInTempStore').length || invalidFields.length));
-            // Set all fields to the 'candidate' state. A changed field may have
-            // to go through confirmation first.
+          } else {
+            var invalidFields = this.get('fields').filter(function (fieldModel) {
+              return _.intersection([fieldModel.get('state')], ['invalid']).length;
+            });
+
+            entityModel.set('reload', this.get('fieldsInTempStore').length || invalidFields.length);
+
             entityModel.get('fields').each(function (fieldModel) {
-              // If the field is already in the candidate state, trigger a
-              // change event so that the entityModel can move to the next state
-              // in deactivation.
               if (_.intersection([fieldModel.get('state')], ['candidate', 'highlighted']).length) {
                 fieldModel.trigger('change:state', fieldModel, fieldModel.get('state'), options);
-              }
-              else {
+              } else {
                 fieldModel.set('state', 'candidate', options);
               }
             });
@@ -263,7 +116,6 @@
           break;
 
         case 'closing':
-          // Set all fields to the 'inactive' state.
           options.reason = 'stop';
           this.get('fields').each(function (fieldModel) {
             fieldModel.set({
@@ -275,82 +127,34 @@
       }
     },
 
-    /**
-     * Updates a Field and Entity model's "inTempStore" when appropriate.
-     *
-     * Helper function.
-     *
-     * @param {Drupal.quickedit.EntityModel} entityModel
-     *   The model of the entity for which a field's state attribute has
-     *   changed.
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The model of the field whose state attribute has changed.
-     *
-     * @see Drupal.quickedit.EntityModel#fieldStateChange
-     */
-    _updateInTempStoreAttributes: function (entityModel, fieldModel) {
+    _updateInTempStoreAttributes: function _updateInTempStoreAttributes(entityModel, fieldModel) {
       var current = fieldModel.get('state');
       var previous = fieldModel.previous('state');
       var fieldsInTempStore = entityModel.get('fieldsInTempStore');
-      // If the fieldModel changed to the 'saved' state: remember that this
-      // field was saved to PrivateTempStore.
+
       if (current === 'saved') {
-        // Mark the entity as saved in PrivateTempStore, so that we can pass the
-        // proper "reset PrivateTempStore" boolean value when communicating with
-        // the server.
         entityModel.set('inTempStore', true);
-        // Mark the field as saved in PrivateTempStore, so that visual
-        // indicators signifying just that may be rendered.
+
         fieldModel.set('inTempStore', true);
-        // Remember that this field is in PrivateTempStore, restore when
-        // rerendered.
+
         fieldsInTempStore.push(fieldModel.get('fieldID'));
         fieldsInTempStore = _.uniq(fieldsInTempStore);
         entityModel.set('fieldsInTempStore', fieldsInTempStore);
-      }
-      // If the fieldModel changed to the 'candidate' state from the
-      // 'inactive' state, then this is a field for this entity that got
-      // rerendered. Restore its previous 'inTempStore' attribute value.
-      else if (current === 'candidate' && previous === 'inactive') {
-        fieldModel.set('inTempStore', _.intersection([fieldModel.get('fieldID')], fieldsInTempStore).length > 0);
-      }
+      } else if (current === 'candidate' && previous === 'inactive') {
+          fieldModel.set('inTempStore', _.intersection([fieldModel.get('fieldID')], fieldsInTempStore).length > 0);
+        }
     },
 
-    /**
-     * Reacts to state changes in this entity's fields.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The model of the field whose state attribute changed.
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.FieldModel.states}.
-     */
-    fieldStateChange: function (fieldModel, state) {
+    fieldStateChange: function fieldStateChange(fieldModel, state) {
       var entityModel = this;
       var fieldState = state;
-      // Switch on the entityModel state.
-      // The EntityModel responds to FieldModel state changes as a function of
-      // its state. For example, a field switching back to 'candidate' state
-      // when its entity is in the 'opened' state has no effect on the entity.
-      // But that same switch back to 'candidate' state of a field when the
-      // entity is in the 'committing' state might allow the entity to proceed
-      // with the commit flow.
+
       switch (this.get('state')) {
         case 'closed':
         case 'launching':
-          // It should be impossible to reach these: fields can't change state
-          // while the entity is closed or still launching.
           break;
 
         case 'opening':
-          // We must change the entity to the 'opened' state, but it must first
-          // be confirmed that all of its fieldModels have transitioned to the
-          // 'candidate' state.
-          // We do this here, because this is called every time a fieldModel
-          // changes state, hence each time this is called, we get closer to the
-          // goal of having all fieldModels in the 'candidate' state.
-          // A state change in reaction to another state change must be
-          // deferred.
           _.defer(function () {
             entityModel.set('state', 'opened', {
               'accept-field-states': Drupal.quickedit.app.readyFieldStates
@@ -359,57 +163,39 @@
           break;
 
         case 'opened':
-          // Set the isDirty attribute when appropriate so that it is known when
-          // to display the "Save" button in the entity toolbar.
-          // Note that once a field has been changed, there's no way to discard
-          // that change, hence it will have to be saved into PrivateTempStore,
-          // or the in-place editing of this field will have to be stopped
-          // completely. In other words: once any field enters the 'changed'
-          // field, then for the remainder of the in-place editing session, the
-          // entity is by definition dirty.
           if (fieldState === 'changed') {
             entityModel.set('isDirty', true);
-          }
-          else {
+          } else {
             this._updateInTempStoreAttributes(entityModel, fieldModel);
           }
           break;
 
         case 'committing':
-          // If the field save returned a validation error, set the state of the
-          // entity back to 'opened'.
           if (fieldState === 'invalid') {
-            // A state change in reaction to another state change must be
-            // deferred.
             _.defer(function () {
-              entityModel.set('state', 'opened', {reason: 'invalid'});
+              entityModel.set('state', 'opened', { reason: 'invalid' });
             });
-          }
-          else {
+          } else {
             this._updateInTempStoreAttributes(entityModel, fieldModel);
           }
 
-          // Attempt to save the entity. If the entity's fields are not yet all
-          // in a ready state, the save will not be processed.
           var options = {
             'accept-field-states': Drupal.quickedit.app.readyFieldStates
           };
           if (entityModel.set('isCommitting', true, options)) {
             entityModel.save({
-              success: function () {
+              success: function success() {
                 entityModel.set({
                   state: 'deactivating',
                   isCommitting: false
-                }, {saved: true});
+                }, { saved: true });
               },
-              error: function () {
-                // Reset the "isCommitting" mutex.
+              error: function error() {
                 entityModel.set('isCommitting', false);
-                // Change the state back to "opened", to allow the user to hit
-                // the "Save" button again.
-                entityModel.set('state', 'opened', {reason: 'networkerror'});
-                // Show a modal to inform the user of the network error.
-                var message = Drupal.t('Your changes to <q>@entity-title</q> could not be saved, either due to a website problem or a network connection problem.<br>Please try again.', {'@entity-title': entityModel.get('label')});
+
+                entityModel.set('state', 'opened', { reason: 'networkerror' });
+
+                var message = Drupal.t('Your changes to <q>@entity-title</q> could not be saved, either due to a website problem or a network connection problem.<br>Please try again.', { '@entity-title': entityModel.get('label') });
                 Drupal.quickedit.util.networkErrorModal(Drupal.t('Network problem!'), message);
               }
             });
@@ -417,10 +203,6 @@
           break;
 
         case 'deactivating':
-          // When setting the entity to 'closing', require that all fieldModels
-          // are in either the 'candidate' or 'highlighted' state.
-          // A state change in reaction to another state change must be
-          // deferred.
           _.defer(function () {
             entityModel.set('state', 'closing', {
               'accept-field-states': Drupal.quickedit.app.readyFieldStates
@@ -429,10 +211,6 @@
           break;
 
         case 'closing':
-          // When setting the entity to 'closed', require that all fieldModels
-          // are in the 'inactive' state.
-          // A state change in reaction to another state change must be
-          // deferred.
           _.defer(function () {
             entityModel.set('state', 'closed', {
               'accept-field-states': ['inactive']
@@ -442,179 +220,85 @@
       }
     },
 
-    /**
-     * Fires an AJAX request to the REST save URL for an entity.
-     *
-     * @param {object} options
-     *   An object of options that contains:
-     * @param {function} [options.success]
-     *   A function to invoke if the entity is successfully saved.
-     */
-    save: function (options) {
+    save: function save(options) {
       var entityModel = this;
 
-      // Create a Drupal.ajax instance to save the entity.
       var entitySaverAjax = Drupal.ajax({
         url: Drupal.url('quickedit/entity/' + entityModel.get('entityID')),
-        error: function () {
-          // Let the Drupal.quickedit.EntityModel Backbone model's error()
-          // method handle errors.
+        error: function error() {
           options.error.call(entityModel);
         }
       });
-      // Entity saved successfully.
+
       entitySaverAjax.commands.quickeditEntitySaved = function (ajax, response, status) {
-        // All fields have been moved from PrivateTempStore to permanent
-        // storage, update the "inTempStore" attribute on FieldModels, on the
-        // EntityModel and clear EntityModel's "fieldInTempStore" attribute.
         entityModel.get('fields').each(function (fieldModel) {
           fieldModel.set('inTempStore', false);
         });
         entityModel.set('inTempStore', false);
         entityModel.set('fieldsInTempStore', []);
 
-        // Invoke the optional success callback.
         if (options.success) {
           options.success.call(entityModel);
         }
       };
-      // Trigger the AJAX request, which will will return the
-      // quickeditEntitySaved AJAX command to which we then react.
+
       entitySaverAjax.execute();
     },
 
-    /**
-     * Validate the entity model.
-     *
-     * @param {object} attrs
-     *   The attributes changes in the save or set call.
-     * @param {object} options
-     *   An object with the following option:
-     * @param {string} [options.reason]
-     *   A string that conveys a particular reason to allow for an exceptional
-     *   state change.
-     * @param {Array} options.accept-field-states
-     *   An array of strings that represent field states that the entities must
-     *   be in to validate. For example, if `accept-field-states` is
-     *   `['candidate', 'highlighted']`, then all the fields of the entity must
-     *   be in either of these two states for the save or set call to
-     *   validate and proceed.
-     *
-     * @return {string}
-     *   A string to say something about the state of the entity model.
-     */
-    validate: function (attrs, options) {
+    validate: function validate(attrs, options) {
       var acceptedFieldStates = options['accept-field-states'] || [];
 
-      // Validate state change.
       var currentState = this.get('state');
       var nextState = attrs.state;
       if (currentState !== nextState) {
-        // Ensure it's a valid state.
         if (_.indexOf(this.constructor.states, nextState) === -1) {
           return '"' + nextState + '" is an invalid state';
         }
 
-        // Ensure it's a state change that is allowed.
-        // Check if the acceptStateChange function accepts it.
         if (!this._acceptStateChange(currentState, nextState, options)) {
           return 'state change not accepted';
-        }
-        // If that function accepts it, then ensure all fields are also in an
-        // acceptable state.
-        else if (!this._fieldsHaveAcceptableStates(acceptedFieldStates)) {
-          return 'state change not accepted because fields are not in acceptable state';
-        }
+        } else if (!this._fieldsHaveAcceptableStates(acceptedFieldStates)) {
+            return 'state change not accepted because fields are not in acceptable state';
+          }
       }
 
-      // Validate setting isCommitting = true.
       var currentIsCommitting = this.get('isCommitting');
       var nextIsCommitting = attrs.isCommitting;
       if (currentIsCommitting === false && nextIsCommitting === true) {
         if (!this._fieldsHaveAcceptableStates(acceptedFieldStates)) {
           return 'isCommitting change not accepted because fields are not in acceptable state';
         }
-      }
-      else if (currentIsCommitting === true && nextIsCommitting === true) {
+      } else if (currentIsCommitting === true && nextIsCommitting === true) {
         return 'isCommitting is a mutex, hence only changes are allowed';
       }
     },
 
-    /**
-     * Checks if a state change can be accepted.
-     *
-     * @param {string} from
-     *   From state.
-     * @param {string} to
-     *   To state.
-     * @param {object} context
-     *   Context for the check.
-     * @param {string} context.reason
-     *   The reason for the state change.
-     * @param {bool} context.confirming
-     *   Whether context is confirming or not.
-     *
-     * @return {bool}
-     *   Whether the state change is accepted or not.
-     *
-     * @see Drupal.quickedit.AppView#acceptEditorStateChange
-     */
-    _acceptStateChange: function (from, to, context) {
+    _acceptStateChange: function _acceptStateChange(from, to, context) {
       var accept = true;
 
-      // In general, enforce the states sequence. Disallow going back from a
-      // "later" state to an "earlier" state, except in explicitly allowed
-      // cases.
       if (!this.constructor.followsStateSequence(from, to)) {
         accept = false;
 
-        // Allow: closing -> closed.
-        // Necessary to stop editing an entity.
         if (from === 'closing' && to === 'closed') {
           accept = true;
-        }
-        // Allow: committing -> opened.
-        // Necessary to be able to correct an invalid field, or to hit the
-        // "Save" button again after a server/network error.
-        else if (from === 'committing' && to === 'opened' && context.reason && (context.reason === 'invalid' || context.reason === 'networkerror')) {
-          accept = true;
-        }
-        // Allow: deactivating -> opened.
-        // Necessary to be able to confirm changes with the user.
-        else if (from === 'deactivating' && to === 'opened' && context.confirming) {
-          accept = true;
-        }
-        // Allow: opened -> deactivating.
-        // Necessary to be able to stop editing.
-        else if (from === 'opened' && to === 'deactivating' && context.confirmed) {
-          accept = true;
-        }
+        } else if (from === 'committing' && to === 'opened' && context.reason && (context.reason === 'invalid' || context.reason === 'networkerror')) {
+            accept = true;
+          } else if (from === 'deactivating' && to === 'opened' && context.confirming) {
+              accept = true;
+            } else if (from === 'opened' && to === 'deactivating' && context.confirmed) {
+                accept = true;
+              }
       }
 
       return accept;
     },
 
-    /**
-     * Checks if fields have acceptable states.
-     *
-     * @param {Array} acceptedFieldStates
-     *   An array of acceptable field states to check for.
-     *
-     * @return {bool}
-     *   Whether the fields have an acceptable state.
-     *
-     * @see Drupal.quickedit.EntityModel#validate
-     */
-    _fieldsHaveAcceptableStates: function (acceptedFieldStates) {
+    _fieldsHaveAcceptableStates: function _fieldsHaveAcceptableStates(acceptedFieldStates) {
       var accept = true;
 
-      // If no acceptable field states are provided, assume all field states are
-      // acceptable. We want to let validation pass as a default and only
-      // check validity on calls to set that explicitly request it.
       if (acceptedFieldStates.length > 0) {
         var fieldStates = this.get('fields').pluck('state') || [];
-        // If not all fields are in one of the accepted field states, then we
-        // still can't allow this state change.
+
         if (_.difference(fieldStates, acceptedFieldStates).length) {
           accept = false;
         }
@@ -623,119 +307,28 @@
       return accept;
     },
 
-    /**
-     * Destroys the entity model.
-     *
-     * @param {object} options
-     *   Options for the entity model.
-     */
-    destroy: function (options) {
+    destroy: function destroy(options) {
       Drupal.quickedit.BaseModel.prototype.destroy.call(this, options);
 
       this.stopListening();
 
-      // Destroy all fields of this entity.
       this.get('fields').reset();
     },
 
-    /**
-     * @inheritdoc
-     */
-    sync: function () {
-      // We don't use REST updates to sync.
+    sync: function sync() {
       return;
     }
 
-  }, /** @lends Drupal.quickedit.EntityModel */{
-
-    /**
-     * Sequence of all possible states an entity can be in during quickediting.
-     *
-     * @type {Array.<string>}
-     */
-    states: [
-      // Initial state, like field's 'inactive' OR the user has just finished
-      // in-place editing this entity.
-      // - Trigger: none (initial) or EntityModel (finished).
-      // - Expected behavior: (when not initial state): tear down
-      //   EntityToolbarView, in-place editors and related views.
-      'closed',
-      // User has activated in-place editing of this entity.
-      // - Trigger: user.
-      // - Expected behavior: the EntityToolbarView is gets set up, in-place
-      //   editors (EditorViews) and related views for this entity's fields are
-      //   set up. Upon completion of those, the state is changed to 'opening'.
-      'launching',
-      // Launching has finished.
-      // - Trigger: application.
-      // - Guarantees: in-place editors ready for use, all entity and field
-      //   views have been set up, all fields are in the 'inactive' state.
-      // - Expected behavior: all fields are changed to the 'candidate' state
-      //   and once this is completed, the entity state will be changed to
-      //   'opened'.
-      'opening',
-      // Opening has finished.
-      // - Trigger: EntityModel.
-      // - Guarantees: see 'opening', all fields are in the 'candidate' state.
-      // - Expected behavior: the user is able to actually use in-place editing.
-      'opened',
-      // User has clicked the 'Save' button (and has thus changed at least one
-      // field).
-      // - Trigger: user.
-      // - Guarantees: see 'opened', plus: either a changed field is in
-      //   PrivateTempStore, or the user has just modified a field without
-      //   activating (switching to) another field.
-      // - Expected behavior: 1) if any of the fields are not yet in
-      //   PrivateTempStore, save them to PrivateTempStore, 2) if then any of
-      //   the fields has the 'invalid' state, then change the entity state back
-      //   to 'opened', otherwise: save the entity by committing it from
-      //   PrivateTempStore into permanent storage.
-      'committing',
-      // User has clicked the 'Close' button, or has clicked the 'Save' button
-      // and that was successfully completed.
-      // - Trigger: user or EntityModel.
-      // - Guarantees: when having clicked 'Close' hardly any: fields may be in
-      //   a variety of states; when having clicked 'Save': all fields are in
-      //   the 'candidate' state.
-      // - Expected behavior: transition all fields to the 'candidate' state,
-      //   possibly requiring confirmation in the case of having clicked
-      //   'Close'.
-      'deactivating',
-      // Deactivation has been completed.
-      // - Trigger: EntityModel.
-      // - Guarantees: all fields are in the 'candidate' state.
-      // - Expected behavior: change all fields to the 'inactive' state.
-      'closing'
-    ],
-
-    /**
-     * Indicates whether the 'from' state comes before the 'to' state.
-     *
-     * @param {string} from
-     *   One of {@link Drupal.quickedit.EntityModel.states}.
-     * @param {string} to
-     *   One of {@link Drupal.quickedit.EntityModel.states}.
-     *
-     * @return {bool}
-     *   Whether the 'from' state comes before the 'to' state.
-     */
-    followsStateSequence: function (from, to) {
+  }, {
+    states: ['closed', 'launching', 'opening', 'opened', 'committing', 'deactivating', 'closing'],
+
+    followsStateSequence: function followsStateSequence(from, to) {
       return _.indexOf(this.states, from) < _.indexOf(this.states, to);
     }
 
   });
 
-  /**
-   * @constructor
-   *
-   * @augments Backbone.Collection
-   */
-  Drupal.quickedit.EntityCollection = Backbone.Collection.extend(/** @lends Drupal.quickedit.EntityCollection# */{
-
-    /**
-     * @type {Drupal.quickedit.EntityModel}
-     */
+  Drupal.quickedit.EntityCollection = Backbone.Collection.extend({
     model: Drupal.quickedit.EntityModel
   });
-
-}(_, jQuery, Backbone, Drupal));
+})(_, jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/models/FieldModel.js b/core/modules/quickedit/js/models/FieldModel.es6.js
similarity index 100%
copy from core/modules/quickedit/js/models/FieldModel.js
copy to core/modules/quickedit/js/models/FieldModel.es6.js
diff --git a/core/modules/quickedit/js/models/FieldModel.js b/core/modules/quickedit/js/models/FieldModel.js
index 8aeff107d9..4015e9dd5a 100644
--- a/core/modules/quickedit/js/models/FieldModel.js
+++ b/core/modules/quickedit/js/models/FieldModel.js
@@ -1,348 +1,108 @@
 /**
- * @file
- * A Backbone Model for the state of an in-place editable field in the DOM.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/models/FieldModel.es6.js
+* @preserve
+**/
 
 (function (_, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.FieldModel = Drupal.quickedit.BaseModel.extend(/** @lends Drupal.quickedit.FieldModel# */{
-
-    /**
-     * @type {object}
-     */
-    defaults: /** @lends Drupal.quickedit.FieldModel# */{
-
-      /**
-       * The DOM element that represents this field. It may seem bizarre to have
-       * a DOM element in a Backbone Model, but we need to be able to map fields
-       * in the DOM to FieldModels in memory.
-       */
+  Drupal.quickedit.FieldModel = Drupal.quickedit.BaseModel.extend({
+    defaults: {
       el: null,
 
-      /**
-       * A field ID, of the form
-       * `<entity type>/<id>/<field name>/<language>/<view mode>`
-       *
-       * @example
-       * "node/1/field_tags/und/full"
-       */
       fieldID: null,
 
-      /**
-       * The unique ID of this field within its entity instance on the page, of
-       * the form `<entity type>/<id>/<field name>/<language>/<view
-       * mode>[entity instance ID]`.
-       *
-       * @example
-       * "node/1/field_tags/und/full[0]"
-       */
       id: null,
 
-      /**
-       * A {@link Drupal.quickedit.EntityModel}. Its "fields" attribute, which
-       * is a FieldCollection, is automatically updated to include this
-       * FieldModel.
-       */
       entity: null,
 
-      /**
-       * This field's metadata as returned by the
-       * QuickEditController::metadata().
-       */
       metadata: null,
 
-      /**
-       * Callback function for validating changes between states. Receives the
-       * previous state, new state, context, and a callback.
-       */
       acceptStateChange: null,
 
-      /**
-       * A logical field ID, of the form
-       * `<entity type>/<id>/<field name>/<language>`, i.e. the fieldID without
-       * the view mode, to be able to identify other instances of the same
-       * field on the page but rendered in a different view mode.
-       *
-       * @example
-       * "node/1/field_tags/und".
-       */
       logicalFieldID: null,
 
-      // The attributes below are stateful. The ones above will never change
-      // during the life of a FieldModel instance.
-
-      /**
-       * In-place editing state of this field. Defaults to the initial state.
-       * Possible values: {@link Drupal.quickedit.FieldModel.states}.
-       */
       state: 'inactive',
 
-      /**
-       * The field is currently in the 'changed' state or one of the following
-       * states in which the field is still changed.
-       */
       isChanged: false,
 
-      /**
-       * Is tracked by the EntityModel, is mirrored here solely for decorative
-       * purposes: so that FieldDecorationView.renderChanged() can react to it.
-       */
       inTempStore: false,
 
-      /**
-       * The full HTML representation of this field (with the element that has
-       * the data-quickedit-field-id as the outer element). Used to propagate
-       * changes from this field to other instances of the same field storage.
-       */
       html: null,
 
-      /**
-       * An object containing the full HTML representations (values) of other
-       * view modes (keys) of this field, for other instances of this field
-       * displayed in a different view mode.
-       */
       htmlForOtherViewModes: null
     },
 
-    /**
-     * State of an in-place editable field in the DOM.
-     *
-     * @constructs
-     *
-     * @augments Drupal.quickedit.BaseModel
-     *
-     * @param {object} options
-     *   Options for the field model.
-     */
-    initialize: function (options) {
-      // Store the original full HTML representation of this field.
+    initialize: function initialize(options) {
       this.set('html', options.el.outerHTML);
 
-      // Enlist field automatically in the associated entity's field collection.
       this.get('entity').get('fields').add(this);
 
-      // Automatically generate the logical field ID.
       this.set('logicalFieldID', this.get('fieldID').split('/').slice(0, 4).join('/'));
 
-      // Call Drupal.quickedit.BaseModel's initialize() method.
       Drupal.quickedit.BaseModel.prototype.initialize.call(this, options);
     },
 
-    /**
-     * Destroys the field model.
-     *
-     * @param {object} options
-     *   Options for the field model.
-     */
-    destroy: function (options) {
+    destroy: function destroy(options) {
       if (this.get('state') !== 'inactive') {
         throw new Error('FieldModel cannot be destroyed if it is not inactive state.');
       }
       Drupal.quickedit.BaseModel.prototype.destroy.call(this, options);
     },
 
-    /**
-     * @inheritdoc
-     */
-    sync: function () {
-      // We don't use REST updates to sync.
+    sync: function sync() {
       return;
     },
 
-    /**
-     * Validate function for the field model.
-     *
-     * @param {object} attrs
-     *   The attributes changes in the save or set call.
-     * @param {object} options
-     *   An object with the following option:
-     * @param {string} [options.reason]
-     *   A string that conveys a particular reason to allow for an exceptional
-     *   state change.
-     * @param {Array} options.accept-field-states
-     *   An array of strings that represent field states that the entities must
-     *   be in to validate. For example, if `accept-field-states` is
-     *   `['candidate', 'highlighted']`, then all the fields of the entity must
-     *   be in either of these two states for the save or set call to
-     *   validate and proceed.
-     *
-     * @return {string}
-     *   A string to say something about the state of the field model.
-     */
-    validate: function (attrs, options) {
+    validate: function validate(attrs, options) {
       var current = this.get('state');
       var next = attrs.state;
       if (current !== next) {
-        // Ensure it's a valid state.
         if (_.indexOf(this.constructor.states, next) === -1) {
           return '"' + next + '" is an invalid state';
         }
-        // Check if the acceptStateChange callback accepts it.
+
         if (!this.get('acceptStateChange')(current, next, options, this)) {
           return 'state change not accepted';
         }
       }
     },
 
-    /**
-     * Extracts the entity ID from this field's ID.
-     *
-     * @return {string}
-     *   An entity ID: a string of the format `<entity type>/<id>`.
-     */
-    getEntityID: function () {
+    getEntityID: function getEntityID() {
       return this.get('fieldID').split('/').slice(0, 2).join('/');
     },
 
-    /**
-     * Extracts the view mode ID from this field's ID.
-     *
-     * @return {string}
-     *   A view mode ID.
-     */
-    getViewMode: function () {
+    getViewMode: function getViewMode() {
       return this.get('fieldID').split('/').pop();
     },
 
-    /**
-     * Find other instances of this field with different view modes.
-     *
-     * @return {Array}
-     *   An array containing view mode IDs.
-     */
-    findOtherViewModes: function () {
+    findOtherViewModes: function findOtherViewModes() {
       var currentField = this;
       var otherViewModes = [];
-      Drupal.quickedit.collections.fields
-        // Find all instances of fields that display the same logical field
-        // (same entity, same field, just a different instance and maybe a
-        // different view mode).
-        .where({logicalFieldID: currentField.get('logicalFieldID')})
-        .forEach(function (field) {
-          // Ignore the current field.
-          if (field === currentField) {
-            return;
-          }
-          // Also ignore other fields with the same view mode.
-          else if (field.get('fieldID') === currentField.get('fieldID')) {
+      Drupal.quickedit.collections.fields.where({ logicalFieldID: currentField.get('logicalFieldID') }).forEach(function (field) {
+        if (field === currentField) {
+          return;
+        } else if (field.get('fieldID') === currentField.get('fieldID')) {
             return;
-          }
-          else {
+          } else {
             otherViewModes.push(field.getViewMode());
           }
-        });
+      });
       return otherViewModes;
     }
 
-  }, /** @lends Drupal.quickedit.FieldModel */{
-
-    /**
-     * Sequence of all possible states a field can be in during quickediting.
-     *
-     * @type {Array.<string>}
-     */
-    states: [
-      // The field associated with this FieldModel is linked to an EntityModel;
-      // the user can choose to start in-place editing that entity (and
-      // consequently this field). No in-place editor (EditorView) is associated
-      // with this field, because this field is not being in-place edited.
-      // This is both the initial (not yet in-place editing) and the end state
-      // (finished in-place editing).
-      'inactive',
-      // The user is in-place editing this entity, and this field is a
-      // candidate
-      // for in-place editing. In-place editor should not
-      // - Trigger: user.
-      // - Guarantees: entity is ready, in-place editor (EditorView) is
-      //   associated with the field.
-      // - Expected behavior: visual indicators
-      //   around the field indicate it is available for in-place editing, no
-      //   in-place editor presented yet.
-      'candidate',
-      // User is highlighting this field.
-      // - Trigger: user.
-      // - Guarantees: see 'candidate'.
-      // - Expected behavior: visual indicators to convey highlighting, in-place
-      //   editing toolbar shows field's label.
-      'highlighted',
-      // User has activated the in-place editing of this field; in-place editor
-      // is activating.
-      // - Trigger: user.
-      // - Guarantees: see 'candidate'.
-      // - Expected behavior: loading indicator, in-place editor is loading
-      //   remote data (e.g. retrieve form from back-end). Upon retrieval of
-      //   remote data, the in-place editor transitions the field's state to
-      //   'active'.
-      'activating',
-      // In-place editor has finished loading remote data; ready for use.
-      // - Trigger: in-place editor.
-      // - Guarantees: see 'candidate'.
-      // - Expected behavior: in-place editor for the field is ready for use.
-      'active',
-      // User has modified values in the in-place editor.
-      // - Trigger: user.
-      // - Guarantees: see 'candidate', plus in-place editor is ready for use.
-      // - Expected behavior: visual indicator of change.
-      'changed',
-      // User is saving changed field data in in-place editor to
-      // PrivateTempStore. The save mechanism of the in-place editor is called.
-      // - Trigger: user.
-      // - Guarantees: see 'candidate' and 'active'.
-      // - Expected behavior: saving indicator, in-place editor is saving field
-      //   data into PrivateTempStore. Upon successful saving (without
-      //   validation errors), the in-place editor transitions the field's state
-      //   to 'saved', but to 'invalid' upon failed saving (with validation
-      //   errors).
-      'saving',
-      // In-place editor has successfully saved the changed field.
-      // - Trigger: in-place editor.
-      // - Guarantees: see 'candidate' and 'active'.
-      // - Expected behavior: transition back to 'candidate' state because the
-      //   deed is done. Then: 1) transition to 'inactive' to allow the field
-      //   to be rerendered, 2) destroy the FieldModel (which also destroys
-      //   attached views like the EditorView), 3) replace the existing field
-      //   HTML with the existing HTML and 4) attach behaviors again so that the
-      //   field becomes available again for in-place editing.
-      'saved',
-      // In-place editor has failed to saved the changed field: there were
-      // validation errors.
-      // - Trigger: in-place editor.
-      // - Guarantees: see 'candidate' and 'active'.
-      // - Expected behavior: remain in 'invalid' state, let the user make more
-      //   changes so that he can save it again, without validation errors.
-      'invalid'
-    ],
+  }, {
+    states: ['inactive', 'candidate', 'highlighted', 'activating', 'active', 'changed', 'saving', 'saved', 'invalid'],
 
-    /**
-     * Indicates whether the 'from' state comes before the 'to' state.
-     *
-     * @param {string} from
-     *   One of {@link Drupal.quickedit.FieldModel.states}.
-     * @param {string} to
-     *   One of {@link Drupal.quickedit.FieldModel.states}.
-     *
-     * @return {bool}
-     *   Whether the 'from' state comes before the 'to' state.
-     */
-    followsStateSequence: function (from, to) {
+    followsStateSequence: function followsStateSequence(from, to) {
       return _.indexOf(this.states, from) < _.indexOf(this.states, to);
     }
 
   });
 
-  /**
-   * @constructor
-   *
-   * @augments Backbone.Collection
-   */
-  Drupal.quickedit.FieldCollection = Backbone.Collection.extend(/** @lends Drupal.quickedit.FieldCollection */{
-
-    /**
-     * @type {Drupal.quickedit.FieldModel}
-     */
+  Drupal.quickedit.FieldCollection = Backbone.Collection.extend({
     model: Drupal.quickedit.FieldModel
   });
-
-}(_, Backbone, Drupal));
+})(_, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/quickedit.js b/core/modules/quickedit/js/quickedit.es6.js
similarity index 100%
copy from core/modules/quickedit/js/quickedit.js
copy to core/modules/quickedit/js/quickedit.es6.js
diff --git a/core/modules/quickedit/js/quickedit.js b/core/modules/quickedit/js/quickedit.js
index 40bdd3e609..d2d45f5ae2 100644
--- a/core/modules/quickedit/js/quickedit.js
+++ b/core/modules/quickedit/js/quickedit.js
@@ -1,244 +1,97 @@
 /**
- * @file
- * Attaches behavior for the Quick Edit module.
- *
- * Everything happens asynchronously, to allow for:
- *   - dynamically rendered contextual links
- *   - asynchronously retrieved (and cached) per-field in-place editing metadata
- *   - asynchronous setup of in-place editable field and "Quick edit" link.
- *
- * To achieve this, there are several queues:
- *   - fieldsMetadataQueue: fields whose metadata still needs to be fetched.
- *   - fieldsAvailableQueue: queue of fields whose metadata is known, and for
- *     which it has been confirmed that the user has permission to edit them.
- *     However, FieldModels will only be created for them once there's a
- *     contextual link for their entity: when it's possible to initiate editing.
- *   - contextualLinksQueue: queue of contextual links on entities for which it
- *     is not yet known whether the user has permission to edit at >=1 of them.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/quickedit.es6.js
+* @preserve
+**/
 
 (function ($, _, Backbone, Drupal, drupalSettings, JSON, storage) {
 
   'use strict';
 
-  var options = $.extend(drupalSettings.quickedit,
-    // Merge strings on top of drupalSettings so that they are not mutable.
-    {
-      strings: {
-        quickEdit: Drupal.t('Quick edit')
-      }
+  var options = $.extend(drupalSettings.quickedit, {
+    strings: {
+      quickEdit: Drupal.t('Quick edit')
     }
-  );
-
-  /**
-   * Tracks fields without metadata. Contains objects with the following keys:
-   *   - DOM el
-   *   - String fieldID
-   *   - String entityID
-   */
+  });
+
   var fieldsMetadataQueue = [];
 
-  /**
-   * Tracks fields ready for use. Contains objects with the following keys:
-   *   - DOM el
-   *   - String fieldID
-   *   - String entityID
-   */
   var fieldsAvailableQueue = [];
 
-  /**
-   * Tracks contextual links on entities. Contains objects with the following
-   * keys:
-   *   - String entityID
-   *   - DOM el
-   *   - DOM region
-   */
   var contextualLinksQueue = [];
 
-  /**
-   * Tracks how many instances exist for each unique entity. Contains key-value
-   * pairs:
-   * - String entityID
-   * - Number count
-   */
   var entityInstancesTracker = {};
 
-  /**
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.quickedit = {
-    attach: function (context) {
-      // Initialize the Quick Edit app once per page load.
+    attach: function attach(context) {
       $('body').once('quickedit-init').each(initQuickEdit);
 
-      // Find all in-place editable fields, if any.
       var $fields = $(context).find('[data-quickedit-field-id]').once('quickedit');
       if ($fields.length === 0) {
         return;
       }
 
-      // Process each entity element: identical entities that appear multiple
-      // times will get a numeric identifier, starting at 0.
       $(context).find('[data-quickedit-entity-id]').once('quickedit').each(function (index, entityElement) {
         processEntity(entityElement);
       });
 
-      // Process each field element: queue to be used or to fetch metadata.
-      // When a field is being rerendered after editing, it will be processed
-      // immediately. New fields will be unable to be processed immediately,
-      // but will instead be queued to have their metadata fetched, which occurs
-      // below in fetchMissingMetaData().
       $fields.each(function (index, fieldElement) {
         processField(fieldElement);
       });
 
-      // Entities and fields on the page have been detected, try to set up the
-      // contextual links for those entities that already have the necessary
-      // meta- data in the client-side cache.
       contextualLinksQueue = _.filter(contextualLinksQueue, function (contextualLink) {
         return !initializeEntityContextualLink(contextualLink);
       });
 
-      // Fetch metadata for any fields that are queued to retrieve it.
       fetchMissingMetadata(function (fieldElementsWithFreshMetadata) {
-        // Metadata has been fetched, reprocess fields whose metadata was
-        // missing.
         _.each(fieldElementsWithFreshMetadata, processField);
 
-        // Metadata has been fetched, try to set up more contextual links now.
         contextualLinksQueue = _.filter(contextualLinksQueue, function (contextualLink) {
           return !initializeEntityContextualLink(contextualLink);
         });
       });
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         deleteContainedModelsAndQueues($(context));
       }
     }
   };
 
-  /**
-   *
-   * @namespace
-   */
   Drupal.quickedit = {
-
-    /**
-     * A {@link Drupal.quickedit.AppView} instance.
-     */
     app: null,
 
-    /**
-     * @type {object}
-     *
-     * @prop {Array.<Drupal.quickedit.EntityModel>} entities
-     * @prop {Array.<Drupal.quickedit.FieldModel>} fields
-     */
     collections: {
-      // All in-place editable entities (Drupal.quickedit.EntityModel) on the
-      // page.
       entities: null,
-      // All in-place editable fields (Drupal.quickedit.FieldModel) on the page.
+
       fields: null
     },
 
-    /**
-     * In-place editors will register themselves in this object.
-     *
-     * @namespace
-     */
     editors: {},
 
-    /**
-     * Per-field metadata that indicates whether in-place editing is allowed,
-     * which in-place editor should be used, etc.
-     *
-     * @namespace
-     */
     metadata: {
-
-      /**
-       * Check if a field exists in storage.
-       *
-       * @param {string} fieldID
-       *   The field id to check.
-       *
-       * @return {bool}
-       *   Whether it was found or not.
-       */
-      has: function (fieldID) {
+      has: function has(fieldID) {
         return storage.getItem(this._prefixFieldID(fieldID)) !== null;
       },
 
-      /**
-       * Add metadata to a field id.
-       *
-       * @param {string} fieldID
-       *   The field ID to add data to.
-       * @param {object} metadata
-       *   Metadata to add.
-       */
-      add: function (fieldID, metadata) {
+      add: function add(fieldID, metadata) {
         storage.setItem(this._prefixFieldID(fieldID), JSON.stringify(metadata));
       },
 
-      /**
-       * Get a key from a field id.
-       *
-       * @param {string} fieldID
-       *   The field ID to check.
-       * @param {string} [key]
-       *   The key to check. If empty, will return all metadata.
-       *
-       * @return {object|*}
-       *   The value for the key, if defined. Otherwise will return all metadata
-       *   for the specified field id.
-       *
-       */
-      get: function (fieldID, key) {
+      get: function get(fieldID, key) {
         var metadata = JSON.parse(storage.getItem(this._prefixFieldID(fieldID)));
-        return (typeof key === 'undefined') ? metadata : metadata[key];
+        return typeof key === 'undefined' ? metadata : metadata[key];
       },
 
-      /**
-       * Prefix the field id.
-       *
-       * @param {string} fieldID
-       *   The field id to prefix.
-       *
-       * @return {string}
-       *   A prefixed field id.
-       */
-      _prefixFieldID: function (fieldID) {
+      _prefixFieldID: function _prefixFieldID(fieldID) {
         return 'Drupal.quickedit.metadata.' + fieldID;
       },
 
-      /**
-       * Unprefix the field id.
-       *
-       * @param {string} fieldID
-       *   The field id to unprefix.
-       *
-       * @return {string}
-       *   An unprefixed field id.
-       */
-      _unprefixFieldID: function (fieldID) {
-        // Strip "Drupal.quickedit.metadata.", which is 26 characters long.
+      _unprefixFieldID: function _unprefixFieldID(fieldID) {
         return fieldID.substring(26);
       },
 
-      /**
-       * Intersection calculation.
-       *
-       * @param {Array} fieldIDs
-       *   An array of field ids to compare to prefix field id.
-       *
-       * @return {Array}
-       *   The intersection found.
-       */
-      intersection: function (fieldIDs) {
+      intersection: function intersection(fieldIDs) {
         var prefixedFieldIDs = _.map(fieldIDs, this._prefixFieldID);
         var intersection = _.intersection(prefixedFieldIDs, _.keys(sessionStorage));
         return _.map(intersection, this._unprefixFieldID);
@@ -246,8 +99,6 @@
     }
   };
 
-  // Clear the Quick Edit metadata cache whenever the current user's set of
-  // permissions changes.
   var permissionsHashKey = Drupal.quickedit.metadata._prefixFieldID('permissionsHash');
   var permissionsHashValue = storage.getItem(permissionsHashKey);
   var permissionsHash = drupalSettings.user.permissionsHash;
@@ -262,22 +113,8 @@
     storage.setItem(permissionsHashKey, permissionsHash);
   }
 
-  /**
-   * Detect contextual links on entities annotated by quickedit.
-   *
-   * Queue contextual links to be processed.
-   *
-   * @param {jQuery.Event} event
-   *   The `drupalContextualLinkAdded` event.
-   * @param {object} data
-   *   An object containing the data relevant to the event.
-   *
-   * @listens event:drupalContextualLinkAdded
-   */
   $(document).on('drupalContextualLinkAdded', function (event, data) {
     if (data.$region.is('[data-quickedit-entity-id]')) {
-      // If the contextual link is cached on the client side, an entity instance
-      // will not yet have been assigned. So assign one.
       if (!data.$region.is('[data-quickedit-entity-instance-id]')) {
         data.$region.once('quickedit');
         processEntity(data.$region.get(0));
@@ -288,40 +125,21 @@
         el: data.$el[0],
         region: data.$region[0]
       };
-      // Set up contextual links for this, otherwise queue it to be set up
-      // later.
+
       if (!initializeEntityContextualLink(contextualLink)) {
         contextualLinksQueue.push(contextualLink);
       }
     }
   });
 
-  /**
-   * Extracts the entity ID from a field ID.
-   *
-   * @param {string} fieldID
-   *   A field ID: a string of the format
-   *   `<entity type>/<id>/<field name>/<language>/<view mode>`.
-   *
-   * @return {string}
-   *   An entity ID: a string of the format `<entity type>/<id>`.
-   */
   function extractEntityID(fieldID) {
     return fieldID.split('/').slice(0, 2).join('/');
   }
 
-  /**
-   * Initialize the Quick Edit app.
-   *
-   * @param {HTMLElement} bodyElement
-   *   This document's body element.
-   */
   function initQuickEdit(bodyElement) {
     Drupal.quickedit.collections.entities = new Drupal.quickedit.EntityCollection();
     Drupal.quickedit.collections.fields = new Drupal.quickedit.FieldCollection();
 
-    // Instantiate AppModel (application state) and AppView, which is the
-    // controller of the whole in-place editing experience.
     Drupal.quickedit.app = new Drupal.quickedit.AppView({
       el: bodyElement,
       model: new Drupal.quickedit.AppModel(),
@@ -330,56 +148,32 @@
     });
   }
 
-  /**
-   * Assigns the entity an instance ID.
-   *
-   * @param {HTMLElement} entityElement
-   *   A Drupal Entity API entity's DOM element with a data-quickedit-entity-id
-   *   attribute.
-   */
   function processEntity(entityElement) {
     var entityID = entityElement.getAttribute('data-quickedit-entity-id');
     if (!entityInstancesTracker.hasOwnProperty(entityID)) {
       entityInstancesTracker[entityID] = 0;
-    }
-    else {
+    } else {
       entityInstancesTracker[entityID]++;
     }
 
-    // Set the calculated entity instance ID for this element.
     var entityInstanceID = entityInstancesTracker[entityID];
     entityElement.setAttribute('data-quickedit-entity-instance-id', entityInstanceID);
   }
 
-  /**
-   * Fetch the field's metadata; queue or initialize it (if EntityModel exists).
-   *
-   * @param {HTMLElement} fieldElement
-   *   A Drupal Field API field's DOM element with a data-quickedit-field-id
-   *   attribute.
-   */
   function processField(fieldElement) {
     var metadata = Drupal.quickedit.metadata;
     var fieldID = fieldElement.getAttribute('data-quickedit-field-id');
     var entityID = extractEntityID(fieldID);
-    // Figure out the instance ID by looking at the ancestor
-    // [data-quickedit-entity-id] element's data-quickedit-entity-instance-id
-    // attribute.
+
     var entityElementSelector = '[data-quickedit-entity-id="' + entityID + '"]';
     var entityElement = $(fieldElement).closest(entityElementSelector);
-    // In the case of a full entity view page, the entity title is rendered
-    // outside of "the entity DOM node": it's rendered as the page title. So in
-    // this case, we find the lowest common parent element (deepest in the tree)
-    // and consider that the entity element.
+
     if (entityElement.length === 0) {
       var $lowestCommonParent = $(entityElementSelector).parents().has(fieldElement).first();
       entityElement = $lowestCommonParent.find(entityElementSelector);
     }
-    var entityInstanceID = entityElement
-      .get(0)
-      .getAttribute('data-quickedit-entity-instance-id');
+    var entityInstanceID = entityElement.get(0).getAttribute('data-quickedit-entity-instance-id');
 
-    // Early-return if metadata for this field is missing.
     if (!metadata.has(fieldID)) {
       fieldsMetadataQueue.push({
         el: fieldElement,
@@ -389,35 +183,18 @@
       });
       return;
     }
-    // Early-return if the user is not allowed to in-place edit this field.
+
     if (metadata.get(fieldID, 'access') !== true) {
       return;
     }
 
-    // If an EntityModel for this field already exists (and hence also a "Quick
-    // edit" contextual link), then initialize it immediately.
-    if (Drupal.quickedit.collections.entities.findWhere({entityID: entityID, entityInstanceID: entityInstanceID})) {
+    if (Drupal.quickedit.collections.entities.findWhere({ entityID: entityID, entityInstanceID: entityInstanceID })) {
       initializeField(fieldElement, fieldID, entityID, entityInstanceID);
-    }
-    // Otherwise: queue the field. It is now available to be set up when its
-    // corresponding entity becomes in-place editable.
-    else {
-      fieldsAvailableQueue.push({el: fieldElement, fieldID: fieldID, entityID: entityID, entityInstanceID: entityInstanceID});
-    }
+    } else {
+        fieldsAvailableQueue.push({ el: fieldElement, fieldID: fieldID, entityID: entityID, entityInstanceID: entityInstanceID });
+      }
   }
 
-  /**
-   * Initialize a field; create FieldModel.
-   *
-   * @param {HTMLElement} fieldElement
-   *   The field's DOM element.
-   * @param {string} fieldID
-   *   The field's ID.
-   * @param {string} entityID
-   *   The field's entity's ID.
-   * @param {string} entityInstanceID
-   *   The field's entity's instance ID.
-   */
   function initializeField(fieldElement, fieldID, entityID, entityInstanceID) {
     var entity = Drupal.quickedit.collections.entities.findWhere({
       entityID: entityID,
@@ -426,7 +203,6 @@
 
     $(fieldElement).addClass('quickedit-field');
 
-    // The FieldModel stores the state of an in-place editable entity field.
     var field = new Drupal.quickedit.FieldModel({
       el: fieldElement,
       fieldID: fieldID,
@@ -436,25 +212,15 @@
       acceptStateChange: _.bind(Drupal.quickedit.app.acceptEditorStateChange, Drupal.quickedit.app)
     });
 
-    // Track all fields on the page.
     Drupal.quickedit.collections.fields.add(field);
   }
 
-  /**
-   * Fetches metadata for fields whose metadata is missing.
-   *
-   * Fields whose metadata is missing are tracked at fieldsMetadataQueue.
-   *
-   * @param {function} callback
-   *   A callback function that receives field elements whose metadata will just
-   *   have been fetched.
-   */
   function fetchMissingMetadata(callback) {
     if (fieldsMetadataQueue.length) {
       var fieldIDs = _.pluck(fieldsMetadataQueue, 'fieldID');
       var fieldElementsWithoutMetadata = _.pluck(fieldsMetadataQueue, 'el');
       var entityIDs = _.uniq(_.pluck(fieldsMetadataQueue, 'entityID'), true);
-      // Ensure we only request entityIDs for which we don't have metadata yet.
+
       entityIDs = _.difference(entityIDs, Drupal.quickedit.metadata.intersection(entityIDs));
       fieldsMetadataQueue = [];
 
@@ -466,8 +232,7 @@
           'entities[]': entityIDs
         },
         dataType: 'json',
-        success: function (results) {
-          // Store the metadata.
+        success: function success(results) {
           _.each(results, function (fieldMetadata, fieldID) {
             Drupal.quickedit.metadata.add(fieldID, fieldMetadata);
           });
@@ -478,16 +243,6 @@
     }
   }
 
-  /**
-   * Loads missing in-place editor's attachments (JavaScript and CSS files).
-   *
-   * Missing in-place editors are those whose fields are actively being used on
-   * the page but don't have.
-   *
-   * @param {function} callback
-   *   Callback function to be called when the missing in-place editors (if any)
-   *   have been inserted into the DOM. i.e. they may still be loading.
-   */
   function loadMissingEditors(callback) {
     var loadedEditors = _.keys(Drupal.quickedit.editors);
     var missingEditors = [];
@@ -495,11 +250,7 @@
       var metadata = Drupal.quickedit.metadata.get(fieldModel.get('fieldID'));
       if (metadata.access && _.indexOf(loadedEditors, metadata.editor) === -1) {
         missingEditors.push(metadata.editor);
-        // Set a stub, to prevent subsequent calls to loadMissingEditors() from
-        // loading the same in-place editor again. Loading an in-place editor
-        // requires talking to a server, to download its JavaScript, then
-        // executing its JavaScript, and only then its Drupal.quickedit.editors
-        // entry will be set.
+
         Drupal.quickedit.editors[metadata.editor] = false;
       }
     });
@@ -509,47 +260,23 @@
       return;
     }
 
-    // @see https://www.drupal.org/node/2029999.
-    // Create a Drupal.Ajax instance to load the form.
     var loadEditorsAjax = Drupal.ajax({
       url: Drupal.url('quickedit/attachments'),
-      submit: {'editors[]': missingEditors}
+      submit: { 'editors[]': missingEditors }
     });
-    // Implement a scoped insert AJAX command: calls the callback after all AJAX
-    // command functions have been executed (hence the deferred calling).
+
     var realInsert = Drupal.AjaxCommands.prototype.insert;
     loadEditorsAjax.commands.insert = function (ajax, response, status) {
       _.defer(callback);
       realInsert(ajax, response, status);
     };
-    // Trigger the AJAX request, which will should return AJAX commands to
-    // insert any missing attachments.
+
     loadEditorsAjax.execute();
   }
 
-  /**
-   * Attempts to set up a "Quick edit" link and corresponding EntityModel.
-   *
-   * @param {object} contextualLink
-   *   An object with the following properties:
-   *     - String entityID: a Quick Edit entity identifier, e.g. "node/1" or
-   *       "block_content/5".
-   *     - String entityInstanceID: a Quick Edit entity instance identifier,
-   *       e.g. 0, 1 or n (depending on whether it's the first, second, or n+1st
-   *       instance of this entity).
-   *     - DOM el: element pointing to the contextual links placeholder for this
-   *       entity.
-   *     - DOM region: element pointing to the contextual region of this entity.
-   *
-   * @return {bool}
-   *   Returns true when a contextual the given contextual link metadata can be
-   *   removed from the queue (either because the contextual link has been set
-   *   up or because it is certain that in-place editing is not allowed for any
-   *   of its fields). Returns false otherwise.
-   */
   function initializeEntityContextualLink(contextualLink) {
     var metadata = Drupal.quickedit.metadata;
-    // Check if the user has permission to edit at least one of them.
+
     function hasFieldWithPermission(fieldIDs) {
       for (var i = 0; i < fieldIDs.length; i++) {
         var fieldID = fieldIDs[i];
@@ -560,106 +287,72 @@
       return false;
     }
 
-    // Checks if the metadata for all given field IDs exists.
     function allMetadataExists(fieldIDs) {
       return fieldIDs.length === metadata.intersection(fieldIDs).length;
     }
 
-    // Find all fields for this entity instance and collect their field IDs.
     var fields = _.where(fieldsAvailableQueue, {
       entityID: contextualLink.entityID,
       entityInstanceID: contextualLink.entityInstanceID
     });
     var fieldIDs = _.pluck(fields, 'fieldID');
 
-    // No fields found yet.
     if (fieldIDs.length === 0) {
       return false;
-    }
-    // The entity for the given contextual link contains at least one field that
-    // the current user may edit in-place; instantiate EntityModel,
-    // EntityDecorationView and ContextualLinkView.
-    else if (hasFieldWithPermission(fieldIDs)) {
-      var entityModel = new Drupal.quickedit.EntityModel({
-        el: contextualLink.region,
-        entityID: contextualLink.entityID,
-        entityInstanceID: contextualLink.entityInstanceID,
-        id: contextualLink.entityID + '[' + contextualLink.entityInstanceID + ']',
-        label: Drupal.quickedit.metadata.get(contextualLink.entityID, 'label')
-      });
-      Drupal.quickedit.collections.entities.add(entityModel);
-      // Create an EntityDecorationView associated with the root DOM node of the
-      // entity.
-      var entityDecorationView = new Drupal.quickedit.EntityDecorationView({
-        el: contextualLink.region,
-        model: entityModel
-      });
-      entityModel.set('entityDecorationView', entityDecorationView);
+    } else if (hasFieldWithPermission(fieldIDs)) {
+        var entityModel = new Drupal.quickedit.EntityModel({
+          el: contextualLink.region,
+          entityID: contextualLink.entityID,
+          entityInstanceID: contextualLink.entityInstanceID,
+          id: contextualLink.entityID + '[' + contextualLink.entityInstanceID + ']',
+          label: Drupal.quickedit.metadata.get(contextualLink.entityID, 'label')
+        });
+        Drupal.quickedit.collections.entities.add(entityModel);
 
-      // Initialize all queued fields within this entity (creates FieldModels).
-      _.each(fields, function (field) {
-        initializeField(field.el, field.fieldID, contextualLink.entityID, contextualLink.entityInstanceID);
-      });
-      fieldsAvailableQueue = _.difference(fieldsAvailableQueue, fields);
-
-      // Initialization should only be called once. Use Underscore's once method
-      // to get a one-time use version of the function.
-      var initContextualLink = _.once(function () {
-        var $links = $(contextualLink.el).find('.contextual-links');
-        var contextualLinkView = new Drupal.quickedit.ContextualLinkView($.extend({
-          el: $('<li class="quickedit"><a href="" role="button" aria-pressed="false"></a></li>').prependTo($links),
-          model: entityModel,
-          appModel: Drupal.quickedit.app.model
-        }, options));
-        entityModel.set('contextualLinkView', contextualLinkView);
-      });
+        var entityDecorationView = new Drupal.quickedit.EntityDecorationView({
+          el: contextualLink.region,
+          model: entityModel
+        });
+        entityModel.set('entityDecorationView', entityDecorationView);
+
+        _.each(fields, function (field) {
+          initializeField(field.el, field.fieldID, contextualLink.entityID, contextualLink.entityInstanceID);
+        });
+        fieldsAvailableQueue = _.difference(fieldsAvailableQueue, fields);
+
+        var initContextualLink = _.once(function () {
+          var $links = $(contextualLink.el).find('.contextual-links');
+          var contextualLinkView = new Drupal.quickedit.ContextualLinkView($.extend({
+            el: $('<li class="quickedit"><a href="" role="button" aria-pressed="false"></a></li>').prependTo($links),
+            model: entityModel,
+            appModel: Drupal.quickedit.app.model
+          }, options));
+          entityModel.set('contextualLinkView', contextualLinkView);
+        });
 
-      // Set up ContextualLinkView after loading any missing in-place editors.
-      loadMissingEditors(initContextualLink);
+        loadMissingEditors(initContextualLink);
 
-      return true;
-    }
-    // There was not at least one field that the current user may edit in-place,
-    // even though the metadata for all fields within this entity is available.
-    else if (allMetadataExists(fieldIDs)) {
-      return true;
-    }
+        return true;
+      } else if (allMetadataExists(fieldIDs)) {
+          return true;
+        }
 
     return false;
   }
 
-  /**
-   * Delete models and queue items that are contained within a given context.
-   *
-   * Deletes any contained EntityModels (plus their associated FieldModels and
-   * ContextualLinkView) and FieldModels, as well as the corresponding queues.
-   *
-   * After EntityModels, FieldModels must also be deleted, because it is
-   * possible in Drupal for a field DOM element to exist outside of the entity
-   * DOM element, e.g. when viewing the full node, the title of the node is not
-   * rendered within the node (the entity) but as the page title.
-   *
-   * Note: this will not delete an entity that is actively being in-place
-   * edited.
-   *
-   * @param {jQuery} $context
-   *   The context within which to delete.
-   */
   function deleteContainedModelsAndQueues($context) {
     $context.find('[data-quickedit-entity-id]').addBack('[data-quickedit-entity-id]').each(function (index, entityElement) {
-      // Delete entity model.
-      var entityModel = Drupal.quickedit.collections.entities.findWhere({el: entityElement});
+      var entityModel = Drupal.quickedit.collections.entities.findWhere({ el: entityElement });
       if (entityModel) {
         var contextualLinkView = entityModel.get('contextualLinkView');
         contextualLinkView.undelegateEvents();
         contextualLinkView.remove();
-        // Remove the EntityDecorationView.
+
         entityModel.get('entityDecorationView').remove();
-        // Destroy the EntityModel; this will also destroy its FieldModels.
+
         entityModel.destroy();
       }
 
-      // Filter queue.
       function hasOtherRegion(contextualLink) {
         return contextualLink.region !== entityElement;
       }
@@ -668,12 +361,10 @@
     });
 
     $context.find('[data-quickedit-field-id]').addBack('[data-quickedit-field-id]').each(function (index, fieldElement) {
-      // Delete field models.
-      Drupal.quickedit.collections.fields.chain()
-        .filter(function (fieldModel) { return fieldModel.get('el') === fieldElement; })
-        .invoke('destroy');
+      Drupal.quickedit.collections.fields.chain().filter(function (fieldModel) {
+        return fieldModel.get('el') === fieldElement;
+      }).invoke('destroy');
 
-      // Filter queues.
       function hasOtherFieldElement(field) {
         return field.el !== fieldElement;
       }
@@ -682,5 +373,4 @@
       fieldsAvailableQueue = _.filter(fieldsAvailableQueue, hasOtherFieldElement);
     });
   }
-
-})(jQuery, _, Backbone, Drupal, drupalSettings, window.JSON, window.sessionStorage);
+})(jQuery, _, Backbone, Drupal, drupalSettings, window.JSON, window.sessionStorage);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.es6.js
similarity index 100%
copy from core/modules/quickedit/js/theme.js
copy to core/modules/quickedit/js/theme.es6.js
diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js
index 93dc3f238d..ecfa096326 100644
--- a/core/modules/quickedit/js/theme.js
+++ b/core/modules/quickedit/js/theme.js
@@ -1,40 +1,19 @@
 /**
- * @file
- * Provides theme functions for all of Quick Edit's client-side HTML.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/theme.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Theme function for a "backstage" for the Quick Edit module.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.id
-   *   The id to apply to the backstage.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditBackstage = function (settings) {
     var html = '';
     html += '<div id="' + settings.id + '" />';
     return html;
   };
 
-  /**
-   * Theme function for a toolbar container of the Quick Edit module.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.id
-   *   the id to apply to the backstage.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditEntityToolbar = function (settings) {
     var html = '';
     html += '<div id="' + settings.id + '" class="quickedit quickedit-toolbar-container clearfix">';
@@ -48,67 +27,20 @@
     return html;
   };
 
-  /**
-   * Theme function for a toolbar container of the Quick Edit module.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.entityLabel
-   *   The title of the active entity.
-   * @param {string} settings.fieldLabel
-   *   The label of the highlighted or active field.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditEntityToolbarLabel = function (settings) {
-    // @todo Add XSS regression test coverage in https://www.drupal.org/node/2547437
     return '<span class="field">' + Drupal.checkPlain(settings.fieldLabel) + '</span>' + Drupal.checkPlain(settings.entityLabel);
   };
 
-  /**
-   * Element defining a containing box for the placement of the entity toolbar.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditEntityToolbarFence = function () {
     return '<div id="quickedit-toolbar-fence" />';
   };
 
-  /**
-   * Theme function for a toolbar container of the Quick Edit module.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.id
-   *   The id to apply to the toolbar container.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditFieldToolbar = function (settings) {
     return '<div id="' + settings.id + '" />';
   };
 
-  /**
-   * Theme function for a toolbar toolgroup of the Quick Edit module.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} [settings.id]
-   *   The id of the toolgroup.
-   * @param {string} settings.classes
-   *   The class of the toolgroup.
-   * @param {Array} settings.buttons
-   *   See {@link Drupal.theme.quickeditButtons}.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditToolgroup = function (settings) {
-    // Classes.
-    var classes = (settings.classes || []);
+    var classes = settings.classes || [];
     classes.unshift('quickedit-toolgroup');
     var html = '';
     html += '<div class="' + classes.join(' ') + '"';
@@ -116,27 +48,11 @@
       html += ' id="' + settings.id + '"';
     }
     html += '>';
-    html += Drupal.theme('quickeditButtons', {buttons: settings.buttons});
+    html += Drupal.theme('quickeditButtons', { buttons: settings.buttons });
     html += '</div>';
     return html;
   };
 
-  /**
-   * Theme function for buttons of the Quick Edit module.
-   *
-   * Can be used for the buttons both in the toolbar toolgroups and in the
-   * modal.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {Array} settings.buttons
-   * - String type: the type of the button (defaults to 'button')
-   * - Array classes: the classes of the button.
-   * - String label: the label of the button.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditButtons = function (settings) {
     var html = '';
     for (var i = 0; i < settings.buttons.length; i++) {
@@ -144,12 +60,12 @@
       if (!button.hasOwnProperty('type')) {
         button.type = 'button';
       }
-      // Attributes.
+
       var attributes = [];
       var attrMap = settings.buttons[i].attributes || {};
       for (var attr in attrMap) {
         if (attrMap.hasOwnProperty(attr)) {
-          attributes.push(attr + ((attrMap[attr]) ? '="' + attrMap[attr] + '"' : ''));
+          attributes.push(attr + (attrMap[attr] ? '="' + attrMap[attr] + '"' : ''));
         }
       }
       html += '<button type="' + button.type + '" class="' + button.classes + '"' + ' ' + attributes.join(' ') + '>';
@@ -159,19 +75,6 @@
     return html;
   };
 
-  /**
-   * Theme function for a form container of the Quick Edit module.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.id
-   *   The id to apply to the toolbar container.
-   * @param {string} settings.loadingMsg
-   *   The message to show while loading.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
   Drupal.theme.quickeditFormContainer = function (settings) {
     var html = '';
     html += '<div id="' + settings.id + '" class="quickedit-form-container">';
@@ -183,5 +86,4 @@
     html += '</div>';
     return html;
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/util.js b/core/modules/quickedit/js/util.es6.js
similarity index 100%
copy from core/modules/quickedit/js/util.js
copy to core/modules/quickedit/js/util.es6.js
diff --git a/core/modules/quickedit/js/util.js b/core/modules/quickedit/js/util.js
index 4b0a4c43e6..5c16beaf6f 100644
--- a/core/modules/quickedit/js/util.js
+++ b/core/modules/quickedit/js/util.js
@@ -1,45 +1,19 @@
 /**
- * @file
- * Provides utility functions for Quick Edit.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/util.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * @namespace
-   */
   Drupal.quickedit.util = Drupal.quickedit.util || {};
 
-  /**
-   * @namespace
-   */
   Drupal.quickedit.util.constants = {};
 
-  /**
-   *
-   * @type {string}
-   */
   Drupal.quickedit.util.constants.transitionEnd = 'transitionEnd.quickedit webkitTransitionEnd.quickedit transitionend.quickedit msTransitionEnd.quickedit oTransitionEnd.quickedit';
 
-  /**
-   * Converts a field id into a formatted url path.
-   *
-   * @example
-   * Drupal.quickedit.util.buildUrl(
-   *   'node/1/body/und/full',
-   *   '/quickedit/form/!entity_type/!id/!field_name/!langcode/!view_mode'
-   * );
-   *
-   * @param {string} id
-   *   The id of an editable field.
-   * @param {string} urlFormat
-   *   The Controller route for field processing.
-   *
-   * @return {string}
-   *   The formatted URL.
-   */
   Drupal.quickedit.util.buildUrl = function (id, urlFormat) {
     var parts = id.split('/');
     return Drupal.formatString(decodeURIComponent(urlFormat), {
@@ -51,117 +25,57 @@
     });
   };
 
-  /**
-   * Shows a network error modal dialog.
-   *
-   * @param {string} title
-   *   The title to use in the modal dialog.
-   * @param {string} message
-   *   The message to use in the modal dialog.
-   */
   Drupal.quickedit.util.networkErrorModal = function (title, message) {
     var $message = $('<div>' + message + '</div>');
     var networkErrorModal = Drupal.dialog($message.get(0), {
       title: title,
       dialogClass: 'quickedit-network-error',
-      buttons: [
-        {
-          text: Drupal.t('OK'),
-          click: function () {
-            networkErrorModal.close();
-          },
-          primary: true
-        }
-      ],
-      create: function () {
+      buttons: [{
+        text: Drupal.t('OK'),
+        click: function click() {
+          networkErrorModal.close();
+        },
+        primary: true
+      }],
+      create: function create() {
         $(this).parent().find('.ui-dialog-titlebar-close').remove();
       },
-      close: function (event) {
-        // Automatically destroy the DOM element that was used for the dialog.
+      close: function close(event) {
         $(event.target).remove();
       }
     });
     networkErrorModal.showModal();
   };
 
-  /**
-   * @namespace
-   */
   Drupal.quickedit.util.form = {
-
-    /**
-     * Loads a form, calls a callback to insert.
-     *
-     * Leverages {@link Drupal.Ajax}' ability to have scoped (per-instance)
-     * command implementations to be able to call a callback.
-     *
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {string} options.fieldID
-     *   The field ID that uniquely identifies the field for which this form
-     *   will be loaded.
-     * @param {bool} options.nocssjs
-     *   Boolean indicating whether no CSS and JS should be returned (necessary
-     *   when the form is invisible to the user).
-     * @param {bool} options.reset
-     *   Boolean indicating whether the data stored for this field's entity in
-     *   PrivateTempStore should be used or reset.
-     * @param {function} callback
-     *   A callback function that will receive the form to be inserted, as well
-     *   as the ajax object, necessary if the callback wants to perform other
-     *   Ajax commands.
-     */
-    load: function (options, callback) {
+    load: function load(options, callback) {
       var fieldID = options.fieldID;
 
-      // Create a Drupal.ajax instance to load the form.
       var formLoaderAjax = Drupal.ajax({
         url: Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/form/!entity_type/!id/!field_name/!langcode/!view_mode')),
         submit: {
           nocssjs: options.nocssjs,
           reset: options.reset
         },
-        error: function (xhr, url) {
-          // Show a modal to inform the user of the network error.
+        error: function error(xhr, url) {
           var fieldLabel = Drupal.quickedit.metadata.get(fieldID, 'label');
-          var message = Drupal.t('Could not load the form for <q>@field-label</q>, either due to a website problem or a network connection problem.<br>Please try again.', {'@field-label': fieldLabel});
+          var message = Drupal.t('Could not load the form for <q>@field-label</q>, either due to a website problem or a network connection problem.<br>Please try again.', { '@field-label': fieldLabel });
           Drupal.quickedit.util.networkErrorModal(Drupal.t('Network problem!'), message);
 
-          // Change the state back to "candidate", to allow the user to start
-          // in-place editing of the field again.
           var fieldModel = Drupal.quickedit.app.model.get('activeField');
           fieldModel.set('state', 'candidate');
         }
       });
-      // Implement a scoped quickeditFieldForm AJAX command: calls the callback.
+
       formLoaderAjax.commands.quickeditFieldForm = function (ajax, response, status) {
         callback(response.data, ajax);
         Drupal.ajax.instances[this.instanceIndex] = null;
       };
-      // This will ensure our scoped quickeditFieldForm AJAX command gets
-      // called.
+
       formLoaderAjax.execute();
     },
 
-    /**
-     * Creates a {@link Drupal.Ajax} instance that is used to save a form.
-     *
-     * @param {object} options
-     *   Submit options to the form.
-     * @param {bool} options.nocssjs
-     *   Boolean indicating whether no CSS and JS should be returned (necessary
-     *   when the form is invisible to the user).
-     * @param {Array.<string>} options.other_view_modes
-     *   Array containing view mode IDs (of other instances of this field on the
-     *   page).
-     * @param {jQuery} $submit
-     *   The submit element.
-     *
-     * @return {Drupal.Ajax}
-     *   A {@link Drupal.Ajax} instance.
-     */
-    ajaxifySaving: function (options, $submit) {
-      // Re-wire the form to handle submit.
+    ajaxifySaving: function ajaxifySaving(options, $submit) {
       var settings = {
         url: $submit.closest('form').attr('action'),
         setClick: true,
@@ -172,18 +86,7 @@
           other_view_modes: options.other_view_modes
         },
 
-        /**
-         * Reimplement the success handler.
-         *
-         * Ensure {@link Drupal.attachBehaviors} does not get called on the
-         * form.
-         *
-         * @param {Drupal.AjaxCommands~commandDefinition} response
-         *   The Drupal AJAX response.
-         * @param {number} [status]
-         *   The HTTP status code.
-         */
-        success: function (response, status) {
+        success: function success(response, status) {
           for (var i in response) {
             if (response.hasOwnProperty(i) && response[i].command && this.commands[response[i].command]) {
               this.commands[response[i].command](this, response[i], status);
@@ -197,17 +100,9 @@
       return Drupal.ajax(settings);
     },
 
-    /**
-     * Cleans up the {@link Drupal.Ajax} instance that is used to save the form.
-     *
-     * @param {Drupal.Ajax} ajax
-     *   A {@link Drupal.Ajax} instance that was returned by
-     *   {@link Drupal.quickedit.form.ajaxifySaving}.
-     */
-    unajaxifySaving: function (ajax) {
+    unajaxifySaving: function unajaxifySaving(ajax) {
       $(ajax.element).off('click.quickedit');
     }
 
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/AppView.js b/core/modules/quickedit/js/views/AppView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/AppView.js
copy to core/modules/quickedit/js/views/AppView.es6.js
diff --git a/core/modules/quickedit/js/views/AppView.js b/core/modules/quickedit/js/views/AppView.js
index b09a110b8b..1bf38c90e8 100644
--- a/core/modules/quickedit/js/views/AppView.js
+++ b/core/modules/quickedit/js/views/AppView.js
@@ -1,91 +1,52 @@
 /**
- * @file
- * A Backbone View that controls the overall "in-place editing application".
- *
- * @see Drupal.quickedit.AppModel
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/AppView.es6.js
+* @preserve
+**/
 
 (function ($, _, Backbone, Drupal) {
 
   'use strict';
 
-  // Indicates whether the page should be reloaded after in-place editing has
-  // shut down. A page reload is necessary to re-instate the original HTML of
-  // the edited fields if in-place editing has been canceled and one or more of
-  // the entity's fields were saved to PrivateTempStore: one of them may have
-  // been changed to the empty value and hence may have been rerendered as the
-  // empty string, which makes it impossible for Quick Edit to know where to
-  // restore the original HTML.
   var reload = false;
 
-  Drupal.quickedit.AppView = Backbone.View.extend(/** @lends Drupal.quickedit.AppView# */{
-
-    /**
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {Drupal.quickedit.AppModel} options.model
-     *   The application state model.
-     * @param {Drupal.quickedit.EntityCollection} options.entitiesCollection
-     *   All on-page entities.
-     * @param {Drupal.quickedit.FieldCollection} options.fieldsCollection
-     *   All on-page fields
-     */
-    initialize: function (options) {
-      // AppView's configuration for handling states.
-      // @see Drupal.quickedit.FieldModel.states
+  Drupal.quickedit.AppView = Backbone.View.extend({
+    initialize: function initialize(options) {
       this.activeFieldStates = ['activating', 'active'];
       this.singleFieldStates = ['highlighted', 'activating', 'active'];
       this.changedFieldStates = ['changed', 'saving', 'saved', 'invalid'];
       this.readyFieldStates = ['candidate', 'highlighted'];
 
-      // Track app state.
       this.listenTo(options.entitiesCollection, 'change:state', this.appStateChange);
       this.listenTo(options.entitiesCollection, 'change:isActive', this.enforceSingleActiveEntity);
 
-      // Track app state.
       this.listenTo(options.fieldsCollection, 'change:state', this.editorStateChange);
-      // Respond to field model HTML representation change events.
+
       this.listenTo(options.fieldsCollection, 'change:html', this.renderUpdatedField);
       this.listenTo(options.fieldsCollection, 'change:html', this.propagateUpdatedField);
-      // Respond to addition.
+
       this.listenTo(options.fieldsCollection, 'add', this.rerenderedFieldToCandidate);
-      // Respond to destruction.
+
       this.listenTo(options.fieldsCollection, 'destroy', this.teardownEditor);
     },
 
-    /**
-     * Handles setup/teardown and state changes when the active entity changes.
-     *
-     * @param {Drupal.quickedit.EntityModel} entityModel
-     *   An instance of the EntityModel class.
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.EntityModel.states}.
-     */
-    appStateChange: function (entityModel, state) {
+    appStateChange: function appStateChange(entityModel, state) {
       var app = this;
       var entityToolbarView;
       switch (state) {
         case 'launching':
           reload = false;
-          // First, create an entity toolbar view.
+
           entityToolbarView = new Drupal.quickedit.EntityToolbarView({
             model: entityModel,
             appModel: this.model
           });
           entityModel.toolbarView = entityToolbarView;
-          // Second, set up in-place editors.
-          // They must be notified of state changes, hence this must happen
-          // while the associated fields are still in the 'inactive' state.
+
           entityModel.get('fields').each(function (fieldModel) {
             app.setupEditor(fieldModel);
           });
-          // Third, transition the entity to the 'opening' state, which will
-          // transition all fields from 'inactive' to 'candidate'.
+
           _.defer(function () {
             entityModel.set('state', 'opening');
           });
@@ -93,17 +54,16 @@
 
         case 'closed':
           entityToolbarView = entityModel.toolbarView;
-          // First, tear down the in-place editors.
+
           entityModel.get('fields').each(function (fieldModel) {
             app.teardownEditor(fieldModel);
           });
-          // Second, tear down the entity toolbar view.
+
           if (entityToolbarView) {
             entityToolbarView.remove();
             delete entityModel.toolbarView;
           }
-          // A page reload may be necessary to re-instate the original HTML of
-          // the edited fields.
+
           if (reload) {
             reload = false;
             location.reload();
@@ -112,156 +72,77 @@
       }
     },
 
-    /**
-     * Accepts or reject editor (Editor) state changes.
-     *
-     * This is what ensures that the app is in control of what happens.
-     *
-     * @param {string} from
-     *   The previous state.
-     * @param {string} to
-     *   The new state.
-     * @param {null|object} context
-     *   The context that is trying to trigger the state change.
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The fieldModel to which this change applies.
-     *
-     * @return {bool}
-     *   Whether the editor change was accepted or rejected.
-     */
-    acceptEditorStateChange: function (from, to, context, fieldModel) {
+    acceptEditorStateChange: function acceptEditorStateChange(from, to, context, fieldModel) {
       var accept = true;
 
-      // If the app is in view mode, then reject all state changes except for
-      // those to 'inactive'.
       if (context && (context.reason === 'stop' || context.reason === 'rerender')) {
         if (from === 'candidate' && to === 'inactive') {
           accept = true;
         }
-      }
-      // Handling of edit mode state changes is more granular.
-      else {
-        // In general, enforce the states sequence. Disallow going back from a
-        // "later" state to an "earlier" state, except in explicitly allowed
-        // cases.
-        if (!Drupal.quickedit.FieldModel.followsStateSequence(from, to)) {
-          accept = false;
-          // Allow: activating/active -> candidate.
-          // Necessary to stop editing a field.
-          if (_.indexOf(this.activeFieldStates, from) !== -1 && to === 'candidate') {
-            accept = true;
-          }
-          // Allow: changed/invalid -> candidate.
-          // Necessary to stop editing a field when it is changed or invalid.
-          else if ((from === 'changed' || from === 'invalid') && to === 'candidate') {
-            accept = true;
-          }
-          // Allow: highlighted -> candidate.
-          // Necessary to stop highlighting a field.
-          else if (from === 'highlighted' && to === 'candidate') {
-            accept = true;
-          }
-          // Allow: saved -> candidate.
-          // Necessary when successfully saved a field.
-          else if (from === 'saved' && to === 'candidate') {
-            accept = true;
-          }
-          // Allow: invalid -> saving.
-          // Necessary to be able to save a corrected, invalid field.
-          else if (from === 'invalid' && to === 'saving') {
-            accept = true;
-          }
-          // Allow: invalid -> activating.
-          // Necessary to be able to correct a field that turned out to be
-          // invalid after the user already had moved on to the next field
-          // (which we explicitly allow to have a fluent UX).
-          else if (from === 'invalid' && to === 'activating') {
-            accept = true;
-          }
-        }
-
-        // If it's not against the general principle, then here are more
-        // disallowed cases to check.
-        if (accept) {
-          var activeField;
-          var activeFieldState;
-          // Ensure only one field (editor) at a time is active … but allow a
-          // user to hop from one field to the next, even if we still have to
-          // start saving the field that is currently active: assume it will be
-          // valid, to allow for a fluent UX. (If it turns out to be invalid,
-          // this block of code also handles that.)
-          if ((this.readyFieldStates.indexOf(from) !== -1 || from === 'invalid') && this.activeFieldStates.indexOf(to) !== -1) {
-            activeField = this.model.get('activeField');
-            if (activeField && activeField !== fieldModel) {
-              activeFieldState = activeField.get('state');
-              // Allow the state change. If the state of the active field is:
-              // - 'activating' or 'active': change it to 'candidate'
-              // - 'changed' or 'invalid': change it to 'saving'
-              // - 'saving' or 'saved': don't do anything.
-              if (this.activeFieldStates.indexOf(activeFieldState) !== -1) {
-                activeField.set('state', 'candidate');
-              }
-              else if (activeFieldState === 'changed' || activeFieldState === 'invalid') {
-                activeField.set('state', 'saving');
-              }
+      } else {
+          if (!Drupal.quickedit.FieldModel.followsStateSequence(from, to)) {
+            accept = false;
 
-              // If the field that's being activated is in fact already in the
-              // invalid state (which can only happen because above we allowed
-              // the user to move on to another field to allow for a fluent UX;
-              // we assumed it would be saved successfully), then we shouldn't
-              // allow the field to enter the 'activating' state, instead, we
-              // simply change the active editor. All guarantees and
-              // assumptions for this field still hold!
-              if (from === 'invalid') {
-                this.model.set('activeField', fieldModel);
-                accept = false;
-              }
-              // Do not reject: the field is either in the 'candidate' or
-              // 'highlighted' state and we allow it to enter the 'activating'
-              // state!
-            }
-          }
-          // Reject going from activating/active to candidate because of a
-          // mouseleave.
-          else if (_.indexOf(this.activeFieldStates, from) !== -1 && to === 'candidate') {
-            if (context && context.reason === 'mouseleave') {
-              accept = false;
-            }
-          }
-          // When attempting to stop editing a changed/invalid property, ask for
-          // confirmation.
-          else if ((from === 'changed' || from === 'invalid') && to === 'candidate') {
-            if (context && context.reason === 'mouseleave') {
-              accept = false;
-            }
-            else {
-              // Check whether the transition has been confirmed?
-              if (context && context.confirmed) {
+            if (_.indexOf(this.activeFieldStates, from) !== -1 && to === 'candidate') {
+              accept = true;
+            } else if ((from === 'changed' || from === 'invalid') && to === 'candidate') {
                 accept = true;
+              } else if (from === 'highlighted' && to === 'candidate') {
+                  accept = true;
+                } else if (from === 'saved' && to === 'candidate') {
+                    accept = true;
+                  } else if (from === 'invalid' && to === 'saving') {
+                      accept = true;
+                    } else if (from === 'invalid' && to === 'activating') {
+                        accept = true;
+                      }
+          }
+
+          if (accept) {
+            var activeField;
+            var activeFieldState;
+
+            if ((this.readyFieldStates.indexOf(from) !== -1 || from === 'invalid') && this.activeFieldStates.indexOf(to) !== -1) {
+              activeField = this.model.get('activeField');
+              if (activeField && activeField !== fieldModel) {
+                activeFieldState = activeField.get('state');
+
+                if (this.activeFieldStates.indexOf(activeFieldState) !== -1) {
+                  activeField.set('state', 'candidate');
+                } else if (activeFieldState === 'changed' || activeFieldState === 'invalid') {
+                  activeField.set('state', 'saving');
+                }
+
+                if (from === 'invalid') {
+                  this.model.set('activeField', fieldModel);
+                  accept = false;
+                }
               }
-            }
+            } else if (_.indexOf(this.activeFieldStates, from) !== -1 && to === 'candidate') {
+                if (context && context.reason === 'mouseleave') {
+                  accept = false;
+                }
+              } else if ((from === 'changed' || from === 'invalid') && to === 'candidate') {
+                  if (context && context.reason === 'mouseleave') {
+                    accept = false;
+                  } else {
+                    if (context && context.confirmed) {
+                      accept = true;
+                    }
+                  }
+                }
           }
         }
-      }
 
       return accept;
     },
 
-    /**
-     * Sets up the in-place editor for the given field.
-     *
-     * Must happen before the fieldModel's state is changed to 'candidate'.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The field for which an in-place editor must be set up.
-     */
-    setupEditor: function (fieldModel) {
-      // Get the corresponding entity toolbar.
+    setupEditor: function setupEditor(fieldModel) {
       var entityModel = fieldModel.get('entity');
       var entityToolbarView = entityModel.toolbarView;
-      // Get the field toolbar DOM root from the entity toolbar.
+
       var fieldToolbarRoot = entityToolbarView.getToolbarRoot();
-      // Create in-place editor.
+
       var editorName = fieldModel.get('metadata').editor;
       var editorModel = new Drupal.quickedit.EditorModel();
       var editorView = new Drupal.quickedit.editors[editorName]({
@@ -270,9 +151,6 @@
         fieldModel: fieldModel
       });
 
-      // Create in-place editor's toolbar for this field — stored inside the
-      // entity toolbar, the entity toolbar will position itself appropriately
-      // above (or below) the edited element.
       var toolbarView = new Drupal.quickedit.FieldToolbarView({
         el: fieldToolbarRoot,
         model: fieldModel,
@@ -281,77 +159,46 @@
         entityModel: entityModel
       });
 
-      // Create decoration for edited element: padding if necessary, sets
-      // classes on the element to style it according to the current state.
       var decorationView = new Drupal.quickedit.FieldDecorationView({
         el: $(editorView.getEditedElement()),
         model: fieldModel,
         editorView: editorView
       });
 
-      // Track these three views in FieldModel so that we can tear them down
-      // correctly.
       fieldModel.editorView = editorView;
       fieldModel.toolbarView = toolbarView;
       fieldModel.decorationView = decorationView;
     },
 
-    /**
-     * Tears down the in-place editor for the given field.
-     *
-     * Must happen after the fieldModel's state is changed to 'inactive'.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The field for which an in-place editor must be torn down.
-     */
-    teardownEditor: function (fieldModel) {
-      // Early-return if this field was not yet decorated.
+    teardownEditor: function teardownEditor(fieldModel) {
       if (typeof fieldModel.editorView === 'undefined') {
         return;
       }
 
-      // Unbind event handlers; remove toolbar element; delete toolbar view.
       fieldModel.toolbarView.remove();
       delete fieldModel.toolbarView;
 
-      // Unbind event handlers; delete decoration view. Don't remove the element
-      // because that would remove the field itself.
       fieldModel.decorationView.remove();
       delete fieldModel.decorationView;
 
-      // Unbind event handlers; delete editor view. Don't remove the element
-      // because that would remove the field itself.
       fieldModel.editorView.remove();
       delete fieldModel.editorView;
     },
 
-    /**
-     * Asks the user to confirm whether he wants to stop editing via a modal.
-     *
-     * @param {Drupal.quickedit.EntityModel} entityModel
-     *   An instance of the EntityModel class.
-     *
-     * @see Drupal.quickedit.AppView#acceptEditorStateChange
-     */
-    confirmEntityDeactivation: function (entityModel) {
+    confirmEntityDeactivation: function confirmEntityDeactivation(entityModel) {
       var that = this;
       var discardDialog;
 
       function closeDiscardDialog(action) {
         discardDialog.close(action);
-        // The active modal has been removed.
+
         that.model.set('activeModal', null);
 
-        // If the targetState is saving, the field must be saved, then the
-        // entity must be saved.
         if (action === 'save') {
-          entityModel.set('state', 'committing', {confirmed: true});
-        }
-        else {
-          entityModel.set('state', 'deactivating', {confirmed: true});
-          // Editing has been canceled and the changes will not be saved. Mark
-          // the page for reload if the entityModel declares that it requires
-          // a reload.
+          entityModel.set('state', 'committing', { confirmed: true });
+        } else {
+          entityModel.set('state', 'deactivating', { confirmed: true });
+
           if (entityModel.get('reload')) {
             reload = true;
             entityModel.set('reload', false);
@@ -359,38 +206,31 @@
         }
       }
 
-      // Only instantiate if there isn't a modal instance visible yet.
       if (!this.model.get('activeModal')) {
         var $unsavedChanges = $('<div>' + Drupal.t('You have unsaved changes') + '</div>');
         discardDialog = Drupal.dialog($unsavedChanges.get(0), {
           title: Drupal.t('Discard changes?'),
           dialogClass: 'quickedit-discard-modal',
           resizable: false,
-          buttons: [
-            {
-              text: Drupal.t('Save'),
-              click: function () {
-                closeDiscardDialog('save');
-              },
-              primary: true
+          buttons: [{
+            text: Drupal.t('Save'),
+            click: function click() {
+              closeDiscardDialog('save');
             },
-            {
-              text: Drupal.t('Discard changes'),
-              click: function () {
-                closeDiscardDialog('discard');
-              }
+            primary: true
+          }, {
+            text: Drupal.t('Discard changes'),
+            click: function click() {
+              closeDiscardDialog('discard');
             }
-          ],
-          // Prevent this modal from being closed without the user making a
-          // choice as per http://stackoverflow.com/a/5438771.
+          }],
+
           closeOnEscape: false,
-          create: function () {
+          create: function create() {
             $(this).parent().find('.ui-dialog-titlebar-close').remove();
           },
           beforeClose: false,
-          close: function (event) {
-            // Automatically destroy the DOM element that was used for the
-            // dialog.
+          close: function close(event) {
             $(event.target).remove();
           }
         });
@@ -400,33 +240,19 @@
       }
     },
 
-    /**
-     * Reacts to field state changes; tracks global state.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The `fieldModel` holding the state.
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.FieldModel.states}.
-     */
-    editorStateChange: function (fieldModel, state) {
+    editorStateChange: function editorStateChange(fieldModel, state) {
       var from = fieldModel.previous('state');
       var to = state;
 
-      // Keep track of the highlighted field in the global state.
       if (_.indexOf(this.singleFieldStates, to) !== -1 && this.model.get('highlightedField') !== fieldModel) {
         this.model.set('highlightedField', fieldModel);
-      }
-      else if (this.model.get('highlightedField') === fieldModel && to === 'candidate') {
+      } else if (this.model.get('highlightedField') === fieldModel && to === 'candidate') {
         this.model.set('highlightedField', null);
       }
 
-      // Keep track of the active field in the global state.
       if (_.indexOf(this.activeFieldStates, to) !== -1 && this.model.get('activeField') !== fieldModel) {
         this.model.set('activeField', fieldModel);
-      }
-      else if (this.model.get('activeField') === fieldModel && to === 'candidate') {
-        // Discarded if it transitions from a changed state to 'candidate'.
+      } else if (this.model.get('activeField') === fieldModel && to === 'candidate') {
         if (from === 'changed' || from === 'invalid') {
           fieldModel.editorView.revert();
         }
@@ -434,167 +260,76 @@
       }
     },
 
-    /**
-     * Render an updated field (a field whose 'html' attribute changed).
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The FieldModel whose 'html' attribute changed.
-     * @param {string} html
-     *   The updated 'html' attribute.
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {bool} options.propagation
-     *   Whether this change to the 'html' attribute occurred because of the
-     *   propagation of changes to another instance of this field.
-     */
-    renderUpdatedField: function (fieldModel, html, options) {
-      // Get data necessary to rerender property before it is unavailable.
+    renderUpdatedField: function renderUpdatedField(fieldModel, html, options) {
       var $fieldWrapper = $(fieldModel.get('el'));
       var $context = $fieldWrapper.parent();
 
-      var renderField = function () {
-        // Destroy the field model; this will cause all attached views to be
-        // destroyed too, and removal from all collections in which it exists.
+      var renderField = function renderField() {
         fieldModel.destroy();
 
-        // Replace the old content with the new content.
         $fieldWrapper.replaceWith(html);
 
-        // Attach behaviors again to the modified piece of HTML; this will
-        // create a new field model and call rerenderedFieldToCandidate() with
-        // it.
         Drupal.attachBehaviors($context.get(0));
       };
 
-      // When propagating the changes of another instance of this field, this
-      // field is not being actively edited and hence no state changes are
-      // necessary. So: only update the state of this field when the rerendering
-      // of this field happens not because of propagation, but because it is
-      // being edited itself.
       if (!options.propagation) {
-        // Deferred because renderUpdatedField is reacting to a field model
-        // change event, and we want to make sure that event fully propagates
-        // before making another change to the same model.
         _.defer(function () {
-          // First set the state to 'candidate', to allow all attached views to
-          // clean up all their "active state"-related changes.
           fieldModel.set('state', 'candidate');
 
-          // Similarly, the above .set() call's change event must fully
-          // propagate before calling it again.
           _.defer(function () {
-            // Set the field's state to 'inactive', to enable the updating of
-            // its DOM value.
-            fieldModel.set('state', 'inactive', {reason: 'rerender'});
+            fieldModel.set('state', 'inactive', { reason: 'rerender' });
 
             renderField();
           });
         });
-      }
-      else {
+      } else {
         renderField();
       }
     },
 
-    /**
-     * Propagates changes to an updated field to all instances of that field.
-     *
-     * @param {Drupal.quickedit.FieldModel} updatedField
-     *   The FieldModel whose 'html' attribute changed.
-     * @param {string} html
-     *   The updated 'html' attribute.
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {bool} options.propagation
-     *   Whether this change to the 'html' attribute occurred because of the
-     *   propagation of changes to another instance of this field.
-     *
-     * @see Drupal.quickedit.AppView#renderUpdatedField
-     */
-    propagateUpdatedField: function (updatedField, html, options) {
-      // Don't propagate field updates that themselves were caused by
-      // propagation.
+    propagateUpdatedField: function propagateUpdatedField(updatedField, html, options) {
       if (options.propagation) {
         return;
       }
 
       var htmlForOtherViewModes = updatedField.get('htmlForOtherViewModes');
-      Drupal.quickedit.collections.fields
-        // Find all instances of fields that display the same logical field
-        // (same entity, same field, just a different instance and maybe a
-        // different view mode).
-        .where({logicalFieldID: updatedField.get('logicalFieldID')})
-        .forEach(function (field) {
-          // Ignore the field that was already updated.
-          if (field === updatedField) {
-            return;
-          }
-          // If this other instance of the field has the same view mode, we can
-          // update it easily.
-          else if (field.getViewMode() === updatedField.getViewMode()) {
+      Drupal.quickedit.collections.fields.where({ logicalFieldID: updatedField.get('logicalFieldID') }).forEach(function (field) {
+        if (field === updatedField) {
+          return;
+        } else if (field.getViewMode() === updatedField.getViewMode()) {
             field.set('html', updatedField.get('html'));
-          }
-          // If this other instance of the field has a different view mode, and
-          // that is one of the view modes for which a re-rendered version is
-          // available (and that should be the case unless this field was only
-          // added to the page after editing of the updated field began), then
-          // use that view mode's re-rendered version.
-          else {
-            if (field.getViewMode() in htmlForOtherViewModes) {
-              field.set('html', htmlForOtherViewModes[field.getViewMode()], {propagation: true});
+          } else {
+              if (field.getViewMode() in htmlForOtherViewModes) {
+                field.set('html', htmlForOtherViewModes[field.getViewMode()], { propagation: true });
+              }
             }
-          }
-        });
+      });
     },
 
-    /**
-     * If the new in-place editable field is for the entity that's currently
-     * being edited, then transition it to the 'candidate' state.
-     *
-     * This happens when a field was modified, saved and hence rerendered.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   A field that was just added to the collection of fields.
-     */
-    rerenderedFieldToCandidate: function (fieldModel) {
-      var activeEntity = Drupal.quickedit.collections.entities.findWhere({isActive: true});
-
-      // Early-return if there is no active entity.
+    rerenderedFieldToCandidate: function rerenderedFieldToCandidate(fieldModel) {
+      var activeEntity = Drupal.quickedit.collections.entities.findWhere({ isActive: true });
+
       if (!activeEntity) {
         return;
       }
 
-      // If the field's entity is the active entity, make it a candidate.
       if (fieldModel.get('entity') === activeEntity) {
         this.setupEditor(fieldModel);
         fieldModel.set('state', 'candidate');
       }
     },
 
-    /**
-     * EntityModel Collection change handler.
-     *
-     * Handler is called `change:isActive` and enforces a single active entity.
-     *
-     * @param {Drupal.quickedit.EntityModel} changedEntityModel
-     *   The entityModel instance whose active state has changed.
-     */
-    enforceSingleActiveEntity: function (changedEntityModel) {
-      // When an entity is deactivated, we don't need to enforce anything.
+    enforceSingleActiveEntity: function enforceSingleActiveEntity(changedEntityModel) {
       if (changedEntityModel.get('isActive') === false) {
         return;
       }
 
-      // This entity was activated; deactivate all other entities.
-      changedEntityModel.collection.chain()
-        .filter(function (entityModel) {
-          return entityModel.get('isActive') === true && entityModel !== changedEntityModel;
-        })
-        .each(function (entityModel) {
-          entityModel.set('state', 'deactivating');
-        });
+      changedEntityModel.collection.chain().filter(function (entityModel) {
+        return entityModel.get('isActive') === true && entityModel !== changedEntityModel;
+      }).each(function (entityModel) {
+        entityModel.set('state', 'deactivating');
+      });
     }
 
   });
-
-}(jQuery, _, Backbone, Drupal));
+})(jQuery, _, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/ContextualLinkView.js b/core/modules/quickedit/js/views/ContextualLinkView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/ContextualLinkView.js
copy to core/modules/quickedit/js/views/ContextualLinkView.es6.js
diff --git a/core/modules/quickedit/js/views/ContextualLinkView.js b/core/modules/quickedit/js/views/ContextualLinkView.js
index bf50f616c7..7841576e3d 100644
--- a/core/modules/quickedit/js/views/ContextualLinkView.js
+++ b/core/modules/quickedit/js/views/ContextualLinkView.js
@@ -1,29 +1,22 @@
 /**
- * @file
- * A Backbone View that provides a dynamic contextual link.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/ContextualLinkView.es6.js
+* @preserve
+**/
 
 (function ($, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.ContextualLinkView = Backbone.View.extend(/** @lends Drupal.quickedit.ContextualLinkView# */{
-
-    /**
-     * Define all events to listen to.
-     *
-     * @return {object}
-     *   A map of events.
-     */
-    events: function () {
-      // Prevents delay and simulated mouse events.
+  Drupal.quickedit.ContextualLinkView = Backbone.View.extend({
+    events: function events() {
       function touchEndToClick(event) {
         event.preventDefault();
         event.target.click();
       }
 
       return {
-        'click a': function (event) {
+        'click a': function clickA(event) {
           event.preventDefault();
           this.model.set('state', 'launching');
         },
@@ -31,51 +24,21 @@
       };
     },
 
-    /**
-     * Create a new contextual link view.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {Drupal.quickedit.EntityModel} options.model
-     *   The associated entity's model.
-     * @param {Drupal.quickedit.AppModel} options.appModel
-     *   The application state model.
-     * @param {object} options.strings
-     *   The strings for the "Quick edit" link.
-     */
-    initialize: function (options) {
-      // Insert the text of the quick edit toggle.
+    initialize: function initialize(options) {
       this.$el.find('a').text(options.strings.quickEdit);
-      // Initial render.
+
       this.render();
-      // Re-render whenever this entity's isActive attribute changes.
+
       this.listenTo(this.model, 'change:isActive', this.render);
     },
 
-    /**
-     * Render function for the contextual link view.
-     *
-     * @param {Drupal.quickedit.EntityModel} entityModel
-     *   The associated `EntityModel`.
-     * @param {bool} isActive
-     *   Whether the in-place editor is active or not.
-     *
-     * @return {Drupal.quickedit.ContextualLinkView}
-     *   The `ContextualLinkView` in question.
-     */
-    render: function (entityModel, isActive) {
+    render: function render(entityModel, isActive) {
       this.$el.find('a').attr('aria-pressed', isActive);
 
-      // Hides the contextual links if an in-place editor is active.
       this.$el.closest('.contextual').toggle(!isActive);
 
       return this;
     }
 
   });
-
-})(jQuery, Backbone, Drupal);
+})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/EditorView.js b/core/modules/quickedit/js/views/EditorView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/EditorView.js
copy to core/modules/quickedit/js/views/EditorView.es6.js
diff --git a/core/modules/quickedit/js/views/EditorView.js b/core/modules/quickedit/js/views/EditorView.js
index 5e041db0d4..74e8b1295a 100644
--- a/core/modules/quickedit/js/views/EditorView.js
+++ b/core/modules/quickedit/js/views/EditorView.js
@@ -1,134 +1,50 @@
 /**
- * @file
- * An abstract Backbone View that controls an in-place editor.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/EditorView.es6.js
+* @preserve
+**/
 
 (function ($, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.EditorView = Backbone.View.extend(/** @lends Drupal.quickedit.EditorView# */{
-
-    /**
-     * A base implementation that outlines the structure for in-place editors.
-     *
-     * Specific in-place editor implementations should subclass (extend) this
-     * View and override whichever method they deem necessary to override.
-     *
-     * Typically you would want to override this method to set the
-     * originalValue attribute in the FieldModel to such a value that your
-     * in-place editor can revert to the original value when necessary.
-     *
-     * @example
-     * <caption>If you override this method, you should call this
-     * method (the parent class' initialize()) first.</caption>
-     * Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {Drupal.quickedit.EditorModel} options.model
-     *   The in-place editor state model.
-     * @param {Drupal.quickedit.FieldModel} options.fieldModel
-     *   The field model.
-     *
-     * @see Drupal.quickedit.EditorModel
-     * @see Drupal.quickedit.editors.plain_text
-     */
-    initialize: function (options) {
+  Drupal.quickedit.EditorView = Backbone.View.extend({
+    initialize: function initialize(options) {
       this.fieldModel = options.fieldModel;
       this.listenTo(this.fieldModel, 'change:state', this.stateChange);
     },
 
-    /**
-     * @inheritdoc
-     */
-    remove: function () {
-      // The el property is the field, which should not be removed. Remove the
-      // pointer to it, then call Backbone.View.prototype.remove().
+    remove: function remove() {
       this.setElement();
       Backbone.View.prototype.remove.call(this);
     },
 
-    /**
-     * Returns the edited element.
-     *
-     * For some single cardinality fields, it may be necessary or useful to
-     * not in-place edit (and hence decorate) the DOM element with the
-     * data-quickedit-field-id attribute (which is the field's wrapper), but a
-     * specific element within the field's wrapper.
-     * e.g. using a WYSIWYG editor on a body field should happen on the DOM
-     * element containing the text itself, not on the field wrapper.
-     *
-     * @return {jQuery}
-     *   A jQuery-wrapped DOM element.
-     *
-     * @see Drupal.quickedit.editors.plain_text
-     */
-    getEditedElement: function () {
+    getEditedElement: function getEditedElement() {
       return this.$el;
     },
 
-    /**
-     *
-     * @return {object}
-     * Returns 3 Quick Edit UI settings that depend on the in-place editor:
-     *  - Boolean padding: indicates whether padding should be applied to the
-     *    edited element, to guarantee legibility of text.
-     *  - Boolean unifiedToolbar: provides the in-place editor with the ability
-     *    to insert its own toolbar UI into Quick Edit's tightly integrated
-     *    toolbar.
-     *  - Boolean fullWidthToolbar: indicates whether Quick Edit's tightly
-     *    integrated toolbar should consume the full width of the element,
-     *    rather than being just long enough to accommodate a label.
-     */
-    getQuickEditUISettings: function () {
-      return {padding: false, unifiedToolbar: false, fullWidthToolbar: false, popup: false};
+    getQuickEditUISettings: function getQuickEditUISettings() {
+      return { padding: false, unifiedToolbar: false, fullWidthToolbar: false, popup: false };
     },
 
-    /**
-     * Determines the actions to take given a change of state.
-     *
-     * @param {Drupal.quickedit.FieldModel} fieldModel
-     *   The quickedit `FieldModel` that holds the state.
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.FieldModel.states}.
-     */
-    stateChange: function (fieldModel, state) {
+    stateChange: function stateChange(fieldModel, state) {
       var from = fieldModel.previous('state');
       var to = state;
       switch (to) {
         case 'inactive':
-          // An in-place editor view will not yet exist in this state, hence
-          // this will never be reached. Listed for sake of completeness.
           break;
 
         case 'candidate':
-          // Nothing to do for the typical in-place editor: it should not be
-          // visible yet. Except when we come from the 'invalid' state, then we
-          // clean up.
           if (from === 'invalid') {
             this.removeValidationErrors();
           }
           break;
 
         case 'highlighted':
-          // Nothing to do for the typical in-place editor: it should not be
-          // visible yet.
           break;
 
         case 'activating':
-          // The user has indicated he wants to do in-place editing: if
-          // something needs to be loaded (CSS/JavaScript/server data/…), then
-          // do so at this stage, and once the in-place editor is ready,
-          // set the 'active' state. A "loading" indicator will be shown in the
-          // UI for as long as the field remains in this state.
-          var loadDependencies = function (callback) {
-            // Do the loading here.
+          var loadDependencies = function loadDependencies(callback) {
             callback();
           };
           loadDependencies(function () {
@@ -137,20 +53,12 @@
           break;
 
         case 'active':
-          // The user can now actually use the in-place editor.
           break;
 
         case 'changed':
-          // Nothing to do for the typical in-place editor. The UI will show an
-          // indicator that the field has changed.
           break;
 
         case 'saving':
-          // When the user has indicated he wants to save his changes to this
-          // field, this state will be entered. If the previous saving attempt
-          // resulted in validation errors, the previous state will be
-          // 'invalid'. Clean up those validation errors while the user is
-          // saving.
           if (from === 'invalid') {
             this.removeValidationErrors();
           }
@@ -158,45 +66,26 @@
           break;
 
         case 'saved':
-          // Nothing to do for the typical in-place editor. Immediately after
-          // being saved, a field will go to the 'candidate' state, where it
-          // should no longer be visible (after all, the field will then again
-          // just be a *candidate* to be in-place edited).
           break;
 
         case 'invalid':
-          // The modified field value was attempted to be saved, but there were
-          // validation errors.
           this.showValidationErrors();
           break;
       }
     },
 
-    /**
-     * Reverts the modified value to the original, before editing started.
-     */
-    revert: function () {
-      // A no-op by default; each editor should implement reverting itself.
-      // Note that if the in-place editor does not cause the FieldModel's
-      // element to be modified, then nothing needs to happen.
-    },
+    revert: function revert() {},
 
-    /**
-     * Saves the modified value in the in-place editor for this field.
-     */
-    save: function () {
+    save: function save() {
       var fieldModel = this.fieldModel;
       var editorModel = this.model;
       var backstageId = 'quickedit_backstage-' + this.fieldModel.id.replace(/[\/\[\]\_\s]/g, '-');
 
       function fillAndSubmitForm(value) {
         var $form = $('#' + backstageId).find('form');
-        // Fill in the value in any <input> that isn't hidden or a submit
-        // button.
-        $form.find(':input[type!="hidden"][type!="submit"]:not(select)')
-          // Don't mess with the node summary.
-          .not('[name$="\\[summary\\]"]').val(value);
-        // Submit the form.
+
+        $form.find(':input[type!="hidden"][type!="submit"]:not(select)').not('[name$="\\[summary\\]"]').val(value);
+
         $form.find('.quickedit-form-submit').trigger('click.quickedit');
       }
 
@@ -205,28 +94,16 @@
         $el: this.$el,
         nocssjs: true,
         other_view_modes: fieldModel.findOtherViewModes(),
-        // Reset an existing entry for this entity in the PrivateTempStore (if
-        // any) when saving the field. Logically speaking, this should happen in
-        // a separate request because this is an entity-level operation, not a
-        // field-level operation. But that would require an additional request,
-        // that might not even be necessary: it is only when a user saves a
-        // first changed field for an entity that this needs to happen:
-        // precisely now!
+
         reset: !this.fieldModel.get('entity').get('inTempStore')
       };
 
       var self = this;
       Drupal.quickedit.util.form.load(formOptions, function (form, ajax) {
-        // Create a backstage area for storing forms that are hidden from view
-        // (hence "backstage" — since the editing doesn't happen in the form, it
-        // happens "directly" in the content, the form is only used for saving).
-        var $backstage = $(Drupal.theme('quickeditBackstage', {id: backstageId})).appendTo('body');
-        // Hidden forms are stuffed into the backstage container for this field.
+        var $backstage = $(Drupal.theme('quickeditBackstage', { id: backstageId })).appendTo('body');
+
         var $form = $(form).appendTo($backstage);
-        // Disable the browser's HTML5 validation; we only care about server-
-        // side validation. (Not disabling this will actually cause problems
-        // because browsers don't like to set HTML5 validation errors on hidden
-        // forms.)
+
         $form.prop('novalidate', true);
         var $submit = $form.find('.quickedit-form-submit');
         self.formSaveAjax = Drupal.quickedit.util.form.ajaxifySaving(formOptions, $submit);
@@ -237,68 +114,36 @@
           $backstage.remove();
         }
 
-        // Successfully saved.
         self.formSaveAjax.commands.quickeditFieldFormSaved = function (ajax, response, status) {
           removeHiddenForm();
-          // First, transition the state to 'saved'.
+
           fieldModel.set('state', 'saved');
-          // Second, set the 'htmlForOtherViewModes' attribute, so that when
-          // this field is rerendered, the change can be propagated to other
-          // instances of this field, which may be displayed in different view
-          // modes.
+
           fieldModel.set('htmlForOtherViewModes', response.other_view_modes);
-          // Finally, set the 'html' attribute on the field model. This will
-          // cause the field to be rerendered.
+
           fieldModel.set('html', response.data);
         };
 
-        // Unsuccessfully saved; validation errors.
         self.formSaveAjax.commands.quickeditFieldFormValidationErrors = function (ajax, response, status) {
           removeHiddenForm();
           editorModel.set('validationErrors', response.data);
           fieldModel.set('state', 'invalid');
         };
 
-        // The quickeditFieldForm AJAX command is only called upon loading the
-        // form for the first time, and when there are validation errors in the
-        // form; Form API then marks which form items have errors. This is
-        // useful for the form-based in-place editor, but pointless for any
-        // other: the form itself won't be visible at all anyway! So, we just
-        // ignore it.
         self.formSaveAjax.commands.quickeditFieldForm = function () {};
 
         fillAndSubmitForm(editorModel.get('currentValue'));
       });
     },
 
-    /**
-     * Shows validation error messages.
-     *
-     * Should be called when the state is changed to 'invalid'.
-     */
-    showValidationErrors: function () {
-      var $errors = $('<div class="quickedit-validation-errors"></div>')
-        .append(this.model.get('validationErrors'));
-      this.getEditedElement()
-        .addClass('quickedit-validation-error')
-        .after($errors);
+    showValidationErrors: function showValidationErrors() {
+      var $errors = $('<div class="quickedit-validation-errors"></div>').append(this.model.get('validationErrors'));
+      this.getEditedElement().addClass('quickedit-validation-error').after($errors);
     },
 
-    /**
-     * Cleans up validation error messages.
-     *
-     * Should be called when the state is changed to 'candidate' or 'saving'. In
-     * the case of the latter: the user has modified the value in the in-place
-     * editor again to attempt to save again. In the case of the latter: the
-     * invalid value was discarded.
-     */
-    removeValidationErrors: function () {
-      this.getEditedElement()
-        .removeClass('quickedit-validation-error')
-        .next('.quickedit-validation-errors')
-        .remove();
+    removeValidationErrors: function removeValidationErrors() {
+      this.getEditedElement().removeClass('quickedit-validation-error').next('.quickedit-validation-errors').remove();
     }
 
   });
-
-}(jQuery, Backbone, Drupal));
+})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/EntityDecorationView.js b/core/modules/quickedit/js/views/EntityDecorationView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/EntityDecorationView.js
copy to core/modules/quickedit/js/views/EntityDecorationView.es6.js
diff --git a/core/modules/quickedit/js/views/EntityDecorationView.js b/core/modules/quickedit/js/views/EntityDecorationView.js
index ff090fe4c7..eff099cc48 100644
--- a/core/modules/quickedit/js/views/EntityDecorationView.js
+++ b/core/modules/quickedit/js/views/EntityDecorationView.js
@@ -1,40 +1,26 @@
 /**
- * @file
- * A Backbone view that decorates the in-place editable entity.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/EntityDecorationView.es6.js
+* @preserve
+**/
 
 (function (Drupal, $, Backbone) {
 
   'use strict';
 
-  Drupal.quickedit.EntityDecorationView = Backbone.View.extend(/** @lends Drupal.quickedit.EntityDecorationView# */{
-
-    /**
-     * Associated with the DOM root node of an editable entity.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+  Drupal.quickedit.EntityDecorationView = Backbone.View.extend({
+    initialize: function initialize() {
       this.listenTo(this.model, 'change', this.render);
     },
 
-    /**
-     * @inheritdoc
-     */
-    render: function () {
+    render: function render() {
       this.$el.toggleClass('quickedit-entity-active', this.model.get('isActive'));
     },
 
-    /**
-     * @inheritdoc
-     */
-    remove: function () {
+    remove: function remove() {
       this.setElement(null);
       Backbone.View.prototype.remove.call(this);
     }
 
   });
-
-}(Drupal, jQuery, Backbone));
+})(Drupal, jQuery, Backbone);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/EntityToolbarView.js b/core/modules/quickedit/js/views/EntityToolbarView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/EntityToolbarView.js
copy to core/modules/quickedit/js/views/EntityToolbarView.es6.js
diff --git a/core/modules/quickedit/js/views/EntityToolbarView.js b/core/modules/quickedit/js/views/EntityToolbarView.js
index 4fa0506f53..0e8e7ef424 100644
--- a/core/modules/quickedit/js/views/EntityToolbarView.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.js
@@ -1,24 +1,17 @@
 /**
- * @file
- * A Backbone View that provides an entity level toolbar.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/EntityToolbarView.es6.js
+* @preserve
+**/
 
 (function ($, _, Backbone, Drupal, debounce) {
 
   'use strict';
 
-  Drupal.quickedit.EntityToolbarView = Backbone.View.extend(/** @lends Drupal.quickedit.EntityToolbarView# */{
-
-    /**
-     * @type {jQuery}
-     */
+  Drupal.quickedit.EntityToolbarView = Backbone.View.extend({
     _fieldToolbarRoot: null,
 
-    /**
-     * @return {object}
-     *   A map of events.
-     */
-    events: function () {
+    events: function events() {
       var map = {
         'click button.action-save': 'onClickSave',
         'click button.action-cancel': 'onClickCancel',
@@ -27,102 +20,60 @@
       return map;
     },
 
-    /**
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   Options to construct the view.
-     * @param {Drupal.quickedit.AppModel} options.appModel
-     *   A quickedit `AppModel` to use in the view.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       var that = this;
       this.appModel = options.appModel;
       this.$entity = $(this.model.get('el'));
 
-      // Rerender whenever the entity state changes.
       this.listenTo(this.model, 'change:isActive change:isDirty change:state', this.render);
-      // Also rerender whenever a different field is highlighted or activated.
+
       this.listenTo(this.appModel, 'change:highlightedField change:activeField', this.render);
-      // Rerender when a field of the entity changes state.
+
       this.listenTo(this.model.get('fields'), 'change:state', this.fieldStateChange);
 
-      // Reposition the entity toolbar as the viewport and the position within
-      // the viewport changes.
       $(window).on('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit', debounce($.proxy(this.windowChangeHandler, this), 150));
 
-      // Adjust the fence placement within which the entity toolbar may be
-      // positioned.
       $(document).on('drupalViewportOffsetChange.quickedit', function (event, offsets) {
         if (that.$fence) {
           that.$fence.css(offsets);
         }
       });
 
-      // Set the entity toolbar DOM element as the el for this view.
       var $toolbar = this.buildToolbarEl();
       this.setElement($toolbar);
       this._fieldToolbarRoot = $toolbar.find('.quickedit-toolbar-field').get(0);
 
-      // Initial render.
       this.render();
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.quickedit.EntityToolbarView}
-     *   The entity toolbar view.
-     */
-    render: function () {
+    render: function render() {
       if (this.model.get('isActive')) {
-        // If the toolbar container doesn't exist, create it.
         var $body = $('body');
         if ($body.children('#quickedit-entity-toolbar').length === 0) {
           $body.append(this.$el);
         }
-        // The fence will define a area on the screen that the entity toolbar
-        // will be position within.
+
         if ($body.children('#quickedit-toolbar-fence').length === 0) {
-          this.$fence = $(Drupal.theme('quickeditEntityToolbarFence'))
-            .css(Drupal.displace())
-            .appendTo($body);
+          this.$fence = $(Drupal.theme('quickeditEntityToolbarFence')).css(Drupal.displace()).appendTo($body);
         }
-        // Adds the entity title to the toolbar.
+
         this.label();
 
-        // Show the save and cancel buttons.
         this.show('ops');
-        // If render is being called and the toolbar is already visible, just
-        // reposition it.
+
         this.position();
       }
 
-      // The save button text and state varies with the state of the entity
-      // model.
       var $button = this.$el.find('.quickedit-button.action-save');
       var isDirty = this.model.get('isDirty');
-      // Adjust the save button according to the state of the model.
+
       switch (this.model.get('state')) {
-        // Quick editing is active, but no field is being edited.
         case 'opened':
-          // The saving throbber is not managed by AJAX system. The
-          // EntityToolbarView manages this visual element.
-          $button
-            .removeClass('action-saving icon-throbber icon-end')
-            .text(Drupal.t('Save'))
-            .removeAttr('disabled')
-            .attr('aria-hidden', !isDirty);
+          $button.removeClass('action-saving icon-throbber icon-end').text(Drupal.t('Save')).removeAttr('disabled').attr('aria-hidden', !isDirty);
           break;
 
-        // The changes to the fields of the entity are being committed.
         case 'committing':
-          $button
-            .addClass('action-saving icon-throbber icon-end')
-            .text(Drupal.t('Saving'))
-            .attr('disabled', 'disabled');
+          $button.addClass('action-saving icon-throbber icon-end').text(Drupal.t('Saving')).attr('disabled', 'disabled');
           break;
 
         default:
@@ -133,40 +84,20 @@
       return this;
     },
 
-    /**
-     * @inheritdoc
-     */
-    remove: function () {
-      // Remove additional DOM elements controlled by this View.
+    remove: function remove() {
       this.$fence.remove();
 
-      // Stop listening to additional events.
       $(window).off('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit');
       $(document).off('drupalViewportOffsetChange.quickedit');
 
       Backbone.View.prototype.remove.call(this);
     },
 
-    /**
-     * Repositions the entity toolbar on window scroll and resize.
-     *
-     * @param {jQuery.Event} event
-     *   The scroll or resize event.
-     */
-    windowChangeHandler: function (event) {
+    windowChangeHandler: function windowChangeHandler(event) {
       this.position();
     },
 
-    /**
-     * Determines the actions to take given a change of state.
-     *
-     * @param {Drupal.quickedit.FieldModel} model
-     *   The `FieldModel` model.
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.FieldModel.states}.
-     */
-    fieldStateChange: function (model, state) {
+    fieldStateChange: function fieldStateChange(model, state) {
       switch (state) {
         case 'active':
           this.render();
@@ -178,48 +109,34 @@
       }
     },
 
-    /**
-     * Uses the jQuery.ui.position() method to position the entity toolbar.
-     *
-     * @param {HTMLElement} [element]
-     *   The element against which the entity toolbar is positioned.
-     */
-    position: function (element) {
+    position: function position(element) {
       clearTimeout(this.timer);
 
       var that = this;
-      // Vary the edge of the positioning according to the direction of language
-      // in the document.
-      var edge = (document.documentElement.dir === 'rtl') ? 'right' : 'left';
-      // A time unit to wait until the entity toolbar is repositioned.
+
+      var edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
+
       var delay = 0;
-      // Determines what check in the series of checks below should be
-      // evaluated.
+
       var check = 0;
-      // When positioned against an active field that has padding, we should
-      // ignore that padding when positioning the toolbar, to not unnecessarily
-      // move the toolbar horizontally, which feels annoying.
+
       var horizontalPadding = 0;
       var of;
       var activeField;
       var highlightedField;
-      // There are several elements in the page that the entity toolbar might be
-      // positioned against. They are considered below in a priority order.
+
       do {
         switch (check) {
           case 0:
-            // Position against a specific element.
             of = element;
             break;
 
           case 1:
-            // Position against a form container.
             activeField = Drupal.quickedit.app.model.get('activeField');
             of = activeField && activeField.editorView && activeField.editorView.$formContainer && activeField.editorView.$formContainer.find('.quickedit-form');
             break;
 
           case 2:
-            // Position against an active field.
             of = activeField && activeField.editorView && activeField.editorView.getEditedElement();
             if (activeField && activeField.editorView && activeField.editorView.getQuickEditUISettings().padding) {
               horizontalPadding = 5;
@@ -227,7 +144,6 @@
             break;
 
           case 3:
-            // Position against a highlighted field.
             highlightedField = Drupal.quickedit.app.model.get('highlightedField');
             of = highlightedField && highlightedField.editorView && highlightedField.editorView.getEditedElement();
             delay = 250;
@@ -237,7 +153,7 @@
             var fieldModels = this.model.get('fields').models;
             var topMostPosition = 1000000;
             var topMostField = null;
-            // Position against the topmost field.
+
             for (var i = 0; i < fieldModels.length; i++) {
               var pos = fieldModels[i].get('el').getBoundingClientRect().top;
               if (pos < topMostPosition) {
@@ -249,280 +165,148 @@
             delay = 50;
             break;
         }
-        // Prepare to check the next possible element to position against.
+
         check++;
       } while (!of);
 
-      /**
-       * Refines the positioning algorithm of jquery.ui.position().
-       *
-       * Invoked as the 'using' callback of jquery.ui.position() in
-       * positionToolbar().
-       *
-       * @param {*} view
-       *   The view the positions will be calculated from.
-       * @param {object} suggested
-       *   A hash of top and left values for the position that should be set. It
-       *   can be forwarded to .css() or .animate().
-       * @param {object} info
-       *   The position and dimensions of both the 'my' element and the 'of'
-       *   elements, as well as calculations to their relative position. This
-       *   object contains the following properties:
-       * @param {object} info.element
-       *   A hash that contains information about the HTML element that will be
-       *   positioned. Also known as the 'my' element.
-       * @param {object} info.target
-       *   A hash that contains information about the HTML element that the
-       *   'my' element will be positioned against. Also known as the 'of'
-       *   element.
-       */
       function refinePosition(view, suggested, info) {
-        // Determine if the pointer should be on the top or bottom.
         var isBelow = suggested.top > info.target.top;
         info.element.element.toggleClass('quickedit-toolbar-pointer-top', isBelow);
-        // Don't position the toolbar past the first or last editable field if
-        // the entity is the target.
+
         if (view.$entity[0] === info.target.element[0]) {
-          // Get the first or last field according to whether the toolbar is
-          // above or below the entity.
-          var $field = view.$entity.find('.quickedit-editable').eq((isBelow) ? -1 : 0);
+          var $field = view.$entity.find('.quickedit-editable').eq(isBelow ? -1 : 0);
           if ($field.length > 0) {
-            suggested.top = (isBelow) ? ($field.offset().top + $field.outerHeight(true)) : $field.offset().top - info.element.element.outerHeight(true);
+            suggested.top = isBelow ? $field.offset().top + $field.outerHeight(true) : $field.offset().top - info.element.element.outerHeight(true);
           }
         }
-        // Don't let the toolbar go outside the fence.
+
         var fenceTop = view.$fence.offset().top;
         var fenceHeight = view.$fence.height();
         var toolbarHeight = info.element.element.outerHeight(true);
         if (suggested.top < fenceTop) {
           suggested.top = fenceTop;
-        }
-        else if ((suggested.top + toolbarHeight) > (fenceTop + fenceHeight)) {
+        } else if (suggested.top + toolbarHeight > fenceTop + fenceHeight) {
           suggested.top = fenceTop + fenceHeight - toolbarHeight;
         }
-        // Position the toolbar.
+
         info.element.element.css({
           left: Math.floor(suggested.left),
           top: Math.floor(suggested.top)
         });
       }
 
-      /**
-       * Calls the jquery.ui.position() method on the $el of this view.
-       */
       function positionToolbar() {
-        that.$el
-          .position({
-            my: edge + ' bottom',
-            // Move the toolbar 1px towards the start edge of the 'of' element,
-            // plus any horizontal padding that may have been added to the
-            // element that is being added, to prevent unwanted horizontal
-            // movement.
-            at: edge + '+' + (1 + horizontalPadding) + ' top',
-            of: of,
-            collision: 'flipfit',
-            using: refinePosition.bind(null, that),
-            within: that.$fence
-          })
-          // Resize the toolbar to match the dimensions of the field, up to a
-          // maximum width that is equal to 90% of the field's width.
-          .css({
-            'max-width': (document.documentElement.clientWidth < 450) ? document.documentElement.clientWidth : 450,
-            // Set a minimum width of 240px for the entity toolbar, or the width
-            // of the client if it is less than 240px, so that the toolbar
-            // never folds up into a squashed and jumbled mess.
-            'min-width': (document.documentElement.clientWidth < 240) ? document.documentElement.clientWidth : 240,
-            'width': '100%'
-          });
+        that.$el.position({
+          my: edge + ' bottom',
+
+          at: edge + '+' + (1 + horizontalPadding) + ' top',
+          of: of,
+          collision: 'flipfit',
+          using: refinePosition.bind(null, that),
+          within: that.$fence
+        }).css({
+          'max-width': document.documentElement.clientWidth < 450 ? document.documentElement.clientWidth : 450,
+
+          'min-width': document.documentElement.clientWidth < 240 ? document.documentElement.clientWidth : 240,
+          'width': '100%'
+        });
       }
 
-      // Uses the jQuery.ui.position() method. Use a timeout to move the toolbar
-      // only after the user has focused on an editable for 250ms. This prevents
-      // the toolbar from jumping around the screen.
       this.timer = setTimeout(function () {
-        // Render the position in the next execution cycle, so that animations
-        // on the field have time to process. This is not strictly speaking, a
-        // guarantee that all animations will be finished, but it's a simple
-        // way to get better positioning without too much additional code.
         _.defer(positionToolbar);
       }, delay);
     },
 
-    /**
-     * Set the model state to 'saving' when the save button is clicked.
-     *
-     * @param {jQuery.Event} event
-     *   The click event.
-     */
-    onClickSave: function (event) {
+    onClickSave: function onClickSave(event) {
       event.stopPropagation();
       event.preventDefault();
-      // Save the model.
+
       this.model.set('state', 'committing');
     },
 
-    /**
-     * Sets the model state to candidate when the cancel button is clicked.
-     *
-     * @param {jQuery.Event} event
-     *   The click event.
-     */
-    onClickCancel: function (event) {
+    onClickCancel: function onClickCancel(event) {
       event.preventDefault();
       this.model.set('state', 'deactivating');
     },
 
-    /**
-     * Clears the timeout that will eventually reposition the entity toolbar.
-     *
-     * Without this, it may reposition itself, away from the user's cursor!
-     *
-     * @param {jQuery.Event} event
-     *   The mouse event.
-     */
-    onMouseenter: function (event) {
+    onMouseenter: function onMouseenter(event) {
       clearTimeout(this.timer);
     },
 
-    /**
-     * Builds the entity toolbar HTML; attaches to DOM; sets starting position.
-     *
-     * @return {jQuery}
-     *   The toolbar element.
-     */
-    buildToolbarEl: function () {
+    buildToolbarEl: function buildToolbarEl() {
       var $toolbar = $(Drupal.theme('quickeditEntityToolbar', {
         id: 'quickedit-entity-toolbar'
       }));
 
-      $toolbar
-        .find('.quickedit-toolbar-entity')
-        // Append the "ops" toolgroup into the toolbar.
-        .prepend(Drupal.theme('quickeditToolgroup', {
-          classes: ['ops'],
-          buttons: [
-            {
-              label: Drupal.t('Save'),
-              type: 'submit',
-              classes: 'action-save quickedit-button icon',
-              attributes: {
-                'aria-hidden': true
-              }
-            },
-            {
-              label: Drupal.t('Close'),
-              classes: 'action-cancel quickedit-button icon icon-close icon-only'
-            }
-          ]
-        }));
-
-      // Give the toolbar a sensible starting position so that it doesn't
-      // animate on to the screen from a far off corner.
-      $toolbar
-        .css({
-          left: this.$entity.offset().left,
-          top: this.$entity.offset().top
-        });
+      $toolbar.find('.quickedit-toolbar-entity').prepend(Drupal.theme('quickeditToolgroup', {
+        classes: ['ops'],
+        buttons: [{
+          label: Drupal.t('Save'),
+          type: 'submit',
+          classes: 'action-save quickedit-button icon',
+          attributes: {
+            'aria-hidden': true
+          }
+        }, {
+          label: Drupal.t('Close'),
+          classes: 'action-cancel quickedit-button icon icon-close icon-only'
+        }]
+      }));
+
+      $toolbar.css({
+        left: this.$entity.offset().left,
+        top: this.$entity.offset().top
+      });
 
       return $toolbar;
     },
 
-    /**
-     * Returns the DOM element that fields will attach their toolbars to.
-     *
-     * @return {jQuery}
-     *   The DOM element that fields will attach their toolbars to.
-     */
-    getToolbarRoot: function () {
+    getToolbarRoot: function getToolbarRoot() {
       return this._fieldToolbarRoot;
     },
 
-    /**
-     * Generates a state-dependent label for the entity toolbar.
-     */
-    label: function () {
-      // The entity label.
+    label: function label() {
       var label = '';
       var entityLabel = this.model.get('label');
 
-      // Label of an active field, if it exists.
       var activeField = Drupal.quickedit.app.model.get('activeField');
       var activeFieldLabel = activeField && activeField.get('metadata').label;
-      // Label of a highlighted field, if it exists.
+
       var highlightedField = Drupal.quickedit.app.model.get('highlightedField');
       var highlightedFieldLabel = highlightedField && highlightedField.get('metadata').label;
-      // The label is constructed in a priority order.
+
       if (activeFieldLabel) {
         label = Drupal.theme('quickeditEntityToolbarLabel', {
           entityLabel: entityLabel,
           fieldLabel: activeFieldLabel
         });
-      }
-      else if (highlightedFieldLabel) {
+      } else if (highlightedFieldLabel) {
         label = Drupal.theme('quickeditEntityToolbarLabel', {
           entityLabel: entityLabel,
           fieldLabel: highlightedFieldLabel
         });
-      }
-      else {
-        // @todo Add XSS regression test coverage in https://www.drupal.org/node/2547437
+      } else {
         label = Drupal.checkPlain(entityLabel);
       }
 
-      this.$el
-        .find('.quickedit-toolbar-label')
-        .html(label);
+      this.$el.find('.quickedit-toolbar-label').html(label);
     },
 
-    /**
-     * Adds classes to a toolgroup.
-     *
-     * @param {string} toolgroup
-     *   A toolgroup name.
-     * @param {string} classes
-     *   A string of space-delimited class names that will be applied to the
-     *   wrapping element of the toolbar group.
-     */
-    addClass: function (toolgroup, classes) {
+    addClass: function addClass(toolgroup, classes) {
       this._find(toolgroup).addClass(classes);
     },
 
-    /**
-     * Removes classes from a toolgroup.
-     *
-     * @param {string} toolgroup
-     *   A toolgroup name.
-     * @param {string} classes
-     *   A string of space-delimited class names that will be removed from the
-     *   wrapping element of the toolbar group.
-     */
-    removeClass: function (toolgroup, classes) {
+    removeClass: function removeClass(toolgroup, classes) {
       this._find(toolgroup).removeClass(classes);
     },
 
-    /**
-     * Finds a toolgroup.
-     *
-     * @param {string} toolgroup
-     *   A toolgroup name.
-     *
-     * @return {jQuery}
-     *   The toolgroup DOM element.
-     */
-    _find: function (toolgroup) {
+    _find: function _find(toolgroup) {
       return this.$el.find('.quickedit-toolbar .quickedit-toolgroup.' + toolgroup);
     },
 
-    /**
-     * Shows a toolgroup.
-     *
-     * @param {string} toolgroup
-     *   A toolgroup name.
-     */
-    show: function (toolgroup) {
+    show: function show(toolgroup) {
       this.$el.removeClass('quickedit-animate-invisible');
     }
 
   });
-
-})(jQuery, _, Backbone, Drupal, Drupal.debounce);
+})(jQuery, _, Backbone, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/FieldDecorationView.js b/core/modules/quickedit/js/views/FieldDecorationView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/FieldDecorationView.js
copy to core/modules/quickedit/js/views/FieldDecorationView.es6.js
diff --git a/core/modules/quickedit/js/views/FieldDecorationView.js b/core/modules/quickedit/js/views/FieldDecorationView.js
index 966e2b9fbc..a7f6c8086a 100644
--- a/core/modules/quickedit/js/views/FieldDecorationView.js
+++ b/core/modules/quickedit/js/views/FieldDecorationView.js
@@ -1,22 +1,16 @@
 /**
- * @file
- * A Backbone View that decorates the in-place edited element.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/FieldDecorationView.es6.js
+* @preserve
+**/
 
 (function ($, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.FieldDecorationView = Backbone.View.extend(/** @lends Drupal.quickedit.FieldDecorationView# */{
-
-    /**
-     * @type {null}
-     */
+  Drupal.quickedit.FieldDecorationView = Backbone.View.extend({
     _widthAttributeIsEmpty: null,
 
-    /**
-     * @type {object}
-     */
     events: {
       'mouseenter.quickedit': 'onMouseEnter',
       'mouseleave.quickedit': 'onMouseLeave',
@@ -25,43 +19,19 @@
       'tabOut.quickedit': 'onMouseLeave'
     },
 
-    /**
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   An object with the following keys:
-     * @param {Drupal.quickedit.EditorView} options.editorView
-     *   The editor object view.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       this.editorView = options.editorView;
 
       this.listenTo(this.model, 'change:state', this.stateChange);
       this.listenTo(this.model, 'change:isChanged change:inTempStore', this.renderChanged);
     },
 
-    /**
-     * @inheritdoc
-     */
-    remove: function () {
-      // The el property is the field, which should not be removed. Remove the
-      // pointer to it, then call Backbone.View.prototype.remove().
+    remove: function remove() {
       this.setElement();
       Backbone.View.prototype.remove.call(this);
     },
 
-    /**
-     * Determines the actions to take given a change of state.
-     *
-     * @param {Drupal.quickedit.FieldModel} model
-     *   The `FieldModel` model.
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.FieldModel.states}.
-     */
-    stateChange: function (model, state) {
+    stateChange: function stateChange(model, state) {
       var from = model.previous('state');
       var to = state;
       switch (to) {
@@ -86,8 +56,6 @@
           break;
 
         case 'activating':
-          // NOTE: this state is not used by every editor! It's only used by
-          // those that need to interact with the server.
           this.prepareEdit();
           break;
 
@@ -115,221 +83,125 @@
       }
     },
 
-    /**
-     * Adds a class to the edited element that indicates whether the field has
-     * been changed by the user (i.e. locally) or the field has already been
-     * changed and stored before by the user (i.e. remotely, stored in
-     * PrivateTempStore).
-     */
-    renderChanged: function () {
+    renderChanged: function renderChanged() {
       this.$el.toggleClass('quickedit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
     },
 
-    /**
-     * Starts hover; transitions to 'highlight' state.
-     *
-     * @param {jQuery.Event} event
-     *   The mouse event.
-     */
-    onMouseEnter: function (event) {
+    onMouseEnter: function onMouseEnter(event) {
       var that = this;
       that.model.set('state', 'highlighted');
       event.stopPropagation();
     },
 
-    /**
-     * Stops hover; transitions to 'candidate' state.
-     *
-     * @param {jQuery.Event} event
-     *   The mouse event.
-     */
-    onMouseLeave: function (event) {
+    onMouseLeave: function onMouseLeave(event) {
       var that = this;
-      that.model.set('state', 'candidate', {reason: 'mouseleave'});
+      that.model.set('state', 'candidate', { reason: 'mouseleave' });
       event.stopPropagation();
     },
 
-    /**
-     * Transition to 'activating' stage.
-     *
-     * @param {jQuery.Event} event
-     *   The click event.
-     */
-    onClick: function (event) {
+    onClick: function onClick(event) {
       this.model.set('state', 'activating');
       event.preventDefault();
       event.stopPropagation();
     },
 
-    /**
-     * Adds classes used to indicate an elements editable state.
-     */
-    decorate: function () {
+    decorate: function decorate() {
       this.$el.addClass('quickedit-candidate quickedit-editable');
     },
 
-    /**
-     * Removes classes used to indicate an elements editable state.
-     */
-    undecorate: function () {
+    undecorate: function undecorate() {
       this.$el.removeClass('quickedit-candidate quickedit-editable quickedit-highlighted quickedit-editing');
     },
 
-    /**
-     * Adds that class that indicates that an element is highlighted.
-     */
-    startHighlight: function () {
-      // Animations.
+    startHighlight: function startHighlight() {
       var that = this;
-      // Use a timeout to grab the next available animation frame.
+
       that.$el.addClass('quickedit-highlighted');
     },
 
-    /**
-     * Removes the class that indicates that an element is highlighted.
-     */
-    stopHighlight: function () {
+    stopHighlight: function stopHighlight() {
       this.$el.removeClass('quickedit-highlighted');
     },
 
-    /**
-     * Removes the class that indicates that an element as editable.
-     */
-    prepareEdit: function () {
+    prepareEdit: function prepareEdit() {
       this.$el.addClass('quickedit-editing');
 
-      // Allow the field to be styled differently while editing in a pop-up
-      // in-place editor.
       if (this.editorView.getQuickEditUISettings().popup) {
         this.$el.addClass('quickedit-editor-is-popup');
       }
     },
 
-    /**
-     * Removes the class that indicates that an element is being edited.
-     *
-     * Reapplies the class that indicates that a candidate editable element is
-     * again available to be edited.
-     */
-    stopEdit: function () {
+    stopEdit: function stopEdit() {
       this.$el.removeClass('quickedit-highlighted quickedit-editing');
 
-      // Done editing in a pop-up in-place editor; remove the class.
       if (this.editorView.getQuickEditUISettings().popup) {
         this.$el.removeClass('quickedit-editor-is-popup');
       }
 
-      // Make the other editors show up again.
       $('.quickedit-candidate').addClass('quickedit-editable');
     },
 
-    /**
-     * Adds padding around the editable element to make it pop visually.
-     */
-    _pad: function () {
-      // Early return if the element has already been padded.
+    _pad: function _pad() {
       if (this.$el.data('quickedit-padded')) {
         return;
       }
       var self = this;
 
-      // Add 5px padding for readability. This means we'll freeze the current
-      // width and *then* add 5px padding, hence ensuring the padding is added
-      // "on the outside".
-      // 1) Freeze the width (if it's not already set); don't use animations.
       if (this.$el[0].style.width === '') {
         this._widthAttributeIsEmpty = true;
-        this.$el
-          .addClass('quickedit-animate-disable-width')
-          .css('width', this.$el.width());
+        this.$el.addClass('quickedit-animate-disable-width').css('width', this.$el.width());
       }
 
-      // 2) Add padding; use animations.
       var posProp = this._getPositionProperties(this.$el);
       setTimeout(function () {
-        // Re-enable width animations (padding changes affect width too!).
         self.$el.removeClass('quickedit-animate-disable-width');
 
-        // Pad the editable.
-        self.$el
-          .css({
-            'position': 'relative',
-            'top': posProp.top - 5 + 'px',
-            'left': posProp.left - 5 + 'px',
-            'padding-top': posProp['padding-top'] + 5 + 'px',
-            'padding-left': posProp['padding-left'] + 5 + 'px',
-            'padding-right': posProp['padding-right'] + 5 + 'px',
-            'padding-bottom': posProp['padding-bottom'] + 5 + 'px',
-            'margin-bottom': posProp['margin-bottom'] - 10 + 'px'
-          })
-          .data('quickedit-padded', true);
+        self.$el.css({
+          'position': 'relative',
+          'top': posProp.top - 5 + 'px',
+          'left': posProp.left - 5 + 'px',
+          'padding-top': posProp['padding-top'] + 5 + 'px',
+          'padding-left': posProp['padding-left'] + 5 + 'px',
+          'padding-right': posProp['padding-right'] + 5 + 'px',
+          'padding-bottom': posProp['padding-bottom'] + 5 + 'px',
+          'margin-bottom': posProp['margin-bottom'] - 10 + 'px'
+        }).data('quickedit-padded', true);
       }, 0);
     },
 
-    /**
-     * Removes the padding around the element being edited when editing ceases.
-     */
-    _unpad: function () {
-      // Early return if the element has not been padded.
+    _unpad: function _unpad() {
       if (!this.$el.data('quickedit-padded')) {
         return;
       }
       var self = this;
 
-      // 1) Set the empty width again.
       if (this._widthAttributeIsEmpty) {
-        this.$el
-          .addClass('quickedit-animate-disable-width')
-          .css('width', '');
+        this.$el.addClass('quickedit-animate-disable-width').css('width', '');
       }
 
-      // 2) Remove padding; use animations (these will run simultaneously with)
-      // the fading out of the toolbar as its gets removed).
       var posProp = this._getPositionProperties(this.$el);
       setTimeout(function () {
-        // Re-enable width animations (padding changes affect width too!).
         self.$el.removeClass('quickedit-animate-disable-width');
 
-        // Unpad the editable.
-        self.$el
-          .css({
-            'position': 'relative',
-            'top': posProp.top + 5 + 'px',
-            'left': posProp.left + 5 + 'px',
-            'padding-top': posProp['padding-top'] - 5 + 'px',
-            'padding-left': posProp['padding-left'] - 5 + 'px',
-            'padding-right': posProp['padding-right'] - 5 + 'px',
-            'padding-bottom': posProp['padding-bottom'] - 5 + 'px',
-            'margin-bottom': posProp['margin-bottom'] + 10 + 'px'
-          });
+        self.$el.css({
+          'position': 'relative',
+          'top': posProp.top + 5 + 'px',
+          'left': posProp.left + 5 + 'px',
+          'padding-top': posProp['padding-top'] - 5 + 'px',
+          'padding-left': posProp['padding-left'] - 5 + 'px',
+          'padding-right': posProp['padding-right'] - 5 + 'px',
+          'padding-bottom': posProp['padding-bottom'] - 5 + 'px',
+          'margin-bottom': posProp['margin-bottom'] + 10 + 'px'
+        });
       }, 0);
-      // Remove the marker that indicates that this field has padding. This is
-      // done outside the timed out function above so that we don't get numerous
-      // queued functions that will remove padding before the data marker has
-      // been removed.
+
       this.$el.removeData('quickedit-padded');
     },
 
-    /**
-     * Gets the top and left properties of an element.
-     *
-     * Convert extraneous values and information into numbers ready for
-     * subtraction.
-     *
-     * @param {jQuery} $e
-     *   The element to get position properties from.
-     *
-     * @return {object}
-     *   An object containing css values for the needed properties.
-     */
-    _getPositionProperties: function ($e) {
+    _getPositionProperties: function _getPositionProperties($e) {
       var p;
       var r = {};
-      var props = [
-        'top', 'left', 'bottom', 'right',
-        'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
-        'margin-bottom'
-      ];
+      var props = ['top', 'left', 'bottom', 'right', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom', 'margin-bottom'];
 
       var propCount = props.length;
       for (var i = 0; i < propCount; i++) {
@@ -339,16 +211,7 @@
       return r;
     },
 
-    /**
-     * Replaces blank or 'auto' CSS `position: <value>` values with "0px".
-     *
-     * @param {string} [pos]
-     *   The value for a CSS position declaration.
-     *
-     * @return {string}
-     *   A CSS value that is valid for `position`.
-     */
-    _replaceBlankPosition: function (pos) {
+    _replaceBlankPosition: function _replaceBlankPosition(pos) {
       if (pos === 'auto' || !pos) {
         pos = '0px';
       }
@@ -356,5 +219,4 @@
     }
 
   });
-
-})(jQuery, Backbone, Drupal);
+})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/quickedit/js/views/FieldToolbarView.js b/core/modules/quickedit/js/views/FieldToolbarView.es6.js
similarity index 100%
copy from core/modules/quickedit/js/views/FieldToolbarView.js
copy to core/modules/quickedit/js/views/FieldToolbarView.es6.js
diff --git a/core/modules/quickedit/js/views/FieldToolbarView.js b/core/modules/quickedit/js/views/FieldToolbarView.js
index dbd531f441..5fbdd22aff 100644
--- a/core/modules/quickedit/js/views/FieldToolbarView.js
+++ b/core/modules/quickedit/js/views/FieldToolbarView.js
@@ -1,88 +1,42 @@
 /**
- * @file
- * A Backbone View that provides an interactive toolbar (1 per in-place editor).
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/quickedit/js/views/FieldToolbarView.es6.js
+* @preserve
+**/
 
 (function ($, _, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.quickedit.FieldToolbarView = Backbone.View.extend(/** @lends Drupal.quickedit.FieldToolbarView# */{
-
-    /**
-     * The edited element, as indicated by EditorView.getEditedElement.
-     *
-     * @type {jQuery}
-     */
+  Drupal.quickedit.FieldToolbarView = Backbone.View.extend({
     $editedElement: null,
 
-    /**
-     * A reference to the in-place editor.
-     *
-     * @type {Drupal.quickedit.EditorView}
-     */
     editorView: null,
 
-    /**
-     * @type {string}
-     */
     _id: null,
 
-    /**
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   Options object to construct the field toolbar.
-     * @param {jQuery} options.$editedElement
-     *   The element being edited.
-     * @param {Drupal.quickedit.EditorView} options.editorView
-     *   The EditorView the toolbar belongs to.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       this.$editedElement = options.$editedElement;
       this.editorView = options.editorView;
 
-      /**
-       * @type {jQuery}
-       */
       this.$root = this.$el;
 
-      // Generate a DOM-compatible ID for the form container DOM element.
       this._id = 'quickedit-toolbar-for-' + this.model.id.replace(/[\/\[\]]/g, '_');
 
       this.listenTo(this.model, 'change:state', this.stateChange);
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.quickedit.FieldToolbarView}
-     *   The current FieldToolbarView.
-     */
-    render: function () {
-      // Render toolbar and set it as the view's element.
+    render: function render() {
       this.setElement($(Drupal.theme('quickeditFieldToolbar', {
         id: this._id
       })));
 
-      // Attach to the field toolbar $root element in the entity toolbar.
       this.$el.prependTo(this.$root);
 
       return this;
     },
 
-    /**
-     * Determines the actions to take given a change of state.
-     *
-     * @param {Drupal.quickedit.FieldModel} model
-     *   The quickedit FieldModel
-     * @param {string} state
-     *   The state of the associated field. One of
-     *   {@link Drupal.quickedit.FieldModel.states}.
-     */
-    stateChange: function (model, state) {
+    stateChange: function stateChange(model, state) {
       var from = model.previous('state');
       var to = state;
       switch (to) {
@@ -90,9 +44,6 @@
           break;
 
         case 'candidate':
-          // Remove the view's existing element if we went to the 'activating'
-          // state or later, because it will be recreated. Not doing this would
-          // result in memory leaks.
           if (from !== 'inactive' && from !== 'highlighted') {
             this.$el.remove();
             this.setElement();
@@ -131,97 +82,48 @@
       }
     },
 
-    /**
-     * Insert WYSIWYG markup into the associated toolbar.
-     */
-    insertWYSIWYGToolGroups: function () {
-      this.$el
-        .append(Drupal.theme('quickeditToolgroup', {
-          id: this.getFloatedWysiwygToolgroupId(),
-          classes: ['wysiwyg-floated', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
-          buttons: []
-        }))
-        .append(Drupal.theme('quickeditToolgroup', {
-          id: this.getMainWysiwygToolgroupId(),
-          classes: ['wysiwyg-main', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
-          buttons: []
-        }));
-
-      // Animate the toolgroups into visibility.
+    insertWYSIWYGToolGroups: function insertWYSIWYGToolGroups() {
+      this.$el.append(Drupal.theme('quickeditToolgroup', {
+        id: this.getFloatedWysiwygToolgroupId(),
+        classes: ['wysiwyg-floated', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
+        buttons: []
+      })).append(Drupal.theme('quickeditToolgroup', {
+        id: this.getMainWysiwygToolgroupId(),
+        classes: ['wysiwyg-main', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
+        buttons: []
+      }));
+
       this.show('wysiwyg-floated');
       this.show('wysiwyg-main');
     },
 
-    /**
-     * Retrieves the ID for this toolbar's container.
-     *
-     * Only used to make sane hovering behavior possible.
-     *
-     * @return {string}
-     *   A string that can be used as the ID for this toolbar's container.
-     */
-    getId: function () {
+    getId: function getId() {
       return 'quickedit-toolbar-for-' + this._id;
     },
 
-    /**
-     * Retrieves the ID for this toolbar's floating WYSIWYG toolgroup.
-     *
-     * Used to provide an abstraction for any WYSIWYG editor to plug in.
-     *
-     * @return {string}
-     *   A string that can be used as the ID.
-     */
-    getFloatedWysiwygToolgroupId: function () {
+    getFloatedWysiwygToolgroupId: function getFloatedWysiwygToolgroupId() {
       return 'quickedit-wysiwyg-floated-toolgroup-for-' + this._id;
     },
 
-    /**
-     * Retrieves the ID for this toolbar's main WYSIWYG toolgroup.
-     *
-     * Used to provide an abstraction for any WYSIWYG editor to plug in.
-     *
-     * @return {string}
-     *   A string that can be used as the ID.
-     */
-    getMainWysiwygToolgroupId: function () {
+    getMainWysiwygToolgroupId: function getMainWysiwygToolgroupId() {
       return 'quickedit-wysiwyg-main-toolgroup-for-' + this._id;
     },
 
-    /**
-     * Finds a toolgroup.
-     *
-     * @param {string} toolgroup
-     *   A toolgroup name.
-     *
-     * @return {jQuery}
-     *   The toolgroup element.
-     */
-    _find: function (toolgroup) {
+    _find: function _find(toolgroup) {
       return this.$el.find('.quickedit-toolgroup.' + toolgroup);
     },
 
-    /**
-     * Shows a toolgroup.
-     *
-     * @param {string} toolgroup
-     *   A toolgroup name.
-     */
-    show: function (toolgroup) {
+    show: function show(toolgroup) {
       var $group = this._find(toolgroup);
-      // Attach a transitionEnd event handler to the toolbar group so that
-      // update events can be triggered after the animations have ended.
+
       $group.on(Drupal.quickedit.util.constants.transitionEnd, function (event) {
         $group.off(Drupal.quickedit.util.constants.transitionEnd);
       });
-      // The call to remove the class and start the animation must be started in
-      // the next animation frame or the event handler attached above won't be
-      // triggered.
+
       window.setTimeout(function () {
         $group.removeClass('quickedit-animate-invisible');
       }, 0);
     }
 
   });
-
-})(jQuery, _, Backbone, Drupal);
+})(jQuery, _, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/responsive_image/js/responsive_image.ajax.js b/core/modules/responsive_image/js/responsive_image.ajax.es6.js
similarity index 100%
copy from core/modules/responsive_image/js/responsive_image.ajax.js
copy to core/modules/responsive_image/js/responsive_image.ajax.es6.js
diff --git a/core/modules/responsive_image/js/responsive_image.ajax.js b/core/modules/responsive_image/js/responsive_image.ajax.js
index 52093193ec..15462510de 100644
--- a/core/modules/responsive_image/js/responsive_image.ajax.js
+++ b/core/modules/responsive_image/js/responsive_image.ajax.js
@@ -1,16 +1,18 @@
+/**
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/responsive_image/js/responsive_image.ajax.es6.js
+* @preserve
+**/
+
 (function (Drupal) {
 
   'use strict';
 
-  /**
-   * Call picturefill so newly added responsive images are processed.
-   */
   Drupal.behaviors.responsiveImageAJAX = {
-    attach: function () {
+    attach: function attach() {
       if (window.picturefill) {
         window.picturefill();
       }
     }
   };
-
-})(Drupal);
+})(Drupal);
\ No newline at end of file
diff --git a/core/modules/simpletest/simpletest.js b/core/modules/simpletest/simpletest.es6.js
similarity index 100%
copy from core/modules/simpletest/simpletest.js
copy to core/modules/simpletest/simpletest.es6.js
diff --git a/core/modules/simpletest/simpletest.js b/core/modules/simpletest/simpletest.js
index ba54cbf74b..0ad6b75608 100644
--- a/core/modules/simpletest/simpletest.js
+++ b/core/modules/simpletest/simpletest.js
@@ -1,48 +1,31 @@
 /**
- * @file
- * Simpletest behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/simpletest/simpletest.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Collapses table rows followed by group rows on the test listing page.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attach collapse behavior on the test listing page.
-   */
   Drupal.behaviors.simpleTestGroupCollapse = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('.simpletest-group').once('simpletest-group-collapse').each(function () {
         var $group = $(this);
         var $image = $group.find('.simpletest-image');
-        $image
-          .html(drupalSettings.simpleTest.images[0])
-          .on('click', function () {
-            var $tests = $group.nextUntil('.simpletest-group');
-            var expand = !$group.hasClass('expanded');
-            $group.toggleClass('expanded', expand);
-            $tests.toggleClass('js-hide', !expand);
-            $image.html(drupalSettings.simpleTest.images[+expand]);
-          });
+        $image.html(drupalSettings.simpleTest.images[0]).on('click', function () {
+          var $tests = $group.nextUntil('.simpletest-group');
+          var expand = !$group.hasClass('expanded');
+          $group.toggleClass('expanded', expand);
+          $tests.toggleClass('js-hide', !expand);
+          $image.html(drupalSettings.simpleTest.images[+expand]);
+        });
       });
     }
   };
 
-  /**
-   * Toggles test checkboxes to match the group checkbox.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for selecting all tests in a group.
-   */
   Drupal.behaviors.simpleTestSelectAll = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('.simpletest-group').once('simpletest-group-select-all').each(function () {
         var $group = $(this);
         var $cell = $group.find('.simpletest-group-select-all');
@@ -50,13 +33,11 @@
         var $testCheckboxes = $group.nextUntil('.simpletest-group').find('input[type=checkbox]');
         $cell.append($groupCheckbox);
 
-        // Toggle the test checkboxes when the group checkbox is toggled.
         $groupCheckbox.on('change', function () {
           var checked = $(this).prop('checked');
           $testCheckboxes.prop('checked', checked);
         });
 
-        // Update the group checkbox when a test checkbox is toggled.
         function updateGroupCheckbox() {
           var allChecked = true;
           $testCheckboxes.each(function () {
@@ -73,20 +54,8 @@
     }
   };
 
-  /**
-   * Filters the test list table by a text input search string.
-   *
-   * Text search input: input.table-filter-text
-   * Target table:      input.table-filter-text[data-table]
-   * Source text:       .table-filter-text-source
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the filter behavior to the text input element.
-   */
   Drupal.behaviors.simpletestTableFilterByText = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $input = $('input.table-filter-text').once('table-filter-text');
       var $table = $($input.attr('data-table'));
       var $rows;
@@ -102,22 +71,17 @@
           $row.closest('tr').toggle(textMatch);
         }
 
-        // Filter if the length of the query is at least 3 characters.
         if (query.length >= 3) {
-          // Indicate that a search has been performed, and hide the
-          // "select all" checkbox.
           searched = true;
           $('#simpletest-form-table thead th.select-all input').hide();
 
           $rows.each(showTestRow);
-        }
-        // Restore to the original state if any searching has occurred.
-        else if (searched) {
-          searched = false;
-          $('#simpletest-form-table thead th.select-all input').show();
-          // Restore all rows to their original display state.
-          $rows.css('display', '');
-        }
+        } else if (searched) {
+            searched = false;
+            $('#simpletest-form-table thead th.select-all input').show();
+
+            $rows.css('display', '');
+          }
       }
 
       if ($table.length) {
@@ -126,5 +90,4 @@
       }
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/statistics/statistics.js b/core/modules/statistics/statistics.es6.js
similarity index 100%
copy from core/modules/statistics/statistics.js
copy to core/modules/statistics/statistics.es6.js
diff --git a/core/modules/statistics/statistics.js b/core/modules/statistics/statistics.js
index 572cd456ff..2804b09883 100644
--- a/core/modules/statistics/statistics.js
+++ b/core/modules/statistics/statistics.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Statistics functionality.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/statistics/statistics.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
@@ -15,4 +16,4 @@
       data: drupalSettings.statistics.data
     });
   });
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.es6.js
similarity index 100%
copy from core/modules/system/js/system.date.js
copy to core/modules/system/js/system.date.es6.js
diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.js
index 678614d98c..e0f17390fe 100644
--- a/core/modules/system/js/system.date.js
+++ b/core/modules/system/js/system.date.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Provides date format preview feature.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/js/system.date.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
@@ -9,32 +10,17 @@
 
   var dateFormats = drupalSettings.dateFormats;
 
-  /**
-   * Display the preview for date format entered.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attach behavior for previewing date formats on input elements.
-   */
   Drupal.behaviors.dateFormat = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       var $source = $context.find('[data-drupal-date-formatter="source"]').once('dateFormat');
       var $target = $context.find('[data-drupal-date-formatter="preview"]').once('dateFormat');
       var $preview = $target.find('em');
 
-      // All elements have to exist.
       if (!$source.length || !$target.length) {
         return;
       }
 
-      /**
-       * Event handler that replaces date characters with value.
-       *
-       * @param {jQuery.Event} e
-       *   The jQuery event triggered.
-       */
       function dateFormatHandler(e) {
         var baseValue = $(e.target).val() || '';
         var dateString = baseValue.replace(/\\?(.?)/gi, function (key, value) {
@@ -45,13 +31,7 @@
         $target.toggleClass('js-hide', !dateString.length);
       }
 
-      /**
-       * On given event triggers the date character replacement.
-       */
-      $source.on('keyup.dateFormat change.dateFormat input.dateFormat', dateFormatHandler)
-        // Initialize preview.
-        .trigger('keyup');
+      $source.on('keyup.dateFormat change.dateFormat input.dateFormat', dateFormatHandler).trigger('keyup');
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/js/system.js b/core/modules/system/js/system.es6.js
similarity index 100%
copy from core/modules/system/js/system.js
copy to core/modules/system/js/system.es6.js
diff --git a/core/modules/system/js/system.js b/core/modules/system/js/system.js
index 82f0de6687..170642aca3 100644
--- a/core/modules/system/js/system.js
+++ b/core/modules/system/js/system.js
@@ -1,81 +1,46 @@
 /**
- * @file
- * System behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/js/system.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  // Cache IDs in an array for ease of use.
   var ids = [];
 
-  /**
-   * Attaches field copy behavior from input fields to other input fields.
-   *
-   * When a field is filled out, apply its value to other fields that will
-   * likely use the same value. In the installer this is used to populate the
-   * administrator email address with the same value as the site email address.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the field copy behavior to an input field.
-   */
   Drupal.behaviors.copyFieldValue = {
-    attach: function (context) {
-      // List of fields IDs on which to bind the event listener.
-      // Create an array of IDs to use with jQuery.
+    attach: function attach(context) {
       for (var sourceId in drupalSettings.copyFieldValue) {
         if (drupalSettings.copyFieldValue.hasOwnProperty(sourceId)) {
           ids.push(sourceId);
         }
       }
       if (ids.length) {
-        // Listen to value:copy events on all dependent fields.
-        // We have to use body and not document because of the way jQuery events
-        // bubble up the DOM tree.
         $('body').once('copy-field-values').on('value:copy', this.valueTargetCopyHandler);
-        // Listen on all source elements.
+
         $('#' + ids.join(', #')).once('copy-field-values').on('blur', this.valueSourceBlurHandler);
       }
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload' && ids.length) {
         $('body').removeOnce('copy-field-values').off('value:copy');
         $('#' + ids.join(', #')).removeOnce('copy-field-values').off('blur');
       }
     },
 
-    /**
-     * Event handler that fill the target element with the specified value.
-     *
-     * @param {jQuery.Event} e
-     *   Event object.
-     * @param {string} value
-     *   Custom value from jQuery trigger.
-     */
-    valueTargetCopyHandler: function (e, value) {
+    valueTargetCopyHandler: function valueTargetCopyHandler(e, value) {
       var $target = $(e.target);
       if ($target.val() === '') {
         $target.val(value);
       }
     },
 
-    /**
-     * Handler for a Blur event on a source field.
-     *
-     * This event handler will trigger a 'value:copy' event on all dependent
-     * fields.
-     *
-     * @param {jQuery.Event} e
-     *   The event triggered.
-     */
-    valueSourceBlurHandler: function (e) {
+    valueSourceBlurHandler: function valueSourceBlurHandler(e) {
       var value = $(e.target).val();
       var targetIds = drupalSettings.copyFieldValue[e.target.id];
       $('#' + targetIds.join(', #')).trigger('value:copy', value);
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/js/system.modules.js b/core/modules/system/js/system.modules.es6.js
similarity index 100%
copy from core/modules/system/js/system.modules.js
copy to core/modules/system/js/system.modules.es6.js
diff --git a/core/modules/system/js/system.modules.js b/core/modules/system/js/system.modules.js
index d47ca7031e..643023d9a7 100644
--- a/core/modules/system/js/system.modules.js
+++ b/core/modules/system/js/system.modules.js
@@ -1,26 +1,15 @@
 /**
- * @file
- * Module page behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/js/system.modules.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, debounce) {
 
   'use strict';
 
-  /**
-   * Filters the module list table by a text input search string.
-   *
-   * Additionally accounts for multiple tables being wrapped in "package" details
-   * elements.
-   *
-   * Text search input: input.table-filter-text
-   * Target table:      input.table-filter-text[data-table]
-   * Source text:       .table-filter-text-source, .module-name, .module-description
-   *
-   * @type {Drupal~behavior}
-   */
   Drupal.behaviors.tableFilterByText = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $input = $('input.table-filter-text').once('table-filter-text');
       var $table = $($input.attr('data-table'));
       var $rowsAndDetails;
@@ -36,7 +25,7 @@
 
       function filterModuleList(e) {
         var query = $(e.target).val();
-        // Case insensitive expression to find query at the beginning of a word.
+
         var re = new RegExp('\\b' + query, 'i');
 
         function showModuleRow(index, row) {
@@ -45,38 +34,23 @@
           var textMatch = $sources.text().search(re) !== -1;
           $row.closest('tr').toggle(textMatch);
         }
-        // Search over all rows and packages.
+
         $rowsAndDetails.show();
 
-        // Filter if the length of the query is at least 2 characters.
         if (query.length >= 2) {
           searching = true;
           $rows.each(showModuleRow);
 
-          // Note that we first open all <details> to be able to use ':visible'.
-          // Mark the <details> elements that were closed before filtering, so
-          // they can be reclosed when filtering is removed.
           $details.not('[open]').attr('data-drupal-system-state', 'forced-open');
 
-          // Hide the package <details> if they don't have any visible rows.
-          // Note that we first show() all <details> to be able to use ':visible'.
           $details.attr('open', true).each(hidePackageDetails);
 
-          Drupal.announce(
-            Drupal.t(
-              '!modules modules are available in the modified list.',
-              {'!modules': $rowsAndDetails.find('tbody tr:visible').length}
-            )
-          );
-        }
-        else if (searching) {
+          Drupal.announce(Drupal.t('!modules modules are available in the modified list.', { '!modules': $rowsAndDetails.find('tbody tr:visible').length }));
+        } else if (searching) {
           searching = false;
           $rowsAndDetails.show();
-          // Return <details> elements that had been closed before filtering
-          // to a closed state.
-          $details.filter('[data-drupal-system-state="forced-open"]')
-            .removeAttr('data-drupal-system-state')
-            .attr('open', false);
+
+          $details.filter('[data-drupal-system-state="forced-open"]').removeAttr('data-drupal-system-state').attr('open', false);
         }
       }
 
@@ -99,5 +73,4 @@
       }
     }
   };
-
-}(jQuery, Drupal, Drupal.debounce));
+})(jQuery, Drupal, Drupal.debounce);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.es6.js
similarity index 100%
copy from core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
copy to core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.es6.js
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
index 3fa82d98bc..b50f95d907 100644
--- a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
+++ b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.js
@@ -1,22 +1,16 @@
 /**
- * @file
- *  Testing behavior for JSWebAssertTest.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_ajax_request.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Makes changes in the DOM to be able to test the completion of AJAX in assertWaitOnAjaxRequest.
-   */
   Drupal.behaviors.js_webassert_test_wait_for_ajax_request = {
-    attach: function (context) {
+    attach: function attach(context) {
       $('input[name="test_assert_wait_on_ajax_input"]').val('js_webassert_test');
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.es6.js
similarity index 100%
copy from core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
copy to core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.es6.js
diff --git a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
index e11067b24c..21a2c37a17 100644
--- a/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
+++ b/core/modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.js
@@ -1,22 +1,16 @@
 /**
- * @file
- *  Testing behavior for JSWebAssertTest.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/tests/modules/js_webassert_test/js/js_webassert_test.wait_for_element.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Makes changes in the DOM to be able to test the completion of AJAX in assertWaitOnAjaxRequest.
-   */
   Drupal.behaviors.js_webassert_test_wait_for_element = {
-    attach: function (context) {
+    attach: function attach(context) {
       $('#js_webassert_test_element_invisible').show();
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/twig_theme_test/twig_theme_test.js b/core/modules/system/tests/modules/twig_theme_test/twig_theme_test.es6.js
similarity index 100%
copy from core/modules/system/tests/modules/twig_theme_test/twig_theme_test.js
copy to core/modules/system/tests/modules/twig_theme_test/twig_theme_test.es6.js
diff --git a/core/modules/system/tests/modules/twig_theme_test/twig_theme_test.js b/core/modules/system/tests/modules/twig_theme_test/twig_theme_test.js
index 39bf0bb572..e51d3806b9 100644
--- a/core/modules/system/tests/modules/twig_theme_test/twig_theme_test.js
+++ b/core/modules/system/tests/modules/twig_theme_test/twig_theme_test.js
@@ -1,6 +1,5 @@
 /**
- * @file
- * This file is for testing asset file inclusion, no contents are necessary.
- *
- * @ignore
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/tests/modules/twig_theme_test/twig_theme_test.es6.js
+* @preserve
+**/
\ No newline at end of file
diff --git a/core/modules/system/tests/themes/test_theme/js/collapse.js b/core/modules/system/tests/themes/test_theme/js/collapse.es6.js
similarity index 100%
copy from core/modules/system/tests/themes/test_theme/js/collapse.js
copy to core/modules/system/tests/themes/test_theme/js/collapse.es6.js
diff --git a/core/modules/system/tests/themes/test_theme/js/collapse.js b/core/modules/system/tests/themes/test_theme/js/collapse.js
index 4d66841e81..9378e74a47 100644
--- a/core/modules/system/tests/themes/test_theme/js/collapse.js
+++ b/core/modules/system/tests/themes/test_theme/js/collapse.js
@@ -1,4 +1,5 @@
 /**
- * @file
- * Test JS asset file for test_theme.theme.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/system/tests/themes/test_theme/js/collapse.es6.js
+* @preserve
+**/
\ No newline at end of file
diff --git a/core/modules/taxonomy/taxonomy.js b/core/modules/taxonomy/taxonomy.es6.js
similarity index 100%
copy from core/modules/taxonomy/taxonomy.js
copy to core/modules/taxonomy/taxonomy.es6.js
diff --git a/core/modules/taxonomy/taxonomy.js b/core/modules/taxonomy/taxonomy.js
index 99338d5a8e..5da52dd3b5 100644
--- a/core/modules/taxonomy/taxonomy.js
+++ b/core/modules/taxonomy/taxonomy.js
@@ -1,33 +1,22 @@
 /**
- * @file
- * Taxonomy behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/taxonomy/taxonomy.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Move a block in the blocks table from one region to another.
-   *
-   * This behavior is dependent on the tableDrag behavior, since it uses the
-   * objects initialized in that behavior to update the row.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the drag behavior to a applicable table element.
-   */
   Drupal.behaviors.termDrag = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var backStep = settings.taxonomy.backStep;
       var forwardStep = settings.taxonomy.forwardStep;
-      // Get the blocks tableDrag object.
+
       var tableDrag = Drupal.tableDrag.taxonomy;
       var $table = $('#taxonomy');
       var rows = $table.find('tr').length;
 
-      // When a row is swapped, keep previous and next page classes set.
       tableDrag.row.prototype.onSwap = function (swappedRow) {
         $table.find('tr.taxonomy-term-preview').removeClass('taxonomy-term-preview');
         $table.find('tr.taxonomy-term-divider-top').removeClass('taxonomy-term-divider-top');
@@ -52,5 +41,4 @@
       };
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/text/text.js b/core/modules/text/text.es6.js
similarity index 100%
copy from core/modules/text/text.js
copy to core/modules/text/text.es6.js
diff --git a/core/modules/text/text.js b/core/modules/text/text.js
index ad89bd8ad1..6554ae14ca 100644
--- a/core/modules/text/text.js
+++ b/core/modules/text/text.js
@@ -1,22 +1,15 @@
 /**
- * @file
- * Text behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/text/text.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Auto-hide summary textarea if empty and show hide and unhide links.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches auto-hide behavior on `text-summary` events.
-   */
   Drupal.behaviors.textSummary = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       $(context).find('.js-text-summary').once('text-summary').each(function () {
         var $widget = $(this).closest('.js-text-format-wrapper');
 
@@ -25,13 +18,10 @@
         var $full = $widget.find('.js-text-full').closest('.js-form-item');
         var $fullLabel = $full.find('label').eq(0);
 
-        // Create a placeholder label when the field cardinality is greater
-        // than 1.
         if ($fullLabel.length === 0) {
           $fullLabel = $('<label></label>').prependTo($full);
         }
 
-        // Set up the edit/hide summary link.
         var $link = $('<span class="field-edit-link"> (<button type="button" class="link link-edit-summary">' + Drupal.t('Hide summary') + '</button>)</span>');
         var $button = $link.find('button');
         var toggleClick = true;
@@ -40,8 +30,7 @@
             $summary.hide();
             $button.html(Drupal.t('Edit summary'));
             $link.appendTo($fullLabel);
-          }
-          else {
+          } else {
             $summary.show();
             $button.html(Drupal.t('Hide summary'));
             $link.appendTo($summaryLabel);
@@ -50,12 +39,10 @@
           toggleClick = !toggleClick;
         }).appendTo($summaryLabel);
 
-        // If no summary is set, hide the summary field.
         if ($widget.find('.js-text-summary').val() === '') {
           $link.trigger('click');
         }
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.es6.js
similarity index 100%
copy from core/modules/toolbar/js/escapeAdmin.js
copy to core/modules/toolbar/js/escapeAdmin.es6.js
diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js
index 6e8f992fd4..2176400e41 100644
--- a/core/modules/toolbar/js/escapeAdmin.js
+++ b/core/modules/toolbar/js/escapeAdmin.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Replaces the home link in toolbar with a back to site link.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/escapeAdmin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
@@ -11,38 +12,21 @@
   var escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
   var windowLocation = window.location;
 
-  // Saves the last non-administrative page in the browser to be able to link
-  // back to it when browsing administrative pages. If there is a destination
-  // parameter there is not need to save the current path because the page is
-  // loaded within an existing "workflow".
   if (!pathInfo.currentPathIsAdmin && !/destination=/.test(windowLocation.search)) {
     sessionStorage.setItem('escapeAdminPath', windowLocation);
   }
 
-  /**
-   * Replaces the "Home" link with "Back to site" link.
-   *
-   * Back to site link points to the last non-administrative page the user
-   * visited within the same browser tab.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the replacement functionality to the toolbar-escape-admin element.
-   */
   Drupal.behaviors.escapeAdmin = {
-    attach: function () {
+    attach: function attach() {
       var $toolbarEscape = $('[data-toolbar-escape-admin]').once('escapeAdmin');
       if ($toolbarEscape.length && pathInfo.currentPathIsAdmin) {
         if (escapeAdminPath !== null) {
           $toolbarEscape.attr('href', escapeAdminPath);
-        }
-        else {
+        } else {
           $toolbarEscape.text(Drupal.t('Home'));
         }
         $toolbarEscape.closest('.toolbar-tab').removeClass('hidden');
       }
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/models/MenuModel.js b/core/modules/toolbar/js/models/MenuModel.es6.js
similarity index 100%
copy from core/modules/toolbar/js/models/MenuModel.js
copy to core/modules/toolbar/js/models/MenuModel.es6.js
diff --git a/core/modules/toolbar/js/models/MenuModel.js b/core/modules/toolbar/js/models/MenuModel.js
index 072a4f1415..902949e9bf 100644
--- a/core/modules/toolbar/js/models/MenuModel.js
+++ b/core/modules/toolbar/js/models/MenuModel.js
@@ -1,33 +1,16 @@
 /**
- * @file
- * A Backbone Model for collapsible menus.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/models/MenuModel.es6.js
+* @preserve
+**/
 
 (function (Backbone, Drupal) {
 
   'use strict';
 
-  /**
-   * Backbone Model for collapsible menus.
-   *
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.toolbar.MenuModel = Backbone.Model.extend(/** @lends Drupal.toolbar.MenuModel# */{
-
-    /**
-     * @type {object}
-     *
-     * @prop {object} subtrees
-     */
-    defaults: /** @lends Drupal.toolbar.MenuModel# */{
-
-      /**
-       * @type {object}
-       */
+  Drupal.toolbar.MenuModel = Backbone.Model.extend({
+    defaults: {
       subtrees: {}
     }
   });
-
-}(Backbone, Drupal));
+})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/models/ToolbarModel.js b/core/modules/toolbar/js/models/ToolbarModel.es6.js
similarity index 100%
copy from core/modules/toolbar/js/models/ToolbarModel.js
copy to core/modules/toolbar/js/models/ToolbarModel.es6.js
diff --git a/core/modules/toolbar/js/models/ToolbarModel.js b/core/modules/toolbar/js/models/ToolbarModel.js
index 537601d8f7..9e409a24d0 100644
--- a/core/modules/toolbar/js/models/ToolbarModel.js
+++ b/core/modules/toolbar/js/models/ToolbarModel.js
@@ -1,131 +1,35 @@
 /**
- * @file
- * A Backbone Model for the toolbar.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/models/ToolbarModel.es6.js
+* @preserve
+**/
 
 (function (Backbone, Drupal) {
 
   'use strict';
 
-  /**
-   * Backbone model for the toolbar.
-   *
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.toolbar.ToolbarModel = Backbone.Model.extend(/** @lends Drupal.toolbar.ToolbarModel# */{
-
-    /**
-     * @type {object}
-     *
-     * @prop activeTab
-     * @prop activeTray
-     * @prop isOriented
-     * @prop isFixed
-     * @prop areSubtreesLoaded
-     * @prop isViewportOverflowConstrained
-     * @prop orientation
-     * @prop locked
-     * @prop isTrayToggleVisible
-     * @prop height
-     * @prop offsets
-     */
-    defaults: /** @lends Drupal.toolbar.ToolbarModel# */{
-
-      /**
-       * The active toolbar tab. All other tabs should be inactive under
-       * normal circumstances. It will remain active across page loads. The
-       * active item is stored as an ID selector e.g. '#toolbar-item--1'.
-       *
-       * @type {string}
-       */
+  Drupal.toolbar.ToolbarModel = Backbone.Model.extend({
+    defaults: {
       activeTab: null,
 
-      /**
-       * Represents whether a tray is open or not. Stored as an ID selector e.g.
-       * '#toolbar-item--1-tray'.
-       *
-       * @type {string}
-       */
       activeTray: null,
 
-      /**
-       * Indicates whether the toolbar is displayed in an oriented fashion,
-       * either horizontal or vertical.
-       *
-       * @type {bool}
-       */
       isOriented: false,
 
-      /**
-       * Indicates whether the toolbar is positioned absolute (false) or fixed
-       * (true).
-       *
-       * @type {bool}
-       */
       isFixed: false,
 
-      /**
-       * Menu subtrees are loaded through an AJAX request only when the Toolbar
-       * is set to a vertical orientation.
-       *
-       * @type {bool}
-       */
       areSubtreesLoaded: false,
 
-      /**
-       * If the viewport overflow becomes constrained, isFixed must be true so
-       * that elements in the trays aren't lost off-screen and impossible to
-       * get to.
-       *
-       * @type {bool}
-       */
       isViewportOverflowConstrained: false,
 
-      /**
-       * The orientation of the active tray.
-       *
-       * @type {string}
-       */
       orientation: 'vertical',
 
-      /**
-       * A tray is locked if a user toggled it to vertical. Otherwise a tray
-       * will switch between vertical and horizontal orientation based on the
-       * configured breakpoints. The locked state will be maintained across page
-       * loads.
-       *
-       * @type {bool}
-       */
       locked: false,
 
-      /**
-       * Indicates whether the tray orientation toggle is visible.
-       *
-       * @type {bool}
-       */
       isTrayToggleVisible: false,
 
-      /**
-       * The height of the toolbar.
-       *
-       * @type {number}
-       */
       height: null,
 
-      /**
-       * The current viewport offsets determined by {@link Drupal.displace}. The
-       * offsets suggest how a module might position is components relative to
-       * the viewport.
-       *
-       * @type {object}
-       *
-       * @prop {number} top
-       * @prop {number} right
-       * @prop {number} bottom
-       * @prop {number} left
-       */
       offsets: {
         top: 0,
         right: 0,
@@ -134,24 +38,10 @@
       }
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @param {object} attributes
-     *   Attributes for the toolbar.
-     * @param {object} options
-     *   Options for the toolbar.
-     *
-     * @return {string|undefined}
-     *   Returns an error message if validation failed.
-     */
-    validate: function (attributes, options) {
-      // Prevent the orientation being set to horizontal if it is locked, unless
-      // override has not been passed as an option.
+    validate: function validate(attributes, options) {
       if (attributes.orientation === 'horizontal' && this.get('locked') && !options.override) {
         return Drupal.t('The toolbar cannot be set to a horizontal orientation when it is locked.');
       }
     }
   });
-
-}(Backbone, Drupal));
+})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.es6.js
similarity index 100%
copy from core/modules/toolbar/js/toolbar.js
copy to core/modules/toolbar/js/toolbar.es6.js
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 8accad9754..73a8f0d7f6 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -1,55 +1,33 @@
 /**
- * @file
- * Defines the behavior of the Drupal administration toolbar.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/toolbar.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  // Merge run-time settings with the defaults.
-  var options = $.extend(
-    {
-      breakpoints: {
-        'toolbar.narrow': '',
-        'toolbar.standard': '',
-        'toolbar.wide': ''
-      }
-    },
-    drupalSettings.toolbar,
-    // Merge strings on top of drupalSettings so that they are not mutable.
-    {
-      strings: {
-        horizontal: Drupal.t('Horizontal orientation'),
-        vertical: Drupal.t('Vertical orientation')
-      }
+  var options = $.extend({
+    breakpoints: {
+      'toolbar.narrow': '',
+      'toolbar.standard': '',
+      'toolbar.wide': ''
     }
-  );
+  }, drupalSettings.toolbar, {
+    strings: {
+      horizontal: Drupal.t('Horizontal orientation'),
+      vertical: Drupal.t('Vertical orientation')
+    }
+  });
 
-  /**
-   * Registers tabs with the toolbar.
-   *
-   * The Drupal toolbar allows modules to register top-level tabs. These may
-   * point directly to a resource or toggle the visibility of a tray.
-   *
-   * Modules register tabs with hook_toolbar().
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the toolbar rendering functionality to the toolbar element.
-   */
   Drupal.behaviors.toolbar = {
-    attach: function (context) {
-      // Verify that the user agent understands media queries. Complex admin
-      // toolbar layouts require media query support.
+    attach: function attach(context) {
       if (!window.matchMedia('only screen').matches) {
         return;
       }
-      // Process the administrative toolbar.
-      $(context).find('#toolbar-administration').once('toolbar').each(function () {
 
-        // Establish the toolbar models and views.
+      $(context).find('#toolbar-administration').once('toolbar').each(function () {
         var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
           locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')) || false,
           activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID')))
@@ -69,7 +47,6 @@
           model: model
         });
 
-        // Render collapsible menus.
         var menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel();
         Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
           el: $(this).find('.toolbar-menu-administration').get(0),
@@ -77,61 +54,39 @@
           strings: options.strings
         });
 
-        // Handle the resolution of Drupal.toolbar.setSubtrees.
-        // This is handled with a deferred so that the function may be invoked
-        // asynchronously.
         Drupal.toolbar.setSubtrees.done(function (subtrees) {
           menuModel.set('subtrees', subtrees);
           var theme = drupalSettings.ajaxPageState.theme;
           localStorage.setItem('Drupal.toolbar.subtrees.' + theme, JSON.stringify(subtrees));
-          // Indicate on the toolbarModel that subtrees are now loaded.
+
           model.set('areSubtreesLoaded', true);
         });
 
-        // Attach a listener to the configured media query breakpoints.
         for (var label in options.breakpoints) {
           if (options.breakpoints.hasOwnProperty(label)) {
             var mq = options.breakpoints[label];
             var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
-            // Curry the model and the label of the media query breakpoint to
-            // the mediaQueryChangeHandler function.
+
             mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
-            // Fire the mediaQueryChangeHandler for each configured breakpoint
-            // so that they process once.
+
             Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
           }
         }
 
-        // Trigger an initial attempt to load menu subitems. This first attempt
-        // is made after the media query handlers have had an opportunity to
-        // process. The toolbar starts in the vertical orientation by default,
-        // unless the viewport is wide enough to accommodate a horizontal
-        // orientation. Thus we give the Toolbar a chance to determine if it
-        // should be set to horizontal orientation before attempting to load
-        // menu subtrees.
         Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
 
-        $(document)
-          // Update the model when the viewport offset changes.
-          .on('drupalViewportOffsetChange.toolbar', function (event, offsets) {
-            model.set('offsets', offsets);
-          });
+        $(document).on('drupalViewportOffsetChange.toolbar', function (event, offsets) {
+          model.set('offsets', offsets);
+        });
 
-        // Broadcast model changes to other modules.
-        model
-          .on('change:orientation', function (model, orientation) {
-            $(document).trigger('drupalToolbarOrientationChange', orientation);
-          })
-          .on('change:activeTab', function (model, tab) {
-            $(document).trigger('drupalToolbarTabChange', tab);
-          })
-          .on('change:activeTray', function (model, tray) {
-            $(document).trigger('drupalToolbarTrayChange', tray);
-          });
+        model.on('change:orientation', function (model, orientation) {
+          $(document).trigger('drupalToolbarOrientationChange', orientation);
+        }).on('change:activeTab', function (model, tab) {
+          $(document).trigger('drupalToolbarTabChange', tab);
+        }).on('change:activeTray', function (model, tray) {
+          $(document).trigger('drupalToolbarTrayChange', tray);
+        });
 
-        // If the toolbar's orientation is horizontal and no active tab is
-        // defined then show the tray of the first toolbar tab by default (but
-        // not the first 'Home' toolbar tab).
         if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
           Drupal.toolbar.models.toolbarModel.set({
             activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0)
@@ -141,67 +96,25 @@
     }
   };
 
-  /**
-   * Toolbar methods of Backbone objects.
-   *
-   * @namespace
-   */
   Drupal.toolbar = {
-
-    /**
-     * A hash of View instances.
-     *
-     * @type {object.<string, Backbone.View>}
-     */
     views: {},
 
-    /**
-     * A hash of Model instances.
-     *
-     * @type {object.<string, Backbone.Model>}
-     */
     models: {},
 
-    /**
-     * A hash of MediaQueryList objects tracked by the toolbar.
-     *
-     * @type {object.<string, object>}
-     */
     mql: {},
 
-    /**
-     * Accepts a list of subtree menu elements.
-     *
-     * A deferred object that is resolved by an inlined JavaScript callback.
-     *
-     * @type {jQuery.Deferred}
-     *
-     * @see toolbar_subtrees_jsonp().
-     */
     setSubtrees: new $.Deferred(),
 
-    /**
-     * Respond to configured narrow media query changes.
-     *
-     * @param {Drupal.toolbar.ToolbarModel} model
-     *   A toolbar model
-     * @param {string} label
-     *   Media query label.
-     * @param {object} mql
-     *   A MediaQueryList object.
-     */
-    mediaQueryChangeHandler: function (model, label, mql) {
+    mediaQueryChangeHandler: function mediaQueryChangeHandler(model, label, mql) {
       switch (label) {
         case 'toolbar.narrow':
           model.set({
             isOriented: mql.matches,
             isTrayToggleVisible: false
           });
-          // If the toolbar doesn't have an explicit orientation yet, or if the
-          // narrow media query doesn't match then set the orientation to
-          // vertical.
+
           if (!mql.matches || !model.get('orientation')) {
-            model.set({orientation: 'vertical'}, {validate: true});
+            model.set({ orientation: 'vertical' }, { validate: true });
           }
           break;
 
@@ -213,10 +126,9 @@
 
         case 'toolbar.wide':
           model.set({
-            orientation: ((mql.matches) ? 'horizontal' : 'vertical')
-          }, {validate: true});
-          // The tray orientation toggle visibility does not need to be
-          // validated.
+            orientation: mql.matches ? 'horizontal' : 'vertical'
+          }, { validate: true });
+
           model.set({
             isTrayToggleVisible: mql.matches
           });
@@ -228,30 +140,11 @@
     }
   };
 
-  /**
-   * A toggle is an interactive element often bound to a click handler.
-   *
-   * @return {string}
-   *   A string representing a DOM fragment.
-   */
   Drupal.theme.toolbarOrientationToggle = function () {
-    return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
-      '<button class="toolbar-icon" type="button"></button>' +
-      '</div></div>';
+    return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' + '<button class="toolbar-icon" type="button"></button>' + '</div></div>';
   };
 
-  /**
-   * Ajax command to set the toolbar subtrees.
-   *
-   * @param {Drupal.Ajax} ajax
-   *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
-   * @param {object} response
-   *   JSON response from the Ajax request.
-   * @param {number} [status]
-   *   XMLHttpRequest status.
-   */
   Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
     Drupal.toolbar.setSubtrees.resolve(response.subtrees);
   };
-
-}(jQuery, Drupal, drupalSettings));
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.es6.js
similarity index 100%
copy from core/modules/toolbar/js/toolbar.menu.js
copy to core/modules/toolbar/js/toolbar.menu.es6.js
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index 0ca25a9b05..91b49184f0 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -1,20 +1,13 @@
 /**
- * @file
- * Builds a nested accordion widget.
- *
- * Invoke on an HTML list element with the jQuery plugin pattern.
- *
- * @example
- * $('.toolbar-menu').drupalToolbarMenu();
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/toolbar.menu.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Store the open menu tray.
-   */
   var activeItem = Drupal.url(drupalSettings.path.currentPath);
 
   $.fn.drupalToolbarMenu = function () {
@@ -24,111 +17,56 @@
       handleClose: Drupal.t('Collapse')
     };
 
-    /**
-     * Handle clicks from the disclosure button on an item with sub-items.
-     *
-     * @param {Object} event
-     *   A jQuery Event object.
-     */
     function toggleClickHandler(event) {
       var $toggle = $(event.target);
       var $item = $toggle.closest('li');
-      // Toggle the list item.
+
       toggleList($item);
-      // Close open sibling menus.
+
       var $openItems = $item.siblings().filter('.open');
       toggleList($openItems, false);
     }
 
-    /**
-     * Handle clicks from a menu item link.
-     *
-     * @param {Object} event
-     *   A jQuery Event object.
-     */
     function linkClickHandler(event) {
-      // If the toolbar is positioned fixed (and therefore hiding content
-      // underneath), then users expect clicks in the administration menu tray
-      // to take them to that destination but for the menu tray to be closed
-      // after clicking: otherwise the toolbar itself is obstructing the view
-      // of the destination they chose.
       if (!Drupal.toolbar.models.toolbarModel.get('isFixed')) {
         Drupal.toolbar.models.toolbarModel.set('activeTab', null);
       }
-      // Stopping propagation to make sure that once a toolbar-box is clicked
-      // (the whitespace part), the page is not redirected anymore.
+
       event.stopPropagation();
     }
 
-    /**
-     * Toggle the open/close state of a list is a menu.
-     *
-     * @param {jQuery} $item
-     *   The li item to be toggled.
-     *
-     * @param {Boolean} switcher
-     *   A flag that forces toggleClass to add or a remove a class, rather than
-     *   simply toggling its presence.
-     */
     function toggleList($item, switcher) {
       var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
-      switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
-      // Toggle the item open state.
+      switcher = typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
+
       $item.toggleClass('open', switcher);
-      // Twist the toggle.
+
       $toggle.toggleClass('open', switcher);
-      // Adjust the toggle text.
-      $toggle
-        .find('.action')
-        // Expand Structure, Collapse Structure.
-        .text((switcher) ? ui.handleClose : ui.handleOpen);
+
+      $toggle.find('.action').text(switcher ? ui.handleClose : ui.handleOpen);
     }
 
-    /**
-     * Add markup to the menu elements.
-     *
-     * Items with sub-elements have a list toggle attached to them. Menu item
-     * links and the corresponding list toggle are wrapped with in a div
-     * classed with .toolbar-box. The .toolbar-box div provides a positioning
-     * context for the item list toggle.
-     *
-     * @param {jQuery} $menu
-     *   The root of the menu to be initialized.
-     */
     function initItems($menu) {
       var options = {
         class: 'toolbar-icon toolbar-handle',
         action: ui.handleOpen,
         text: ''
       };
-      // Initialize items and their links.
+
       $menu.find('li > a').wrap('<div class="toolbar-box">');
-      // Add a handle to each list item if it has a menu.
+
       $menu.find('li').each(function (index, element) {
         var $item = $(element);
         if ($item.children('ul.toolbar-menu').length) {
           var $box = $item.children('.toolbar-box');
-          options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
-          $item.children('.toolbar-box')
-            .append(Drupal.theme('toolbarMenuItemToggle', options));
+          options.text = Drupal.t('@label', { '@label': $box.find('a').text() });
+          $item.children('.toolbar-box').append(Drupal.theme('toolbarMenuItemToggle', options));
         }
       });
     }
 
-    /**
-     * Adds a level class to each list based on its depth in the menu.
-     *
-     * This function is called recursively on each sub level of lists elements
-     * until the depth of the menu is exhausted.
-     *
-     * @param {jQuery} $lists
-     *   A jQuery object of ul elements.
-     *
-     * @param {number} level
-     *   The current level number to be assigned to the list elements.
-     */
     function markListLevels($lists, level) {
-      level = (!level) ? 1 : level;
+      level = !level ? 1 : level;
       var $lis = $lists.children('li').addClass('level-' + level);
       $lists = $lis.children('ul');
       if ($lists.length) {
@@ -136,15 +74,6 @@
       }
     }
 
-    /**
-     * On page load, open the active menu item.
-     *
-     * Marks the trail of the active link in the menu back to the root of the
-     * menu with .menu-item--active-trail.
-     *
-     * @param {jQuery} $menu
-     *   The root of the menu.
-     */
     function openActiveItem($menu) {
       var pathItem = $menu.find('a[href="' + location.pathname + '"]');
       if (pathItem.length && !activeItem) {
@@ -157,41 +86,21 @@
       }
     }
 
-    // Return the jQuery object.
     return this.each(function (selector) {
       var $menu = $(this).once('toolbar-menu');
       if ($menu.length) {
-        // Bind event handlers.
-        $menu
-          .on('click.toolbar', '.toolbar-box', toggleClickHandler)
-          .on('click.toolbar', '.toolbar-box a', linkClickHandler);
+        $menu.on('click.toolbar', '.toolbar-box', toggleClickHandler).on('click.toolbar', '.toolbar-box a', linkClickHandler);
 
         $menu.addClass('root');
         initItems($menu);
         markListLevels($menu);
-        // Restore previous and active states.
+
         openActiveItem($menu);
       }
     });
   };
 
-  /**
-   * A toggle is an interactive element often bound to a click handler.
-   *
-   * @param {object} options
-   *   Options for the button.
-   * @param {string} options.class
-   *   Class to set on the button.
-   * @param {string} options.action
-   *   Action for the button.
-   * @param {string} options.text
-   *   Used as label for the button.
-   *
-   * @return {string}
-   *   A string representing a DOM fragment.
-   */
   Drupal.theme.toolbarMenuItemToggle = function (options) {
     return '<button class="' + options['class'] + '"><span class="action">' + options.action + '</span><span class="label">' + options.text + '</span></button>';
   };
-
-}(jQuery, Drupal, drupalSettings));
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.es6.js
similarity index 100%
copy from core/modules/toolbar/js/views/BodyVisualView.js
copy to core/modules/toolbar/js/views/BodyVisualView.es6.js
diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 64593c9cf9..eb6806f48a 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -1,53 +1,25 @@
 /**
- * @file
- * A Backbone view for the body element.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/views/BodyVisualView.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, Backbone) {
 
   'use strict';
 
-  Drupal.toolbar.BodyVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.BodyVisualView# */{
-
-    /**
-     * Adjusts the body element with the toolbar position and dimension changes.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+  Drupal.toolbar.BodyVisualView = Backbone.View.extend({
+    initialize: function initialize() {
       this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
     },
 
-    /**
-     * @inheritdoc
-     */
-    render: function () {
+    render: function render() {
       var $body = $('body');
       var orientation = this.model.get('orientation');
       var isOriented = this.model.get('isOriented');
       var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
 
-      $body
-        // We are using JavaScript to control media-query handling for two
-        // reasons: (1) Using JavaScript let's us leverage the breakpoint
-        // configurations and (2) the CSS is really complex if we try to hide
-        // some styling from browsers that don't understand CSS media queries.
-        // If we drive the CSS from classes added through JavaScript,
-        // then the CSS becomes simpler and more robust.
-        .toggleClass('toolbar-vertical', (orientation === 'vertical'))
-        .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
-        // When the toolbar is fixed, it will not scroll with page scrolling.
-        .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
-        // Toggle the toolbar-tray-open class on the body element. The class is
-        // applied when a toolbar tray is active. Padding might be applied to
-        // the body element to prevent the tray from overlapping content.
-        .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'))
-        // Apply padding to the top of the body to offset the placement of the
-        // toolbar bar element.
-        .css('padding-top', this.model.get('offsets').top);
+      $body.toggleClass('toolbar-vertical', orientation === 'vertical').toggleClass('toolbar-horizontal', isOriented && orientation === 'horizontal').toggleClass('toolbar-fixed', isViewportOverflowConstrained || this.model.get('isFixed')).toggleClass('toolbar-tray-open', !!this.model.get('activeTray')).css('padding-top', this.model.get('offsets').top);
     }
   });
-
-}(jQuery, Drupal, Backbone));
+})(jQuery, Drupal, Backbone);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/MenuVisualView.js b/core/modules/toolbar/js/views/MenuVisualView.es6.js
similarity index 100%
copy from core/modules/toolbar/js/views/MenuVisualView.js
copy to core/modules/toolbar/js/views/MenuVisualView.es6.js
diff --git a/core/modules/toolbar/js/views/MenuVisualView.js b/core/modules/toolbar/js/views/MenuVisualView.js
index 92dea215bf..f93f712552 100644
--- a/core/modules/toolbar/js/views/MenuVisualView.js
+++ b/core/modules/toolbar/js/views/MenuVisualView.js
@@ -1,46 +1,30 @@
 /**
- * @file
- * A Backbone view for the collapsible menus.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/views/MenuVisualView.es6.js
+* @preserve
+**/
 
 (function ($, Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.toolbar.MenuVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.MenuVisualView# */{
-
-    /**
-     * Backbone View for collapsible menus.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+  Drupal.toolbar.MenuVisualView = Backbone.View.extend({
+    initialize: function initialize() {
       this.listenTo(this.model, 'change:subtrees', this.render);
     },
 
-    /**
-     * @inheritdoc
-     */
-    render: function () {
+    render: function render() {
       var subtrees = this.model.get('subtrees');
-      // Add subtrees.
+
       for (var id in subtrees) {
         if (subtrees.hasOwnProperty(id)) {
-          this.$el
-            .find('#toolbar-link-' + id)
-            .once('toolbar-subtrees')
-            .after(subtrees[id]);
+          this.$el.find('#toolbar-link-' + id).once('toolbar-subtrees').after(subtrees[id]);
         }
       }
-      // Render the main menu as a nested, collapsible accordion.
+
       if ('drupalToolbarMenu' in $.fn) {
-        this.$el
-          .children('.toolbar-menu')
-          .drupalToolbarMenu();
+        this.$el.children('.toolbar-menu').drupalToolbarMenu();
       }
     }
   });
-
-}(jQuery, Backbone, Drupal));
+})(jQuery, Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/ToolbarAuralView.js b/core/modules/toolbar/js/views/ToolbarAuralView.es6.js
similarity index 100%
copy from core/modules/toolbar/js/views/ToolbarAuralView.js
copy to core/modules/toolbar/js/views/ToolbarAuralView.es6.js
diff --git a/core/modules/toolbar/js/views/ToolbarAuralView.js b/core/modules/toolbar/js/views/ToolbarAuralView.js
index 3cc9adaf4c..bc3981e36f 100644
--- a/core/modules/toolbar/js/views/ToolbarAuralView.js
+++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
@@ -1,70 +1,40 @@
 /**
- * @file
- * A Backbone view for the aural feedback of the toolbar.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/views/ToolbarAuralView.es6.js
+* @preserve
+**/
 
 (function (Backbone, Drupal) {
 
   'use strict';
 
-  Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarAuralView# */{
-
-    /**
-     * Backbone view for the aural feedback of the toolbar.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   Options for the view.
-     * @param {object} options.strings
-     *   Various strings to use in the view.
-     */
-    initialize: function (options) {
+  Drupal.toolbar.ToolbarAuralView = Backbone.View.extend({
+    initialize: function initialize(options) {
       this.strings = options.strings;
 
       this.listenTo(this.model, 'change:orientation', this.onOrientationChange);
       this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
     },
 
-    /**
-     * Announces an orientation change.
-     *
-     * @param {Drupal.toolbar.ToolbarModel} model
-     *   The toolbar model in question.
-     * @param {string} orientation
-     *   The new value of the orientation attribute in the model.
-     */
-    onOrientationChange: function (model, orientation) {
+    onOrientationChange: function onOrientationChange(model, orientation) {
       Drupal.announce(Drupal.t('Tray orientation changed to @orientation.', {
         '@orientation': orientation
       }));
     },
 
-    /**
-     * Announces a changed active tray.
-     *
-     * @param {Drupal.toolbar.ToolbarModel} model
-     *   The toolbar model in question.
-     * @param {HTMLElement} tray
-     *   The new value of the tray attribute in the model.
-     */
-    onActiveTrayChange: function (model, tray) {
-      var relevantTray = (tray === null) ? model.previous('activeTray') : tray;
-      var action = (tray === null) ? Drupal.t('closed') : Drupal.t('opened');
+    onActiveTrayChange: function onActiveTrayChange(model, tray) {
+      var relevantTray = tray === null ? model.previous('activeTray') : tray;
+      var action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
       var trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
       var text;
       if (trayNameElement !== null) {
         text = Drupal.t('Tray "@tray" @action.', {
           '@tray': trayNameElement.textContent, '@action': action
         });
-      }
-      else {
-        text = Drupal.t('Tray @action.', {'@action': action});
+      } else {
+        text = Drupal.t('Tray @action.', { '@action': action });
       }
       Drupal.announce(text);
     }
   });
-
-}(Backbone, Drupal));
+})(Backbone, Drupal);
\ No newline at end of file
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
similarity index 100%
copy from core/modules/toolbar/js/views/ToolbarVisualView.js
copy to core/modules/toolbar/js/views/ToolbarVisualView.es6.js
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index f26c98c4d9..310f3885f4 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -1,23 +1,16 @@
 /**
- * @file
- * A Backbone view for the toolbar element. Listens to mouse & touch.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/toolbar/js/views/ToolbarVisualView.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings, Backbone) {
 
   'use strict';
 
-  Drupal.toolbar.ToolbarVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarVisualView# */{
-
-    /**
-     * Event map for the `ToolbarVisualView`.
-     *
-     * @return {object}
-     *   A map of events.
-     */
-    events: function () {
-      // Prevents delay and simulated mouse events.
-      var touchEndToClick = function (event) {
+  Drupal.toolbar.ToolbarVisualView = Backbone.View.extend({
+    events: function events() {
+      var touchEndToClick = function touchEndToClick(event) {
         event.preventDefault();
         event.target.click();
       };
@@ -30,109 +23,57 @@
       };
     },
 
-    /**
-     * Backbone view for the toolbar element. Listens to mouse & touch.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     *
-     * @param {object} options
-     *   Options for the view object.
-     * @param {object} options.strings
-     *   Various strings to use in the view.
-     */
-    initialize: function (options) {
+    initialize: function initialize(options) {
       this.strings = options.strings;
 
       this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
       this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
       this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
 
-      // Add the tray orientation toggles.
-      this.$el
-        .find('.toolbar-tray .toolbar-lining')
-        .append(Drupal.theme('toolbarOrientationToggle'));
+      this.$el.find('.toolbar-tray .toolbar-lining').append(Drupal.theme('toolbarOrientationToggle'));
 
-      // Trigger an activeTab change so that listening scripts can respond on
-      // page load. This will call render.
       this.model.trigger('change:activeTab');
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.toolbar.ToolbarVisualView}
-     *   The `ToolbarVisualView` instance.
-     */
-    render: function () {
+    render: function render() {
       this.updateTabs();
       this.updateTrayOrientation();
       this.updateBarAttributes();
-      // Load the subtrees if the orientation of the toolbar is changed to
-      // vertical. This condition responds to the case that the toolbar switches
-      // from horizontal to vertical orientation. The toolbar starts in a
-      // vertical orientation by default and then switches to horizontal during
-      // initialization if the media query conditions are met. Simply checking
-      // that the orientation is vertical here would result in the subtrees
-      // always being loaded, even when the toolbar initialization ultimately
-      // results in a horizontal orientation.
-      //
-      // @see Drupal.behaviors.toolbar.attach() where admin menu subtrees
-      // loading is invoked during initialization after media query conditions
-      // have been processed.
+
       if (this.model.changed.orientation === 'vertical' || this.model.changed.activeTab) {
         this.loadSubtrees();
       }
-      // Trigger a recalculation of viewport displacing elements. Use setTimeout
-      // to ensure this recalculation happens after changes to visual elements
-      // have processed.
+
       window.setTimeout(function () {
         Drupal.displace(true);
       }, 0);
       return this;
     },
 
-    /**
-     * Responds to a toolbar tab click.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered.
-     */
-    onTabClick: function (event) {
-      // If this tab has a tray associated with it, it is considered an
-      // activatable tab.
+    onTabClick: function onTabClick(event) {
       if (event.target.hasAttribute('data-toolbar-tray')) {
         var activeTab = this.model.get('activeTab');
         var clickedTab = event.target;
 
-        // Set the event target as the active item if it is not already.
-        this.model.set('activeTab', (!activeTab || clickedTab !== activeTab) ? clickedTab : null);
+        this.model.set('activeTab', !activeTab || clickedTab !== activeTab ? clickedTab : null);
 
         event.preventDefault();
         event.stopPropagation();
       }
     },
 
-    /**
-     * Toggles the orientation of a toolbar tray.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered.
-     */
-    onOrientationToggleClick: function (event) {
+    onOrientationToggleClick: function onOrientationToggleClick(event) {
       var orientation = this.model.get('orientation');
-      // Determine the toggle-to orientation.
-      var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
+
+      var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
       var locked = antiOrientation === 'vertical';
-      // Remember the locked state.
+
       if (locked) {
         localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
-      }
-      else {
+      } else {
         localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
       }
-      // Update the model.
+
       this.model.set({
         locked: locked,
         orientation: antiOrientation
@@ -145,135 +86,82 @@
       event.stopPropagation();
     },
 
-    /**
-     * Updates the display of the tabs: toggles a tab and the associated tray.
-     */
-    updateTabs: function () {
+    updateTabs: function updateTabs() {
       var $tab = $(this.model.get('activeTab'));
-      // Deactivate the previous tab.
-      $(this.model.previous('activeTab'))
-        .removeClass('is-active')
-        .prop('aria-pressed', false);
-      // Deactivate the previous tray.
-      $(this.model.previous('activeTray'))
-        .removeClass('is-active');
-
-      // Activate the selected tab.
+
+      $(this.model.previous('activeTab')).removeClass('is-active').prop('aria-pressed', false);
+
+      $(this.model.previous('activeTray')).removeClass('is-active');
+
       if ($tab.length > 0) {
-        $tab
-          .addClass('is-active')
-          // Mark the tab as pressed.
-          .prop('aria-pressed', true);
+        $tab.addClass('is-active').prop('aria-pressed', true);
         var name = $tab.attr('data-toolbar-tray');
-        // Store the active tab name or remove the setting.
+
         var id = $tab.get(0).id;
         if (id) {
           localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
         }
-        // Activate the associated tray.
+
         var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray');
         if ($tray.length) {
           $tray.addClass('is-active');
           this.model.set('activeTray', $tray.get(0));
-        }
-        else {
-          // There is no active tray.
+        } else {
           this.model.set('activeTray', null);
         }
-      }
-      else {
-        // There is no active tray.
+      } else {
         this.model.set('activeTray', null);
         localStorage.removeItem('Drupal.toolbar.activeTabID');
       }
     },
 
-    /**
-     * Update the attributes of the toolbar bar element.
-     */
-    updateBarAttributes: function () {
+    updateBarAttributes: function updateBarAttributes() {
       var isOriented = this.model.get('isOriented');
       if (isOriented) {
         this.$el.find('.toolbar-bar').attr('data-offset-top', '');
-      }
-      else {
+      } else {
         this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
       }
-      // Toggle between a basic vertical view and a more sophisticated
-      // horizontal and vertical display of the toolbar bar and trays.
+
       this.$el.toggleClass('toolbar-oriented', isOriented);
     },
 
-    /**
-     * Updates the orientation of the active tray if necessary.
-     */
-    updateTrayOrientation: function () {
+    updateTrayOrientation: function updateTrayOrientation() {
       var orientation = this.model.get('orientation');
-      // The antiOrientation is used to render the view of action buttons like
-      // the tray orientation toggle.
-      var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
-      // Update the orientation of the trays.
-      var $trays = this.$el.find('.toolbar-tray')
-        .removeClass('toolbar-tray-horizontal toolbar-tray-vertical')
-        .addClass('toolbar-tray-' + orientation);
-
-      // Update the tray orientation toggle button.
+
+      var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
+
+      var $trays = this.$el.find('.toolbar-tray').removeClass('toolbar-tray-horizontal toolbar-tray-vertical').addClass('toolbar-tray-' + orientation);
+
       var iconClass = 'toolbar-icon-toggle-' + orientation;
       var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation;
-      var $orientationToggle = this.$el.find('.toolbar-toggle-orientation')
-        .toggle(this.model.get('isTrayToggleVisible'));
-      $orientationToggle.find('button')
-        .val(antiOrientation)
-        .attr('title', this.strings[antiOrientation])
-        .text(this.strings[antiOrientation])
-        .removeClass(iconClass)
-        .addClass(iconAntiClass);
-
-      // Update data offset attributes for the trays.
+      var $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
+      $orientationToggle.find('button').val(antiOrientation).attr('title', this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
+
       var dir = document.documentElement.dir;
-      var edge = (dir === 'rtl') ? 'right' : 'left';
-      // Remove data-offset attributes from the trays so they can be refreshed.
+      var edge = dir === 'rtl' ? 'right' : 'left';
+
       $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
-      // If an active vertical tray exists, mark it as an offset element.
+
       $trays.filter('.toolbar-tray-vertical.is-active').attr('data-offset-' + edge, '');
-      // If an active horizontal tray exists, mark it as an offset element.
+
       $trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
     },
 
-    /**
-     * Sets the tops of the trays so that they align with the bottom of the bar.
-     */
-    adjustPlacement: function () {
+    adjustPlacement: function adjustPlacement() {
       var $trays = this.$el.find('.toolbar-tray');
       if (!this.model.get('isOriented')) {
         $trays.css('margin-top', 0);
         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
-      }
-      else {
-        // The toolbar container is invisible. Its placement is used to
-        // determine the container for the trays.
+      } else {
         $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
       }
     },
 
-    /**
-     * Calls the endpoint URI that builds an AJAX command with the rendered
-     * subtrees.
-     *
-     * The rendered admin menu subtrees HTML is cached on the client in
-     * localStorage until the cache of the admin menu subtrees on the server-
-     * side is invalidated. The subtreesHash is stored in localStorage as well
-     * and compared to the subtreesHash in drupalSettings to determine when the
-     * admin menu subtrees cache has been invalidated.
-     */
-    loadSubtrees: function () {
+    loadSubtrees: function loadSubtrees() {
       var $activeTab = $(this.model.get('activeTab'));
       var orientation = this.model.get('orientation');
-      // Only load and render the admin menu subtrees if:
-      //   (1) They have not been loaded yet.
-      //   (2) The active tab is the administration menu tab, indicated by the
-      //       presence of the data-drupal-subtrees attribute.
-      //   (3) The orientation of the tray is vertical.
+
       if (!this.model.get('areSubtreesLoaded') && typeof $activeTab.data('drupal-subtrees') !== 'undefined' && orientation === 'vertical') {
         var subtreesHash = drupalSettings.toolbar.subtreesHash;
         var theme = drupalSettings.ajaxPageState.theme;
@@ -281,25 +169,18 @@
         var cachedSubtreesHash = localStorage.getItem('Drupal.toolbar.subtreesHash.' + theme);
         var cachedSubtrees = JSON.parse(localStorage.getItem('Drupal.toolbar.subtrees.' + theme));
         var isVertical = this.model.get('orientation') === 'vertical';
-        // If we have the subtrees in localStorage and the subtree hash has not
-        // changed, then use the cached data.
+
         if (isVertical && subtreesHash === cachedSubtreesHash && cachedSubtrees) {
           Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
-        }
-        // Only make the call to get the subtrees if the orientation of the
-        // toolbar is vertical.
-        else if (isVertical) {
-          // Remove the cached menu information.
-          localStorage.removeItem('Drupal.toolbar.subtreesHash.' + theme);
-          localStorage.removeItem('Drupal.toolbar.subtrees.' + theme);
-          // The AJAX response's command will trigger the resolve method of the
-          // Drupal.toolbar.setSubtrees Promise.
-          Drupal.ajax({url: endpoint}).execute();
-          // Cache the hash for the subtrees locally.
-          localStorage.setItem('Drupal.toolbar.subtreesHash.' + theme, subtreesHash);
-        }
+        } else if (isVertical) {
+            localStorage.removeItem('Drupal.toolbar.subtreesHash.' + theme);
+            localStorage.removeItem('Drupal.toolbar.subtrees.' + theme);
+
+            Drupal.ajax({ url: endpoint }).execute();
+
+            localStorage.setItem('Drupal.toolbar.subtreesHash.' + theme, subtreesHash);
+          }
       }
     }
   });
-
-}(jQuery, Drupal, drupalSettings, Backbone));
+})(jQuery, Drupal, drupalSettings, Backbone);
\ No newline at end of file
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.es6.js
similarity index 100%
copy from core/modules/tour/js/tour.js
copy to core/modules/tour/js/tour.es6.js
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index 2c7050f75f..b9310044be 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Attaches behaviors for the Tour module's toolbar tab.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/tour/js/tour.es6.js
+* @preserve
+**/
 
 (function ($, Backbone, Drupal, document) {
 
@@ -9,25 +10,8 @@
 
   var queryString = decodeURI(window.location.search);
 
-  /**
-   * Attaches the tour's toolbar tab behavior.
-   *
-   * It uses the query string for:
-   * - tour: When ?tour=1 is present, the tour will start automatically after
-   *   the page has loaded.
-   * - tips: Pass ?tips=class in the url to filter the available tips to the
-   *   subset which match the given class.
-   *
-   * @example
-   * http://example.com/foo?tour=1&tips=bar
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attach tour functionality on `tour` events.
-   */
   Drupal.behaviors.tour = {
-    attach: function (context) {
+    attach: function attach(context) {
       $('body').once('tour').each(function () {
         var model = new Drupal.tour.models.StateModel();
         new Drupal.tour.views.ToggleTourView({
@@ -35,16 +19,10 @@
           model: model
         });
 
-        model
-          // Allow other scripts to respond to tour events.
-          .on('change:isActive', function (model, isActive) {
-            $(document).trigger((isActive) ? 'drupalTourStarted' : 'drupalTourStopped');
-          })
-          // Initialization: check whether a tour is available on the current
-          // page.
-          .set('tour', $(context).find('ol#tour'));
+        model.on('change:isActive', function (model, isActive) {
+          $(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped');
+        }).set('tour', $(context).find('ol#tour'));
 
-        // Start the tour immediately if toggled via query string.
         if (/tour=?/i.test(queryString)) {
           model.set('isActive', true);
         }
@@ -52,99 +30,39 @@
     }
   };
 
-  /**
-   * @namespace
-   */
   Drupal.tour = Drupal.tour || {
-
-    /**
-     * @namespace Drupal.tour.models
-     */
     models: {},
 
-    /**
-     * @namespace Drupal.tour.views
-     */
     views: {}
   };
 
-  /**
-   * Backbone Model for tours.
-   *
-   * @constructor
-   *
-   * @augments Backbone.Model
-   */
-  Drupal.tour.models.StateModel = Backbone.Model.extend(/** @lends Drupal.tour.models.StateModel# */{
-
-    /**
-     * @type {object}
-     */
-    defaults: /** @lends Drupal.tour.models.StateModel# */{
-
-      /**
-       * Indicates whether the Drupal root window has a tour.
-       *
-       * @type {Array}
-       */
+  Drupal.tour.models.StateModel = Backbone.Model.extend({
+    defaults: {
       tour: [],
 
-      /**
-       * Indicates whether the tour is currently running.
-       *
-       * @type {bool}
-       */
       isActive: false,
 
-      /**
-       * Indicates which tour is the active one (necessary to cleanly stop).
-       *
-       * @type {Array}
-       */
       activeTour: []
     }
   });
 
-  Drupal.tour.views.ToggleTourView = Backbone.View.extend(/** @lends Drupal.tour.views.ToggleTourView# */{
-
-    /**
-     * @type {object}
-     */
-    events: {click: 'onClick'},
+  Drupal.tour.views.ToggleTourView = Backbone.View.extend({
+    events: { click: 'onClick' },
 
-    /**
-     * Handles edit mode toggle interactions.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize: function () {
+    initialize: function initialize() {
       this.listenTo(this.model, 'change:tour change:isActive', this.render);
       this.listenTo(this.model, 'change:isActive', this.toggleTour);
     },
 
-    /**
-     * @inheritdoc
-     *
-     * @return {Drupal.tour.views.ToggleTourView}
-     *   The `ToggleTourView` view.
-     */
-    render: function () {
-      // Render the visibility.
+    render: function render() {
       this.$el.toggleClass('hidden', this._getTour().length === 0);
-      // Render the state.
+
       var isActive = this.model.get('isActive');
-      this.$el.find('button')
-        .toggleClass('is-active', isActive)
-        .prop('aria-pressed', isActive);
+      this.$el.find('button').toggleClass('is-active', isActive).prop('aria-pressed', isActive);
       return this;
     },
 
-    /**
-     * Model change handler; starts or stops the tour.
-     */
-    toggleTour: function () {
+    toggleTour: function toggleTour() {
       if (this.model.get('isActive')) {
         var $tour = this._getTour();
         this._removeIrrelevantTourItems($tour, this._getDocument());
@@ -152,119 +70,70 @@
         if ($tour.find('li').length) {
           $tour.joyride({
             autoStart: true,
-            postRideCallback: function () { that.model.set('isActive', false); },
-            // HTML segments for tip layout.
+            postRideCallback: function postRideCallback() {
+              that.model.set('isActive', false);
+            },
+
             template: {
               link: '<a href=\"#close\" class=\"joyride-close-tip\">&times;</a>',
               button: '<a href=\"#\" class=\"button button--primary joyride-next-tip\"></a>'
             }
           });
-          this.model.set({isActive: true, activeTour: $tour});
+          this.model.set({ isActive: true, activeTour: $tour });
         }
-      }
-      else {
+      } else {
         this.model.get('activeTour').joyride('destroy');
-        this.model.set({isActive: false, activeTour: []});
+        this.model.set({ isActive: false, activeTour: [] });
       }
     },
 
-    /**
-     * Toolbar tab click event handler; toggles isActive.
-     *
-     * @param {jQuery.Event} event
-     *   The click event.
-     */
-    onClick: function (event) {
+    onClick: function onClick(event) {
       this.model.set('isActive', !this.model.get('isActive'));
       event.preventDefault();
       event.stopPropagation();
     },
 
-    /**
-     * Gets the tour.
-     *
-     * @return {jQuery}
-     *   A jQuery element pointing to a `<ol>` containing tour items.
-     */
-    _getTour: function () {
+    _getTour: function _getTour() {
       return this.model.get('tour');
     },
 
-    /**
-     * Gets the relevant document as a jQuery element.
-     *
-     * @return {jQuery}
-     *   A jQuery element pointing to the document within which a tour would be
-     *   started given the current state.
-     */
-    _getDocument: function () {
+    _getDocument: function _getDocument() {
       return $(document);
     },
 
-    /**
-     * Removes tour items for elements that don't have matching page elements.
-     *
-     * Or that are explicitly filtered out via the 'tips' query string.
-     *
-     * @example
-     * <caption>This will filter out tips that do not have a matching
-     * page element or don't have the "bar" class.</caption>
-     * http://example.com/foo?tips=bar
-     *
-     * @param {jQuery} $tour
-     *   A jQuery element pointing to a `<ol>` containing tour items.
-     * @param {jQuery} $document
-     *   A jQuery element pointing to the document within which the elements
-     *   should be sought.
-     *
-     * @see Drupal.tour.views.ToggleTourView#_getDocument
-     */
-    _removeIrrelevantTourItems: function ($tour, $document) {
+    _removeIrrelevantTourItems: function _removeIrrelevantTourItems($tour, $document) {
       var removals = false;
       var tips = /tips=([^&]+)/.exec(queryString);
-      $tour
-        .find('li')
-        .each(function () {
-          var $this = $(this);
-          var itemId = $this.attr('data-id');
-          var itemClass = $this.attr('data-class');
-          // If the query parameter 'tips' is set, remove all tips that don't
-          // have the matching class.
-          if (tips && !$(this).hasClass(tips[1])) {
-            removals = true;
-            $this.remove();
-            return;
-          }
-          // Remove tip from the DOM if there is no corresponding page element.
-          if ((!itemId && !itemClass) ||
-            (itemId && $document.find('#' + itemId).length) ||
-            (itemClass && $document.find('.' + itemClass).length)) {
-            return;
-          }
+      $tour.find('li').each(function () {
+        var $this = $(this);
+        var itemId = $this.attr('data-id');
+        var itemClass = $this.attr('data-class');
+
+        if (tips && !$(this).hasClass(tips[1])) {
           removals = true;
           $this.remove();
-        });
+          return;
+        }
+
+        if (!itemId && !itemClass || itemId && $document.find('#' + itemId).length || itemClass && $document.find('.' + itemClass).length) {
+          return;
+        }
+        removals = true;
+        $this.remove();
+      });
 
-      // If there were removals, we'll have to do some clean-up.
       if (removals) {
         var total = $tour.find('li').length;
         if (!total) {
-          this.model.set({tour: []});
+          this.model.set({ tour: [] });
         }
 
-        $tour
-          .find('li')
-          // Rebuild the progress data.
-          .each(function (index) {
-            var progress = Drupal.t('!tour_item of !total', {'!tour_item': index + 1, '!total': total});
-            $(this).find('.tour-progress').text(progress);
-          })
-          // Update the last item to have "End tour" as the button.
-          .eq(-1)
-          .attr('data-text', Drupal.t('End tour'));
+        $tour.find('li').each(function (index) {
+          var progress = Drupal.t('!tour_item of !total', { '!tour_item': index + 1, '!total': total });
+          $(this).find('.tour-progress').text(progress);
+        }).eq(-1).attr('data-text', Drupal.t('End tour'));
       }
     }
 
   });
-
-})(jQuery, Backbone, Drupal, document);
+})(jQuery, Backbone, Drupal, document);
\ No newline at end of file
diff --git a/core/modules/tracker/js/tracker-history.js b/core/modules/tracker/js/tracker-history.es6.js
similarity index 100%
copy from core/modules/tracker/js/tracker-history.js
copy to core/modules/tracker/js/tracker-history.es6.js
diff --git a/core/modules/tracker/js/tracker-history.js b/core/modules/tracker/js/tracker-history.js
index 877a9caec7..828f573107 100644
--- a/core/modules/tracker/js/tracker-history.js
+++ b/core/modules/tracker/js/tracker-history.js
@@ -1,64 +1,49 @@
 /**
- * Attaches behaviors for the Tracker module's History module integration.
- *
- * May only be loaded for authenticated users, with the History module enabled.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/tracker/js/tracker-history.es6.js
+* @preserve
+**/
+
 (function ($, Drupal, window) {
 
   'use strict';
 
-  /**
-   * Render "new" and "updated" node indicators, as well as "X new" replies links.
-   */
   Drupal.behaviors.trackerHistory = {
-    attach: function (context) {
-      // Find all "new" comment indicator placeholders newer than 30 days ago that
-      // have not already been read after their last comment timestamp.
+    attach: function attach(context) {
       var nodeIDs = [];
-      var $nodeNewPlaceholders = $(context)
-        .find('[data-history-node-timestamp]')
-        .once('history')
-        .filter(function () {
-          var nodeTimestamp = parseInt(this.getAttribute('data-history-node-timestamp'), 10);
-          var nodeID = this.getAttribute('data-history-node-id');
-          if (Drupal.history.needsServerCheck(nodeID, nodeTimestamp)) {
-            nodeIDs.push(nodeID);
-            return true;
-          }
-          else {
-            return false;
-          }
-        });
+      var $nodeNewPlaceholders = $(context).find('[data-history-node-timestamp]').once('history').filter(function () {
+        var nodeTimestamp = parseInt(this.getAttribute('data-history-node-timestamp'), 10);
+        var nodeID = this.getAttribute('data-history-node-id');
+        if (Drupal.history.needsServerCheck(nodeID, nodeTimestamp)) {
+          nodeIDs.push(nodeID);
+          return true;
+        } else {
+          return false;
+        }
+      });
 
-      // Find all "new" comment indicator placeholders newer than 30 days ago that
-      // have not already been read after their last comment timestamp.
-      var $newRepliesPlaceholders = $(context)
-        .find('[data-history-node-last-comment-timestamp]')
-        .once('history')
-        .filter(function () {
-          var lastCommentTimestamp = parseInt(this.getAttribute('data-history-node-last-comment-timestamp'), 10);
-          var nodeTimestamp = parseInt(this.previousSibling.previousSibling.getAttribute('data-history-node-timestamp'), 10);
-          // Discard placeholders that have zero comments.
-          if (lastCommentTimestamp === nodeTimestamp) {
-            return false;
-          }
-          var nodeID = this.previousSibling.previousSibling.getAttribute('data-history-node-id');
-          if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
-            if (nodeIDs.indexOf(nodeID) === -1) {
-              nodeIDs.push(nodeID);
-            }
-            return true;
-          }
-          else {
-            return false;
+      var $newRepliesPlaceholders = $(context).find('[data-history-node-last-comment-timestamp]').once('history').filter(function () {
+        var lastCommentTimestamp = parseInt(this.getAttribute('data-history-node-last-comment-timestamp'), 10);
+        var nodeTimestamp = parseInt(this.previousSibling.previousSibling.getAttribute('data-history-node-timestamp'), 10);
+
+        if (lastCommentTimestamp === nodeTimestamp) {
+          return false;
+        }
+        var nodeID = this.previousSibling.previousSibling.getAttribute('data-history-node-id');
+        if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
+          if (nodeIDs.indexOf(nodeID) === -1) {
+            nodeIDs.push(nodeID);
           }
-        });
+          return true;
+        } else {
+          return false;
+        }
+      });
 
       if ($nodeNewPlaceholders.length === 0 && $newRepliesPlaceholders.length === 0) {
         return;
       }
 
-      // Fetch the node read timestamps from the server.
       Drupal.history.fetchTimestamps(nodeIDs, function () {
         processNodeNewIndicators($nodeNewPlaceholders);
         processNewRepliesIndicators($newRepliesPlaceholders);
@@ -76,28 +61,24 @@
       var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
 
       if (timestamp > lastViewTimestamp) {
-        var message = (lastViewTimestamp === 0) ? newNodeString : updatedNodeString;
+        var message = lastViewTimestamp === 0 ? newNodeString : updatedNodeString;
         $(placeholder).append('<span class="marker">' + message + '</span>');
       }
     });
   }
 
   function processNewRepliesIndicators($placeholders) {
-    // Figure out which placeholders need the "x new" replies links.
     var placeholdersToUpdate = {};
     $placeholders.each(function (index, placeholder) {
       var timestamp = parseInt(placeholder.getAttribute('data-history-node-last-comment-timestamp'), 10);
       var nodeID = placeholder.previousSibling.previousSibling.getAttribute('data-history-node-id');
       var lastViewTimestamp = Drupal.history.getLastRead(nodeID);
 
-      // Queue this placeholder's "X new" replies link to be downloaded from the
-      // server.
       if (timestamp > lastViewTimestamp) {
         placeholdersToUpdate[nodeID] = placeholder;
       }
     });
 
-    // Perform an AJAX request to retrieve node view timestamps.
     var nodeIDs = Object.keys(placeholdersToUpdate);
     if (nodeIDs.length === 0) {
       return;
@@ -105,9 +86,9 @@
     $.ajax({
       url: Drupal.url('comments/render_new_comments_node_links'),
       type: 'POST',
-      data: {'node_ids[]': nodeIDs},
+      data: { 'node_ids[]': nodeIDs },
       dataType: 'json',
-      success: function (results) {
+      success: function success(results) {
         for (var nodeID in results) {
           if (results.hasOwnProperty(nodeID) && placeholdersToUpdate.hasOwnProperty(nodeID)) {
             var url = results[nodeID].first_new_comment_link;
@@ -118,5 +99,4 @@
       }
     });
   }
-
-})(jQuery, Drupal, window);
+})(jQuery, Drupal, window);
\ No newline at end of file
diff --git a/core/modules/user/user.js b/core/modules/user/user.es6.js
similarity index 100%
copy from core/modules/user/user.js
copy to core/modules/user/user.es6.js
diff --git a/core/modules/user/user.js b/core/modules/user/user.js
index f4602c6760..6ce92fa5f8 100644
--- a/core/modules/user/user.js
+++ b/core/modules/user/user.js
@@ -1,24 +1,15 @@
 /**
- * @file
- * User behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/user/user.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Attach handlers to evaluate the strength of any password fields and to
-   * check that its confirmation is correct.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches password strength indicator and other relevant validation to
-   *   password fields.
-   */
   Drupal.behaviors.password = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $passwordInput = $(context).find('input.js-password-field').once('password');
 
       if ($passwordInput.length) {
@@ -28,21 +19,14 @@
         var $passwordInputParentWrapper = $passwordInputParent.parent();
         var $passwordSuggestions;
 
-        // Add identifying class to password element parent.
         $passwordInputParent.addClass('password-parent');
 
-        // Add the password confirmation layer.
-        $passwordInputParentWrapper
-          .find('input.js-password-confirm')
-          .parent()
-          .append('<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm">' + translate.confirmTitle + ' <span></span></div>')
-          .addClass('confirm-parent');
+        $passwordInputParentWrapper.find('input.js-password-confirm').parent().append('<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
 
         var $confirmInput = $passwordInputParentWrapper.find('input.js-password-confirm');
         var $confirmResult = $passwordInputParentWrapper.find('div.js-password-confirm');
         var $confirmChild = $confirmResult.find('span');
 
-        // If the password strength indicator is enabled, add its markup.
         if (settings.password.showStrengthIndicator) {
           var passwordMeter = '<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator js-password-strength__indicator"></div></div><div aria-live="polite" aria-atomic="true" class="password-strength__title">' + translate.strengthTitle + ' <span class="password-strength__text js-password-strength__text"></span></div></div>';
           $confirmInput.parent().after('<div class="password-suggestions description"></div>');
@@ -50,71 +34,42 @@
           $passwordSuggestions = $passwordInputParentWrapper.find('div.password-suggestions').hide();
         }
 
-        // Check that password and confirmation inputs match.
-        var passwordCheckMatch = function (confirmInputVal) {
+        var passwordCheckMatch = function passwordCheckMatch(confirmInputVal) {
           var success = $passwordInput.val() === confirmInputVal;
           var confirmClass = success ? 'ok' : 'error';
 
-          // Fill in the success message and set the class accordingly.
-          $confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')])
-            .removeClass('ok error').addClass(confirmClass);
+          $confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]).removeClass('ok error').addClass(confirmClass);
         };
 
-        // Check the password strength.
-        var passwordCheck = function () {
+        var passwordCheck = function passwordCheck() {
           if (settings.password.showStrengthIndicator) {
-            // Evaluate the password strength.
             var result = Drupal.evaluatePasswordStrength($passwordInput.val(), settings.password);
 
-            // Update the suggestions for how to improve the password.
             if ($passwordSuggestions.html() !== result.message) {
               $passwordSuggestions.html(result.message);
             }
 
-            // Only show the description box if a weakness exists in the
-            // password.
             $passwordSuggestions.toggle(result.strength !== 100);
 
-            // Adjust the length of the strength indicator.
-            $passwordInputParent.find('.js-password-strength__indicator')
-              .css('width', result.strength + '%')
-              .removeClass('is-weak is-fair is-good is-strong')
-              .addClass(result.indicatorClass);
+            $passwordInputParent.find('.js-password-strength__indicator').css('width', result.strength + '%').removeClass('is-weak is-fair is-good is-strong').addClass(result.indicatorClass);
 
-            // Update the strength indication text.
             $passwordInputParent.find('.js-password-strength__text').html(result.indicatorText);
           }
 
-          // Check the value in the confirm input and show results.
           if ($confirmInput.val()) {
             passwordCheckMatch($confirmInput.val());
-            $confirmResult.css({visibility: 'visible'});
-          }
-          else {
-            $confirmResult.css({visibility: 'hidden'});
+            $confirmResult.css({ visibility: 'visible' });
+          } else {
+            $confirmResult.css({ visibility: 'hidden' });
           }
         };
 
-        // Monitor input events.
         $passwordInput.on('input', passwordCheck);
         $confirmInput.on('input', passwordCheck);
       }
     }
   };
 
-  /**
-   * Evaluate the strength of a user's password.
-   *
-   * Returns the estimated strength and the relevant output message.
-   *
-   * @param {string} password
-   *   The password to evaluate.
-   * @param {object} translate
-   *   An object containing the text to display for each strength level.
-   *
-   * @return {object}
-   *   An object containing strength, message, indicatorText and indicatorClass.
-   */
   Drupal.evaluatePasswordStrength = function (password, translate) {
     password = password.trim();
     var indicatorText;
@@ -128,18 +83,14 @@
     var hasNumbers = /[0-9]/.test(password);
     var hasPunctuation = /[^a-zA-Z0-9]/.test(password);
 
-    // If there is a username edit box on the page, compare password to that,
-    // otherwise use value from the database.
     var $usernameBox = $('input.username');
-    var username = ($usernameBox.length > 0) ? $usernameBox.val() : translate.username;
+    var username = $usernameBox.length > 0 ? $usernameBox.val() : translate.username;
 
-    // Lose 5 points for every character less than 12, plus a 30 point penalty.
     if (password.length < 12) {
       msg.push(translate.tooShort);
-      strength -= ((12 - password.length) * 5) + 30;
+      strength -= (12 - password.length) * 5 + 30;
     }
 
-    // Count weaknesses.
     if (!hasLowercase) {
       msg.push(translate.addLowerCase);
       weaknesses++;
@@ -157,7 +108,6 @@
       weaknesses++;
     }
 
-    // Apply penalty for each weakness (balanced against length penalty).
     switch (weaknesses) {
       case 1:
         strength -= 12.5;
@@ -176,33 +126,26 @@
         break;
     }
 
-    // Check if password is the same as the username.
     if (password !== '' && password.toLowerCase() === username.toLowerCase()) {
       msg.push(translate.sameAsUsername);
-      // Passwords the same as username are always very weak.
+
       strength = 5;
     }
 
-    // Based on the strength, work out what text should be shown by the
-    // password strength meter.
     if (strength < 60) {
       indicatorText = translate.weak;
       indicatorClass = 'is-weak';
-    }
-    else if (strength < 70) {
+    } else if (strength < 70) {
       indicatorText = translate.fair;
       indicatorClass = 'is-fair';
-    }
-    else if (strength < 80) {
+    } else if (strength < 80) {
       indicatorText = translate.good;
       indicatorClass = 'is-good';
-    }
-    else if (strength <= 100) {
+    } else if (strength <= 100) {
       indicatorText = translate.strong;
       indicatorClass = 'is-strong';
     }
 
-    // Assemble the final message.
     msg = translate.hasWeaknesses + '<ul><li>' + msg.join('</li><li>') + '</li></ul>';
 
     return {
@@ -211,7 +154,5 @@
       indicatorText: indicatorText,
       indicatorClass: indicatorClass
     };
-
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/user/user.permissions.js b/core/modules/user/user.permissions.es6.js
similarity index 100%
copy from core/modules/user/user.permissions.js
copy to core/modules/user/user.permissions.es6.js
diff --git a/core/modules/user/user.permissions.js b/core/modules/user/user.permissions.js
index c3dc24f1f0..fb91521503 100644
--- a/core/modules/user/user.permissions.js
+++ b/core/modules/user/user.permissions.js
@@ -1,88 +1,49 @@
 /**
- * @file
- * User permission page behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/user/user.permissions.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Shows checked and disabled checkboxes for inherited permissions.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches functionality to the permissions table.
-   */
   Drupal.behaviors.permissions = {
-    attach: function (context) {
+    attach: function attach(context) {
       var self = this;
       $('table#permissions').once('permissions').each(function () {
-        // On a site with many roles and permissions, this behavior initially
-        // has to perform thousands of DOM manipulations to inject checkboxes
-        // and hide them. By detaching the table from the DOM, all operations
-        // can be performed without triggering internal layout and re-rendering
-        // processes in the browser.
         var $table = $(this);
         var $ancestor;
         var method;
         if ($table.prev().length) {
           $ancestor = $table.prev();
           method = 'after';
-        }
-        else {
+        } else {
           $ancestor = $table.parent();
           method = 'append';
         }
         $table.detach();
 
-        // Create dummy checkboxes. We use dummy checkboxes instead of reusing
-        // the existing checkboxes here because new checkboxes don't alter the
-        // submitted form. If we'd automatically check existing checkboxes, the
-        // permission table would be polluted with redundant entries. This
-        // is deliberate, but desirable when we automatically check them.
-        var $dummy = $('<input type="checkbox" class="dummy-checkbox js-dummy-checkbox" disabled="disabled" checked="checked" />')
-          .attr('title', Drupal.t('This permission is inherited from the authenticated user role.'))
-          .hide();
+        var $dummy = $('<input type="checkbox" class="dummy-checkbox js-dummy-checkbox" disabled="disabled" checked="checked" />').attr('title', Drupal.t('This permission is inherited from the authenticated user role.')).hide();
 
-        $table
-          .find('input[type="checkbox"]')
-          .not('.js-rid-anonymous, .js-rid-authenticated')
-          .addClass('real-checkbox js-real-checkbox')
-          .after($dummy);
+        $table.find('input[type="checkbox"]').not('.js-rid-anonymous, .js-rid-authenticated').addClass('real-checkbox js-real-checkbox').after($dummy);
 
-        // Initialize the authenticated user checkbox.
-        $table.find('input[type=checkbox].js-rid-authenticated')
-          .on('click.permissions', self.toggle)
-          // .triggerHandler() cannot be used here, as it only affects the first
-          // element.
-          .each(self.toggle);
+        $table.find('input[type=checkbox].js-rid-authenticated').on('click.permissions', self.toggle).each(self.toggle);
 
-        // Re-insert the table into the DOM.
         $ancestor[method]($table);
       });
     },
 
-    /**
-     * Toggles all dummy checkboxes based on the checkboxes' state.
-     *
-     * If the "authenticated user" checkbox is checked, the checked and disabled
-     * checkboxes are shown, the real checkboxes otherwise.
-     */
-    toggle: function () {
+    toggle: function toggle() {
       var authCheckbox = this;
       var $row = $(this).closest('tr');
-      // jQuery performs too many layout calculations for .hide() and .show(),
-      // leading to a major page rendering lag on sites with many roles and
-      // permissions. Therefore, we toggle visibility directly.
+
       $row.find('.js-real-checkbox').each(function () {
-        this.style.display = (authCheckbox.checked ? 'none' : '');
+        this.style.display = authCheckbox.checked ? 'none' : '';
       });
       $row.find('.js-dummy-checkbox').each(function () {
-        this.style.display = (authCheckbox.checked ? '' : 'none');
+        this.style.display = authCheckbox.checked ? '' : 'none';
       });
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/views/js/ajax_view.js b/core/modules/views/js/ajax_view.es6.js
similarity index 100%
copy from core/modules/views/js/ajax_view.js
copy to core/modules/views/js/ajax_view.es6.js
diff --git a/core/modules/views/js/ajax_view.js b/core/modules/views/js/ajax_view.js
index 85975b56ce..8439e8534f 100644
--- a/core/modules/views/js/ajax_view.js
+++ b/core/modules/views/js/ajax_view.js
@@ -1,20 +1,13 @@
 /**
- * @file
- * Handles AJAX fetching of views, including filter submission and response.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views/js/ajax_view.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Attaches the AJAX behavior to exposed filters forms and key View links.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches ajaxView functionality to relevant elements.
-   */
   Drupal.behaviors.ViewsAjaxView = {};
   Drupal.behaviors.ViewsAjaxView.attach = function () {
     if (drupalSettings && drupalSettings.views && drupalSettings.views.ajaxViews) {
@@ -27,48 +20,25 @@
     }
   };
 
-  /**
-   * @namespace
-   */
   Drupal.views = {};
 
-  /**
-   * @type {object.<string, Drupal.views.ajaxView>}
-   */
   Drupal.views.instances = {};
 
-  /**
-   * Javascript object for a certain view.
-   *
-   * @constructor
-   *
-   * @param {object} settings
-   *   Settings object for the ajax view.
-   * @param {string} settings.view_dom_id
-   *   The DOM id of the view.
-   */
   Drupal.views.ajaxView = function (settings) {
     var selector = '.js-view-dom-id-' + settings.view_dom_id;
     this.$view = $(selector);
 
-    // Retrieve the path to use for views' ajax.
     var ajax_path = drupalSettings.views.ajax_path;
 
-    // If there are multiple views this might've ended up showing up multiple
-    // times.
     if (ajax_path.constructor.toString().indexOf('Array') !== -1) {
       ajax_path = ajax_path[0];
     }
 
-    // Check if there are any GET parameters to send to views.
     var queryString = window.location.search || '';
     if (queryString !== '') {
-      // Remove the question mark and Drupal path component if any.
       queryString = queryString.slice(1).replace(/q=[^&]+&?|&?render=[^&]+/, '');
       if (queryString !== '') {
-        // If there is a '?' in ajax_path, clean url are on and & should be
-        // used to add parameters.
-        queryString = ((/\?/.test(ajax_path)) ? '&' : '?') + queryString;
+        queryString = (/\?/.test(ajax_path) ? '&' : '?') + queryString;
       }
     }
 
@@ -78,28 +48,16 @@
       setClick: true,
       event: 'click',
       selector: selector,
-      progress: {type: 'fullscreen'}
+      progress: { type: 'fullscreen' }
     };
 
     this.settings = settings;
 
-    // Add the ajax to exposed forms.
     this.$exposed_form = $('form#views-exposed-form-' + settings.view_name.replace(/_/g, '-') + '-' + settings.view_display_id.replace(/_/g, '-'));
     this.$exposed_form.once('exposed-form').each($.proxy(this.attachExposedFormAjax, this));
 
-    // Add the ajax to pagers.
-    this.$view
-      // Don't attach to nested views. Doing so would attach multiple behaviors
-      // to a given element.
-      .filter($.proxy(this.filterNestedViews, this))
-      .once('ajax-pager').each($.proxy(this.attachPagerAjax, this));
-
-    // Add a trigger to update this view specifically. In order to trigger a
-    // refresh use the following code.
-    //
-    // @code
-    // $('.view-name').trigger('RefreshView');
-    // @endcode
+    this.$view.filter($.proxy(this.filterNestedViews, this)).once('ajax-pager').each($.proxy(this.attachPagerAjax, this));
+
     var self_settings = $.extend({}, this.element_settings, {
       event: 'RefreshView',
       base: this.selector,
@@ -108,14 +66,10 @@
     this.refreshViewAjax = Drupal.ajax(self_settings);
   };
 
-  /**
-   * @method
-   */
   Drupal.views.ajaxView.prototype.attachExposedFormAjax = function () {
     var that = this;
     this.exposedFormAjax = [];
-    // Exclude the reset buttons so no AJAX behaviours are bound. Many things
-    // break during the form reset phase if using AJAX.
+
     $('input[type=submit], input[type=image]', this.$exposed_form).not('[data-drupal-selector=edit-reset]').each(function (index) {
       var self_settings = $.extend({}, that.element_settings, {
         base: $(this).attr('id'),
@@ -125,45 +79,20 @@
     });
   };
 
-  /**
-   * @return {bool}
-   *   If there is at least one parent with a view class return false.
-   */
   Drupal.views.ajaxView.prototype.filterNestedViews = function () {
-    // If there is at least one parent with a view class, this view
-    // is nested (e.g., an attachment). Bail.
     return !this.$view.parents('.view').length;
   };
 
-  /**
-   * Attach the ajax behavior to each link.
-   */
   Drupal.views.ajaxView.prototype.attachPagerAjax = function () {
-    this.$view.find('ul.js-pager__items > li > a, th.views-field a, .attachment .views-summary a')
-      .each($.proxy(this.attachPagerLinkAjax, this));
+    this.$view.find('ul.js-pager__items > li > a, th.views-field a, .attachment .views-summary a').each($.proxy(this.attachPagerLinkAjax, this));
   };
 
-  /**
-   * Attach the ajax behavior to a singe link.
-   *
-   * @param {string} [id]
-   *   The ID of the link.
-   * @param {HTMLElement} link
-   *   The link element.
-   */
   Drupal.views.ajaxView.prototype.attachPagerLinkAjax = function (id, link) {
     var $link = $(link);
     var viewData = {};
     var href = $link.attr('href');
-    // Construct an object using the settings defaults and then overriding
-    // with data specific to the link.
-    $.extend(
-      viewData,
-      this.settings,
-      Drupal.Views.parseQueryString(href),
-      // Extract argument data from the URL.
-      Drupal.Views.parseViewArgs(href, this.settings.view_base_path)
-    );
+
+    $.extend(viewData, this.settings, Drupal.Views.parseQueryString(href), Drupal.Views.parseViewArgs(href, this.settings.view_base_path));
 
     var self_settings = $.extend({}, this.element_settings, {
       submit: viewData,
@@ -173,33 +102,16 @@
     this.pagerAjax = Drupal.ajax(self_settings);
   };
 
-  /**
-   * Views scroll to top ajax command.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   A {@link Drupal.ajax} object.
-   * @param {object} response
-   *   Ajax response.
-   * @param {string} response.selector
-   *   Selector to use.
-   */
   Drupal.AjaxCommands.prototype.viewsScrollTop = function (ajax, response) {
-    // Scroll to the top of the view. This will allow users
-    // to browse newly loaded content after e.g. clicking a pager
-    // link.
     var offset = $(response.selector).offset();
-    // We can't guarantee that the scrollable object should be
-    // the body, as the view could be embedded in something
-    // more complex such as a modal popup. Recurse up the DOM
-    // and scroll the first element that has a non-zero top.
+
     var scrollTarget = response.selector;
     while ($(scrollTarget).scrollTop() === 0 && $(scrollTarget).parent()) {
       scrollTarget = $(scrollTarget).parent();
     }
-    // Only scroll upward.
+
     if (offset.top - 10 < $(scrollTarget).scrollTop()) {
-      $(scrollTarget).animate({scrollTop: (offset.top - 10)}, 500);
+      $(scrollTarget).animate({ scrollTop: offset.top - 10 }, 500);
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views/js/base.js b/core/modules/views/js/base.es6.js
similarity index 100%
copy from core/modules/views/js/base.js
copy to core/modules/views/js/base.es6.js
diff --git a/core/modules/views/js/base.js b/core/modules/views/js/base.js
index cca3be4dde..cd764f65a4 100644
--- a/core/modules/views/js/base.js
+++ b/core/modules/views/js/base.js
@@ -1,26 +1,15 @@
 /**
- * @file
- * Some basic behaviors and utility functions for Views.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views/js/base.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * @namespace
-   */
   Drupal.Views = {};
 
-  /**
-   * Helper function to parse a querystring.
-   *
-   * @param {string} query
-   *   The querystring to parse.
-   *
-   * @return {object}
-   *   A map of query parameters.
-   */
   Drupal.Views.parseQueryString = function (query) {
     var args = {};
     var pos = query.indexOf('?');
@@ -31,7 +20,7 @@
     var pairs = query.split('&');
     for (var i = 0; i < pairs.length; i++) {
       pair = pairs[i].split('=');
-      // Ignore the 'q' path argument, if present.
+
       if (pair[0] !== 'q' && pair[1]) {
         args[decodeURIComponent(pair[0].replace(/\+/g, ' '))] = decodeURIComponent(pair[1].replace(/\+/g, ' '));
       }
@@ -39,23 +28,12 @@
     return args;
   };
 
-  /**
-   * Helper function to return a view's arguments based on a path.
-   *
-   * @param {string} href
-   *   The href to check.
-   * @param {string} viewPath
-   *   The views path to check.
-   *
-   * @return {object}
-   *   An object containing `view_args` and `view_path`.
-   */
   Drupal.Views.parseViewArgs = function (href, viewPath) {
     var returnObj = {};
     var path = Drupal.Views.getPath(href);
-    // Get viewPath url without baseUrl portion.
+
     var viewHref = Drupal.url(viewPath).substring(drupalSettings.path.baseUrl.length);
-    // Ensure we have a correct path.
+
     if (viewHref && path.substring(0, viewHref.length + 1) === viewHref + '/') {
       returnObj.view_args = decodeURIComponent(path.substring(viewHref.length + 1, path.length));
       returnObj.view_path = path;
@@ -63,38 +41,18 @@
     return returnObj;
   };
 
-  /**
-   * Strip off the protocol plus domain from an href.
-   *
-   * @param {string} href
-   *   The href to strip.
-   *
-   * @return {string}
-   *   The href without the protocol and domain.
-   */
   Drupal.Views.pathPortion = function (href) {
-    // Remove e.g. http://example.com if present.
     var protocol = window.location.protocol;
     if (href.substring(0, protocol.length) === protocol) {
-      // 2 is the length of the '//' that normally follows the protocol.
       href = href.substring(href.indexOf('/', protocol.length + 2));
     }
     return href;
   };
 
-  /**
-   * Return the Drupal path portion of an href.
-   *
-   * @param {string} href
-   *   The href to check.
-   *
-   * @return {string}
-   *   An internal path.
-   */
   Drupal.Views.getPath = function (href) {
     href = Drupal.Views.pathPortion(href);
     href = href.substring(drupalSettings.path.baseUrl.length, href.length);
-    // 3 is the length of the '?q=' added to the url without clean urls.
+
     if (href.substring(0, 3) === '?q=') {
       href = href.substring(3, href.length);
     }
@@ -106,5 +64,4 @@
     }
     return href;
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views/tests/modules/views_test_data/views_cache.test.js b/core/modules/views/tests/modules/views_test_data/views_cache.test.es6.js
similarity index 100%
copy from core/modules/views/tests/modules/views_test_data/views_cache.test.js
copy to core/modules/views/tests/modules/views_test_data/views_cache.test.es6.js
diff --git a/core/modules/views/tests/modules/views_test_data/views_cache.test.js b/core/modules/views/tests/modules/views_test_data/views_cache.test.js
index 4089267f9a..3e8d2388d6 100644
--- a/core/modules/views/tests/modules/views_test_data/views_cache.test.js
+++ b/core/modules/views/tests/modules/views_test_data/views_cache.test.js
@@ -1,8 +1,5 @@
 /**
- * @file
- * Just a placeholder file for the test.
- *
- * @see ViewsCacheTest::testHeaderStorage
- *
- * @ignore
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views/tests/modules/views_test_data/views_cache.test.es6.js
+* @preserve
+**/
\ No newline at end of file
diff --git a/core/modules/views_ui/js/ajax.js b/core/modules/views_ui/js/ajax.es6.js
similarity index 100%
copy from core/modules/views_ui/js/ajax.js
copy to core/modules/views_ui/js/ajax.es6.js
diff --git a/core/modules/views_ui/js/ajax.js b/core/modules/views_ui/js/ajax.js
index d4ff7642f8..0ce2dffcee 100644
--- a/core/modules/views_ui/js/ajax.js
+++ b/core/modules/views_ui/js/ajax.js
@@ -1,44 +1,21 @@
 /**
- * @file
- * Handles AJAX submission and response in Views UI.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views_ui/js/ajax.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * Ajax command for highlighting elements.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   An Ajax object.
-   * @param {object} response
-   *   The Ajax response.
-   * @param {string} response.selector
-   *   The selector in question.
-   * @param {number} [status]
-   *   The HTTP status code.
-   */
   Drupal.AjaxCommands.prototype.viewsHighlight = function (ajax, response, status) {
     $('.hilited').removeClass('hilited');
     $(response.selector).addClass('hilited');
   };
 
-  /**
-   * Ajax command to set the form submit action in the views modal edit form.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   An Ajax object.
-   * @param {object} response
-   *   The Ajax response. Contains .url
-   * @param {string} [status]
-   *   The XHR status code?
-   */
   Drupal.AjaxCommands.prototype.viewsSetForm = function (ajax, response, status) {
     var $form = $('.js-views-ui-dialog form');
-    // Identify the button that was clicked so that .ajaxSubmit() can use it.
-    // We need to do this for both .click() and .mousedown() since JavaScript
-    // code might trigger either behavior.
+
     var $submit_buttons = $form.find('input[type=submit].js-form-submit, button.js-form-submit').once('views-ajax-submit');
     $submit_buttons.on('click mousedown', function () {
       this.form.clk = this;
@@ -56,18 +33,6 @@
     });
   };
 
-  /**
-   * Ajax command to show certain buttons in the views edit form.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   An Ajax object.
-   * @param {object} response
-   *   The Ajax response.
-   * @param {bool} response.changed
-   *   Whether the state changed for the buttons or not.
-   * @param {number} [status]
-   *   The HTTP status code.
-   */
   Drupal.AjaxCommands.prototype.viewsShowButtons = function (ajax, response, status) {
     $('div.views-edit-view div.form-actions').removeClass('js-hide');
     if (response.changed) {
@@ -75,44 +40,17 @@
     }
   };
 
-  /**
-   * Ajax command for triggering preview.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   An Ajax object.
-   * @param {object} [response]
-   *   The Ajax response.
-   * @param {number} [status]
-   *   The HTTP status code.
-   */
   Drupal.AjaxCommands.prototype.viewsTriggerPreview = function (ajax, response, status) {
     if ($('input#edit-displays-live-preview').is(':checked')) {
       $('#preview-submit').trigger('click');
     }
   };
 
-  /**
-   * Ajax command to replace the title of a page.
-   *
-   * @param {Drupal.Ajax} [ajax]
-   *   An Ajax object.
-   * @param {object} response
-   *   The Ajax response.
-   * @param {string} response.siteName
-   *   The site name.
-   * @param {string} response.title
-   *   The new page title.
-   * @param {number} [status]
-   *   The HTTP status code.
-   */
   Drupal.AjaxCommands.prototype.viewsReplaceTitle = function (ajax, response, status) {
     var doc = document;
-    // For the <title> element, make a best-effort attempt to replace the page
-    // title and leave the site name alone. If the theme doesn't use the site
-    // name in the <title> element, this will fail.
+
     var oldTitle = doc.title;
-    // Escape the site name, in case it has special characters in it, so we can
-    // use it in our regex.
+
     var escapedSiteName = response.siteName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     var re = new RegExp('.+ (.) ' + escapedSiteName);
     doc.title = oldTitle.replace(re, response.title + ' $1 ' + response.siteName);
@@ -120,27 +58,12 @@
     $('h1.page-title').text(response.title);
   };
 
-  /**
-   * Get rid of irritating tabledrag messages.
-   *
-   * @return {Array}
-   *   An array of messages. Always empty array, to get rid of the messages.
-   */
   Drupal.theme.tableDragChangedWarning = function () {
     return [];
   };
 
-  /**
-   * Trigger preview when the "live preview" checkbox is checked.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior to trigger live preview if the live preview option is
-   *   checked.
-   */
   Drupal.behaviors.livePreview = {
-    attach: function (context) {
+    attach: function attach(context) {
       $('input#edit-displays-live-preview', context).once('views-ajax').on('click', function () {
         if ($(this).is(':checked')) {
           $('#preview-submit').trigger('click');
@@ -149,101 +72,76 @@
     }
   };
 
-  /**
-   * Sync preview display.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior to sync the preview display when needed.
-   */
   Drupal.behaviors.syncPreviewDisplay = {
-    attach: function (context) {
+    attach: function attach(context) {
       $('#views-tabset a').once('views-ajax').on('click', function () {
         var href = $(this).attr('href');
-        // Cut of #views-tabset.
+
         var display_id = href.substr(11);
-        // Set the form element.
+
         $('#views-live-preview #preview-display-id').val(display_id);
       });
     }
   };
 
-  /**
-   * Ajax behaviors for the views_ui module.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches ajax behaviors to the elements with the classes in question.
-   */
   Drupal.behaviors.viewsAjax = {
     collapseReplaced: false,
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var base_element_settings = {
         event: 'click',
-        progress: {type: 'fullscreen'}
+        progress: { type: 'fullscreen' }
       };
-      // Bind AJAX behaviors to all items showing the class.
+
       $('a.views-ajax-link', context).once('views-ajax').each(function () {
         var element_settings = base_element_settings;
         element_settings.base = $(this).attr('id');
         element_settings.element = this;
-        // Set the URL to go to the anchor.
+
         if ($(this).attr('href')) {
           element_settings.url = $(this).attr('href');
         }
         Drupal.ajax(element_settings);
       });
 
-      $('div#views-live-preview a')
-        .once('views-ajax').each(function () {
-          // We don't bind to links without a URL.
-          if (!$(this).attr('href')) {
-            return true;
-          }
+      $('div#views-live-preview a').once('views-ajax').each(function () {
+        if (!$(this).attr('href')) {
+          return true;
+        }
 
-          var element_settings = base_element_settings;
-          // Set the URL to go to the anchor.
-          element_settings.url = $(this).attr('href');
-          if (Drupal.Views.getPath(element_settings.url).substring(0, 21) !== 'admin/structure/views') {
-            return true;
-          }
-
-          element_settings.wrapper = 'views-preview-wrapper';
-          element_settings.method = 'replaceWith';
-          element_settings.base = $(this).attr('id');
-          element_settings.element = this;
-          Drupal.ajax(element_settings);
-        });
+        var element_settings = base_element_settings;
 
-      // Within a live preview, make exposed widget form buttons re-trigger the
-      // Preview button.
-      // @todo Revisit this after fixing Views UI to display a Preview outside
-      //   of the main Edit form.
-      $('div#views-live-preview input[type=submit]')
-        .once('views-ajax').each(function (event) {
-          $(this).on('click', function () {
-            this.form.clk = this;
-            return true;
-          });
-          var element_settings = base_element_settings;
-          // Set the URL to go to the anchor.
-          element_settings.url = $(this.form).attr('action');
-          if (Drupal.Views.getPath(element_settings.url).substring(0, 21) !== 'admin/structure/views') {
-            return true;
-          }
-
-          element_settings.wrapper = 'views-preview-wrapper';
-          element_settings.method = 'replaceWith';
-          element_settings.event = 'click';
-          element_settings.base = $(this).attr('id');
-          element_settings.element = this;
-
-          Drupal.ajax(element_settings);
+        element_settings.url = $(this).attr('href');
+        if (Drupal.Views.getPath(element_settings.url).substring(0, 21) !== 'admin/structure/views') {
+          return true;
+        }
+
+        element_settings.wrapper = 'views-preview-wrapper';
+        element_settings.method = 'replaceWith';
+        element_settings.base = $(this).attr('id');
+        element_settings.element = this;
+        Drupal.ajax(element_settings);
+      });
+
+      $('div#views-live-preview input[type=submit]').once('views-ajax').each(function (event) {
+        $(this).on('click', function () {
+          this.form.clk = this;
+          return true;
         });
+        var element_settings = base_element_settings;
+
+        element_settings.url = $(this.form).attr('action');
+        if (Drupal.Views.getPath(element_settings.url).substring(0, 21) !== 'admin/structure/views') {
+          return true;
+        }
 
+        element_settings.wrapper = 'views-preview-wrapper';
+        element_settings.method = 'replaceWith';
+        element_settings.event = 'click';
+        element_settings.base = $(this).attr('id');
+        element_settings.element = this;
+
+        Drupal.ajax(element_settings);
+      });
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views_ui/js/dialog.views.js b/core/modules/views_ui/js/dialog.views.es6.js
similarity index 100%
copy from core/modules/views_ui/js/dialog.views.js
copy to core/modules/views_ui/js/dialog.views.es6.js
diff --git a/core/modules/views_ui/js/dialog.views.js b/core/modules/views_ui/js/dialog.views.js
index 3f40b4ad5b..d64412472a 100644
--- a/core/modules/views_ui/js/dialog.views.js
+++ b/core/modules/views_ui/js/dialog.views.js
@@ -1,7 +1,8 @@
 /**
- * @file
- * Views dialog behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views_ui/js/dialog.views.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
@@ -14,45 +15,34 @@
     var offset = 0;
     var modalHeight;
     if ($scroll.length) {
-      // Add a class to do some styles adjustments.
       $modal.closest('.views-ui-dialog').addClass('views-ui-dialog-scroll');
-      // Let scroll element take all the height available.
-      $scroll.css({overflow: 'visible', height: 'auto'});
+
+      $scroll.css({ overflow: 'visible', height: 'auto' });
       modalHeight = $modal.height();
-      $viewsOverride.each(function () { offset += $(this).outerHeight(); });
+      $viewsOverride.each(function () {
+        offset += $(this).outerHeight();
+      });
 
-      // Take internal padding into account.
       var scrollOffset = $scroll.outerHeight() - $scroll.height();
       $scroll.height(modalHeight - offset - scrollOffset);
-      // Reset scrolling properties.
+
       $modal.css('overflow', 'hidden');
       $scroll.css('overflow', 'auto');
     }
   }
 
-  /**
-   * Functionality for views modals.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches modal functionality for views.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Detaches the modal functionality.
-   */
   Drupal.behaviors.viewsModalContent = {
-    attach: function (context) {
+    attach: function attach(context) {
       $('body').once('viewsDialog').on('dialogContentResize.viewsDialog', '.ui-dialog-content', handleDialogResize);
-      // When expanding details, make sure the modal is resized.
+
       $(context).find('.scroll').once('detailsUpdate').on('click', 'summary', function (e) {
         $(e.currentTarget).trigger('dialogContentResize');
       });
     },
-    detach: function (context, settings, trigger) {
+    detach: function detach(context, settings, trigger) {
       if (trigger === 'unload') {
         $('body').removeOnce('viewsDialog').off('.viewsDialog');
       }
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.es6.js
similarity index 100%
copy from core/modules/views_ui/js/views-admin.js
copy to core/modules/views_ui/js/views-admin.es6.js
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index 0fda808748..400089005c 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -1,193 +1,95 @@
 /**
- * @file
- * Some basic behaviors and utility functions for Views UI.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views_ui/js/views-admin.es6.js
+* @preserve
+**/
 
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
-  /**
-   * @namespace
-   */
   Drupal.viewsUi = {};
 
-  /**
-   * Improve the user experience of the views edit interface.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches toggling of SQL rewrite warning on the corresponding checkbox.
-   */
   Drupal.behaviors.viewsUiEditView = {
-    attach: function () {
-      // Only show the SQL rewrite warning when the user has chosen the
-      // corresponding checkbox.
+    attach: function attach() {
       $('[data-drupal-selector="edit-query-options-disable-sql-rewrite"]').on('click', function () {
         $('.sql-rewrite-warning').toggleClass('js-hide');
       });
     }
   };
 
-  /**
-   * In the add view wizard, use the view name to prepopulate form fields such
-   * as page title and menu link.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for prepopulating page title and menu links, based on
-   *   view name.
-   */
   Drupal.behaviors.viewsUiAddView = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
-      // Set up regular expressions to allow only numbers, letters, and dashes.
+
       var exclude = new RegExp('[^a-z0-9\\-]+', 'g');
       var replace = '-';
       var suffix;
 
-      // The page title, block title, and menu link fields can all be
-      // prepopulated with the view name - no regular expression needed.
       var $fields = $context.find('[id^="edit-page-title"], [id^="edit-block-title"], [id^="edit-page-link-properties-title"]');
       if ($fields.length) {
         if (!this.fieldsFiller) {
           this.fieldsFiller = new Drupal.viewsUi.FormFieldFiller($fields);
-        }
-        else {
-          // After an AJAX response, this.fieldsFiller will still have event
-          // handlers bound to the old version of the form fields (which don't
-          // exist anymore). The event handlers need to be unbound and then
-          // rebound to the new markup. Note that jQuery.live is difficult to
-          // make work in this case because the IDs of the form fields change
-          // on every AJAX response.
+        } else {
           this.fieldsFiller.rebind($fields);
         }
       }
 
-      // Prepopulate the path field with a URLified version of the view name.
       var $pathField = $context.find('[id^="edit-page-path"]');
       if ($pathField.length) {
         if (!this.pathFiller) {
           this.pathFiller = new Drupal.viewsUi.FormFieldFiller($pathField, exclude, replace);
-        }
-        else {
+        } else {
           this.pathFiller.rebind($pathField);
         }
       }
 
-      // Populate the RSS feed field with a URLified version of the view name,
-      // and an .xml suffix (to make it unique).
       var $feedField = $context.find('[id^="edit-page-feed-properties-path"]');
       if ($feedField.length) {
         if (!this.feedFiller) {
           suffix = '.xml';
           this.feedFiller = new Drupal.viewsUi.FormFieldFiller($feedField, exclude, replace, suffix);
-        }
-        else {
+        } else {
           this.feedFiller.rebind($feedField);
         }
       }
     }
   };
 
-  /**
-   * Constructor for the {@link Drupal.viewsUi.FormFieldFiller} object.
-   *
-   * Prepopulates a form field based on the view name.
-   *
-   * @constructor
-   *
-   * @param {jQuery} $target
-   *   A jQuery object representing the form field or fields to prepopulate.
-   * @param {bool} [exclude=false]
-   *   A regular expression representing characters to exclude from
-   *   the target field.
-   * @param {string} [replace='']
-   *   A string to use as the replacement value for disallowed characters.
-   * @param {string} [suffix='']
-   *   A suffix to append at the end of the target field content.
-   */
   Drupal.viewsUi.FormFieldFiller = function ($target, exclude, replace, suffix) {
-
-    /**
-     *
-     * @type {jQuery}
-     */
     this.source = $('#edit-label');
 
-    /**
-     *
-     * @type {jQuery}
-     */
     this.target = $target;
 
-    /**
-     *
-     * @type {bool}
-     */
     this.exclude = exclude || false;
 
-    /**
-     *
-     * @type {string}
-     */
     this.replace = replace || '';
 
-    /**
-     *
-     * @type {string}
-     */
     this.suffix = suffix || '';
 
-    // Create bound versions of this instance's object methods to use as event
-    // handlers. This will let us easily unbind those specific handlers later
-    // on. NOTE: jQuery.proxy will not work for this because it assumes we want
-    // only one bound version of an object method, whereas we need one version
-    // per object instance.
     var self = this;
 
-    /**
-     * Populate the target form field with the altered source field value.
-     *
-     * @return {*}
-     *   The result of the _populate call, which should be undefined.
-     */
-    this.populate = function () { return self._populate.call(self); };
-
-    /**
-     * Stop prepopulating the form fields.
-     *
-     * @return {*}
-     *   The result of the _unbind call, which should be undefined.
-     */
-    this.unbind = function () { return self._unbind.call(self); };
+    this.populate = function () {
+      return self._populate.call(self);
+    };
+
+    this.unbind = function () {
+      return self._unbind.call(self);
+    };
 
     this.bind();
-    // Object constructor; no return value.
   };
 
-  $.extend(Drupal.viewsUi.FormFieldFiller.prototype, /** @lends Drupal.viewsUi.FormFieldFiller# */{
-
-    /**
-     * Bind the form-filling behavior.
-     */
-    bind: function () {
+  $.extend(Drupal.viewsUi.FormFieldFiller.prototype, {
+    bind: function bind() {
       this.unbind();
-      // Populate the form field when the source changes.
+
       this.source.on('keyup.viewsUi change.viewsUi', this.populate);
-      // Quit populating the field as soon as it gets focus.
+
       this.target.on('focus.viewsUi', this.unbind);
     },
 
-    /**
-     * Get the source form field value as altered by the passed-in parameters.
-     *
-     * @return {string}
-     *   The source form field value.
-     */
-    getTransliterated: function () {
+    getTransliterated: function getTransliterated() {
       var from = this.source.val();
       if (this.exclude) {
         from = from.toLowerCase().replace(this.exclude, this.replace);
@@ -195,112 +97,60 @@
       return from;
     },
 
-    /**
-     * Populate the target form field with the altered source field value.
-     */
-    _populate: function () {
+    _populate: function _populate() {
       var transliterated = this.getTransliterated();
       var suffix = this.suffix;
       this.target.each(function (i) {
-        // Ensure that the maxlength is not exceeded by prepopulating the field.
         var maxlength = $(this).attr('maxlength') - suffix.length;
         $(this).val(transliterated.substr(0, maxlength) + suffix);
       });
     },
 
-    /**
-     * Stop prepopulating the form fields.
-     */
-    _unbind: function () {
+    _unbind: function _unbind() {
       this.source.off('keyup.viewsUi change.viewsUi', this.populate);
       this.target.off('focus.viewsUi', this.unbind);
     },
 
-    /**
-     * Bind event handlers to new form fields, after they're replaced via Ajax.
-     *
-     * @param {jQuery} $fields
-     *   Fields to rebind functionality to.
-     */
-    rebind: function ($fields) {
+    rebind: function rebind($fields) {
       this.target = $fields;
       this.bind();
     }
   });
 
-  /**
-   * Adds functionality for the add item form.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the functionality in {@link Drupal.viewsUi.AddItemForm} to the
-   *   forms in question.
-   */
   Drupal.behaviors.addItemForm = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       var $form = $context;
-      // The add handler form may have an id of views-ui-add-handler-form--n.
+
       if (!$context.is('form[id^="views-ui-add-handler-form"]')) {
         $form = $context.find('form[id^="views-ui-add-handler-form"]');
       }
       if ($form.once('views-ui-add-handler-form').length) {
-        // If we we have an unprocessed views-ui-add-handler-form, let's
-        // instantiate.
         new Drupal.viewsUi.AddItemForm($form);
       }
     }
   };
 
-  /**
-   * Constructs a new AddItemForm.
-   *
-   * @constructor
-   *
-   * @param {jQuery} $form
-   *   The form element used.
-   */
   Drupal.viewsUi.AddItemForm = function ($form) {
-
-    /**
-     *
-     * @type {jQuery}
-     */
     this.$form = $form;
     this.$form.find('.views-filterable-options :checkbox').on('click', $.proxy(this.handleCheck, this));
 
-    /**
-     * Find the wrapper of the displayed text.
-     */
     this.$selected_div = this.$form.find('.views-selected-options').parent();
     this.$selected_div.hide();
 
-    /**
-     *
-     * @type {Array}
-     */
     this.checkedItems = [];
   };
 
-  /**
-   * Handles a checkbox check.
-   *
-   * @param {jQuery.Event} event
-   *   The event triggered.
-   */
   Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
     var $target = $(event.target);
     var label = $.trim($target.closest('td').next().html());
-    // Add/remove the checked item to the list.
+
     if ($target.is(':checked')) {
       this.$selected_div.show().css('display', 'block');
       this.checkedItems.push(label);
-    }
-    else {
+    } else {
       var position = $.inArray(label, this.checkedItems);
-      // Delete the item from the list and make sure that the list doesn't have
-      // undefined items left.
+
       for (var i = 0; i < this.checkedItems.length; i++) {
         if (i === position) {
           this.checkedItems.splice(i, 1);
@@ -308,7 +158,7 @@
           break;
         }
       }
-      // Hide it again if none item is selected.
+
       if (this.checkedItems.length === 0) {
         this.$selected_div.hide();
       }
@@ -316,30 +166,12 @@
     this.refreshCheckedItems();
   };
 
-  /**
-   * Refresh the display of the checked items.
-   */
   Drupal.viewsUi.AddItemForm.prototype.refreshCheckedItems = function () {
-    // Perhaps we should precache the text div, too.
-    this.$selected_div.find('.views-selected-options')
-      .html(this.checkedItems.join(', '))
-      .trigger('dialogContentResize');
+    this.$selected_div.find('.views-selected-options').html(this.checkedItems.join(', ')).trigger('dialogContentResize');
   };
 
-  /**
-   * The input field items that add displays must be rendered as `<input>`
-   * elements. The following behavior detaches the `<input>` elements from the
-   * DOM, wraps them in an unordered list, then appends them to the list of
-   * tabs.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Fixes the input elements needed.
-   */
   Drupal.behaviors.viewsUiRenderAddViewButton = {
-    attach: function (context) {
-      // Build the add display menu and pull the display input buttons into it.
+    attach: function attach(context) {
       var $menu = $(context).find('#views-display-menu-tabs').once('views-ui-render-add-view-button');
       if (!$menu.length) {
         return;
@@ -347,11 +179,8 @@
 
       var $addDisplayDropdown = $('<li class="add"><a href="#"><span class="icon add"></span>' + Drupal.t('Add') + '</a><ul class="action-list" style="display:none;"></ul></li>');
       var $displayButtons = $menu.nextAll('input.add-display').detach();
-      $displayButtons.appendTo($addDisplayDropdown.find('.action-list')).wrap('<li>')
-        .parent().eq(0).addClass('first').end().eq(-1).addClass('last');
-      // Remove the 'Add ' prefix from the button labels since they're being
-      // placed in an 'Add' dropdown. @todo This assumes English, but so does
-      // $addDisplayDropdown above. Add support for translation.
+      $displayButtons.appendTo($addDisplayDropdown.find('.action-list')).wrap('<li>').parent().eq(0).addClass('first').end().eq(-1).addClass('last');
+
       $displayButtons.each(function () {
         var label = $(this).val();
         if (label.substr(0, 4) === 'Add ') {
@@ -360,19 +189,12 @@
       });
       $addDisplayDropdown.appendTo($menu);
 
-      // Add the click handler for the add display button.
       $menu.find('li.add > a').on('click', function (event) {
         event.preventDefault();
         var $trigger = $(this);
         Drupal.behaviors.viewsUiRenderAddViewButton.toggleMenu($trigger);
       });
-      // Add a mouseleave handler to close the dropdown when the user mouses
-      // away from the item. We use mouseleave instead of mouseout because
-      // the user is going to trigger mouseout when she moves from the trigger
-      // link to the sub menu items.
-      // We use the live binder because the open class on this item will be
-      // toggled on and off and we want the handler to take effect in the cases
-      // that the class is present, but not when it isn't.
+
       $('li.add', $menu).on('mouseleave', function (event) {
         var $this = $(this);
         var $trigger = $this.children('a[href="#"]');
@@ -383,67 +205,29 @@
     }
   };
 
-  /**
-   * Toggle menu visibility.
-   *
-   * @param {jQuery} $trigger
-   *   The element where the toggle was triggered.
-   *
-   *
-   * @note [@jessebeach] I feel like the following should be a more generic
-   *   function and not written specifically for this UI, but I'm not sure
-   *   where to put it.
-   */
   Drupal.behaviors.viewsUiRenderAddViewButton.toggleMenu = function ($trigger) {
     $trigger.parent().toggleClass('open');
     $trigger.next().slideToggle('fast');
   };
 
-  /**
-   * Add search options to the views ui.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches {@link Drupal.viewsUi.OptionsSearch} to the views ui filter
-   *   options.
-   */
   Drupal.behaviors.viewsUiSearchOptions = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
       var $form = $context;
-      // The add handler form may have an id of views-ui-add-handler-form--n.
+
       if (!$context.is('form[id^="views-ui-add-handler-form"]')) {
         $form = $context.find('form[id^="views-ui-add-handler-form"]');
       }
-      // Make sure we don't add more than one event handler to the same form.
+
       if ($form.once('views-ui-filter-options').length) {
         new Drupal.viewsUi.OptionsSearch($form);
       }
     }
   };
 
-  /**
-   * Constructor for the viewsUi.OptionsSearch object.
-   *
-   * The OptionsSearch object filters the available options on a form according
-   * to the user's search term. Typing in "taxonomy" will show only those
-   * options containing "taxonomy" in their label.
-   *
-   * @constructor
-   *
-   * @param {jQuery} $form
-   *   The form element.
-   */
   Drupal.viewsUi.OptionsSearch = function ($form) {
-
-    /**
-     *
-     * @type {jQuery}
-     */
     this.$form = $form;
 
-    // Click on the title checks the box.
     this.$form.on('click', 'td.title', function (event) {
       var $target = $(event.currentTarget);
       $target.closest('tr').find('input').trigger('click');
@@ -456,13 +240,8 @@
     this.$searchBox = this.$form.find(searchBoxSelector);
     this.$controlGroup = this.$form.find(controlGroupSelector);
 
-    /**
-     * Get a list of option labels and their corresponding divs and maintain it
-     * in memory, so we have as little overhead as possible at keyup time.
-     */
     this.options = this.getOptions(this.$form.find('.filterable-option'));
 
-    // Trap the ENTER key in the search box so that it doesn't submit the form.
     this.$searchBox.on('keypress', function (event) {
       if (event.which === 13) {
         event.preventDefault();
@@ -470,19 +249,8 @@
     });
   };
 
-  $.extend(Drupal.viewsUi.OptionsSearch.prototype, /** @lends Drupal.viewsUi.OptionsSearch# */{
-
-    /**
-     * Assemble a list of all the filterable options on the form.
-     *
-     * @param {jQuery} $allOptions
-     *   A jQuery object representing the rows of filterable options to be
-     *   shown and hidden depending on the user's search terms.
-     *
-     * @return {Array}
-     *   An array of all the filterable options.
-     */
-    getOptions: function ($allOptions) {
+  $.extend(Drupal.viewsUi.OptionsSearch.prototype, {
+    getOptions: function getOptions($allOptions) {
       var $title;
       var $description;
       var $option;
@@ -493,41 +261,27 @@
         $title = $option.find('.title');
         $description = $option.find('.description');
         options[i] = {
-          // Search on the lowercase version of the title text + description.
           searchText: $title.text().toLowerCase() + ' ' + $description.text().toLowerCase(),
-          // Maintain a reference to the jQuery object for each row, so we don't
-          // have to create a new object inside the performance-sensitive keyup
-          // handler.
+
           $div: $option
         };
       }
       return options;
     },
 
-    /**
-     * Filter handler for the search box and type select that hides or shows the relevant
-     * options.
-     *
-     * @param {jQuery.Event} event
-     *   The formUpdated event.
-     */
-    handleFilter: function (event) {
-      // Determine the user's search query. The search text has been converted
-      // to lowercase.
+    handleFilter: function handleFilter(event) {
       var search = this.$searchBox.val().toLowerCase();
       var words = search.split(' ');
-      // Get selected Group
+
       var group = this.$controlGroup.val();
 
-      // Search through the search texts in the form for matching text.
       this.options.forEach(function (option) {
         function hasWord(word) {
           return option.searchText.indexOf(word) !== -1;
         }
 
         var found = true;
-        // Each word in the search string has to match the item in order for the
-        // item to be shown.
+
         if (search) {
           found = words.every(hasWord);
         }
@@ -538,58 +292,32 @@
         option.$div.toggle(found);
       });
 
-      // Adapt dialog to content size.
       $(event.target).trigger('dialogContentResize');
     }
   });
 
-  /**
-   * Preview functionality in the views edit form.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the preview functionality to the view edit form.
-   */
   Drupal.behaviors.viewsUiPreview = {
-    attach: function (context) {
-      // Only act on the edit view form.
+    attach: function attach(context) {
       var $contextualFiltersBucket = $(context).find('.views-display-column .views-ui-display-tab-bucket.argument');
       if ($contextualFiltersBucket.length === 0) {
         return;
       }
 
-      // If the display has no contextual filters, hide the form where you
-      // enter the contextual filters for the live preview. If it has contextual
-      // filters, show the form.
       var $contextualFilters = $contextualFiltersBucket.find('.views-display-setting a');
       if ($contextualFilters.length) {
         $('#preview-args').parent().show();
-      }
-      else {
+      } else {
         $('#preview-args').parent().hide();
       }
 
-      // Executes an initial preview.
       if ($('#edit-displays-live-preview').once('edit-displays-live-preview').is(':checked')) {
         $('#preview-submit').once('edit-displays-live-preview').trigger('click');
       }
     }
   };
 
-  /**
-   * Rearranges the filters.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attach handlers to make it possible to rearange the filters in the form
-   *   in question.
-   *   @see Drupal.viewsUi.RearrangeFilterHandler
-   */
   Drupal.behaviors.viewsUiRearrangeFilter = {
-    attach: function (context) {
-      // Only act on the rearrange filter form.
+    attach: function attach(context) {
       if (typeof Drupal.tableDrag === 'undefined' || typeof Drupal.tableDrag['views-rearrange-filters'] === 'undefined') {
         return;
       }
@@ -602,162 +330,58 @@
     }
   };
 
-  /**
-   * Improve the UI of the rearrange filters dialog box.
-   *
-   * @constructor
-   *
-   * @param {jQuery} $table
-   *   The table in the filter form.
-   * @param {jQuery} $operator
-   *   The filter groups operator element.
-   */
   Drupal.viewsUi.RearrangeFilterHandler = function ($table, $operator) {
-
-    /**
-     * Keep a reference to the `<table>` being altered and to the div containing
-     * the filter groups operator dropdown (if it exists).
-     */
     this.table = $table;
 
-    /**
-     *
-     * @type {jQuery}
-     */
     this.operator = $operator;
 
-    /**
-     *
-     * @type {bool}
-     */
     this.hasGroupOperator = this.operator.length > 0;
 
-    /**
-     * Keep a reference to all draggable rows within the table.
-     *
-     * @type {jQuery}
-     */
     this.draggableRows = $table.find('.draggable');
 
-    /**
-     * Keep a reference to the buttons for adding and removing filter groups.
-     *
-     * @type {jQuery}
-     */
     this.addGroupButton = $('input#views-add-group');
 
-    /**
-     * @type {jQuery}
-     */
     this.removeGroupButtons = $table.find('input.views-remove-group');
 
-    // Add links that duplicate the functionality of the (hidden) add and remove
-    // buttons.
     this.insertAddRemoveFilterGroupLinks();
 
-    // When there is a filter groups operator dropdown on the page, create
-    // duplicates of the dropdown between each pair of filter groups.
     if (this.hasGroupOperator) {
-
-      /**
-       * @type {jQuery}
-       */
       this.dropdowns = this.duplicateGroupsOperator();
       this.syncGroupsOperators();
     }
 
-    // Add methods to the tableDrag instance to account for operator cells
-    // (which span multiple rows), the operator labels next to each filter
-    // (e.g., "And" or "Or"), the filter groups, and other special aspects of
-    // this tableDrag instance.
     this.modifyTableDrag();
 
-    // Initialize the operator labels (e.g., "And" or "Or") that are displayed
-    // next to the filters in each group, and bind a handler so that they change
-    // based on the values of the operator dropdown within that group.
     this.redrawOperatorLabels();
-    $table.find('.views-group-title select')
-      .once('views-rearrange-filter-handler')
-      .on('change.views-rearrange-filter-handler', $.proxy(this, 'redrawOperatorLabels'));
-
-    // Bind handlers so that when a "Remove" link is clicked, we:
-    // - Update the rowspans of cells containing an operator dropdown (since
-    //   they need to change to reflect the number of rows in each group).
-    // - Redraw the operator labels next to the filters in the group (since the
-    //   filter that is currently displayed last in each group is not supposed
-    //   to have a label display next to it).
-    $table.find('a.views-groups-remove-link')
-      .once('views-rearrange-filter-handler')
-      .on('click.views-rearrange-filter-handler', $.proxy(this, 'updateRowspans'))
-      .on('click.views-rearrange-filter-handler', $.proxy(this, 'redrawOperatorLabels'));
+    $table.find('.views-group-title select').once('views-rearrange-filter-handler').on('change.views-rearrange-filter-handler', $.proxy(this, 'redrawOperatorLabels'));
+
+    $table.find('a.views-groups-remove-link').once('views-rearrange-filter-handler').on('click.views-rearrange-filter-handler', $.proxy(this, 'updateRowspans')).on('click.views-rearrange-filter-handler', $.proxy(this, 'redrawOperatorLabels'));
   };
 
-  $.extend(Drupal.viewsUi.RearrangeFilterHandler.prototype, /** @lends Drupal.viewsUi.RearrangeFilterHandler# */{
-
-    /**
-     * Insert links that allow filter groups to be added and removed.
-     */
-    insertAddRemoveFilterGroupLinks: function () {
-
-      // Insert a link for adding a new group at the top of the page, and make
-      // it match the action link styling used in a typical page.html.twig.
-      // Since Drupal does not provide a theme function for this markup this is
-      // the best we can do.
-      $('<ul class="action-links"><li><a id="views-add-group-link" href="#">' + this.addGroupButton.val() + '</a></li></ul>')
-        .prependTo(this.table.parent())
-        // When the link is clicked, dynamically click the hidden form button
-        // for adding a new filter group.
-        .once('views-rearrange-filter-handler')
-        .find('#views-add-group-link')
-        .on('click.views-rearrange-filter-handler', $.proxy(this, 'clickAddGroupButton'));
-
-      // Find each (visually hidden) button for removing a filter group and
-      // insert a link next to it.
+  $.extend(Drupal.viewsUi.RearrangeFilterHandler.prototype, {
+    insertAddRemoveFilterGroupLinks: function insertAddRemoveFilterGroupLinks() {
+      $('<ul class="action-links"><li><a id="views-add-group-link" href="#">' + this.addGroupButton.val() + '</a></li></ul>').prependTo(this.table.parent()).once('views-rearrange-filter-handler').find('#views-add-group-link').on('click.views-rearrange-filter-handler', $.proxy(this, 'clickAddGroupButton'));
+
       var length = this.removeGroupButtons.length;
       var i;
       for (i = 0; i < length; i++) {
         var $removeGroupButton = $(this.removeGroupButtons[i]);
         var buttonId = $removeGroupButton.attr('id');
-        $('<a href="#" class="views-remove-group-link">' + Drupal.t('Remove group') + '</a>')
-          .insertBefore($removeGroupButton)
-          // When the link is clicked, dynamically click the corresponding form
-          // button.
-          .once('views-rearrange-filter-handler')
-          .on('click.views-rearrange-filter-handler', {buttonId: buttonId}, $.proxy(this, 'clickRemoveGroupButton'));
+        $('<a href="#" class="views-remove-group-link">' + Drupal.t('Remove group') + '</a>').insertBefore($removeGroupButton).once('views-rearrange-filter-handler').on('click.views-rearrange-filter-handler', { buttonId: buttonId }, $.proxy(this, 'clickRemoveGroupButton'));
       }
     },
 
-    /**
-     * Dynamically click the button that adds a new filter group.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered.
-     */
-    clickAddGroupButton: function (event) {
+    clickAddGroupButton: function clickAddGroupButton(event) {
       this.addGroupButton.trigger('mousedown');
       event.preventDefault();
     },
 
-    /**
-     * Dynamically click a button for removing a filter group.
-     *
-     * @param {jQuery.Event} event
-     *   Event being triggered, with event.data.buttonId set to the ID of the
-     *   form button that should be clicked.
-     */
-    clickRemoveGroupButton: function (event) {
+    clickRemoveGroupButton: function clickRemoveGroupButton(event) {
       this.table.find('#' + event.data.buttonId).trigger('mousedown');
       event.preventDefault();
     },
 
-    /**
-     * Move the groups operator so that it's between the first two groups, and
-     * duplicate it between any subsequent groups.
-     *
-     * @return {jQuery}
-     *   An operator element.
-     */
-    duplicateGroupsOperator: function () {
+    duplicateGroupsOperator: function duplicateGroupsOperator() {
       var dropdowns;
       var newRow;
       var titleRow;
@@ -768,26 +392,20 @@
         return this.operator;
       }
 
-      // Get rid of the explanatory text around the operator; its placement is
-      // explanatory enough.
       this.operator.find('label').add('div.description').addClass('visually-hidden');
       this.operator.find('select').addClass('form-select');
 
-      // Keep a list of the operator dropdowns, so we can sync their behavior
-      // later.
       dropdowns = this.operator;
 
-      // Move the operator to a new row just above the second group.
       titleRow = $('tr#views-group-title-2');
       newRow = $('<tr class="filter-group-operator-row"><td colspan="5"></td></tr>');
       newRow.find('td').append(this.operator);
       newRow.insertBefore(titleRow);
       var length = titleRows.length;
-      // Starting with the third group, copy the operator to a new row above the
-      // group title.
+
       for (var i = 2; i < length; i++) {
         titleRow = $(titleRows[i]);
-        // Make a copy of the operator dropdown and put it in a new table row.
+
         var fakeOperator = this.operator.clone();
         fakeOperator.attr('id', '');
         newRow = $('<tr class="filter-group-operator-row"><td colspan="5"></td></tr>');
@@ -799,63 +417,30 @@
       return dropdowns;
     },
 
-    /**
-     * Make the duplicated groups operators change in sync with each other.
-     */
-    syncGroupsOperators: function () {
+    syncGroupsOperators: function syncGroupsOperators() {
       if (this.dropdowns.length < 2) {
-        // We only have one dropdown (or none at all), so there's nothing to
-        // sync.
         return;
       }
 
       this.dropdowns.on('change', $.proxy(this, 'operatorChangeHandler'));
     },
 
-    /**
-     * Click handler for the operators that appear between filter groups.
-     *
-     * Forces all operator dropdowns to have the same value.
-     *
-     * @param {jQuery.Event} event
-     *   The event triggered.
-     */
-    operatorChangeHandler: function (event) {
+    operatorChangeHandler: function operatorChangeHandler(event) {
       var $target = $(event.target);
       var operators = this.dropdowns.find('select').not($target);
 
-      // Change the other operators to match this new value.
       operators.val($target.val());
     },
 
-    /**
-     * @method
-     */
-    modifyTableDrag: function () {
+    modifyTableDrag: function modifyTableDrag() {
       var tableDrag = Drupal.tableDrag['views-rearrange-filters'];
       var filterHandler = this;
 
-      /**
-       * Override the row.onSwap method from tabledrag.js.
-       *
-       * When a row is dragged to another place in the table, several things
-       * need to occur.
-       * - The row needs to be moved so that it's within one of the filter
-       * groups.
-       * - The operator cells that span multiple rows need their rowspan
-       * attributes updated to reflect the number of rows in each group.
-       * - The operator labels that are displayed next to each filter need to
-       * be redrawn, to account for the row's new location.
-       */
       tableDrag.row.prototype.onSwap = function () {
         if (filterHandler.hasGroupOperator) {
-          // Make sure the row that just got moved (this.group) is inside one
-          // of the filter groups (i.e. below an empty marker row or a
-          // draggable). If it isn't, move it down one.
           var thisRow = $(this.group);
           var previousRow = thisRow.prev('tr');
           if (previousRow.length && !previousRow.hasClass('group-message') && !previousRow.hasClass('draggable')) {
-            // Move the dragged row down one.
             var next = thisRow.next();
             if (next.is('tr')) {
               this.swap('after', next);
@@ -863,31 +448,19 @@
           }
           filterHandler.updateRowspans();
         }
-        // Redraw the operator labels that are displayed next to each filter, to
-        // account for the row's new location.
+
         filterHandler.redrawOperatorLabels();
       };
 
-      /**
-       * Override the onDrop method from tabledrag.js.
-       */
       tableDrag.onDrop = function () {
-        // If the tabledrag change marker (i.e., the "*") has been inserted
-        // inside a row after the operator label (i.e., "And" or "Or")
-        // rearrange the items so the operator label continues to appear last.
         var changeMarker = $(this.oldRowElement).find('.tabledrag-changed');
         if (changeMarker.length) {
-          // Search for occurrences of the operator label before the change
-          // marker, and reverse them.
           var operatorLabel = changeMarker.prevAll('.views-operator-label');
           if (operatorLabel.length) {
             operatorLabel.insertAfter(changeMarker);
           }
         }
 
-        // Make sure the "group" dropdown is properly updated when rows are
-        // dragged into an empty filter group. This is borrowed heavily from
-        // the block.js implementation of tableDrag.onDrop().
         var groupRow = $(this.rowObject.element).prevAll('tr.group-message').get(0);
         var groupName = groupRow.className.replace(/([^ ]+[ ]+)*group-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
         var groupField = $('select.views-group-select', this.rowObject.element);
@@ -899,57 +472,30 @@
       };
     },
 
-    /**
-     * Redraw the operator labels that are displayed next to each filter.
-     */
-    redrawOperatorLabels: function () {
+    redrawOperatorLabels: function redrawOperatorLabels() {
       for (var i = 0; i < this.draggableRows.length; i++) {
-        // Within the row, the operator labels are displayed inside the first
-        // table cell (next to the filter name).
         var $draggableRow = $(this.draggableRows[i]);
         var $firstCell = $draggableRow.find('td').eq(0);
         if ($firstCell.length) {
-          // The value of the operator label ("And" or "Or") is taken from the
-          // first operator dropdown we encounter, going backwards from the
-          // current row. This dropdown is the one associated with the current
-          // row's filter group.
           var operatorValue = $draggableRow.prevAll('.views-group-title').find('option:selected').html();
           var operatorLabel = '<span class="views-operator-label">' + operatorValue + '</span>';
-          // If the next visible row after this one is a draggable filter row,
-          // display the operator label next to the current row. (Checking for
-          // visibility is necessary here since the "Remove" links hide the
-          // removed row but don't actually remove it from the document).
+
           var $nextRow = $draggableRow.nextAll(':visible').eq(0);
           var $existingOperatorLabel = $firstCell.find('.views-operator-label');
           if ($nextRow.hasClass('draggable')) {
-            // If an operator label was already there, replace it with the new
-            // one.
             if ($existingOperatorLabel.length) {
               $existingOperatorLabel.replaceWith(operatorLabel);
+            } else {
+                $firstCell.append(operatorLabel);
+              }
+          } else {
+              $existingOperatorLabel.remove();
             }
-            // Otherwise, append the operator label to the end of the table
-            // cell.
-            else {
-              $firstCell.append(operatorLabel);
-            }
-          }
-          // If the next row doesn't contain a filter, then this is the last row
-          // in the group. We don't want to display the operator there (since
-          // operators should only display between two related filters, e.g.
-          // "filter1 AND filter2 AND filter3"). So we remove any existing label
-          // that this row has.
-          else {
-            $existingOperatorLabel.remove();
-          }
         }
       }
     },
 
-    /**
-     * Update the rowspan attribute of each cell containing an operator
-     * dropdown.
-     */
-    updateRowspans: function () {
+    updateRowspans: function updateRowspans() {
       var $row;
       var $currentEmptyRow;
       var draggableCount;
@@ -959,39 +505,25 @@
       for (var i = 0; i < length; i++) {
         $row = $(rows[i]);
         if ($row.hasClass('views-group-title')) {
-          // This row is a title row.
-          // Keep a reference to the cell containing the dropdown operator.
           $operatorCell = $row.find('td.group-operator');
-          // Assume this filter group is empty, until we find otherwise.
+
           draggableCount = 0;
           $currentEmptyRow = $row.next('tr');
           $currentEmptyRow.removeClass('group-populated').addClass('group-empty');
-          // The cell with the dropdown operator should span the title row and
-          // the "this group is empty" row.
+
           $operatorCell.attr('rowspan', 2);
-        }
-        else if ($row.hasClass('draggable') && $row.is(':visible')) {
-          // We've found a visible filter row, so we now know the group isn't
-          // empty.
+        } else if ($row.hasClass('draggable') && $row.is(':visible')) {
           draggableCount++;
           $currentEmptyRow.removeClass('group-empty').addClass('group-populated');
-          // The operator cell should span all draggable rows, plus the title.
+
           $operatorCell.attr('rowspan', draggableCount + 1);
         }
       }
     }
   });
 
-  /**
-   * Add a select all checkbox, which checks each checkbox at once.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches select all functionality to the views filter form.
-   */
   Drupal.behaviors.viewsFilterConfigSelectAll = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
 
       var $selectAll = $context.find('.js-form-item-options-value-all').once('filterConfigSelectAll');
@@ -999,14 +531,11 @@
       var $checkboxes = $selectAll.closest('.form-checkboxes').find('.js-form-type-checkbox:not(.js-form-item-options-value-all) input[type="checkbox"]');
 
       if ($selectAll.length) {
-         // Show the select all checkbox.
         $selectAll.show();
         $selectAllCheckbox.on('click', function () {
-          // Update all checkbox beside the select all checkbox.
           $checkboxes.prop('checked', $(this).is(':checked'));
         });
 
-        // Uncheck the select all checkbox if any of the others are unchecked.
         $checkboxes.on('click', function () {
           if ($(this).is('checked') === false) {
             $selectAllCheckbox.prop('checked', false);
@@ -1016,30 +545,14 @@
     }
   };
 
-  /**
-   * Remove icon class from elements that are themed as buttons or dropbuttons.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Removes the icon class from certain views elements.
-   */
   Drupal.behaviors.viewsRemoveIconClass = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('.dropbutton').once('dropbutton-icon').find('.icon').removeClass('icon');
     }
   };
 
-  /**
-   * Change "Expose filter" buttons into checkboxes.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Changes buttons into checkboxes via {@link Drupal.viewsUi.Checkboxifier}.
-   */
   Drupal.behaviors.viewsUiCheckboxify = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $buttons = $('[data-drupal-selector="edit-options-expose-button-button"], [data-drupal-selector="edit-options-group-button-button"]').once('views-ui-checkboxify');
       var length = $buttons.length;
       var i;
@@ -1049,17 +562,8 @@
     }
   };
 
-  /**
-   * Change the default widget to select the default group according to the
-   * selected widget for the exposed group.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Changes the default widget based on user input.
-   */
   Drupal.behaviors.viewsUiChangeDefaultWidget = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
 
       function changeDefaultWidget(event) {
@@ -1067,110 +571,64 @@
           $context.find('input.default-radios').parent().hide();
           $context.find('td.any-default-radios-row').parent().hide();
           $context.find('input.default-checkboxes').parent().show();
-        }
-        else {
+        } else {
           $context.find('input.default-checkboxes').parent().hide();
           $context.find('td.any-default-radios-row').parent().show();
           $context.find('input.default-radios').parent().show();
         }
       }
 
-      // Update on widget change.
-      $context.find('input[name="options[group_info][multiple]"]')
-        .on('change', changeDefaultWidget)
-        // Update the first time the form is rendered.
-        .trigger('change');
+      $context.find('input[name="options[group_info][multiple]"]').on('change', changeDefaultWidget).trigger('change');
     }
   };
 
-  /**
-   * Attaches expose filter button to a checkbox that triggers its click event.
-   *
-   * @constructor
-   *
-   * @param {HTMLElement} button
-   *   The DOM object representing the button to be checkboxified.
-   */
   Drupal.viewsUi.Checkboxifier = function (button) {
     this.$button = $(button);
     this.$parent = this.$button.parent('div.views-expose, div.views-grouped');
     this.$input = this.$parent.find('input:checkbox, input:radio');
-    // Hide the button and its description.
+
     this.$button.hide();
     this.$parent.find('.exposed-description, .grouped-description').hide();
 
     this.$input.on('click', $.proxy(this, 'clickHandler'));
-
   };
 
-  /**
-   * When the checkbox is checked or unchecked, simulate a button press.
-   *
-   * @param {jQuery.Event} e
-   *   The event triggered.
-   */
   Drupal.viewsUi.Checkboxifier.prototype.clickHandler = function (e) {
-    this.$button
-      .trigger('click')
-      .trigger('submit');
+    this.$button.trigger('click').trigger('submit');
   };
 
-  /**
-   * Change the Apply button text based upon the override select state.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior to change the Apply button according to the current
-   *   state.
-   */
   Drupal.behaviors.viewsUiOverrideSelect = {
-    attach: function (context) {
+    attach: function attach(context) {
       $(context).find('[data-drupal-selector="edit-override-dropdown"]').once('views-ui-override-button-text').each(function () {
-        // Closures! :(
         var $context = $(context);
         var $submit = $context.find('[id^=edit-submit]');
         var old_value = $submit.val();
 
-        $submit.once('views-ui-override-button-text')
-          .on('mouseup', function () {
-            $(this).val(old_value);
-            return true;
-          });
+        $submit.once('views-ui-override-button-text').on('mouseup', function () {
+          $(this).val(old_value);
+          return true;
+        });
 
         $(this).on('change', function () {
           var $this = $(this);
           if ($this.val() === 'default') {
             $submit.val(Drupal.t('Apply (all displays)'));
-          }
-          else if ($this.val() === 'default_revert') {
+          } else if ($this.val() === 'default_revert') {
             $submit.val(Drupal.t('Revert to default'));
-          }
-          else {
+          } else {
             $submit.val(Drupal.t('Apply (this display)'));
           }
           var $dialog = $context.closest('.ui-dialog-content');
           $dialog.trigger('dialogButtonsChange');
-        })
-          .trigger('change');
+        }).trigger('change');
       });
-
     }
   };
 
-  /**
-   * Functionality for the remove link in the views UI.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for the remove view and remove display links.
-   */
   Drupal.behaviors.viewsUiHandlerRemoveLink = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $context = $(context);
-      // Handle handler deletion by looking for the hidden checkbox and hiding
-      // the row.
+
       $context.find('a.views-remove-link').once('views').on('click', function (event) {
         var id = $(this).attr('id').replace('views-remove-link-', '');
         $context.find('#views-row-' + id).hide();
@@ -1178,8 +636,6 @@
         event.preventDefault();
       });
 
-      // Handle display deletion by looking for the hidden checkbox and hiding
-      // the row.
       $context.find('a.display-remove-link').once('display').on('click', function (event) {
         var id = $(this).attr('id').replace('display-remove-link-', '');
         $context.find('#display-row-' + id).hide();
@@ -1188,5 +644,4 @@
       });
     }
   };
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/modules/views_ui/js/views_ui.listing.js b/core/modules/views_ui/js/views_ui.listing.es6.js
similarity index 100%
copy from core/modules/views_ui/js/views_ui.listing.js
copy to core/modules/views_ui/js/views_ui.listing.es6.js
diff --git a/core/modules/views_ui/js/views_ui.listing.js b/core/modules/views_ui/js/views_ui.listing.js
index 7d19cd498d..f7c6a04aaa 100644
--- a/core/modules/views_ui/js/views_ui.listing.js
+++ b/core/modules/views_ui/js/views_ui.listing.js
@@ -1,26 +1,15 @@
 /**
- * @file
- * Views listing behaviors.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./modules/views_ui/js/views_ui.listing.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Filters the view listing tables by a text input search string.
-   *
-   * Text search input: input.views-filter-text
-   * Target table:      input.views-filter-text[data-table]
-   * Source text:       [data-drupal-selector="views-table-filter-text-source"]
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the filter functionality to the views admin text search field.
-   */
   Drupal.behaviors.viewTableFilterByText = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $input = $('input.views-filter-text').once('views-filter-text');
       var $table = $($input.attr('data-table'));
       var $rows;
@@ -35,11 +24,9 @@
           $row.closest('tr').toggle(textMatch);
         }
 
-        // Filter if the length of the query is at least 2 characters.
         if (query.length >= 2) {
           $rows.each(showViewRow);
-        }
-        else {
+        } else {
           $rows.show();
         }
       }
@@ -50,5 +37,4 @@
       }
     }
   };
-
-}(jQuery, Drupal));
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/package.json b/core/package.json
index 0ea5c8a247..8cf73e7b3d 100644
--- a/core/package.json
+++ b/core/package.json
@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "babel-core": "6.24.1",
+    "babel-plugin-add-header-comment": "1.0.3",
     "babel-preset-env": "1.4.0",
     "chokidar": "1.6.1",
     "cross-env": "^4.0.0",
diff --git a/core/scripts/js/changeOrAdded.js b/core/scripts/js/changeOrAdded.js
index 1f8b1ee128..276efcd22f 100644
--- a/core/scripts/js/changeOrAdded.js
+++ b/core/scripts/js/changeOrAdded.js
@@ -12,7 +12,14 @@ module.exports = (filePath) => {
     filePath,
     {
       sourceMaps: process.env.NODE_ENV === 'development' ? 'inline' : false,
-      comments: false
+      comments: false,
+      plugins: [
+        ['add-header-comment', {
+          'header': [
+            `DO NOT EDIT THIS FILE. \nAll changes should be applied to ${filePath}\n@preserve`
+          ]
+        }]
+      ]
     },
     (err, result) => {
       if (err) {
diff --git a/core/scripts/js/rename-js-files-to-es6.sh b/core/scripts/js/rename-js-files-to-es6.sh
deleted file mode 100644
index 5ae2a89012..0000000000
--- a/core/scripts/js/rename-js-files-to-es6.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# Rename *.js files in *.es6.js. Only need to be run once.
-# Should be removed after *.es6.js files are committed to core.
-#
-# @internal This file is part of the core javascript build process and is only
-# meant to be used in that context.
-
-for js in `find ./{misc,modules,themes} -name '*.js'`;
-do
-   mv ${js} ${js%???}.es6.js;
-done
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.es6.js
similarity index 100%
copy from core/themes/bartik/color/preview.js
copy to core/themes/bartik/color/preview.es6.js
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index da8e0ca4e0..50b666ee83 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -1,20 +1,21 @@
 /**
- * @file
- * Preview for the Bartik theme.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./themes/bartik/color/preview.es6.js
+* @preserve
+**/
+
 (function ($, Drupal, drupalSettings) {
 
   'use strict';
 
   Drupal.color = {
     logoChanged: false,
-    callback: function (context, settings, $form) {
-      // Change the logo to be the real one.
+    callback: function callback(context, settings, $form) {
       if (!this.logoChanged) {
         $('.color-preview .color-preview-logo img').attr('src', drupalSettings.color.logo);
         this.logoChanged = true;
       }
-      // Remove the logo if the setting is toggled off.
+
       if (drupalSettings.color.logo === null) {
         $('div').remove('.color-preview-logo');
       }
@@ -22,22 +23,17 @@
       var $colorPreview = $form.find('.color-preview');
       var $colorPalette = $form.find('.js-color-palette');
 
-      // Solid background.
       $colorPreview.css('backgroundColor', $colorPalette.find('input[name="palette[bg]"]').val());
 
-      // Text preview.
       $colorPreview.find('.color-preview-main h2, .color-preview .preview-content').css('color', $colorPalette.find('input[name="palette[text]"]').val());
       $colorPreview.find('.color-preview-content a').css('color', $colorPalette.find('input[name="palette[link]"]').val());
 
-      // Sidebar block.
       var $colorPreviewBlock = $colorPreview.find('.color-preview-sidebar .color-preview-block');
       $colorPreviewBlock.css('background-color', $colorPalette.find('input[name="palette[sidebar]"]').val());
       $colorPreviewBlock.css('border-color', $colorPalette.find('input[name="palette[sidebarborders]"]').val());
 
-      // Footer wrapper background.
       $colorPreview.find('.color-preview-footer-wrapper').css('background-color', $colorPalette.find('input[name="palette[footer]"]').val());
 
-      // CSS3 Gradients.
       var gradient_start = $colorPalette.find('input[name="palette[top]"]').val();
       var gradient_end = $colorPalette.find('input[name="palette[bottom]"]').val();
 
@@ -46,4 +42,4 @@
       $colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[titleslogan]"]').val());
     }
   };
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/themes/seven/js/mobile.install.js b/core/themes/seven/js/mobile.install.es6.js
similarity index 100%
copy from core/themes/seven/js/mobile.install.js
copy to core/themes/seven/js/mobile.install.es6.js
diff --git a/core/themes/seven/js/mobile.install.js b/core/themes/seven/js/mobile.install.js
index e7a0b5c18a..17975f1df7 100644
--- a/core/themes/seven/js/mobile.install.js
+++ b/core/themes/seven/js/mobile.install.js
@@ -1,3 +1,9 @@
+/**
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./themes/seven/js/mobile.install.es6.js
+* @preserve
+**/
+
 (function () {
 
   'use strict';
@@ -8,7 +14,7 @@
         return i + 1;
       }
     }
-    // The final "Finished" step is never "active".
+
     if (steps[steps.length - 1].className === 'done') {
       return steps.length;
     }
@@ -29,5 +35,4 @@
   if (document.addEventListener) {
     document.addEventListener('DOMContentLoaded', installStepsSetup);
   }
-
-})();
+})();
\ No newline at end of file
diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.es6.js
similarity index 100%
copy from core/themes/seven/js/nav-tabs.js
copy to core/themes/seven/js/nav-tabs.es6.js
diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js
index ba44ffb944..035a4bc0cf 100644
--- a/core/themes/seven/js/nav-tabs.js
+++ b/core/themes/seven/js/nav-tabs.js
@@ -1,10 +1,9 @@
 /**
- * @file
- * Responsive navigation tabs.
- *
- * This also supports collapsible navigable is the 'is-collapsible' class is
- * added to the main element, and a target element is included.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./themes/seven/js/nav-tabs.es6.js
+* @preserve
+**/
+
 (function ($, Drupal) {
 
   'use strict';
@@ -37,11 +36,8 @@
     $(window).on('resize.tabs', Drupal.debounce(handleResize, 150)).trigger('resize.tabs');
   }
 
-  /**
-   * Initialise the tabs JS.
-   */
   Drupal.behaviors.navTabs = {
-    attach: function (context, settings) {
+    attach: function attach(context, settings) {
       var $tabs = $(context).find('[data-drupal-nav-tabs]');
       if ($tabs.length) {
         var notSmartPhone = window.matchMedia('(min-width: 300px)');
@@ -51,5 +47,4 @@
       }
     }
   };
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/themes/seven/js/responsive-details.js b/core/themes/seven/js/responsive-details.es6.js
similarity index 100%
copy from core/themes/seven/js/responsive-details.js
copy to core/themes/seven/js/responsive-details.es6.js
diff --git a/core/themes/seven/js/responsive-details.js b/core/themes/seven/js/responsive-details.js
index 8fdb4530f3..85f3d47970 100644
--- a/core/themes/seven/js/responsive-details.js
+++ b/core/themes/seven/js/responsive-details.js
@@ -1,22 +1,15 @@
 /**
- * @file
- * Provides responsive behaviors to HTML details elements.
- */
+* DO NOT EDIT THIS FILE. 
+* All changes should be applied to ./themes/seven/js/responsive-details.es6.js
+* @preserve
+**/
 
 (function ($, Drupal) {
 
   'use strict';
 
-  /**
-   * Initializes the responsive behaviors for details elements.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches the responsive behavior to status report specific details elements.
-   */
   Drupal.behaviors.responsiveDetails = {
-    attach: function (context) {
+    attach: function attach(context) {
       var $details = $(context).find('details').once('responsive-details');
 
       if (!$details.length) {
@@ -28,16 +21,10 @@
           $details.attr('open', true);
           $summaries.attr('aria-expanded', true);
           $summaries.on('click.details-open', false);
-        }
-        else {
-          // If user explicitly opened one, leave it alone.
-          var $notPressed = $details
-            .find('> summary[aria-pressed!=true]')
-            .attr('aria-expanded', false);
-          $notPressed
-            .parent('details')
-            .attr('open', false);
-          // After resize, allow user to close previously opened details.
+        } else {
+          var $notPressed = $details.find('> summary[aria-pressed!=true]').attr('aria-expanded', false);
+          $notPressed.parent('details').attr('open', false);
+
           $summaries.off('.details-open');
         }
       }
@@ -52,6 +39,4 @@
       detailsToggle(mql.matches);
     }
   };
-
-
-})(jQuery, Drupal);
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/yarn.lock b/core/yarn.lock
index 0bea444cee..a8b1dc5202 100644
--- a/core/yarn.lock
+++ b/core/yarn.lock
@@ -292,6 +292,10 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-add-header-comment@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-add-header-comment/-/babel-plugin-add-header-comment-1.0.3.tgz#511c4901062640d5a480b4ac3edd6944195850ec"
+
 babel-plugin-check-es2015-constants@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"