Merge pull request #14639 from Piyush3079/Mod_Js_Common_Filesgsoc-js-refactoring

Modular code for some of the common files

22 files changed, 807 insertions, 818 deletions

diff --git a/js/cross_framing_protection.js b/js/cross_framing_protection.js
deleted file mode 100644
index 40f3a398ad..0000000000
--- a/js/cross_framing_protection.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/* vim: set expandtab sw=4 ts=4 sts=4: */
-/**
- * Conditionally included if framing is not allowed
- */
-if (self === top) {
-    var style_element = document.getElementById('cfs-style');
-    // check if style_element has already been removed
-    // to avoid frequently reported js error
-    if (typeof(style_element) !== 'undefined' && style_element !== null) {
-        style_element.parentNode.removeChild(style_element);
-    }
-} else {
-    top.location = self.location;
-}
diff --git a/js/multi_column_sort.js b/js/multi_column_sort.js
deleted file mode 100644
index cc9b92150f..0000000000
--- a/js/multi_column_sort.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/* vim: set expandtab sw=4 ts=4 sts=4: */
-/**
- * @fileoverview    Implements the shiftkey + click remove column
- *                  from order by clause funcationality
- * @name            columndelete
- *
- * @requires    jQuery
- */
-
-function captureURL (url) {
-    var URL = {};
-    url = '' + url;
-    // Exclude the url part till HTTP
-    url = url.substr(url.search('sql.php'), url.length);
-    // The url part between ORDER BY and &session_max_rows needs to be replaced.
-    URL.head = url.substr(0, url.indexOf('ORDER+BY') + 9);
-    URL.tail = url.substr(url.indexOf('&session_max_rows'), url.length);
-    return URL;
-}
-
-/**
- * This function is for navigating to the generated URL
- *
- * @param object   target HTMLAnchor element
- * @param object   parent HTMLDom Object
- */
-
-function removeColumnFromMultiSort (target, parent) {
-    var URL = captureURL(target);
-    var begin = target.indexOf('ORDER+BY') + 8;
-    var end = target.indexOf(PMA_commonParams.get('arg_separator') + 'session_max_rows');
-    // get the names of the columns involved
-    var between_part = target.substr(begin, end - begin);
-    var columns = between_part.split('%2C+');
-    // If the given column is not part of the order clause exit from this function
-    var index = parent.find('small').length ? parent.find('small').text() : '';
-    if (index === '') {
-        return '';
-    }
-    // Remove the current clicked column
-    columns.splice(index - 1, 1);
-    // If all the columns have been removed dont submit a query with nothing
-    // After order by clause.
-    if (columns.length === 0) {
-        var head = URL.head;
-        head = head.slice(0,head.indexOf('ORDER+BY'));
-        URL.head = head;
-        // removing the last sort order should have priority over what
-        // is remembered via the RememberSorting directive
-        URL.tail += PMA_commonParams.get('arg_separator') + 'discard_remembered_sort=1';
-    }
-    URL.head = URL.head.substring(URL.head.indexOf('?') + 1);
-    var middle_part = columns.join('%2C+');
-    params = URL.head + middle_part + URL.tail;
-    return params;
-}
-
-AJAX.registerOnload('keyhandler.js', function () {
-    $('th.draggable.column_heading.pointer.marker a').on('click', function (event) {
-        var url = $(this).parent().find('input').val();
-        var argsep = PMA_commonParams.get('arg_separator');
-        if (event.ctrlKey || event.altKey) {
-            event.preventDefault();
-            var params = removeColumnFromMultiSort(url, $(this).parent());
-            if (params) {
-                AJAX.source = $(this);
-                PMA_ajaxShowMessage();
-                params += argsep + 'ajax_request=true' + argsep + 'ajax_page_request=true';
-                $.post('sql.php', params, AJAX.responseHandler);
-            }
-        } else if (event.shiftKey) {
-            event.preventDefault();
-            AJAX.source = $(this);
-            PMA_ajaxShowMessage();
-            var params = url.substring(url.indexOf('?') + 1);
-            params += argsep + 'ajax_request=true' + argsep + 'ajax_page_request=true';
-            $.post('sql.php', params, AJAX.responseHandler);
-        }
-    });
-});
-
-AJAX.registerTeardown('keyhandler.js', function () {
-    $(document).off('click', 'th.draggable.column_heading.pointer.marker a');
-});
diff --git a/js/page_settings.js b/js/page_settings.js
deleted file mode 100644
index 7de9c03819..0000000000
--- a/js/page_settings.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* vim: set expandtab sw=4 ts=4 sts=4: */
-/**
- * @fileoverview    function used for page-related settings
- * @name            Page-related settings
- *
- * @requires    jQuery
- * @requires    jQueryUI
- * @required    js/functions.js
- */
-
-function showSettings (selector) {
-    var buttons = {};
-    buttons[PMA_messages.strApply] = function () {
-        $('.config-form').submit();
-    };
-
-    buttons[PMA_messages.strCancel] = function () {
-        $(this).dialog('close');
-    };
-
-    // Keeping a clone to restore in case the user cancels the operation
-    var $clone = $(selector + ' .page_settings').clone(true);
-    $(selector)
-        .dialog({
-            title: PMA_messages.strPageSettings,
-            width: 700,
-            minHeight: 250,
-            modal: true,
-            open: function () {
-                $(this).dialog('option', 'maxHeight', $(window).height() - $(this).offset().top);
-            },
-            close: function () {
-                $(selector + ' .page_settings').replaceWith($clone);
-            },
-            buttons: buttons
-        });
-}
-
-function showPageSettings () {
-    showSettings('#page_settings_modal');
-}
-
-function showNaviSettings () {
-    showSettings('#pma_navigation_settings');
-}
-
-AJAX.registerTeardown('page_settings.js', function () {
-    $('#page_settings_icon').css('display', 'none');
-    $('#page_settings_icon').off('click');
-    $('#pma_navigation_settings_icon').off('click');
-});
-
-AJAX.registerOnload('page_settings.js', function () {
-    if ($('#page_settings_modal').length) {
-        $('#page_settings_icon').css('display', 'inline');
-        $('#page_settings_icon').on('click', showPageSettings);
-    }
-    $('#pma_navigation_settings_icon').on('click', showNaviSettings);
-});
diff --git a/js/replication.js b/js/replication.js
deleted file mode 100644
index 51b360650b..0000000000
--- a/js/replication.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/* vim: set expandtab sw=4 ts=4 sts=4: */
-/**
- * for server_replication.php
- *
- */
-
-var random_server_id = Math.floor(Math.random() * 10000000);
-var conf_prefix = 'server-id=' + random_server_id + '\nlog_bin=mysql-bin\nlog_error=mysql-bin.err\n';
-
-function update_config () {
-    var conf_ignore = 'binlog_ignore_db=';
-    var conf_do = 'binlog_do_db=';
-    var database_list = '';
-
-    if ($('#db_select option:selected').size() === 0) {
-        $('#rep').text(conf_prefix);
-    } else if ($('#db_type option:selected').val() === 'all') {
-        $('#db_select option:selected').each(function () {
-            database_list += conf_ignore + $(this).val() + '\n';
-        });
-        $('#rep').text(conf_prefix + database_list);
-    } else {
-        $('#db_select option:selected').each(function () {
-            database_list += conf_do + $(this).val() + '\n';
-        });
-        $('#rep').text(conf_prefix + database_list);
-    }
-}
-
-/**
- * Unbind all event handlers before tearing down a page
- */
-AJAX.registerTeardown('replication.js', function () {
-    $('#db_type').off('change');
-    $('#db_select').off('change');
-    $('#master_status_href').off('click');
-    $('#master_slaves_href').off('click');
-    $('#slave_status_href').off('click');
-    $('#slave_control_href').off('click');
-    $('#slave_errormanagement_href').off('click');
-    $('#slave_synchronization_href').off('click');
-    $('#db_reset_href').off('click');
-    $('#db_select_href').off('click');
-    $('#reset_slave').off('click');
-});
-
-AJAX.registerOnload('replication.js', function () {
-    $('#rep').text(conf_prefix);
-    $('#db_type').on('change', update_config);
-    $('#db_select').on('change', update_config);
-
-    $('#master_status_href').on('click', function () {
-        $('#replication_master_section').toggle();
-    });
-    $('#master_slaves_href').on('click', function () {
-        $('#replication_slaves_section').toggle();
-    });
-    $('#slave_status_href').on('click', function () {
-        $('#replication_slave_section').toggle();
-    });
-    $('#slave_control_href').on('click', function () {
-        $('#slave_control_gui').toggle();
-    });
-    $('#slave_errormanagement_href').on('click', function () {
-        $('#slave_errormanagement_gui').toggle();
-    });
-    $('#slave_synchronization_href').on('click', function () {
-        $('#slave_synchronization_gui').toggle();
-    });
-    $('#db_reset_href').on('click', function () {
-        $('#db_select option:selected').prop('selected', false);
-        $('#db_select').trigger('change');
-    });
-    $('#db_select_href').on('click', function () {
-        $('#db_select option').prop('selected', true);
-        $('#db_select').trigger('change');
-    });
-    $('#reset_slave').on('click', function (e) {
-        e.preventDefault();
-        var $anchor = $(this);
-        var question = PMA_messages.strResetSlaveWarning;
-        $anchor.PMA_confirm(question, $anchor.attr('href'), function (url) {
-            PMA_ajaxShowMessage();
-            AJAX.source = $anchor;
-            var params = {
-                'ajax_page_request': true,
-                'ajax_request': true,
-            };
-            $.post(url, params, AJAX.responseHandler);
-        });
-    });
-});
diff --git a/js/drag_drop_import.js b/js/src/classes/DragDropImport.js
index 73483373dd..14d25f3e0d 100644
--- a/js/drag_drop_import.js
+++ b/js/src/classes/DragDropImport.js
@@ -1,12 +1,19 @@
 /* vim: set expandtab sw=4 ts=4 sts=4: */
 
