Adding Type details towards right of the hint token

Styling changes

Author: swmitra

src/extensions/default/JavaScriptCodeHints/main.js

@@ -162,46 +162,45 @@ define(function (require, exports, module) {
         }
 
         function inferArrayType(typeExpr) {
-            var type = "[...]";
+            var type = "[?]";
             var types = typeExpr.split('[')[1].split(']')[0].split(',');
 
             _infered = true;
 
             types.every(getInferHelper('string'));
             if (_infered) {
-                type = '[Abc]';
+                type = '[S]';
             } else {
                 _infered = true;
                 types.every(getInferHelper('number'));
                 if (_infered) {
-                    type = '[123]';
+                    type = '[N]';
                 } else {
                     _infered = true;
                     types.every(getInferHelper('Object'));
                     if (_infered) {
-                        type = '[{ }]';
+                        type = '[{}]';
                     }
                 }
             }
-            
             return type;
         }
 
         function getRenderType(type) {
             var typeString = " ";
             if (type) {
                 if (type.indexOf('Object') === 0) {
-                    typeString = '{ }';
+                    typeString = '{}';
                 } else if (type.indexOf('[') === 0) {
                     typeString = inferArrayType(type);
                 } else if (type.indexOf('fn') === 0) {
-                    typeString = 'fn( )';
+                    typeString = 'fn';
                 } else if (type.indexOf('string') === 0) {
-                    typeString = "Abc";
+                    typeString = "S";
                 } else if (type.indexOf('number') === 0) {
-                    typeString = '123';
+                    typeString = 'N';
                 } else if (type.indexOf('bool') === 0) {
-                    typeString = 'bool';
+                    typeString = 'B';
                 }
             }
             return typeString;
@@ -268,10 +267,10 @@ define(function (require, exports, module) {
                     });
                 } else {
                     $hintObj.text(token.value);
-                }
-
-                $hintObj.data("token", token);
+                } 
 
+                $hintObj.data("token", token);
+                $('<span>' + " " + (token.type || 'keyword').split('->').join(':') + '</span>').appendTo($hintObj).addClass("brackets-js-hints-type-details");
                 return $hintObj;
             });
         }

src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css

@@ -22,15 +22,45 @@
  */
 
 .brackets-js-hints-type {
-    width: 30px;
-    color: cornflowerblue;
+    font-size: 10px;
+    width:25px;
+    color: white;
     font-weight: 900;
-    padding-left: 5px;
     text-align: center;
     float: left;
-    box-sizing: border-box;
+    box-sizing: border-box;  
+    font-style:normal;
+    padding:0px 0px 0px 6px;
+    text-shadow:
+    -1px -1px 0 #8d8d8d,
+    1px -1px 0 #8d8d8d,
+    -1px 1px 0 #8d8d8d,
+    1px 1px 0 #8d8d8d; 
+}
+
+.highlight .brackets-js-hints-type {
+    font-size: 13px;
+    text-shadow:
+    -1px -1px 0 #6495ed,
+    1px -1px 0 #6495ed,
+    -1px 1px 0 #6495ed,
+    1px 1px 0 #6495ed; 
+}
+
+.brackets-js-hints-type-details {
+    color: #d3d3d3;
+    font-weight: 100;
+    font-style: italic!important;
+    padding-left: 10px;
+    float:right;
+    margin-left:5px;
+} 
+
+.highlight .brackets-js-hints-type-details {
+    color: #0c50af;
 }
 
+
 .brackets-js-hints.priority-high {
     color: #486c00; /* green */
 }