Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

canvas2D/src/Engine/babylon.prim2dBase.ts

@@ -3638,6 +3638,7 @@
             }
             let length = this._children.push(child);
             this._firstZDirtyIndex = Math.min(this._firstZDirtyIndex, length - 1);
+            child._setFlags(SmartPropertyPrim.flagActualOpacityDirty);
         }
 
         /**

canvas2D/src/shaders/text2d.fragment.fx

@@ -26,7 +26,7 @@ void main(void) {
 		discard;
 	}
 #ifdef FontTexture
-	gl_FragColor = vec4(color.xxxx)*vColor;
+	gl_FragColor = vec4(color.xxx*vColor.xyz*vColor.a, vColor.a);
 #else
 	gl_FragColor = color*vColor;
 #endif

dist/preview release/inspector/babylon.inspector.css

@@ -8,6 +8,7 @@
   display: flex;
   font-size: 0.9em;
   font-family: "Inconsolata", sans-serif;
+  background-color: #242424;
   /**
  * A tool contained in the tree panel (available for each item of the tree)
  */

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

@@ -24,7 +24,15 @@ declare module INSPECTOR {
          * 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, popup?: boolean, initialTab?: number, parentElement?: HTMLElement);
+        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement, newColors?: {
+            backgroundColor?: string;
+            backgroundColorLighter?: string;
+            backgroundColorLighter2?: string;
+            backgroundColorLighter3?: string;
+            color?: string;
+            colorTop?: string;
+            colorBot?: string;
+        });
         /**
          * If the given element has a position 'asbolute' or 'relative',
          * returns the first parent of the given element that has a position 'relative' or 'absolute'.
@@ -157,6 +165,96 @@ declare module INSPECTOR {
             type: typeof BABYLON.PBRMaterial;
             properties: string[];
         };
+        'Canvas2D': {
+            type: typeof BABYLON.Canvas2D;
+        };
+        'Canvas2DEngineBoundData': {
+            type: typeof BABYLON.Canvas2DEngineBoundData;
+        };
+        'Ellipse2D': {
+            type: typeof BABYLON.Ellipse2D;
+        };
+        'Ellipse2DInstanceData': {
+            type: typeof BABYLON.Ellipse2DInstanceData;
+        };
+        'Ellipse2DRenderCache': {
+            type: typeof BABYLON.Ellipse2DRenderCache;
+        };
+        'Group2D': {
+            type: typeof BABYLON.Group2D;
+        };
+        'IntersectInfo2D': {
+            type: typeof BABYLON.IntersectInfo2D;
+        };
+        'Lines2D': {
+            type: typeof BABYLON.Lines2D;
+        };
+        'Lines2DInstanceData': {
+            type: typeof BABYLON.Lines2DInstanceData;
+        };
+        'Lines2DRenderCache': {
+            type: typeof BABYLON.Lines2DRenderCache;
+        };
+        'PrepareRender2DContext': {
+            type: typeof BABYLON.PrepareRender2DContext;
+        };
+        'Prim2DBase': {
+            type: typeof BABYLON.Prim2DBase;
+        };
+        'Prim2DClassInfo': {
+            type: typeof BABYLON.Prim2DClassInfo;
+        };
+        'Prim2DPropInfo': {
+            type: typeof BABYLON.Prim2DPropInfo;
+        };
+        'Rectangle2D': {
+            type: typeof BABYLON.Rectangle2D;
+        };
+        'Rectangle2DInstanceData': {
+            type: typeof BABYLON.Rectangle2DInstanceData;
+        };
+        'Rectangle2DRenderCache': {
+            type: typeof BABYLON.Rectangle2DRenderCache;
+        };
+        'Render2DContext': {
+            type: typeof BABYLON.Render2DContext;
+        };
+        'RenderablePrim2D': {
+            type: typeof BABYLON.RenderablePrim2D;
+        };
+        'ScreenSpaceCanvas2D': {
+            type: typeof BABYLON.ScreenSpaceCanvas2D;
+        };
+        'Shape2D': {
+            type: typeof BABYLON.Shape2D;
+        };
+        'Shape2DInstanceData': {
+            type: typeof BABYLON.Shape2DInstanceData;
+        };
+        'Sprite2D': {
+            type: typeof BABYLON.Sprite2D;
+        };
+        'Sprite2DInstanceData': {
+            type: typeof BABYLON.Sprite2DInstanceData;
+        };
+        'Sprite2DRenderCache': {
+            type: typeof BABYLON.Sprite2DRenderCache;
+        };
+        'Text2D': {
+            type: typeof BABYLON.Text2D;
+        };
+        'Text2DInstanceData': {
+            type: typeof BABYLON.Text2DInstanceData;
+        };
+        'Text2DRenderCache': {
+            type: typeof BABYLON.Text2DRenderCache;
+        };
+        'WorldSpaceCanvas2D': {
+            type: typeof BABYLON.WorldSpaceCanvas2D;
+        };
+        'WorldSpaceCanvas2DNode': {
+            type: typeof BABYLON.WorldSpaceCanvas2DNode;
+        };
     };
 }
 

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

@@ -5,7 +5,7 @@ var INSPECTOR;
          * 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, popup, initialTab, parentElement) {
+        function Inspector(scene, popup, initialTab, parentElement, newColors) {
             var _this = this;
             /** True if the inspector is built as a popup tab */
             this._popupMode = false;
