Fix auto scrolling issue in debugger on step in and step out. Fixes #3554.

docs/en_US/release_notes_3_3.rst

@@ -28,6 +28,7 @@ Bug fixes
 | `Bug #3528 <https://redmine.postgresql.org/issues/3528>`_ - Handle connection errors properly in the query tool.
 | `Bug #3547 <https://redmine.postgresql.org/issues/3547>`_ - Make session implementation thread safe
 | `Bug #3548 <https://redmine.postgresql.org/issues/3548>`_ - Ensure external table node should be visible only for GPDB.
+| `Bug #3554 <https://redmine.postgresql.org/issues/3554>`_ - Fix auto scrolling issue in debugger on step in and step out.
 | `Bug #3558 <https://redmine.postgresql.org/issues/3558>`_ - Fix sort/filter dialog editing issue.
 | `Bug #3561 <https://redmine.postgresql.org/issues/3561>`_ - Ensure sort/filter dialog should display proper message after losing database connection.
 | `Bug #3578 <https://redmine.postgresql.org/issues/3578>`_ - Ensure sql for Role should be visible in SQL panel for GPDB.

web/pgadmin/static/bundle/codemirror.js

@@ -14,6 +14,7 @@ import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/comment/comment';
-import '../js/codemirror/addon/fold/pgadmin-sqlfoldcode';
+import 'sources/codemirror/addon/fold/pgadmin-sqlfoldcode';
+import 'sources/codemirror/extension/centre_on_line';
 
 export default CodeMirror;

web/pgadmin/static/css/bootstrap.overrides.css

@@ -49,7 +49,14 @@ body {
     width: 100% !important;
 }
 
