ui: use gritter to display error messages nicely (instead of loading box)

src/static/css/pad/gritter.css

@@ -14,13 +14,15 @@
 
 .gritter-item.popup {
   position: relative;
-  max-width: 450px;
   visibility: visible;
   right: auto !important;
   left: auto !important;
   top: auto;
   bottom: auto;
 }
+.gritter-item.popup:not(.error) {
+  max-width: 450px;
+}
 
 .gritter-item .popup-content {
   display: flex;

src/static/js/pad_utils.js

@@ -526,12 +526,30 @@ function setupGlobalExceptionHandler() {
     {
       var errorId = randomString(20);
       var userAgent = padutils.escapeHtml(navigator.userAgent);
-      if ($("#editorloadingbox").attr("display") != "none"){
-        //show javascript errors to the user
-        $("#editorloadingbox").css("padding", "10px");
-        $("#editorloadingbox").css("padding-top", "45px");
-        $("#editorloadingbox").html("<div style='text-align:left;color:red;font-size:16px;'><b>An error occurred</b><br>The error was reported with the following id: '" + errorId + "'<br><br><span style='color:black;font-weight:bold;font-size:16px'>Please press and hold Ctrl and press F5 to reload this page, if the problem persists please send this error message to your webmaster: </span><div style='color:black;font-size:14px'>'"
-          + "ErrorId: " + errorId + "<br>URL: " + padutils.escapeHtml(window.location.href) + "<br>UserAgent: " + userAgent + "<br>" + msg + " in " + url + " at line " + linenumber + "'</div></div>");
+
+      var msgAlreadyVisible = false;
+      $('.gritter-item .error-msg').each(function() {
+        if ($(this).text() === msg) {
+            msgAlreadyVisible = true;
+        }
+      });
+
+      if (!msgAlreadyVisible) {
+        errorMsg = "<b>Please press and hold Ctrl and press F5 to reload this page</b></br> \
+                    If the problem persists please send this error message to your webmaster: </br></br>\
+                    <div style='text-align:left; font-size: .8em'>\
+                    ErrorId: " + errorId + "<br>\
+                    URL: " + padutils.escapeHtml(window.location.href) + "<br>\
+                    UserAgent: " + userAgent + "<br>\
+                    <span class='error-msg'>"+ msg + "</span> in " + url + " at line " + linenumber + '</div>';
+
+        $.gritter.add({
+          title: "An error occurred",
+          text: errorMsg,
+          class_name: "error",
+          position: 'bottom',
+          sticky: true,
+        });
       }
 
       //send javascript errors to the server