Inspector - FPS label is now updated every frame

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

@@ -167,6 +167,9 @@
       margin-bottom: 10px; }
   .insp-wrapper .tab-panel.stats-panel {
     overflow-y: auto; }
+  .insp-wrapper .tab-panel .stats-fps {
+    font-weight: 600;
+    color: #f29766; }
   .insp-wrapper .tab-panel .stat-title1 {
     font-size: 1.1em;
     padding: 10px; }

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

@@ -32,8 +32,8 @@ declare module INSPECTOR {
         private _getRelativeParent(elem, lookForAbsoluteOrRelative?);
         /** Build the inspector panel in the given HTML element */
         private _buildInspector(parent);
-        scene: BABYLON.Scene;
-        popupMode: boolean;
+        readonly scene: BABYLON.Scene;
+        readonly popupMode: boolean;
         /**
          * Filter the list of item present in the tree.
          * All item returned should have the given filter contained in the item id.
@@ -170,11 +170,11 @@ declare module INSPECTOR {
         /** Returns the list of properties to be displayed for this adapter */
         abstract getProperties(): Array<PropertyLine>;
         /** Returns the actual object behind this adapter */
-        actualObject: any;
+        readonly actualObject: any;
         /** Returns true if the given object correspond to this  */
         correspondsTo(obj: any): boolean;
         /** Returns the adapter unique name */
-        name: string;
+        readonly name: string;
         /** Returns the list of tools available for this adapter */
         abstract getTools(): Array<AbstractTreeTool>;
         /** Should be overriden in subclasses */
@@ -308,9 +308,9 @@ declare module INSPECTOR {
         /** The obj this property refers to */
         private _obj;
         constructor(prop: string, obj: any);
-        name: string;
+        readonly name: string;
         value: any;
-        type: string;
+        readonly type: string;
         obj: any;
     }
 }
@@ -374,9 +374,9 @@ declare module INSPECTOR {
          * (example : mesh.position = new BABYLON.Vector3 ; the original vector3 object is deleted from the mesh).
         */
         updateObject(): any;
-        name: string;
-        value: any;
-        type: string;
+        readonly name: string;
+        readonly value: any;
+        readonly type: string;
         /**
          * Creates elements that wil be displayed on a property line, depending on the
          * type of the property.
@@ -751,7 +751,7 @@ declare module INSPECTOR {
         switchMeshTab(mesh?: BABYLON.AbstractMesh): void;
         /** Returns the active tab */
         getActiveTab(): Tab;
-        inspector: Inspector;
+        readonly inspector: Inspector;
         /**
          * Returns the total width in pixel of the tabbar,
          * that corresponds to the sum of the width of each visible tab + toolbar width
@@ -853,7 +853,7 @@ declare module INSPECTOR {
         private _lineContent;
         constructor(tab: PropertyTab, obj: Adapter);
         /** Returns the item ID == its adapter ID */
-        id: string;
+        readonly id: string;
         /** Add the given item as a child of this one */
         add(child: TreeItem): void;
         /**

inspector/sass/tabs/_statsTab.scss

@@ -3,6 +3,11 @@
     &.stats-panel {
         overflow-y      : auto;
     }
+    
+    .stats-fps {
+        font-weight:600;
+        color:$color-top;
+    }
 
     .stat-title1 {        
         font-size       : 1.1em;

inspector/src/details/DetailPanel.ts

@@ -38,6 +38,7 @@
             this._div.appendChild(this._headerRow);
             
             Inspector.WINDOW.addEventListener('resize', (e) => {
+                console.log(this._headerRow.parentElement.clientWidth);
                 // adapt the header row max width according to its parent size;
                 this._headerRow.style.maxWidth = this._headerRow.parentElement.clientWidth+'px';
             });

inspector/src/tabs/StatsTab.ts

@@ -30,8 +30,17 @@ module INSPECTOR {
             this._panel.classList.add("stats-panel")
             
             let title               = Helpers.CreateDiv('stat-title1', this._panel);
-            title.innerHTML         = "Babylon.js v" + BABYLON.Engine.Version + ' - <b>' +BABYLON.Tools.Format(this._inspector.scene.getEngine().getFps(), 0) + " fps</b>";
-            
+            let fpsSpan             = Helpers.CreateElement('span', 'stats-fps');
+            this._updatableProperties.push({ 
+                elem:fpsSpan, 
+                updateFct:() => { return BABYLON.Tools.Format(this._inspector.scene.getEngine().getFps(), 0) + " fps"}
+            });
+                
+            let versionSpan = Helpers.CreateElement('span');
+            versionSpan.textContent = `Babylon.js v${BABYLON.Engine.Version} - `;
+            title.appendChild(versionSpan);
+            title.appendChild(fpsSpan);
+                        
             this._updateLoopHandler = this._update.bind(this);
 
             // Count block