-.pg-panel-content { position:absolute;top:0px;left:0px;right:0px;bottom:0px; }
+.pg-panel-content {
+  position:absolute;
+  top:0px;
+  left:0px;
+  right:0px;
+  bottom:0px;
+  height: 100%!important;
+}
 
 /* iFrames should have no border */
 iframe {

web/pgadmin/static/js/codemirror/extension/centre_on_line.js

@@ -0,0 +1,7 @@
+import CodeMirror from 'codemirror/lib/codemirror';
+
+CodeMirror.defineExtension('centerOnLine', function(line) {
+  var ht = this.getScrollInfo().clientHeight;
+  var coords = this.charCoords({line: line, ch: 0}, 'local');
+  this.scrollTo(null, (coords.top + coords.bottom - ht) / 2);
+});

web/pgadmin/tools/debugger/static/js/debugger_ui.js

@@ -125,6 +125,7 @@ define([
       Alertify.dialog('debuggerInputArgsDialog', function factory() {
         return {
           main: function(title, debug_info, restart_debug, is_edb_proc) {
+            this.preferences = window.top.pgAdmin.Browser.get_preferences_for_module('debugger');
             this.set('title', title);
 
             // setting value in alertify settings allows us to access it from
@@ -724,7 +725,7 @@ define([
                     }
                   );
 
-                  if (res.data.newBrowserTab) {
+                  if (self.preferences.debugger_new_browser_tab) {
                     window.open(url, '_blank');
                   } else {
                     pgBrowser.Events.once(

web/pgadmin/tools/debugger/static/js/direct.js

@@ -128,6 +128,33 @@ define([
         return result;
       },
 
+      setActiveLine: function(lineNo) {
+        let editor = pgTools.DirectDebug.editor;
+
+        /* If lineNo sent, remove active line */
+        if(lineNo && self.active_line_no) {
+          editor.removeLineClass(
+            self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
+          );
+        }
+
+        /* If lineNo not sent, set it to active line */
+        if(!lineNo && self.active_line_no) {
+          lineNo = self.active_line_no;
+        }
+
+        /* Set new active line only if positive */
+        if(lineNo > 0) {
+          self.active_line_no = lineNo;
+          editor.addLineClass(
+            self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
+          );
+
+          /* centerOnLine is codemirror extension in bundle/codemirror.js */
+          editor.centerOnLine(self.active_line_no);
+        }
+      },
+
       // Function to start the executer and execute the user requested option for debugging
       start_execution: function(trans_id, port_num) {
         var self = this;
@@ -181,11 +208,8 @@ define([
               res.data.result[0].linenumber != null
             ) {
               pgTools.DirectDebug.editor.setValue(res.data.result[0].src);
-              self.active_line_no = (res.data.result[0].linenumber - 2);
+
-              pgTools.DirectDebug.editor.addLineClass(
+              self.setActiveLine(res.data.result[0].linenumber - 2);
-                (res.data.result[0].linenumber - 2), 'wrap',
-                'CodeMirror-activeline-background'
-              );
             }
             // Call function to create and update local variables ....
             self.GetStackInformation(trans_id);
@@ -336,26 +360,17 @@ define([
                   if (res.data.result[0].src != undefined || res.data.result[0].src != null) {
                     pgTools.DirectDebug.polling_timeout_idle = false;
                     pgTools.DirectDebug.docker.finishLoading(50);
-                    pgTools.DirectDebug.editor.setValue(res.data.result[0].src);
+                    if (res.data.result[0].src != pgTools.DirectDebug.editor.getValue()) {
-                    self.UpdateBreakpoint(trans_id);
+                      pgTools.DirectDebug.editor.setValue(res.data.result[0].src);
-                    pgTools.DirectDebug.editor.removeLineClass(
+                      self.UpdateBreakpoint(trans_id);
-                      self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
+                    }
-                    );
+                    self.setActiveLine(res.data.result[0].linenumber - 2);
-                    pgTools.DirectDebug.editor.addLineClass(
-                      (res.data.result[0].linenumber - 2),
-                      'wrap', 'CodeMirror-activeline-background'
-                    );
-                    self.active_line_no = (res.data.result[0].linenumber - 2);
                     // Update the stack, local variables and parameters information
                     self.GetStackInformation(trans_id);
 
                   } else if (!pgTools.DirectDebug.debug_type && !pgTools.DirectDebug.first_time_indirect_debug) {
                     pgTools.DirectDebug.docker.finishLoading(50);
-                    if (self.active_line_no != undefined) {
+                    self.setActiveLine(-1);
-                      pgTools.DirectDebug.editor.removeLineClass(
-                        self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
-                      );
-                    }
                     self.clear_all_breakpoint(trans_id);
                     self.execute_query(trans_id);
                     pgTools.DirectDebug.first_time_indirect_debug = true;
@@ -369,15 +384,7 @@ define([
                       self.UpdateBreakpoint(trans_id);
                     }
 
-                    pgTools.DirectDebug.editor.removeLineClass(
+                    self.setActiveLine(res.data.result[0].linenumber - 2);
-                      self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
-                    );
-                    pgTools.DirectDebug.editor.addLineClass(
-                      (res.data.result[0].linenumber - 2),
-                      'wrap', 'CodeMirror-activeline-background'
-                    );
-                    self.active_line_no = (res.data.result[0].linenumber - 2);
-
                     // Update the stack, local variables and parameters information
                     self.GetStackInformation(trans_id);
                   }
@@ -493,9 +500,7 @@ define([
                    As Once the EDB procedure execution is completed then we are
                    not getting any result so we need ignore the result.
                   */
-                  pgTools.DirectDebug.editor.removeLineClass(
+                  self.setActiveLine(-1);
-                    self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
-                  );
                   pgTools.DirectDebug.direct_execution_completed = true;
                   pgTools.DirectDebug.polling_timeout_idle = true;
 
@@ -524,9 +529,7 @@ define([
                 } else {
                   // Call function to create and update local variables ....
                   if (res.data.result != null) {
-                    pgTools.DirectDebug.editor.removeLineClass(
+                    self.setActiveLine(-1);
-                      self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
-                    );
                     self.AddResults(res.data.col_info, res.data.result);
                     pgTools.DirectDebug.results_panel.focus();
                     pgTools.DirectDebug.direct_execution_completed = true;
@@ -572,9 +575,7 @@ define([
                 );
               } else if (res.data.status === 'ERROR') {
                 pgTools.DirectDebug.direct_execution_completed = true;
-                pgTools.DirectDebug.editor.removeLineClass(
+                self.setActiveLine(-1);
-                  self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
-                );
 
                 //Set the Alertify message to inform the user that execution is
                 // completed with error.
@@ -837,9 +838,7 @@ define([
         .done(function(res) {
           if (res.data.status) {
             // Call function to create and update local variables ....
-            pgTools.DirectDebug.editor.removeLineClass(
+            self.setActiveLine(-1);
-              self.active_line_no, 'wrap', 'CodeMirror-activeline-background'
-            );
             pgTools.DirectDebug.direct_execution_completed = true;
             pgTools.DirectDebug.is_user_aborted_debugging = true;
 
@@ -1368,12 +1367,7 @@ define([
           if (res.data.status) {
             pgTools.DirectDebug.editor.setValue(res.data.result[0].src);
             self.UpdateBreakpoint(pgTools.DirectDebug.trans_id);
-            // active_line_no =
+            self.setActiveLine(res.data.result[0].linenumber - 2);
-            //   self.active_line_no = (res.data.result[0].linenumber - 2);
-            pgTools.DirectDebug.editor.addLineClass(
-              (res.data.result[0].linenumber - 2), 'wrap',
-              'CodeMirror-activeline-background'
-            );
             // Call function to create and update local variables ....
             self.GetLocalVariables(pgTools.DirectDebug.trans_id);
           }
@@ -1621,7 +1615,6 @@ define([
         if (res.data.status === 'Success') {
           self.intializePanels();
           // If status is Success then find the port number to attach the executer.
-          //self.start_execution(trans_id, res.data.result);
           controller.start_execution(trans_id, res.data.result);
         } else if (res.data.status === 'Busy') {
           // If status is Busy then poll the result by recursive call to the poll function
@@ -1770,10 +1763,10 @@ define([
           'stack_pane', wcDocker.DOCK.STACKED, self.parameters_panel);
 
       var editor_pane = $('<div id="stack_editor_pane" ' +
-        'class="full-container-pane info"></div>');
+        'class="pg-panel-content info"></div>');
       var code_editor_area = $('<textarea id="debugger-editor-textarea">' +
-        '</textarea>').append(editor_pane);
+        '</textarea>').appendTo(editor_pane);
-      self.code_editor_panel.layout().addItem(code_editor_area);
+      self.code_editor_panel.layout().addItem(editor_pane);
 
       // To show the line-number and set breakpoint marker details by user.
       self.editor = CodeMirror.fromTextArea(