Improvement in the look and feel of the whole application

Changed the SCSS/CSS for the below third party libraries to adopt the
new look 'n' feel:
- wcDocker
- Alertify dialogs, and notifications
- AciTree
- Bootstrap Navbar
- Bootstrap Tabs
- Bootstrap Drop-Down menu
- Backgrid
- Select2

Adopated the new the look 'n' feel for the dialogs, wizard, properties,
tab panels, tabs, fieldset, subnode control, spinner control, HTML
table, and other form controls.

- Font is changed to Roboto
- Using SCSS variables to define the look 'n' feel
- Designer background images for the Login, and Forget password pages in
  'web' mode
- Improved the look 'n' feel for the key selection in the preferences
  dialog
- Table classes consistency changes across the application
- File Open and Save dialog list view changes

Author(s): Aditya Toshniwal & Khushboo Vashi

web/pgadmin/tools/debugger/static/css/debugger.css

@@ -1,10 +1,3 @@
-#container {
-  position: absolute;
-  top: 40px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-}
 
 .full-container {
   position: absolute;
@@ -29,29 +22,4 @@
   width: 100%;
   position: absolute;
   top: 0; bottom: 0; right: 0; left: 0;
-}
-
-.debugger-container .breakpoints {
-  width: 0.9em;
-}
-
-.CodeMirror, .CodeMirror-gutters {
-  min-height: 100%;
-}
-
-.CodeMirror-foldgutter {
-  width: .9em;
-}
-
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
-  cursor: pointer;
-}
-
-.CodeMirror-foldgutter-open:after {
-  content: "\25BC";
-}
-
-.CodeMirror-foldgutter-folded:after {
-  content: "\25B6";
-}
+}

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

@@ -179,7 +179,7 @@ define([
         width: 500,
         isCloseable: true,
         isPrivate: true,
-        icon: 'fa fa-arrow-circle-right',
+        icon: 'fa fa-bug',
         url: 'about:blank',
       });
 

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

