public inbox for [email protected]  
help / color / mirror / Atom feed
From: Aditya Toshniwal <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin4][RM3294] User need to reset the layout to see the changed preferences parameters
Date: Fri, 29 Jun 2018 19:44:46 +0530
Message-ID: <CAM9w-_=wmMOF7dsMGh6rTQJModYFcd18Z8UuGi-qXEhDedZsBw@mail.gmail.com> (raw)
In-Reply-To: <CAM9w-_kDJSvVFf84Ery7FsW31hsx+Ch_yNzsMoFQX1kYOs-qbw@mail.gmail.com>
References: <CAM9w-_nZikTmx0JkrDyev3Z8qk26MskoEF2=N1T2-Ji-mK8Q-Q@mail.gmail.com>
	<CANxoLDfCm1Y=Z_8Z4uM8FT3eWfvni+kgcQNMfzyRdJfLcQTb6Q@mail.gmail.com>
	<CAM9w-_kDJSvVFf84Ery7FsW31hsx+Ch_yNzsMoFQX1kYOs-qbw@mail.gmail.com>

Hi Hackers,

Attached is the updated patch.

On Fri, Jun 29, 2018 at 4:46 PM, Aditya Toshniwal <
[email protected]> wrote:

> Hi Akshay,
>
> On Fri, Jun 29, 2018 at 3:42 PM, Akshay Joshi <
> [email protected]> wrote:
>
>> Hi Aditya
>>
>> I have applied your patch and run pgAdmin4. I have found following two
>> issue in the browser:
>>
>>    - Found error while open Preferences dialog. Refer
>>    Open_Preferences_Dialog.png
>>
>> ​This error occurs even with the latest pull without changes.​
>
>
>>
>>    - Set the preferences setting "Open in new browser tab" to True and
>>    open the query tool. Refer "Open_In_New_Broswer.png".
>>
>> ​Will look into this.​
>
>
>> I haven't review the code.
>>
>> On Thu, Jun 28, 2018 at 8:04 PM, Aditya Toshniwal <
>> [email protected]> wrote:
>>
>>> Hi Hackers,
>>>
>>> Attached is the patch for making preferences realtime and applying
>>> without reseting the layout. Please note, the patch is only for one module
>>> - SQL Editor and is the first part for the RM. There are lot of changes to
>>> be done to cover all and hence sending in parts. This will not affect/break
>>> existing code. Further patches will cover other modules.
>>>
>>> Highlights of this patch include:
>>> - Changes will affect SQL Editors in Create dialog boxes, SQL tab of the
>>> main screen, Query tool, History entries in the query tool, Query tool
>>> opened in New Tab/Window
>>> - All the components of SQL editor will refer to single source of
>>> preferences which is cached in the Browser object. All other redundant ajax
>>> get preference calls are removed.
>>> - SQL editor will not refer template JS variables anymore, once all the
>>> references are removed the template variables will also be removed.
>>> - Code refactoring wherever possible.
>>> - Covered JS test cases wherever possible.
>>>
>>> Request you to kindly review.
>>>
>>> --
>>> Thanks and Regards,
>>> Aditya Toshniwal
>>> Software Engineer | EnterpriseDB Software Solutions | Pune
>>> "Don't Complain about Heat, Plant a tree"
>>>
>>
>>
>>
>> --
>> *Akshay Joshi*
>>
>> *Sr. Software Architect *
>>
>>
>>
>> *Phone: +91 20-3058-9517Mobile: +91 976-788-8246*
>>
>
>
>
> --
> Thanks and Regards,
> Aditya Toshniwal
> Software Engineer | EnterpriseDB Software Solutions | Pune
> "Don't Complain about Heat, Plant a tree"
>



-- 
Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB Software Solutions | Pune
"Don't Complain about Heat, Plant a tree"


Attachments:

  [application/octet-stream] 0001-RM3294.patch (106.9K, 3-0001-RM3294.patch)
  download | inline diff:
diff --git a/web/pgadmin/browser/__init__.py b/web/pgadmin/browser/__init__.py
index 3741d9d3..fb1eb7db 100644
--- a/web/pgadmin/browser/__init__.py
+++ b/web/pgadmin/browser/__init__.py
@@ -680,17 +680,6 @@ def browser_css():
     """Render and return CSS snippets from the nodes and modules."""
     snippets = []
 
