Add controls and shortcuts for commenting/uncommenting code in the SQL Editor. Fixes #2456.

Take the opportunity to tidy up the menus and add access keys to appropriate buttons.

docs/en_US/keyboard_shortcuts.rst

@@ -41,6 +41,12 @@ When using the syntax-highlighting SQL editors, the following shortcuts are avai
 +--------------------------+------------------+-------------------------------------+
 | Ctrl+Alt+Right           | Cmd+Option+Right | Move right one word                 |
 +--------------------------+------------------+-------------------------------------+
+| Ctrl+Shift+,             | Ctrl+Shift+,     | Comment selected code (Inline)      |
++--------------------------+------------------+-------------------------------------+
+| Ctrl+Shift+.             | Ctrl+Shift+.     | Uncomment selected code (Inline)    |
++--------------------------+------------------+-------------------------------------+
+| Ctrl+Shift+/             | Ctrl+Shift+/     | Comment/Uncomment code (Block)      |
++--------------------------+------------------+-------------------------------------+
 | Ctrl+A                   | Cmd+A            | Select all                          |
 +--------------------------+------------------+-------------------------------------+
 | Ctrl+C                   | Cmd+C            | Copy selected text to the clipboard |

web/pgadmin/static/bundle/codemirror.js

@@ -13,6 +13,7 @@ import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/comment/comment'
 import 'pgadmin.sqlfoldcode';
 
 export default CodeMirror;

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -24,14 +24,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') }}">
+                        title="{{ _('Open File') }}" accesskey="o">
                     <i class="fa fa-folder-open-o" aria-hidden="true"></i>
                 </button>
                 <button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>
                     <i class="fa fa-floppy-o" aria-hidden="true"></i>
                 </button>
                 <button id="btn-file-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled  accesskey="s">
                     <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul class="dropdown-menu">
@@ -42,7 +42,7 @@
                     </li>
                     <li>
                         <a id="btn-file-menu-save-as" href="#">
-                            <span>{{ _('Save as') }}</span>
+                            <span>{{ _('Save As') }}</span>
                         </a>
                     </li>
                 </ul>
@@ -52,7 +52,7 @@
                     <i class="fa fa-search" aria-hidden="true"></i>
                 </button>
                 <button id="btn-find-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" accesskey="f">
                     <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul class="dropdown-menu">
@@ -96,20 +96,51 @@
                 </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <button id="btn-copy-row" type="button" class="btn btn-default" title="{{ _('Copy') }}" disabled>
+                <button id="btn-copy-row" type="button" class="btn btn-default"
+                        title="{{ _('Copy') }}" disabled accesskey="c">
                     <i class="fa fa-files-o" aria-hidden="true"></i>
                 </button>
-                <button id="btn-paste-row" type="button" class="btn btn-default" title="{{ _('Paste Row') }}" disabled>
+                <button id="btn-paste-row" type="button" class="btn btn-default"
+                        title="{{ _('Paste Row') }}" disabled accesskey="p">
                     <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 Row(s)') }}" disabled>
+                <button id="btn-delete-row" type="button" class="btn btn-default"
+                        title="{{ _('Delete Row(s)') }}" disabled accesskey="d">
                     <i class="fa fa-trash" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <button id="btn-filter" type="button" class="btn btn-default" title="{{ _('Filter') }}" disabled>
+                <button id="btn-edit-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        title="{{ _('Edit') }}" accesskey="e">
+                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu">
+                    <li>
+                        <a id="btn-indent-code" href="#">
+                            <span> {{ _('Indent Selection (Tab)') }} </span>
+                        </a>
+                        <a id="btn-unindent-code" href="#">
+                            <span> {{ _('Unindent Selection (Shift+Tab)') }} </span>
+                        </a>
+                        <a id="btn-comment-line" href="#">
+                            <span> {{ _('Inline Comment Selection (Ctrl+Shift+,)') }} </span>
+                        </a>
+                        <a id="btn-uncomment-line" href="#">
+                            <span> {{ _('Inline Uncomment Selection (Ctrl+Shift+.)') }} </span>
+                        </a>
+                        <a id="btn-toggle-comment-block" href="#">
+                            <span> {{ _('Block Comment/Uncomment Selection (Ctrl+Shift+/)') }} </span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="btn-group" role="group" aria-label="">
+                <button id="btn-filter" type="button" class="btn btn-default"
+                        title="{{ _('Filter') }}" disabled accesskey="i">
                     <i class="fa fa-filter" aria-hidden="true"></i>
                 </button>
                 <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle"
