Issue #3059847 by lauriii, volkerk, huzooka, quiron, Wim Leers, alexpott, larowlan: Move hard coded AJAX progress bar classes to a theme function

core/misc/ajax.es6.js

@@ -655,9 +655,7 @@
       // the complete response.
       this.ajaxing = false;
       window.alert(
-        `An error occurred while attempting to process ${this.options.url}: ${
-          e.message
-        }`,
+        `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.
@@ -750,9 +748,7 @@
       // the complete response.
       ajax.ajaxing = false;
       window.alert(
-        `An error occurred while attempting to process ${ajax.options.url}: ${
-          e.message
-        }`,
+        `An error occurred while attempting to process ${ajax.options.url}: ${e.message}`,
       );
     }
   };
@@ -907,6 +903,17 @@
   Drupal.theme.ajaxProgressMessage = message =>
     `<div class="message">${message}</div>`;
 
+  /**
+   * Provide a wrapper for the AJAX progress bar element.
+   *
+   * @param {jQuery} $element
+   *   Progress bar element.
+   * @return {string}
+   *   The HTML markup for the progress bar.
+   */
+  Drupal.theme.ajaxProgressBar = $element =>
+    $('<div class="ajax-progress ajax-progress-bar"></div>').append($element);
+
   /**
    * Sets the progress bar progress indicator.
    */
@@ -926,8 +933,8 @@
         this.progress.interval || 1500,
       );
     }
-    this.progress.element = $(progressBar.element).addClass(
-      'ajax-progress ajax-progress-bar',
+    this.progress.element = $(
+      Drupal.theme('ajaxProgressBar', progressBar.element),
     );
     this.progress.object = progressBar;
     $(this.element).after(this.progress.element);

core/misc/ajax.js

@@ -393,6 +393,10 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
     return '<div class="message">' + message + '</div>';
   };
 
+  Drupal.theme.ajaxProgressBar = function ($element) {
+    return $('<div class="ajax-progress ajax-progress-bar"></div>').append($element);
+  };
+
   Drupal.Ajax.prototype.setProgressIndicatorBar = function () {
     var progressBar = new Drupal.ProgressBar('ajax-progress-' + this.element.id, $.noop, this.progress.method, $.noop);
     if (this.progress.message) {
@@ -401,7 +405,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
     if (this.progress.url) {
       progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
     }
-    this.progress.element = $(progressBar.element).addClass('ajax-progress ajax-progress-bar');
+    this.progress.element = $(Drupal.theme('ajaxProgressBar', progressBar.element));
     this.progress.object = progressBar;
     $(this.element).after(this.progress.element);
   };

core/themes/stable/js/ajax.es6.js

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Provides backwards compatibility layer for Ajax-related markup.
+ */
+
+(Drupal => {
+  /**
+   * Override the default ajaxProgressBar for backwards compatibility.
+   *
+   * @param {jQuery} $element
+   *   Progress bar element.
+   * @return {string}
+   *   The HTML markup for the progress bar.
+   */
+  Drupal.theme.ajaxProgressBar = $element =>
+    $element.addClass('ajax-progress ajax-progress-bar');
+})(Drupal);

core/themes/stable/js/ajax.js

@@ -0,0 +1,12 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+  Drupal.theme.ajaxProgressBar = function ($element) {
+    return $element.addClass('ajax-progress ajax-progress-bar');
+  };
+})(Drupal);

core/themes/stable/stable.info.yml

@@ -310,5 +310,7 @@ libraries-override:
         css/views_ui.contextual.css: css/views_ui/views_ui.contextual.css
 
 libraries-extend:
+  core/drupal.ajax:
+    - stable/drupal.ajax
   user/drupal.user:
     - stable/drupal.user

core/themes/stable/stable.libraries.yml

@@ -1,3 +1,8 @@
+drupal.ajax:
+  version: VERSION
+  js:
+    js/ajax.js: {}
+
 drupal.user:
   version: VERSION
   js: