Remove usage of synchronous ajax requests (#12546)

* Do not use sync ajax requests

* adds deprecation comments

* convert some methods to be fully async

* adds minimum waittime after page load in ui tests

* improve wait times

5 files changed, 140 insertions, 132 deletions

diff --git a/plugins/Dashboard/javascripts/dashboard.js b/plugins/Dashboard/javascripts/dashboard.js
index 22e07e38e0..86faf58b52 100644
--- a/plugins/Dashboard/javascripts/dashboard.js
+++ b/plugins/Dashboard/javascripts/dashboard.js
@@ -37,7 +37,7 @@ function createDashboard() {
                 });
             }
         );
-        ajaxRequest.send(true);
+        ajaxRequest.send();
     }});
 }
 
@@ -120,7 +120,7 @@ function copyDashboardToUser() {
             });
         }
     );
-    ajaxRequest.send(true);
+    ajaxRequest.send();
 
     piwikHelper.modalConfirm(makeSelectorLastId('copyDashboardToUserConfirm'), {
         yes: function () {
@@ -145,7 +145,7 @@ function copyDashboardToUser() {
                 }
             );
             ajaxRequest.withTokenInUrl();
-            ajaxRequest.send(true);
+            ajaxRequest.send();
         }
     });
 }
@@ -199,10 +199,11 @@ function copyDashboardToUser() {
                 return self.isWidgetAvailable(widgetUniqueId);
             },
             onSelect: function (widgetUniqueId) {
-                var widget = widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId);
-                self.$element.removeClass('expanded');
+                widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, function(widget){
+                    self.$element.removeClass('expanded');
+                    self.widgetSelected(widget);
+                });
 
-                self.widgetSelected(widget);
             },
             resetOnSelect: true
         });
diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index 6af7a1ec05..c72f53a8c9 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -182,7 +182,7 @@
             );
             ajaxRequest.setLoadingElement();
             ajaxRequest.setFormat('html');
-            ajaxRequest.send(true);
+            ajaxRequest.send();
         },
 
         rebuildMenu: rebuildMenu,
@@ -211,7 +211,7 @@
             );
             ajaxRequest.withTokenInUrl();
             ajaxRequest.setFormat('html');