@@ -126,7 +157,7 @@
                 </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <select class="limit" style="height: 30px; width: 90px;" disabled>
+                <select class="limit" style="height: 30px; width: 90px;" disabled accesskey="r">
                     <option value="-1">No limit</option>
                     <option value="1000">1000 rows</option>
                     <option value="500">500 rows</option>
@@ -139,7 +170,7 @@
                     <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">
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" accesskey="x">
                     <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu">
@@ -203,33 +234,31 @@
                     </li>
                 </ul>
                 <button id="btn-cancel-query" type="button" class="btn btn-default" title="{{ _('Cancel query') }}"
-                        disabled>
+                        disabled accesskey="q">
                     <i class="fa fa-stop" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <button id="btn-edit" type="button" class="btn btn-default" title="{{ _('Clear query window') }}">
-                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
-                </button>
                 <button id="btn-edit-dropdown" type="button" class="btn btn-default dropdown-toggle"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        title="{{ _('Clear') }}" accesskey="l">
+                    <i class="fa fa-eraser" aria-hidden="true"></i>
                     <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu">
                     <li>
                         <a id="btn-clear" href="#">
-                            <i class="fa fa-eraser" aria-hidden="true"></i>
                             <span> {{ _('Clear Query Window') }} </span>
                         </a>
                         <a id="btn-clear-history" href="#">
-                            <i class="fa fa-eraser" aria-hidden="true"></i>
                             <span> {{ _('Clear History') }} </span>
                         </a>
                     </li>
                 </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <button id="btn-download" type="button" class="btn btn-default" title="{{ _('Download as CSV (F8)') }}">
+                <button id="btn-download" type="button" class="btn btn-default"
+                        title="{{ _('Download as CSV (F8)') }}" accesskey="v">
                     <i class="fa fa-download" aria-hidden="true"></i>
                 </button>
             </div>

web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js

@@ -39,7 +39,10 @@ define('tools.querytool', [
     // Define key codes for shortcut keys
     var F5_KEY = 116,
         F7_KEY = 118,
-        F8_KEY = 119;
+        F8_KEY = 119,
+        COMMA_KEY = 188,
+        PERIOD_KEY = 190,
+        FWD_SLASH_KEY = 191;
 
     var is_query_running = false;
 
@@ -92,7 +95,15 @@ define('tools.querytool', [
         "click #btn-explain-buffers": "on_explain_buffers",
         "click #btn-explain-timing": "on_explain_timing",
         "change .limit": "on_limit_change",
-        "keydown": "keyAction"
+        "keydown": "keyAction",
+        // Comment options
+        "click #btn-comment-code": "on_toggle_comment_block_code",
+        "click #btn-toggle-comment-block": "on_toggle_comment_block_code",
+        "click #btn-comment-line": "on_comment_line_code",
+        "click #btn-uncomment-line": "on_uncomment_line_code",
+        // Indentation options
+        "click #btn-indent-code": "on_indent_code",
+        "click #btn-unindent-code": "on_unindent_code"
       },
 
       // This function is used to render the template.
@@ -1277,6 +1288,59 @@ define('tools.querytool', [
         );
       },
 
+      // Callback function for the line comment code
+      on_comment_line_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:comment_line_code',
+            self,
+            self.handler
+        );
+      },
+
+      // Callback function for the line uncomment code
+      on_uncomment_line_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:uncomment_line_code',
+            self,
+            self.handler
+        );
+      },
+
+      // Callback function for the block comment/uncomment code
+      on_toggle_comment_block_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:toggle_comment_block_code',
+            self,
+            self.handler
+        );
+      },
+
+      on_indent_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:indent_selected_code',
+            self,
+            self.handler
+        );
+      },
+
+      on_unindent_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:unindent_selected_code',
+            self,
+            self.handler
+        );
+      },
+
       // Callback function for the clear button click.
       on_clear: function(ev) {
         var self = this, sql;
@@ -1487,6 +1551,18 @@ define('tools.querytool', [
           // Download query result as CSV.
           this.on_download(ev);
           ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == COMMA_KEY ) {
+          // Toggle comments
+          this.on_comment_line_code(ev);
+          ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == PERIOD_KEY ) {
+          // Toggle comments
+          this.on_uncomment_line_code(ev);
+          ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == FWD_SLASH_KEY ) {
+          // Toggle comments
+          this.on_toggle_comment_block_code(ev);
+          ev.preventDefault();
         }
       }
     });