-    # Get configurable options
-    prefs = Preferences.module('sqleditor')
-
-    sql_font_size_pref = prefs.preference('sql_font_size')
-    sql_font_size = round(float(sql_font_size_pref.get()), 2)
-
-    if sql_font_size != 0:
-        snippets.append(
-            '.CodeMirror { font-size: %sem; }' % str(sql_font_size)
-        )
-
     for submodule in blueprint.submodules:
         snippets.extend(submodule.csssnippets)
     return make_response(
diff --git a/web/pgadmin/browser/static/css/browser.css b/web/pgadmin/browser/static/css/browser.css
index 3ba330d3..1b2e06e7 100644
--- a/web/pgadmin/browser/static/css/browser.css
+++ b/web/pgadmin/browser/static/css/browser.css
@@ -1,3 +1,6 @@
+:root {
+  --codemirror-font-size : 1em;
+}
 /* Styles for the main browser */
 .browser-pane-container {
     position: absolute;
@@ -66,3 +69,8 @@ samp,
 .pg-login-icon {
   font-size: 16px;
 }
+
+.CodeMirror {
+  font-size: var(--codemirror-font-size, '1em');
+}
+
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index b26738cf..c330a871 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -2,8 +2,8 @@ define('pgadmin.browser', [
   'sources/tree/tree',
   'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore', 'underscore.string',
   'bootstrap', 'sources/pgadmin', 'pgadmin.alertifyjs', 'bundled_codemirror',
-  'sources/check_node_visibility', 'sources/modify_animation', 'pgadmin.browser.utils', 'wcdocker',
-  'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree',
+  'sources/check_node_visibility', 'pgadmin.browser.utils', 'wcdocker',
+  'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree', 'pgadmin.browser.preferences',
   'pgadmin.browser.messages',
   'pgadmin.browser.menu', 'pgadmin.browser.panel',
   'pgadmin.browser.error', 'pgadmin.browser.frame',
@@ -13,7 +13,7 @@ define('pgadmin.browser', [
 ], function(
   tree,
   gettext, url_for, require, $, _, S, Bootstrap, pgAdmin, Alertify,
-  codemirror, checkNodeVisibility, modifyAnimation
+  codemirror, checkNodeVisibility
 ) {
   window.jQuery = window.$ = $;
   // Some scripts do export their object in the window only.
@@ -342,7 +342,7 @@ define('pgadmin.browser', [
 
       // Cache preferences
       obj.cache_preferences();
-      this.add_panels();
+      obj.add_panels();
       // Initialize the Docker
       obj.docker = new wcDocker(
         '#dockerContainer', {
@@ -400,11 +400,22 @@ define('pgadmin.browser', [
           mode: 'text/x-pgsql',
           readOnly: true,
           extraKeys: pgAdmin.Browser.editor_shortcut_keys,
-          tabSize: pgAdmin.Browser.editor_options.tabSize,
-          lineWrapping: pgAdmin.Browser.editor_options.wrapCode,
-          autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets,
-          matchBrackets: pgAdmin.Browser.editor_options.brace_matching,
         });
+      /* Cache may take time to load for the first time
+       * Reflect the changes once cache is available
+       */
+      let cacheIntervalId = setInterval(()=> {
+        let sqlEditPreferences = obj.get_preferences_for_module('sqleditor');
+        if(sqlEditPreferences) {
+          clearInterval(cacheIntervalId);
+          obj.reflectPreferences('sqleditor');
+        }
+      }, 500);
+
+      /* Check for sql editor preference changes */
+      obj.onPreferencesChange('sqleditor', function() {
+        obj.reflectPreferences('sqleditor');
+      });
 
       setTimeout(function() {
         obj.editor.setValue('-- ' + select_object_msg);
@@ -514,10 +525,6 @@ define('pgadmin.browser', [
       };
     },
 
-    // This will hold preference data (Works as a cache object)
-    // Here node will be a key and it's preference data will be value
-    preferences_cache: {},
-
     // Add menus of module/extension at appropriate menu
     add_menus: function(menus) {
       var self = this,
@@ -661,46 +668,6 @@ define('pgadmin.browser', [
         }
       }
     },
-
-    // Get preference value from cache
-    get_preference: function(module, preference) {
-      var self = this;
-      // If cache is not yet loaded then keep checking
-      if(_.size(self.preferences_cache) == 0) {
-        var check_preference = function() {
-            if(_.size(self.preferences_cache) > 0) {
-              clearInterval(preferenceTimeout);
-              return _.findWhere(
-              self.preferences_cache, {'module': module, 'name': preference}
-            );
-            }
-          },
-          preferenceTimeout = setInterval(check_preference, 1000);
-      }
-      else {
-        return _.findWhere(
-          self.preferences_cache, {'module': module, 'name': preference}
-        );
-      }
-    },
-
-    // Get and cache the preferences
-    cache_preferences: function () {
-      var self = this;
-      $.ajax({
-        url: url_for('preferences.get_all'),
-        success: function(res) {
-          self.preferences_cache = res;
-          pgBrowser.keyboardNavigation.init();
-          modifyAnimation.modifyAcitreeAnimation(self);
-          modifyAnimation.modifyAlertifyAnimation(self);
-        },
-        error: function(xhr, status, error) {
-          Alertify.pgRespErrorNotify(xhr, error);
-        },
-      });
-    },
-
     _findTreeChildNode: function(_i, _d, _o) {
       var loaded = _o.t.wasLoad(_i),
         onLoad = function() {
diff --git a/web/pgadmin/browser/static/js/preferences.js b/web/pgadmin/browser/static/js/preferences.js
new file mode 100644
index 00000000..6d80874f
--- /dev/null
+++ b/web/pgadmin/browser/static/js/preferences.js
@@ -0,0 +1,135 @@
+import pgAdmin from 'sources/pgadmin';
+import url_for from 'sources/url_for';
+import * as modifyAnimation from 'sources/modify_animation';
+import $ from 'jquery';
+import * as Alertify from 'pgadmin.alertifyjs';
+import * as SqlEditorUtils from 'sources/sqleditor_utils';
+
+const pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
+
+/* Add cache related methods and properties */
+_.extend(pgBrowser, {
+  /* This will hold preference data (Works as a cache object)
+   * Here node will be a key and it's preference data will be value
+   */
+  preferences_cache: [],
+
+  /* This will be used by poller of new tabs/windows to check
+   * if preference cache is updated in parent/window.opener.
+   */
+  prefcache_version: 0,
+
+  preference_version: function(version) {
+    if(version) {
+      this.prefcache_version = version;
+    }
+    else {
+      return this.prefcache_version;
+    }
+  },
+
+  /* Get cached preference */
+  get_preference: function(module, preference){
+    const self = this;
+    // If cache is not yet loaded then keep checking
+    if(_.size(self.preferences_cache) == 0) {
+      var check_preference = function() {
+          if(self.preferences_cache.length > 0) {
+            clearInterval(preferenceTimeout);
+            return _.findWhere(
+            self.preferences_cache, {'module': module, 'name': preference}
+          );
+          }
+        },
+        preferenceTimeout = setInterval(check_preference, 1000);
+    }
+    else {
+      return _.findWhere(
+        self.preferences_cache, {'module': module, 'name': preference}
+      );
+    }
+  },
+
+  /* Get all the preferences of a module */
+  get_preferences_for_module: function(module) {
+    var self = this;
+    let preferences = {};
+    _.each(
+      _.where(self.preferences_cache, {'module': module}),
+      (preference) => {
+        preferences[preference.name] = preference.value;
+      }
+    );
+    return preferences;
+  },
+
+  /* Get preference of an id, id is numeric */
+  get_preference_for_id : function(id) {
+    var self = this;
+    return _.findWhere(self.preferences_cache, {'id': id});
+  },
+
+  // Get and cache the preferences
+  cache_preferences: function (modulesChanged) {
+    var self = this;
+    return $.ajax({
+      url: url_for('preferences.get_all'),
+      success: function(res) {
+        self.preferences_cache = res;
+        self.preference_version((new Date()).getTime());
+
+        pgBrowser.keyboardNavigation.init();
+        if(pgBrowser.tree) {
+          modifyAnimation.modifyAcitreeAnimation(self);
+          modifyAnimation.modifyAlertifyAnimation(self);
+        }
+
+        /* Once the cache is loaded after changing the preferences,
+         * notify the modules of the change
+         */
+        if(modulesChanged) {
+          _.each(modulesChanged, (val, key)=> {
+            $.event.trigger('prefchange:'+key);
+          });
+        }
+      },
+      error: function(xhr, status, error) {
+        Alertify.pgRespErrorNotify(xhr, error);
+      },
+    });
+  },
+
+  reflectPreferences: function(module) {
+    let obj = this;
+
+    if(module === 'sqleditor' || module === null || typeof module === 'undefined') {
+      let sqlEditPreferences = obj.get_preferences_for_module('sqleditor');
+
+      $(obj.editor.getWrapperElement()).css(
+        'font-size',SqlEditorUtils.calcFontSize(sqlEditPreferences.sql_font_size)
+      );
+      obj.editor.setOption('tabSize', sqlEditPreferences.tab_size);
+      obj.editor.setOption('lineWrapping', sqlEditPreferences.wrap_code);
+      obj.editor.setOption('autoCloseBrackets', sqlEditPreferences.insert_pair_brackets);
+      obj.editor.setOption('matchBrackets', sqlEditPreferences.brace_matching);
+      obj.editor.refresh();
+    }
+  },
+
+  onPreferencesChange: function(module, eventHandler) {
+    window.parent.$(parent.document).on('prefchange:'+module, function(event) {
+      /* If a sqleditor is closed, event handler will be called
+       * but the window.top will be null. Unbind the event handler
+       */
+      if(window.top === null) {
+        window.$(document).off(event);
+      }
+      else {
+        eventHandler(event);
+      }
+    });
+  },
+
+});
+
+export {pgBrowser};
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index cdbda0cd..7f21f80c 100644
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -439,8 +439,20 @@ define('pgadmin.preferences', [
 
             if (e.button.text == gettext('OK')) {
               preferences.updateAll();
+
+              /* Find the modules changed */
+              let modulesChanged = {};
+              _.each(changed, (val, key)=> {
+                let pref = pgBrowser.get_preference_for_id(Number(key));
+                if(!modulesChanged[pref.module]) {
+                  modulesChanged[pref.module] = true;
+                }
+              });
+
               // Refresh preferences cache
-              setTimeout(pgBrowser.cache_preferences(), 2000);
+              setTimeout(()=> {
+                pgBrowser.cache_preferences(modulesChanged);
+              }, 500);
             }
           },
           build: function() {
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index c7b98496..7096ee7b 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1,10 +1,11 @@
 define([
   'sources/gettext', 'underscore', 'underscore.string', 'jquery',
-  'backbone', 'backform', 'backgrid', 'codemirror', 'spectrum',
-  'pgadmin.backgrid', 'select2',
-], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror) {
+  'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils',
+  'spectrum', 'pgadmin.backgrid', 'select2',
+], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror, SqlEditorUtils) {
 
-  var pgAdmin = (window.pgAdmin = window.pgAdmin || {});
+  var pgAdmin = (window.pgAdmin = window.pgAdmin || {}),
+    pgBrowser = pgAdmin.Browser;
 
   pgAdmin.editableCell = function() {
     if (this.attributes && !_.isUndefined(this.attributes.disabled) &&
@@ -1259,8 +1260,7 @@ define([
       var subnode = data.subnode.schema ? data.subnode : data.subnode.prototype,
         gridSchema = Backform.generateGridColumnsFromModel(
           data.node_info, subnode, this.field.get('mode'), data.columns, data.schema_node
-        ),
-        pgBrowser = window.pgAdmin.Browser;
+        );
 
       // Clean up existing grid if any (in case of re-render)
       if (self.grid) {
@@ -1428,6 +1428,23 @@ define([
     getValueFromDOM: function() {
       return this.formatter.toRaw(this.$el.find('textarea').val(), this.model);
     },
+
+    reflectPreferences: function() {
+      var self = this;
+      /* self.sqlCtrl is null when SQL tab is not active */
+      if(self.sqlCtrl) {
+        let sqlEditPreferences = pgAdmin.Browser.get_preferences_for_module('sqleditor');
+
+        $(self.sqlCtrl.getWrapperElement()).css(
+          'font-size',SqlEditorUtils.calcFontSize(sqlEditPreferences.sql_font_size)
+        );
+        self.sqlCtrl.setOption('tabSize', sqlEditPreferences.tab_size);
+        self.sqlCtrl.setOption('lineWrapping', sqlEditPreferences.wrap_code);
+        self.sqlCtrl.setOption('autoCloseBrackets', sqlEditPreferences.insert_pair_brackets);
+        self.sqlCtrl.setOption('matchBrackets', sqlEditPreferences.brace_matching);
+        self.sqlCtrl.refresh();
+      }
+    },
     render: function() {
       if (this.sqlCtrl) {
         this.sqlCtrl.toTextArea();
@@ -1446,12 +1463,16 @@ define([
           mode: 'text/x-pgsql',
           readOnly: true,
           extraKeys: pgAdmin.Browser.editor_shortcut_keys,
-          tabSize: pgAdmin.Browser.editor_options.tabSize,
-          lineWrapping: pgAdmin.Browser.editor_options.wrapCode,
-          autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets,
-          matchBrackets: pgAdmin.Browser.editor_options.brace_matching,
         });
 
+      this.reflectPreferences();
+
+      /* Check for sql editor preference changes */
+      let self = this;
+      pgBrowser.onPreferencesChange('sqleditor', function() {
+        self.reflectPreferences();
+      });
+
       /*
        * We will listen to the tab change event to check, if the SQL tab has
        * been clicked or, not.
@@ -1571,7 +1592,6 @@ define([
   ) {
     var proto = (Model && Model.prototype) || Model,
       schema = subschema || (proto && proto.schema),
-      pgBrowser = window.pgAdmin.Browser,
       fields = [],
       groupInfo = {};
 
@@ -2051,6 +2071,25 @@ define([
       return this.sqlCtrl.getValue();
     },
 
+    reflectPreferences: function() {
+      var self = this;
+      /* self.sqlCtrl is null when Definition tab is not active */
+      if(self.sqlCtrl) {
+        let sqlEditPreferences = pgAdmin.Browser.get_preferences_for_module('sqleditor');
+
+        $(self.sqlCtrl.getWrapperElement()).css(
+          'font-size',SqlEditorUtils.calcFontSize(sqlEditPreferences.sql_font_size)
+        );
+        self.sqlCtrl.setOption('indentWithTabs', !sqlEditPreferences.use_spaces);
+        self.sqlCtrl.setOption('indentUnit', sqlEditPreferences.tab_size);
+        self.sqlCtrl.setOption('tabSize', sqlEditPreferences.tab_size);
+        self.sqlCtrl.setOption('lineWrapping', sqlEditPreferences.wrap_code);
+        self.sqlCtrl.setOption('autoCloseBrackets', sqlEditPreferences.insert_pair_brackets);
+        self.sqlCtrl.setOption('matchBrackets', sqlEditPreferences.brace_matching);
+        self.sqlCtrl.refresh();
+      }
+    },
+
     render: function() {
       // Clean up the existing sql control
       if (this.sqlCtrl) {
@@ -2093,14 +2132,14 @@ define([
           lineNumbers: true,
           mode: 'text/x-pgsql',
           extraKeys: pgAdmin.Browser.editor_shortcut_keys,
-          indentWithTabs: pgAdmin.Browser.editor_options.indent_with_tabs,
-          indentUnit: pgAdmin.Browser.editor_options.tabSize,
-          tabSize: pgAdmin.Browser.editor_options.tabSize,
-          lineWrapping: pgAdmin.Browser.editor_options.wrapCode,
-          autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets,
-          matchBrackets: pgAdmin.Browser.editor_options.brace_matching,
         });
 
+      self.reflectPreferences();
+      /* Check for sql editor preference changes */
+      pgBrowser.onPreferencesChange('sqleditor', function() {
+        self.reflectPreferences();
+      });
+
       // Disable editor
       if (isDisabled) {
         // set read only mode to true instead of 'nocursor', and hide cursor using a class so that copying is enabled
diff --git a/web/pgadmin/static/js/keyboard_shortcuts.js b/web/pgadmin/static/js/keyboard_shortcuts.js
index 1fe07e9b..57d8a303 100644
--- a/web/pgadmin/static/js/keyboard_shortcuts.js
+++ b/web/pgadmin/static/js/keyboard_shortcuts.js
@@ -8,6 +8,7 @@
 //////////////////////////////////////////////////////////////////////////
 
 import $ from 'jquery';
+import gettext from 'sources/gettext';
 
 const PERIOD_KEY = 190,
   FWD_SLASH_KEY = 191,
@@ -49,6 +50,52 @@ function isCtrlAltBoth(event) {
   return event.ctrlKey && event.altKey && !event.shiftKey;
 }
 
+/* Returns the key of shortcut */
+function shortcut_key(shortcut) {
+  let key = '';
+  if(shortcut['key'] && shortcut['key']['char']) {
+    key = shortcut['key']['char'].toUpperCase();
+  }
+  return key;
+}
+
+/* Converts shortcut object to title representation
+ * Shortcut object is browser.get_preference().value
+ */
+function shortcut_title(title, shortcut) {
+  let text_representation = '';
+
+  if (typeof shortcut === 'undefined' || shortcut === null) {
+    return text_representation;
+  }
+  if(shortcut['alt']) {
+    text_representation = gettext('Alt') + '+';
+  }
+  if(shortcut['shift']) {
+    text_representation += gettext('Shift') + '+';
+  }
+  if(shortcut['control']) {
+    text_representation += gettext('Ctrl') + '+';
+  }
+  text_representation += shortcut_key(shortcut);
+
+  return gettext('%(title)s (%(text_representation)s)',{
+    'title': title,
+    'text_representation': text_representation,
+  });
+}
+
+/* Returns the key char of shortcut
+ * shortcut object is browser.get_preference().value
+ */
+function shortcut_accesskey_title(title, shortcut) {
+  return gettext('%(title)s (accesskey + %(key)s)',{
+    'title': title,
+    'key': shortcut_key(shortcut),
+  });
+}
+
+
 function _stopEventPropagation(event) {
   event.cancelBubble = true;
   event.preventDefault();
@@ -124,19 +171,19 @@ function getInnerPanel($el, direction) {
 
 /* Query tool: Keyboard Shortcuts handling */
 function keyboardShortcutsQueryTool(
-  sqlEditorController, keyboardShortcutConfig, queryToolActions, event
+  sqlEditorController, queryToolActions, event
 ) {
   if (sqlEditorController.isQueryRunning()) {
     return;
   }
   let keyCode = event.which || event.keyCode, panel_id;
-  let executeKeys = keyboardShortcutConfig['execute'];
-  let explainKeys = keyboardShortcutConfig['explain'];
-  let explainAnalyzeKeys = keyboardShortcutConfig['explain_analyze'];
-  let downloadCsvKeys = keyboardShortcutConfig['download_csv'];
-  let nextPanelKeys = keyboardShortcutConfig['move_next'];
-  let previousPanelKeys = keyboardShortcutConfig['move_previous'];
-  let toggleCaseKeys = keyboardShortcutConfig['toggle_case'];
+  let executeKeys = sqlEditorController.preferences.execute_query;
+  let explainKeys = sqlEditorController.preferences.explain_query;
+  let explainAnalyzeKeys = sqlEditorController.preferences.explain_analyze_query;
+  let downloadCsvKeys = sqlEditorController.preferences.download_csv;
+  let nextPanelKeys = sqlEditorController.preferences.move_next;
+  let previousPanelKeys = sqlEditorController.preferences.move_previous;
+  let toggleCaseKeys = sqlEditorController.preferences.toggle_case;
 
   if (this.validateShortcutKeys(executeKeys, event)) {
     this._stopEventPropagation(event);
@@ -245,4 +292,7 @@ module.exports = {
   isAltShiftBoth: isAltShiftBoth,
   isCtrlShiftBoth: isCtrlShiftBoth,
   isCtrlAltBoth: isCtrlAltBoth,
+  shortcut_key : shortcut_key,
+  shortcut_title : shortcut_title,
+  shortcut_accesskey_title : shortcut_accesskey_title,
 };
diff --git a/web/pgadmin/static/js/sqleditor/query_tool_actions.js b/web/pgadmin/static/js/sqleditor/query_tool_actions.js
index 411c6ed5..6cbbce0f 100644
--- a/web/pgadmin/static/js/sqleditor/query_tool_actions.js
+++ b/web/pgadmin/static/js/sqleditor/query_tool_actions.js
@@ -119,58 +119,6 @@ let queryToolActions = {
     window.top.document.activeElement.blur();
   },
 
-  getKeyboardShortcuts: function (sqlEditorController) {
-    let executeQueryPref = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'execute_query');
-    let explainQueryPref = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'explain_query');
-    let explainAnalyzeQueryPref = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'explain_analyze_query');
-    let downloadCsvPref = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'download_csv');
-    let nextPanelPerf = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'move_next');
-    let previousPanelPerf = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'move_previous');
-    let toggleCasePerf = window.top.pgAdmin.Browser.get_preference(
-      'sqleditor', 'toggle_case');
-
-    if(!executeQueryPref && sqlEditorController.handler.is_new_browser_tab) {
-      executeQueryPref = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'execute_query'
-      ),
-      explainQueryPref = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'explain_query'
-      ),
-      explainAnalyzeQueryPref = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'explain_analyze_query'
-      ),
-      downloadCsvPref = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'download_csv'
-      ),
-      nextPanelPerf = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'move_next'
-      ),
-      previousPanelPerf = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'move_previous'
-      ),
-      toggleCasePerf = window.opener.pgAdmin.Browser.get_preference(
-        'sqleditor', 'toggle_case'
-      );
-    }
-
-    return {
-      'execute': executeQueryPref.value,
-      'explain': explainQueryPref.value,
-      'explain_analyze': explainAnalyzeQueryPref.value,
-      'download_csv': downloadCsvPref.value,
-      'move_next': nextPanelPerf.value,
-      'move_previous': previousPanelPerf.value,
-      'toggle_case': toggleCasePerf.value,
-    };
-
-  },
-
   toggleCaseOfSelectedText: function (sqlEditorController) {
     let codeMirrorObj = sqlEditorController.gridView.query_tool_obj;
     let selectedText = codeMirrorObj.getSelection();
diff --git a/web/pgadmin/static/js/sqleditor/query_tool_preferences.js b/web/pgadmin/static/js/sqleditor/query_tool_preferences.js
new file mode 100644
index 00000000..3ee2f0bc
--- /dev/null
+++ b/web/pgadmin/static/js/sqleditor/query_tool_preferences.js
@@ -0,0 +1,179 @@
+import {shortcut_key, shortcut_accesskey_title, shortcut_title}
+  from 'sources/keyboard_shortcuts';
+import * as SqlEditorUtils from 'sources/sqleditor_utils';
+import $ from 'jquery';
+
+function reflectPreferences(sqlEditor) {
+  let $el = sqlEditor.$el,
+    preferences = sqlEditor.preferences;
+
+  if(sqlEditor.handler.slickgrid) {
+    sqlEditor.handler.slickgrid.CSVOptions = {
+      quoting: sqlEditor.preferences.results_grid_quoting,
+      quote_char: sqlEditor.preferences.results_grid_quote_char,
+      field_separator: sqlEditor.preferences.results_grid_field_separator,
+    };
+  }
+
+  /* Accessed using accesskey direct w/o ctrl,atl,shift */
+  $el.find('#btn-load-file')
+    .attr('title', shortcut_accesskey_title('Open File',preferences.btn_open_file))
+    .attr('accesskey', shortcut_key(preferences.btn_open_file));
+
+  $el.find('#btn-save')
+    .attr('title', shortcut_accesskey_title('Save File',preferences.btn_save_file))
+    .attr('accesskey', shortcut_key(preferences.btn_save_file));
+
+  $el.find('#btn-find-menu-dropdown')
+    .attr('title', shortcut_accesskey_title('Find',preferences.btn_find_options))
+    .attr('accesskey', shortcut_key(preferences.btn_find_options));
+
+  $el.find('#btn-copy-row')
+    .attr('title', shortcut_accesskey_title('Copy',preferences.btn_copy_row))
+    .attr('accesskey', shortcut_key(preferences.btn_copy_row));
+
+  $el.find('#btn-paste-row')
+    .attr('title', shortcut_accesskey_title('Paste',preferences.btn_paste_row))
+    .attr('accesskey', shortcut_key(preferences.btn_paste_row));
+
+  $el.find('#btn-delete-row')
+    .attr('title', shortcut_accesskey_title('Delete',preferences.btn_delete_row))
+    .attr('accesskey', shortcut_key(preferences.btn_delete_row));
+
+  $el.find('#btn-filter')
+    .attr('title', shortcut_accesskey_title('Filter',preferences.btn_filter_dialog))
+    .attr('accesskey', shortcut_key(preferences.btn_filter_dialog));
+
+  $el.find('#btn-filter-dropdown')
+    .attr('title', shortcut_accesskey_title('Filter options',preferences.btn_filter_options))
+    .attr('accesskey', shortcut_key(preferences.btn_filter_options));
+
+  $el.find('#btn-rows-limit')
+    .attr('title', shortcut_accesskey_title('Rows limit',preferences.btn_rows_limit))
+    .attr('accesskey', shortcut_key(preferences.btn_rows_limit));
+
+  $el.find('#btn-query-dropdown')
+    .attr('title', shortcut_accesskey_title('Execute options',preferences.btn_execute_options))
+    .attr('accesskey', shortcut_key(preferences.btn_execute_options));
+
+  $el.find('#btn-cancel-query')
+    .attr('title', shortcut_accesskey_title('Cancel query',preferences.btn_cancel_query))
+    .attr('accesskey', shortcut_key(preferences.btn_cancel_query));
+
+  $el.find('#btn-clear-dropdown')
+    .attr('title', shortcut_accesskey_title('Clear',preferences.btn_clear_options))
+    .attr('accesskey', shortcut_key(preferences.btn_clear_options));
+
+  $el.find('#btn-conn-status')
+    .attr('accesskey', shortcut_key(preferences.btn_conn_status))
+    .find('i')
+    .attr('title',
+      shortcut_accesskey_title('Connection status (click for details)',
+                            preferences.btn_conn_status));
+
+  /* Accessed using ctrl,atl,shift and key */
+  $el.find('#btn-flash')
+    .attr('title',
+      shortcut_title('Execute/Refresh',preferences.execute_query));
+
+  $el.find('#btn-flash-menu span')
+    .text(shortcut_title('Execute/Refresh',preferences.execute_query));
+
+  $el.find('#btn-explain span')
+    .text(shortcut_title('Explain',preferences.explain_query));
+
+  $el.find('#btn-explain-analyze span')
+    .text(shortcut_title('Explain Analyze',preferences.explain_analyze_query));
+
+  $el.find('#btn-download')
+    .attr('title',
+      shortcut_title('Download as CSV',preferences.download_csv));
+
+  /* Set Auto-commit and auto-rollback on query editor */
+  if (preferences.auto_commit) {
+    $el.find('.auto-commit').removeClass('visibility-hidden');
+  }
+  else {
+    $el.find('.auto-commit').addClass('visibility-hidden');
+  }
+  if (preferences.auto_rollback) {
+    $el.find('.auto-rollback').removeClass('visibility-hidden');
+  }
+  else {
+    $el.find('.auto-rollback').addClass('visibility-hidden');
+  }
+
+  /* Set explain options on query editor */
+  if (preferences.explain_verbose){
+    $el.find('.explain-verbose').removeClass('visibility-hidden');
+  }
+  else {
+    $el.find('.explain-verbose').addClass('visibility-hidden');
+  }
+
+  if (preferences.explain_costs){
+    $el.find('.explain-costs').removeClass('visibility-hidden');
+  }
+  else {
+    $el.find('.explain-costs').addClass('visibility-hidden');
+  }
+
+  if (preferences.explain_buffers){
+    $el.find('.explain-buffers').removeClass('visibility-hidden');
+  }
+  else {
+    $el.find('.explain-buffers').addClass('visibility-hidden');
+  }
+
+  if (preferences.explain_timing) {
+    $el.find('.explain-timing').removeClass('visibility-hidden');
+  }
+  else {
+    $el.find('.explain-timing').addClass('visibility-hidden');
+  }
+
+  /* Connection status check */
+  /* remove the status checker if present */
+  if(sqlEditor.connIntervalId != null) {
+    clearInterval(sqlEditor.connIntervalId);
+    sqlEditor.connIntervalId = null;
+  }
+  if (preferences.connection_status) {
+    let $conn_status = $el.find('#btn-conn-status'),
+      $status_el = $conn_status.find('i');
+    $conn_status.popover();
+
+    $conn_status.removeClass('connection-status-hide');
+    $el.find('.editor-title').addClass('editor-title-connection');
+
+    // To set initial connection
+    SqlEditorUtils.fetchConnectionStatus(sqlEditor.handler, $conn_status, $status_el);
+
+    // Calling it again in specified interval
+    sqlEditor.connIntervalId =  setInterval(
+        SqlEditorUtils.fetchConnectionStatus.bind(null, sqlEditor.handler, $conn_status, $status_el),
+        preferences.connection_status_fetch_time * 1000
+    );
+  }
+  else {
+    $el.find('#btn-conn-status').addClass('connection-status-hide');
+    $el.find('.editor-title').removeClass('editor-title-connection');
+  }
+
+  /* Code Mirror Preferences */
+  let sql_font_size = SqlEditorUtils.calcFontSize(preferences.sql_font_size);
+  $(sqlEditor.query_tool_obj.getWrapperElement()).css('font-size', sql_font_size);
+
+  sqlEditor.query_tool_obj.setOption('indentWithTabs', !preferences.use_spaces);
+  sqlEditor.query_tool_obj.setOption('indentUnit', preferences.tab_size);
+  sqlEditor.query_tool_obj.setOption('tabSize', preferences.tab_size);
+  sqlEditor.query_tool_obj.setOption('lineWrapping', preferences.wrap_code);
+  sqlEditor.query_tool_obj.setOption('autoCloseBrackets', preferences.insert_pair_brackets);
+  sqlEditor.query_tool_obj.setOption('matchBrackets', preferences.brace_matching);
+  sqlEditor.query_tool_obj.refresh();
+
+  /* Render history to reflect Font size change */
+  sqlEditor.render_history_grid();
+}
+
+export {reflectPreferences};
diff --git a/web/pgadmin/static/js/sqleditor_utils.js b/web/pgadmin/static/js/sqleditor_utils.js
index be41566f..0fff1d95 100644
--- a/web/pgadmin/static/js/sqleditor_utils.js
+++ b/web/pgadmin/static/js/sqleditor_utils.js
@@ -178,24 +178,6 @@ define(['jquery', 'sources/gettext', 'sources/url_for'],
         });
       },
 
-      // This function will update the connection status
-      updateConnectionStatus: function(target, poll_time) {
-        var $el = $(target.gridView.$el.find('.connection_status')),
-          $status_el = $($el.find('.fa-custom'));
-
-        // Apply popover on element
-        $el.popover();
-
-        // To set initial connection statussource$el.popover()
-        sqlEditorUtils.fetchConnectionStatus(target, $el, $status_el);
-
-        // Calling it again in specified interval
-        setInterval(
-          sqlEditorUtils.fetchConnectionStatus.bind(null, target, $el, $status_el),
-          poll_time * 1000
-        );
-      },
-
       // Updates the flag for connection status poll
       updateConnectionStatusFlag: function(status) {
         var $el = $('.connection_status');
@@ -203,6 +185,15 @@ define(['jquery', 'sources/gettext', 'sources/url_for'],
           $el.data('panel-visible', status);
         }
       },
+
+      calcFontSize: function(fontSize) {
+        if(fontSize) {
+          return Number((Math.round(fontSize + 'e+2') + 'e-2')) + 'em';
+        }
+        else {
+          return '0em';
+        }
+      },
     };
     return sqlEditorUtils;
   });
diff --git a/web/pgadmin/static/jsx/history/detail/code_mirror.jsx b/web/pgadmin/static/jsx/history/detail/code_mirror.jsx
index 6e982128..038cc200 100644
--- a/web/pgadmin/static/jsx/history/detail/code_mirror.jsx
+++ b/web/pgadmin/static/jsx/history/detail/code_mirror.jsx
@@ -50,6 +50,11 @@ export default class CodeMirror extends React.Component {
     Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
 
     this.editor.setValue(props.value || '');
+
+    if(props.sqlFontSize) {
+      $(this.editor.getWrapperElement()).css('font-size', props.sqlFontSize);
+    }
+
     this.editor.refresh();
   }
 
diff --git a/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx b/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx
index dce34607..eae55dee 100644
--- a/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx
+++ b/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx
@@ -64,6 +64,7 @@ export default class HistoryDetailQuery extends React.Component {
             mode: 'text/x-pgsql',
             readOnly: true,
           }}
+          sqlFontSize= {this.props.sqlEditorPref.sql_font_size}
         />
       </div>);
   }
@@ -71,4 +72,5 @@ export default class HistoryDetailQuery extends React.Component {
 
 HistoryDetailQuery.propTypes = {
   historyEntry: Shapes.historyDetail,
+  sqlEditorPref: Shapes.sqlEditorPrefObj,
 };
diff --git a/web/pgadmin/static/jsx/history/query_history.jsx b/web/pgadmin/static/jsx/history/query_history.jsx
index 3c07b5bd..8b5ffd2a 100644
--- a/web/pgadmin/static/jsx/history/query_history.jsx
+++ b/web/pgadmin/static/jsx/history/query_history.jsx
@@ -97,13 +97,16 @@ export default class QueryHistory extends React.Component {
           selectedEntry={this.state.selectedEntry}
           onSelectEntry={this.selectHistoryEntry}
         />
-        <QueryHistoryDetail historyEntry={this.state.currentHistoryDetail}/>
+        <QueryHistoryDetail historyEntry={this.state.currentHistoryDetail}
+            sqlEditorPref={this.props.sqlEditorPref}
+        />
       </SplitPane>);
   }
 }
 
 QueryHistory.propTypes = {
   historyCollection: Shapes.historyCollectionClass.isRequired,
+  sqlEditorPref: Shapes.sqlEditorPrefObj,
 };
 
 export {
diff --git a/web/pgadmin/static/jsx/react_shapes.jsx b/web/pgadmin/static/jsx/react_shapes.jsx
index 454ab446..f8948b5f 100644
--- a/web/pgadmin/static/jsx/react_shapes.jsx
+++ b/web/pgadmin/static/jsx/react_shapes.jsx
@@ -25,7 +25,13 @@ let historyCollectionClass =
     onChange: PropTypes.func.isRequired,
   });
 
+let sqlEditorPrefObj =
+  PropTypes.shape({
+    sql_font_size: PropTypes.string.isRequired,
+  });
+
 export default {
   historyDetail,
   historyCollectionClass,
+  sqlEditorPrefObj,
 };
diff --git a/web/pgadmin/tools/datagrid/__init__.py b/web/pgadmin/tools/datagrid/__init__.py
index d3c3bf9c..04e2a683 100644
--- a/web/pgadmin/tools/datagrid/__init__.py
+++ b/web/pgadmin/tools/datagrid/__init__.py
@@ -24,12 +24,9 @@ from pgadmin.utils.ajax import make_json_response, bad_request, \
     internal_server_error
 
 from config import PG_DEFAULT_DRIVER
-from pgadmin.utils.preferences import Preferences
 from pgadmin.model import Server
 from pgadmin.utils.driver import get_driver
 from pgadmin.utils.exception import ConnectionLost, SSHTunnelConnectionLost
-from pgadmin.tools.sqleditor.utils.query_tool_preferences import \
-    get_query_tool_keyboard_shortcuts, get_text_representation_of_shortcut
 
 
 class DataGridModule(PgAdminModule):
@@ -184,13 +181,9 @@ def initialize_datagrid(cmd_type, obj_type, sgid, sid, did, obj_id):
     # Store the grid dictionary into the session variable
     session['gridData'] = sql_grid_data
 
-    pref = Preferences.module('sqleditor')
-    new_browser_tab = pref.preference('new_browser_tab').get()
-
     return make_json_response(
         data={
-            'gridTransId': trans_id,
-            'newBrowserTab': new_browser_tab
+            'gridTransId': trans_id
         }
     )
 
@@ -246,12 +239,6 @@ def panel(trans_id, is_query_tool, editor_title):
     if "linux" in _platform:
         is_linux_platform = True
 
-    pref = Preferences.module('sqleditor')
-    if pref.preference('new_browser_tab').get():
-        new_browser_tab = 'true'
-    else:
-        new_browser_tab = 'false'
-
     # Fetch the server details
     bgcolor = None
     fgcolor = None
@@ -271,16 +258,10 @@ def panel(trans_id, is_query_tool, editor_title):
 
     url_params = dict()
     if is_query_tool == 'true':
-        prompt_save_changes = pref.preference(
-            'prompt_save_query_changes'
-        ).get()
         url_params['sgid'] = trans_obj.sgid
         url_params['sid'] = trans_obj.sid
         url_params['did'] = trans_obj.did
     else:
-        prompt_save_changes = pref.preference(
-            'prompt_save_data_changes'
-        ).get()
         url_params['cmd_type'] = trans_obj.cmd_type
         url_params['obj_type'] = trans_obj.object_type
         url_params['sgid'] = trans_obj.sgid
@@ -288,9 +269,6 @@ def panel(trans_id, is_query_tool, editor_title):
         url_params['did'] = trans_obj.did
         url_params['obj_id'] = trans_obj.obj_id
 
-    display_connection_status = pref.preference('connection_status').get()
-    queryToolShortcuts = get_query_tool_keyboard_shortcuts()
-
     return render_template(
         "datagrid/index.html",
         _=gettext,
@@ -300,19 +278,11 @@ def panel(trans_id, is_query_tool, editor_title):
         script_type_url=sURL,
         is_desktop_mode=app.PGADMIN_RUNTIME,
         is_linux=is_linux_platform,
-        is_new_browser_tab=new_browser_tab,
         server_type=server_type,
         client_platform=user_agent.platform,
         bgcolor=bgcolor,
         fgcolor=fgcolor,
-        # convert python boolean value to equivalent js boolean literal
-        # before passing it to html template.
-        prompt_save_changes='true' if prompt_save_changes else 'false',
-        display_connection_status=display_connection_status,
-        url_params=json.dumps(url_params),
-        key=queryToolShortcuts.get('keys'),
-        shortcuts=queryToolShortcuts.get('shortcuts'),
-        get_shortcut_text=get_text_representation_of_shortcut
+        url_params=json.dumps(url_params)
     )
 
 
@@ -387,13 +357,9 @@ def initialize_query_tool(sgid, sid, did=None):
     # Store the grid dictionary into the session variable
     session['gridData'] = sql_grid_data
 
-    pref = Preferences.module('sqleditor')
-    new_browser_tab = pref.preference('new_browser_tab').get()
-
     return make_json_response(
         data={
-            'gridTransId': trans_id,
-            'newBrowserTab': new_browser_tab
+            'gridTransId': trans_id
         }
     )
 
diff --git a/web/pgadmin/tools/datagrid/static/js/datagrid.js b/web/pgadmin/tools/datagrid/static/js/datagrid.js
index c730b180..4cdddf38 100644
--- a/web/pgadmin/tools/datagrid/static/js/datagrid.js
+++ b/web/pgadmin/tools/datagrid/static/js/datagrid.js
@@ -29,6 +29,23 @@ define('pgadmin.datagrid', [
         this.initialized = true;
         this.title_index = 1;
 
+
+        let self = this;
+        /* Cache may take time to load for the first time
+         * Keep trying till available
+         */
+        let cacheIntervalId = setInterval(function() {
+          if(pgBrowser.preference_version() > 0) {
+            self.preferences = pgBrowser.get_preferences_for_module('sqleditor');
+            clearInterval(cacheIntervalId);
+          }
+        },0);
+
+        pgBrowser.onPreferencesChange('sqleditor', function() {
+          self.preferences = pgBrowser.get_preferences_for_module('sqleditor');
+        });
+
+
         this.spinner_el = '<div class="wcLoadingContainer">'+
               '<div class="wcLoadingBackground"></div>'+
                 '<div class="wcLoadingIconContainer">'+
@@ -279,12 +296,12 @@ define('pgadmin.datagrid', [
                   lineNumbers: true,
                   mode: 'text/x-pgsql',
                   extraKeys: pgBrowser.editor_shortcut_keys,
-                  indentWithTabs: pgAdmin.Browser.editor_options.indent_with_tabs,
-                  indentUnit: pgAdmin.Browser.editor_options.tabSize,
-                  tabSize: pgBrowser.editor_options.tabSize,
-                  lineWrapping: pgAdmin.Browser.editor_options.wrapCode,
-                  autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets,
-                  matchBrackets: pgAdmin.Browser.editor_options.brace_matching,
+                  indentWithTabs: !this.preferences.use_spaces,
+                  indentUnit: this.preferences.tab_size,
+                  tabSize: this.preferences.tab_size,
+                  lineWrapping: this.preferences.wrap_code,
+                  autoCloseBrackets: this.preferences.insert_pair_brackets,
+                  matchBrackets: this.preferences.brace_matching,
                 });
 
                 setTimeout(function() {
@@ -415,13 +432,20 @@ define('pgadmin.datagrid', [
           }
         }
 
-        if (trans_obj.newBrowserTab) {
+        if (self.preferences.new_browser_tab) {
           var newWin = window.open(baseUrl, '_blank');
 
           // add a load listener to the window so that the title gets changed on page load
           newWin.addEventListener('load', function() {
             newWin.document.title = panel_title;
+
+            /* Set the initial version of pref cache the new window is having
+             * This will be used by the poller to compare with window openers
+             * pref cache version
+             */
+            //newWin.pgAdmin.Browser.preference_version(pgBrowser.preference_version());
           });
+
         } else {
           /* On successfully initialization find the dashboard panel,
            * create new panel and add it to the dashboard panel.
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index ad090262..37187e45 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -10,13 +10,6 @@
     .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
     .sql-editor-busy-icon.fa-pulse{-webkit-animation: none;}
     {% endif %}
-
-    {# Note: If we will display connection status then we have to provide some
-    space to display status icon else we can use all the space available #}
-    .editor-title {
-      width:{% if display_connection_status -%} calc(100% - 43px)
-    {% else %} 100% {%- endif %};
-    }
 </style>
 <div id="main-editor_panel">
     <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
@@ -28,14 +21,14 @@
         <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
-                        title="{{ _('Open File') }}{{ _(' (accesskey+{0})'.format(key.open_file.upper())) }}"
-                        accesskey="{{key.open_file}}"
+                        title=""
+                        accesskey=""
                         tabindex="0">
                     <i class="fa fa-folder-open-o" aria-hidden="true"></i>
                 </button>
                 <button id="btn-save" type="button" class="btn btn-default"
-                        title="{{ _('Save') }}{{ _(' (accesskey+{0})'.format(key.save_file.upper())) }}"
-                        accesskey="{{key.save_file}}"
+                        title=""
+                        accesskey=""
                         disabled>
                     <i class="fa fa-floppy-o" aria-hidden="true" tabindex="0"></i>
                 </button>
@@ -63,8 +56,8 @@
                 </button>
                 <button id="btn-find-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        title="{{ _('Find options') }}{{ _(' (accesskey+{0})'.format(key.find_options.upper())) }}"
-                        accesskey="{{key.find_options}}"
+                        title=""
+                        accesskey=""
                         tabindex="0">
                     <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                 </button>
@@ -122,22 +115,22 @@
             </div>
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-copy-row" type="button" class="btn btn-default"
-                        title="{{ _('Copy') }}{{ _(' (accesskey+{0})'.format(key.copy_row.upper())) }}"
-                        accesskey="{{key.copy_row}}"
+                        title=""
+                        accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-files-o" aria-hidden="true"></i>
                 </button>
                 <button id="btn-paste-row" type="button" class="btn btn-default"
-                        title="{{ _('Paste') }}{{ _(' (accesskey+{0})'.format(key.paste_row.upper())) }}"
-                        accesskey="{{key.paste_row}}"
+                        title=""
+                        accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-clipboard" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-delete-row" type="button" class="btn btn-default"
-                        title="{{ _('Delete') }}{{ _(' (accesskey+{0})'.format(key.delete_row.upper())) }}"
-                        accesskey="{{key.delete_row}}"
+                        title=""
+                        accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-trash" aria-hidden="true"></i>
                 </button>
@@ -188,15 +181,15 @@
             </div>
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-filter" type="button" class="btn btn-default"
-                        title="{{ _('Filter') }}{{ _(' (accesskey+{0})'.format(key.filter_dialog.upper())) }}"
-                        accesskey="{{key.filter_dialog}}"
+                        title=""
+                        accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-filter" aria-hidden="true"></i>
                 </button>
                 <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        title="{{ _('Filter options') }}{{ _(' (accesskey+{0})'.format(key.filter_options.upper())) }}"
-                        accesskey="{{key.filter_options}}"
+                        title=""
+                        accesskey=""
                         disabled tabindex="0">
                     <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                 </button>
@@ -210,9 +203,9 @@
                 </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <select class="limit" style="height: 30px; width: 90px;" disabled
-                        title="{{ _('Rows limit') }}{{ _(' (accesskey+{0})'.format(key.rows_limit.upper())) }}"
-                        accesskey="{{key.rows_limit}}"
+                <select id="btn-rows-limit" class="limit" style="height: 30px; width: 90px;" disabled
+                        title=""
+                        accesskey=""
                         tabindex="0">
                     <option value="-1">{{ _('No limit') }}</option>
                     <option value="1000">{{ _('1000 rows') }}</option>
@@ -223,31 +216,31 @@
 
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-default" style="width: 40px;"
-                        title="{{ _('Execute/Refresh') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.execute_query))) }}"
+                        title=""
                         tabindex="0">
                     <i class="fa fa-bolt" aria-hidden="true"></i>
                 </button>
                 <button id="btn-query-dropdown" type="button" class="btn btn-default dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        accesskey="{{key.execute_options}}"
-                        title="{{ _('Execute options') }}{{ _(' (accesskey+{0})'.format(key.execute_options.upper())) }}"
+                        accesskey=""
+                        title=""
                         tabindex="0">
                     <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                     <li>
                         <a id="btn-flash-menu" href="#" tabindex="0">
-                            <span>{{ _('Execute/Refresh') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.execute_query))) }}</span>
+                            <span></span>
                         </a>
                     </li>
                     <li>
                         <a id="btn-explain" href="#" tabindex="0">
-                            <span>{{ _('Explain') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.explain_query))) }}</span>
+                            <span></span>
                         </a>
                     </li>
                     <li>
                         <a id="btn-explain-analyze" href="#" tabindex="0">
-                            <span>{{ _('Explain Analyze') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.explain_analyze_query))) }}</span>
+                            <span></span>
                         </a>
                     </li>
                     <li class="divider"></li>
@@ -295,8 +288,8 @@
                     </li>
                 </ul>
                 <button id="btn-cancel-query" type="button" class="btn btn-default"
-                        title="{{ _('Cancel query') }}{{ _(' (accesskey+{0})'.format(key.cancel_query.upper())) }}"
-                        accesskey="{{key.cancel_query}}"
+                        title=""
+                        accesskey=""
                         tabindex="0" disabled >
                     <i class="fa fa-stop" aria-hidden="true"></i>
                 </button>
@@ -304,8 +297,8 @@
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-clear-dropdown" type="button" class="btn btn-default dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        title="{{ _('Clear') }}{{ _(' (accesskey+{0})'.format(key.clear_options.upper())) }}"
-                        accesskey="{{key.clear_options}}"
+                        title=""
+                        accesskey=""
                         tabindex="0">
                     <i class="fa fa-eraser" aria-hidden="true"></i>
                     <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
@@ -325,7 +318,7 @@
             </div>
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-download" type="button" class="btn btn-default"
-                        title="{{ _('Download as CSV') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.download_csv))) }}"
+                        title=""
                         tabindex="0">
                     <i class="fa fa-download" aria-hidden="true"></i>
                 </button>
@@ -333,21 +326,17 @@
         </div>
 
         <div class="connection_status_wrapper">
-            {% if display_connection_status %}
-            <div style="display: inline-block;"
-                 title="{{ _('Connection status (click for details) (accesskey+{0})'.format(key.conn_status.upper())) }}">
-                <div class="connection_status" data-container="body"
-                     data-toggle="popover" data-placement="bottom"
-                     data-content=""
-                     data-panel-visible="visible"
-                     accesskey="{{key.conn_status}}"
-                     tabindex="0">
-                    <i class="fa-custom fa-query-tool-disconnected" aria-hidden="true"
-                        title="{{ _('Connection status (click for details) (accesskey+{0})'.format(key.conn_status.upper())) }}">
-                    </i>
-                </div>
+            <div id="btn-conn-status"
+                 class="connection_status connection-status-show" data-container="body"
+                 data-toggle="popover" data-placement="bottom"
+                 data-content=""
+                 data-panel-visible="visible"
+                 accesskey=""
+                 tabindex="0">
+                <i class="fa-custom fa-query-tool-disconnected" aria-hidden="true"
+                    title="">
+                </i>
             </div>
-            {% endif %}
             <div class="editor-title"
                  style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% else %}{{ bgcolor or '#2C76B4' }}{% endif %}; color: {{ fgcolor or 'white' }};"></div>
         </div>
@@ -398,9 +387,7 @@
         {{ is_query_tool }},
         "{{ editor_title }}",
         script_type_url,
-        {{ is_new_browser_tab }},
         "{{ server_type }}",
-        {{ prompt_save_changes }},
         {{ url_params|safe}}
     );
 });
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index c54590d3..bd9b3091 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -625,3 +625,20 @@ input.editor-checkbox:focus {
 .data_sorting_dialog .data_sorting {
   padding: 10px 0px;
 }
+
+.editor-title {
+  width:100%;
+}
+
+.editor-title-connection {
+  width:calc(100% - 43px);
+}
+
+.connection-status-show {
+  display: inline-block;
+}
+
+.connection-status-hide {
+  display: none;
+}
+
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index ce397692..f4cfd9dc 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -16,7 +16,7 @@ define('tools.querytool', [
   'sources/sqleditor/query_tool_http_error_handler',
   'sources/sqleditor/filter_dialog',
   'sources/history/index.js',
-  'sources/../jsx/history/query_history',
+  'sourcesjsx/history/query_history',
   'react', 'react-dom',
   'sources/keyboard_shortcuts',
   'sources/sqleditor/query_tool_actions',
@@ -25,6 +25,7 @@ define('tools.querytool', [
   'sources/modify_animation',
   'sources/sqleditor/calculate_query_run_time',
   'sources/sqleditor/call_render_after_poll',
+  'sources/sqleditor/query_tool_preferences',
   'sources/../bundle/slickgrid',
   'pgadmin.file_manager',
   'backgrid.sizeable.columns',
@@ -38,7 +39,7 @@ define('tools.querytool', [
   XCellSelectionModel, setStagedRows, SqlEditorUtils, ExecuteQuery, httpErrorHandler, FilterHandler,
   HistoryBundle, queryHistory, React, ReactDOM,
   keyboardShortcuts, queryToolActions, queryToolNotifications, Datagrid,
-  modifyAnimation, calculateQueryRunTime, callRenderAfterPoll) {
+  modifyAnimation, calculateQueryRunTime, callRenderAfterPoll, queryToolPref) {
   /* Return back, this has been called more than once */
   if (pgAdmin.SqlEditor)
     return pgAdmin.SqlEditor;
@@ -58,6 +59,11 @@ define('tools.querytool', [
       this.$el = opts.el;
       this.handler = opts.handler;
       this.handler['col_size'] = {};
+      let browser = window.opener ?
+              window.opener.pgAdmin.Browser : window.top.pgAdmin.Browser;
+      this.preferences = browser.get_preferences_for_module('sqleditor');
+      this.handler.preferences = this.preferences;
+      this.connIntervalId = null;
     },
 
     // Bind all the events
@@ -117,10 +123,6 @@ define('tools.querytool', [
       var self = this;
 
       $('.editor-title').text(_.unescape(self.editor_title));
-      self.checkConnectionStatus();
-
-      // Fetch and assign the shortcuts to current instance
-      self.keyboardShortcutConfig = queryToolActions.getKeyboardShortcuts(self);
 
       // Updates connection status flag
       self.gain_focus = function() {
@@ -183,13 +185,7 @@ define('tools.querytool', [
         },
         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
         extraKeys: pgBrowser.editor_shortcut_keys,
-        indentWithTabs: pgAdmin.Browser.editor_options.indent_with_tabs,
-        indentUnit: pgAdmin.Browser.editor_options.tabSize,
-        tabSize: pgAdmin.Browser.editor_options.tabSize,
-        lineWrapping: pgAdmin.Browser.editor_options.wrapCode,
         scrollbarStyle: 'simple',
-        autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets,
-        matchBrackets: pgAdmin.Browser.editor_options.brace_matching,
       });
 
       // Refresh Code mirror on SQL panel resize to
@@ -270,32 +266,32 @@ define('tools.querytool', [
       self.render_history_grid();
       queryToolNotifications.renderNotificationsGrid(self.notifications_panel);
 
-      if (!self.handler.is_new_browser_tab) {
+      if (!self.preferences.new_browser_tab) {
         // Listen on the panel closed event and notify user to save modifications.
         _.each(window.top.pgAdmin.Browser.docker.findPanels('frm_datagrid'), function(p) {
           if (p.isVisible()) {
-            if (self.handler.prompt_save_changes) {
-              p.on(wcDocker.EVENT.CLOSING, function() {
-                // Only if we can edit data then perform this check
-                var notify = false,
-                  msg;
-                if (self.handler.can_edit) {
-                  var data_store = self.handler.data_store;
-                  if (data_store && (_.size(data_store.added) ||
-                      _.size(data_store.updated))) {
-                    msg = gettext('The data has changed. Do you want to save changes?');
-                    notify = true;
-                  }
-                } else if (self.handler.is_query_tool && self.handler.is_query_changed) {
-                  msg = gettext('The text has changed. Do you want to save changes?');
+            p.on(wcDocker.EVENT.CLOSING, function() {
+              // Only if we can edit data then perform this check
+              var notify = false,
+                msg;
+              if (self.handler.can_edit
+                  && self.preferences.prompt_save_data_changes) {
+                var data_store = self.handler.data_store;
+                if (data_store && (_.size(data_store.added) ||
+                    _.size(data_store.updated))) {
+                  msg = gettext('The data has changed. Do you want to save changes?');
                   notify = true;
                 }
-                if (notify) {
-                  return self.user_confirmation(p, msg);
-                }
-                return true;
-              });
-            }
+              } else if (self.handler.is_query_tool && self.handler.is_query_changed
+                         && self.preferences.prompt_save_query_changes) {
+                msg = gettext('The text has changed. Do you want to save changes?');
+                notify = true;
+              }
+              if (notify) {
+                return self.user_confirmation(p, msg);
+              }
+              return true;
+            });
 
             // Set focus on query tool of active panel
             p.on(wcDocker.EVENT.GAIN_FOCUS, function() {
@@ -483,33 +479,36 @@ define('tools.querytool', [
           }.bind(ctx),
         };
       });
-    },
 
-    // This function will check the connection status at specific
-    // interval defined by the user in preference
-    checkConnectionStatus: function() {
-      var self = this,
-        preference = window.top.pgAdmin.Browser.get_preference(
-          'sqleditor', 'connection_status_fetch_time'
-        ),
-        display_status = window.top.pgAdmin.Browser.get_preference(
-          'sqleditor', 'connection_status'
-        );
-      if(!preference && self.handler.is_new_browser_tab) {
-        preference = window.opener.pgAdmin.Browser.get_preference(
-          'sqleditor', 'connection_status_fetch_time'
-        );
-        display_status = window.opener.pgAdmin.Browser.get_preference(
-          'sqleditor', 'connection_status'
-        );
-      }
 
-      // Only enable pooling if it is enabled
-      if (display_status && display_status.value) {
-        SqlEditorUtils.updateConnectionStatus(
-          self.handler,
-          preference.value
-        );
+      queryToolPref.reflectPreferences(self);
+      /* Register for preference changed event broadcasted in parent
+       * to reload the shorcuts. As sqleditor is in iFrame of wcDocker
+       * window parent is referred
+       */
+      pgBrowser.onPreferencesChange('sqleditor', function() {
+        let browser = window.opener ?
+                window.opener.pgAdmin.Browser : window.top.pgAdmin.Browser;
+        self.preferences = browser.get_preferences_for_module('sqleditor');
+        self.handler.preferences = self.preferences;
+        queryToolPref.reflectPreferences(self);
+      });
+
+      /* If sql editor is in a new tab, event fired is not available
+       * instead, a poller is set up who will check if the window.opener
+       * prefcache_version is updated. If updated, the new tab will update its
+       * preferences and reflect it
+       */
+      if(self.preferences.new_browser_tab) {
+        setInterval(()=>{
+          if(window.opener.pgAdmin &&
+             pgBrowser.preference_version() < window.opener.pgAdmin.Browser.preference_version())
+          {
+            pgBrowser.preference_version(window.opener.pgAdmin.Browser.preference_version());
+            self.preferences = window.opener.pgAdmin.Browser.get_preferences_for_module('sqleditor');
+            queryToolPref.reflectPreferences(self);
+          }
+        }, 1000);
       }
     },
 
@@ -805,6 +804,11 @@ define('tools.querytool', [
       };
 
       self.handler.slickgrid = grid;
+      self.handler.slickgrid.CSVOptions = {
+        quoting: self.preferences.results_grid_quoting,
+        quote_char: self.preferences.results_grid_quote_char,
+        field_separator: self.preferences.results_grid_field_separator,
+      };
 
       // Listener function to watch selected rows from grid
       if (editor_data.selection) {
@@ -903,29 +907,6 @@ define('tools.querytool', [
             handleQueryOutputKeyboardEvent(event, args);
           });
         } else {
-          var pref_cache = undefined;
-          args.grid.CSVOptions = {};
-
-          if (self.handler.is_new_browser_tab) {
-            pref_cache = window.opener.pgAdmin.Browser.preferences_cache;
-          } else {
-            pref_cache = window.top.pgAdmin.Browser.preferences_cache;
-          }
-
-          // Get CSV options from preferences cache
-          args.grid.CSVOptions.quoting = _.findWhere(pref_cache, {
-            'module': 'sqleditor',
-            'name': 'results_grid_quoting',
-          }).value;
-          args.grid.CSVOptions.quote_char = _.findWhere(pref_cache, {
-            'module': 'sqleditor',
-            'name': 'results_grid_quote_char',
-          }).value;
-          args.grid.CSVOptions.field_separator = _.findWhere(pref_cache, {
-            'module': 'sqleditor',
-            'name': 'results_grid_field_separator',
-          }).value;
-
           handleQueryOutputKeyboardEvent(event, args);
         }
       });
@@ -1196,7 +1177,10 @@ define('tools.querytool', [
     render_history_grid: function() {
       var self = this;
 
-      self.history_collection = new HistoryBundle.HistoryCollection([]);
+      /* Should not reset if function called again */
+      if(!self.history_collection) {
+        self.history_collection = new HistoryBundle.HistoryCollection([]);
+      }
 
       var historyComponent;
       var historyCollectionReactElement = React.createElement(
@@ -1205,9 +1189,13 @@ define('tools.querytool', [
           ref: function(component) {
             historyComponent = component;
           },
+          sqlEditorPref: {
+            sql_font_size: SqlEditorUtils.calcFontSize(this.preferences.sql_font_size),
+          },
         });
       ReactDOM.render(historyCollectionReactElement, $('#history_grid')[0]);
 
+      self.history_panel.off(wcDocker.EVENT.VISIBILITY_CHANGED);
       self.history_panel.on(wcDocker.EVENT.VISIBILITY_CHANGED, function() {
         historyComponent.refocus();
       });
@@ -1416,29 +1404,7 @@ define('tools.querytool', [
 
     // Callback function for copy button click.
     on_copy_row: function() {
-      var self = this,
-        pref_cache = undefined;
-      self.grid.CSVOptions = {};
-
-      if (self.handler.is_new_browser_tab) {
-        pref_cache = window.opener.pgAdmin.Browser.preferences_cache;
-      } else {
-        pref_cache = window.top.pgAdmin.Browser.preferences_cache;
-      }
-
-      // Get CSV options from preferences cache
-      self.grid.CSVOptions.quoting = _.findWhere(pref_cache, {
-        'module': 'sqleditor',
-        'name': 'results_grid_quoting',
-      }).value;
-      self.grid.CSVOptions.quote_char = _.findWhere(pref_cache, {
-        'module': 'sqleditor',
-        'name': 'results_grid_quote_char',
-      }).value;
-      self.grid.CSVOptions.field_separator = _.findWhere(pref_cache, {
-        'module': 'sqleditor',
-        'name': 'results_grid_field_separator',
-      }).value;
+      var self = this;
 
       // Trigger the copy signal to the SqlEditorController class
       self.handler.trigger(
@@ -1708,7 +1674,7 @@ define('tools.querytool', [
     keyAction: function(event) {
       var panel_id, self = this;
       panel_id = keyboardShortcuts.processEventQueryTool(
-        this.handler, this.keyboardShortcutConfig, queryToolActions, event
+        this.handler, queryToolActions, event
       );
 
       // If it return panel id then focus it
@@ -1933,23 +1899,17 @@ define('tools.querytool', [
        * header and loading icon and start execution of the sql query.
        */
       start: function(transId, is_query_tool, editor_title, script_type_url,
-          is_new_browser_tab, server_type, prompt_save_changes, url_params
+        server_type, url_params
       ) {
         var self = this;
 
         self.is_query_tool = is_query_tool;
         self.rows_affected = 0;
         self.marked_line_no = 0;
-        self.explain_verbose = false;
-        self.explain_costs = false;
-        self.explain_buffers = false;
-        self.explain_timing = false;
-        self.is_new_browser_tab = is_new_browser_tab;
         self.has_more_rows = false;
         self.fetching_rows = false;
         self.close_on_save = false;
         self.server_type = server_type;
-        self.prompt_save_changes = prompt_save_changes;
         self.url_params = url_params;
         self.script_type_url = script_type_url;
 
@@ -2022,7 +1982,6 @@ define('tools.querytool', [
         // Listen to the codemirror on text change event
         // only in query editor tool
         if (self.is_query_tool) {
-          self.get_preferences();
           self.gridView.query_tool_obj.on('change', self._on_query_change.bind(self));
         }
 
@@ -2830,7 +2789,7 @@ define('tools.querytool', [
       setTitle: function(title, unsafe) {
         var self = this;
 
-        if (self.is_new_browser_tab) {
+        if (self.preferences.new_browser_tab) {
           window.document.title = title;
         } else {
           _.each(window.top.pgAdmin.Browser.docker.findPanels('frm_datagrid'), function(p) {
@@ -2992,7 +2951,7 @@ define('tools.querytool', [
             var title = self.gridView.current_file.replace(/^.*[\\\/]/g, '') + ' *';
             self.setTitle(title, true);
           } else {
-            if (self.is_new_browser_tab) {
+            if (self.preferences.new_browser_tab) {
               title = window.document.title + ' *';
             } else {
               // Find the title of the visible panel
@@ -3570,22 +3529,8 @@ define('tools.querytool', [
         });
       },
 
-      // This function will toggle "verbose" option in explain
-      _explain_verbose: function() {
-        var self = this;
-        if ($('.explain-verbose').hasClass('visibility-hidden') === true) {
-          $('.explain-verbose').removeClass('visibility-hidden');
-          self.explain_verbose = true;
-        } else {
-          $('.explain-verbose').addClass('visibility-hidden');
-          self.explain_verbose = false;
-        }
-
-        // Set this option in preferences
-        var data = {
-          'explain_verbose': self.explain_verbose,
-        };
-
+      explainPreferenceUpdate:  function(subItem, data, caller) {
+        let self = this;
         $.ajax({
           url: url_for('sqleditor.query_tool_preferences', {
             'trans_id': self.transId,
@@ -3596,133 +3541,94 @@ define('tools.querytool', [
           success: function(res) {
             if (res.success == undefined || !res.success) {
               alertify.alert(gettext('Explain options error'),
-                gettext('Error occurred while setting verbose option in explain.')
+                gettext('Error occurred while setting %(subItem)s option in explain.',
+                        {subItem : subItem})
               );
             }
           },
           error: function(e) {
             let msg = httpErrorHandler.handleQueryToolAjaxError(
-              pgAdmin, self, e, '_explain_verbose', [], true
+              pgAdmin, self, e, caller, [], true
             );
             alertify.alert(gettext('Explain options error'), msg);
           },
         });
       },
 
+      // This function will toggle "verbose" option in explain
+      _explain_verbose: function() {
+        var self = this;
+        let explain_verbose = false;
+        if ($('.explain-verbose').hasClass('visibility-hidden') === true) {
+          $('.explain-verbose').removeClass('visibility-hidden');
+          explain_verbose = true;
+        } else {
+          $('.explain-verbose').addClass('visibility-hidden');
+          explain_verbose = false;
+        }
+
+        self.explainPreferenceUpdate(
+          'verbose', {
+            'explain_verbose': explain_verbose,
+          }, '_explain_verbose'
+        );
+      },
+
       // This function will toggle "costs" option in explain
       _explain_costs: function() {
         var self = this;
+        let explain_costs = false;
         if ($('.explain-costs').hasClass('visibility-hidden') === true) {
           $('.explain-costs').removeClass('visibility-hidden');
-          self.explain_costs = true;
+          explain_costs = true;
         } else {
           $('.explain-costs').addClass('visibility-hidden');
-          self.explain_costs = false;
+          explain_costs = false;
         }
 
-        // Set this option in preferences
-        var data = {
-          'explain_costs': self.explain_costs,
-        };
-
-        $.ajax({
-          url: url_for('sqleditor.query_tool_preferences', {
-            'trans_id': self.transId,
-          }),
-          method: 'PUT',
-          contentType: 'application/json',
-          data: JSON.stringify(data),
-          success: function(res) {
-            if (res.success == undefined || !res.success) {
-              alertify.alert(gettext('Explain options error'),
-                gettext('Error occurred while setting costs option in explain.')
-              );
-            }
-          },
-          error: function(e) {
-            let msg = httpErrorHandler.handleQueryToolAjaxError(
-              pgAdmin, self, e, '_explain_costs', [], true
-            );
-            alertify.alert(gettext('Explain options error'), msg);
-          },
-        });
+        self.explainPreferenceUpdate(
+          'costs', {
+            'explain_costs': explain_costs,
+          }, '_explain_costs'
+        );
       },
 
       // This function will toggle "buffers" option in explain
       _explain_buffers: function() {
         var self = this;
+        let explain_buffers = false;
         if ($('.explain-buffers').hasClass('visibility-hidden') === true) {
           $('.explain-buffers').removeClass('visibility-hidden');
-          self.explain_buffers = true;
+          explain_buffers = true;
         } else {
           $('.explain-buffers').addClass('visibility-hidden');
-          self.explain_buffers = false;
+          explain_buffers = false;
         }
 
-        // Set this option in preferences
-        var data = {
-          'explain_buffers': self.explain_buffers,
-        };
-
-        $.ajax({
-          url: url_for('sqleditor.query_tool_preferences', {
-            'trans_id': self.transId,
-          }),
-          method: 'PUT',
-          contentType: 'application/json',
-          data: JSON.stringify(data),
-          success: function(res) {
-            if (res.success == undefined || !res.success) {
-              alertify.alert(gettext('Explain options error'),
-                gettext('Error occurred while setting buffers option in explain.')
-              );
-            }
-          },
-          error: function(e) {
-            let msg = httpErrorHandler.handleQueryToolAjaxError(
-              pgAdmin, self, e, '_explain_buffers', [], true
-            );
-            alertify.alert(gettext('Explain options error'), msg);
-          },
-        });
+        self.explainPreferenceUpdate(
+          'buffers', {
+            'explain_buffers': explain_buffers,
+          }, '_explain_buffers'
+        );
       },
 
       // This function will toggle "timing" option in explain
       _explain_timing: function() {
         var self = this;
+        let explain_timing = false;
         if ($('.explain-timing').hasClass('visibility-hidden') === true) {
           $('.explain-timing').removeClass('visibility-hidden');
-          self.explain_timing = true;
+          explain_timing = true;
         } else {
           $('.explain-timing').addClass('visibility-hidden');
-          self.explain_timing = false;
+          explain_timing = false;
         }
-        // Set this option in preferences
-        var data = {
-          'explain_timing': self.explain_timing,
-        };
 
-        $.ajax({
-          url: url_for('sqleditor.query_tool_preferences', {
-            'trans_id': self.transId,
-          }),
-          method: 'PUT',
-          contentType: 'application/json',
-          data: JSON.stringify(data),
-          success: function(res) {
-            if (res.success == undefined || !res.success) {
-              alertify.alert(gettext('Explain options error'),
-                gettext('Error occurred while setting timing option in explain.')
-              );
-            }
-          },
-          error: function(e) {
-            let msg = httpErrorHandler.handleQueryToolAjaxError(
-              pgAdmin, self, e, '_explain_timing', [], true
-            );
-            alertify.alert(gettext('Explain options error'), msg);
-          },
-        });
+        self.explainPreferenceUpdate(
+          'timing', {
+            'explain_timing': explain_timing,
+          }, '_explain_timing'
+        );
       },
 
       /*
@@ -3751,85 +3657,6 @@ define('tools.querytool', [
         is_query_running = value;
       },
 
-      /*
-       * This function get explain options and auto rollback/auto commit
-       * values from preferences
-       */
-      get_preferences: function() {
-        var self = this,
-          explain_verbose = false,
-          explain_costs = false,
-          explain_buffers = false,
-          explain_timing = false,
-          auto_commit = true,
-          auto_rollback = false,
-          updateUI = function() {
-            // Set Auto-commit and auto-rollback on query editor
-            if (auto_commit &&
-              $('.auto-commit').hasClass('visibility-hidden') === true)
-              $('.auto-commit').removeClass('visibility-hidden');
-            else {
-              $('.auto-commit').addClass('visibility-hidden');
-            }
-            if (auto_rollback &&
-              $('.auto-rollback').hasClass('visibility-hidden') === true)
-              $('.auto-rollback').removeClass('visibility-hidden');
-            else {
-              $('.auto-rollback').addClass('visibility-hidden');
-            }
-
-            // Set explain options on query editor
-            if (explain_verbose &&
-              $('.explain-verbose').hasClass('visibility-hidden') === true)
-              $('.explain-verbose').removeClass('visibility-hidden');
-            else {
-              $('.explain-verbose').addClass('visibility-hidden');
-            }
-            if (explain_costs &&
-              $('.explain-costs').hasClass('visibility-hidden') === true)
-              $('.explain-costs').removeClass('visibility-hidden');
-            else {
-              $('.explain-costs').addClass('visibility-hidden');
-            }
-            if (explain_buffers &&
-              $('.explain-buffers').hasClass('visibility-hidden') === true)
-              $('.explain-buffers').removeClass('visibility-hidden');
-            else {
-              $('.explain-buffers').addClass('visibility-hidden');
-            }
-            if (explain_timing &&
-              $('.explain-timing').hasClass('visibility-hidden') === true)
-              $('.explain-timing').removeClass('visibility-hidden');
-            else {
-              $('.explain-timing').addClass('visibility-hidden');
-            }
-          };
-
-        $.ajax({
-          url: url_for('sqleditor.query_tool_preferences', {
-            'trans_id': self.transId,
-          }),
-          method: 'GET',
-          success: function(res) {
-            if (res.data) {
-              explain_verbose = res.data.explain_verbose;
-              explain_costs = res.data.explain_costs;
-              explain_buffers = res.data.explain_buffers;
-              explain_timing = res.data.explain_timing;
-              auto_commit = res.data.auto_commit;
-              auto_rollback = res.data.auto_rollback;
-              updateUI();
-            }
-          },
-          error: function(e) {
-            let msg = httpErrorHandler.handleQueryToolAjaxError(
-              pgAdmin, self, e, 'get_preferences', [], true
-            );
-            updateUI();
-            alertify.alert(gettext('Get Preferences error'), msg);
-          },
-        });
-      },
       close: function() {
         var self = this;
 
diff --git a/web/pgadmin/tools/sqleditor/tests/test_pref_utilities.py b/web/pgadmin/tools/sqleditor/tests/test_pref_utilities.py
deleted file mode 100644
index cbd141b0..00000000
--- a/web/pgadmin/tools/sqleditor/tests/test_pref_utilities.py
+++ /dev/null
@@ -1,100 +0,0 @@
-##########################################################################
-#
-# pgAdmin 4 - PostgreSQL Tools
-#
-# Copyright (C) 2013 - 2018, The pgAdmin Development Team
-# This software is released under the PostgreSQL Licence
-#
-##########################################################################
-from pgadmin.utils.route import BaseTestGenerator
-from pgadmin.tools.sqleditor.utils.query_tool_preferences import \
-    get_text_representation_of_shortcut
-
-
-class TestQueryToolPreference(BaseTestGenerator):
-    """
-    Ensures that we are able to fetch preferences properly
-    """
-    scenarios = [
-        ('Check text representation of a valid shortcuts', dict(
-            fetch_pref=True,
-            sample_shortcut=dict(
-                alt=False,
-                shift=False,
-                control=False,
-                key=dict(
-                    char='a',
-                    keyCode=65
-                )
-            ),
-            expected_result='a'
-        )),
-
-        ('Check text representation of a valid shortcuts', dict(
-            fetch_pref=True,
-            sample_shortcut=dict(
-                alt=True,
-                shift=False,
-                control=False,
-                key=dict(
-                    char='a',
-                    keyCode=65
-                )
-            ),
-            expected_result='Alt+a'
-        )),
-
-        ('Check text representation of a valid shortcuts', dict(
-            fetch_pref=True,
-            sample_shortcut=dict(
-                alt=True,
-                shift=True,
-                control=True,
-                key=dict(
-                    char='a',
-                    keyCode=65
-                )
-            ),
-            expected_result='Alt+Shift+Ctrl+a'
-        )),
-
-        ('Check text representation of a valid shortcuts', dict(
-            fetch_pref=True,
-            sample_shortcut=dict(
-                alt=False,
-                shift=True,
-                control=False,
-                key=dict(
-                    char='a',
-                    keyCode=65
-                )
-            ),
-            expected_result='Shift+a'
-        )),
-
-        ('Check text representation of a valid shortcuts', dict(
-            fetch_pref=True,
-            sample_shortcut=dict(
-                alt=True,
-                shift=True,
-                control=False,
-                key=dict(
-                    char='a',
-                    keyCode=65
-                )
-            ),
-            expected_result='Alt+Shift+a'
-        )),
-
-        ('Check text representation of a invalid shortcuts', dict(
-            fetch_pref=True,
-            sample_shortcut=None,
-            expected_result=''
-        ))
-
-    ]
-
-    def runTest(self):
-        """Check correct function is called to handle to run query."""
-        result = get_text_representation_of_shortcut(self.sample_shortcut)
-        self.assertEquals(result, self.expected_result)
diff --git a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
index a5a7bcb8..5e2a8ef1 100644
--- a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
+++ b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
@@ -560,123 +560,3 @@ def RegisterQueryToolPreferences(self):
         help_str=gettext('If set to True, Keywords will be displayed '
                          'in upper case for auto completion.')
     )
-
-
-def get_query_tool_keyboard_shortcuts():
-
-    """
-    Fetch all the query tool shortcut preferences
-
-    Returns:
-        List of query tool shortcut preferences
-    """
-    qt_perf = Preferences.module('sqleditor')
-    conn_status = qt_perf.preference('btn_conn_status').get()
-    clear_options = qt_perf.preference('btn_clear_options').get()
-    cancel_query = qt_perf.preference('btn_cancel_query').get()
-    execute_options = qt_perf.preference('btn_execute_options').get()
-    filter_options = qt_perf.preference('btn_filter_options').get()
-    rows_limit = qt_perf.preference('btn_rows_limit').get()
-    filter_dialog = qt_perf.preference('btn_filter_dialog').get()
-    delete_row = qt_perf.preference('btn_delete_row').get()
-    paste_row = qt_perf.preference('btn_paste_row').get()
-    copy_row = qt_perf.preference('btn_copy_row').get()
-    save_file = qt_perf.preference('btn_save_file').get()
-    open_file = qt_perf.preference('btn_open_file').get()
-    move_next = qt_perf.preference('move_next').get()
-    move_previous = qt_perf.preference('move_previous').get()
-    download_csv = qt_perf.preference('download_csv').get()
-    execute_query = qt_perf.preference('execute_query').get()
-    explain_query = qt_perf.preference('explain_query').get()
-    explain_analyze_query = qt_perf.preference('explain_analyze_query').get()
-    find_options = qt_perf.preference('btn_find_options').get()
-    toggle_case = qt_perf.preference('toggle_case').get()
-
-    return {
-        'keys': {
-            'conn_status': conn_status.get('key').get('char'),
-            'clear_options': clear_options.get('key').get('char'),
-            'cancel_query': cancel_query.get('key').get('char'),
-            'execute_options': execute_options.get('key').get('char'),
-            'filter_options': filter_options.get('key').get('char'),
-            'rows_limit': rows_limit.get('key').get('char'),
-            'filter_dialog': filter_dialog.get('key').get('char'),
-            'delete_row': delete_row.get('key').get('char'),
-            'paste_row': paste_row.get('key').get('char'),
-            'copy_row': copy_row.get('key').get('char'),
-            'save_file': save_file.get('key').get('char'),
-            'open_file': open_file.get('key').get('char'),
-            'move_next': move_next.get('key').get('char'),
-            'move_previous': move_previous.get('key').get('char'),
-            'download_csv': download_csv.get('key').get('char'),
-            'execute_query': execute_query.get('key').get('char'),
-            'explain_query': explain_query.get('key').get('char'),
-            'explain_analyze_query': explain_analyze_query.get('key').get(
-                'char'
-            ),
-            'find_options': find_options.get('key').get('char'),
-            'toggle_case': toggle_case.get('key').get('char')
-        },
-        'shortcuts': {
-            'conn_status': conn_status,
-            'clear_options': clear_options,
-            'cancel_query': cancel_query,
-            'execute_options': execute_options,
-            'filter_options': filter_options,
-            'rows_limit': rows_limit,
-            'filter_dialog': filter_dialog,
-            'delete_row': delete_row,
-            'paste_row': paste_row,
-            'copy_row': copy_row,
-            'save_file': save_file,
-            'open_file': open_file,
-            'move_next': move_next,
-            'move_previous': move_previous,
-            'download_csv': download_csv,
-            'execute_query': execute_query,
-            'explain_query': explain_query,
-            'explain_analyze_query': explain_analyze_query,
-            'find_options': find_options,
-            'toggle_case': toggle_case
-        },
-    }
-
-
-def get_text_representation_of_shortcut(shortcut):
-    """
-    Coverts shortcut object to text representation
-
-    Args:
-        shortcut: Shortcut object
-
-    Returns:
-        Text representation of given shortcut
-    """
-    text_representation = ''
-    is_plus_required = False
-
-    if not shortcut:
-        return text_representation
-
-    if shortcut['alt']:
-        text_representation = gettext('Alt')
-        is_plus_required = True
-
-    if shortcut['shift']:
-        if is_plus_required:
-            text_representation += '+'
-        text_representation += gettext('Shift')
-        is_plus_required = True
-
-    if shortcut['control']:
-        if is_plus_required:
-            text_representation += '+'
-        text_representation += gettext('Ctrl')
-        is_plus_required = True
-
-    if shortcut['key'] and shortcut['key']['char']:
-        if is_plus_required:
-            text_representation += '+'
-        text_representation += '{0}'.format(shortcut['key']['char'])
-
-    return text_representation
diff --git a/web/regression/javascript/browser/preferences_spec.js b/web/regression/javascript/browser/preferences_spec.js
new file mode 100644
index 00000000..956b2c36
--- /dev/null
+++ b/web/regression/javascript/browser/preferences_spec.js
@@ -0,0 +1,140 @@
+import {pgBrowser} from 'pgadmin.browser.preferences';
+import $ from 'jquery';
+
+var dummy_cache = [
+  {
+    id: 1,
+    mid: 1,
+    module:'module1',
+    name:'pref1',
+    value:{
+      alt: false,
+      shift: false,
+      control: false,
+      key: {
+        char: 'a',
+        key_code: 65,
+      },
+    },
+  },{
+    id: 2,
+    mid: 1,
+    module:'module1',
+    name:'pref2',
+    value: 123,
+  },{
+    id: 3,
+    mid: 2,
+    module:'module2',
+    name:'pref2',
+    value: true,
+  },
+];
+
+describe('preferences related functions test', function() {
+  describe('get preference data related functions', function(){
+    beforeEach(function(){
+      pgBrowser.preferences_cache = dummy_cache;
+    });
+
+    it('get_preference', function(){
+      expect(pgBrowser.get_preference('module1','pref1')).toEqual({
+        id: 1,
+        mid: 1,
+        module:'module1',
+        name:'pref1',
+        value:{
+          alt: false,
+          shift: false,
+          control: false,
+          key: {
+            char: 'a',
+            key_code: 65,
+          },
+        },
+      });
+    });
+
+    it('get_preferences_for_module', function() {
+      expect(pgBrowser.get_preferences_for_module('module1')).toEqual({
+        'pref1':{
+          alt: false,
+          shift: false,
+          control: false,
+          key: {
+            char: 'a',
+            key_code: 65,
+          },
+        },
+        'pref2': 123,
+      });
+    });
+
+    it('get_preference_for_id', function() {
+      expect(pgBrowser.get_preference_for_id(3)).toEqual({
+        id: 3,
+        mid: 2,
+        module:'module2',
+        name:'pref2',
+        value: true,
+      });
+    });
+
+    it('reflectPreferences', function() {
+
+      let editorOptions = {
+        'tabSize':2,
+        'lineWrapping':false,
+        'autoCloseBrackets':true,
+        'matchBrackets':true,
+      };
+      pgBrowser.preferences_cache.push({
+        id: 4, mid: 3, module:'sqleditor', name:'sql_font_size', value: 1.456,
+      });
+      pgBrowser.preferences_cache.push({
+        id: 4, mid: 3, module:'sqleditor', name:'tab_size', value: editorOptions.tabSize,
+      });
+      pgBrowser.preferences_cache.push({
+        id: 4, mid: 3, module:'sqleditor', name:'wrap_code', value: editorOptions.lineWrapping,
+      });
+      pgBrowser.preferences_cache.push({
+        id: 4, mid: 3, module:'sqleditor', name:'insert_pair_brackets', value: editorOptions.autoCloseBrackets,
+      });
+      pgBrowser.preferences_cache.push({
+        id: 4, mid: 3, module:'sqleditor', name:'brace_matching', value: editorOptions.matchBrackets,
+      });
+
+      /* Spies */
+      pgBrowser.editor = jasmine.createSpyObj(
+        'CodeMirror', ['setOption','refresh','getWrapperElement']
+      );
+      spyOn($.fn, 'css');
+
+      /* Call */
+      pgBrowser.reflectPreferences();
+
+      /* Tests */
+      expect(pgBrowser.editor.getWrapperElement).toHaveBeenCalled();
+      expect($.fn.css).toHaveBeenCalledWith('font-size', '1.46em');
+
+      let setOptionCalls = pgBrowser.editor.setOption.calls;
+      expect(setOptionCalls.count()).toBe(Object.keys(editorOptions).length);
+
+      for(let i = 0; i < Object.keys(editorOptions).length; i++) {
+        let option = Object.keys(editorOptions)[i];
+        expect(setOptionCalls.argsFor(i)).toEqual([option, editorOptions[option]]);
+      }
+      expect(pgBrowser.editor.refresh).toHaveBeenCalled();
+    });
+
+    it('onPreferencesChange', function() {
+
+      window.parent.$ = $;
+      spyOn($.fn, 'on');
+
+      var eventHandler = jasmine.createSpy('eventHandler');
+      pgBrowser.onPreferencesChange('somemodule', eventHandler);
+      expect($.fn.on.calls.mostRecent().args[0]).toEqual('prefchange:somemodule');
+    });
+  });
+});
diff --git a/web/regression/javascript/history/query_history_spec.jsx b/web/regression/javascript/history/query_history_spec.jsx
index c49b19f0..b90d2a30 100644
--- a/web/regression/javascript/history/query_history_spec.jsx
+++ b/web/regression/javascript/history/query_history_spec.jsx
@@ -29,7 +29,7 @@ import '../helper/enzyme.helper';
 describe('QueryHistory', () => {
   let historyCollection;
   let historyWrapper;
-
+  let sqlEditorPref = {sql_font_size: '1em'};
   beforeEach(() => {
     jasmineEnzyme();
   });
@@ -37,7 +37,9 @@ describe('QueryHistory', () => {
   describe('when there is no history', () => {
     beforeEach(() => {
       historyCollection = new HistoryCollection([]);
-      historyWrapper = mount(<QueryHistory historyCollection={historyCollection}/>);
+      historyWrapper = mount(<QueryHistory historyCollection={historyCollection}
+        sqlEditorPref={sqlEditorPref}
+      />);
     });
 
     describe('when we switch to the query history tab', () => {
@@ -89,8 +91,9 @@ describe('QueryHistory', () => {
           message: 'something important ERROR:  message from second sql query',
         }];
         historyCollection = new HistoryCollection(historyObjects);
-
-        historyWrapper = mount(<QueryHistory historyCollection={historyCollection}/>);
+        historyWrapper = mount(<QueryHistory historyCollection={historyCollection}
+            sqlEditorPref={sqlEditorPref}
+        />);
 
         queryHistoryEntriesComponent = historyWrapper.find(QueryHistoryEntries);
         isInvisibleSpy = spyOn(queryHistoryEntriesComponent.instance(), 'isInvisible')
@@ -479,7 +482,9 @@ describe('QueryHistory', () => {
         }];
         historyCollection = new HistoryCollection(historyObjects);
 
-        historyWrapper = mount(<QueryHistory historyCollection={historyCollection}/>);
+        historyWrapper = mount(<QueryHistory historyCollection={historyCollection}
+            sqlEditorPref={sqlEditorPref}
+        />);
 
         const queryHistoryEntriesComponent = historyWrapper.find(QueryHistoryEntries);
         isInvisibleSpy = spyOn(queryHistoryEntriesComponent.instance(), 'isInvisible')
diff --git a/web/regression/javascript/sqleditor/keyboard_shortcuts_spec.js b/web/regression/javascript/sqleditor/keyboard_shortcuts_spec.js
index 06586d34..0e774814 100644
--- a/web/regression/javascript/sqleditor/keyboard_shortcuts_spec.js
+++ b/web/regression/javascript/sqleditor/keyboard_shortcuts_spec.js
@@ -9,6 +9,7 @@
 
 import keyboardShortcuts from 'sources/keyboard_shortcuts';
 import {queryToolActions} from 'sources/sqleditor/query_tool_actions';
+import gettext from 'sources/gettext';
 
 describe('the keyboard shortcuts', () => {
   const F1_KEY = 112,
@@ -18,7 +19,7 @@ describe('the keyboard shortcuts', () => {
     PERIOD_KEY = 190,
     FWD_SLASH_KEY = 191;
 
-  let sqlEditorControllerSpy, event, queryToolActionsSpy, queryToolkeyboardShortcutsConfig;
+  let sqlEditorControllerSpy, event, queryToolActionsSpy;
   beforeEach(() => {
     event = {
       shift: false,
@@ -29,8 +30,22 @@ describe('the keyboard shortcuts', () => {
       stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation'),
     };
 
-    queryToolkeyboardShortcutsConfig = {
-      execute: {
+    let gridView = {
+      query_tool_obj: {
+        getSelection: jasmine.createSpy('getSelection'),
+        getValue: jasmine.createSpy('getValue'),
+      },
+    };
+
+    sqlEditorControllerSpy = jasmine.createSpyObj('SqlEditorController', [
+      'isQueryRunning',
+      'execute',
+    ]);
+
+    sqlEditorControllerSpy.gridView = gridView;
+
+    sqlEditorControllerSpy.preferences = {
+      execute_query: {
         alt: false,
         shift: false,
         control: false,
@@ -38,7 +53,7 @@ describe('the keyboard shortcuts', () => {
           key_code: F5_KEY,
         },
       },
-      explain: {
+      explain_query: {
         alt: false,
         shift: false,
         control: false,
@@ -46,7 +61,7 @@ describe('the keyboard shortcuts', () => {
           key_code: F7_KEY,
         },
       },
-      explain_analyze: {
+      explain_analyze_query: {
         alt: false,
         shift: true,
         control: false,
@@ -80,20 +95,6 @@ describe('the keyboard shortcuts', () => {
       },
     };
 
-    let gridView = {
-      query_tool_obj: {
-        getSelection: jasmine.createSpy('getSelection'),
-        getValue: jasmine.createSpy('getValue'),
-      },
-    };
-
-    sqlEditorControllerSpy = jasmine.createSpyObj('SqlEditorController', [
-      'isQueryRunning',
-      'execute',
-    ]);
-
-    sqlEditorControllerSpy.gridView = gridView;
-
     queryToolActionsSpy = jasmine.createSpyObj(queryToolActions, [
       'explainAnalyze',
       'explain',
@@ -110,8 +111,7 @@ describe('the keyboard shortcuts', () => {
     beforeEach(() => {
       event.which = F1_KEY;
       keyboardShortcuts.processEventQueryTool(
-        sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-        queryToolActionsSpy, event
+        sqlEditorControllerSpy, queryToolActionsSpy, event
       );
     });
 
@@ -128,8 +128,7 @@ describe('the keyboard shortcuts', () => {
         event.shiftKey = false;
         event.ctrlKey = false;
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
       });
 
@@ -151,8 +150,7 @@ describe('the keyboard shortcuts', () => {
         sqlEditorControllerSpy.isQueryRunning.and.returnValue(true);
 
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
 
         expect(queryToolActionsSpy.executeQuery).not.toHaveBeenCalled();
@@ -168,8 +166,7 @@ describe('the keyboard shortcuts', () => {
         event.shiftKey = false;
         event.ctrlKey = false;
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
       });
 
@@ -189,8 +186,7 @@ describe('the keyboard shortcuts', () => {
         sqlEditorControllerSpy.isQueryRunning.and.returnValue(true);
 
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
 
         expect(queryToolActionsSpy.explain).not.toHaveBeenCalled();
@@ -206,8 +202,7 @@ describe('the keyboard shortcuts', () => {
         event.altKey = false;
         event.ctrlKey = false;
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
       });
 
@@ -228,8 +223,7 @@ describe('the keyboard shortcuts', () => {
         sqlEditorControllerSpy.isQueryRunning.and.returnValue(true);
 
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
 
         expect(queryToolActionsSpy.explainAnalyze).not.toHaveBeenCalled();
@@ -246,8 +240,7 @@ describe('the keyboard shortcuts', () => {
         event.ctrlKey = false;
 
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
       });
 
@@ -270,8 +263,7 @@ describe('the keyboard shortcuts', () => {
         sqlEditorControllerSpy.isQueryRunning.and.returnValue(true);
 
         keyboardShortcuts.processEventQueryTool(
-          sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-          queryToolActionsSpy, event
+          sqlEditorControllerSpy, queryToolActionsSpy, event
         );
 
         expect(queryToolActionsSpy.download).not.toHaveBeenCalled();
@@ -286,8 +278,7 @@ describe('the keyboard shortcuts', () => {
           macKeysSetup();
           event.which = FWD_SLASH_KEY;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
 
@@ -303,8 +294,7 @@ describe('the keyboard shortcuts', () => {
           windowsKeysSetup();
           event.which = FWD_SLASH_KEY;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
 
@@ -328,8 +318,7 @@ describe('the keyboard shortcuts', () => {
 
         it('does nothing', () => {
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
 
           expect(queryToolActionsSpy.commentLineCode).not.toHaveBeenCalled();
@@ -344,8 +333,7 @@ describe('the keyboard shortcuts', () => {
 
         it('does nothing', () => {
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
 
           expect(queryToolActionsSpy.commentLineCode).not.toHaveBeenCalled();
@@ -361,8 +349,7 @@ describe('the keyboard shortcuts', () => {
           macKeysSetup();
           event.which = PERIOD_KEY;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
 
@@ -377,8 +364,7 @@ describe('the keyboard shortcuts', () => {
           windowsKeysSetup();
           event.which = PERIOD_KEY;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
 
@@ -402,8 +388,7 @@ describe('the keyboard shortcuts', () => {
 
         it('does nothing', () => {
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
           expect(queryToolActionsSpy.uncommentLineCode).not.toHaveBeenCalled();
         });
@@ -416,8 +401,7 @@ describe('the keyboard shortcuts', () => {
 
         it('does nothing', () => {
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
 
           expect(queryToolActionsSpy.uncommentLineCode).not.toHaveBeenCalled();
@@ -434,8 +418,7 @@ describe('the keyboard shortcuts', () => {
           event.which = FWD_SLASH_KEY;
           event.shiftKey = true;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
 
@@ -454,8 +437,7 @@ describe('the keyboard shortcuts', () => {
           event.which = FWD_SLASH_KEY;
           event.shiftKey = true;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
 
@@ -477,8 +459,7 @@ describe('the keyboard shortcuts', () => {
           event.which = FWD_SLASH_KEY;
           event.shiftKey = true;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
         it('does nothing', () => {
@@ -491,8 +472,7 @@ describe('the keyboard shortcuts', () => {
           event.which = FWD_SLASH_KEY;
           event.shiftKey = true;
           keyboardShortcuts.processEventQueryTool(
-            sqlEditorControllerSpy, queryToolkeyboardShortcutsConfig,
-            queryToolActionsSpy, event
+            sqlEditorControllerSpy, queryToolActionsSpy, event
           );
         });
         it('does nothing', () => {
@@ -502,6 +482,45 @@ describe('the keyboard shortcuts', () => {
     });
   });
 
+  describe('shortcut to text converters', ()=> {
+    var shortcut = {
+      alt: false,
+      shift: false,
+      control: false,
+      key: {
+        char: 'a',
+        key_code: 65,
+      },
+    };
+
+    it('shortcut_key',()=>{
+      expect(keyboardShortcuts.shortcut_key(shortcut)).toBe('A');
+    });
+
+    it('shortcut_accesskey_title',()=>{
+      expect(keyboardShortcuts.shortcut_accesskey_title(
+        'Title', shortcut)).toBe(gettext('Title (accesskey + A)'));
+    });
+
+    it('shortcut_title',()=>{
+      shortcut.alt = true, shortcut.shift = false, shortcut.control = false;
+      expect(keyboardShortcuts.shortcut_title(
+        'Title', shortcut)).toBe(gettext('Title (Alt+A)'));
+
+      shortcut.alt = false, shortcut.shift = true, shortcut.control = false;
+      expect(keyboardShortcuts.shortcut_title(
+        'Title', shortcut)).toBe(gettext('Title (Shift+A)'));
+
+      shortcut.alt = false, shortcut.shift = false, shortcut.control = true;
+      expect(keyboardShortcuts.shortcut_title(
+        'Title', shortcut)).toBe(gettext('Title (Ctrl+A)'));
+
+      shortcut.alt = true, shortcut.shift = true, shortcut.control = true;
+      expect(keyboardShortcuts.shortcut_title(
+        'Title', shortcut)).toBe(gettext('Title (Alt+Shift+Ctrl+A)'));
+    });
+  });
+
   function expectEventPropagationToStop() {
     describe('stops all event propogation', () => {
 
diff --git a/web/regression/javascript/sqleditor_utils_spec.js b/web/regression/javascript/sqleditor_utils_spec.js
index c738f82a..75c34afc 100644
--- a/web/regression/javascript/sqleditor_utils_spec.js
+++ b/web/regression/javascript/sqleditor_utils_spec.js
@@ -28,5 +28,13 @@ function (SqlEditorUtils) {
         expect(SqlEditorUtils.capitalizeFirstLetter('create script')).toEqual('Create script');
       });
     });
+
+    describe('Calculate font size of input number passed', function () {
+      it('calcFontSize', function () {
+        expect(SqlEditorUtils.calcFontSize(1.456)).toEqual('1.46em');
+        expect(SqlEditorUtils.calcFontSize()).toEqual('0em');
+        expect(SqlEditorUtils.calcFontSize(2)).toEqual('2em');
+      });
+    });
   });
 });
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index c12e7f3b..41bf1033 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -124,6 +124,7 @@ var webpackShimConfig = {
     'bundled_codemirror': path.join(__dirname, './pgadmin/static/bundle/codemirror'),
     'bundled_browser': path.join(__dirname, './pgadmin/static/bundle/browser'),
     'sources': path.join(__dirname, './pgadmin/static/js'),
+    'sourcesjsx': path.join(__dirname, './pgadmin/static/jsx'),
     'pgadmin': path.join(__dirname, './pgadmin/static/js/pgadmin'),
     'translations': path.join(__dirname, './pgadmin/tools/templates/js/translations'),
     'sources/gettext': path.join(__dirname, './pgadmin/static/js/gettext'),
@@ -179,6 +180,7 @@ var webpackShimConfig = {
     'pgadmin.browser.error': path.join(__dirname, './pgadmin/browser/static/js/error'),
     'pgadmin.browser.frame': path.join(__dirname, './pgadmin/browser/static/js/frame'),
     'pgadmin.browser.keyboard': path.join(__dirname, './pgadmin/browser/static/js/keyboard'),
+    'pgadmin.browser.preferences': path.join(__dirname, './pgadmin/browser/static/js/preferences'),
     'pgadmin.browser.menu': path.join(__dirname, './pgadmin/browser/static/js/menu'),
     'pgadmin.browser.messages': '/browser/js/messages',
     'pgadmin.browser.node': path.join(__dirname, './pgadmin/browser/static/js/node'),
diff --git a/web/webpack.test.config.js b/web/webpack.test.config.js
index ef893e0b..757107ca 100644
--- a/web/webpack.test.config.js
+++ b/web/webpack.test.config.js
@@ -83,6 +83,7 @@ module.exports = {
       'pgadmin.backform': sourcesDir + '/js/backform.pgadmin',
       'pgbrowser': path.resolve(__dirname, 'regression/javascript/fake_browser'),
       'pgadmin.schema.dir': path.resolve(__dirname, 'pgadmin/browser/server_groups/servers/databases/schemas/static/js'),
+      'pgadmin.browser.preferences': path.join(__dirname, './pgadmin/browser/static/js/preferences'),
     },
   },
 };


view thread (14+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected], [email protected]
  Subject: Re: [pgAdmin4][RM3294] User need to reset the layout to see the changed preferences parameters
  In-Reply-To: <CAM9w-_=wmMOF7dsMGh6rTQJModYFcd18Z8UuGi-qXEhDedZsBw@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox