Inspector in global gulp

.gitignore

@@ -22,6 +22,7 @@ materialsLibrary/src/**/*.js
 proceduralTexturesLibrary/src/**/*.js
 postProcessLibrary/src/**/*.js
 canvas2D/src/**/*.js
+inspector/src/**/*.js
 
 # Build results
 [Dd]ebug/

.vscode/launch.json

@@ -38,6 +38,15 @@
             "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug"
         },
         {
+            "name": "Launch Inspector (Chrome)",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:1338/inspector/index.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug"
+        },
+        {
             "name": "Launch Local Dev (Chrome)",
             "type": "chrome",
             "request": "launch",

Tools/DevLoader/BabylonLoader.js

@@ -93,6 +93,16 @@ var BABYLONDEVTOOLS;
             queue.push(url);
         }
 
+        Loader.prototype.loadCss = function (url) {
+            var head = document.getElementsByTagName('head')[0];
+
+            var style = document.createElement('link');
+            style.href = url;
+            style.rel = "stylesheet";
+            style.type = "text/css"
+            document.head.appendChild(style);
+        }
+
         Loader.prototype.loadScripts = function (urls) {
             for (var i = 0; i< urls.length; i++) {
                 this.loadScript(urls[i]);
@@ -130,6 +140,12 @@ var BABYLONDEVTOOLS;
             else {
                 this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output);
             }
+
+            if (library.sassFiles && library.sassFiles.length > 0) {
+                var cssFile = library.output.replace('.js', '.css');
+                cssFile = babylonJSPath + '/dist/preview release' +  module.build.distOutputDirectory + cssFile;
+                this.loadCss(cssFile);
+            }
         }
 
         Loader.prototype.loadModule = function (module) {
@@ -163,6 +179,7 @@ var BABYLONDEVTOOLS;
             }
             getJson('/Tools/Gulp/config.json',
                 function(data) {
+                    self.loadScript('/dist/split.js');
                     self.loadBJSScripts(data);
                     if (dependencies) {
                         self.loadScripts(dependencies);

Tools/Gulp/config.json

@@ -228,7 +228,7 @@
     ]
   },
 
-  "modules": ["materialsLibrary", "postProcessesLibrary", "proceduralTexturesLibrary", "loaders", "serializers", "canvas2D"],
+  "modules": ["canvas2D", "materialsLibrary", "postProcessesLibrary", "proceduralTexturesLibrary", "loaders", "serializers", "inspector"],
 
   "materialsLibrary": {
     "libraries": [
@@ -500,5 +500,62 @@
       "srcOutputDirectory": "../../canvas2D/",      
       "distOutputDirectory": "/canvas2D/"
     }
+  },
+
+  "inspector": {
+    "libraries": [  
+    {
+      "files": [
+        "../../inspector/src/Inspector.ts",
+        "../../inspector/src/properties.ts",
+        "../../inspector/src/gui/BasicElement.ts",
+        "../../inspector/src/adapters/Adapter.ts",
+        "../../inspector/src/adapters/Canvas2DAdapter.ts",
+        "../../inspector/src/adapters/LightAdapter.ts",
+        "../../inspector/src/adapters/MaterialAdapter.ts",
+        "../../inspector/src/adapters/MeshAdapter.ts",
+        "../../inspector/src/details/DetailPanel.ts",
+        "../../inspector/src/details/Property.ts",
+        "../../inspector/src/details/PropertyLine.ts",
+        "../../inspector/src/gui/ColorElement.ts",
+        "../../inspector/src/gui/CubeTextureElement.ts",
+        "../../inspector/src/gui/HDRCubeTextureElement.ts",
+        "../../inspector/src/gui/SearchBar.ts",
+        "../../inspector/src/gui/TextureElement.ts",
+        "../../inspector/src/gui/Tooltip.ts",
+        "../../inspector/src/helpers/Helpers.ts",
+        "../../inspector/src/scheduler/Scheduler.ts",
+        "../../inspector/src/tabs/Tab.ts",
+        "../../inspector/src/tabs/PropertyTab.ts",
+        "../../inspector/src/tabs/Canvas2DTab.ts",
+        "../../inspector/src/tabs/LightTab.ts",
+        "../../inspector/src/tabs/MaterialTab.ts",
+        "../../inspector/src/tabs/MeshTab.ts",
+        "../../inspector/src/tabs/SceneTab.ts",
+        "../../inspector/src/tabs/ShaderTab.ts",
+        "../../inspector/src/tabs/TabBar.ts",
+        "../../inspector/src/tools/AbstractTool.ts",
+        "../../inspector/src/tools/PauseScheduleTool.ts",
+        "../../inspector/src/tools/PickTool.ts",
+        "../../inspector/src/tools/PopupTool.ts",
+        "../../inspector/src/tools/RefreshTool.ts",
+        "../../inspector/src/tools/Toolbar.ts",
+        "../../inspector/src/tree/TreeItem.ts",
+        "../../inspector/src/treetools/AbstractTreeTool.ts",
+        "../../inspector/src/treetools/BoundingBox.ts",
+        "../../inspector/src/treetools/Checkbox.ts",
+        "../../inspector/src/treetools/DebugArea.ts",
+        "../../inspector/src/treetools/Info.ts",
+        "../../inspector/src/lib.d.ts"
+        ],
+      "sassFiles": [
+        "../../inspector/sass/**/*.scss"
+      ],
+      "output": "babylon.inspector.js"
+    }],
+    "build": {
+      "srcOutputDirectory": "../../inspector/",      
+      "distOutputDirectory": "/inspector/"
+    }
   } 
 }

