Inspector - fix bug when canvas position is absolute (the inspector window was not in the viewport)

inspector/src/Inspector.ts

@@ -81,10 +81,20 @@ module INSPECTOR {
                 for (let prop in this._canvasStyle) {
                     this._c2diwrapper.style[prop] = this._canvasStyle[prop];
                 }
+                
                 // Convert wrapper size in % (because getComputedStyle returns px only)
                 let widthPx        = parseFloat(canvasComputedStyle.width.substr(0,canvasComputedStyle.width.length-2)) || 0;
                 let heightPx       = parseFloat(canvasComputedStyle.height.substr(0,canvasComputedStyle.height.length-2)) || 0;
 
+                // If the canvas position is absolute, restrain the wrapper width to the window width + left positionning
+                if (canvasComputedStyle.position === "absolute" || canvasComputedStyle.position === "relative") {
+                    // compute only left as it takes predominance if right is also specified (and it will be for the wrapper)
+                    let leftPx = parseFloat(canvasComputedStyle.left.substr(0,canvasComputedStyle.left.length-2)) || 0;
+                    if (widthPx + leftPx >= Inspector.WINDOW.innerWidth) {
+                        this._c2diwrapper.style.maxWidth = `${widthPx-leftPx}px`;
+                    }
+                }
+                
                 // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
                 let parent = this._getRelativeParent(canvas);
 

inspector/src/details/DetailPanel.ts

@@ -38,7 +38,6 @@
             this._div.appendChild(this._headerRow);
             
             Inspector.WINDOW.addEventListener('resize', (e) => {
-                console.log(this._headerRow.parentElement.clientWidth);
                 // adapt the header row max width according to its parent size;
                 this._headerRow.style.maxWidth = this._headerRow.parentElement.clientWidth+'px';
             });

inspector/test/index.js

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