Make the inspector stick around after reloading in sandbox

sandbox/index.js

@@ -52,9 +52,10 @@ if (BABYLON.Engine.isSupported()) {
     var filesInput;
     var currentScene;
     var currentSkybox;
-    var enableDebugLayer = false;
     var currentPluginName;
     var skyboxPath = "Assets/environment.dds";
+    var debugLayerEnabled = false;
+    var debugLayerLastActiveTab = 0;
 
     engine.loadingUIBackgroundColor = "#a9b5bc";
 
@@ -82,38 +83,24 @@ if (BABYLON.Engine.isSupported()) {
     });
 
     var sceneLoaded = function (sceneFile, babylonScene) {
-        function displayDebugLayerAndLogs() {
-            enableDebugLayer = true;
-            currentScene.debugLayer.show();
-        };
-        function hideDebugLayerAndLogs() {
-            enableDebugLayer = false;
-            currentScene.debugLayer.hide();
-        };
-
-        if (enableDebugLayer) {
-            hideDebugLayerAndLogs();
-        }
-
         // Clear dropdown that contains animation names
         dropdownContent.innerHTML = "";
         animationBar.style.display = "none";
         currentGroup = null;
 
-        if(babylonScene.animationGroups.length > 0) {
+        if (babylonScene.animationGroups.length > 0) {
             animationBar.style.display = "flex";
             for (var index = 0; index < babylonScene.animationGroups.length; index++) {
                 var group = babylonScene.animationGroups[index];
-			    createDropdownLink(group,index);
+                createDropdownLink(group, index);
             }
             currentGroup = babylonScene.animationGroups[0];
             currentGroupIndex = 0;
-            document.getElementById( formatId(currentGroup.name+"-"+currentGroupIndex)).click();
+            document.getElementById(formatId(currentGroup.name + "-" + currentGroupIndex)).click();
         }
 
         // Sync the slider with the current frame
         babylonScene.registerBeforeRender(function () {
-            
             if (currentGroup != null && currentGroup.targetedAnimations[0].animation.runtimeAnimations[0] != null) {
                 var currentValue = slider.valueAsNumber;
                 var newValue = currentGroup.targetedAnimations[0].animation.runtimeAnimations[0].currentFrame;
@@ -128,7 +115,7 @@ if (BABYLON.Engine.isSupported()) {
         errorZone.style.display = 'none';
 
         btnFullScreen.classList.remove("hidden");
-        btnInspector.classList.remove("hidden");        
+        btnInspector.classList.remove("hidden");
 
         currentScene = babylonScene;
         document.title = "BabylonJS - " + sceneFile.name;
@@ -181,11 +168,11 @@ if (BABYLON.Engine.isSupported()) {
         if (currentScene.meshes.length === 0 && currentScene.clearColor.r === 1 && currentScene.clearColor.g === 0 && currentScene.clearColor.b === 0) {
             document.getElementById("logo").className = "";
             canvas.style.opacity = 0;
-            displayDebugLayerAndLogs();
+            debugLayerEnabled = true;
         }
         else {
             if (BABYLON.Tools.errorsCount > 0) {
-                displayDebugLayerAndLogs();
+                debugLayerEnabled = true;
             }
             document.getElementById("logo").className = "hidden";
             document.getElementById("droptext").className = "hidden";
@@ -201,6 +188,9 @@ if (BABYLON.Engine.isSupported()) {
             }
         }
 
+        if (debugLayerEnabled) {
+            currentScene.debugLayer.show({ initialTab: debugLayerLastActiveTab });
+        }
     };
 
     var sceneError = function (sceneFile, babylonScene, message) {
@@ -226,7 +216,7 @@ if (BABYLON.Engine.isSupported()) {
             sceneLoaded({ name: fileName }, scene);
             currentScene = scene;
             scene.whenReadyAsync().then(function () {
-                engine.runRenderLoop(function ()  {
+                engine.runRenderLoop(function () {
                     scene.render();
                 });
             });
@@ -249,6 +239,7 @@ if (BABYLON.Engine.isSupported()) {
         window.addEventListener("keydown", function (event) {
             // Press R to reload
             if (event.keyCode === 82 && event.target.nodeName !== "INPUT") {
+                debugLayerLastActiveTab = currentScene.debugLayer.getActiveTab();
                 filesInput.reload();
             }
         });
@@ -277,13 +268,14 @@ if (BABYLON.Engine.isSupported()) {
 
     btnInspector.addEventListener('click', function () {
         if (currentScene) {
-            if (!enableDebugLayer) {
-                currentScene.debugLayer.show();
-                enableDebugLayer = true;
-
-            } else {
+            if (currentScene.debugLayer.isVisible()) {
+                debugLayerEnabled = false;
+                debugLayerLastActiveTab = currentScene.debugLayer.getActiveTab();
                 currentScene.debugLayer.hide();
-                enableDebugLayer = false;
+            }
+            else {
+                currentScene.debugLayer.show({ initialTab: debugLayerLastActiveTab });
+                debugLayerEnabled = true;
             }
         }
     }, false);
@@ -321,15 +313,14 @@ function sizeScene() {
     }
 }
 
-
 // animation
 // event on the dropdown
-function formatId(name){
-    return "data-" + name.replace(/\s/g,'');
+function formatId(name) {
+    return "data-" + name.replace(/\s/g, '');
 }
 
 function displayDropdownContent(display) {
-    if(display) {
+    if (display) {
         dropdownContent.style.display = "flex";
         chevronDown.style.display = "inline";
         chevronUp.style.display = "none";
@@ -340,8 +331,8 @@ function displayDropdownContent(display) {
         chevronUp.style.display = "inline";
     }
 }
-dropdownBtn.addEventListener("click", function() {
-    if(dropdownContent.style.display === "flex") {
+dropdownBtn.addEventListener("click", function () {
+    if (dropdownContent.style.display === "flex") {
         displayDropdownContent(false);
     }
     else {
@@ -349,15 +340,15 @@ dropdownBtn.addEventListener("click", function() {
     }
 });
 
-function createDropdownLink(group,index) {
+function createDropdownLink(group, index) {
     var animation = document.createElement("a");
     animation.innerHTML = group.name;
-    animation.setAttribute("id",  formatId(group.name+"-"+index));
-    animation.addEventListener("click", function() {
+    animation.setAttribute("id", formatId(group.name + "-" + index));
+    animation.addEventListener("click", function () {
         // stop the current animation group
         currentGroup.reset();
         currentGroup.stop();
-        document.getElementById( formatId(currentGroup.name+"-"+currentGroupIndex)).classList.remove("active");
+        document.getElementById(formatId(currentGroup.name + "-" + currentGroupIndex)).classList.remove("active");
         playBtn.classList.remove("play");
         playBtn.classList.add("pause");
 
@@ -381,9 +372,9 @@ function createDropdownLink(group,index) {
 }
 
 // event on the play/pause button
-playBtn.addEventListener("click", function() {
+playBtn.addEventListener("click", function () {
     // click on the button to run the animation
-    if( this.classList.contains("play") ) {
+    if (this.classList.contains("play")) {
         this.classList.remove("play");
         this.classList.add("pause");
         var currentFrame = slider.value;
@@ -398,8 +389,8 @@ playBtn.addEventListener("click", function() {
 });
 
 // event on the slider
-slider.addEventListener("input", function() {
-    if( playBtn.classList.contains("play") ) {
+slider.addEventListener("input", function () {
+    if (playBtn.classList.contains("play")) {
         currentGroup.play(true);
         currentGroup.goToFrame(this.value);
         currentGroup.pause();
@@ -409,15 +400,15 @@ slider.addEventListener("input", function() {
 });
 
 var sliderPause = false;
-slider.addEventListener("mousedown", function() {
-    if( playBtn.classList.contains("pause") ) {
+slider.addEventListener("mousedown", function () {
+    if (playBtn.classList.contains("pause")) {
         sliderPause = true;
         playBtn.click();
     }
 });
 
-slider.addEventListener("mouseup", function() {
-    if( sliderPause ) {
+slider.addEventListener("mouseup", function () {
+    if (sliderPause) {
         sliderPause = false;
         playBtn.click();
     }

src/Debug/babylon.debugLayer.ts

@@ -84,5 +84,12 @@ module BABYLON {
             }
         }
 
+        /**
+         * Gets the active tab
+         * @return the index of the active tab or -1 if the inspector is hidden
+         */
+        public getActiveTab(): number {
+            return this._inspector ? this._inspector.getActiveTabIndex() : -1;
+        }
     }
 }

src/Tools/babylon.filesInput.ts

@@ -217,7 +217,6 @@
                         Tools.ClearLogCache();
                     }
                     this._engine.stopRenderLoop();
-                    this._currentScene.dispose();
                 }
 
                 SceneLoader.LoadAsync("file:", this._sceneFileToLoad, this._engine, progress => {
@@ -225,6 +224,10 @@
                         this._progressCallback(progress);
                     }
                 }).then(scene => {
+                    if (this._currentScene) {
+                        this._currentScene.dispose();
+                    }
+
                     this._currentScene = scene;
 
                     if (this._sceneLoadedCallback) {