Tools/Gulp/gulpfile.js

@@ -18,6 +18,7 @@ var expect = require('gulp-expect-file');
 var optimisejs = require('gulp-optimize-js');
 var webserver = require('gulp-webserver');
 var path = require('path');
+var sass = require('gulp-sass');
 
 var config = require("./config.json");
 var customConfig = require("./custom.config.json");
@@ -244,7 +245,7 @@ var buildExternalLibrary= function(library, settings, watch) {
             .pipe(uncommentShader())            
             .pipe(appendSrcToVariable("BABYLON.Effect.ShadersStore", shadersName, library.output + '.fx'))
             .pipe(gulp.dest(settings.build.srcOutputDirectory));
-    
+
     var dev = tsProcess.js.pipe(sourcemaps.write("./", {
         includeContent:false, 
         sourceRoot: (filePath) => {
@@ -253,13 +254,18 @@ var buildExternalLibrary= function(library, settings, watch) {
     }))
     .pipe(gulp.dest(settings.build.srcOutputDirectory));
 
+    var outputDirectory = config.build.outputDirectory + settings.build.distOutputDirectory;
+    var css = gulp.src(library.sassFiles || [])
+        .pipe(sass().on('error', sass.logError))
+        .pipe(concat(library.output.replace(".js", ".css")))
+        .pipe(gulp.dest(outputDirectory));
+
     if (watch) {
-        return merge2([shader, dev]);    
+        return merge2([shader, dev, css]);    
     }
     else {
-        var outputDirectory = config.build.outputDirectory + settings.build.distOutputDirectory;
         
-        var dist = merge2(dev, [
+        var dist = merge2([dev, css], [
             merge2([tsProcess.js, shader])
                 .pipe(concat(library.output))
                 .pipe(gulp.dest(outputDirectory))
@@ -273,7 +279,8 @@ var buildExternalLibrary= function(library, settings, watch) {
             tsProcess.dts
                 .pipe(concat(library.output))
                 .pipe(rename({extname: ".d.ts"}))
-                .pipe(gulp.dest(outputDirectory))]);
+                .pipe(gulp.dest(outputDirectory)) 
+        ]);
 
         return dist;   
     }
@@ -330,6 +337,11 @@ gulp.task('watch', [], function () {
                 return buildExternalLibrary(library, config[module], true)
                 .pipe(debug()) 
             }));
+            tasks.push(gulp.watch(library.sassFiles, function() { 
+                console.log(library.output);
+                return buildExternalLibrary(library, config[module], true)
+                .pipe(debug()) 
+            }));
         }); 
     });
     

Tools/Gulp/package.json

@@ -25,7 +25,8 @@
     "gulp-expect-file": "^0.0.7",
     "gulp-optimize-js": "^1.0.2",
     "gulp-webserver": "^0.9.1",
-    "gulp-debug": "^3.0.0"
+    "gulp-debug": "^3.0.0",
+    "gulp-sass": "2.3.2"
   },
   "scripts": {
     "install": "npm --prefix ../../Playground/ install ../../Playground/ && gulp typescript-compile && gulp typescript-libraries && gulp deployLocalDev"

dist/preview release/babylon.max.js

@@ -51944,7 +51944,7 @@ var BABYLON;
     })(Internals = BABYLON.Internals || (BABYLON.Internals = {}));
 })(BABYLON || (BABYLON = {}));
 
-//# sourceMappingURL=babylon.tools.pmremGenerator.js.map
+//# sourceMappingURL=babylon.tools.pmremgenerator.js.map
 
 
 

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

