Support keyboard navigation in the debugger. Fixes #2897

In passing, fix injection of variable values. Fixes #2981

web/pgadmin/static/js/keyboard_shortcuts.js

@@ -0,0 +1,119 @@
+import $ from 'jquery';
+
+const EDIT_KEY = 71,  // Key: G -> Grid values
+  LEFT_ARROW_KEY = 37,
+  RIGHT_ARROW_KEY = 39;
+
+function isMac() {
+  return window.navigator.platform.search('Mac') != -1;
+}
+
+function isKeyCtrlAlt(event) {
+  return event.ctrlKey || event.altKey;
+}
+
+function isKeyAltShift(event) {
+  return event.altKey || event.shiftKey;
+}
+
+function isKeyCtrlShift(event) {
+  return event.ctrlKey || event.shiftKey;
+}
+
+function isKeyCtrlAltShift(event) {
+  return event.ctrlKey || event.altKey || event.shiftKey;
+}
+
+function isAltShiftBoth(event) {
+  return event.altKey && event.shiftKey && !event.ctrlKey;
+}
+
+function isCtrlShiftBoth(event) {
+  return event.ctrlKey && event.shiftKey && !event.altKey;
+}
+
+function isCtrlAltBoth(event) {
+  return event.ctrlKey && event.altKey && !event.shiftKey;
+}
+
+function _stopEventPropagation(event) {
+  event.cancelBubble = true;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+}
+
+/* Debugger: Keyboard Shortcuts handling */
+function keyboardShortcutsDebugger($el, event) {
+  let keyCode = event.which || event.keyCode;
+
+  // To handle debugger's internal tab navigation like Parameters/Messages...
+  if (this.isAltShiftBoth(event)) {
+    // Get the active wcDocker panel from DOM element
+    let panel_id, panel_content, $input;
+    switch(keyCode) {
+    case LEFT_ARROW_KEY:
+      this._stopEventPropagation(event);
+      panel_id = this.getInnerPanel($el, 'left');
+      break;
+    case RIGHT_ARROW_KEY:
+      this._stopEventPropagation(event);
+      panel_id = this.getInnerPanel($el, 'right');
+      break;
+    case EDIT_KEY:
+      this._stopEventPropagation(event);
+      panel_content = $el.find(
+        'div.wcPanelTabContent:not(".wcPanelTabContentHidden")'
+      );
+      if(panel_content.length) {
+        $input = $(panel_content).find('td.editable:first');
+        if($input.length)
+          $input.click();
+      }
+      break;
+    }
+    // Actual panel starts with 1 in wcDocker
+    return panel_id;
+  }
+}
+
+// Finds the desired panel on which user wants to navigate to
+function getInnerPanel($el, direction) {
+  if(!$el || !$el.length)
+    return false;
+
+  let total_panels = $el.find('.wcPanelTab');
+  // If no panels found OR if single panel
+  if (!total_panels.length || total_panels.length == 1)
+    return false;
+
+  let active_panel = $(total_panels).filter('.wcPanelTabActive'),
+    id = parseInt($(active_panel).attr('id')),
+    fist_panel = 0,
+    last_panel = total_panels.length - 1;
+
+  // Find desired panel
+  if (direction == 'left') {
+    if(id > fist_panel)
+      id--;
+  } else {
+    if (id < last_panel)
+      id++;
+  }
+  return id;
+}
+
+module.exports = {
+  processEventDebugger: keyboardShortcutsDebugger,
+  getInnerPanel: getInnerPanel,
+  // misc functions
+  _stopEventPropagation: _stopEventPropagation,
+  isMac: isMac,
+  isKeyCtrlAlt: isKeyCtrlAlt,
+  isKeyAltShift: isKeyAltShift,
+  isKeyCtrlShift: isKeyCtrlShift,
+  isKeyCtrlAltShift: isKeyCtrlAltShift,
+  isAltShiftBoth: isAltShiftBoth,
+  isCtrlShiftBoth: isCtrlShiftBoth,
+  isCtrlAltBoth: isCtrlAltBoth,
+};