#4772 : [Inspector - Feat.Requ.] Show code tooltips - For scene panel

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

@@ -590,12 +590,12 @@ declare module INSPECTOR {
             /**
                 * Useful function used to create a div
                 */
-            static CreateDiv(className?: BABYLON.Nullable<string>, parent?: HTMLElement): HTMLDivElement;
+            static CreateDiv(className?: BABYLON.Nullable<string>, parent?: HTMLElement, tooltip?: string): HTMLDivElement;
             /**
                 * Useful function used to create a input
                 */
-            static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement;
-            static CreateElement(element: string, className?: BABYLON.Nullable<string>, parent?: HTMLElement): HTMLElement;
+            static CreateInput(className?: string, parent?: HTMLElement, tooltip?: string): HTMLInputElement;
+            static CreateElement(element: string, className?: BABYLON.Nullable<string>, parent?: HTMLElement, tooltip?: string): HTMLElement;
             /**
                 * Removes all children of the given div.
                 */

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

@@ -756,12 +756,12 @@ declare module 'babylonjs-inspector/helpers/Helpers' {
             /**
                 * Useful function used to create a div
                 */
-            static CreateDiv(className?: Nullable<string>, parent?: HTMLElement): HTMLDivElement;
+            static CreateDiv(className?: Nullable<string>, parent?: HTMLElement, tooltip?: string): HTMLDivElement;
             /**
                 * Useful function used to create a input
                 */
-            static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement;
-            static CreateElement(element: string, className?: Nullable<string>, parent?: HTMLElement): HTMLElement;
+            static CreateInput(className?: string, parent?: HTMLElement, tooltip?: string): HTMLInputElement;
+            static CreateElement(element: string, className?: Nullable<string>, parent?: HTMLElement, tooltip?: string): HTMLElement;
             /**
                 * Removes all children of the given div.
                 */
@@ -1921,12 +1921,12 @@ declare module INSPECTOR {
             /**
                 * Useful function used to create a div
                 */
-            static CreateDiv(className?: BABYLON.Nullable<string>, parent?: HTMLElement): HTMLDivElement;
+            static CreateDiv(className?: BABYLON.Nullable<string>, parent?: HTMLElement, tooltip?: string): HTMLDivElement;
             /**
                 * Useful function used to create a input
                 */
-            static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement;
-            static CreateElement(element: string, className?: BABYLON.Nullable<string>, parent?: HTMLElement): HTMLElement;
+            static CreateInput(className?: string, parent?: HTMLElement, tooltip?: string): HTMLInputElement;
+            static CreateElement(element: string, className?: BABYLON.Nullable<string>, parent?: HTMLElement, tooltip?: string): HTMLElement;
             /**
                 * Removes all children of the given div.
                 */

inspector/src/helpers/Helpers.ts

@@ -114,23 +114,26 @@ export class Helpers {
     /**
      * Useful function used to create a div
      */
-    public static CreateDiv(className: Nullable<string> = null, parent?: HTMLElement): HTMLDivElement {
-        return <HTMLDivElement>Helpers.CreateElement('div', className, parent);
+    public static CreateDiv(className: Nullable<string> = null, parent?: HTMLElement, tooltip?: string): HTMLDivElement {
+        return <HTMLDivElement>Helpers.CreateElement('div', className, parent, tooltip);
     }
 
     /**
      * Useful function used to create a input
      */
-    public static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement {
-        return <HTMLInputElement>Helpers.CreateElement('input', className, parent);
+    public static CreateInput(className?: string, parent?: HTMLElement, tooltip?: string): HTMLInputElement {
+        return <HTMLInputElement>Helpers.CreateElement('input', className, parent, tooltip);
     }
 
-    public static CreateElement(element: string, className: Nullable<string> = null, parent?: HTMLElement): HTMLElement {
+    public static CreateElement(element: string, className: Nullable<string> = null, parent?: HTMLElement, tooltip?: string): HTMLElement {
         let elem = Inspector.DOCUMENT.createElement(element);
 
         if (className) {
             elem.className = className;
         }
+        if(tooltip && tooltip != '') {
+            elem.title = tooltip;
+        }
         if (parent) {
             parent.appendChild(elem);
         }
@@ -153,7 +156,7 @@ export class Helpers {
      */
     public static Css(elem: HTMLElement, cssAttribute: string): string {
         let clone = elem.cloneNode(true) as HTMLElement;
-        let div = Helpers.CreateDiv('', Inspector.DOCUMENT.body);
+        let div = Helpers.CreateDiv('', Inspector.DOCUMENT.body, '');
         div.style.display = 'none';
         div.appendChild(clone);
         let value = (<any>Inspector.WINDOW.getComputedStyle(clone))[cssAttribute];
@@ -165,17 +168,17 @@ export class Helpers {
 
     public static LoadScript() {
         Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js", (elem) => {
-            let script = Helpers.CreateElement('script', '', Inspector.DOCUMENT.body);
+            let script = Helpers.CreateElement('script', '', Inspector.DOCUMENT.body, '');
             script.textContent = elem as string;
 
             // Load glsl detection
             Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/languages/glsl.min.js", (elem) => {
-                let script = Helpers.CreateElement('script', '', Inspector.DOCUMENT.body);
+                let script = Helpers.CreateElement('script', '', Inspector.DOCUMENT.body, '');
                 script.textContent = elem as string;
 
                 // Load css style
                 Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/zenburn.min.css", (elem) => {
-                    let style = Helpers.CreateElement('style', '', Inspector.DOCUMENT.body);
+                    let style = Helpers.CreateElement('style', '', Inspector.DOCUMENT.body, '');
                     style.textContent = elem as string;
                 });
             }, undefined, undefined, undefined, () => {

inspector/src/tabs/SceneTab.ts

@@ -28,7 +28,7 @@ export class SceneTab extends Tab {
         // Build the properties panel : a div that will contains the tree and the detail panel
         this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
 
-        this._actions = Helpers.CreateDiv('scene-actions', this._panel) as HTMLDivElement;
+        this._actions = Helpers.CreateDiv('scene-actions', this._panel, '') as HTMLDivElement;
 
         this._detailsPanel = new DetailPanel();
         this._panel.appendChild(this._detailsPanel.toHtml());
@@ -54,15 +54,17 @@ export class SceneTab extends Tab {
         // Build actions
         {
 
-            // Rendering mode
-            let title = Helpers.CreateDiv('actions-title', this._actions);
+            // --------------------- Rendering mode ---------------------
+
+            let title = Helpers.CreateDiv('actions-title', this._actions, 'Choose the way of rendering the scene.');
             title.textContent = 'Rendering mode';
-            let point = Helpers.CreateDiv('action-radio', this._actions);
-            let wireframe = Helpers.CreateDiv('action-radio', this._actions);
-            let solid = Helpers.CreateDiv('action-radio', this._actions);
+            let point = Helpers.CreateDiv('action-radio', this._actions, 'Force scene rendering to points cloud : scene.forcePointsCloud');
             point.textContent = 'Point';
+            let wireframe = Helpers.CreateDiv('action-radio', this._actions, 'Force scene rendering to wireframe : scene.forceWireframe');
             wireframe.textContent = 'Wireframe';
+            let solid = Helpers.CreateDiv('action-radio', this._actions, 'Force scene rendering to solid.');
             solid.textContent = 'Solid';
+
             if (this._inspector.scene.forcePointsCloud) {
                 point.classList.add('active');
             } else if (this._inspector.scene.forceWireframe) {
@@ -75,47 +77,51 @@ export class SceneTab extends Tab {
             wireframe.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = true; });
             solid.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = false; });
 
-            // Textures
-            title = Helpers.CreateDiv('actions-title', this._actions);
+            // --------------------- Textures ---------------------
+
+            title = Helpers.CreateDiv('actions-title', this._actions, 'Choose which textures channels to display or not on materials. (Check to display)');
             title.textContent = 'Textures channels';
-            this._generateActionLine('Diffuse Texture', StandardMaterial.DiffuseTextureEnabled, (b: boolean) => { StandardMaterial.DiffuseTextureEnabled = b });
-            this._generateActionLine('Ambient Texture', StandardMaterial.AmbientTextureEnabled, (b: boolean) => { StandardMaterial.AmbientTextureEnabled = b });
-            this._generateActionLine('Specular Texture', StandardMaterial.SpecularTextureEnabled, (b: boolean) => { StandardMaterial.SpecularTextureEnabled = b });
-            this._generateActionLine('Emissive Texture', StandardMaterial.EmissiveTextureEnabled, (b: boolean) => { StandardMaterial.EmissiveTextureEnabled = b });
-            this._generateActionLine('Bump Texture', StandardMaterial.BumpTextureEnabled, (b: boolean) => { StandardMaterial.BumpTextureEnabled = b });
-            this._generateActionLine('Opacity Texture', StandardMaterial.OpacityTextureEnabled, (b: boolean) => { StandardMaterial.OpacityTextureEnabled = b });
-            this._generateActionLine('Reflection Texture', StandardMaterial.ReflectionTextureEnabled, (b: boolean) => { StandardMaterial.ReflectionTextureEnabled = b });
-            this._generateActionLine('Refraction Texture', StandardMaterial.RefractionTextureEnabled, (b: boolean) => { StandardMaterial.RefractionTextureEnabled = b });
-            this._generateActionLine('ColorGrading', StandardMaterial.ColorGradingTextureEnabled, (b: boolean) => { StandardMaterial.ColorGradingTextureEnabled = b });
-            this._generateActionLine('Lightmap Texture', StandardMaterial.LightmapTextureEnabled, (b: boolean) => { StandardMaterial.LightmapTextureEnabled = b });
-            this._generateActionLine('Fresnel', StandardMaterial.FresnelEnabled, (b: boolean) => { StandardMaterial.FresnelEnabled = b });
-
-            // Options
-            title = Helpers.CreateDiv('actions-title', this._actions);
+            this._generateActionLine('Diffuse Texture', StandardMaterial.DiffuseTextureEnabled, (b: boolean) => { StandardMaterial.DiffuseTextureEnabled = b }, 'StandardMaterial.DiffuseTextureEnabled');
+            this._generateActionLine('Ambient Texture', StandardMaterial.AmbientTextureEnabled, (b: boolean) => { StandardMaterial.AmbientTextureEnabled = b }, 'StandardMaterial.AmbientTextureEnabled');
+            this._generateActionLine('Specular Texture', StandardMaterial.SpecularTextureEnabled, (b: boolean) => { StandardMaterial.SpecularTextureEnabled = b }, 'StandardMaterial.SpecularTextureEnabled');
+            this._generateActionLine('Emissive Texture', StandardMaterial.EmissiveTextureEnabled, (b: boolean) => { StandardMaterial.EmissiveTextureEnabled = b }, 'StandardMaterial.EmissiveTextureEnabled');
+            this._generateActionLine('Bump Texture', StandardMaterial.BumpTextureEnabled, (b: boolean) => { StandardMaterial.BumpTextureEnabled = b }, 'StandardMaterial.BumpTextureEnabled');
+            this._generateActionLine('Opacity Texture', StandardMaterial.OpacityTextureEnabled, (b: boolean) => { StandardMaterial.OpacityTextureEnabled = b }, 'StandardMaterial.OpacityTextureEnabled');
+            this._generateActionLine('Reflection Texture', StandardMaterial.ReflectionTextureEnabled, (b: boolean) => { StandardMaterial.ReflectionTextureEnabled = b }, 'StandardMaterial.ReflectionTextureEnabled');
+            this._generateActionLine('Refraction Texture', StandardMaterial.RefractionTextureEnabled, (b: boolean) => { StandardMaterial.RefractionTextureEnabled = b }, 'StandardMaterial.RefractionTextureEnabled');
+            this._generateActionLine('ColorGrading', StandardMaterial.ColorGradingTextureEnabled, (b: boolean) => { StandardMaterial.ColorGradingTextureEnabled = b }, 'StandardMaterial.ColorGradingTextureEnabled');
+            this._generateActionLine('Lightmap Texture', StandardMaterial.LightmapTextureEnabled, (b: boolean) => { StandardMaterial.LightmapTextureEnabled = b }, 'StandardMaterial.LightmapTextureEnabled');
+            this._generateActionLine('Fresnel', StandardMaterial.FresnelEnabled, (b: boolean) => { StandardMaterial.FresnelEnabled = b }, 'StandardMaterial.FresnelEnabled');
+
+            // --------------------- Options ---------------------
+
+            title = Helpers.CreateDiv('actions-title', this._actions, 'Choose which options to enable / disable on the scene. (Uncheck to disable).');
             title.textContent = 'Options';
-            this._generateActionLine('Animations', this._inspector.scene.animationsEnabled, (b: boolean) => { this._inspector.scene.animationsEnabled = b });
-            this._generateActionLine('Collisions', this._inspector.scene.collisionsEnabled, (b: boolean) => { this._inspector.scene.collisionsEnabled = b });
-            this._generateActionLine('Fog', this._inspector.scene.fogEnabled, (b: boolean) => { this._inspector.scene.fogEnabled = b });
-            this._generateActionLine('Lens flares', this._inspector.scene.lensFlaresEnabled, (b: boolean) => { this._inspector.scene.lensFlaresEnabled = b });
-            this._generateActionLine('Lights', this._inspector.scene.lightsEnabled, (b: boolean) => { this._inspector.scene.lightsEnabled = b });
-            this._generateActionLine('Particles', this._inspector.scene.particlesEnabled, (b: boolean) => { this._inspector.scene.particlesEnabled = b });
-            this._generateActionLine('Post-processes', this._inspector.scene.postProcessesEnabled, (b: boolean) => { this._inspector.scene.postProcessesEnabled = b });
-            this._generateActionLine('Probes', this._inspector.scene.probesEnabled, (b: boolean) => { this._inspector.scene.probesEnabled = b });
-            this._generateActionLine('Procedural textures', this._inspector.scene.proceduralTexturesEnabled, (b: boolean) => { this._inspector.scene.proceduralTexturesEnabled = b });
-            this._generateActionLine('Render targets', this._inspector.scene.renderTargetsEnabled, (b: boolean) => { this._inspector.scene.renderTargetsEnabled = b });
-            this._generateActionLine('Shadows', this._inspector.scene.shadowsEnabled, (b: boolean) => { this._inspector.scene.shadowsEnabled = b });
-            this._generateActionLine('Skeletons', this._inspector.scene.skeletonsEnabled, (b: boolean) => { this._inspector.scene.skeletonsEnabled = b });
-            this._generateActionLine('Sprites', this._inspector.scene.spritesEnabled, (b: boolean) => { this._inspector.scene.spritesEnabled = b });
-            this._generateActionLine('Textures', this._inspector.scene.texturesEnabled, (b: boolean) => { this._inspector.scene.texturesEnabled = b });
-
-            // Audio
-            title = Helpers.CreateDiv('actions-title', this._actions);
+            this._generateActionLine('Animations', this._inspector.scene.animationsEnabled, (b: boolean) => { this._inspector.scene.animationsEnabled = b }, 'scene.animationsEnabled');
+            this._generateActionLine('Collisions', this._inspector.scene.collisionsEnabled, (b: boolean) => { this._inspector.scene.collisionsEnabled = b }, 'scene.collisionsEnabled');
+            this._generateActionLine('Fog', this._inspector.scene.fogEnabled, (b: boolean) => { this._inspector.scene.fogEnabled = b }, 'scene.fogEnabled(boolean)');
+            this._generateActionLine('Lens flares', this._inspector.scene.lensFlaresEnabled, (b: boolean) => { this._inspector.scene.lensFlaresEnabled = b }, 'scene.lensFlaresEnabled');
+            this._generateActionLine('Lights', this._inspector.scene.lightsEnabled, (b: boolean) => { this._inspector.scene.lightsEnabled = b }, 'scene.lightsEnabled');
+            this._generateActionLine('Particles', this._inspector.scene.particlesEnabled, (b: boolean) => { this._inspector.scene.particlesEnabled = b }, 'scene.particlesEnabled');
+            this._generateActionLine('Post-processes', this._inspector.scene.postProcessesEnabled, (b: boolean) => { this._inspector.scene.postProcessesEnabled = b }, 'scene.postProcessesEnabled');
+            this._generateActionLine('Probes', this._inspector.scene.probesEnabled, (b: boolean) => { this._inspector.scene.probesEnabled = b }, 'scene.probesEnabled');
+            this._generateActionLine('Procedural textures', this._inspector.scene.proceduralTexturesEnabled, (b: boolean) => { this._inspector.scene.proceduralTexturesEnabled = b }, 'scene.proceduralTexturesEnabled');
+            this._generateActionLine('Render targets', this._inspector.scene.renderTargetsEnabled, (b: boolean) => { this._inspector.scene.renderTargetsEnabled = b }, 'scene.renderTargetsEnabled');
+            this._generateActionLine('Shadows', this._inspector.scene.shadowsEnabled, (b: boolean) => { this._inspector.scene.shadowsEnabled = b }, 'scene.shadowsEnabled');
+            this._generateActionLine('Skeletons', this._inspector.scene.skeletonsEnabled, (b: boolean) => { this._inspector.scene.skeletonsEnabled = b }, 'scene.skeletonsEnabled');
+            this._generateActionLine('Sprites', this._inspector.scene.spritesEnabled, (b: boolean) => { this._inspector.scene.spritesEnabled = b }, 'scene.spritesEnabled');
+            this._generateActionLine('Textures', this._inspector.scene.texturesEnabled, (b: boolean) => { this._inspector.scene.texturesEnabled = b }, 'scene.texturesEnabled');
+
+            // --------------------- Audio ---------------------
+
+            title = Helpers.CreateDiv('actions-title', this._actions, 'Choose which audio rendering should be used.');
             title.textContent = 'Audio';
-            let headphones = Helpers.CreateDiv('action-radio', this._actions);
-            let normalSpeaker = Helpers.CreateDiv('action-radio', this._actions);
-            this._generateActionLine('Disable audio', !this._inspector.scene.audioEnabled, (b: boolean) => { this._inspector.scene.audioEnabled = !b });
+            let headphones = Helpers.CreateDiv('action-radio', this._actions, 'Use Headphones mode.');
             headphones.textContent = 'Headphones';
+            let normalSpeaker = Helpers.CreateDiv('action-radio', this._actions, 'Use Normal speakers mode.');
             normalSpeaker.textContent = 'Normal speakers';
+            this._generateActionLine('Disable audio', !this._inspector.scene.audioEnabled, (b: boolean) => { this._inspector.scene.audioEnabled = !b }, 'Disable audio on the scene.');
+            
             this._generateRadioAction([headphones, normalSpeaker]);
             if (this._inspector.scene.headphone) {
                 headphones.classList.add('active');
@@ -125,8 +131,9 @@ export class SceneTab extends Tab {
             headphones.addEventListener('click', () => { this._inspector.scene.headphone = true; });
             normalSpeaker.addEventListener('click', () => { this._inspector.scene.headphone = false; });
 
-            // Viewers
-            title = Helpers.CreateDiv('actions-title', this._actions);
+            // --------------------- Viewer ---------------------
+
+            title = Helpers.CreateDiv('actions-title', this._actions, 'Viewer');
             title.textContent = 'Viewer';
             this._generateActionLine('Skeletons', false, (b: boolean) => {
                 if (b) {
@@ -154,7 +161,7 @@ export class SceneTab extends Tab {
                     }
                     this._skeletonViewers = [];
                 }
-            });
+            }, 'Enable to see Skeletons on the scene : Debug.SkeletonViewer');
         }
     }
 
@@ -164,8 +171,8 @@ export class SceneTab extends Tab {
     }
 
     /** generates a div which correspond to an option that can be activated/deactivated */
-    private _generateActionLine(name: string, initValue: boolean, action: (b: boolean) => void) {
-        let div = Helpers.CreateDiv('scene-actions', this._actions);
+    private _generateActionLine(name: string, initValue: boolean, action: (b: boolean) => void, tooltip?: string) {
+        let div = Helpers.CreateDiv('scene-actions', this._actions, tooltip);
         div.textContent = name;
         div.classList.add('action');
         if (initValue) {