-/* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/
+
+/**
+ * Module import
+ */
+import { PMA_Messages as PMA_messages } from '../variables/export_variables';
+import PMA_commonParams from '../variables/common_params';
+import { escapeHtml } from '../utils/Sanitise';
+import { AJAX } from '../ajax';
 
 /**
  * Class to handle PMA Drag and Drop Import
  *      feature
  */
-PMA_DROP_IMPORT = {
+var DragDropImport = {
     /**
      * @var int, count of total uploads in this view
      */
@@ -36,17 +43,17 @@ PMA_DROP_IMPORT = {
      */
     _getExtension: function (file) {
         var arr = file.split('.');
-        ext = arr[arr.length - 1];
+        var ext = arr[arr.length - 1];
 
         // check if compressed
         if (jQuery.inArray(ext.toLowerCase(),
-            PMA_DROP_IMPORT.allowedCompressedExtensions) !== -1) {
+            DragDropImport.allowedCompressedExtensions) !== -1) {
             ext = arr[arr.length - 2];
         }
 
         // Now check for extension
         if (jQuery.inArray(ext.toLowerCase(),
-            PMA_DROP_IMPORT.allowedExtensions) !== -1) {
+            DragDropImport.allowedExtensions) !== -1) {
             return ext;
         }
         return '';
@@ -86,7 +93,7 @@ PMA_DROP_IMPORT = {
                             percent = Math.ceil(position / total * 100);
                         }
                         // Set progress
-                        PMA_DROP_IMPORT._setProgress(hash, percent);
+                        DragDropImport._setProgress(hash, percent);
                     }, false);
                 }
                 return xhrobj;
