Babylon.js/inspector/src/tabs/ConsoleTab.ts

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;
            };

            // Testing
            //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, caller:string) {
            let callerLine = Helpers.CreateDiv('caller', this._consolePanelContent);
            callerLine.textContent = caller;

            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[]) {
            
            // Get caller name if not null
            let callerFunc = this._addConsoleLog.caller as Function;
            let caller = callerFunc==null? "Window" : "Function "+callerFunc['name'] + ": ";

            for (var i = 0; i < params.length; i++) {
                this._message('log', params[i], caller);
                // Write again in console does not work on edge, as the console object                 
                // is not instantiate if debugger tools is not open
                if (!Helpers.IsBrowserEdge()) {    
                    this._oldConsoleLog(params[i]);
                }
            }
        }

        private _addConsoleWarn(...params : any[]) {
            
            // Get caller name if not null
            let callerFunc = this._addConsoleLog.caller as Function;
            let caller = callerFunc==null? "Window" : callerFunc['name'];

            for (var i = 0; i < params.length; i++) {
                this._message('warn', params[i], caller);
                // Write again in console does not work on edge, as the console object 
                // is not instantiate if debugger tools is not open
                if (!Helpers.IsBrowserEdge()) {    
                    this._oldConsoleWarn(params[i]);
                }
            }
        }

        private _addConsoleError(...params : any[]) {
            
            // Get caller name if not null
            let callerFunc = this._addConsoleLog.caller as Function;
            let caller = callerFunc==null? "Window" : callerFunc['name'];

            for (var i = 0; i < params.length; i++) {
                this._message('error', params[i], caller);
                // Write again in console does not work on edge, as the console object 
                // is not instantiate if debugger tools is not open
                if (!Helpers.IsBrowserEdge()) {    
                    this._oldConsoleError(params[i]);
                }
            }
        }

    }

}