Merge pull request #4381 from Jaskar/master

Sandbox #4369 - Inspector #4374 + Edge compatibility

.gitignore

@@ -182,3 +182,4 @@ Viewer/dist/viewer.max.js
 Viewer/tests/unit/src/**/*.js
 Viewer/tests/Lib/**/*.js
 Viewer/tests/commons/**/*.js
+.sass-cache/

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

@@ -1,7 +1,7 @@
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+@import url(https://use.fontawesome.com/releases/v5.0.13/css/all.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://use.fontawesome.com/releases/v5.0.13/css/all.css);
 @import url(https://fonts.googleapis.com/css?family=Inconsolata);
 .insp-wrapper {
   user-select: none;
@@ -44,11 +44,11 @@
       font-size: 1em; }
       .insp-wrapper .insp-right-panel .top-panel .tab-panel-content {
         width: 100%;
-        height: calc(100% - 40px); }
+        height: calc(100% - 50px); }
       .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel {
         position: absolute;
         z-index: 10;
-        top: 40px;
+        top: 50px;
         right: 0;
         width: 100px;
         display: none;
@@ -70,7 +70,7 @@
             background-color: #454545; }
   .insp-wrapper .tooltip {
     position: absolute;
-    top: 40px;
+    top: 50px;
     right: 0;
     color: #f29766;
     display: none;
@@ -115,15 +115,15 @@
         height: 1em;
         line-height: 1em;
         display: inline-block;
-        font-family: 'FontAwesome', sans-serif;
-        content: "\f10c";
+        font-family: "Font Awesome 5 Free", sans-serif;
+        content: "\f111";
         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;
+        font-family: "Font Awesome 5 Free", sans-serif;
         content: "\f192";
         color: #5db0d7;
         margin-right: 10px; }
@@ -132,15 +132,15 @@
         height: 1em;
         line-height: 1em;
         display: inline-block;
-        font-family: 'FontAwesome', sans-serif;
-        content: "\f096";
+        font-family: "Font Awesome 5 Free", sans-serif;
+        content: "\f0c8";
         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;
+        font-family: "Font Awesome 5 Free", sans-serif;
         content: "\f14a";
         color: #5db0d7;
         margin-right: 10px; }
@@ -263,15 +263,15 @@
       height: 1em;
       line-height: 1em;
       display: inline-block;
-      font-family: 'FontAwesome', sans-serif;
-      content: "\f096";
+      font-family: "Font Awesome 5 Free", sans-serif;
+      content: "\f0c8";
       margin-right: 10px; }
     .insp-wrapper .tab-panel .gltf-actions .gltf-checkbox.active:before {
       width: 1em;
       height: 1em;
       line-height: 1em;
       display: inline-block;
-      font-family: 'FontAwesome', sans-serif;
+      font-family: "Font Awesome 5 Free", sans-serif;
       content: "\f14a";
       color: #5db0d7;
       margin-right: 10px; }
@@ -304,7 +304,7 @@
   .insp-wrapper .insp-tree {
     overflow-y: auto;
     overflow-x: hidden;
-    height: calc(50% - 40px - 30px); }
+    height: calc(50% - 50px - 30px); }
     .insp-wrapper .insp-tree .line {
       padding: 3px;
       cursor: pointer; }
@@ -319,15 +319,17 @@
         height: 1em;
         line-height: 1em;
         display: inline-block;
