Overhaul the query history tab to allow browsing of the history and full query text. Fixes #2282

Patch by Joao and the team at Pivotal.

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

@@ -55,12 +55,6 @@ iframe {
     border-width: 0;
 }
 
-/* Ensure the codemirror editor displays full height gutters when resized */
-.CodeMirror, .CodeMirror-gutter {
-    height: 100% !important;
-    min-height: 100% !important;
-}
-
 /* Padding for the treeview */
 .browser-browser-pane {
     padding-left: 0;
@@ -926,22 +920,6 @@ td.edit-cell.editable.sortable.renderable.editor {
     padding: 0px;
 }
 
-/*
- * Remove border right from "CodeMirror-gutters"
- * class becuase its height doesn't increase
- * with every new line added, instead add border
- * right to ".CodeMirror-linenumber" class which
- * adds a new div for every new line added
- */
-.sql_field_layout .CodeMirror-gutters {
-    border-right: none;
-}
-
-.sql_field_layout .CodeMirror-linenumber {
-    border-right: 1px solid #ddd;
-    background-color: #f7f7f7;
-}
-
 .tab-pane.SQL {
   padding: 0px 7px 0px 0px;
   height: 100%;
@@ -1420,22 +1398,6 @@ table.backgrid {
   background: none;
 }
 
-/* class to disable Codemirror editor */
-.cm_disabled {
-  background: #EEEEEE;
-}
-
-/* make syntax-highlighting bold */
-.cm-s-default .cm-keyword {
-  font-weight: 600;
-  color: #908;
-}
-
-.cm-s-default .cm-number {
-  font-weight: 600;
-  color: #964;
-}
-
 .pgadmin-controls.sql_field_layout {
   margin: 0;
   padding: 0;
@@ -1443,10 +1405,6 @@ table.backgrid {
   z-index: 1;
 }
 
-.pgadmin-controls.sql_field_layout .CodeMirror {
-  line-height: 22px;
-}
-
 .pgadmin-controls.focused {
   border-color: #66afe9;
   outline: 0;
@@ -1502,22 +1460,6 @@ body {
   user-select: text;
 }
 
-/* Codemirror buttons */
-.CodeMirror-dialog button {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: white;
-    font-size: 70%;
-    background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
-    background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
-    background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
-    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-    background-repeat: repeat-x;
-    border-color: #245580;
-    border-radius: 4px;
-}
-
 .dashboard-tab-container table,
 .pg-panel-statistics-container table,
 .pg-panel-depends-container table,

web/pgadmin/static/css/codemirror.overrides.css

@@ -3,3 +3,69 @@
     color: #333333 !important;
     background-color: #e8e8e8 !important;
 }
+
+/* Ensure the codemirror editor displays full height gutters when resized */
+.CodeMirror, .CodeMirror-gutter {
+    height: 100% !important;
+    min-height: 100% !important;
+}
+
+/*
+ * Remove border right from "CodeMirror-gutters"
+ * class becuase its height doesn't increase
+ * with every new line added, instead add border
+ * right to ".CodeMirror-linenumber" class which
+ * adds a new div for every new line added
+ */
+.sql_field_layout .CodeMirror-gutters {
+    border-right: none;
+}
+
+.sql_field_layout .CodeMirror-linenumber {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+}
+
+/* class to disable Codemirror editor */
+.cm_disabled {
+  background: #EEEEEE;
+}
+
+/* make syntax-highlighting bold */
+.cm-s-default .cm-keyword {
+  font-weight: 600;
+  color: #908;
+}
+
+.cm-s-default .cm-number {
+  font-weight: 600;
+  color: #964;
+}
+
+.pgadmin-controls.sql_field_layout .CodeMirror {
+  line-height: 22px;
+}
+
+/* Codemirror buttons */
+.CodeMirror-dialog button {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: white;
+    font-size: 70%;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+    background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+    background-repeat: repeat-x;
+    border-color: #245580;
+    border-radius: 4px;
+}
+
+#history-detail-query .CodeMirror {
+  border: 1px solid #CCCCCC;
+  background-color: #F7F7F7;
+  width: 100%;
+  padding-left: 5px;
+  position: absolute;
+}

web/pgadmin/static/css/pgadmin.css

@@ -781,3 +781,35 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .user-language select{
   height: 25px !important;
 }
+
+.Resizer {
+  background: #dddddd;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.Resizer.horizontal {
+  width: 100%;
+  height: 4px;
+  cursor: ew-resize;
+  border-bottom: 1px solid #aaaaaa;
+}
+
+.Resizer.vertical {
+  width: 4px;
+  cursor: ew-resize;
+  border-right: 1px solid #aaaaaa;
+}
+
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+
+.Resizer.disabled:hover {
+  border-color: transparent;
+}