Fix the properties toolbar at the top of the panel so it's always

visible.

This patch also introduce a callback 'onCreate' for each panel, and
frame, which will be called whenever a panel/frame is being created.

web/pgadmin/browser/static/js/frame.js

@@ -7,7 +7,7 @@ function(_, pgAdmin) {
   pgAdmin.Browser.Frame = function(options) {
     var defaults = [
       'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
-      'isPrivate', 'url', 'icon'];
+      'isPrivate', 'url', 'icon', 'onCreate'];
     _.extend(this, _.pick(options, defaults));
   }
 
@@ -23,6 +23,7 @@ function(_, pgAdmin) {
     icon: '',
     panel: null,
     frame: null,
+    onCreate: null,
     load: function(docker) {
       var that = this;
       if (!that.panel) {
@@ -85,6 +86,10 @@ function(_, pgAdmin) {
                 wcDocker.EVENT.SCROLLED], function(ev) {
                   myPanel.on(ev, that.eventFunc.bind(myPanel, ev));
                 });
+
+            if (that.onCreate && _.isFunction(that.onCreate)) {
+              that.onCreate.apply(that, [myPanel, frame, $container]);
+            }
           }
         });
       }

web/pgadmin/browser/static/js/panel.js

@@ -7,7 +7,7 @@ function(_, pgAdmin) {
   pgAdmin.Browser.Panel = function(options) {
     var defaults = [
       'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
-      'isPrivate', 'content', 'icon', 'events'];
+      'isPrivate', 'content', 'icon', 'events', 'onCreate'];
     _.extend(this, _.pick(options, defaults));
   }
 
@@ -22,6 +22,7 @@ function(_, pgAdmin) {
     content: '',
     icon: '',
     panel: null,
+    onCreate: null,
     load: function(docker, title) {
       var that = this;
       if (!that.panel) {
@@ -40,13 +41,12 @@ function(_, pgAdmin) {
                 myPanel.icon(that.icon)
             }
 
+            var $container = $('<div>', {
+              'class': 'pg-panel-content'
+            }).append($(that.content));
+
             myPanel.closeable(!!that.isCloseable);
-            myPanel.layout().addItem(
-              $('<div>', {
-                'class': 'pg-panel-content'
-              })
-              .append($(that.content))
-            );
+            myPanel.layout().addItem($container);
             that.panel = myPanel;
             if (that.events && _.isObject(that.events)) {
               _.each(that.events, function(v, k) {
@@ -67,6 +67,10 @@ function(_, pgAdmin) {
                 wcDocker.EVENT.SCROLLED], function(ev) {
                   myPanel.on(ev, that.eventFunc.bind(myPanel, ev));
                 });
+
+            if (that.onCreate && _.isFunction(that.onCreate)) {
+              that.onCreate.apply(that, [myPanel, $container]);
+            }
           }
         });
       }

web/pgadmin/browser/templates/browser/js/browser.js

@@ -69,7 +69,10 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
         isCloseable: false,
         isPrivate: true,
         content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">{{ _('Please select an object in the tree view.') }}</div></div>',
-        events: panelEvents
+        events: panelEvents,
+        onCreate: function(myPanel, $container) {
+          $container.addClass('pg-no-overflow');
+        }
       }),
       // Statistics of the object
       'statistics': new pgAdmin.Browser.Panel({

web/pgadmin/browser/templates/browser/js/node.js

@@ -241,7 +241,10 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
           showTitle: true,
           isCloseable: true,
           isPrivate: true,
-          content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">{{ _('Please select an object in the tree view.') }}</div></div>'
+          content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">{{ _('Please wait while we fetch information about the node from the server!') }}</div></div>',
+            onCreate: function(myPanel, $container) {
+              $container.addClass('pg-no-overflow');
+            }
         });
       p.load(pgBrowser.docker);
     },

web/pgadmin/static/css/overrides.css

@@ -375,14 +375,23 @@ iframe {
     padding-top: 0;
     padding-right: 0;
     padding-left: 0;
+    height: 100%;
 }
 
+/* A generic class to make the overflow hidden of a DOM element */
+.pg-no-overflow {
+    overflow: hidden;
+}
+
+
 .pg-prop-has-btn-group-below {
     margin-bottom: 33px;
 }
 
 .has-pg-prop-btn-group {
-    top: 48px;
+    top: 39px;
+    padding-top: 8px;
+    height: calc(100% - 39px);
 }
 
 .pg-prop-content > div {