-        font-family: 'FontAwesome', sans-serif;
-        content: "\f078"; }
+        font-family: "Font Awesome 5 Free", sans-serif;
+        content: "\f107";
+        font-weight: 900; }
       .insp-wrapper .insp-tree .line.folded:before {
         width: 1em;
         height: 1em;
         line-height: 1em;
         display: inline-block;
-        font-family: 'FontAwesome', sans-serif;
-        content: "\f054"; }
+        font-family: "Font Awesome 5 Free", sans-serif;
+        content: "\f105";
+        font-weight: 900; }
       .insp-wrapper .insp-tree .line.unfolded.transformNode > span:first-of-type {
         color: #f29766; }
       .insp-wrapper .insp-tree .line.folded.transformNode > span:first-of-type {
@@ -366,13 +368,15 @@
           .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"; }
+            font-family: "Font Awesome 5 Free", sans-serif;
+            content: "\00a0 \00a0 \00a0 \f105";
+            font-weight: 900; }
     .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"; }
+      font-family: "Font Awesome 5 Free", sans-serif;
+      content: "\00a0 \00a0 \00a0 \f107";
+      font-weight: 900; }
     .insp-wrapper .insp-details .header-row {
       background-color: #2c2c2c;
       color: #ccc;
@@ -423,7 +427,7 @@
           max-width: 110px;
           max-height: 110px; }
   .insp-wrapper .tabbar {
-    height: 40px;
+    height: 50px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #383838;
@@ -432,11 +436,11 @@
     overflow-y: hidden;
     box-sizing: border-box; }
     .insp-wrapper .tabbar .tab {
-      height: calc(40px - 2px);
+      height: calc(50px - 2px);
       width: auto;
       padding: 0 10px 0 10px;
       color: #ccc;
-      line-height: 40px;
+      line-height: 50px;
       text-align: center;
       cursor: pointer;
       margin: 0 5px 0 5px;
@@ -449,8 +453,8 @@
       .insp-wrapper .tabbar .tab.active {
         border-bottom: 1px solid #f29766; }
     .insp-wrapper .tabbar .more-tabs {
-      width: 40px;
-      height: 40px;
+      width: 50px;
+      height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -467,8 +471,8 @@
   .insp-wrapper .toolbar {
     display: flex; }
     .insp-wrapper .toolbar .tool {
-      width: 40px;
-      height: 40px;
+      width: 50px;
+      height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;

inspector/sass/_detailPanel.scss

@@ -38,8 +38,9 @@
                 background-color:$background-lighter2;
             }
             &:after {
-                font-family: 'FontAwesome', sans-serif;
-                content: "\00a0 \00a0 \00a0 \f054"; // 4 space before + chevron right
+                font-family: $font-family-icons;
+                content: "\00a0 \00a0 \00a0 \f105"; // 4 space before + angle-right
+                font-weight: 900; // To display solid font family
             }
         }   
     }
@@ -64,8 +65,9 @@
     }
     &.unfolded {          
         .prop-value.clickable:after {
-            font-family: 'FontAwesome', sans-serif;
-            content: "\00a0 \00a0 \00a0 \f078"; // 4 space before + chevron down
+            font-family: $font-family-icons;
+            content: "\00a0 \00a0 \00a0 \f107"; // 4 space before + angle-down
+            font-weight: 900; // To display solid font family
         }
     }
   }

inspector/sass/_tabPanel.scss

@@ -43,8 +43,8 @@
                 height     : 1em;
                 line-height: 1em;
                 display    : inline-block;
-                font-family: 'FontAwesome', sans-serif;
-                content    : "\f10c";
+                font-family: $font-family-icons;
+                content    : "\f111";
                 margin-right:10px;
             }
             // radio button active
@@ -54,7 +54,7 @@
                     height     : 1em;
                     line-height: 1em;
                     display    : inline-block;
-                    font-family: 'FontAwesome', sans-serif;
+                    font-family: $font-family-icons;
                     content    : "\f192";
                     color      : $color-bot;
                     margin-right:10px;
@@ -70,8 +70,8 @@
                 height     : 1em;
                 line-height: 1em;
                 display    : inline-block;
-                font-family: 'FontAwesome', sans-serif;
-                content    : "\f096";
+                font-family: $font-family-icons;
+                content    : "\f0c8";
                 margin-right:10px;
             }
                 
@@ -81,7 +81,7 @@
                     height     : 1em;
                     line-height: 1em;
                     display    : inline-block;
-                    font-family: 'FontAwesome', sans-serif;
+                    font-family: $font-family-icons;
                     content    : "\f14a";
                     color      : $color-bot;
                     margin-right:10px;

inspector/sass/_tree.scss

@@ -34,16 +34,18 @@
             height     : 1em;
             line-height: 1em;
             display    : inline-block;
