Fix inspector for IE (colorpicker elements are not supported)

dist/inspector/babylon.inspector.css

@@ -1,22 +1,19 @@
 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
 @import url(https://fonts.googleapis.com/css?family=Inconsolata);
-
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
-@import url(https://fonts.googleapis.com/css?family=Inconsolata);
 .insp-wrapper {
   user-select: none;
   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)
+  /**
+ * 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
- * ...
+  /**
+ * 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; }

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

@@ -721,6 +721,10 @@ declare module INSPECTOR {
          */
         static IsBrowserEdge(): boolean;
         /**
+         * Returns true if the user browser is IE.
+         */
+        static IsBrowserIE(): boolean;
+        /**
          * Returns the name of the type of the given object, where the name
          * is in PROPERTIES constant.
          * Returns 'Undefined' if no type exists for this object

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

@@ -1562,8 +1562,9 @@ var INSPECTOR;
         PropertyLine.prototype._createElements = function () {
             // Colors
             if (this.type == 'Color3' || this.type == 'Color4') {
-                this._elements.push(new INSPECTOR.ColorPickerElement(this.value, this));
-                //this._elements.push(new ColorElement(this.value));
+                if (!INSPECTOR.Helpers.IsBrowserIE()) {
+                    this._elements.push(new INSPECTOR.ColorPickerElement(this.value, this));
+                }
             }
             // Texture
             if (this.type == 'Texture') {
@@ -2259,6 +2260,14 @@ var INSPECTOR;
             return regexp.test(navigator.userAgent);
         };
         /**
+         * Returns true if the user browser is IE.
+         */
+        Helpers.IsBrowserIE = function () {
+            //Detect if we are running on a faulty buggy OS.
+            var regexp = /Trident.*rv\:11\./;
+            return regexp.test(navigator.userAgent);
+        };
+        /**
          * Returns the name of the type of the given object, where the name
          * is in PROPERTIES constant.
          * Returns 'Undefined' if no type exists for this object

inspector/src/details/PropertyLine.ts

@@ -252,8 +252,9 @@ module INSPECTOR {
         private _createElements() {
             // Colors
             if (this.type == 'Color3' || this.type == 'Color4') {
-                this._elements.push(new ColorPickerElement(this.value, this));
-                //this._elements.push(new ColorElement(this.value));
+                if (!Helpers.IsBrowserIE()) {
+                    this._elements.push(new ColorPickerElement(this.value, this));
+                }
             }
             // Texture
             if (this.type == 'Texture') {

inspector/src/helpers/Helpers.ts

@@ -51,6 +51,14 @@ module INSPECTOR {
             var regexp = /Edge/
             return regexp.test(navigator.userAgent);
         }
+        /**
+         * Returns true if the user browser is IE.
+         */
+        public static IsBrowserIE(): boolean {
+            //Detect if we are running on a faulty buggy OS.
+            var regexp = /Trident.*rv\:11\./
+            return regexp.test(navigator.userAgent);
+        }
 
         /** 
          * Returns the name of the type of the given object, where the name 

inspector/test/index.js

@@ -5,7 +5,7 @@ var Test = (function () {
         var _this = this;
         var canvas = document.getElementById(canvasId);
         this.engine = new BABYLON.Engine(canvas, true);
-        BABYLONDEVTOOLS.Loader.debugShortcut(this.engine);
+        // BABYLONDEVTOOLS.Loader.debugShortcut(this.engine);
         this.scene = null;
         window.addEventListener("resize", function () {
             _this.engine.resize();
@@ -15,17 +15,17 @@ var Test = (function () {
     Test.prototype._run = function () {
         var _this = this;
         this._initScene();
-        this.scene.debugLayer.show({
-            popup: false,
-            parentElement: document.getElementById('inspector'),
-            newColors: {
-                backgroundColor: '#eee',
-                backgroundColorLighter: '#fff',
-                backgroundColorLighter2: '#fff',
-                backgroundColorLighter3: '#fff',
-                color: '#333'
-            }
-        });
+        // 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.engine.runRenderLoop(function () {
                 _this.scene.render();
@@ -51,7 +51,7 @@ var Test = (function () {
         let p = sceneRoot;
         for (let i = 0; i < num; i++) {
             // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
-            let sphere = BABYLON.Mesh.CreateSphere(`sphere${i}`, 16, 2, scene);
+            let sphere = BABYLON.Mesh.CreateSphere('sphere' + i, 16, 2, scene);
 
             // Move the sphere upward 1/2 its height        
             sphere.position.y = 0.2;
@@ -62,13 +62,14 @@ var Test = (function () {
         }
 
         let t = 0;
-        scene.registerBeforeRender(() => {
-            ground.rotation.y += 0.01;
-            ground.position.y = Math.cos(t += 0.01);
-        });
+        // scene.registerBeforeRender(() => {
+        //     ground.rotation.y += 0.01;
+        //     ground.position.y = Math.cos(t += 0.01);
+        // });
 
         scene.createDefaultCameraOrLight(true);
         scene.activeCamera.attachControl(canvas);
+        scene.debugLayer.show();
 
         this.scene = scene;
     };