Inspector - added a constructor parameter if the dev wants to open the inspector as popup

dist/preview release/inspector/babylon.inspector.d.ts

@@ -19,10 +19,10 @@ declare module INSPECTOR {
         /** The original canvas style, before applying the inspector*/
         private _canvasStyle;
         /** The inspector is created with the given engine.
-         * If a HTML parent is not given as a parameter, the inspector is created as a right panel on the main window.
-         * If a HTML parent is given, the inspector is created in this element, taking full size of its parent.
+         * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+         * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        constructor(scene: BABYLON.Scene, parent?: HTMLElement);
+        constructor(scene: BABYLON.Scene, popup?: boolean);
         /** Build the inspector panel in the given HTML element */
         private _buildInspector(parent);
         scene: BABYLON.Scene;
@@ -40,8 +40,10 @@ declare module INSPECTOR {
          * remove the right panel and remove the wrapper
          */
         dispose(): void;
-        /** Open the inspector in a new popup */
-        openPopup(): void;
+        /** Open the inspector in a new popup
+         * Set 'firstTime' to true if there is no inspector created beforehands
+         */
+        openPopup(firstTime?: boolean): void;
     }
 }
 

dist/preview release/inspector/babylon.inspector.js

@@ -2,10 +2,10 @@ var INSPECTOR;
 (function (INSPECTOR) {
     var Inspector = (function () {
         /** The inspector is created with the given engine.
-         * If a HTML parent is not given as a parameter, the inspector is created as a right panel on the main window.
-         * If a HTML parent is given, the inspector is created in this element, taking full size of its parent.
+         * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+         * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        function Inspector(scene, parent) {
+        function Inspector(scene, popup) {
             var _this = this;
             /** True if the inspector is built as a popup tab */
             this._popupMode = false;
@@ -15,9 +15,9 @@ var INSPECTOR;
             Inspector.DOCUMENT = window.document;
             Inspector.WINDOW = window;
             // POPUP MODE if parent is defined
-            if (parent) {
+            if (popup) {
                 // Build the inspector in the given parent
-                this._buildInspector(parent);
+                this.openPopup(true); // set to true in order to NOT dispose the inspector (done in openPopup), as it's not existing yet
             }
             else {
                 // Get canvas and its DOM parent
@@ -163,8 +163,10 @@ var INSPECTOR;
                 INSPECTOR.Helpers.SEND_EVENT('resize');
             }
         };
-        /** Open the inspector in a new popup */
-        Inspector.prototype.openPopup = function () {
+        /** Open the inspector in a new popup
+         * Set 'firstTime' to true if there is no inspector created beforehands
+         */
+        Inspector.prototype.openPopup = function (firstTime) {
             // Create popup
             var popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
             popup.document.title = 'Babylon.js INSPECTOR';
@@ -180,8 +182,10 @@ var INSPECTOR;
                 link.href = links[l].href;
                 popup.document.head.appendChild(link);
             }
-            // Dispose the right panel
-            this.dispose();
+            // Dispose the right panel if existing
+            if (!firstTime) {
+                this.dispose();
+            }
             // set the mode as popup
             this._popupMode = true;
             // Save the HTML document

inspector/src/Inspector.ts

@@ -23,10 +23,10 @@ module INSPECTOR {
         private _canvasStyle :any ;
 
         /** The inspector is created with the given engine.
-         * If a HTML parent is not given as a parameter, the inspector is created as a right panel on the main window.
-         * If a HTML parent is given, the inspector is created in this element, taking full size of its parent.
+         * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+         * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        constructor(scene: BABYLON.Scene, parent?:HTMLElement) {
+        constructor(scene: BABYLON.Scene, popup?:boolean) {
 
             // get canvas parent only if needed.
             this._scene     = scene;
@@ -36,9 +36,9 @@ module INSPECTOR {
             Inspector.WINDOW = window;                       
             
             // POPUP MODE if parent is defined
-            if (parent) {    
+            if (popup) {    
                 // Build the inspector in the given parent
-                this._buildInspector(parent);
+                this.openPopup(true);// set to true in order to NOT dispose the inspector (done in openPopup), as it's not existing yet
             } else {        
                 // Get canvas and its DOM parent
                 let canvas            = this._scene.getEngine().getRenderingCanvas();            
@@ -202,8 +202,10 @@ module INSPECTOR {
             }
         }
         
-        /** Open the inspector in a new popup */
-        public openPopup() {    
+        /** Open the inspector in a new popup
+         * Set 'firstTime' to true if there is no inspector created beforehands
+         */
+        public openPopup(firstTime?:boolean) {    
             // Create popup
             let popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
             popup.document.title = 'Babylon.js INSPECTOR';
@@ -219,8 +221,10 @@ module INSPECTOR {
                 link.href = (links[l] as HTMLLinkElement).href;
                 popup.document.head.appendChild(link);              
             } 
-            // Dispose the right panel
-            this.dispose();
+            // Dispose the right panel if existing
+            if (!firstTime) {
+                this.dispose();
+            }
             // set the mode as popup
             this._popupMode = true;
             // Save the HTML document

inspector/test/index.js

@@ -17,7 +17,7 @@ var Test = (function () {
         var _this = this;
         this._initScene();
         // BABYLON.DebugLayer.InspectorURL = 'http://localhost:1338/dist/preview release/inspector/babylon.inspector.js';
-        this.scene.debugLayer.show();
+        this.scene.debugLayer.show(true);
         this.scene.executeWhenReady(function () {
             _this._initGame();
             _this.engine.runRenderLoop(function () {

src/Debug/babylon.debugLayer.ts

@@ -14,9 +14,9 @@ module BABYLON {
         }
 
         /** Creates the inspector window. */
-        private _createInspector() {
+        private _createInspector(popup?:boolean) {
             if (!this._inspector) {
-                this._inspector = new INSPECTOR.Inspector(this._scene);
+                this._inspector = new INSPECTOR.Inspector(this._scene, popup);
             } // else nothing to do,; instance is already existing
         }
         
@@ -31,13 +31,13 @@ module BABYLON {
             }
         }
         
-        public show() {
+        public show(popup?:boolean) {
             if (typeof INSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
-                Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this));
+                Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, popup));
             } else {
                 // Otherwise creates the inspector
-                this._createInspector();
+                this._createInspector(popup);
             }
         }