@@ -551,7 +551,7 @@ define([
             var grid = this.grid = new Backgrid.Grid({
               columns: gridCols,
               collection: this.debuggerInputArgsColl,
-              className: 'backgrid table-bordered',
+              className: 'backgrid table table-bordered table-noouter-border table-bottom-border',
             });
 
             grid.render();
@@ -574,16 +574,14 @@ define([
           setup: function() {
             return {
               buttons: [{
-                text: gettext('Debug'),
-                key: 13,
-                className: 'btn btn-primary',
-              },
-              {
                 text: gettext('Cancel'),
                 key: 27,
-                className: 'btn btn-primary',
-              },
-              ],
+                className: 'btn btn-secondary fa fa-times pg-alertify-button',
+              },{
+                text: gettext('Debug'),
+                key: 13,
+                className: 'btn btn-primary fa fa-bug pg-alertify-button',
+              }],
               // Set options for dialog
               options: {
                 //disable both padding and overflow control.
@@ -896,9 +894,9 @@ define([
              enable the debug button otherwise disable the debug button.
             */
             if (this.func_args_data.length == 0) {
-              this.__internal.buttons[0].element.disabled = true;
+              this.__internal.buttons[1].element.disabled = true;
             } else {
-              this.__internal.buttons[0].element.disabled = false;
+              this.__internal.buttons[1].element.disabled = false;
             }
 
             /*
@@ -915,7 +913,7 @@ define([
                     for (var i = 0; i < this.collection.length; i++) {
 
                       if (this.collection.models[i].get('is_null')) {
-                        obj.__internal.buttons[0].element.disabled = false;
+                        obj.__internal.buttons[1].element.disabled = false;
                         enable_btn = true;
                         continue;
                       }
@@ -926,15 +924,15 @@ define([
                         enable_btn = true;
 
                         if (this.collection.models[i].get('use_default')) {
-                          obj.__internal.buttons[0].element.disabled = false;
+                          obj.__internal.buttons[1].element.disabled = false;
                         } else {
-                          obj.__internal.buttons[0].element.disabled = true;
+                          obj.__internal.buttons[1].element.disabled = true;
                           break;
                         }
                       }
                     }
                     if (!enable_btn)
-                      obj.__internal.buttons[0].element.disabled = false;
+                      obj.__internal.buttons[1].element.disabled = false;
                   };
                 })(this)
             );

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

@@ -1068,6 +1068,7 @@ define([
 
         // Initialize a new Grid instance
         var stack_grid = this.stack_grid = new Backgrid.Grid({
+          emptyText: 'No data found',
           columns: stackGridCols,
           row: Backgrid.Row.extend({
             events: {
@@ -1084,7 +1085,7 @@ define([
             },
           }),
           collection: stackColl,
-          className: 'backgrid table-bordered',
+          className: 'backgrid table table-bordered table-noouter-border table-bottom-border',
         });
 
         stack_grid.render();
@@ -1132,9 +1133,10 @@ define([
 
         // Initialize a new Grid instance
         var result_grid = this.result_grid = new Backgrid.Grid({
+          emptyText: 'No data found',
           columns: resultGridCols,
           collection: new ResultsCollection(result),
-          className: 'backgrid table-bordered',
+          className: 'backgrid table table-bordered table-noouter-border table-bottom-border',
         });
 
         result_grid.render();
@@ -1209,9 +1211,10 @@ define([
 
         // Initialize a new Grid instance
         var variable_grid = this.variable_grid = new Backgrid.Grid({
+          emptyText: 'No data found',
           columns: gridCols,
           collection: new VariablesCollection(my_obj),
-          className: 'backgrid table-bordered',
+          className: 'backgrid table table-bordered table-noouter-border table-bottom-border',
         });
 
         variable_grid.collection.on(
@@ -1294,9 +1297,10 @@ define([
 
         // Initialize a new Grid instance
         var param_grid = this.param_grid = new Backgrid.Grid({
+          emptyText: 'No data found',
           columns: paramGridCols,
           collection: new ParametersCollection(param_obj),
-          className: 'backgrid table-bordered',
+          className: 'backgrid table table-bordered table-noouter-border table-bottom-border',
         });
 
         param_grid.collection.on(
@@ -1550,6 +1554,7 @@ define([
         '#container', {
           allowContextMenu: false,
           allowCollapse: false,
+          loadingClass: 'pg-sp-icon',
           themePath: url_for('static', {
             'filename': 'css',
           }),

web/pgadmin/tools/debugger/static/scss/_debugger.scss

@@ -2,14 +2,6 @@
   background: $color-editor-activeline;
 }
 
-.CodeMirror-foldmarker {
-  color: $color-editor-foldmarker;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: $font-family-primary;
-  line-height: .3;
-  cursor: pointer;
-}
-
 /* To make font same as Query tool in messages tab */
 .messages {
     white-space: pre-wrap;

web/pgadmin/tools/debugger/templates/debugger/direct.html

@@ -32,56 +32,53 @@ try {
     .alertify-notifier{-webkit-transform: none;}
     .alertify-notifier .ajs-message{-webkit-transform: none;}
     .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
-    .debugger-container .wcLoadingIcon.fa-pulse{-webkit-animation: none;}
 </style>
 {% endif %}
 <div class="debugger_main_container" tabindex="0">
-    <nav class="navbar navbar-expand-lg fixed-top">
-        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
-            <div class="btn-group" role="group" aria-label="">
-                <button type="button" class="btn btn-default btn-step-into" id="btn-step-into"
-                        title=""
-                        accesskey=""
-                        tabindex="0" autofocus="autofocus">
-                    <i class="fa fa-indent"></i>
-                </button>
-                <button type="button" class="btn btn-default btn-step-over" id="btn-step-over"
-                        title=""
-                        accesskey=""
-                        tabindex="0">
-                    <i class="fa fa-outdent"></i>
-                </button>
-                <button type="button" class="btn btn-default btn-continue" id="btn-continue"
-                        title=""
-                        accesskey=""
-                        tabindex="0">
-                    <i class="fa fa-play-circle"></i>
-                </button>
-            </div>
-            <div class="btn-group" role="group" aria-label="">
-                <button type="button" class="btn btn-default btn-toggle-breakpoint" id="btn-toggle-breakpoint"
-                        title=""
-                        accesskey=""
-                        tabindex="0">
-                    <i class="fa fa-circle"></i>
-                </button>
-                <button type="button" class="btn btn-default btn-clear-breakpoint" id="btn-clear-breakpoint"
-                        title=""
-                        accesskey=""
-                        tabindex="0">
-                    <i class="fa fa-ban"></i>
-                </button>
-            </div>
-            <div class="btn-group" role="group" aria-label="">
-                <button type="button" class="btn btn-default btn-stop" id="btn-stop"
-                        accesskey=""
-                        title=""
-                        tabindex="0">
-                    <i class="fa fa-stop-circle"></i>
-                </button>
-            </div>
+    <div id="btn-toolbar" class="editor-toolbar" role="toolbar" aria-label="">
+        <div class="btn-group" role="group" aria-label="">
+            <button type="button" class="btn btn-sm btn-secondary btn-step-into" id="btn-step-into"
+                    title=""
+                    accesskey=""
+                    tabindex="0" autofocus="autofocus">
+                <i class="fa fa-indent sql-icon-lg"></i>
+            </button>
+            <button type="button" class="btn btn-sm btn-secondary btn-step-over" id="btn-step-over"
+                    title=""
+                    accesskey=""
+                    tabindex="0">
+                <i class="fa fa-outdent sql-icon-lg"></i>
+            </button>
+            <button type="button" class="btn btn-sm btn-secondary btn-continue" id="btn-continue"
+                    title=""
+                    accesskey=""
+                    tabindex="0">
+                <i class="fa fa-play-circle sql-icon-lg"></i>
+            </button>
         </div>
-    </nav>
+        <div class="btn-group" role="group" aria-label="">
+            <button type="button" class="btn btn-sm btn-secondary btn-toggle-breakpoint" id="btn-toggle-breakpoint"
+                    title=""
+                    accesskey=""
+                    tabindex="0">
+                <i class="fa fa-circle sql-icon-lg"></i>
+            </button>
+            <button type="button" class="btn btn-sm btn-secondary btn-clear-breakpoint" id="btn-clear-breakpoint"
+                    title=""
+                    accesskey=""
+                    tabindex="0">
+                <i class="fa fa-ban sql-icon-lg"></i>
+            </button>
+        </div>
+        <div class="btn-group" role="group" aria-label="">
+            <button type="button" class="btn btn-sm btn-secondary btn-stop" id="btn-stop"
+                    accesskey=""
+                    title=""
+                    tabindex="0">
+                <i class="fa fa-stop-circle sql-icon-lg"></i>
+            </button>
+        </div>
+    </div>
     <div id="container" class="debugger-container" tabindex="0"></div>
 </div>
 {% endblock %}