Merge branch 'QA_5_1'

Signed-off-by: William Desportes <williamdes@wdes.fr>

ChangeLog

@@ -83,6 +83,7 @@ phpMyAdmin - ChangeLog
 - issue #16405 Added jest as a Unit Testing tool for our javascript code
 - issue #16252 Fixed the too small font size when editing rows (textareas)
 - issue #16585 Fixed BLOB to JPG transformation PHP errors
+- issue        Made the console setup async to avoid blocking the page render
 
 5.0.5 (not yet released)
 - issue #14494 Fix uncaught TypeError when editing partitioning

js/src/console.js

@@ -61,8 +61,16 @@ var Console = {
             return;
         }
 
-        Console.config = Functions.configGet('Console', false);
+        Functions.configGet('Console', false, (data) => {
+            Console.config = data;
+            Console.setupAfterInit();
+        });
+    },
 
+    /**
+     * Setup the console after the config has been set at initialize stage
+     */
+    setupAfterInit: function () {
         Console.isEnabled = true;
 
         // Vars init
@@ -208,6 +216,7 @@ var Console = {
             Console.info();
         }
     },
+
     /**
      * Execute query and show results in console
      *

js/src/functions.js

@@ -5151,12 +5151,13 @@ Functions.configSet = function (key, value) {
  * If value should not be cached and the up-to-date configuration value from
  * right from the server is required, the third parameter should be `false`.
  *
- * @param {string}     key         Configuration key.
- * @param {boolean}    cached      Configuration type.
+ * @param {string}     key             Configuration key.
+ * @param {boolean}    cached          Configuration type.
+ * @param {Function}   successCallback  The callback to call after the value is received
  *
  * @return {object}                Configuration value.
  */
-Functions.configGet = function (key, cached) {
+Functions.configGet = function (key, cached, successCallback) {
     var isCached = (typeof cached !== 'undefined') ? cached : true;
     var value = localStorage.getItem(key);
     if (isCached && value !== undefined && value !== null) {
@@ -5166,10 +5167,8 @@ Functions.configGet = function (key, cached) {
     // Result not found in local storage or ignored.
     // Hitting the server.
     $.ajax({
-        // TODO: This is ugly, but usually when a configuration is needed,
-        // processing cannot continue until that value is found.
-        // Another solution is to provide a callback as a parameter.
-        async: false,
+        // Value at false to be synchronous (then ignore the callback on success)
+        async: typeof successCallback === 'function',
         url: 'index.php?route=/config/get',
         type: 'POST',
         dataType: 'json',
@@ -5185,7 +5184,11 @@ Functions.configGet = function (key, cached) {
             } else {
                 Functions.ajaxShowMessage(data.message);
             }
-            // Eventually, call callback.
+            // Call the callback if it is defined
+            if (typeof successCallback === 'function') {
+                // Feed it the value previously saved like on async mode
+                successCallback(JSON.parse(localStorage.getItem(key)));
+            }
         }
     });
     return JSON.parse(localStorage.getItem(key));

js/src/navigation.js

@@ -1222,7 +1222,7 @@ Navigation.ResizeHandler = function () {
     /**
      * Event handler for terminating a resize of the panel
      *
-     * @param object e Event data (contains a reference to Navigation.ResizeHandler)
+     * @param {Object} event Event data (contains a reference to Navigation.ResizeHandler)
      *
      * @return void
      */
@@ -1237,7 +1237,7 @@ Navigation.ResizeHandler = function () {
     /**
      * Event handler for updating the panel during a resize operation
      *
-     * @param object e Event data (contains a reference to Navigation.ResizeHandler)
+     * @param {Object} event Event data (contains a reference to Navigation.ResizeHandler)
      *
      * @return void
      */
@@ -1254,7 +1254,7 @@ Navigation.ResizeHandler = function () {
     /**
      * Event handler for collapsing the panel
      *
-     * @param object e Event data (contains a reference to Navigation.ResizeHandler)
+     * @param {Object} event Event data (contains a reference to Navigation.ResizeHandler)
      *
      * @return void
      */
@@ -1291,7 +1291,7 @@ Navigation.ResizeHandler = function () {
                 'overflow-y': 'auto'
             });
         }
-        // Set content bottom space beacuse of console
+        // Set content bottom space because of console
         $('body').css('margin-bottom', $('#pma_console').height() + 'px');
     };
     // Hide the pma_navigation initially when loaded on mobile