@@ -53,80 +53,80 @@ var INSPECTOR;
                     marginTop: canvasComputedStyle.marginTop,
                     marginRight: canvasComputedStyle.marginRight
                 };
-                // Create c2di 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];
-                }
-                // Convert wrapper size in % (because getComputedStyle returns px only)
-                var widthPx = parseFloat(canvasComputedStyle.width.substr(0, canvasComputedStyle.width.length - 2)) || 0;
-                var 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)
-                    var 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
-                var parent_1 = this._getRelativeParent(canvas);
-                var parentWidthPx = parent_1.clientWidth;
-                var parentHeightPx = parent_1.clientHeight;
-                var pWidth = widthPx / parentWidthPx * 100;
-                var pheight = heightPx / parentHeightPx * 100;
-                this._c2diwrapper.style.width = pWidth + "%";
-                this._c2diwrapper.style.height = pheight + "%";
-                // 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...
-                // if (this._parentElement) {
-                //     canvasParent.replaceChild(this._parentElement, canvas);
-                //     this._parentElement.appendChild(canvas);
-                // }
-                // else {
-                canvasParent.replaceChild(this._c2diwrapper, canvas);
-                // ... and add canvas to the wrapper
-                this._c2diwrapper.appendChild(canvas);
-                // }
-                // add inspector
-                var inspector = void 0;
                 if (this._parentElement) {
-                    this._c2diwrapper.appendChild(this._parentElement);
-                    inspector = INSPECTOR.Helpers.CreateDiv('insp-right-panel', this._parentElement);
+                    // Build the inspector wrapper
+                    this._c2diwrapper = INSPECTOR.Helpers.CreateDiv('insp-wrapper', this._parentElement);
+                    this._c2diwrapper.style.width = '100%';
+                    this._c2diwrapper.style.height = '100%';
+                    this._c2diwrapper.style.paddingLeft = '5px';
+                    // add inspector     
+                    var inspector = INSPECTOR.Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
                     inspector.style.width = '100%';
                     inspector.style.height = '100%';
+                    // and build it in the popup  
+                    this._buildInspector(inspector);
                 }
                 else {
-                    inspector = INSPECTOR.Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
-                }
-                // Add split bar
-                if (!this._parentElement) {
-                    Split([canvas, inspector], {
-                        direction: 'horizontal',
-                        sizes: [75, 25],
-                        onDrag: function () {
-                            INSPECTOR.Helpers.SEND_EVENT('resize');
-                            if (_this._tabbar) {
-                                _this._tabbar.updateWidth();
-                            }
+                    // Create c2di 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];
+                    }
+                    // Convert wrapper size in % (because getComputedStyle returns px only)
+                    var widthPx = parseFloat(canvasComputedStyle.width.substr(0, canvasComputedStyle.width.length - 2)) || 0;
+                    var 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)
+                        var 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
+                    var parent_1 = this._getRelativeParent(canvas);
+                    var parentWidthPx = parent_1.clientWidth;
+                    var parentHeightPx = parent_1.clientHeight;
+                    var pWidth = widthPx / parentWidthPx * 100;
+                    var pheight = heightPx / parentHeightPx * 100;
+                    this._c2diwrapper.style.width = pWidth + "%";
+                    this._c2diwrapper.style.height = pheight + "%";
+                    // 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);
+                    // Add split bar
+                    if (!this._parentElement) {
+                        Split([canvas, inspector], {
+                            direction: 'horizontal',
+                            sizes: [75, 25],
+                            onDrag: function () {
+                                INSPECTOR.Helpers.SEND_EVENT('resize');
+                                if (_this._tabbar) {
+                                    _this._tabbar.updateWidth();
+                                }
+                            }
+                        });
+                    }
+                    // Build the inspector
+                    this._buildInspector(inspector);
                 }
-                // Build the inspector
-                this._buildInspector(inspector);
                 // Send resize event to the window
                 INSPECTOR.Helpers.SEND_EVENT('resize');
                 this._tabbar.updateWidth();
@@ -135,6 +135,30 @@ var INSPECTOR;
             if (!INSPECTOR.Helpers.IsBrowserEdge()) {
                 this.refresh();
             }
+            // Check custom css colors
+            if (newColors) {
+                var bColor = newColors.backgroundColor || '#242424';
+                var bColorl1 = newColors.backgroundColorLighter || '#2c2c2c';
+                var bColorl2 = newColors.backgroundColorLighter2 || '#383838';
+                var bColorl3 = newColors.backgroundColorLighter3 || '#454545';
+                var color = newColors.color || '#ccc';
+                var colorTop = newColors.colorTop || '#f29766';
+                var colorBot = newColors.colorBot || '#5db0d7';
+                var styles = Inspector.DOCUMENT.querySelectorAll('style');
+                for (var s = 0; s < styles.length; s++) {
+                    var style = styles[s];
+                    if (style.innerHTML.indexOf('insp-wrapper') != -1) {
+                        styles[s].innerHTML = styles[s].innerHTML
+                            .replace(/#242424/g, bColor) // background color
+                            .replace(/#2c2c2c/g, bColorl1) // background-lighter
+                            .replace(/#383838/g, bColorl2) // background-lighter2
+                            .replace(/#454545/g, bColorl3) // background-lighter3
+                            .replace(/#ccc/g, color) // color
+                            .replace(/#f29766/g, colorTop) // color-top
+                            .replace(/#5db0d7/g, colorBot); // color-bot
+                    }
+                }
+            }
         }
         /**
          * If the given element has a position 'asbolute' or 'relative',
@@ -591,6 +615,96 @@ var INSPECTOR;
                 'cameraColorGradingTexture',
                 'cameraColorCurves'
             ]
+        },
+        'Canvas2D': {
+            type: BABYLON.Canvas2D
+        },
+        'Canvas2DEngineBoundData': {
+            type: BABYLON.Canvas2DEngineBoundData
+        },
+        'Ellipse2D': {
+            type: BABYLON.Ellipse2D
+        },
+        'Ellipse2DInstanceData': {
+            type: BABYLON.Ellipse2DInstanceData
+        },
+        'Ellipse2DRenderCache': {
+            type: BABYLON.Ellipse2DRenderCache
+        },
+        'Group2D': {
+            type: BABYLON.Group2D
+        },
+        'IntersectInfo2D': {
+            type: BABYLON.IntersectInfo2D
+        },
+        'Lines2D': {
+            type: BABYLON.Lines2D
+        },
+        'Lines2DInstanceData': {
+            type: BABYLON.Lines2DInstanceData
+        },
+        'Lines2DRenderCache': {
+            type: BABYLON.Lines2DRenderCache
+        },
+        'PrepareRender2DContext': {
+            type: BABYLON.PrepareRender2DContext
+        },
+        'Prim2DBase': {
+            type: BABYLON.Prim2DBase
+        },
+        'Prim2DClassInfo': {
+            type: BABYLON.Prim2DClassInfo
+        },
+        'Prim2DPropInfo': {
+            type: BABYLON.Prim2DPropInfo
+        },
+        'Rectangle2D': {
+            type: BABYLON.Rectangle2D
+        },
+        'Rectangle2DInstanceData': {
+            type: BABYLON.Rectangle2DInstanceData
+        },
+        'Rectangle2DRenderCache': {
+            type: BABYLON.Rectangle2DRenderCache
+        },
+        'Render2DContext': {
+            type: BABYLON.Render2DContext
+        },
+        'RenderablePrim2D': {
+            type: BABYLON.RenderablePrim2D
+        },
+        'ScreenSpaceCanvas2D': {
+            type: BABYLON.ScreenSpaceCanvas2D
+        },
+        'Shape2D': {
+            type: BABYLON.Shape2D
+        },
+        'Shape2DInstanceData': {
+            type: BABYLON.Shape2DInstanceData
+        },
+        'Sprite2D': {
+            type: BABYLON.Sprite2D
+        },
+        'Sprite2DInstanceData': {
+            type: BABYLON.Sprite2DInstanceData
+        },
+        'Sprite2DRenderCache': {
+            type: BABYLON.Sprite2DRenderCache
+        },
+        'Text2D': {
+            type: BABYLON.Text2D
+        },
+        'Text2DInstanceData': {
+            type: BABYLON.Text2DInstanceData
+        },
+        'Text2DRenderCache': {
+            type: BABYLON.Text2DRenderCache
+        },
+        'WorldSpaceCanvas2D': {
+            type: BABYLON.WorldSpaceCanvas2D
+        },
+        'WorldSpaceCanvas2DNode': {
+            type: BABYLON.WorldSpaceCanvas2DNode
         }
     };
 })(INSPECTOR || (INSPECTOR = {}));
@@ -875,7 +989,7 @@ var INSPECTOR;
                 'actualZOffset', 'isSizeAuto', 'layoutArea', 'layoutAreaPos', 'contentArea',
                 'marginOffset', 'paddingOffset', 'isPickable', 'isContainer', 'boundingInfo',
                 'levelBoundingInfo', 'isSizedByContent', 'isPositionAuto', 'actualScale', 'layoutBoundingInfo',
-                '_cachedTexture'
+                '_cachedTexture', 'actualOpacity'
             ];
             for (var _i = 0, toAddDirty_1 = toAddDirty; _i < toAddDirty_1.length; _i++) {
                 var dirty = toAddDirty_1[_i];

inspector/index.html

@@ -1,79 +1,55 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Inspector - test</title>
-    <meta charset='utf-8'/>
+    <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
 
     <!--Babylon-->
-	<script src="../tools/DevLoader/BabylonLoader.js"></script>
+    <script src="../tools/DevLoader/BabylonLoader.js"></script>
 
     <style>
-        
-        html, body {
+        html,
+        body {
             width: 100%;
-            height:100%;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-            font-family:sans-serif;
-        }
-
-        /* First try : PG-like */
-        /*#game-canvas {
-            width:75%;
-            height:100%; 
-            top:0;
-            left:0;
+            height: 100%;
+            padding: 0;
+            margin: 0
         }
-        .fakeToolbar {
-            height:150px;
-            background-color: #333;
-        }
-        .mini {
-            display:flex;
-            height:calc(100% - 150px);
+        
+        #wrapper {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            overflow: hidden;
         }
-        .fakeBarAgain {
-            width:50%;
-            background-color: #333;
-        }*/
         
-        /*Second : sandbox like*/
-        #game-canvas {
-            position:absolute;
-            width:100%;
-            height:100%; 
-            top:0;
+        canvas {
+            width: 75%;
         }
-        .fakeFooter {
-            position:absolute;
-            width:100%;
-            height:50px;
-            background-color: #333;
-            bottom: 0;
+        
+        #inspector {
+            width: 25%;
         }
-
     </style>
 
 </head>
+
 <body>
-    
-    <!-- First try : PG-like 
-    <div class="fakeToolbar"></div>
-    <div class="mini">
-        <div class="fakeBarAgain"></div>
-        <canvas id="game-canvas"></canvas> 
-    </div>-->
-    <!--Second try : Sandbox-like -->
-    <canvas id="game-canvas"></canvas>
-    <div class="fakeFooter"></div>
+
+    <div id="wrapper">
+        <canvas id='game-canvas'></canvas>
+        <div id="inspector"></div>
+    </div>
+
 
     <!--Starting the game-->
     <script>
-        BABYLONDEVTOOLS.Loader.require("test/index.js").load(function() {
+        BABYLONDEVTOOLS.Loader.require("test/index.js").load(function () {
             new Test('game-canvas');
-	    });
-	</script>
+        });
+    </script>
 </body>
+
 </html>

inspector/sass/defines.scss

@@ -3,6 +3,11 @@
 
 $font               : 'Inconsolata', sans-serif;
 
+// ------------- //
+// If you update these colors, you should also 
+// replace them in the class Inspector as well, 
+// as it's used for custom themes
+// ------------- //
 
 $color              : #ccc;
 $background         : #242424;

inspector/sass/main.scss

@@ -18,6 +18,7 @@
   display:flex;
   font-size:0.9em;
   font-family     : $font;
+  background-color: $background;
 
   // The panel containing the two subpanel : tree and details
   .insp-right-panel {

inspector/src/Inspector.ts

@@ -30,7 +30,15 @@ module INSPECTOR {
          * 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, popup?: boolean, initialTab?: number, parentElement?: HTMLElement) {
+        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement, newColors?: {
+            backgroundColor?: string,
+            backgroundColorLighter?: string,
+            backgroundColorLighter2?: string,
+            backgroundColorLighter3?: string,
+            color?: string,
+            colorTop?: string,
+            colorBot?: string
+        }) {
 
             //get Tabbar initialTab
             this._initialTab = initialTab;
@@ -87,96 +95,93 @@ module INSPECTOR {
 
                 };
 
-                // Create c2di 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];
-                }
-
-                // 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 (this._parentElement) {
+                    // Build the inspector wrapper
+                    this._c2diwrapper = Helpers.CreateDiv('insp-wrapper', this._parentElement);
+                    this._c2diwrapper.style.width = '100%';
+                    this._c2diwrapper.style.height = '100%';
+                    this._c2diwrapper.style.paddingLeft = '5px';
+
+                    // add inspector     
+                    let inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
+                    inspector.style.width = '100%';
+                    inspector.style.height = '100%';
+                    // and build it in the popup  
+                    this._buildInspector(inspector);
+                } else {
+                    // Create c2di wrapper
+                    this._c2diwrapper = Helpers.CreateDiv('insp-wrapper');
 
-                // 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`;
+                    // copy style from canvas to wrapper
+                    for (let prop in this._canvasStyle) {
+                        this._c2diwrapper.style[prop] = this._canvasStyle[prop];
                     }
-                }
-
-                // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
-                let parent = this._getRelativeParent(canvas);
 
-                let parentWidthPx = parent.clientWidth;
-                let parentHeightPx = parent.clientHeight;
+                    // 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;
 
-                let pWidth = widthPx / parentWidthPx * 100;
-                let pheight = heightPx / parentHeightPx * 100;
-
-                this._c2diwrapper.style.width = pWidth + "%";
-                this._c2diwrapper.style.height = pheight + "%";
-
-                // 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...
-                // if (this._parentElement) {
-                //     canvasParent.replaceChild(this._parentElement, canvas);
-                //     this._parentElement.appendChild(canvas);
-                // }
-                // else {
-                canvasParent.replaceChild(this._c2diwrapper, canvas);
-                // ... and add canvas to the wrapper
-                this._c2diwrapper.appendChild(canvas);
-                // }
-
-
-
-                // add inspector
-                let inspector;
-                if (this._parentElement) {
-                    this._c2diwrapper.appendChild(this._parentElement);
-                    inspector = Helpers.CreateDiv('insp-right-panel', this._parentElement);
-                    inspector.style.width = '100%';
-                    inspector.style.height = '100%';
-                }
-                else {
-                    inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
-                }
+                    // 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`;
+                        }
+                    }
 
-                // Add split bar
-                if (!this._parentElement) {
-                    Split([canvas, inspector], {
-                        direction: 'horizontal',
-                        sizes: [75, 25],
-                        onDrag: () => {
-                            Helpers.SEND_EVENT('resize');
-                            if (this._tabbar) {
-                                this._tabbar.updateWidth()
+                    // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
+                    let parent = this._getRelativeParent(canvas);
+
+                    let parentWidthPx = parent.clientWidth;
+                    let parentHeightPx = parent.clientHeight;
+
+                    let pWidth = widthPx / parentWidthPx * 100;
+                    let pheight = heightPx / parentHeightPx * 100;
+
+                    this._c2diwrapper.style.width = pWidth + "%";
+                    this._c2diwrapper.style.height = pheight + "%";
+
+                    // 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);
+
+                    // Add split bar
+                    if (!this._parentElement) {
+                        Split([canvas, inspector], {
+                            direction: 'horizontal',
+                            sizes: [75, 25],
+                            onDrag: () => {
+                                Helpers.SEND_EVENT('resize');
+                                if (this._tabbar) {
+                                    this._tabbar.updateWidth()
+                                }
                             }
-                        }
-                    });
-                }
+                        });
+                    }
 
-                // Build the inspector
-                this._buildInspector(inspector);
+                    // Build the inspector
+                    this._buildInspector(inspector);
+                }
                 // Send resize event to the window
                 Helpers.SEND_EVENT('resize');
                 this._tabbar.updateWidth();
@@ -186,6 +191,36 @@ module INSPECTOR {
             if (!Helpers.IsBrowserEdge()) {
                 this.refresh();
             }
+
+            // Check custom css colors
+            if (newColors) {
+
+                let bColor = newColors.backgroundColor || '#242424';
+                let bColorl1 = newColors.backgroundColorLighter || '#2c2c2c';
+                let bColorl2 = newColors.backgroundColorLighter2 || '#383838';
+                let bColorl3 = newColors.backgroundColorLighter3 || '#454545';
+
+                let color = newColors.color || '#ccc';
+                let colorTop = newColors.colorTop || '#f29766';
+                let colorBot = newColors.colorBot || '#5db0d7';
+
+                let styles = Inspector.DOCUMENT.querySelectorAll('style');
+                for (let s = 0; s < styles.length; s++) {
+                    let style = styles[s];
+
+                    if (style.innerHTML.indexOf('insp-wrapper') != -1) {
+
+                        styles[s].innerHTML = styles[s].innerHTML
+                            .replace(/#242424/g, bColor) // background color
+                            .replace(/#2c2c2c/g, bColorl1) // background-lighter
+                            .replace(/#383838/g, bColorl2) // background-lighter2
+                            .replace(/#454545/g, bColorl3) // background-lighter3
+                            .replace(/#ccc/g, color) // color
+                            .replace(/#f29766/g, colorTop) // color-top
+                            .replace(/#5db0d7/g, colorBot) // color-bot
+                    }
+                }
+            }
         }
 
         /**

inspector/src/adapters/Canvas2DAdapter.ts

@@ -1,29 +1,29 @@
 module INSPECTOR {
-    
-    export class Canvas2DAdapter 
-        extends Adapter 
+
+    export class Canvas2DAdapter
+        extends Adapter
         implements IToolVisible, IToolDebug {
-        
-        constructor(obj:any) {
+
+        constructor(obj: any) {
             super(obj);
         }
-        
+
         /** Returns the name displayed in the tree */
-        public id() : string {
+        public id(): string {
             let str = '';
             if (this._obj.id) {
                 str = this._obj.id;
             } // otherwise nothing displayed        
             return str;
         }
-        
+
         /** Returns the type of this object - displayed in the tree */
-        public type() : string{
+        public type(): string {
             return Helpers.GET_TYPE(this._obj);
         }
-        
+
         /** Returns the list of properties to be displayed for this adapter */
-        public getProperties() : Array<PropertyLine> {
+        public getProperties(): Array<PropertyLine> {
             let propertiesLines = [];
             if (this._obj.propDic) {
                 let dico = this._obj.propDic as BABYLON.StringDictionary<BABYLON.Prim2DPropInfo>;
@@ -31,42 +31,42 @@ module INSPECTOR {
                     let property = new Property(name, this.actualObject);
                     propertiesLines.push(new PropertyLine(property));
                 });
-            }            
+            }
             // TODO REMOVE THIS WHEN PROPERTIES WILL BE DECORATED
             let toAddDirty = [
-                'actualZOffset', 'isSizeAuto', 'layoutArea', 'layoutAreaPos', 'contentArea', 
-                'marginOffset', 'paddingOffset', 'isPickable', 'isContainer', 'boundingInfo', 
-                'levelBoundingInfo', 'isSizedByContent', 'isPositionAuto', 'actualScale', 'layoutBoundingInfo', 
-                '_cachedTexture'];
+                'actualZOffset', 'isSizeAuto', 'layoutArea', 'layoutAreaPos', 'contentArea',
+                'marginOffset', 'paddingOffset', 'isPickable', 'isContainer', 'boundingInfo',
+                'levelBoundingInfo', 'isSizedByContent', 'isPositionAuto', 'actualScale', 'layoutBoundingInfo',
+                '_cachedTexture', 'actualOpacity'];
             for (let dirty of toAddDirty) {
                 let infos = new Property(dirty, this.actualObject);
                 propertiesLines.push(new PropertyLine(infos));
             }
-            return propertiesLines; 
+            return propertiesLines;
         }
 
-        public getTools() : Array<AbstractTreeTool> {
+        public getTools(): Array<AbstractTreeTool> {
             let tools = [];
             tools.push(new Checkbox(this));
-            tools.push(new DebugArea(this));   
+            tools.push(new DebugArea(this));
             return tools;
         }
 
         /// TOOLS ///
-        public setVisible(b:boolean) {
+        public setVisible(b: boolean) {
             this._obj.levelVisible = b;
         }
-        public isVisible():boolean{
+        public isVisible(): boolean {
             return this._obj.levelVisible;
         }
         /** Overrides super */
-        public debug(b:boolean) {
+        public debug(b: boolean) {
             this._obj["displayDebugAreas"] = b;
         }
         /** Overrides super.highlight */
-        public highlight(b:boolean) {
+        public highlight(b: boolean) {
         }
-        
-        
+
+
     }
 }

inspector/src/helpers/Helpers.ts

@@ -1,15 +1,15 @@
 module INSPECTOR {
     export class Helpers {
-        
-        
+
+
         /** 
          * Returns the type of the given object. First
          * uses getClassName. If nothing is returned, used the type of the constructor
          */
-        public static GET_TYPE(obj:any) : string{
+        public static GET_TYPE(obj: any): string {
             if (obj != null && obj != undefined) {
                 let classname = BABYLON.Tools.getClassName(obj);
-                if (!classname || classname === 'object'){
+                if (!classname || classname === 'object') {
                     classname = obj.constructor.name;
                     // classname is undefined in IE11
                     if (!classname) {
@@ -25,22 +25,22 @@ module INSPECTOR {
                 return 'type_not_defined';
             }
         }
-        
+
         /**
          * Check if some properties are defined for the given type.
          */
-        private static _CheckIfTypeExists(type:string) {
+        private static _CheckIfTypeExists(type: string) {
             let properties = PROPERTIES[type];
             if (properties) {
                 return true;
-            } 
+            }
             return false;
         }
-        
+
         /**
          * Returns true if the user browser is edge.
          */
-        public static IsBrowserEdge() : boolean {
+        public static IsBrowserEdge(): boolean {
             //Detect if we are running on a faulty buggy OS.
             var regexp = /Edge/
             return regexp.test(navigator.userAgent);
@@ -51,7 +51,7 @@ module INSPECTOR {
          * is in PROPERTIES constant.
          * Returns 'Undefined' if no type exists for this object
          */
-        private static _GetTypeFor(obj:any) {
+        private static _GetTypeFor(obj: any) {
             for (let type in PROPERTIES) {
                 let typeBlock = PROPERTIES[type];
                 if (typeBlock.type) {
@@ -70,9 +70,9 @@ module INSPECTOR {
             var s = f && ((fn.name && ['', fn.name]) || fn.toString().match(/function ([^\(]+)/));
             return (!f && 'not a function') || (s && s[1] || 'anonymous');
         }
-        
+
         /** Send the event which name is given in parameter to the window */
-        public static SEND_EVENT(eventName:string){
+        public static SEND_EVENT(eventName: string) {
             let event;
             if (Inspector.DOCUMENT.createEvent) {
                 event = Inspector.DOCUMENT.createEvent('HTMLEvents');
@@ -82,25 +82,25 @@ module INSPECTOR {
             }
             window.dispatchEvent(event);
         }
-        
+
         /** Returns the given number with 2 decimal number max if a decimal part exists */
-        public static Trunc(nb) :number {
-            if(Math.round(nb) !== nb) {
+        public static Trunc(nb): number {
+            if (Math.round(nb) !== nb) {
                 return nb.toFixed(2);
             }
             return nb;
         };
-        
+
         /**
          * Useful function used to create a div
          */
-        public static CreateDiv(className?:string, parent?: HTMLElement) : HTMLElement{
+        public static CreateDiv(className?: string, parent?: HTMLElement): HTMLElement {
             return Helpers.CreateElement('div', className, parent);
         }
-        
-        public static CreateElement(element:string, className?:string, parent?: HTMLElement) : HTMLElement{
+
+        public static CreateElement(element: string, className?: string, parent?: HTMLElement): HTMLElement {
             let elem = Inspector.DOCUMENT.createElement(element);
-            
+
             if (className) {
                 elem.className = className;
             }
@@ -109,12 +109,12 @@ module INSPECTOR {
             }
             return elem;
         }
-        
+
         /**
          * Removes all children of the given div.
          */
-        public static CleanDiv(div:HTMLElement) {
-            while ( div.firstChild ) {
+        public static CleanDiv(div: HTMLElement) {
+            while (div.firstChild) {
                 div.removeChild(div.firstChild);
             }
         }
@@ -122,7 +122,7 @@ module INSPECTOR {
         /**
          * Returns the true value of the given CSS Attribute from the given element (in percentage or in pixel, as it was specified in the css)
          */
-        public static Css(elem:HTMLElement, cssAttribute:string) : string{
+        public static Css(elem: HTMLElement, cssAttribute: string): string {
             let clone = elem.cloneNode(true) as HTMLElement;
             let div = Helpers.CreateDiv('', Inspector.DOCUMENT.body);
             div.style.display = 'none';
@@ -131,17 +131,17 @@ module INSPECTOR {
             div.parentNode.removeChild(div);
             return value;
         }
-        
+
         public static LoadScript() {
             BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js", (elem) => {
                 let script = Helpers.CreateElement('script', '', Inspector.DOCUMENT.body);
-                script.textContent = elem;                
-                
+                script.textContent = elem;
+
                 // Load glsl detection
                 BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/languages/glsl.min.js", (elem) => {
                     let script = Helpers.CreateElement('script', '', Inspector.DOCUMENT.body);
-                    script.textContent = elem;                    
-                    
+                    script.textContent = elem;
+
                     // Load css style
                     BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/zenburn.min.css", (elem) => {
                         let style = Helpers.CreateElement('style', '', Inspector.DOCUMENT.body);
@@ -149,19 +149,19 @@ module INSPECTOR {
                     });
                 }, null, null, null, () => {
                     console.log("erreur");
-                });      
-                
+                });
+
             }, null, null, null, () => {
                 console.log("erreur");
             });
-            
+
         }
 
         public static IsSystemName(name: string): boolean {
-            if (name==null) {
+            if (name == null) {
                 return false;
             }
-            return name.indexOf("###")===0 && name.lastIndexOf("###")===(name.length-3);
+            return name.indexOf("###") === 0 && name.lastIndexOf("###") === (name.length - 3);
         }
     }
 }

inspector/src/properties.ts

@@ -315,8 +315,97 @@ module INSPECTOR {
                 'cameraColorGradingTexture',
                 'cameraColorCurves'
             ]
+        },
+        'Canvas2D': {
+            type: BABYLON.Canvas2D
+        },
+        'Canvas2DEngineBoundData': {
+            type: BABYLON.Canvas2DEngineBoundData
+        },
+        'Ellipse2D': {
+            type: BABYLON.Ellipse2D
+        },
+        'Ellipse2DInstanceData': {
+            type: BABYLON.Ellipse2DInstanceData
+        },
+        'Ellipse2DRenderCache': {
+            type: BABYLON.Ellipse2DRenderCache
+        },
+        'Group2D': {
+            type: BABYLON.Group2D
+        },
+        'IntersectInfo2D': {
+            type: BABYLON.IntersectInfo2D
+        },
+        'Lines2D': {
+            type: BABYLON.Lines2D
+        },
+        'Lines2DInstanceData': {
+            type: BABYLON.Lines2DInstanceData
+        },
+        'Lines2DRenderCache': {
+            type: BABYLON.Lines2DRenderCache
+        },
+        'PrepareRender2DContext': {
+            type: BABYLON.PrepareRender2DContext
+        },
+        'Prim2DBase': {
+            type: BABYLON.Prim2DBase
+        },
+        'Prim2DClassInfo': {
+            type: BABYLON.Prim2DClassInfo
+        },
+        'Prim2DPropInfo': {
+            type: BABYLON.Prim2DPropInfo
+        },
+        'Rectangle2D': {
+            type: BABYLON.Rectangle2D
+        },
+        'Rectangle2DInstanceData': {
+            type: BABYLON.Rectangle2DInstanceData
+        },
+        'Rectangle2DRenderCache': {
+            type: BABYLON.Rectangle2DRenderCache
+        },
+        'Render2DContext': {
+            type: BABYLON.Render2DContext
+        },
+        'RenderablePrim2D': {
+            type: BABYLON.RenderablePrim2D
+        },
+        'ScreenSpaceCanvas2D': {
+            type: BABYLON.ScreenSpaceCanvas2D
+        },
+        'Shape2D': {
+            type: BABYLON.Shape2D
+        },
+        'Shape2DInstanceData': {
+            type: BABYLON.Shape2DInstanceData
+        },
+        'Sprite2D': {
+            type: BABYLON.Sprite2D
+        },
+        'Sprite2DInstanceData': {
+            type: BABYLON.Sprite2DInstanceData
+        },
+        'Sprite2DRenderCache': {
+            type: BABYLON.Sprite2DRenderCache
+        },
+        'Text2D': {
+            type: BABYLON.Text2D
+        },
+        'Text2DInstanceData': {
+            type: BABYLON.Text2DInstanceData
+        },
+        'Text2DRenderCache': {
+            type: BABYLON.Text2DRenderCache
+        },
+        'WorldSpaceCanvas2D': {
+            type: BABYLON.WorldSpaceCanvas2D
+        },
+        'WorldSpaceCanvas2DNode': {
+            type: BABYLON.WorldSpaceCanvas2DNode
         }
-
     }
 
 }

inspector/test/index.js

@@ -16,7 +16,17 @@ var Test = (function () {
     Test.prototype._run = function () {
         var _this = this;
         this._initScene();
-        this.scene.debugLayer.show({ popup: false, initialTab: 4 });
+        this.scene.debugLayer.show({
+            popup: false,
+            parentElement: document.getElementById('inspector'),
+            newColors: {
+                backgroundColor: '#eee',
+                backgroundColorLighter: '#fff',
+                backgroundColorLighter2: '#fff',
+                backgroundColorLighter3: '#fff',
+                color: '#333'
+            }
+        });
         this.scene.executeWhenReady(function () {
             _this._initGame();
             _this.engine.runRenderLoop(function () {

loaders/src/glTF/babylon.glTFFileLoader.ts

@@ -934,7 +934,7 @@ module BABYLON {
                 var translation = node.translation || [0, 0, 0];
                 var rotation = node.rotation || [0, 0, 0, 1];
                 var scale = node.scale || [1, 1, 1];
-                configureNode(lastNode, Vector3.FromArray(translation), Quaternion.FromArray(rotation), Vector3.FromArray(scale));
+                configureNode(lastNode, Vector3.FromArray(translation), Quaternion.FromArray(rotation), Vector3.FromArray(scale));
             }
 
             lastNode.updateCache(true);
@@ -1293,14 +1293,14 @@ module BABYLON {
             return gltfRuntime;
         }
 
-        public static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): void {
+        public static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): void {
             var buffer: IGLTFBuffer = gltfRuntime.buffers[id];
 
             if (GLTFUtils.IsBase64(buffer.uri)) {
                 setTimeout(() => onSuccess(new Uint8Array(GLTFUtils.DecodeBase64(buffer.uri))));
             }
             else {
-                Tools.LoadFile(gltfRuntime.rootUrl + buffer.uri, data => onSuccess(new Uint8Array(data)), null, null, true, onError);
+                Tools.LoadFile(gltfRuntime.rootUrl + buffer.uri, data => onSuccess(new Uint8Array(data)), onProgress, null, true, onError);
             }
         }
 
@@ -1560,7 +1560,7 @@ module BABYLON {
         /**
         * Import meshes
         */
-        public importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onSuccess?: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError?: () => void): boolean {
+        public importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onSuccess?: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError?: () => void, onProgress?: () => void): boolean {
             scene.useRightHandedSystem = true;
 
             var gltfRuntime = GLTFFileLoaderExtension.LoadRuntimeAsync(scene, data, rootUrl, gltfRuntime => {
@@ -1613,7 +1613,8 @@ module BABYLON {
                             onSuccess(meshes, null, skeletons);
                         }
                     });
-                });
+                },
+                onProgress);
 
                 if (GLTFFileLoader.IncrementalLoading && onSuccess) {
                     onSuccess(meshes, null, skeletons);
@@ -1692,7 +1693,7 @@ module BABYLON {
             }
         };
 
-        private _loadBuffersAsync(gltfRuntime: IGLTFRuntime, onload: () => void): void {
+        private _loadBuffersAsync(gltfRuntime: IGLTFRuntime, onload: () => void, onProgress?: () => void): void {
             var hasBuffers = false;
 
             var processBuffer = (buf: string, buffer: IGLTFBuffer) => {

loaders/src/glTF/babylon.glTFFileLoaderExtension.ts

@@ -32,7 +32,7 @@ module BABYLON {
         * Defines an override for loading buffers
         * Return true to stop further extensions from loading this buffer
         */
-        public loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean {
+        public loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): boolean {
             return false;
         }
 
@@ -92,11 +92,11 @@ module BABYLON {
             });
         }
 
-        public static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (bufferView: ArrayBufferView) => void, onError: () => void): void {
+        public static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (bufferView: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): void {
             GLTFFileLoaderExtension.ApplyExtensions(loaderExtension => {
-                return loaderExtension.loadBufferAsync(gltfRuntime, id, onSuccess, onError);
+                return loaderExtension.loadBufferAsync(gltfRuntime, id, onSuccess, onError, onProgress);
             }, () => {
-                GLTFFileLoaderBase.LoadBufferAsync(gltfRuntime, id, onSuccess, onError);
+                GLTFFileLoaderBase.LoadBufferAsync(gltfRuntime, id, onSuccess, onError, onProgress);
             });
         }
 

src/Debug/babylon.debugLayer.ts

@@ -14,12 +14,25 @@ module BABYLON {
         }
 
         /** Creates the inspector window. */
-        private _createInspector(config: { popup?: boolean, initialTab?: number, parentElement?: HTMLElement } = {}) {
+        private _createInspector(config: {
+            popup?: boolean,
+            initialTab?: number,
+            parentElement?: HTMLElement,
+            newColors?: {
+                backgroundColor?: string,
+                backgroundColorLighter?: string,
+                backgroundColorLighter2?: string,
+                backgroundColorLighter3?: string,
+                color?: string,
+                colorTop?: string,
+                colorBot?: string
+            }
+        } = {}) {
             let popup = config.popup || false;
             let initialTab = config.initialTab || 0;
             let parentElement = config.parentElement || null;
             if (!this._inspector) {
-                this._inspector = new INSPECTOR.Inspector(this._scene, popup, initialTab, parentElement);
+                this._inspector = new INSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
             } // else nothing to do,; instance is already existing
         }
 
@@ -37,7 +50,20 @@ module BABYLON {
             }
         }
 
-        public show(config: { popup?: boolean, initialTab?: number, parentElement?: HTMLElement } = {}) {
+        public show(config: {
+            popup?: boolean,
+            initialTab?: number,
+            parentElement?: HTMLElement,
+            newColors?: {
+                backgroundColor?: string,
+                backgroundColorLighter?: string,
+                backgroundColorLighter2?: string,
+                backgroundColorLighter3?: string,
+                color?: string,
+                colorTop?: string,
+                colorBot?: string
+            }
+        } = {}) {
             if (typeof INSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
                 Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));