Inspector - Fix bug when the canvas has a specific style (position:absolute for example). That fixes the sandbox issue.

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

@@ -14,8 +14,8 @@ declare module INSPECTOR {
         static DOCUMENT: HTMLDocument;
         /** True if the inspector is built as a popup tab */
         private _popupMode;
-        /** The original canvas size, before applying the inspector*/
-        private _canvasSize;
+        /** 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.

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

@@ -25,13 +25,44 @@ var INSPECTOR;
                 // resize canvas
                 // canvas.style.width = 'calc(100% - 750px - 12px)';
                 // get canvas style                
-                var canvasStyle = window.getComputedStyle(canvas);
-                this._canvasSize = { width: canvasStyle.width, height: canvasStyle.height };
+                var canvasOrigStyle = window.getComputedStyle(canvas);
+                this._canvasStyle = {
+                    width: canvasOrigStyle.width,
+                    height: canvasOrigStyle.height,
+                    position: canvasOrigStyle.position,
+                    padding: canvasOrigStyle.padding,
+                    paddingBottom: canvasOrigStyle.paddingBottom,
+                    paddingLeft: canvasOrigStyle.paddingLeft,
+                    paddingTop: canvasOrigStyle.paddingTop,
+                    paddingRight: canvasOrigStyle.paddingRight,
+                    margin: canvasOrigStyle.margin,
+                    marginBottom: canvasOrigStyle.marginBottom,
+                    marginLeft: canvasOrigStyle.marginLeft,
+                    marginTop: canvasOrigStyle.marginTop,
+                    marginRight: canvasOrigStyle.marginRight
+                };
                 // Create c2di wrapper
-                this._c2diwrapper = INSPECTOR.Helpers.CreateDiv('insp-wrapper', canvasParent);
-                this._c2diwrapper.style.width = this._canvasSize.width;
-                this._c2diwrapper.style.height = this._canvasSize.height;
-                // Add canvas to the wrapper
+                this._c2diwrapper = INSPECTOR.Helpers.CreateDiv('insp-wrapper');
+                // copy style from canvas to wrapper
+                for (var prop in this._canvasStyle) {
+                    this._c2diwrapper.style[prop] = this._canvasStyle[prop];
+                }
+                // reset canvas style
+                canvas.style.position = "static";
+                canvas.style.width = "100%";
+                canvas.style.height = "100%";
+                canvas.style.paddingBottom = "0";
+                canvas.style.paddingLeft = "0";
+                canvas.style.paddingTop = "0";
+                canvas.style.paddingRight = "0";
+                canvas.style.margin = "0";
+                canvas.style.marginBottom = "0";
+                canvas.style.marginLeft = "0";
+                canvas.style.marginTop = "0";
+                canvas.style.marginRight = "0";
+                // Replace canvas with the wrapper...
+                canvasParent.replaceChild(this._c2diwrapper, canvas);
+                // ... and add canvas to the wrapper
                 this._c2diwrapper.appendChild(canvas);
                 // add inspector     
                 var inspector = INSPECTOR.Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
@@ -108,9 +139,10 @@ var INSPECTOR;
             if (!this._popupMode) {
                 // Get canvas
                 var canvas = this._scene.getEngine().getRenderingCanvas();
-                // restore canvas size
-                canvas.style.width = this._canvasSize.width;
-                canvas.style.height = this._canvasSize.height;
+                // restore canvas style
+                for (var prop in this._canvasStyle) {
+                    canvas.style[prop] = this._canvasStyle[prop];
+                }
                 // Get parent of the wrapper           
                 var canvasParent = canvas.parentElement.parentElement;
                 canvasParent.appendChild(canvas);
@@ -2942,7 +2974,7 @@ var INSPECTOR;
     var PickTool = (function (_super) {
         __extends(PickTool, _super);
         function PickTool(parent, inspector) {
-            _super.call(this, 'fa-mouse-pointer', parent, inspector, 'Pick a mesh in the scene to display its details');
+            _super.call(this, 'fa-mouse-pointer', parent, inspector, 'Select a mesh in the scene');
             this._isActive = false;
             // Create handler
             this._pickHandler = this._pickMesh.bind(this);
@@ -2998,7 +3030,7 @@ var INSPECTOR;
     var PopupTool = (function (_super) {
         __extends(PopupTool, _super);
         function PopupTool(parent, inspector) {
-            _super.call(this, 'fa-external-link', parent, inspector, 'Creates the inspector in an external popup');
+            _super.call(this, 'fa-external-link', parent, inspector, 'Open the inspector in a popup');
         }
         // Action : refresh the whole panel
         PopupTool.prototype.action = function () {

inspector/index.html

@@ -9,11 +9,6 @@
 	<script src="../tools/DevLoader/BabylonLoader.js"></script>
 
     <style>
-        .mini {
-            width:100%;
-            margin:auto;
-            height:100%;
-        }
         
         html, body {
             width: 100%;
@@ -25,8 +20,12 @@
         }
 
         #game-canvas {
-            width:100%;
-            height:100%; 
+            width:75%;
+            height:75%; 
+            position:absolute;
+            margin-left:30px;
+            top:0;
+            left:0;
         }
 
     </style>
@@ -34,9 +33,7 @@
 </head>
 <body>
     <!--The game canvas-->
-    <div class="mini">
-        <canvas id="game-canvas"></canvas> 
-    </div>
+    <canvas id="game-canvas"></canvas> 
 
     <!--Starting the game-->
     <script>

inspector/src/Inspector.ts

@@ -17,8 +17,8 @@ module INSPECTOR {
         public static DOCUMENT  : HTMLDocument;
         /** True if the inspector is built as a popup tab */
         private _popupMode      : boolean = false;
-        /** The original canvas size, before applying the inspector*/
-        private _canvasSize : {width:string, height:string};
+        /** The original canvas style, before applying the 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.
@@ -44,14 +44,52 @@ module INSPECTOR {
                 // canvas.style.width = 'calc(100% - 750px - 12px)';
 
                 // get canvas style                
-                let canvasStyle       = window.getComputedStyle(canvas);
-                this._canvasSize = { width:canvasStyle.width, height:canvasStyle.height};
+                let canvasOrigStyle  = window.getComputedStyle(canvas);
+                this._canvasStyle = { 
+                    width        : canvasOrigStyle.width, 
+                    height       : canvasOrigStyle.height,
+                    position     : canvasOrigStyle.position,
+                    padding      : canvasOrigStyle.padding,
+                    paddingBottom: canvasOrigStyle.paddingBottom,
+                    paddingLeft  : canvasOrigStyle.paddingLeft,
+                    paddingTop   : canvasOrigStyle.paddingTop,
+                    paddingRight : canvasOrigStyle.paddingRight,
 
+                    margin       : canvasOrigStyle.margin,
+                    marginBottom : canvasOrigStyle.marginBottom,
+                    marginLeft   : canvasOrigStyle.marginLeft,
+                    marginTop    : canvasOrigStyle.marginTop,
+                    marginRight  : canvasOrigStyle.marginRight
+
+                };
+                
                 // Create c2di wrapper
-                this._c2diwrapper  = Helpers.CreateDiv('insp-wrapper', canvasParent);
-                this._c2diwrapper.style.width = this._canvasSize.width;
-                this._c2diwrapper.style.height = this._canvasSize.height;
-                // Add canvas to the wrapper
+                this._c2diwrapper  = Helpers.CreateDiv('insp-wrapper');
+                
+                // copy style from canvas to wrapper
+                for (let prop in this._canvasStyle) {
+                    this._c2diwrapper.style[prop] = this._canvasStyle[prop];
+                }
+
+                // reset canvas style
+                canvas.style.position = "static";
+                canvas.style.width    = "100%";
+                canvas.style.height   = "100%";
+                canvas.style.paddingBottom = "0";
+                canvas.style.paddingLeft = "0";
+                canvas.style.paddingTop = "0";
+                canvas.style.paddingRight = "0";
+
+                canvas.style.margin = "0";
+                canvas.style.marginBottom = "0";
+                canvas.style.marginLeft = "0";
+                canvas.style.marginTop = "0";
+                canvas.style.marginRight = "0";
+
+
+                // Replace canvas with the wrapper...
+                canvasParent.replaceChild(this._c2diwrapper, canvas);
+                // ... and add canvas to the wrapper
                 this._c2diwrapper.appendChild(canvas);
                 // add inspector     
                 let inspector      = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
@@ -133,9 +171,10 @@ module INSPECTOR {
             if (!this._popupMode) {
                 // Get canvas
                 let canvas         = this._scene.getEngine().getRenderingCanvas(); 
-                // restore canvas size
-                canvas.style.width = this._canvasSize.width;
-                canvas.style.height = this._canvasSize.height;
+                // restore canvas style
+                for (let prop in this._canvasStyle) {
+                    canvas.style[prop] = this._canvasStyle[prop];
+                }
                 // Get parent of the wrapper           
                 let canvasParent   = canvas.parentElement.parentElement;  
                 canvasParent.appendChild(canvas);