-            ajaxRequest.send(true);
+            ajaxRequest.send();
         },
 
         /**
@@ -647,7 +647,7 @@
 
             ajaxRequest.withTokenInUrl();
             ajaxRequest.setFormat('html');
-            ajaxRequest.send(false);
+            ajaxRequest.send();
         }
     }
 
diff --git a/plugins/Dashboard/javascripts/dashboardWidget.js b/plugins/Dashboard/javascripts/dashboardWidget.js
index ce88cf1c8f..6756b1d291 100755
--- a/plugins/Dashboard/javascripts/dashboardWidget.js
+++ b/plugins/Dashboard/javascripts/dashboardWidget.js
@@ -204,81 +204,83 @@
          */
         _createDashboardWidget: function (uniqueId) {
 
-            var widgetName = widgetsHelper.getWidgetNameFromUniqueId(uniqueId);
-            if (!widgetName) {
-                widgetName = _pk_translate('Dashboard_WidgetNotFound');
-            }
+            var self = this;
 
-            var title = this.options.title === null ? $('<span/>').text(widgetName) : this.options.title;
-            var emptyWidgetContent = require('piwik/UI/Dashboard').WidgetFactory.make(uniqueId, title);
-            this.element.html(emptyWidgetContent);
+            widgetsHelper.getWidgetNameFromUniqueId(uniqueId, function(widgetName) {
+                if (!widgetName) {
+                    widgetName = _pk_translate('Dashboard_WidgetNotFound');
+                }
 
-            var widgetElement = $('[id="' + uniqueId + '"]', this.element);
-            var self = this;
-            widgetElement
-                .on('mouseenter.dashboardWidget', function () {
-                    if (!self.isMaximised) {
-                        $(this).addClass('widgetHover');
-                        $('.widgetTop', this).addClass('widgetTopHover');
-                    }
-                })
-                .on('mouseleave.dashboardWidget', function () {
-                    if (!self.isMaximised) {
-                        $(this).removeClass('widgetHover');
-                        $('.widgetTop', this).removeClass('widgetTopHover');
-                    }
-                });
-
-            if (this.options.isHidden) {
-                $('.widgetContent', widgetElement).toggleClass('hidden').closest('.widget').toggleClass('hiddenContent');
-            }
+                var title = self.options.title === null ? $('<span/>').text(widgetName) : self.options.title;
+                var emptyWidgetContent = require('piwik/UI/Dashboard').WidgetFactory.make(uniqueId, title);
+                self.element.html(emptyWidgetContent);
 
-            $('.button#close', widgetElement)
-                .on('click.dashboardWidget', function (ev) {
-                    piwikHelper.modalConfirm('#confirm', {yes: function () {
-                        if (self.options.onRemove) {
-                            self.options.onRemove(self.element);
+                var widgetElement = $('[id="' + uniqueId + '"]', self.element);
+                widgetElement
+                    .on('mouseenter.dashboardWidget', function () {
+                        if (!self.isMaximised) {
+                            $(this).addClass('widgetHover');
+                            $('.widgetTop', this).addClass('widgetTopHover');
+                        }
+                    })
+                    .on('mouseleave.dashboardWidget', function () {
+                        if (!self.isMaximised) {
+                            $(this).removeClass('widgetHover');
+                            $('.widgetTop', this).removeClass('widgetTopHover');
+                        }
+                    });
+
+                if (self.options.isHidden) {
+                    $('.widgetContent', widgetElement).toggleClass('hidden').closest('.widget').toggleClass('hiddenContent');
+                }
+
+                $('.button#close', widgetElement)
+                    .on('click.dashboardWidget', function (ev) {
+                        piwikHelper.modalConfirm('#confirm', {yes: function () {
+                            if (self.options.onRemove) {
+                                self.options.onRemove(self.element);
+                            } else {
+                                self.element.remove();
+                                self.options.onChange();
+                            }
+                        }});
+                    });
+
+                $('.button#maximise', widgetElement)
+                    .on('click.dashboardWidget', function (ev) {
+                        if (self.options.onMaximise) {
+                            self.options.onMaximise(self.element);
                         } else {
-                            self.element.remove();
-                            self.options.onChange();
+                            if ($('.widgetContent', $(this).parents('.widget')).hasClass('hidden')) {
+                                self.showContent();
+                            } else {
+                                self.maximise();
+                            }
                         }
-                    }});
-                });
-
-            $('.button#maximise', widgetElement)
-                .on('click.dashboardWidget', function (ev) {
-                    if (self.options.onMaximise) {
-                        self.options.onMaximise(self.element);
-                    } else {
-                        if ($('.widgetContent', $(this).parents('.widget')).hasClass('hidden')) {
-                            self.showContent();
+                    });
+
+                $('.button#minimise', widgetElement)
+                    .on('click.dashboardWidget', function (ev) {
+                        if (self.options.onMinimise) {
+                            self.options.onMinimise(self.element);
                         } else {
-                            self.maximise();
+                            if (!self.isMaximised) {
+                                self.hideContent();
+                            } else {
+                                self.element.dialog("close");
+                            }
                         }
-                    }
-                });
-
-            $('.button#minimise', widgetElement)
-                .on('click.dashboardWidget', function (ev) {
-                    if (self.options.onMinimise) {
-                        self.options.onMinimise(self.element);
-                    } else {
-                        if (!self.isMaximised) {
-                            self.hideContent();
+                    });
+
+                $('.button#refresh', widgetElement)
+                    .on('click.dashboardWidget', function (ev) {
+                        if (self.options.onRefresh) {
+                            self.options.onRefresh(self.element);
                         } else {
-                            self.element.dialog("close");
+                            self.reload(false, true);
                         }
-                    }
-                });
-
-            $('.button#refresh', widgetElement)
-                .on('click.dashboardWidget', function (ev) {
-                    if (self.options.onRefresh) {
-                        self.options.onRefresh(self.element);
-                    } else {
-                        self.reload(false, true);
-                    }
-                });
+                    });
+            });
         },
 
         /**
@@ -350,8 +352,7 @@
          */
         detachWidget: function () {
             this.element.before('<div id="' + this.uniqueId + '-placeholder" class="widgetPlaceholder widget"> </div>');
-            var placeholder = $('[id="' + self.uniqueId + '-placeholder"]')
-
+            var placeholder = $('[id="' + self.uniqueId + '-placeholder"]');
 
             $('#' + this.uniqueId + '-placeholder').height(this.element.height());
             $('#' + this.uniqueId + '-placeholder').width(this.element.width() - 16);
diff --git a/plugins/Dashboard/javascripts/widgetMenu.js b/plugins/Dashboard/javascripts/widgetMenu.js
index 55eef4ab09..465e8001f5 100644
--- a/plugins/Dashboard/javascripts/widgetMenu.js
+++ b/plugins/Dashboard/javascripts/widgetMenu.js
@@ -89,47 +89,50 @@ widgetsHelper.getAvailableWidgets = function (callback) {
             }
             $('#loadingError').show();
         });
-        ajaxRequest.send(true);
+        ajaxRequest.send();
+        return;
     }
 
     if (callback) {
         callback(widgetsHelper.availableWidgets);
     }
-
-    return widgetsHelper.availableWidgets;
 };
 
 /**
- * Returns the complete widget object by its unique id
+ * Determines the complete widget object by its unique id and sends it to callback method
  *
  * @param {string} uniqueId
- * @return {object} widget object
+ * @param {function} callback
  */