@@ -1576,6 +1652,13 @@ define('tools.querytool', [
           self.on('pgadmin-sqleditor:button:explain-costs', self._explain_costs, self);
           self.on('pgadmin-sqleditor:button:explain-buffers', self._explain_buffers, self);
           self.on('pgadmin-sqleditor:button:explain-timing', self._explain_timing, self);
+          // Commenting related
+          self.on('pgadmin-sqleditor:comment_line_code', self._comment_line_code, self);
+          self.on('pgadmin-sqleditor:uncomment_line_code', self._uncomment_line_code, self);
+          self.on('pgadmin-sqleditor:toggle_comment_block_code', self._comment_block_code, self);
+          // Indentation related
+          self.on('pgadmin-sqleditor:indent_selected_code', self._indent_selected_code, self);
+          self.on('pgadmin-sqleditor:unindent_selected_code', self._unindent_selected_code, self);
 
           if (self.is_query_tool) {
             self.gridView.query_tool_obj.refresh();
@@ -3623,6 +3706,71 @@ define('tools.querytool', [
           });
         },
 
+        /*
+         * This function will comment code (Wrapper function)
+         */
+        _comment_line_code: function() {
+          this._toggle_comment_code('comment_line');
+        },
+
+        /*
+         * This function will uncomment code (Wrapper function)
+         */
+        _uncomment_line_code: function() {
+          this._toggle_comment_code('uncomment_line');
+        },
+
+        /*
+         * This function will comment/uncomment code (Wrapper function)
+         */
+        _comment_block_code: function() {
+          this._toggle_comment_code('block');
+        },
+
+        /*
+         * This function will comment/uncomment code (Main function)
+         */
+        _toggle_comment_code: function(of_type) {
+          var self = this, editor = self.gridView.query_tool_obj,
+          selected_code = editor.getSelection(),
+          sql = selected_code.length > 0 ? selected_code : editor.getValue();
+          // If it is an empty query, do nothing.
+          if (sql.length <= 0) return;
+
+          // Find the code selection range
+          var range = {
+            from: editor.getCursor(true),
+            to: editor.getCursor(false)
+          },
+          option = { lineComment: '--' };
+
+          if(of_type == 'comment_line') {
+            // Comment line
+            editor.lineComment(range.from, range.to, option);
+          } else if(of_type == 'uncomment_line') {
+            // Uncomment line
+            editor.uncomment(range.from, range.to, option);
+          } else if(of_type == 'block') {
+            editor.toggleComment(range.from, range.to);
+          }
+        },
+
+        /*
+         * This function will indent selected code
+         */
+        _indent_selected_code: function() {
+          var self = this, editor = self.gridView.query_tool_obj;
+          editor.execCommand("indentMore");
+        },
+
+        /*
+         * This function will unindent selected code
+         */
+        _unindent_selected_code: function() {
+          var self = this, editor = self.gridView.query_tool_obj;
+          editor.execCommand("indentLess");
+        },
+
         /*
          * This function get explain options and auto rollback/auto commit
          * values from preferences