@@ -98,9 +105,9 @@ PMA_DROP_IMPORT = {
             cache: false,
             data: formData,
             success: function (data) {
-                PMA_DROP_IMPORT._importFinished(hash, false, data.success);
+                DragDropImport._importFinished(hash, false, data.success);
                 if (!data.success) {
-                    PMA_DROP_IMPORT.importStatus[PMA_DROP_IMPORT.importStatus.length] = {
+                    DragDropImport.importStatus[DragDropImport.importStatus.length] = {
                         hash: hash,
                         message: data.error
                     };
@@ -121,12 +128,12 @@ PMA_DROP_IMPORT = {
                 if ($(this).attr('task') === 'cancel') {
                     jqXHR.abort();
                     $(this).html('<span>' + PMA_messages.dropImportMessageAborted + '</span>');
-                    PMA_DROP_IMPORT._importFinished(hash, true, false);
+                    DragDropImport._importFinished(hash, true, false);
                 } else if ($(this).children('span').html() ===
                     PMA_messages.dropImportMessageFailed) {
                     // -- view information
                     var $this = $(this);
-                    $.each(PMA_DROP_IMPORT.importStatus,
+                    $.each(DragDropImport.importStatus,
                         function (key, value) {
                             if (value.hash === hash) {
                                 $('.pma_drop_result:visible').remove();
@@ -156,7 +163,7 @@ PMA_DROP_IMPORT = {
 
         event.stopPropagation();
         event.preventDefault();
-        if (!PMA_DROP_IMPORT._hasFiles(event)) {
+        if (!DragDropImport._hasFiles(event)) {
             return;
         }
         if (PMA_commonParams.get('db') === '') {
@@ -197,7 +204,7 @@ PMA_DROP_IMPORT = {
 
         event.stopPropagation();
         event.preventDefault();
-        if (!PMA_DROP_IMPORT._hasFiles(event)) {
+        if (!DragDropImport._hasFiles(event)) {
             return;
         }
         $('.pma_drop_handler').fadeIn();
@@ -261,8 +268,8 @@ PMA_DROP_IMPORT = {
             icon + '"> ');
 
         // Decrease liveUploadCount by one
-        $('.pma_import_count').html(--PMA_DROP_IMPORT.liveUploadCount);
-        if (!PMA_DROP_IMPORT.liveUploadCount) {
+        $('.pma_import_count').html(--DragDropImport.liveUploadCount);
+        if (!DragDropImport.liveUploadCount) {
             $('.pma_sql_import_status h2 .close').fadeIn();
         }
     },
@@ -296,8 +303,8 @@ PMA_DROP_IMPORT = {
             }
             $('.pma_sql_import_status').slideDown();
             for (var i = 0; i < files.length; i++) {
-                var ext  = (PMA_DROP_IMPORT._getExtension(files[i].name));
-                var hash = AJAX.hash(++PMA_DROP_IMPORT.uploadCount);
+                var ext  = (DragDropImport._getExtension(files[i].name));
+                var hash = AJAX.hash(++DragDropImport.uploadCount);
 
                 var $pma_sql_import_status_div = $('.pma_sql_import_status div');
                 $pma_sql_import_status_div.append('<li data-hash="' + hash + '">' +
@@ -313,7 +320,7 @@ PMA_DROP_IMPORT = {
 
                 if (ext !== '') {
                     // Increment liveUploadCount by one
-                    $('.pma_import_count').html(++PMA_DROP_IMPORT.liveUploadCount);
+                    $('.pma_import_count').html(++DragDropImport.liveUploadCount);
                     $('.pma_sql_import_status h2 .close').fadeOut();
 
                     $('.pma_sql_import_status div li[data-hash="' + hash + '"]')
@@ -341,8 +348,8 @@ PMA_DROP_IMPORT = {
                     fd.append('hash', hash);
 
                     // init uploading
-                    PMA_DROP_IMPORT._sendFileToServer(fd, hash);
-                } else if (!PMA_DROP_IMPORT.liveUploadCount) {
+                    DragDropImport._sendFileToServer(fd, hash);
+                } else if (!DragDropImport.liveUploadCount) {
                     $('.pma_sql_import_status h2 .close').fadeIn();
                 }
             }
@@ -353,41 +360,4 @@ PMA_DROP_IMPORT = {
     }
 };
 
-/**
- * Called when some user drags, dragover, leave
- *       a file to the PMA UI
- * @param object Event data
- * @return void
- */
-$(document).on('dragenter', PMA_DROP_IMPORT._dragenter);
-$(document).on('dragover', PMA_DROP_IMPORT._dragover);
-$(document).on('dragleave', '.pma_drop_handler', PMA_DROP_IMPORT._dragleave);
-
-// when file is dropped to PMA UI
-$(document).on('drop', 'body', PMA_DROP_IMPORT._drop);
-
-// minimizing-maximising the sql ajax upload status
-$(document).on('click', '.pma_sql_import_status h2 .minimize', function () {
-    if ($(this).attr('toggle') === 'off') {
-        $('.pma_sql_import_status div').css('height','270px');
-        $(this).attr('toggle','on');
-        $(this).html('-');  // to minimize
-    } else {
-        $('.pma_sql_import_status div').css('height','0px');
-        $(this).attr('toggle','off');
-        $(this).html('+');  // to maximise
-    }
-});
-
-// closing sql ajax upload status
-$(document).on('click', '.pma_sql_import_status h2 .close', function () {
-    $('.pma_sql_import_status').fadeOut(function () {
-        $('.pma_sql_import_status div').html('');
-        PMA_DROP_IMPORT.importStatus = [];  // clear the message array
-    });
-});
-
-// Closing the import result box
-$(document).on('click', '.pma_drop_result h2 .close', function () {
-    $(this).parent('h2').parent('div').remove();
-});
+export default DragDropImport;
diff --git a/js/rte.js b/js/src/classes/RTE.js
index 17cfaace74..00c375495d 100644
--- a/js/rte.js
+++ b/js/src/classes/RTE.js
@@ -1,4 +1,15 @@
 /* vim: set expandtab sw=4 ts=4 sts=4: */
+
+import { PMA_Messages as PMA_messages } from '../variables/export_variables';
+import { PMA_ajaxShowMessage,
+    PMA_ajaxRemoveMessage,
+    PMA_slidingMessage
+} from '../utils/show_ajax_messages';
+import { PMA_addDatepicker } from '../utils/DateTime';
+import { PMA_getSQLEditor } from '../functions/Sql/SqlEditor';
+import { PMA_reloadNavigation } from '../functions/navigation';
+import { getJSConfirmCommonParam } from '../functions/Common';
+
 /**
  * JavaScript functionality for Routines, Triggers and Events.
  *
@@ -457,7 +468,7 @@ RTE.COMMON = {
 
     dropMultipleDialog: function ($this) {
         // We ask for confirmation here
-        $this.PMA_confirm(PMA_messages.strDropRTEitems, '', function (url) {
+        $this.PMA_confirm(PMA_messages.strDropRTEitems, '', function () {
             /**
              * @var msg jQuery object containing the reference to
              *          the AJAX message shown to the user
@@ -610,7 +621,7 @@ RTE.ROUTINE = {
         $('.routine_params_table tbody').sortable({
             containment: '.routine_params_table tbody',
             handle: '.dragHandle',
-            stop: function (event, ui) {
+            stop: function () {
                 that.reindexParameters();
             },
         });
@@ -914,164 +925,4 @@ RTE.ROUTINE = {
     }
 };
 
-/**
- * Attach Ajax event handlers for the Routines, Triggers and Events editor
- */
-$(function () {
-    /**
-     * Attach Ajax event handlers for the Add/Edit functionality.
-     */
-    $(document).on('click', 'a.ajax.add_anchor, a.ajax.edit_anchor', function (event) {
-        event.preventDefault();
-        var type = $(this).attr('href').substr(0, $(this).attr('href').indexOf('?'));
-        if (type.indexOf('routine') !== -1) {
-            type = 'routine';
-        } else if (type.indexOf('trigger') !== -1) {
-            type = 'trigger';
-        } else if (type.indexOf('event') !== -1) {
-            type = 'event';
-        } else {
-            type = '';
-        }
-        var dialog = new RTE.object(type);
-        dialog.editorDialog($(this).hasClass('add_anchor'), $(this));
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for the Execute routine functionality
-     */
-    $(document).on('click', 'a.ajax.exec_anchor', function (event) {
-        event.preventDefault();
-        var dialog = new RTE.object('routine');
-        dialog.executeDialog($(this));
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for Export of Routines, Triggers and Events
-     */
-    $(document).on('click', 'a.ajax.export_anchor', function (event) {
-        event.preventDefault();
-        var dialog = new RTE.object();
-        dialog.exportDialog($(this));
-    }); // end $(document).on()
-
-    $(document).on('click', '#rteListForm.ajax .mult_submit[value="export"]', function (event) {
-        event.preventDefault();
-        var dialog = new RTE.object();
-        dialog.exportDialog($(this));
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for Drop functionality
-     * of Routines, Triggers and Events.
-     */
-    $(document).on('click', 'a.ajax.drop_anchor', function (event) {
-        event.preventDefault();
-        var dialog = new RTE.object();
-        dialog.dropDialog($(this));
-    }); // end $(document).on()
-
-    $(document).on('click', '#rteListForm.ajax .mult_submit[value="drop"]', function (event) {
-        event.preventDefault();
-        var dialog = new RTE.object();
-        dialog.dropMultipleDialog($(this));
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for the "Change event/routine type"
-     * functionality in the events editor, so that the correct
-     * rows are shown in the editor when changing the event type
-     */
-    $(document).on('change', 'select[name=item_type]', function () {
-        $(this)
-            .closest('table')
-            .find('tr.recurring_event_row, tr.onetime_event_row, tr.routine_return_row, .routine_direction_cell')
-            .toggle();
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for the "Change parameter type"
-     * functionality in the routines editor, so that the correct
-     * option/length fields, if any, are shown when changing
-     * a parameter type
-     */
-    $(document).on('change', 'select[name^=item_param_type]', function () {
-        /**
-         * @var row jQuery object containing the reference to
-         *          a row in the routine parameters table
-         */
-        var $row = $(this).parents('tr').first();
-        var rte = new RTE.object('routine');
-        rte.setOptionsForParameter(
-            $row.find('select[name^=item_param_type]'),
-            $row.find('input[name^=item_param_length]'),
-            $row.find('select[name^=item_param_opts_text]'),
-            $row.find('select[name^=item_param_opts_num]')
-        );
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for the "Change the type of return
-     * variable of function" functionality, so that the correct fields,
-     * if any, are shown when changing the function return type type
-     */
-    $(document).on('change', 'select[name=item_returntype]', function () {
-        var rte = new RTE.object('routine');
-        var $table = $(this).closest('table.rte_table');
-        rte.setOptionsForParameter(
-            $table.find('select[name=item_returntype]'),
-            $table.find('input[name=item_returnlength]'),
-            $table.find('select[name=item_returnopts_text]'),
-            $table.find('select[name=item_returnopts_num]')
-        );
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for the "Add parameter to routine" functionality
-     */
-    $(document).on('click', 'input[name=routine_addparameter]', function (event) {
-        event.preventDefault();
-        /**
-         * @var routine_params_table jQuery object containing the reference
-         *                           to the routine parameters table
-         */
-        var $routine_params_table = $(this).closest('div.ui-dialog').find('.routine_params_table');
-        /**
-         * @var new_param_row A string containing the HTML code for the
-         *                    new row for the routine parameters table
-         */
-        var new_param_row = RTE.param_template.replace(/%s/g, $routine_params_table.find('tr').length - 1);
-        // Append the new row to the parameters table
-        $routine_params_table.append(new_param_row);
-        // Make sure that the row is correctly shown according to the type of routine
-        if ($(this).closest('div.ui-dialog').find('table.rte_table select[name=item_type]').val() === 'FUNCTION') {
-            $('tr.routine_return_row').show();
-            $('td.routine_direction_cell').hide();
-        }
-        /**
-         * @var newrow jQuery object containing the reference to the newly
-         *             inserted row in the routine parameters table
-         */
-        var $newrow = $(this).closest('div.ui-dialog').find('table.routine_params_table').find('tr').has('td').last();
-        // Enable/disable the 'options' dropdowns for parameters as necessary
-        var rte = new RTE.object('routine');
-        rte.setOptionsForParameter(
-            $newrow.find('select[name^=item_param_type]'),
-            $newrow.find('input[name^=item_param_length]'),
-            $newrow.find('select[name^=item_param_opts_text]'),
-            $newrow.find('select[name^=item_param_opts_num]')
-        );
-    }); // end $(document).on()
-
-    /**
-     * Attach Ajax event handlers for the
-     * "Remove parameter from routine" functionality
-     */
-    $(document).on('click', 'a.routine_param_remove_anchor', function (event) {
-        event.preventDefault();
-        $(this).parent().parent().remove();
-        // After removing a parameter, the indices of the name attributes in
-        // the input fields lose the correct order and need to be reordered.
-        RTE.ROUTINE.reindexParameters();
-    }); // end $(document).on()
-}); // end of $()
+export default RTE;
diff --git a/js/src/consts/files.js b/js/src/consts/files.js
index 22072897f9..9ab3ef010a 100644
--- a/js/src/consts/files.js
+++ b/js/src/consts/files.js
@@ -7,7 +7,19 @@
  * @type {Object} files
  */
 const PhpToJsFileMapping = {
-    global: ['error_report', 'config', 'navigation', 'page_settings', 'shortcuts_handler', 'functions', 'indexes'],
+    global: [
+        'error_report',
+        'config',
+        'navigation',
+        'page_settings',
+        'shortcuts_handler',
+        'functions',
+        'indexes',
+        'key_handler',
+        'cross_framing_protection',
+        'drag_drop_import',
+        'rte'
+    ],
     server_privileges: ['server_privileges'],
     server_databases: ['server_databases'],
     server_status_advisor: ['server_status_advisor'],
@@ -45,7 +57,8 @@ const PhpToJsFileMapping = {
     tbl_zoom_select: ['sql', 'tbl_change'],
     tbl_find_replace: ['tbl_find_replace'],
     tbl_import: ['import'],
-    tbl_export: ['export']
+    tbl_export: ['export'],
+    normalization: ['normalization']
 };
 
 const JsFileList = [
@@ -84,7 +97,12 @@ const JsFileList = [
     'tbl_tracking',
     'tbl_change',
     'tbl_select',
-    'tbl_find_replace'
+    'tbl_find_replace',
+    'key_handler',
+    'cross_framing_protection',
+    'drag_drop_import',
+    'normalization',
+    'rte'
 ];
 
 export {
diff --git a/js/src/cross_framing_protection.js b/js/src/cross_framing_protection.js
new file mode 100644
index 0000000000..173295d1b5
--- /dev/null
+++ b/js/src/cross_framing_protection.js
@@ -0,0 +1,16 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/**
+ * Conditionally included if framing is not allowed
+ */
+
+if (self === top) {
+    var styleElement = document.getElementById('cfs-style');
+    // check if styleElement has already been removed
+    // to avoid frequently reported js error
+    if (typeof(styleElement) !== 'undefined' && styleElement !== null) {
+        styleElement.parentNode.removeChild(styleElement);
+    }
+} else {
+    top.location = self.location;
+}
diff --git a/js/src/db_operations.js b/js/src/db_operations.js
index b45c1b038d..fcb9af1eae 100644
--- a/js/src/db_operations.js
+++ b/js/src/db_operations.js
@@ -12,6 +12,7 @@ import { escapeHtml } from './utils/Sanitise';
 import { PMA_prepareForAjaxRequest } from './functions/AjaxRequest';
 import { PMA_sprintf } from './utils/sprintf';
 import { getJSConfirmCommonParam } from './functions/Common';
+import { PMA_reloadNavigation } from './functions/navigation';
 
 /**
  * @fileoverview    function used in server privilege pages
@@ -74,7 +75,7 @@ export function onloadDbOperations () {
                     PMA_reloadNavigation(function () {
                         $('#pma_navigation_tree')
                             .find('a:not(\'.expander\')')
-                            .each(function (index) {
+                            .each(function () {
                                 var $thisAnchor = $(this);
                                 if ($thisAnchor.text() === data.newname) {
                                     // simulate a click on the new db name
diff --git a/js/src/drag_drop_import.js b/js/src/drag_drop_import.js
new file mode 100644
index 0000000000..472ffa48d8
--- /dev/null
+++ b/js/src/drag_drop_import.js
@@ -0,0 +1,59 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/**
+ * Module import
+ */
+import DragDropImport from './classes/DragDropImport';
+
+/* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/
+
+export function teardownDragDropImport () {
+    $(document).off('dragenter');
+    $(document).off('dragover');
+    $(document).off('dragleave', '.pma_drop_handler');
+    $(document).off('drop', 'body');
+    $(document).off('click', '.pma_sql_import_status h2 .minimize');
+    $(document).off('click', '.pma_sql_import_status h2 .close');
+    $(document).off('click', '.pma_drop_result h2 .close');
+}
+
+export function onloadDragDropImport () {
+    /**
+     * Called when some user drags, dragover, leave
+     *       a file to the PMA UI
+     * @param object Event data
+     * @return void
+     */
+    $(document).on('dragenter', DragDropImport._dragenter);
+    $(document).on('dragover', DragDropImport._dragover);
+    $(document).on('dragleave', '.pma_drop_handler', DragDropImport._dragleave);
+
+    // when file is dropped to PMA UI
+    $(document).on('drop', 'body', DragDropImport._drop);
+
+    // minimizing-maximising the sql ajax upload status
+    $(document).on('click', '.pma_sql_import_status h2 .minimize', function () {
+        if ($(this).attr('toggle') === 'off') {
+            $('.pma_sql_import_status div').css('height','270px');
+            $(this).attr('toggle','on');
+            $(this).html('-');  // to minimize
+        } else {
+            $('.pma_sql_import_status div').css('height','0px');
+            $(this).attr('toggle','off');
+            $(this).html('+');  // to maximise
+        }
+    });
+
+    // closing sql ajax upload status
+    $(document).on('click', '.pma_sql_import_status h2 .close', function () {
+        $('.pma_sql_import_status').fadeOut(function () {
+            $('.pma_sql_import_status div').html('');
+            DragDropImport.importStatus = [];  // clear the message array
+        });
+    });
+
+    // Closing the import result box
+    $(document).on('click', '.pma_drop_result h2 .close', function () {
+        $(this).parent('h2').parent('div').remove();
+    });
+}
diff --git a/js/keyhandler.js b/js/src/functions/KeyHandler.js
index a5e459fa1a..d62a396697 100644
--- a/js/keyhandler.js
+++ b/js/src/functions/KeyHandler.js
@@ -8,7 +8,7 @@ var ctrlKeyHistory = 0;
   *
   * @param object   event data
   */
-function onKeyDownArrowsHandler (e) {
+export function onKeyDownArrowsHandler (e) {
     e = e || window.event;
 
     var o = (e.srcElement || e.target);
@@ -71,7 +71,7 @@ function onKeyDownArrowsHandler (e) {
         return;
     }
 
-    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox/') > -1;
+    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox/') > -1;
 
     var id = 'field_' + y + '_' + x;
 
@@ -92,12 +92,12 @@ function onKeyDownArrowsHandler (e) {
 
     nO.focus();
 
-    if (is_firefox) {
+    if (isFirefox) {
         var ffcheck = 0;
         var ffversion;
         for (ffversion = 3 ; ffversion < 25 ; ffversion++) {
-            var is_firefox_v_24 = navigator.userAgent.toLowerCase().indexOf('firefox/' + ffversion) > -1;
-            if (is_firefox_v_24) {
+            var isFirefoxV24 = navigator.userAgent.toLowerCase().indexOf('firefox/' + ffversion) > -1;
+            if (isFirefoxV24) {
                 ffcheck = 1;
                 break;
             }
@@ -124,17 +124,3 @@ function onKeyDownArrowsHandler (e) {
     }
     e.returnValue = false;
 }
-
-AJAX.registerTeardown('keyhandler.js', function () {
-    $(document).off('keydown keyup', '#table_columns');
-    $(document).off('keydown keyup', 'table.insertRowTable');
-});
-
-AJAX.registerOnload('keyhandler.js', function () {
-    $(document).on('keydown keyup', '#table_columns', function (event) {
-        onKeyDownArrowsHandler(event.originalEvent);
-    });
-    $(document).on('keydown keyup', 'table.insertRowTable', function (event) {
-        onKeyDownArrowsHandler(event.originalEvent);
-    });
-});
diff --git a/js/normalization.js b/js/src/functions/Table/Normalization.js
index 41de567f29..4bbdefc11b 100644
--- a/js/normalization.js
+++ b/js/src/functions/Table/Normalization.js
@@ -1,20 +1,16 @@
 /* vim: set expandtab sw=4 ts=4 sts=4: */
-/**
- * @fileoverview   events handling from normalization page
- * @name            normalization
- *
- * @requires    jQuery
- */
 
 /**
- * AJAX scripts for normalization.php
- *
+ * Module Import
  */
+import { PMA_Messages as PMA_messages } from '../../variables/export_variables';
+import PMA_commonParams from '../../variables/common_params';
+import { PMA_sprintf } from '../../utils/sprintf';
+import { escapeHtml, escapeJsString } from '../../utils/Sanitise';
+import { PMA_ajaxShowMessage } from '../../utils/show_ajax_messages';
+import NormalizationEnum from '../../utils/NormalizationEnum';
 
-var normalizeto = '1nf';
-var primary_key;
-var data_parsed = null;
-function appendHtmlColumnsList () {
+export function appendHtmlColumnsList () {
     $.get(
         'normalization.php',
         {
@@ -30,6 +26,7 @@ function appendHtmlColumnsList () {
         }
     );
 }
+
 function goTo3NFStep1 (newTables) {
     if (Object.keys(newTables).length === 1) {
         newTables = [PMA_commonParams.get('table')];
@@ -67,6 +64,7 @@ function goTo3NFStep1 (newTables) {
         }
     );
 }
+
 function goTo2NFStep1 () {
     $.post(
         'normalization.php',
@@ -90,7 +88,7 @@ function goTo2NFStep1 () {
                     })
                     .appendTo('.tblFooters');
             } else {
-                if (normalizeto === '3nf') {
+                if (NormalizationEnum.normalizeto === '3nf') {
                     $('#mainContent #newCols').html(PMA_messages.strToNextStep);
                     setTimeout(function () {
                         goTo3NFStep1([PMA_commonParams.get('table')]);
@@ -101,7 +99,7 @@ function goTo2NFStep1 () {
 }
 
 function goToFinish1NF () {
-    if (normalizeto !== '1nf') {
+    if (NormalizationEnum.normalizeto !== '1nf') {
         goTo2NFStep1();
         return true;
     }
@@ -130,14 +128,14 @@ function goToStep4 () {
             $('#mainContent #extra').html(data.extra);
             $('#mainContent #newCols').html('');
             $('.tblFooters').html('');
-            for (var pk in primary_key) {
-                $('#extra input[value=\'' + escapeJsString(primary_key[pk]) + '\']').attr('disabled','disabled');
+            for (var pk in NormalizationEnum.primary_key) {
+                $('#extra input[value=\'' + escapeJsString(NormalizationEnum.primary_key[pk]) + '\']').attr('disabled','disabled');
             }
         }
     );
 }
 
-function goToStep3 () {
+export function goToStep3 () {
     $.post(
         'normalization.php',
         {
@@ -152,15 +150,15 @@ function goToStep3 () {
             $('#mainContent #extra').html(data.extra);
             $('#mainContent #newCols').html('');
             $('.tblFooters').html('');
-            primary_key = JSON.parse(data.primary_key);
-            for (var pk in primary_key) {
-                $('#extra input[value=\'' + escapeJsString(primary_key[pk]) + '\']').attr('disabled','disabled');
+            NormalizationEnum.primary_key = JSON.parse(data.primary_key);
+            for (var pk in NormalizationEnum.primary_key) {
+                $('#extra input[value=\'' + escapeJsString(NormalizationEnum.primary_key[pk]) + '\']').attr('disabled','disabled');
             }
         }
     );
 }
 
-function goToStep2 (extra) {
+export function goToStep2 (extra) {
     $.post(
         'normalization.php',
         {
@@ -199,13 +197,14 @@ function goTo2NFFinish (pd) {
     for (var dependson in pd) {
         tables[dependson] = $('#extra input[name="' + dependson + '"]').val();
     }
-    datastring = {
+    var datastring = {
         'ajax_request': true,
         'db': PMA_commonParams.get('db'),
         'table': PMA_commonParams.get('table'),
         'pd': JSON.stringify(pd),
         'newTablesName':JSON.stringify(tables),
-        'createNewTables2NF':1 };
+        'createNewTables2NF':1
+    };
     $.ajax({
         type: 'POST',
         url: 'normalization.php',
@@ -214,7 +213,7 @@ function goTo2NFFinish (pd) {
         success: function (data) {
             if (data.success === true) {
                 if (data.queryError === false) {
-                    if (normalizeto === '3nf') {
+                    if (NormalizationEnum.normalizeto === '3nf') {
                         $('#pma_navigation_reload').trigger('click');
                         goTo3NFStep1(tables);
                         return true;
@@ -245,11 +244,12 @@ function goTo3NFFinish (newTables) {
             }
         }
     }
-    datastring = {
+    var datastring = {
         'ajax_request': true,
         'db': PMA_commonParams.get('db'),
         'newTables':JSON.stringify(newTables),
-        'createNewTables3NF':1 };
+        'createNewTables3NF':1
+    };
     $.ajax({
         type: 'POST',
         url: 'normalization.php',
@@ -273,7 +273,7 @@ function goTo3NFFinish (newTables) {
         }
     });
 }
-var backup = '';
+
 function goTo2NFStep2 (pd, primary_key) {
     $('#newCols').html('');
     $('#mainContent legend').html(PMA_messages.strStep + ' 2.2 ' + PMA_messages.strConfirmPd);
@@ -292,12 +292,13 @@ function goTo2NFStep2 (pd, primary_key) {
         extra += '</div>';
     } else {
         extra += '</div>';
-        datastring = {
+        var datastring = {
             'ajax_request': true,
             'db': PMA_commonParams.get('db'),
             'table': PMA_commonParams.get('table'),
             'pd': JSON.stringify(pd),
-            'getNewTables2NF':1 };
+            'getNewTables2NF':1
+        };
         $.ajax({
             type: 'POST',
             url: 'normalization.php',
@@ -328,7 +329,7 @@ function goTo3NFStep2 (pd, tablesTds) {
     var pdFound = false;
     for (var table in tablesTds) {
         for (var i in tablesTds[table]) {
-            dependson = tablesTds[table][i];
+            var dependson = tablesTds[table][i];
             if (dependson !== '' && dependson !== table) {
                 pdFound = true;
                 extra += '<p class="displayblock desc">' + escapeHtml(dependson) + ' -> ' + escapeHtml(pd[dependson].toString()) + '</p>';
@@ -340,21 +341,22 @@ function goTo3NFStep2 (pd, tablesTds) {
         extra += '</div>';
     } else {
         extra += '</div>';
-        datastring = {
+        var datastring = {
             'ajax_request': true,
             'db': PMA_commonParams.get('db'),
             'tables': JSON.stringify(tablesTds),
             'pd': JSON.stringify(pd),
-            'getNewTables3NF':1 };
+            'getNewTables3NF':1
+        };
         $.ajax({
             type: 'POST',
             url: 'normalization.php',
             data: datastring,
             async:false,
             success: function (data) {
-                data_parsed = data;
+                NormalizationEnum.data_parsed = data;
                 if (data.success === true) {
-                    extra += data_parsed.html;
+                    extra += NormalizationEnum.data_parsed.html;
                 } else {
                     PMA_ajaxShowMessage(data.error, false);
                 }
@@ -367,10 +369,11 @@ function goTo3NFStep2 (pd, tablesTds) {
         if (!pdFound) {
             goTo3NFFinish([]);
         } else {
-            goTo3NFFinish(data_parsed.newTables);
+            goTo3NFFinish(NormalizationEnum.data_parsed.newTables);
         }
     });
 }
+
 function processDependencies (primary_key, isTransitive) {
     var pd = {};
     var tablesTds = {};
@@ -411,7 +414,7 @@ function processDependencies (primary_key, isTransitive) {
             }
         }
     });
-    backup = $('#mainContent').html();
+    NormalizationEnum.backup = $('#mainContent').html();
     if (isTransitive === true) {
         goTo3NFStep2(pd, tablesTds);
     } else {
@@ -420,7 +423,7 @@ function processDependencies (primary_key, isTransitive) {
     return false;
 }
 
-function moveRepeatingGroup (repeatingCols) {
+export function moveRepeatingGroup (repeatingCols) {
     var newTable = $('input[name=repeatGroupTable]').val();
     var newColumn = $('input[name=repeatGroupColumn]').val();
     if (!newTable) {
@@ -431,14 +434,14 @@ function moveRepeatingGroup (repeatingCols) {
         $('input[name=repeatGroupColumn]').focus();
         return false;
     }
-    datastring = {
+    var datastring = {
         'ajax_request': true,
         'db': PMA_commonParams.get('db'),
         'table': PMA_commonParams.get('table'),
         'repeatingColumns': repeatingCols,
-        'newTable':newTable,
-        'newColumn':newColumn,
-        'primary_columns':primary_key.toString()
+        'newTable': newTable,
+        'newColumn': newColumn,
+        'primary_columns': NormalizationEnum.primary_key.toString()
     };
     $.ajax({
         type: 'POST',
@@ -458,272 +461,3 @@ function moveRepeatingGroup (repeatingCols) {
         }
     });
 }
-AJAX.registerTeardown('normalization.js', function () {
-    $('#extra').off('click', '#selectNonAtomicCol');
-    $('#splitGo').off('click');
-    $('.tblFooters').off('click', '#saveSplit');
-    $('#extra').off('click', '#addNewPrimary');
-    $('.tblFooters').off('click', '#saveNewPrimary');
-    $('#extra').off('click', '#removeRedundant');
-    $('#mainContent p').off('click', '#createPrimaryKey');
-    $('#mainContent').off('click', '#backEditPd');
-    $('#mainContent').off('click', '#showPossiblePd');
-    $('#mainContent').off('click', '.pickPd');
-});
-
-AJAX.registerOnload('normalization.js', function () {
-    var selectedCol;
-    normalizeto = $('#mainContent').data('normalizeto');
-    $('#extra').on('click', '#selectNonAtomicCol', function () {
-        if ($(this).val() === 'no_such_col') {
-            goToStep2();
-        } else {
-            selectedCol = $(this).val();
-        }
-    });
-
-    $('#splitGo').on('click', function () {
-        if (!selectedCol || selectedCol === '') {
-            return false;
-        }
-        var numField = $('#numField').val();
-        $.get(
-            'normalization.php',
-            {
-                'ajax_request': true,
-                'db': PMA_commonParams.get('db'),
-                'table': PMA_commonParams.get('table'),
-                'splitColumn': true,
-                'numFields': numField
-            },
-            function (data) {
-                if (data.success === true) {
-                    $('#newCols').html(data.message);
-                    $('.default_value').hide();
-                    $('.enum_notice').hide();
-
-                    $('<input />')
-                        .attr({ type: 'submit', id: 'saveSplit', value: PMA_messages.strSave })
-                        .appendTo('.tblFooters');
-
-                    var cancelSplitButton = $('<input />')
-                        .attr({ type: 'submit', id: 'cancelSplit', value: PMA_messages.strCancel })
-                        .on('click', function () {
-                            $('#newCols').html('');
-                            $(this).parent().html('');
-                        })
-                        .appendTo('.tblFooters');
-                }
-            }
-        );
-        return false;
-    });
-    $('.tblFooters').on('click','#saveSplit', function () {
-        central_column_list = [];
-        if ($('#newCols #field_0_1').val() === '') {
-            $('#newCols #field_0_1').focus();
-            return false;
-        }
-        var argsep = PMA_commonParams.get('arg_separator');
-        datastring = $('#newCols :input').serialize();
-        datastring += argsep + 'ajax_request=1' + argsep + 'do_save_data=1' + argsep + 'field_where=last';
-        $.post('tbl_addfield.php', datastring, function (data) {
-            if (data.success) {
-                $.post(
-                    'sql.php',
-                    {
-                        'ajax_request': true,
-                        'db': PMA_commonParams.get('db'),
-                        'table': PMA_commonParams.get('table'),
-                        'dropped_column': selectedCol,
-                        'purge' : 1,
-                        'sql_query': 'ALTER TABLE `' + PMA_commonParams.get('table') + '` DROP `' + selectedCol + '`;',
-                        'is_js_confirmed': 1
-                    },
-                    function (data) {
-                        if (data.success === true) {
-                            appendHtmlColumnsList();
-                            $('#newCols').html('');
-                            $('.tblFooters').html('');
-                        } else {
-                            PMA_ajaxShowMessage(data.error, false);
-                        }
-                        selectedCol = '';
-                    }
-                );
-            } else {
-                PMA_ajaxShowMessage(data.error, false);
-            }
-        });
-    });
-
-    $('#extra').on('click', '#addNewPrimary', function () {
-        $.get(
-            'normalization.php',
-            {
-                'ajax_request': true,
-                'db': PMA_commonParams.get('db'),
-                'table': PMA_commonParams.get('table'),
-                'addNewPrimary': true
-            },
-            function (data) {
-                if (data.success === true) {
-                    $('#newCols').html(data.message);
-                    $('.default_value').hide();
-                    $('.enum_notice').hide();
-
-                    $('<input />')
-                        .attr({ type: 'submit', id: 'saveNewPrimary', value: PMA_messages.strSave })
-                        .appendTo('.tblFooters');
-                    $('<input />')
-                        .attr({ type: 'submit', id: 'cancelSplit', value: PMA_messages.strCancel })
-                        .on('click', function () {
-                            $('#newCols').html('');
-                            $(this).parent().html('');
-                        })
-                        .appendTo('.tblFooters');
-                } else {
-                    PMA_ajaxShowMessage(data.error, false);
-                }
-            }
-        );
-        return false;
-    });
-    $('.tblFooters').on('click', '#saveNewPrimary', function () {
-        var datastring = $('#newCols :input').serialize();
-        var argsep = PMA_commonParams.get('arg_separator');
-        datastring += argsep + 'field_key[0]=primary_0' + argsep + 'ajax_request=1' + argsep + 'do_save_data=1' + argsep + 'field_where=last';
-        $.post('tbl_addfield.php', datastring, function (data) {
-            if (data.success === true) {
-                $('#mainContent h4').html(PMA_messages.strPrimaryKeyAdded);
-                $('#mainContent p').html(PMA_messages.strToNextStep);
-                $('#mainContent #extra').html('');
-                $('#mainContent #newCols').html('');
-                $('.tblFooters').html('');
-                setTimeout(function () {
-                    goToStep3();
-                }, 2000);
-            } else {
-                PMA_ajaxShowMessage(data.error, false);
-            }
-        });
-    });
-    $('#extra').on('click', '#removeRedundant', function () {
-        var dropQuery = 'ALTER TABLE `' + PMA_commonParams.get('table') + '` ';
-        $('#extra input[type=checkbox]:checked').each(function () {
-            dropQuery += 'DROP `' + $(this).val() + '`, ';
-        });
-        dropQuery = dropQuery.slice(0, -2);
-        $.post(
-            'sql.php',
-            {
-                'ajax_request': true,
-                'db': PMA_commonParams.get('db'),
-                'table': PMA_commonParams.get('table'),
-                'sql_query': dropQuery,
-                'is_js_confirmed': 1
-            },
-            function (data) {
-                if (data.success === true) {
-                    goToStep2('goToFinish1NF');
-                } else {
-                    PMA_ajaxShowMessage(data.error, false);
-                }
-            }
-        );
-    });
-    $('#extra').on('click', '#moveRepeatingGroup', function () {
-        var repeatingCols = '';
-        $('#extra input[type=checkbox]:checked').each(function () {
-            repeatingCols += $(this).val() + ', ';
-        });
-
-        if (repeatingCols !== '') {
-            var newColName = $('#extra input[type=checkbox]:checked:first').val();
-            repeatingCols = repeatingCols.slice(0, -2);
-            var confirmStr = PMA_sprintf(PMA_messages.strMoveRepeatingGroup, escapeHtml(repeatingCols), escapeHtml(PMA_commonParams.get('table')));
-            confirmStr += '<input type="text" name="repeatGroupTable" placeholder="' + PMA_messages.strNewTablePlaceholder + '"/>' +
-                '( ' + escapeHtml(primary_key.toString()) + ', <input type="text" name="repeatGroupColumn" placeholder="' + PMA_messages.strNewColumnPlaceholder + '" value="' + escapeHtml(newColName) + '">)' +
-                '</ol>';
-            $('#newCols').html(confirmStr);
-
-            $('<input />')
-                .attr({ type: 'submit', value: PMA_messages.strCancel })
-                .on('click', function () {
-                    $('#newCols').html('');
-                    $('#extra input[type=checkbox]').prop('checked', false);
-                })
-                .appendTo('.tblFooters');
-            $('<input />')
-                .attr({ type: 'submit', value: PMA_messages.strGo })
-                .on('click', function () {
-                    moveRepeatingGroup(repeatingCols);
-                })
-                .appendTo('.tblFooters');
-        }
-    });
-    $('#mainContent p').on('click', '#createPrimaryKey', function (event) {
-        event.preventDefault();
-        var url = { create_index: 1,
-            server:  PMA_commonParams.get('server'),
-            db: PMA_commonParams.get('db'),
-            table: PMA_commonParams.get('table'),
-            added_fields: 1,
-            add_fields:1,
-            index: { Key_name:'PRIMARY' },
-            ajax_request: true
-        };
-        var title = PMA_messages.strAddPrimaryKey;
-        indexEditorDialog(url, title, function () {
-            // on success
-            $('.sqlqueryresults').remove();
-            $('.result_query').remove();
-            $('.tblFooters').html('');
-            goToStep2('goToStep3');
-        });
-        return false;
-    });
-    $('#mainContent').on('click', '#backEditPd', function () {
-        $('#mainContent').html(backup);
-    });
-    $('#mainContent').on('click', '#showPossiblePd', function () {
-        if ($(this).hasClass('hideList')) {
-            $(this).html('+ ' + PMA_messages.strShowPossiblePd);
-            $(this).removeClass('hideList');
-            $('#newCols').slideToggle('slow');
-            return false;
-        }
-        if ($('#newCols').html() !== '') {
-            $('#showPossiblePd').html('- ' + PMA_messages.strHidePd);
-            $('#showPossiblePd').addClass('hideList');
-            $('#newCols').slideToggle('slow');
-            return false;
-        }
-        $('#newCols').insertAfter('#mainContent h4');
-        $('#newCols').html('<div class="center">' + PMA_messages.strLoading + '<br/>' + PMA_messages.strWaitForPd + '</div>');
-        $.post(
-            'normalization.php',
-            {
-                'ajax_request': true,
-                'db': PMA_commonParams.get('db'),
-                'table': PMA_commonParams.get('table'),
-                'findPdl': true
-            }, function (data) {
-                $('#showPossiblePd').html('- ' + PMA_messages.strHidePd);
-                $('#showPossiblePd').addClass('hideList');
-                $('#newCols').html(data.message);
-            });
-    });
-    $('#mainContent').on('click', '.pickPd', function () {
-        var strColsLeft = $(this).next('.determinants').html();
-        var colsLeft = strColsLeft.split(',');
-        var strColsRight = $(this).next().next().html();
-        var colsRight = strColsRight.split(',');
-        for (var i in colsRight) {
-            $('form[data-colname="' + colsRight[i].trim() + '"] input[type="checkbox"]').prop('checked', false);
-            for (var j in colsLeft) {
-                $('form[data-colname="' + colsRight[i].trim() + '"] input[value="' + colsLeft[j].trim() + '"]').prop('checked', true);
-            }
-        }
-    });
-});
diff --git a/js/src/key_handler.js b/js/src/key_handler.js
new file mode 100644
index 0000000000..b5783b021f
--- /dev/null
+++ b/js/src/key_handler.js
@@ -0,0 +1,28 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/**
+ * Module import
+ */
+import { onKeyDownArrowsHandler } from './functions/KeyHandler';
+
+function teardownKeyhandler () {
+    $(document).off('keydown keyup', '#table_columns');
+    $(document).off('keydown keyup', 'table.insertRowTable');
+}
+
+function onloadKeyhandler () {
+    $(document).on('keydown keyup', '#table_columns', function (event) {
+        onKeyDownArrowsHandler(event.originalEvent);
+    });
+    $(document).on('keydown keyup', 'table.insertRowTable', function (event) {
+        onKeyDownArrowsHandler(event.originalEvent);
+    });
+}
+
+/**
+ * Module export
+ */
+export {
+    teardownKeyhandler,
+    onloadKeyhandler
+};
diff --git a/js/src/navigation.js b/js/src/navigation.js
index af942dc215..bfb990e5c9 100644
--- a/js/src/navigation.js
+++ b/js/src/navigation.js
@@ -1,9 +1,13 @@
 /* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/* Module import */
 import * as Navigation from './functions/navigation';
 import { PMA_Messages as PMA_messages } from './variables/export_variables';
 import CommonParams from './variables/common_params';
 import { PMA_ajaxShowMessage, PMA_ajaxRemoveMessage, PMA_tooltip } from './utils/show_ajax_messages';
 import { isStorageSupported } from './functions/config';
+import { indexEditorDialog } from './functions/Indexes';
+import RTE from './classes/RTE';
 
 /**
  * function used in or for navigation panel
diff --git a/js/src/normalization.js b/js/src/normalization.js
new file mode 100644
index 0000000000..ace44b883b
--- /dev/null
+++ b/js/src/normalization.js
@@ -0,0 +1,299 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/**
+ * Module import
+ */
+import { PMA_Messages as PMA_messages } from './variables/export_variables';
+import PMA_commonParams from './variables/common_params';
+import { PMA_ajaxShowMessage } from './utils/show_ajax_messages';
+import { PMA_sprintf } from './utils/sprintf';
+import { escapeHtml } from './utils/Sanitise';
+import {
+    goToStep2,
+    goToStep3,
+    moveRepeatingGroup,
+    appendHtmlColumnsList
+} from './functions/Table/Normalization';
+import NormalizationEnum from './utils/NormalizationEnum';
+import { indexEditorDialog } from './functions/Indexes';
+/**
+ * @fileoverview   events handling from normalization page
+ * @name            normalization
+ *
+ * @requires    jQuery
+ */
+
+/**
+ * AJAX scripts for normalization.php
+ *
+ */
+
+export function teardownNormalization () {
+    $('#extra').off('click', '#selectNonAtomicCol');
+    $('#splitGo').off('click');
+    $('.tblFooters').off('click', '#saveSplit');
+    $('#extra').off('click', '#addNewPrimary');
+    $('.tblFooters').off('click', '#saveNewPrimary');
+    $('#extra').off('click', '#removeRedundant');
+    $('#mainContent p').off('click', '#createPrimaryKey');
+    $('#mainContent').off('click', '#backEditPd');
+    $('#mainContent').off('click', '#showPossiblePd');
+    $('#mainContent').off('click', '.pickPd');
+}
+
+export function onloadNormalization () {
+    var selectedCol;
+    NormalizationEnum.normalizeto = $('#mainContent').data('normalizeto');
+    $('#extra').on('click', '#selectNonAtomicCol', function () {
+        if ($(this).val() === 'no_such_col') {
+            goToStep2();
+        } else {
+            selectedCol = $(this).val();
+        }
+    });
+
+    $('#splitGo').on('click', function () {
+        if (!selectedCol || selectedCol === '') {
+            return false;
+        }
+        var numField = $('#numField').val();
+        $.get(
+            'normalization.php',
+            {
+                'ajax_request': true,
+                'db': PMA_commonParams.get('db'),
+                'table': PMA_commonParams.get('table'),
+                'splitColumn': true,
+                'numFields': numField
+            },
+            function (data) {
+                if (data.success === true) {
+                    $('#newCols').html(data.message);
+                    $('.default_value').hide();
+                    $('.enum_notice').hide();
+
+                    $('<input />')
+                        .attr({ type: 'submit', id: 'saveSplit', value: PMA_messages.strSave })
+                        .appendTo('.tblFooters');
+
+                    var cancelSplitButton = $('<input />')
+                        .attr({ type: 'submit', id: 'cancelSplit', value: PMA_messages.strCancel })
+                        .on('click', function () {
+                            $('#newCols').html('');
+                            $(this).parent().html('');
+                        })
+                        .appendTo('.tblFooters');
+                }
+            }
+        );
+        return false;
+    });
+    $('.tblFooters').on('click','#saveSplit', function () {
+        central_column_list = [];
+        if ($('#newCols #field_0_1').val() === '') {
+            $('#newCols #field_0_1').focus();
+            return false;
+        }
+        var argsep = PMA_commonParams.get('arg_separator');
+        var datastring = $('#newCols :input').serialize();
+        datastring += argsep + 'ajax_request=1' + argsep + 'do_save_data=1' + argsep + 'field_where=last';
+        $.post('tbl_addfield.php', datastring, function (data) {
+            if (data.success) {
+                $.post(
+                    'sql.php',
+                    {
+                        'ajax_request': true,
+                        'db': PMA_commonParams.get('db'),
+                        'table': PMA_commonParams.get('table'),
+                        'dropped_column': selectedCol,
+                        'purge' : 1,
+                        'sql_query': 'ALTER TABLE `' + PMA_commonParams.get('table') + '` DROP `' + selectedCol + '`;',
+                        'is_js_confirmed': 1
+                    },
+                    function (data) {
+                        if (data.success === true) {
+                            appendHtmlColumnsList();
+                            $('#newCols').html('');
+                            $('.tblFooters').html('');
+                        } else {
+                            PMA_ajaxShowMessage(data.error, false);
+                        }
+                        selectedCol = '';
+                    }
+                );
+            } else {
+                PMA_ajaxShowMessage(data.error, false);
+            }
+        });
+    });
+
+    $('#extra').on('click', '#addNewPrimary', function () {
+        $.get(
+            'normalization.php',
+            {
+                'ajax_request': true,
+                'db': PMA_commonParams.get('db'),
+                'table': PMA_commonParams.get('table'),
+                'addNewPrimary': true
+            },
+            function (data) {
+                if (data.success === true) {
+                    $('#newCols').html(data.message);
+                    $('.default_value').hide();
+                    $('.enum_notice').hide();
+
+                    $('<input />')
+                        .attr({ type: 'submit', id: 'saveNewPrimary', value: PMA_messages.strSave })
+                        .appendTo('.tblFooters');
+                    $('<input />')
+                        .attr({ type: 'submit', id: 'cancelSplit', value: PMA_messages.strCancel })
+                        .on('click', function () {
+                            $('#newCols').html('');
+                            $(this).parent().html('');
+                        })
+                        .appendTo('.tblFooters');
+                } else {
+                    PMA_ajaxShowMessage(data.error, false);
+                }
+            }
+        );
+        return false;
+    });
+    $('.tblFooters').on('click', '#saveNewPrimary', function () {
+        var datastring = $('#newCols :input').serialize();
+        var argsep = PMA_commonParams.get('arg_separator');
+        datastring += argsep + 'field_key[0]=primary_0' + argsep + 'ajax_request=1' + argsep + 'do_save_data=1' + argsep + 'field_where=last';
+        $.post('tbl_addfield.php', datastring, function (data) {
+            if (data.success === true) {
+                $('#mainContent h4').html(PMA_messages.strPrimaryKeyAdded);
+                $('#mainContent p').html(PMA_messages.strToNextStep);
+                $('#mainContent #extra').html('');
+                $('#mainContent #newCols').html('');
+                $('.tblFooters').html('');
+                setTimeout(function () {
+                    goToStep3();
+                }, 2000);
+            } else {
+                PMA_ajaxShowMessage(data.error, false);
+            }
+        });
+    });
+    $('#extra').on('click', '#removeRedundant', function () {
+        var dropQuery = 'ALTER TABLE `' + PMA_commonParams.get('table') + '` ';
+        $('#extra input[type=checkbox]:checked').each(function () {
+            dropQuery += 'DROP `' + $(this).val() + '`, ';
+        });
+        dropQuery = dropQuery.slice(0, -2);
+        $.post(
+            'sql.php',
+            {
+                'ajax_request': true,
+                'db': PMA_commonParams.get('db'),
+                'table': PMA_commonParams.get('table'),
+                'sql_query': dropQuery,
+                'is_js_confirmed': 1
+            },
+            function (data) {
+                if (data.success === true) {
+                    goToStep2('goToFinish1NF');
+                } else {
+                    PMA_ajaxShowMessage(data.error, false);
+                }
+            }
+        );
+    });
+    $('#extra').on('click', '#moveRepeatingGroup', function () {
+        var repeatingCols = '';
+        $('#extra input[type=checkbox]:checked').each(function () {
+            repeatingCols += $(this).val() + ', ';
+        });
+
+        if (repeatingCols !== '') {
+            var newColName = $('#extra input[type=checkbox]:checked:first').val();
+            repeatingCols = repeatingCols.slice(0, -2);
+            var confirmStr = PMA_sprintf(PMA_messages.strMoveRepeatingGroup, escapeHtml(repeatingCols), escapeHtml(PMA_commonParams.get('table')));
+            confirmStr += '<input type="text" name="repeatGroupTable" placeholder="' + PMA_messages.strNewTablePlaceholder + '"/>' +
+                '( ' + escapeHtml(NormalizationEnum.primary_key.toString()) + ', <input type="text" name="repeatGroupColumn" placeholder="' + PMA_messages.strNewColumnPlaceholder + '" value="' + escapeHtml(newColName) + '">)' +
+                '</ol>';
+            $('#newCols').html(confirmStr);
+
+            $('<input />')
+                .attr({ type: 'submit', value: PMA_messages.strCancel })
+                .on('click', function () {
+                    $('#newCols').html('');
+                    $('#extra input[type=checkbox]').prop('checked', false);
+                })
+                .appendTo('.tblFooters');
+            $('<input />')
+                .attr({ type: 'submit', value: PMA_messages.strGo })
+                .on('click', function () {
+                    moveRepeatingGroup(repeatingCols);
+                })
+                .appendTo('.tblFooters');
+        }
+    });
+    $('#mainContent p').on('click', '#createPrimaryKey', function (event) {
+        event.preventDefault();
+        var url = { create_index: 1,
+            server:  PMA_commonParams.get('server'),
+            db: PMA_commonParams.get('db'),
+            table: PMA_commonParams.get('table'),
+            added_fields: 1,
+            add_fields:1,
+            index: { Key_name:'PRIMARY' },
+            ajax_request: true
+        };
+        var title = PMA_messages.strAddPrimaryKey;
+        indexEditorDialog(url, title, function () {
+            // on success
+            $('.sqlqueryresults').remove();
+            $('.result_query').remove();
+            $('.tblFooters').html('');
+            goToStep2('goToStep3');
+        });
+        return false;
+    });
+    $('#mainContent').on('click', '#backEditPd', function () {
+        $('#mainContent').html(NormalizationEnum.backup);
+    });
+    $('#mainContent').on('click', '#showPossiblePd', function () {
+        if ($(this).hasClass('hideList')) {
+            $(this).html('+ ' + PMA_messages.strShowPossiblePd);
+            $(this).removeClass('hideList');
+            $('#newCols').slideToggle('slow');
+            return false;
+        }
+        if ($('#newCols').html() !== '') {
+            $('#showPossiblePd').html('- ' + PMA_messages.strHidePd);
+            $('#showPossiblePd').addClass('hideList');
+            $('#newCols').slideToggle('slow');
+            return false;
+        }
+        $('#newCols').insertAfter('#mainContent h4');
+        $('#newCols').html('<div class="center">' + PMA_messages.strLoading + '<br/>' + PMA_messages.strWaitForPd + '</div>');
+        $.post(
+            'normalization.php',
+            {
+                'ajax_request': true,
+                'db': PMA_commonParams.get('db'),
+                'table': PMA_commonParams.get('table'),
+                'findPdl': true
+            }, function (data) {
+                $('#showPossiblePd').html('- ' + PMA_messages.strHidePd);
+                $('#showPossiblePd').addClass('hideList');
+                $('#newCols').html(data.message);
+            });
+    });
+    $('#mainContent').on('click', '.pickPd', function () {
+        var strColsLeft = $(this).next('.determinants').html();
+        var colsLeft = strColsLeft.split(',');
+        var strColsRight = $(this).next().next().html();
+        var colsRight = strColsRight.split(',');
+        for (var i in colsRight) {
+            $('form[data-colname="' + colsRight[i].trim() + '"] input[type="checkbox"]').prop('checked', false);
+            for (var j in colsLeft) {
+                $('form[data-colname="' + colsRight[i].trim() + '"] input[value="' + colsLeft[j].trim() + '"]').prop('checked', true);
+            }
+        }
+    });
+}
diff --git a/js/src/replication.js b/js/src/replication.js
index 2bb0d297d2..a5be3886f2 100644
--- a/js/src/replication.js
+++ b/js/src/replication.js
@@ -1,7 +1,12 @@
 /* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/* Module Import */
+import { PMA_messages as PMA_messages } from './variables/export_variables';
+import { PMA_ajaxShowMessage } from './utils/show_ajax_messages';
+import { AJAX } from './ajax';
+
 /**
  * for server_replication.php
- *
  */
 var random_server_id = Math.floor(Math.random() * 10000000);
 var conf_prefix = 'server-id=' + random_server_id + '\nlog_bin=mysql-bin\nlog_error=mysql-bin.err\n';
@@ -29,7 +34,7 @@ function update_config () {
 /**
  * Unbind all event handlers before tearing down a page
  */
-export function teardown1 () {
+export function teardownReplication () {
     $('#db_type').off('change');
     $('#db_select').off('change');
     $('#master_status_href').off('click');
@@ -43,7 +48,7 @@ export function teardown1 () {
     $('#reset_slave').off('click');
 }
 
-export function onload1 () {
+export function onloadReplication () {
     $('#rep').text(conf_prefix);
     $('#db_type').on('change', update_config);
     $('#db_select').on('change', update_config);
diff --git a/js/src/rte.js b/js/src/rte.js
new file mode 100644
index 0000000000..b5da79a06a
--- /dev/null
+++ b/js/src/rte.js
@@ -0,0 +1,166 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/* Module import */
+import RTE from './classes/RTE';
+
+/**
+ * Attach Ajax event handlers for the Routines, Triggers and Events editor
+ */
+$(function () {
+    /**
+     * Attach Ajax event handlers for the Add/Edit functionality.
+     */
+    $(document).on('click', 'a.ajax.add_anchor, a.ajax.edit_anchor', function (event) {
+        event.preventDefault();
+        var type = $(this).attr('href').substr(0, $(this).attr('href').indexOf('?'));
+        if (type.indexOf('routine') !== -1) {
+            type = 'routine';
+        } else if (type.indexOf('trigger') !== -1) {
+            type = 'trigger';
+        } else if (type.indexOf('event') !== -1) {
+            type = 'event';
+        } else {
+            type = '';
+        }
+        var dialog = new RTE.object(type);
+        dialog.editorDialog($(this).hasClass('add_anchor'), $(this));
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for the Execute routine functionality
+     */
+    $(document).on('click', 'a.ajax.exec_anchor', function (event) {
+        event.preventDefault();
+        var dialog = new RTE.object('routine');
+        dialog.executeDialog($(this));
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for Export of Routines, Triggers and Events
+     */
+    $(document).on('click', 'a.ajax.export_anchor', function (event) {
+        event.preventDefault();
+        var dialog = new RTE.object();
+        dialog.exportDialog($(this));
+    }); // end $(document).on()
+
+    $(document).on('click', '#rteListForm.ajax .mult_submit[value="export"]', function (event) {
+        event.preventDefault();
+        var dialog = new RTE.object();
+        dialog.exportDialog($(this));
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for Drop functionality
+     * of Routines, Triggers and Events.
+     */
+    $(document).on('click', 'a.ajax.drop_anchor', function (event) {
+        event.preventDefault();
+        var dialog = new RTE.object();
+        dialog.dropDialog($(this));
+    }); // end $(document).on()
+
+    $(document).on('click', '#rteListForm.ajax .mult_submit[value="drop"]', function (event) {
+        event.preventDefault();
+        var dialog = new RTE.object();
+        dialog.dropMultipleDialog($(this));
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for the "Change event/routine type"
+     * functionality in the events editor, so that the correct
+     * rows are shown in the editor when changing the event type
+     */
+    $(document).on('change', 'select[name=item_type]', function () {
+        $(this)
+            .closest('table')
+            .find('tr.recurring_event_row, tr.onetime_event_row, tr.routine_return_row, .routine_direction_cell')
+            .toggle();
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for the "Change parameter type"
+     * functionality in the routines editor, so that the correct
+     * option/length fields, if any, are shown when changing
+     * a parameter type
+     */
+    $(document).on('change', 'select[name^=item_param_type]', function () {
+        /**
+         * @var row jQuery object containing the reference to
+         *          a row in the routine parameters table
+         */
+        var $row = $(this).parents('tr').first();
+        var rte = new RTE.object('routine');
+        rte.setOptionsForParameter(
+            $row.find('select[name^=item_param_type]'),
+            $row.find('input[name^=item_param_length]'),
+            $row.find('select[name^=item_param_opts_text]'),
+            $row.find('select[name^=item_param_opts_num]')
+        );
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for the "Change the type of return
+     * variable of function" functionality, so that the correct fields,
+     * if any, are shown when changing the function return type type
+     */
+    $(document).on('change', 'select[name=item_returntype]', function () {
+        var rte = new RTE.object('routine');
+        var $table = $(this).closest('table.rte_table');
+        rte.setOptionsForParameter(
+            $table.find('select[name=item_returntype]'),
+            $table.find('input[name=item_returnlength]'),
+            $table.find('select[name=item_returnopts_text]'),
+            $table.find('select[name=item_returnopts_num]')
+        );
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for the "Add parameter to routine" functionality
+     */
+    $(document).on('click', 'input[name=routine_addparameter]', function (event) {
+        event.preventDefault();
+        /**
+         * @var routine_params_table jQuery object containing the reference
+         *                           to the routine parameters table
+         */
+        var $routine_params_table = $(this).closest('div.ui-dialog').find('.routine_params_table');
+        /**
+         * @var new_param_row A string containing the HTML code for the
+         *                    new row for the routine parameters table
+         */
+        var new_param_row = RTE.param_template.replace(/%s/g, $routine_params_table.find('tr').length - 1);
+        // Append the new row to the parameters table
+        $routine_params_table.append(new_param_row);
+        // Make sure that the row is correctly shown according to the type of routine
+        if ($(this).closest('div.ui-dialog').find('table.rte_table select[name=item_type]').val() === 'FUNCTION') {
+            $('tr.routine_return_row').show();
+            $('td.routine_direction_cell').hide();
+        }
+        /**
+         * @var newrow jQuery object containing the reference to the newly
+         *             inserted row in the routine parameters table
+         */
+        var $newrow = $(this).closest('div.ui-dialog').find('table.routine_params_table').find('tr').has('td').last();
+        // Enable/disable the 'options' dropdowns for parameters as necessary
+        var rte = new RTE.object('routine');
+        rte.setOptionsForParameter(
+            $newrow.find('select[name^=item_param_type]'),
+            $newrow.find('input[name^=item_param_length]'),
+            $newrow.find('select[name^=item_param_opts_text]'),
+            $newrow.find('select[name^=item_param_opts_num]')
+        );
+    }); // end $(document).on()
+
+    /**
+     * Attach Ajax event handlers for the
+     * "Remove parameter from routine" functionality
+     */
+    $(document).on('click', 'a.routine_param_remove_anchor', function (event) {
+        event.preventDefault();
+        $(this).parent().parent().remove();
+        // After removing a parameter, the indices of the name attributes in
+        // the input fields lose the correct order and need to be reordered.
+        RTE.ROUTINE.reindexParameters();
+    }); // end $(document).on()
+}); // end of $()
diff --git a/js/src/utils/NormalizationEnum.js b/js/src/utils/NormalizationEnum.js
new file mode 100644
index 0000000000..e2308a38c1
--- /dev/null
+++ b/js/src/utils/NormalizationEnum.js
@@ -0,0 +1,13 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+
+/**
+ * @var NormalizationEnum Object to sore data related to Normalization
+ */
+var NormalizationEnum = {
+    normalizeto: '1nf',
+    primary_key: null,
+    data_parsed: null,
+    backup: ''
+};
+
+export default NormalizationEnum;
diff --git a/js/src/utils/show_ajax_messages.js b/js/src/utils/show_ajax_messages.js
index b8be628bd9..5aa74b313b 100644
--- a/js/src/utils/show_ajax_messages.js
+++ b/js/src/utils/show_ajax_messages.js
@@ -221,10 +221,98 @@ function PMA_ajaxRemoveMessage ($thisMsgbox) {
 }
 
 /**
+ * Creates a message inside an object with a sliding effect
+ *
+ * @param msg    A string containing the text to display
+ * @param $obj   a jQuery object containing the reference
+ *                 to the element where to put the message
+ *                 This is optional, if no element is
+ *                 provided, one will be created below the
+ *                 navigation links at the top of the page
+ *
+ * @return bool   True on success, false on failure
+ */
+function PMA_slidingMessage (msg, $obj) {
+    if (msg === undefined || msg.length === 0) {
+        // Don't show an empty message
+        return false;
+    }
+    if ($obj === undefined || !($obj instanceof jQuery) || $obj.length === 0) {
+        // If the second argument was not supplied,
+        // we might have to create a new DOM node.
+        if ($('#PMA_slidingMessage').length === 0) {
+            $('#page_content').prepend(
+                '<span id="PMA_slidingMessage" ' +
+                'class="pma_sliding_message"></span>'
+            );
+        }
+        $obj = $('#PMA_slidingMessage');
+    }
+    if ($obj.has('div').length > 0) {
+        // If there already is a message inside the
+        // target object, we must get rid of it
+        $obj
+            .find('div')
+            .first()
+            .fadeOut(function () {
+                $obj
+                    .children()
+                    .remove();
+                $obj
+                    .append('<div>' + msg + '</div>');
+                // highlight any sql before taking height;
+                PMA_highlightSQL($obj);
+                $obj.find('div')
+                    .first()
+                    .hide();
+                $obj
+                    .animate({
+                        height: $obj.find('div').first().height()
+                    })
+                    .find('div')
+                    .first()
+                    .fadeIn();
+            });
+    } else {
+        // Object does not already have a message
+        // inside it, so we simply slide it down
+        $obj.width('100%')
+            .html('<div>' + msg + '</div>');
+        // highlight any sql before taking height;
+        PMA_highlightSQL($obj);
+        var h = $obj
+            .find('div')
+            .first()
+            .hide()
+            .height();
+        $obj
+            .find('div')
+            .first()
+            .css('height', 0)
+            .show()
+            .animate({
+                height: h
+            }, function () {
+            // Set the height of the parent
+            // to the height of the child
+                $obj
+                    .height(
+                        $obj
+                            .find('div')
+                            .first()
+                            .height()
+                    );
+            });
+    }
+    return true;
+} // end PMA_slidingMessage()
+
+/**
  * Module export
  */
 export {
     PMA_ajaxRemoveMessage,
     PMA_ajaxShowMessage,
-    PMA_tooltip
+    PMA_tooltip,
+    PMA_slidingMessage
 };
diff --git a/libraries/classes/Header.php b/libraries/classes/Header.php
index 20189e42c6..4d7bdfb6db 100644
--- a/libraries/classes/Header.php
+++ b/libraries/classes/Header.php
@@ -184,12 +184,12 @@ class Header
         $this->_scripts->addFile('messages.php', array('l' => $GLOBALS['lang']));
         $this->_scripts->addFile('vendors~index_new.js');
         $this->_scripts->addFile('index_new.js');
-        $this->_scripts->addFile('keyhandler.js');
+        $this->_scripts->addFile('key_handler');
         // Cross-framing protection
         if ($GLOBALS['cfg']['AllowThirdPartyFraming'] === false) {
-            $this->_scripts->addFile('cross_framing_protection.js');
+            $this->_scripts->addFile('cross_framing_protection');
         }
-        $this->_scripts->addFile('rte.js');
+        $this->_scripts->addFile('rte');
         if ($GLOBALS['cfg']['SendErrorReports'] !== 'never') {
             $this->_scripts->addFile('vendor/tracekit.js');
             $this->_scripts->addFile('error_report.js');
@@ -213,7 +213,7 @@ class Header
         $this->_scripts->addFile('common.js');
 
         if($GLOBALS['cfg']['enable_drag_drop_import'] === true) {
-            $this->_scripts->addFile('drag_drop_import.js');
+            $this->_scripts->addFile('drag_drop_import');
         }
         $this->_scripts->addFile('page_settings');
         if (! $GLOBALS['PMA_Config']->get('DisableShortcutKeys')) {
diff --git a/normalization.php b/normalization.php
index 6ca8330700..8f4967bef6 100644
--- a/normalization.php
+++ b/normalization.php
@@ -75,7 +75,7 @@ if (isset($_REQUEST['getNewTables3NF'])) {
 
 $header = $response->getHeader();
 $scripts = $header->getScripts();
-$scripts->addFile('normalization.js');
+$scripts->addFile('normalization');
 $scripts->addFile('vendor/jquery/jquery.uitablefilter.js');
 $normalForm = '1nf';
 if (Core::isValid($_REQUEST['normalizeTo'], ['1nf', '2nf', '3nf'])) {
diff --git a/package.json b/package.json
index 90964803a8..41a4ee173e 100644
--- a/package.json
+++ b/package.json
@@ -17,13 +17,13 @@
     "jquery": "3.3.1",
     "jquery-migrate": "3.0.0",
     "jquery-mousewheel": "3.1.13",
-    "jquery-ui": "^1.12.1",
-    "jquery-ui-bundle": "^1.12.1-migrate",
+    "jquery-ui": "1.12.1",
+    "jquery-ui-bundle": "1.12.1-migrate",
     "jquery-ui-timepicker-addon": "1.6.3",
     "jquery-validation": "1.17.0",
     "jquery.event.drag": "2.2.2",
     "js-cookie": "2.2.0",
-    "sprintf-js": "^1.1.1",
+    "sprintf-js": "1.1.1",
     "tracekit": "0.4.5",
     "updated-jqplot": "1.0.9-2",
     "zxcvbn": "4.4.2"
@@ -39,9 +39,9 @@
     "eslint": "^4.9.0",
     "jsdoc": "^3.5.5",
     "minami": "^1.2.3",
-    "webpack": "^4.8.3",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^2.1.3",
-    "webpack-dev-server": "^3.1.4"
+    "webpack": "4.8.3",
+    "webpack-bundle-analyzer": "2.13.1",
+    "webpack-cli": "2.1.3",
+    "webpack-dev-server": "3.1.4"
   }
 }