Fixed an issue where Debugger and ERD tool panel give a blank white panel, missing from the last patch.

refs #6398

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

@@ -18,7 +18,7 @@ define([
   pgAdmin.Browser.Frame = function(options) {
     var defaults = [
       'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
-      'isPrivate', 'url', 'icon', 'onCreate',
+      'isPrivate', 'url', 'icon', 'onCreate', 'isLayoutMember',
     ];
     _.extend(this, _.pick(options, defaults));
   };
@@ -32,6 +32,7 @@ define([
     isClosable: true,
     isRenamable: false,
     isPrivate: false,
+    isLayoutMember: false,
     url: '',
     icon: '',
     panel: null,
@@ -43,6 +44,7 @@ define([
         docker.registerPanelType(this.name, {
           title: that.title,
           isPrivate: that.isPrivate,
+          isLayoutMember: that.isLayoutMember,
           onCreate: function(myPanel) {
             $(myPanel).data('pgAdminName', that.name);
             myPanel.initSize(that.width, that.height);

web/pgadmin/static/js/utils.js

@@ -11,6 +11,9 @@ import _ from 'underscore';
 import { getTreeNodeHierarchyFromIdentifier } from 'sources/tree/pgadmin_tree_node';
 import $ from 'jquery';
 import gettext from 'sources/gettext';
+import 'wcdocker';
+
+var wcDocker = window.wcDocker;
 
 export function parseShortcutValue(obj) {
   var shortcut = '';
@@ -408,3 +411,29 @@ function checkBinaryPathExists(binaryPathArray, selectedServerVersion) {
 
   return (serverSpecificPathExist | foundDefaultPath);
 }
+
+export function registerDetachEvent(panel){
+  panel.on(wcDocker.EVENT.DETACHED, function() {
+    $((this.$container)[0].ownerDocument).find('.wcIFrameFloating').attr({
+      style: 'z-index: 1200'
+    });
+  });
+  panel.on(wcDocker.EVENT.ORDER_CHANGED, function() {
+    $((this.$container)[0].ownerDocument).find('.wcIFrameFloating').attr({
+      style: 'z-index: 1200'
+    });
+  });
+  panel.on(wcDocker.EVENT.ORDER_CHANGED, function() {
+    var docker = this.docker(this._panel);
+    var dockerPos = docker.$container.offset();
+    var pos = this.$container.offset();
+    var width = this.$container.width();
+    var height = this.$container.height();
+
+    $((this.$container)[0].ownerDocument).find('.wcIFrameFloating').css('top', pos.top - dockerPos.top);
+    $((this.$container)[0].ownerDocument).find('.wcIFrameFloating').css('left', pos.left - dockerPos.left);
+    $((this.$container)[0].ownerDocument).find('.wcIFrameFloating').css('width', width);
+    $((this.$container)[0].ownerDocument).find('.wcIFrameFloating').find('.wcIFrameFloating').css('height', height);
+  });
+
+}

web/pgadmin/tools/datagrid/static/js/datagrid.js

@@ -213,19 +213,6 @@ define('pgadmin.datagrid', [
         showQueryTool.showQueryTool(this, pgBrowser, alertify, url, aciTreeIdentifier, transId);
       },
 
-      resize_the_queryTool: function(){
-        var docker = this.docker(this._panel);
-        var dockerPos = docker.$container.offset();
-        var pos = this.$container.offset();
-        var width = this.$container.width();
-        var height = this.$container.height();
-
-        $(wcDocker).find('.wcIFrameFloating').css('top', pos.top - dockerPos.top);
-        $(wcDocker).find('.wcIFrameFloating').css('left', pos.left - dockerPos.left);
-        $(wcDocker).find('.wcIFrameFloating').css('width', width);
-        $(wcDocker).find('.wcIFrameFloating').css('height', height);
-      },
-
       launch_grid: function(trans_id, panel_url, is_query_tool, panel_title, sURL=null, sql_filter=null) {
 
         let queryToolForm = `
@@ -283,19 +270,7 @@ define('pgadmin.datagrid', [
             });
           });
 
-          queryToolPanel.on(wcDocker.EVENT.DETACHED, function() {
+          commonUtils.registerDetachEvent(queryToolPanel);
-            $(wcDocker).find('.wcIFrameFloating').attr({
-              style: 'z-index: 1200'
-            });
-          });
-
-          queryToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, function() {
-            $(wcDocker).find('.wcIFrameFloating').attr({
-              style: 'z-index: 1200'
-            });
-          });
-
-          queryToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, this.resize_the_queryTool);
 
           // Listen on the panelRename event.
           queryToolPanel.on(wcDocker.EVENT.RENAME, function(panel_data) {

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

@@ -10,11 +10,11 @@
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'backbone',
   'pgadmin.alertifyjs', 'sources/pgadmin', 'pgadmin.browser',
-  'pgadmin.backgrid', 'sources/window', 'pgadmin.tools.debugger.utils',
+  'pgadmin.backgrid', 'sources/window', 'pgadmin.tools.debugger.utils','sources/utils',
   'wcdocker',
 ], function(
   gettext, url_for, $, _, Backbone, Alertify, pgAdmin, pgBrowser, Backgrid,
-  pgWindow, debuggerUtils,
+  pgWindow, debuggerUtils, commonUtils,
 ) {
 
   var wcDocker = window.wcDocker;
@@ -796,7 +796,7 @@ define([
                           method: 'DELETE',
                         });
                       });
-
+                      commonUtils.registerDetachEvent(panel);
                       // Panel Rename event
                       panel.on(wcDocker.EVENT.RENAME, function(panel_data) {
                         Alertify.prompt('', panel_data.$titleText[0].textContent,

web/pgadmin/tools/erd/static/js/erd_module.js

@@ -10,7 +10,7 @@
 import Alertify from 'pgadmin.alertifyjs';
 import {getTreeNodeHierarchyFromIdentifier} from 'sources/tree/pgadmin_tree_node';
 import {getPanelTitle} from 'tools/datagrid/static/js/datagrid_panel_title';
-import {getRandomInt} from 'sources/utils';
+import {getRandomInt, registerDetachEvent} from 'sources/utils';
 
 
 export function setPanelTitle(erdToolPanel, panelTitle) {
@@ -165,7 +165,8 @@ export function initialize(gettext, url_for, $, _, pgAdmin, csrfToken, pgBrowser
             method: 'DELETE',
           });
         });
-
+        // Register detach event.
+        registerDetachEvent(erdToolPanel);
         var openErdToolURL = function(j) {
           // add spinner element
           let $spinner_el =

web/pgadmin/tools/psql/static/js/psql_module.js

@@ -14,7 +14,7 @@ import { io } from 'socketio';
 import Alertify from 'pgadmin.alertifyjs';
 import {enable} from 'pgadmin.browser.toolbar';
 import 'wcdocker';
-import {getRandomInt, hasBinariesConfiguration} from 'sources/utils';
+import {getRandomInt, hasBinariesConfiguration, registerDetachEvent} from 'sources/utils';
 import {retrieveAncestorOfTypeServer} from 'sources/tree/tree_utils';
 import pgWindow from 'sources/window';
 
@@ -180,19 +180,7 @@ export function initialize(gettext, url_for, $, _, pgAdmin, csrfToken, Browser)
         var propertiesPanel = pgBrowser.docker.findPanels('properties');
         var psqlToolPanel = pgBrowser.docker.addPanel('frm_psqltool', wcDocker.DOCK.STACKED, propertiesPanel[0]);
 
-        psqlToolPanel.on(wcDocker.EVENT.DETACHED, function() {
+        registerDetachEvent(psqlToolPanel);
-          $(wcDocker).find('.wcIFrameFloating').attr({
-            style: 'z-index: 1200'
-          });
-        });
-
-        psqlToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, function() {
-          $(wcDocker).find('.wcIFrameFloating').attr({
-            style: 'z-index: 1200'
-          });
-        });
-
-        psqlToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, this.resize_the_psql);
 
         // Set panel title and icon
         setPanelTitle(psqlToolPanel, panelTitle);
@@ -230,18 +218,6 @@ export function initialize(gettext, url_for, $, _, pgAdmin, csrfToken, Browser)
       }
 
     },
-    resize_the_psql: function(){
-      var docker = this.docker(this._panel);
-      var dockerPos = docker.$container.offset();
-      var pos = this.$container.offset();
-      var width = this.$container.width();
-      var height = this.$container.height();
-
-      $(wcDocker).find('.wcIFrameFloating').css('top', pos.top - dockerPos.top);
-      $(wcDocker).find('.wcIFrameFloating').css('left', pos.left - dockerPos.left);
-      $(wcDocker).find('.wcIFrameFloating').css('width', width);
-      $(wcDocker).find('.wcIFrameFloating').css('height', height);
-    },
     getPanelUrls: function(transId, panelTitle, parentData) {
       let openUrl = url_for('psql.panel', {
         trans_id: transId,