Damn it! fixing (again) positioning of debugLayer

Babylon/Debug/babylon.debugLayer.js

@@ -17,10 +17,10 @@
                 var canvasRect = engine.getRenderingCanvasClientRect();
 
                 if (_this._showUI) {
-                    _this._statsDiv.style.right = "0";
-                    _this._statsDiv.style.bottom = "10px";
+                    _this._statsDiv.style.left = (canvasRect.right - 310) + "px";
+                    _this._statsDiv.style.top = (canvasRect.bottom - 370) + "px";
                     _this._statsDiv.style.width = "300px";
-                    _this._statsDiv.style.height = "auto";
+                    _this._statsDiv.style.height = "360px";
                     _this._statsSubsetDiv.style.maxHeight = (canvasRect.height - 60) + "px";
 
                     _this._optionsDiv.style.left = "0px";
@@ -30,11 +30,11 @@
                     _this._optionsSubsetDiv.style.maxHeight = (canvasRect.height * 0.6) + "px";
 
                     _this._logDiv.style.left = "0px";
-                    _this._logDiv.style.bottom = "10px";
+                    _this._logDiv.style.top = (canvasRect.bottom - 170) + "px";
                     _this._logDiv.style.width = "600px";
-                    _this._logDiv.style.height = "auto";
+                    _this._logDiv.style.height = "160px";
 
-                    _this._treeDiv.style.right = "0px";
+                    _this._treeDiv.style.left = (canvasRect.right - 310) + "px";
                     _this._treeDiv.style.top = "10px";
                     _this._treeDiv.style.width = "300px";
                     _this._treeDiv.style.height = "auto";
@@ -42,8 +42,6 @@
 
                 _this._globalDiv.style.left = canvasRect.left + "px";
                 _this._globalDiv.style.top = canvasRect.top + "px";
-                _this._globalDiv.style.width = canvasRect.width + "px";
-                _this._globalDiv.style.height = canvasRect.height + "px";
 
                 _this._drawingCanvas.style.left = "0px";
                 _this._drawingCanvas.style.top = "0px";
@@ -502,7 +500,6 @@
                 this._logSubsetDiv = document.createElement("div");
                 this._logSubsetDiv.style.paddingTop = "5px";
                 this._logSubsetDiv.style.overflowY = "auto";
-                this._logSubsetDiv.style.maxHeight = "200px";
                 this._logSubsetDiv.style.fontSize = "12px";
                 this._logSubsetDiv.style.fontFamily = "consolas";
                 this._logSubsetDiv.innerHTML = BABYLON.Tools.LogCache;
@@ -642,7 +639,6 @@
 
                 // Global
                 this._globalDiv.style.position = "absolute";
-                this._globalDiv.style.pointerEvents = "none";
                 this._globalDiv.appendChild(this._statsDiv);
                 this._globalDiv.appendChild(this._logDiv);
                 this._globalDiv.appendChild(this._optionsDiv);

Babylon/Debug/babylon.debugLayer.ts

@@ -43,10 +43,10 @@
                 var canvasRect = engine.getRenderingCanvasClientRect();
 
                 if (this._showUI) {
-                    this._statsDiv.style.right = "0";
-                    this._statsDiv.style.bottom = "10px";
+                    this._statsDiv.style.left = (canvasRect.right - 310) + "px";
+                    this._statsDiv.style.top = (canvasRect.bottom - 370) + "px";
                     this._statsDiv.style.width = "300px";
-                    this._statsDiv.style.height = "auto";
+                    this._statsDiv.style.height = "360px";
                     this._statsSubsetDiv.style.maxHeight = (canvasRect.height - 60) + "px";
 
                     this._optionsDiv.style.left = "0px";
@@ -56,11 +56,11 @@
                     this._optionsSubsetDiv.style.maxHeight = (canvasRect.height * 0.6) + "px";
 
                     this._logDiv.style.left = "0px";
-                    this._logDiv.style.bottom = "10px";
+                    this._logDiv.style.top = (canvasRect.bottom - 170) + "px";
                     this._logDiv.style.width = "600px";
-                    this._logDiv.style.height = "auto";
+                    this._logDiv.style.height = "160px";
 
-                    this._treeDiv.style.right = "0px";
+                    this._treeDiv.style.left = (canvasRect.right - 310) + "px";
                     this._treeDiv.style.top = "10px";
                     this._treeDiv.style.width = "300px";
                     this._treeDiv.style.height = "auto";
@@ -68,8 +68,6 @@
 
                 this._globalDiv.style.left = canvasRect.left + "px";
                 this._globalDiv.style.top = canvasRect.top + "px";
-                this._globalDiv.style.width = canvasRect.width + "px";
-                this._globalDiv.style.height = canvasRect.height + "px";
 
                 this._drawingCanvas.style.left = "0px";
                 this._drawingCanvas.style.top = "0px";
@@ -529,7 +527,6 @@
                 this._logSubsetDiv = document.createElement("div");
                 this._logSubsetDiv.style.paddingTop = "5px";
                 this._logSubsetDiv.style.overflowY = "auto";
-                this._logSubsetDiv.style.maxHeight = "200px";
                 this._logSubsetDiv.style.fontSize = "12px";
                 this._logSubsetDiv.style.fontFamily = "consolas";
                 this._logSubsetDiv.innerHTML = Tools.LogCache;
@@ -625,7 +622,6 @@
                 // Global
 
                 this._globalDiv.style.position = "absolute";
-                this._globalDiv.style.pointerEvents = "none";
                 this._globalDiv.appendChild(this._statsDiv);
                 this._globalDiv.appendChild(this._logDiv);
                 this._globalDiv.appendChild(this._optionsDiv);

babylon.2.0-alpha.debug.js

@@ -29330,10 +29330,10 @@ var BABYLON;
                 var canvasRect = engine.getRenderingCanvasClientRect();
 
                 if (_this._showUI) {
-                    _this._statsDiv.style.right = "0";
-                    _this._statsDiv.style.bottom = "10px";
+                    _this._statsDiv.style.left = (canvasRect.right - 310) + "px";
+                    _this._statsDiv.style.top = (canvasRect.bottom - 370) + "px";
                     _this._statsDiv.style.width = "300px";
-                    _this._statsDiv.style.height = "auto";
+                    _this._statsDiv.style.height = "360px";
                     _this._statsSubsetDiv.style.maxHeight = (canvasRect.height - 60) + "px";
 
                     _this._optionsDiv.style.left = "0px";
@@ -29343,11 +29343,11 @@ var BABYLON;
                     _this._optionsSubsetDiv.style.maxHeight = (canvasRect.height * 0.6) + "px";
 
                     _this._logDiv.style.left = "0px";
-                    _this._logDiv.style.bottom = "10px";
+                    _this._logDiv.style.top = (canvasRect.bottom - 170) + "px";
                     _this._logDiv.style.width = "600px";
-                    _this._logDiv.style.height = "auto";
+                    _this._logDiv.style.height = "160px";
 
-                    _this._treeDiv.style.right = "0px";
+                    _this._treeDiv.style.left = (canvasRect.right - 310) + "px";
                     _this._treeDiv.style.top = "10px";
                     _this._treeDiv.style.width = "300px";
                     _this._treeDiv.style.height = "auto";
@@ -29355,8 +29355,6 @@ var BABYLON;
 
                 _this._globalDiv.style.left = canvasRect.left + "px";
                 _this._globalDiv.style.top = canvasRect.top + "px";
-                _this._globalDiv.style.width = canvasRect.width + "px";
-                _this._globalDiv.style.height = canvasRect.height + "px";
 
                 _this._drawingCanvas.style.left = "0px";
                 _this._drawingCanvas.style.top = "0px";
@@ -29815,7 +29813,6 @@ var BABYLON;
                 this._logSubsetDiv = document.createElement("div");
                 this._logSubsetDiv.style.paddingTop = "5px";
                 this._logSubsetDiv.style.overflowY = "auto";
-                this._logSubsetDiv.style.maxHeight = "200px";
                 this._logSubsetDiv.style.fontSize = "12px";
                 this._logSubsetDiv.style.fontFamily = "consolas";
                 this._logSubsetDiv.innerHTML = BABYLON.Tools.LogCache;
@@ -29955,7 +29952,6 @@ var BABYLON;
 
                
                 this._globalDiv.style.position = "absolute";
-                this._globalDiv.style.pointerEvents = "none";
                 this._globalDiv.appendChild(this._statsDiv);
                 this._globalDiv.appendChild(this._logDiv);
                 this._globalDiv.appendChild(this._optionsDiv);