From 016de5dc88111bcf5e6769b92f745a1797bdbde5 Mon Sep 17 00:00:00 2001
From: Surinder Kumar <surinder.kumar@enterprisedb.com>
Date: Thu, 15 Sep 2016 10:14:51 +0100
Subject: [PATCH] Fix scrolling in the query tool editor. Fixes #1579

---
 web/pgadmin/templates/base.html                      |  2 ++
 web/pgadmin/tools/sqleditor/static/css/sqleditor.css | 12 ++++++++++++
 .../sqleditor/templates/sqleditor/js/sqleditor.js    | 11 ++++++-----
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index 53aaf8d4a..db76f6131 100755
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -50,6 +50,8 @@
           href="{{ url_for('static', filename='css/slickgrid/slick-default-theme.css')}}"/>
     <link type="text/css" rel="stylesheet"
           href="{{ url_for('static', filename='css/slickgrid/smoothness/jquery-ui-1.11.3.custom.css' if config.DEBUG else 'css/slickgrid/smoothness/jquery-ui-1.11.3.custom.min.css')}}"/>
+    <link type="text/css" rel="stylesheet"
+          href="{{ url_for('static', filename='js/codemirror/addon/scroll/simplescrollbars.css')}}"/>
 
     <!-- View specified stylesheets -->
     {% for stylesheet in current_app.stylesheets %}
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 5ecfa5f54..1046366d8 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -156,6 +156,18 @@
     min-height: 100%;
 }
 
+/* Changes specific to output panel of query tool */
+#output-panel, #output-panel .CodeMirror, #output-panel .CodeMirror-gutters {
+  height: 100% !important;
+}
+
+#output-panel .CodeMirror-gutter-wrapper {
+  width: 43px;
+  height: 22px;
+  border-right: 1px solid #ddd !important;
+  background: #f7f7f7 !important;
+}
+
 .CodeMirror-foldgutter {
   width: .9em;
 }
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 75205d319..d81e79dae 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -7,7 +7,7 @@ define(
     'codemirror/addon/selection/active-line',
     'codemirror/addon/fold/foldgutter', 'codemirror/addon/fold/foldcode',
     'codemirror/addon/hint/show-hint', 'codemirror/addon/hint/sql-hint',
-    'codemirror/addon/fold/pgadmin-sqlfoldcode',
+    'codemirror/addon/fold/pgadmin-sqlfoldcode','codemirror/addon/scroll/simplescrollbars',
     'backgrid.sizeable.columns', 'wcdocker', 'pgadmin.file_manager'
   ],
   function(
@@ -191,9 +191,9 @@ define(
         sql_panel.load(main_docker);
         var sql_panel_obj = main_docker.addPanel('sql_panel', wcDocker.DOCK.TOP);
 
-        var output_container = $('<div id="output-panel"></div>');
-        var text_container = $('<textarea id="sql_query_tool"></textarea>').append(output_container);
-        sql_panel_obj.layout().addItem(text_container);
+        var text_container = $('<textarea id="sql_query_tool"></textarea>');
+        var output_container = $('<div id="output-panel"></div>').append(text_container);
+        sql_panel_obj.$container.find('.pg-panel-content').append(output_container);
 
         self.query_tool_obj = CodeMirror.fromTextArea(text_container.get(0), {
             lineNumbers: true,
@@ -210,7 +210,8 @@ define(
             },
             gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
             extraKeys: pgBrowser.editor_shortcut_keys,
-            tabSize: pgAdmin.Browser.editor_options.tabSize
+            tabSize: pgAdmin.Browser.editor_options.tabSize,
+            scrollbarStyle: 'simple'
         });
 
         // Create panels for 'Data Output', 'Explain', 'Messages' and 'History'