@@ -0,0 +1,353 @@
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+@import url(http://fonts.googleapis.com/css?family=Inconsolata);
+
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+@import url(http://fonts.googleapis.com/css?family=Inconsolata);
+.insp-wrapper {
+  user-select: none;
+  display: flex;
+  font-size: 0.9em;
+  font-family: "Inconsolata", sans-serif;
+  /**
+ * A tool contained in the tree panel (available for each item of the tree)
+ */
+  /**
+ * The toolbar contains : 
+ * - a refresh tool - refresh the whole panel
+ * - a popup tool - Open the inspector in a new panel
+ * ...
+ */ }
+  .insp-wrapper .gutter {
+    background-color: #2c2c2c; }
+    .insp-wrapper .gutter.gutter-vertical {
+      cursor: ns-resize; }
+    .insp-wrapper .gutter.gutter-horizontal {
+      cursor: ew-resize; }
+  .insp-wrapper .insp-right-panel {
+    width: 750px;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0; }
+    .insp-wrapper .insp-right-panel .top-panel {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: #242424;
+      color: #ccc;
+      font-size: 1em; }
+      .insp-wrapper .insp-right-panel .top-panel .tab-panel-content {
+        width: 100%;
+        height: 100%; }
+      .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel {
+        position: absolute;
+        z-index: 10;
+        top: 30px;
+        right: 0;
+        width: 100px;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #454545;
+        background-color: #242424; }
+        .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel .invisible-tab {
+          height: 25px;
+          width: 100%;
+          line-height: 25px;
+          text-align: center;
+          background-color: #2c2c2c;
+          cursor: pointer; }
+          .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel .invisible-tab:hover {
+            background-color: #383838; }
+          .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel .invisible-tab:active {
+            background-color: #454545; }
+  .insp-wrapper .tooltip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    color: #ccc;
+    transform: translateX(100%) translateY(100%);
+    display: none;
+    z-index: 4;
+    font-family: "Inconsolata", sans-serif;
+    width: 120px;
+    padding: 5px 5px 5px 15px;
+    line-height: 25px;
+    background-color: #242424;
+    border: 1px solid #454545; }
+  .insp-wrapper .treeTool {
+    margin: 3px 8px 3px 3px;
+    cursor: pointer;
+    position: relative; }
+    .insp-wrapper .treeTool:hover {
+      color: #5db0d7; }
+    .insp-wrapper .treeTool.active {
+      color: #5db0d7; }
+  .insp-wrapper .tab-panel {
+    height: 100%; }
+    .insp-wrapper .tab-panel .scene-actions {
+      overflow-y: auto; }
+      .insp-wrapper .tab-panel .scene-actions .actions-title {
+        font-size: 1.1em;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #5db0d7;
+        margin: 10px 0 10px 0; }
+      .insp-wrapper .tab-panel .scene-actions .defaut-action, .insp-wrapper .tab-panel .scene-actions .action-radio, .insp-wrapper .tab-panel .scene-actions .action {
+        height: 20px;
+        line-height: 20px;
+        width: 100%;
+        cursor: pointer; }
+        .insp-wrapper .tab-panel .scene-actions .defaut-action:hover, .insp-wrapper .tab-panel .scene-actions .action-radio:hover, .insp-wrapper .tab-panel .scene-actions .action:hover {
+          background-color: #2c2c2c; }
+        .insp-wrapper .tab-panel .scene-actions .defaut-action:active, .insp-wrapper .tab-panel .scene-actions .action-radio:active, .insp-wrapper .tab-panel .scene-actions .action:active {
+          background-color: #383838; }
+      .insp-wrapper .tab-panel .scene-actions .action-radio:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f10c";
+        margin-right: 10px; }
+      .insp-wrapper .tab-panel .scene-actions .action-radio.active:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f192";
+        color: #5db0d7;
+        margin-right: 10px; }
+      .insp-wrapper .tab-panel .scene-actions .action:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f096";
+        margin-right: 10px; }
+      .insp-wrapper .tab-panel .scene-actions .action.active:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f14a";
+        color: #5db0d7;
+        margin-right: 10px; }
+  .insp-wrapper .tab-panel .shader-tree-panel {
+    height: 30px; }
+    .insp-wrapper .tab-panel .shader-tree-panel select {
+      height: 30px;
+      background-color: transparent;
+      color: #ccc;
+      height: 30px;
+      width: 100%;
+      max-width: 300px;
+      padding-left: 15px;
+      border: 1px solid #2c2c2c;
+      outline: 1px solid #454545; }
+      .insp-wrapper .tab-panel .shader-tree-panel select option {
+        padding: 5px;
+        color: gray; }
+  .insp-wrapper .tab-panel .shader-panel {
+    min-height: 100px;
+    user-select: text;
+    box-sizing: border-box;
+    padding: 0 15px; }
+    .insp-wrapper .tab-panel .shader-panel pre {
+      margin: 0;
+      white-space: pre-wrap; }
+      .insp-wrapper .tab-panel .shader-panel pre code {
+        background-color: #242424 !important;
+        padding: 0;
+        margin: 0; }
+    .insp-wrapper .tab-panel .shader-panel .shader-panel-title {
+      height: 25px;
+      border-bottom: 1px solid #383838;
+      text-transform: uppercase;
+      line-height: 25px;
+      margin-bottom: 10px; }
+  .insp-wrapper .property-type {
+    color: #5db0d7; }
+  .insp-wrapper .property-name, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {
+    color: #f29766; }
+  .insp-wrapper .insp-tree {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(50% - 30px - 30px); }
+    .insp-wrapper .insp-tree .line {
+      cursor: pointer; }
+      .insp-wrapper .insp-tree .line:hover {
+        background-color: #2c2c2c; }
+      .insp-wrapper .insp-tree .line.active {
+        background-color: #454545; }
+        .insp-wrapper .insp-tree .line.active .line-content {
+          background-color: #242424; }
+      .insp-wrapper .insp-tree .line.unfolded:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f078"; }
+      .insp-wrapper .insp-tree .line.folded:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f054"; }
+      .insp-wrapper .insp-tree .line .line-content {
+        padding-left: 15px; }
+        .insp-wrapper .insp-tree .line .line-content:hover {
+          background-color: #242424; }
+        .insp-wrapper .insp-tree .line .line-content .line:hover:first-child {
+          background-color: #383838; }
+  .insp-wrapper .insp-details {
+    background-color: #242424;
+    overflow-y: auto;
+    overflow-x: hidden;
+    color: #ccc;
+    font-family: "Inconsolata", sans-serif; }
+    .insp-wrapper .insp-details .base-row, .insp-wrapper .insp-details .row, .insp-wrapper .insp-details .header-row {
+      display: flex;
+      width: 100%; }
+      .insp-wrapper .insp-details .base-row .base-property, .insp-wrapper .insp-details .row .base-property, .insp-wrapper .insp-details .header-row .base-property, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name, .insp-wrapper .insp-details .base-row .prop-value, .insp-wrapper .insp-details .row .prop-value, .insp-wrapper .insp-details .header-row .prop-value {
+        word-wrap: break-word;
+        padding: 2px 0 2px 0; }
+      .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {
+        width: 35%; }
+      .insp-wrapper .insp-details .base-row .prop-value, .insp-wrapper .insp-details .row .prop-value, .insp-wrapper .insp-details .header-row .prop-value {
+        width: 59%;
+        padding-left: 10px; }
+        .insp-wrapper .insp-details .base-row .prop-value.clickable, .insp-wrapper .insp-details .row .prop-value.clickable, .insp-wrapper .insp-details .header-row .prop-value.clickable {
+          cursor: pointer; }
+          .insp-wrapper .insp-details .base-row .prop-value.clickable:hover, .insp-wrapper .insp-details .row .prop-value.clickable:hover, .insp-wrapper .insp-details .header-row .prop-value.clickable:hover {
+            background-color: #383838; }
+          .insp-wrapper .insp-details .base-row .prop-value.clickable:after, .insp-wrapper .insp-details .row .prop-value.clickable:after, .insp-wrapper .insp-details .header-row .prop-value.clickable:after {
+            font-family: 'FontAwesome', sans-serif;
+            content: "\00a0 \00a0 \00a0 \f054"; }
+    .insp-wrapper .insp-details .row:nth-child(even) {
+      background-color: #2c2c2c; }
+    .insp-wrapper .insp-details .row.unfolded .prop-value.clickable:after {
+      font-family: 'FontAwesome', sans-serif;
+      content: "\00a0 \00a0 \00a0 \f078"; }
+    .insp-wrapper .insp-details .header-row {
+      background-color: #2c2c2c;
+      color: #ccc;
+      width: 100%; }
+      .insp-wrapper .insp-details .header-row > * {
+        color: #ccc !important;
+        padding: 5px 0 5px 5px !important;
+        cursor: pointer; }
+        .insp-wrapper .insp-details .header-row > *:hover {
+          background-color: #383838; }
+      .insp-wrapper .insp-details .header-row .header-col {
+        display: flex;
+        justify-content: space-between;
+        align-items: center; }
+        .insp-wrapper .insp-details .header-row .header-col .sort-direction {
+          margin-right: 5px; }
+    .insp-wrapper .insp-details .element-viewer, .insp-wrapper .insp-details .color-element, .insp-wrapper .insp-details .texture-element {
+      position: relative;
+      width: 10px;
+      height: 10px;
+      display: inline-block;
+      margin-left: 5px; }
+    .insp-wrapper .insp-details .texture-element {
+      color: #f29766;
+      margin-left: 10px; }
+      .insp-wrapper .insp-details .texture-element .texture-viewer {
+        color: #ccc;
+        position: absolute;
+        z-index: 10;
+        bottom: 0;
+        right: 0;
+        display: block;
+        width: 150px;
+        height: 150px;
+        border: 1px solid #454545;
+        background-color: #242424;
+        transform: translateX(100%) translateY(100%);
+        display: none;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center; }
+        .insp-wrapper .insp-details .texture-element .texture-viewer .texture-viewer-img {
+          margin: 10px 0 10px 0;
+          max-width: 110px;
+          max-height: 110px; }
+  .insp-wrapper .tabbar {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #383838;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden; }
+    .insp-wrapper .tabbar .tab {
+      height: 30px;
+      width: auto;
+      padding: 0 10px 0 10px;
+      color: #ccc;
+      line-height: 30px;
+      text-align: center;
+      cursor: pointer;
+      margin: 0 5px 0 5px; }
+      .insp-wrapper .tabbar .tab:hover {
+        border-bottom: 1px solid #f29766;
+        background-color: #2c2c2c; }
+      .insp-wrapper .tabbar .tab:active {
+        background-color: #383838; }
+      .insp-wrapper .tabbar .tab.active {
+        border-bottom: 1px solid #f29766; }
+    .insp-wrapper .tabbar .more-tabs {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      border-right: 1px solid #383838; }
+      .insp-wrapper .tabbar .more-tabs:hover {
+        background-color: #383838; }
+      .insp-wrapper .tabbar .more-tabs:active {
+        color: #f29766;
+        background-color: #454545; }
+      .insp-wrapper .tabbar .more-tabs.active {
+        color: #f29766; }
+  .insp-wrapper .toolbar {
+    display: flex; }
+    .insp-wrapper .toolbar .tool {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      border-right: 1px solid #383838; }
+      .insp-wrapper .toolbar .tool:hover {
+        background-color: #383838; }
+      .insp-wrapper .toolbar .tool:active {
+        color: #f29766;
+        background-color: #454545; }
+      .insp-wrapper .toolbar .tool.active {
+        color: #f29766; }
+  .insp-wrapper .searchbar {
+    border: 1px solid #2c2c2c;
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+    color: #b3b3b3; }
+    .insp-wrapper .searchbar input {
+      background-color: #242424;
+      border: none;
+      width: 100%;
+      outline: none;
+      font-family: "Inconsolata", sans-serif;
+      color: #b3b3b3;
+      padding: 3px 0 3px 10px;
+      margin: 6px 0 6px 0; }

inspector/.gitignore

@@ -1,8 +0,0 @@
-.idea
-node_modules
-.tmp
-*.map
-.tscache
-.history
-.vscode
-yarn.lock

inspector/Gruntfile.js

@@ -1,151 +0,0 @@
-module.exports = function (grunt) {
-    
-    // load all grunt tasks
-    require('jit-grunt')(grunt);    
-
-    grunt.initConfig({
-        
-        clean: {
-            init: ['dist/libs/inspector.js', 'dist/libs/main.css', 'dist/inspector.js', 'dist/inspector.d.ts'],
-            compilation: ['dist/inspector/', 'dist/libs/inspector.js', 'dist/libs/main.css']
-        },
-
-        // Compilation from TypeScript to ES5²
-        ts: {
-            inspector: {
-                src : ['ts/**/*.ts', 'ts/typings/**/*'],
-                outDir: "dist",
-                options:{
-                    module: 'amd',
-                    target: 'es5',
-                    declaration: true,
-                    sourceMap:true,
-                    removeComments:false
-                }
-            }
-        },
-        // Concat definition files 
-        concat: {
-            inspector: {
-                files: {
-                    'dist/inspector.d.ts': ['dist/inspector/**/*.d.ts']
-                },
-            },
-        },
-        // Watches content related changes
-        watch : {
-            inspector : {
-                files: ['ts/inspector/**/*.ts'],
-                tasks: ['ts']
-            },
-            test : {
-                files: ['ts/test/**/*.ts'],
-                tasks: ['ts']
-            },
-            sass : {
-                files: ['sass/**/*.scss'],
-                tasks: ['sass','postcss']
-            }
-        },
-        // Sass compilation. Produce an extended css file in css folder
-        sass : {
-            options: {
-                sourcemap:'none',
-                style: 'expanded'
-            },
-            dist : {
-                files: {
-                    'dist/libs/main.css': 'sass/main.scss'
-                }
-            }
-        },
-        // Auto prefixer css
-        postcss : {
-            dist: {
-                options: {
-                    processors: [
-                        require('autoprefixer')({browsers: 'last 2 versions'}),
-                        require('cssnano')()
-                    ]
-                },
-                src: 'dist/libs/main.css'
-            }
-        },
-        // Build dist version
-        uglify : {
-            dist: {
-                options: {
-                    compress:false,
-                    beautify: true
-                },
-                files: {
-                    'dist/libs/inspector.js': [
-                        'dist/inspector/gui/BasicElement.js',
-                        'dist/inspector/gui/CubeTextureElement.js',
-                        'dist/inspector/adapters/Adapter.js',
-                        'dist/inspector/tabs/Tab.js',
-                        'dist/inspector/tabs/PropertyTab.js',
-                        'dist/inspector/tools/AbstractTool.js',
-                        'dist/inspector/treeTools/AbstractTreeTool.js',
-                        'dist/inspector/**/*.js']
-                }
-            }
-        },
-        //Server creation
-        connect: {
-            server: {
-                options: {
-                    port: 3000,
-                    base: '.'
-                }
-            },
-            test: {
-                options: {
-                    port: 3000,
-                    base: '.',
-                    keepalive:true
-                }
-            }
-        },
-        // Open default browser
-        open: {
-            local: {
-                path: 'http://localhost:3000/dist/test'
-            }
-        },
-        webpack: {
-            inspector: require("./webpack.config.js")
-        }
-    }); 
-
-    grunt.registerTask('default', 'Compile and watch source files', [
-        'dev',
-        'connect:server',
-        'open',
-        'watch'
-    ]);
-
-    grunt.registerTask('dev', 'build dev version', [
-        'clean:init',
-        'ts',
-        'sass',
-        'postcss', 
-    ]);
-
-    grunt.registerTask('test', 'test dist version', [
-        'open',
-        'connect:test'
-    ]);
-
-    // Compilation and webpack
-    grunt.registerTask('dist', 'build dist version', [
-        'dev',
-        'uglify',
-        'concat',
-        'webpack',
-        'clean:compilation'
-    ]);
-
-};
-
-

inspector/README.md

@@ -15,7 +15,7 @@ it to the html page.
 ### Offline method
 If you don't have access to internet, the inspector should be imported manually in your HTML page :
 ```
-<script src="inspector.js" />
+<script src="babylon.inspector.js" />
 ``` 
 Then, call the method `show` of the scene debugLayer: 
 ```
@@ -31,7 +31,7 @@ the engine. Several tools are also available for specific actions.
 
 ##Tabs 
 
-![](https://raw.githubusercontent.com/Temechon/Babylon.js/master/inspector/screens/tab_mesh.jpg)
+![](screens/tab_mesh.jpg)
 
 Tabs are separated in two parts (although some are very specific - `Shader` for example): 
 * a tree panel, presenting a list of object relative to the current tab (meshes, materials...)
@@ -53,7 +53,7 @@ manipulate some options (like the old debug layer)
 
 Some properties (like colors, texture...) can display 
 ### Tools
-![](https://raw.githubusercontent.com/Temechon/Babylon.js/master/inspector/screens/tools.jpg)
+![](screens/tools.jpg)
 
 Several tools are available (from left to right) : 
 * Refresh - the current tab is refreshed with the last version of the list of objects
@@ -63,16 +63,10 @@ Several tools are available (from left to right) :
 
 ## Contribute
 
+From the tools/gulp folder:
 ```
 npm install
-grunt
+gulp inspector
 ```
 
-## Create the inspector from source
-
-```
-grunt dist
-```
-The library will be in the `dist` folder.
-
 

inspector/dist/.baseDir.js

@@ -1,2 +0,0 @@
-// Ignore this file. See https://github.com/grunt-ts/grunt-ts/issues/77 
-//# sourceMappingURL=.baseDir.js.map

inspector/dist/test/Test.d.ts

@@ -1,12 +0,0 @@
-declare class Test {
-    private engine;
-    scene: BABYLON.Scene;
-    constructor(canvasId: string);
-    private _run();
-    private _initScene();
-    private _initGame();
-    /**
-     * Create the canvas2D
-     */
-    private _createCanvas();
-}

inspector/dist/test/index.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Inspector - test</title>
-    <meta charset='utf-8'/>
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-
-    <!--Babylon-->
-    <!--<script src="../libs/split.js"></script>-->
-    <script src="../libs/babylon.max.js"></script>
-    <script src="../libs/babylon.canvas2d.max.js"></script>
-    <!--Dist-->
-    <script src="../inspector.js"></script>
-    
-    <!--Debug-->
-    <!--<link rel="stylesheet" href="../libs/main.css">
-
-    <script src="../inspector/properties.js"></script> 
-    
-    <script src="../inspector/adapters/Adapter.js"></script> 
-    <script src="../inspector/adapters/Canvas2DAdapter.js"></script> 
-    <script src="../inspector/adapters/MeshAdapter.js"></script> 
-    <script src="../inspector/adapters/MaterialAdapter.js"></script> 
-    <script src="../inspector/adapters/LightAdapter.js"></script> 
-
-    <script src="../inspector/gui/BasicElement.js"></script> 
-    <script src="../inspector/gui/ColorElement.js"></script>
-    <script src="../inspector/gui/TextureElement.js"></script>
-    <script src="../inspector/gui/CubeTextureElement.js"></script>
-    <script src="../inspector/gui/HDRCubeTextureElement.js"></script>
-    <script src="../inspector/gui/SearchBar.js"></script>
-    <script src="../inspector/gui/Tooltip.js"></script>
-
-    <script src="../inspector/details/Property.js"></script> 
-    <script src="../inspector/details/DetailPanel.js"></script>
-    <script src="../inspector/details/PropertyLine.js"></script>
-    
-    <script src="../inspector/helpers/Helpers.js"></script>
-    
-    <script src="../inspector/tabs/Tab.js"></script>
-    <script src="../inspector/tabs/PropertyTab.js"></script>
-    <script src="../inspector/tabs/Tabbar.js"></script>
-    
-    <script src="../inspector/tabs/SceneTab.js"></script>
-    <script src="../inspector/tabs/Canvas2DTab.js"></script>
-    <script src="../inspector/tabs/MeshTab.js"></script>
-    <script src="../inspector/tabs/LightTab.js"></script>
-    <script src="../inspector/tabs/MaterialTab.js"></script>
-    <script src="../inspector/tabs/ShaderTab.js"></script>
-
-    <script src="../inspector/tools/AbstractTool.js"></script>
-    <script src="../inspector/tools/PopupTool.js"></script>
-    <script src="../inspector/tools/RefreshTool.js"></script>
-    <script src="../inspector/tools/PauseScheduleTool.js"></script>
-    <script src="../inspector/tools/PickTool.js"></script>
-    <script src="../inspector/tools/Toolbar.js"></script>
-
-    <script src="../inspector/treetools/AbstractTreeTool.js"></script>
-    <script src="../inspector/treetools/Checkbox.js"></script>
-    <script src="../inspector/treetools/DebugArea.js"></script>
-    <script src="../inspector/treetools/BoundingBox.js"></script>
-    <script src="../inspector/treetools/Info.js"></script>
-
-    <script src="../inspector/tree/TreeItem.js"></script>
-    
-    <script src="../inspector/scheduler/Scheduler.js"></script> 
-    
-    <script src="../inspector/Inspector.js"></script> -->
-
-    <script src="Test.js"></script>
-
-    <style>
-        .mini {
-            width:100%;
-            margin:auto;
-            height:100%;
-        }
-        
-        html, body {
-            width: 100%;
-            height:100%;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-            font-family : sans-serif;
-        }
-
-        #game-canvas {
-            width:100%;
-            height:100%; 
-        }
-
-    </style>
-
-</head>
-<body>
-
-    
-    <!--The game canvas-->
-    <div class="mini">
-        <canvas id="game-canvas"></canvas> 
-    </div>
-
-    <!--Starting the game-->
-    <script>
-        window.addEventListener("DOMContentLoaded", function(){
-            new Test('game-canvas');
-        });
-    </script>
-
-</body>
-</html>

inspector/dist/typings/babylon.d.old.js

@@ -1 +0,0 @@
-//# sourceMappingURL=babylon.d.old.js.map

inspector/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Inspector - test</title>
+    <meta charset='utf-8'/>
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+
+    <!--Babylon-->
+	<script src="../tools/DevLoader/BabylonLoader.js"></script>
+
+    <style>
+        .mini {
+            width:100%;
+            margin:auto;
+            height:100%;
+        }
+        
+        html, body {
+            width: 100%;
+            height:100%;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+            font-family:sans-serif;
+        }
+
+        #game-canvas {
+            width:100%;
+            height:100%; 
+        }
+
+    </style>
+
+</head>
+<body>
+    <!--The game canvas-->
+    <div class="mini">
+        <canvas id="game-canvas"></canvas> 
+    </div>
+
+    <!--Starting the game-->
+    <script>
+        BABYLONDEVTOOLS.Loader.require("test/index.js").load(function() {
+            new Test('game-canvas');
+	    });
+	</script>
+</body>
+</html>

inspector/index.js

@@ -1,3 +0,0 @@
-require("./dist/libs/main.css");
-window.Split = require("./dist/libs/split.js");
-module.exports = require("exports?INSPECTOR!./dist/libs/inspector.js");

inspector/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "babylonjs-inspector",
-  "version": "1.0.0",
-  "devDependencies": {
-    "autoprefixer": "latest",
-    "css-loader": "^0.25.0",
-    "cssnano": "latest",
-    "exports-loader": "^0.6.3",
-    "grunt": "latest",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-concat": "^1.0.1",
-    "grunt-contrib-connect": "^0.11.2",
-    "grunt-contrib-uglify": "^2.0.0",
-    "grunt-contrib-watch": "latest",
-    "grunt-dts-bundle": "^0.3.0",
-    "grunt-newer": "latest",
-    "grunt-open": "latest",
-    "grunt-postcss": "latest",
-    "grunt-sass": "latest",
-    "grunt-ts": "^5.5.1",
-    "grunt-webpack": "^1.0.18",
-    "imports-loader": "^0.6.5",
-    "jit-grunt": "latest",
-    "style-loader": "^0.13.1",
-    "time-grunt": "latest",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.16.2"
-  }
-}

inspector/ts/typings/split.d.ts

@@ -1,4 +1,5 @@
-
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../dist/preview release/canvas2D/babylon.canvas2D.d.ts"/>
 
 interface ISplit {
     setSizes(sizes:Array<number>);
@@ -17,4 +18,4 @@ declare function Split (element : Array<HTMLElement> | Array<string>, options:{
     onDrag?     : Function,
     onDragStart?: Function,
     onDragEnd?  : Function,        
-}) : ISplit;
+}) : ISplit;

inspector/ts/inspector/tabs/TabBar.ts

@@ -179,7 +179,7 @@ module INSPECTOR {
                     this._div.appendChild(lastTab.toHtml());
                     this._visibleTabs.push(lastTab);
                     // Update more-tab icon in last position if needed
-                    this._div.removeChild(this._moreTabsIcon);
+                    //this._div.removeChild(this._moreTabsIcon);
                 }
             }
             if (this._invisibleTabs.length > 0 && !this._div.contains(this._moreTabsIcon)) {

inspector/src/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "module": "commonjs", 
+        "target": "es5"
+    }
+}

inspector/dist/test/Test.js

@@ -1,3 +1,6 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../dist/preview release/canvas2D/babylon.canvas2D.d.ts"/>
+
 var Test = (function () {
     function Test(canvasId) {
         var _this = this;
@@ -12,8 +15,7 @@ var Test = (function () {
     Test.prototype._run = function () {
         var _this = this;
         this._initScene();
-        // new INSPECTOR.Inspector(this.scene); 
-        BABYLON.DebugLayer.InspectorURL = 'http://localhost:3000/dist/libs/inspector.js';
+        // BABYLON.DebugLayer.InspectorURL = 'http://localhost:1338/dist/preview release/inspector/babylon.inspector.js';
         this.scene.debugLayer.show();
         this.scene.executeWhenReady(function () {
             _this._initGame();
@@ -129,5 +131,4 @@ var Test = (function () {
         insideRect.roundRadius = 2;
     };
     return Test;
-}());
-//# sourceMappingURL=Test.js.map
+}());

inspector/ts/.baseDir.ts

@@ -1 +0,0 @@
-// Ignore this file. See https://github.com/grunt-ts/grunt-ts/issues/77

inspector/ts/test/Test.ts

@@ -1,169 +0,0 @@
-class Test { 
-
-    private engine: BABYLON.Engine;
-    public scene: BABYLON.Scene;
-
-    constructor(canvasId: string) {
-
-        let canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById(canvasId);
-        this.engine = new BABYLON.Engine(canvas, true);
-
-        this.scene = null;
-
-        window.addEventListener("resize", () => {
-            this.engine.resize();
-        });
-
-        this._run();
-
-    }
-
-    private _run() {
-        
-        this._initScene();
-
-        // new INSPECTOR.Inspector(this.scene); 
-        BABYLON.DebugLayer.InspectorURL = 'http://localhost:3000/dist/libs/inspector.js';
-        this.scene.debugLayer.show();
-        this.scene.executeWhenReady(() => {
-            
-            this._initGame();
-
-            this.engine.runRenderLoop(() => {
-                this.scene.render();
-            });
-        });
-    }
-
-    private _initScene() {
-
-        var scene = new BABYLON.Scene(this.engine);
-        var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
-        camera.attachControl(this.engine.getRenderingCanvas(), true);
-        camera.minZ = 0.1;
-    // Lights
-        var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);
-        var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 0), scene);
-        var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 0), scene);
-        var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);
-
-        var material = new BABYLON.StandardMaterial("kosh", scene);
-        var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
-
-        // Creating light sphere
-        var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene);
-        var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene);
-        var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene);
-
-        lightSphere0.material = new BABYLON.StandardMaterial("red", scene);
-        (lightSphere0.material as BABYLON.StandardMaterial).diffuseColor = new BABYLON.Color3(0, 0, 0);
-        (lightSphere0.material as BABYLON.StandardMaterial).specularColor = new BABYLON.Color3(0, 0, 0);
-        (lightSphere0.material as BABYLON.StandardMaterial).emissiveColor = new BABYLON.Color3(1, 0, 0);
-
-        lightSphere1.material = new BABYLON.StandardMaterial("green", scene);
-        (lightSphere1.material as BABYLON.StandardMaterial).diffuseColor = new BABYLON.Color3(0, 0, 0);
-        (lightSphere1.material as BABYLON.StandardMaterial).specularColor = new BABYLON.Color3(0, 0, 0);
-        (lightSphere1.material as BABYLON.StandardMaterial).emissiveColor = new BABYLON.Color3(0, 1, 0);
-
-        lightSphere2.material = new BABYLON.StandardMaterial("blue", scene);
-        (lightSphere2.material as BABYLON.StandardMaterial).diffuseColor = new BABYLON.Color3(0, 0, 0);
-        (lightSphere2.material as BABYLON.StandardMaterial).specularColor = new BABYLON.Color3(0, 0, 0);
-        (lightSphere2.material as BABYLON.StandardMaterial).emissiveColor = new BABYLON.Color3(0, 0, 1);
-
-        // Sphere material
-        material.diffuseColor = new BABYLON.Color3(1, 1, 1);
-        sphere.material = material;
-
-        // Lights colors
-        light0.diffuse = new BABYLON.Color3(1, 0, 0);
-        light0.specular = new BABYLON.Color3(1, 0, 0);
-
-        light1.diffuse = new BABYLON.Color3(0, 1, 0);
-        light1.specular = new BABYLON.Color3(0, 1, 0);
-
-        light2.diffuse = new BABYLON.Color3(0, 0, 1);
-        light2.specular = new BABYLON.Color3(0, 0, 1);
-
-        light3.diffuse = new BABYLON.Color3(1, 1, 1);
-        light3.specular = new BABYLON.Color3(1, 1, 1);
-
-        BABYLON.Effect.ShadersStore["customVertexShader"] = 'precision highp float;attribute vec3 position;attribute vec2 uv;uniform mat4 worldViewProjection;varying vec2 vUV;varying vec3 vPos;void main(){gl_Position=worldViewProjection*vec4(position,1.),vPos=gl_Position.xyz;if(position.x >2.0) {gl_Position.x = 2.0;} else { gl_Position.y = 1.0;}}';
-        BABYLON.Effect.ShadersStore["customFragmentShader"] = 'precision highp float;varying vec3 vPos;uniform vec3 color;void main(){gl_FragColor=vec4(mix(color,vPos,.05),1.);}';
-        
-        var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
-            vertex: "custom",
-            fragment: "custom",
-        },
-        {
-            attributes: ["position", "normal", "uv"],
-            uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
-            });
-        sphere.material = shaderMaterial;
-
-        // Animations
-        var alpha = 0;
-        scene.beforeRender = function () {
-            light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
-            light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
-            light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));
-
-            lightSphere0.position = light0.position;
-            lightSphere1.position = light1.position;
-            lightSphere2.position = light2.position;
-
-            alpha += 0.01;
-        };
-        
-        this.scene = scene;        
-    }
-
-
-    private _initGame () {
-        
-        
-        this._createCanvas();
-    }
-
-    /**
-     * Create the canvas2D 
-     */
-    private _createCanvas() {
-            var canvas = new BABYLON.ScreenSpaceCanvas2D(this.scene, {
-            id: "Hello world SC",
-            size: new BABYLON.Size(300, 100),
-            backgroundFill: "#4040408F",
-            backgroundRoundRadius: 50,
-            children: [
-                new BABYLON.Text2D("Hello World!", {
-                    id: "text",
-                    marginAlignment: "h: center, v:center",
-                    fontName: "20pt Arial",
-                })
-            ]
-        });
-
-        var infoCanvas = new BABYLON.ScreenSpaceCanvas2D(this.scene, { id: "PINK CUBE SC", size: new BABYLON.Size(500, 500) });
-    var text2 = new BABYLON.Text2D("UnbindTime", { parent: infoCanvas, id: "Text", marginAlignment: "h: left, v: bottom", fontName: "10pt Arial" });
-    canvas = new BABYLON.WorldSpaceCanvas2D(this.scene, new BABYLON.Size(150, 150), {
-        id: "WorldSpaceCanvas",
-        worldPosition: new BABYLON.Vector3(0, 0, 0),
-        worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 4, Math.PI / 4, 0),
-        enableInteraction: true,
-        backgroundFill: "#C0C0C040",
-        backgroundRoundRadius: 20,
-        children: [
-            new BABYLON.Text2D("World Space Canvas", { fontName: "8pt Arial", marginAlignment: "h: center, v: bottom", fontSuperSample: true })
-        ]
-    });
-    var rect = new BABYLON.Rectangle2D({ parent: canvas, x: 45, y: 45, width: 30, height: 30, fill: null, border: BABYLON.Canvas2D.GetGradientColorBrush(new BABYLON.Color4(0.9, 0.3, 0.9, 1), new BABYLON.Color4(1.0, 1.0, 1.0, 1)), borderThickness: 2 });
-    var buttonRect = new BABYLON.Rectangle2D({ parent: canvas, id: "button", x: 12, y: 12, width: 50, height: 15, fill: "#40C040FF", roundRadius: 2, children: [new BABYLON.Text2D("Click Me!", { fontName: "8pt Arial", marginAlignment: "h: center, v: center", fontSuperSample: true })] });
-    var button2Rect = new BABYLON.Rectangle2D({ parent: canvas, id: "button2", x: 70, y: 12, width: 40, height: 15, fill: "#4040C0FF", roundRadius: 2, isVisible: false, children: [new BABYLON.Text2D("Great!", { fontName: "8pt Arial", marginAlignment: "h: center, v: center", fontSuperSample: true })] });
-    ;
-    buttonRect.pointerEventObservable.add(function (d, s) {
-        button2Rect.levelVisible = !button2Rect.levelVisible;
-    }, BABYLON.PrimitivePointerInfo.PointerUp);
-    var insideRect = new BABYLON.Rectangle2D({ parent: rect, width: 10, height: 10, marginAlignment: "h: center, v: center", fill: "#0040F0FF" });
-    insideRect.roundRadius = 2;
-
-    }
-}

inspector/ts/tsconfig.json

@@ -1,5 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es5"
-    }
-}

inspector/webpack.config.js

@@ -1,26 +0,0 @@
-var webpack = require("webpack");
-
-module.exports = {
-    entry: "./index.js",
-    output: {
-        path: __dirname + '/dist',        
-        filename: "inspector.js",
-        libraryTarget: "umd",
-        library: "INSPECTOR",
-        umdNamedDefine: true
-    },
-    module: {
-        loaders: [
-            { test: /\.css$/, loader: "style!css" }
-        ]
-        
-    },
-    // plugins: [
-    //     new webpack.optimize.UglifyJsPlugin({
-    //         compress: {
-    //             warnings: false
-    //         },
-    //         mangle:false
-    //     })
-    // ]
-};