Inspector - new feature : console tab !

Tools/Gulp/config.json

@@ -537,6 +537,7 @@
         "../../inspector/src/tabs/MeshTab.ts",
         "../../inspector/src/tabs/SceneTab.ts",
         "../../inspector/src/tabs/ShaderTab.ts",
+        "../../inspector/src/tabs/ConsoleTab.ts",
         "../../inspector/src/tabs/StatsTab.ts",
         "../../inspector/src/tabs/TabBar.ts",
         "../../inspector/src/tools/AbstractTool.ts",

inspector/sass/main.scss

@@ -83,6 +83,7 @@
   @import 'treeTool';
   @import "tabPanel";
   @import "tabs/shaderTab";
+  @import "tabs/consoleTab";
   @import "tabs/statsTab";
 
   @import "tree";

inspector/sass/tabs/_consoleTab.scss

@@ -0,0 +1,46 @@
+.tab-panel {
+
+    .console-panel {
+        min-height              : 100px;
+        user-select             : text;
+        box-sizing              : border-box;
+        padding                 : 0 15px;    
+        
+        .console-panel-title {
+            height              : 25px;
+            border-bottom       : 1px solid $background-lighter2;
+            text-transform      : uppercase;
+            line-height         : 25px;
+            margin-bottom       : 10px; 
+        }
+        
+        .console-panel-content {            
+            overflow-y              : auto;
+            overflow-x              : hidden;    
+            height                  : calc(100% - 30px);
+        }  
+
+        .defaut-line {
+            word-wrap: break-word;
+            padding: 3px 0 3px 0;
+        }
+
+        .log {  
+            @extend .defaut-line;
+            color:white;
+        }   
+        
+        .warn {
+            @extend .defaut-line;
+            color:orange;
+        }
+        .error {
+            @extend .defaut-line;
+            color:orangered; 
+        }
+        .object {
+            @extend .defaut-line;
+            color:$color-bot;
+        }
+    }
+}

inspector/src/tabs/ConsoleTab.ts

@@ -0,0 +1,118 @@
+module INSPECTOR {
+
+    /** 
+     * The console tab will have two features : 
+     * - hook all console.log call and display them in this panel (and in the browser console as well)
+     * - display all Babylon logs (called with Tools.Log...)
+     */
+    export class ConsoleTab extends Tab {
+
+        private _inspector : Inspector;
+        
+        private _consolePanelContent : HTMLElement;
+        private _bjsPanelContent : HTMLElement;
+
+        private _oldConsoleLog : any;
+        private _oldConsoleWarn : any;
+        private _oldConsoleError : any;
+        
+
+        constructor(tabbar:TabBar, insp:Inspector) {
+            super(tabbar, 'Console');            
+            this._inspector = insp;
+
+            // Build the shaders panel : a div that will contains the shaders tree and both shaders panels
+            this._panel         = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
+
+            let consolePanel = Helpers.CreateDiv('console-panel') as HTMLDivElement;
+            let bjsPanel     = Helpers.CreateDiv('console-panel') as HTMLDivElement;
+
+            this._panel.appendChild(consolePanel);
+            this._panel.appendChild(bjsPanel);
+            
+            
+            Split([consolePanel, bjsPanel], {
+                blockDrag : this._inspector.popupMode,
+                sizes:[50, 50],
+                direction:'vertical'}
+            );  
+
+            // Titles
+            let title = Helpers.CreateDiv('console-panel-title', consolePanel);
+            title.textContent = 'Console logs';
+            title = Helpers.CreateDiv('console-panel-title', bjsPanel);
+            title.textContent = 'Babylon.js logs';
+
+            // Contents
+            this._consolePanelContent = Helpers.CreateDiv('console-panel-content', consolePanel) as HTMLDivElement;
+            this._bjsPanelContent     = Helpers.CreateDiv('console-panel-content', bjsPanel) as HTMLDivElement;
+
+            // save old console.log
+            this._oldConsoleLog       = console.log;
+            this._oldConsoleWarn      = console.warn;
+            this._oldConsoleError     = console.error;
+
+            console.log               = this._addConsoleLog.bind(this);
+            console.warn              = this._addConsoleWarn.bind(this);
+            console.error             = this._addConsoleError.bind(this);
+
+            // Bjs logs
+            this._bjsPanelContent.innerHTML = BABYLON.Tools.LogCache;
+            BABYLON.Tools.OnNewCacheEntry = (entry: string) => {
+                this._bjsPanelContent.innerHTML += entry;
+            };
+
+            console.log("This is a console.log message");
+            console.log("That's right, console.log calls are hooked to be written in this window");
+            console.log("Object are also stringify-ed", {width:10, height:30, shape:'rectangular'});
+            console.warn("This is a console.warn message");
+            console.error("This is a console.error message");
+
+            BABYLON.Tools.Log("This is a message");
+            BABYLON.Tools.Warn("This is a warning");
+            BABYLON.Tools.Error("This is a error");
+
+        }
+
+        /** Overrides super.dispose */
+        public dispose() {
+            console.log = this._oldConsoleLog;
+            console.warn = this._oldConsoleWarn;
+            console.error = this._oldConsoleError;
+
+        }
+
+        private _message(type:string, message:any) {
+            let line = Helpers.CreateDiv(type, this._consolePanelContent);
+            if (typeof message === "string") {
+                line.textContent += message ; 
+            } else {
+                line.textContent += JSON.stringify(message) ;
+                line.classList.add('object')
+            }
+        }
+
+        private _addConsoleLog(...params : any[]) {
+            for (var i = 0; i < params.length; i++) {
+                this._message('log', params[i]);
+                this._oldConsoleLog(params[i]);
+            }
+        }
+
+        private _addConsoleWarn(...params : any[]) {
+            for (var i = 0; i < params.length; i++) {
+                this._message('warn', params[i]);
+                this._oldConsoleWarn(params[i]);
+            }
+        }
+
+        private _addConsoleError(...params : any[]) {
+            for (var i = 0; i < params.length; i++) {
+                this._message('error', params[i]);
+                this._oldConsoleError(params[i]);
+            }
+        }
+
+    }
+
+}

inspector/src/tabs/TabBar.ts

@@ -25,8 +25,9 @@ module INSPECTOR {
             super();
             this._inspector = inspector;
             this._tabs.push(new SceneTab(this, this._inspector));
+            this._tabs.push(new ConsoleTab(this, this._inspector));
             this._tabs.push(new StatsTab(this, this._inspector));
-            this._meshTab = new MeshTab(this, this._inspector);
+            this._meshTab = new MeshTab(this, this._inspector); 
             this._tabs.push(this._meshTab);
             this._tabs.push(new ShaderTab(this, this._inspector));
             this._tabs.push(new LightTab(this, this._inspector));

inspector/test/index.js

@@ -89,7 +89,6 @@ var Test = (function () {
     };
     Test.prototype._initGame = function () {
         this._createCanvas();
-        BABYLON.SceneLoader.ImportMesh('', 'test/', 'Rabbit.babylon', this.scene);
     };
     /**
      * Create the canvas2D