Fine tuning the UI and embedding js doc limiting to max 2 lines.

Author: swmitra

src/extensions/default/JavaScriptCodeHints/main.js

@@ -272,19 +272,22 @@ define(function (require, exports, module) {
 
                 $hintObj.data("token", token);
 
+                function _appendLink() {
+                    if (token.url) {
+                        $('<a><&nbsp;></a>').appendTo($hintObj).addClass("jshint-link").attr('href', token.url).on("click", function (event) {
+                            event.stopImmediatePropagation();
+                            event.stopPropagation();
+                        });
+                    }
+                }
+                
                 if (token.type) {
                     if (token.type.length > 40) {
-                        if (token.url) {
-                            $('<a>' + " " + token.type.split('->').join(':').trim() + '</a>').appendTo($hintObj).addClass("jshint-description").attr('href', token.url);
-                        } else {
-                            $('<span>' + " " + token.type.split('->').join(':').trim() + '</span>').appendTo($hintObj).addClass("jshint-description");
-                        }
+                        _appendLink();
+                        $('<span>' + " " + token.type.split('->').join(':').trim() + '</span>').appendTo($hintObj).addClass("jshint-description");
                     } else {
-                        if (token.url) {
-                            $('<a>' + " " + token.type.split('->').join(':').trim() + '</a>').appendTo($hintObj).addClass("brackets-js-hints-type-details").attr('href', token.url);
-                        } else {
-                            $('<span>' + " " + token.type.split('->').join(':').trim() + '</span>').appendTo($hintObj).addClass("brackets-js-hints-type-details");
-                        }
+                        $('<span>' + " " + token.type.split('->').join(':').trim() + '</span>').appendTo($hintObj).addClass("brackets-js-hints-type-details");
+                        _appendLink();
                     }
                 } else {
                     if (token.keyword) {
@@ -294,6 +297,7 @@ define(function (require, exports, module) {
 
                 if (token.doc) {
                     $hintObj.attr('title', token.doc);
+                    $('<span>' + " " + token.doc.trim() + '</span>').appendTo($hintObj).addClass("jshint-jsdoc");
                 }
 
                 $('<div class="hint-width-limiter"></div>').appendTo($hintObj);

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

@@ -129,7 +129,7 @@ span.brackets-js-hints {
 
 .brackets-js-hints.type-boolean:before {
     color: cornflowerblue;
-    content: 't/f';
+    content: 'bool';
     border: 1px cornflowerblue solid;
     float:left;
     width:25px;
@@ -143,15 +143,15 @@ span.brackets-js-hints {
     color: #d3d3d3 !important;
     font-weight: 100;
     font-style: italic !important;
-    margin-right: 25px;
+    margin-right: 5px;
     float:right;
 }
 
 .jshint-description {
     display: none;
     padding-left: 35px !important;
     padding-right:10px !important;
-    color: #d3d3d3;
+    color: #d4d4d4;
     word-wrap: break-word;	
     white-space: normal;
     width:400px;
@@ -162,9 +162,43 @@ span.brackets-js-hints {
     color: #696969;
 }
 
+.jshint-jsdoc {
+    display: none;
+    padding-left: 28px !important;
+    padding-right: 10px !important;
+    color: grey;
+    word-wrap: break-word;
+    white-space: normal;
+    width: 400px;
+    box-sizing: border-box;
+    float: left;
+    clear: left;
+    max-height: 3em;
+    overflow: hidden;
+    opacity:0.7;
+}
+
+.jshint-link {
+    float:right;
+    display:none;
+    color:orangered !important;
+    margin:0px !important;
+    margin-right: 10px !important;
+    padding:0px !important;
+    font-weight: 900 !important;
+}
+
+.highlight .jshint-link {
+    display:block;
+}
+
 .highlight .jshint-description {
     display: block;
-    color:#6495ed !important;
+    color: #6495ed !important;
+}
+
+.highlight .jshint-jsdoc {
+    display: block;
 }
 
 .dark .brackets-js-hints-type-details {
@@ -177,7 +211,7 @@ span.brackets-js-hints {
 }
 
 .brackets-js-hints-type-details.keyword {
-    color: #6495ed;
+    color: #6495ed !important;
 }