-widgetsHelper.getWidgetObjectFromUniqueId = function (uniqueId) {
-    var widgets = widgetsHelper.getAvailableWidgets();
-    for (var widgetCategory in widgets) {
-        var widgetInCategory = widgets[widgetCategory];
-        for (var i in widgetInCategory) {
-            if (widgetInCategory[i]["uniqueId"] == uniqueId) {
-                return widgetInCategory[i];
+widgetsHelper.getWidgetObjectFromUniqueId = function (uniqueId, callback) {
+    widgetsHelper.getAvailableWidgets(function(widgets){
+        for (var widgetCategory in widgets) {
+            var widgetInCategory = widgets[widgetCategory];
+            for (var i in widgetInCategory) {
+                if (widgetInCategory[i]["uniqueId"] == uniqueId) {
+                    callback(widgetInCategory[i]);
+                    return;
+                }
             }
         }
-    }
-    return false;
+        callback(false);
+    });
 };
 
 /**
- * Returns the name of a widget by its unique id
+ * Determines the name of a widget by its unique id and sends it to the callback
  *
  * @param {string} uniqueId  unique id of the widget
+ * @param {function} callback
  * @return {string}
  */
-widgetsHelper.getWidgetNameFromUniqueId = function (uniqueId) {
-    var widget = this.getWidgetObjectFromUniqueId(uniqueId);
-    if (widget == false) {
-        return false;
-    }
-    return widget["name"];
+widgetsHelper.getWidgetNameFromUniqueId = function (uniqueId, callback) {
+    this.getWidgetObjectFromUniqueId(uniqueId, function(widget) {
+        if (widget == false) {
+            callback(false);
+        }
+        callback(widget["name"]);
+    });
 };
 
 /**
@@ -155,7 +158,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
         ajaxRequest.setErrorCallback(onWidgetErrorCallback);
     }
     ajaxRequest.setFormat('html');
-    ajaxRequest.send(false);
+    ajaxRequest.send();
     return ajaxRequest;
 };
 
@@ -389,6 +392,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
              * Show widget with the given uniqueId in preview
              *
              * @param {string} widgetUniqueId unique id of widget to display
+             * @param          widgetPreview
              * @return {void}
              */
             function showPreview(widgetUniqueId, widgetPreview) {
@@ -399,39 +403,40 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
 
                 var previewElement = createPreviewElement(widgetPreview);
 
-                var widget = widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId);
-                var widgetParameters = widget['parameters'];
-
-                var emptyWidgetHtml = require('piwik/UI/Dashboard').WidgetFactory.make(
-                    widgetUniqueId,
-                    $('<div/>')
-                        .attr('title', _pk_translate("Dashboard_AddPreviewedWidget"))
-                        .text(_pk_translate('Dashboard_WidgetPreview'))
-                );
-                previewElement.html(emptyWidgetHtml);
-
-                var onWidgetLoadedCallback = function (response) {
-                    var widgetElement = $(document.getElementById(widgetUniqueId));
-                    // document.getElementById needed for widgets with uniqueid like widgetOpens+Contact+Form
-                    $('.widgetContent', widgetElement).html($(response));
-                    $('.widgetContent', widgetElement).trigger('widget:create');
-                    settings.onPreviewLoaded(widgetUniqueId, widgetElement);
-                    $('.' + settings.widgetpreviewClass + ' .widgetTop', widgetPreview).on('click', function () {
-                        settings.onSelect(widgetUniqueId);
-                        $(widgetPreview).closest('.dashboard-manager').removeClass('expanded');
-                        if (settings.resetOnSelect) {
-                            resetWidgetPreview(widgetPreview);
-                        }
-                        return false;
-                    });
-                };
-
-                // abort previous sent request
-                if (widgetPreview.widgetAjaxRequest) {
-                    widgetPreview.widgetAjaxRequest.abort();
-                }
+                widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, function(widget) {
+                    var widgetParameters = widget['parameters'];
+
+                    var emptyWidgetHtml = require('piwik/UI/Dashboard').WidgetFactory.make(
+                        widgetUniqueId,
+                        $('<div/>')
+                            .attr('title', _pk_translate("Dashboard_AddPreviewedWidget"))
+                            .text(_pk_translate('Dashboard_WidgetPreview'))
+                    );
+                    previewElement.html(emptyWidgetHtml);
+
+                    var onWidgetLoadedCallback = function (response) {
+                        var widgetElement = $(document.getElementById(widgetUniqueId));
+                        // document.getElementById needed for widgets with uniqueid like widgetOpens+Contact+Form
+                        $('.widgetContent', widgetElement).html($(response));
+                        $('.widgetContent', widgetElement).trigger('widget:create');
+                        settings.onPreviewLoaded(widgetUniqueId, widgetElement);
+                        $('.' + settings.widgetpreviewClass + ' .widgetTop', widgetPreview).on('click', function () {
+                            settings.onSelect(widgetUniqueId);
+                            $(widgetPreview).closest('.dashboard-manager').removeClass('expanded');
+                            if (settings.resetOnSelect) {
+                                resetWidgetPreview(widgetPreview);
+                            }
+                            return false;
+                        });
+                    };
+
+                    // abort previous sent request
+                    if (widgetPreview.widgetAjaxRequest) {
+                        widgetPreview.widgetAjaxRequest.abort();
+                    }
 
-                widgetPreview.widgetAjaxRequest = widgetsHelper.loadWidgetAjax(widgetUniqueId, widgetParameters, onWidgetLoadedCallback);
+                    widgetPreview.widgetAjaxRequest = widgetsHelper.loadWidgetAjax(widgetUniqueId, widgetParameters, onWidgetLoadedCallback);
+                });
             }
 
             /**
diff --git a/plugins/Dashboard/templates/embeddedIndex.twig b/plugins/Dashboard/templates/embeddedIndex.twig
index 92fc263a63..30afedc709 100644
--- a/plugins/Dashboard/templates/embeddedIndex.twig
+++ b/plugins/Dashboard/templates/embeddedIndex.twig
@@ -64,7 +64,8 @@
                 </div>
                 <div class="row">
                     <div class="col s12 m6"><label for="copyDashboardUser">{{ 'General_Username'|translate }} </label></div>
-                    <div class="col s12 m6"><select class="browser-default" name="copyDashboardUser" id="copyDashboardUser"></select></div>
+                    <div class="col s12 m6"><select class="browser-default" name="copyDashboardUser" id="copyDashboardUser">
+                            <option>{{ 'General_LoadingData'|translate }}</option></select></div>
                 </div>
             </div>