Dynamic hint menu height implementations to show only 8 lines of info at any font size

Author: swmitra

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

@@ -149,7 +149,6 @@ span.brackets-js-hints-with-type-details {
     color: #d4d4d4;
     word-wrap: break-word;	
     white-space: normal;
-    width:300px;
     box-sizing: border-box;
 }
 
@@ -163,12 +162,15 @@ span.brackets-js-hints-with-type-details {
     color: grey;
     word-wrap: break-word;
     white-space: normal;
-    width: 300px;
     box-sizing: border-box;
     float: left;
     clear: left;
-    max-height: 3em;
+    max-height: 2em;
     overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1em;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 .dark .jshint-jsdoc {
@@ -219,7 +221,7 @@ span.brackets-js-hints-with-type-details {
 }
 
 .highlight .jshint-jsdoc {
-    display: block;
+    display: -webkit-box;
 }
 
 .dark .brackets-js-hints-type-details {

src/view/ViewCommandHandlers.js

@@ -78,6 +78,12 @@ define(function (require, exports, module) {
      * @type {string}
      */
     var DYNAMIC_CODEHINT_WITH_TYPE_STYLE_ID = "codehint-with-type-dynamic-width";
+    
+    /**
+     * @const
+     * @type {string}
+     */
+    var DYNAMIC_CODEHINT_HEIGHT_STYLE_ID = "codehint-dynamic-height";
 
     /**
      * @const
@@ -124,6 +130,30 @@ define(function (require, exports, module) {
      * @type {number}
      */
     var DEFAULT_TYPED_HINT_SPAN_WIDTH = 300;
+    
+    /**
+     * @const
+     * @private
+     * The default hint menu max-height
+     * @type {number}
+     */
+    var DEFAULT_HINT_MENU_HEIGHT = 160;
+    
+    /**
+     * @const
+     * @private
+     * The default hint menu item line height offset
+     * @type {number}
+     */
+    var DEFAULT_HINT_MENU_LINE_HEIGHT_OFFSET = 7;
+    
+    /**
+     * @const
+     * @private
+     * The default number of visible menu items
+     * @type {number}
+     */
+    var DEFAULT_VISIBLE_HINT_MENU_ITEMS_COUNT = 8;
 
     /**
      * @private
@@ -155,7 +185,7 @@ define(function (require, exports, module) {
         _removeDynamicProperty(propertyID);
         $("head").append($style);
     }
-
+    
     /**
      * @private
      * Removes the styles used to update the font size
@@ -164,16 +194,18 @@ define(function (require, exports, module) {
         _removeDynamicProperty(DYNAMIC_FONT_STYLE_ID);
         _removeDynamicProperty(DYNAMIC_CODEHINT_FONT_STYLE_ID);
         _removeDynamicProperty(DYNAMIC_CODEHINT_WITH_TYPE_STYLE_ID);
+        _removeDynamicProperty(DYNAMIC_CODEHINT_HEIGHT_STYLE_ID);
     }
 
     /**
      * @private
      * Adds a new embeded style top sync code-hint font size with codeview font size
+     * @param {string} fontSize  A string with the font size and the size unit
      */
     function _addDynamicFontSizeForCodeHints(fontSize) {
         var styleStr = "";
         styleStr = styleStr + StringUtils.format("{0}: {1} {2};", "font-size", fontSize, " !important");
-        styleStr = styleStr + StringUtils.format("{0}: {1} {2};", "line-height", (parseInt(fontSize, 10) + 2) + fontSize.replace(parseInt(fontSize, 10), ""), " !important");
+        styleStr = styleStr + StringUtils.format("{0}: {1} {2};", "line-height", (parseInt(fontSize, 10) + 5) + fontSize.replace(parseInt(fontSize, 10), ""), " !important");
 
         _addDynamicProperty(DYNAMIC_CODEHINT_FONT_STYLE_ID, {
             propName: "font-size",
@@ -190,6 +222,14 @@ define(function (require, exports, module) {
             ruleName: "span.brackets-js-hints-with-type-details",
             ruleText: ""
         });
+        
+        _addDynamicProperty(DYNAMIC_CODEHINT_HEIGHT_STYLE_ID, {
+            propName: "max-height",
+            propValue: DEFAULT_VISIBLE_HINT_MENU_ITEMS_COUNT * (parseInt(fontSize, 10) + DEFAULT_HINT_MENU_LINE_HEIGHT_OFFSET) + "px",
+            priorityFlag: true,
+            ruleName: ".codehint-menu .dropdown-menu",
+            ruleText: ""
+        });
     }
 
     /**