-            font-family: 'FontAwesome', sans-serif;
-            content    : "\f078";            
+            font-family: $font-family-icons;
+            content    : "\f107";
+            font-weight: 900;          
         }
         &.folded:before{            
             width      : 1em;
             height     : 1em;
             line-height: 1em;
             display    : inline-block;
-            font-family: 'FontAwesome', sans-serif;
-            content    : "\f054";
+            font-family: $font-family-icons;
+            content    : "\f105";
+            font-weight: 900;
         }
         
         &.unfolded.transformNode > span:first-of-type{

inspector/sass/defines.scss

@@ -1,4 +1,5 @@
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+// @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+@import url(https://use.fontawesome.com/releases/v5.0.13/css/all.css);
 @import url(https://fonts.googleapis.com/css?family=Inconsolata);
 
 $font               : 'Inconsolata', sans-serif;
@@ -20,5 +21,7 @@ $background-lighter2: lighten($color: $background-lighter, $amount : 5%);
 $background-lighter3: lighten($color: $background-lighter2, $amount: 5%);
 
 $resizebar-width    : 10px;
-$tabbar-height      : 40px;
+$tabbar-height      : 50px;
 $searchbar-height   : 30px;
+
+$font-family-icons  : 'Font Awesome 5 Free', sans-serif;

inspector/sass/tabs/_gltfTab.scss

@@ -29,8 +29,8 @@
                 height     : 1em;
                 line-height: 1em;
                 display    : inline-block;
-                font-family: 'FontAwesome', sans-serif;
-                content    : "\f096";
+                font-family: $font-family-icons;
+                content    : "\f0c8";
                 margin-right:10px;
             }
 
@@ -40,7 +40,7 @@
                     height     : 1em;
                     line-height: 1em;
                     display    : inline-block;
-                    font-family: 'FontAwesome', sans-serif;
+                    font-family: $font-family-icons;
                     content    : "\f14a";
                     color      : $color-bot;
                     margin-right:10px;

inspector/src/Inspector.ts

@@ -200,10 +200,14 @@ module INSPECTOR {
                 this._tabbar.updateWidth();
             }
 
-            // Refresh the inspector if the browser is not edge
-            if (!Helpers.IsBrowserEdge()) {
+            /*
+            * Refresh the inspector if the browser is not edge
+            *   Why not ?! Condition commented on 180525
+            *   To be tested
+            */
+            // if (!Helpers.IsBrowserEdge()) {
                 this.refresh();
-            }
+            // }
 
             // Check custom css colors
             if (newColors) {
@@ -365,52 +369,56 @@ module INSPECTOR {
          */
         public openPopup(firstTime?: boolean) {
 
-            if (Helpers.IsBrowserEdge()) {
-                console.warn('Inspector - Popup mode is disabled in Edge, as the popup DOM cannot be updated from the main window for security reasons');
-            } else {
-                // Create popup
-                let popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
-                if (!popup) {
-                    return;
-                }
-                popup.document.title = 'Babylon.js INSPECTOR';
-                // Get the inspector style      
-                let styles = Inspector.DOCUMENT.querySelectorAll('style');
-                for (let s = 0; s < styles.length; s++) {
-                    popup.document.body.appendChild(styles[s].cloneNode(true));
-                }
-                let links = document.querySelectorAll('link');
-                for (let l = 0; l < links.length; l++) {
-                    let link = popup.document.createElement("link");
-                    link.rel = "stylesheet";
-                    link.href = (links[l] as HTMLLinkElement).href;
-                    popup.document.head.appendChild(link);
-                }
-                // Dispose the right panel if existing
-                if (!firstTime) {
-                    this.dispose();
-                }
-                // set the mode as popup
-                this._popupMode = true;
-                // Save the HTML document
-                Inspector.DOCUMENT = popup.document;
-                Inspector.WINDOW = popup;
-                // Build the inspector wrapper
-                this._c2diwrapper = Helpers.CreateDiv('insp-wrapper', popup.document.body);
-                // add inspector     
-                let inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
-                inspector.classList.add('popupmode');
-                // and build it in the popup  
-                this._buildInspector(inspector);
-                // Rebuild it
-                this.refresh();
-
-                popup.addEventListener('resize', () => {
-                    if (this._tabbar) {
-                        this._tabbar.updateWidth()
-                    }
-                });
+            // Create popup
+            let popup;
+            if(Helpers.IsBrowserEdge()) {
+                popup = window.open('about:blank', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');   
+                alert("This function work only on Edge build 16299 and more. Please update your browser if the popup is blank.");
+            }
+            else {
+                popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
+            }
+            if (!popup) {
+                return;
+            }
+            popup.document.title = "Babylon.js INSPECTOR";
+            popup.document.body.innerHTML = "Coucou!";
+            // Get the inspector style      
+            let styles = Inspector.DOCUMENT.querySelectorAll('style');
+            for (let s = 0; s < styles.length; s++) {
+                popup.document.body.appendChild(styles[s].cloneNode(true));
+            }
+            let links = document.querySelectorAll('link');
+            for (let l = 0; l < links.length; l++) {
+                let link = popup.document.createElement("link");
+                link.rel = "stylesheet";
+                link.href = (links[l] as HTMLLinkElement).href;
+                popup.document.head.appendChild(link);
             }
+            // Dispose the right panel if existing
+            if (!firstTime) {
+                this.dispose();
+            }
+            // set the mode as popup
+            this._popupMode = true;
+            // Save the HTML document
+            Inspector.DOCUMENT = popup.document;
+            Inspector.WINDOW = popup;
+            // Build the inspector wrapper
+            this._c2diwrapper = Helpers.CreateDiv('insp-wrapper', popup.document.body);
+            // add inspector     
+            let inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
+            inspector.classList.add('popupmode');
+            // and build it in the popup  
+            this._buildInspector(inspector);
+            // Rebuild it
+            this.refresh();
+
+            popup.addEventListener('resize', () => {
+                if (this._tabbar) {
+                    this._tabbar.updateWidth()
+                }
+            });
         }
 
         public getActiveTabIndex(): number {

inspector/src/tools/PopupTool.ts

@@ -3,7 +3,7 @@ module INSPECTOR {
     export class PopupTool extends AbstractTool {
 
         constructor(parent:HTMLElement, inspector:Inspector) {
-            super('fa-external-link', parent, inspector, 'Open the inspector in a popup');
+            super('fa-external-link-alt', parent, inspector, 'Open the inspector in a popup');
         }
 
         // Action : refresh the whole panel

inspector/src/tools/RefreshTool.ts

@@ -3,7 +3,7 @@ module INSPECTOR {
     export class RefreshTool extends AbstractTool {
 
         constructor(parent:HTMLElement, inspector:Inspector) {
-            super('fa-refresh', parent, inspector, 'Refresh the current tab');
+            super('fa-sync', parent, inspector, 'Refresh the current tab');
         }
 
         // Action : refresh the whole panel

inspector/test/index.js

@@ -77,10 +77,10 @@ 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);

sandbox/index-local.html

@@ -33,9 +33,9 @@
             </div>
         </div>
         <div class="footerRight">
-            <a href="#" id="btnFullscreen" class="hidden"><img src="./Assets/Icon_Fullscreen.svg" alt="Switch the scene to full screen" title="Switch the scene to full screen" /></a> 
-            <a href="#" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg" alt="Display inspector" title="Display inspector" /></a> 
-            <a href="#">
+            <a href="javascript:void(null);" id="btnFullscreen" class="hidden"><img src="./Assets/Icon_Fullscreen.svg" alt="Switch the scene to full screen" title="Switch the scene to full screen" /></a> 
+            <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg" alt="Display inspector" title="Display inspector" /></a> 
+            <a href="javascript:void(null);">
                 <div class="custom-upload" title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
                     <input type="file" id="files" multiple />
                 </div>

sandbox/index.html

@@ -62,9 +62,9 @@
             </div>
         </div>               
         <div class="footerRight">
-            <a href="#" id="btnFullscreen" class="hidden"><img src="./Assets/Icon_Fullscreen.svg" alt="Switch the scene to full screen" title="Switch the scene to full screen" /></a> 
-            <a href="#" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg" alt="Display inspector" title="Display inspector" /></a> 
-            <a href="#">
+            <a href="javascript:void(null);" id="btnFullscreen" class="hidden"><img src="./Assets/Icon_Fullscreen.svg" alt="Switch the scene to full screen" title="Switch the scene to full screen" /></a> 
+            <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg" alt="Display inspector" title="Display inspector" /></a> 
+            <a href="javascript:void(null);">
                 <div class="custom-upload" title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
                     <input type="file" id="files" multiple />
                 </div>