From 3f583385306b6f626808bc64fbdf4741e3709ce5 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Mon, 23 Nov 2015 14:59:56 +0530 Subject: [PATCH 01/14] Type Inference in hint list. --- .../default/JavaScriptCodeHints/main.js | 60 ++++++++++++++++++- .../styles/brackets-js-hints.css | 10 ++++ 2 files changed, 69 insertions(+), 1 deletion(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index c1a91127afd..e5e7832a514 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -149,6 +149,64 @@ define(function (require, exports, module) { console.debug("Hints", _.pluck(hints, "label")); } + var _infered = true; + + function getInferHelper(type) { + return function (element, index, array) { + if (element === type && _infered) { + _infered = true; + } else { + _infered = false; + } + }; + } + + function inferArrayType(typeExpr) { + var type = "[...]"; + var types = typeExpr.split('[')[1].split(']')[0].split(','); + + _infered = true; + + types.every(getInferHelper('string')); + if (_infered) { + type = '[Abc]'; + } else { + _infered = true; + types.every(getInferHelper('number')); + if (_infered) { + type = '[123]'; + } else { + _infered = true; + types.every(getInferHelper('Object')); + if (_infered) { + type = '[{ }]'; + } + } + } + + return type; + } + + function getRenderType(type) { + var typeString = " "; + if (type) { + if (type.indexOf('Object') === 0) { + typeString = '{ }'; + } else if (type.indexOf('[') === 0) { + typeString = inferArrayType(type); + } else if (type.indexOf('fn') === 0) { + typeString = 'fn( )'; + } else if (type.indexOf('string') === 0) { + typeString = "Abc"; + } else if (type.indexOf('number') === 0) { + typeString = '123'; + } else if (type.indexOf('bool') === 0) { + typeString = 'bool'; + } + } + return typeString; + } + /* * Returns a formatted list of hints with the query substring * highlighted. @@ -165,7 +223,7 @@ define(function (require, exports, module) { function formatHints(hints, query) { return hints.map(function (token) { var $hintObj = $("").addClass("brackets-js-hints"); - + $('' + getRenderType(token.type) + '').appendTo($hintObj).addClass("brackets-js-hints-type"); // level indicates either variable scope or property confidence if (!type.property && !token.builtin && token.depth !== undefined) { switch (token.depth) { diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 66676a4dfd7..3dd3d8e5d86 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -21,6 +21,16 @@ * */ +.brackets-js-hints-type { + width: 30px; + color: cornflowerblue; + font-weight: 900; + padding-left: 5px; + text-align: center; + float: left; + box-sizing: border-box; +} + .brackets-js-hints.priority-high { color: #486c00; /* green */ } From 02207d61417cf1ff6262caa9f478e2d77ff869d0 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Tue, 24 Nov 2015 18:25:39 +0530 Subject: [PATCH 02/14] Adding Type details towards right of the hint token Styling changes --- .../default/JavaScriptCodeHints/main.js | 25 ++++++------ .../styles/brackets-js-hints.css | 38 +++++++++++++++++-- 2 files changed, 46 insertions(+), 17 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index e5e7832a514..3f47e82b5be 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -162,28 +162,27 @@ 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; } @@ -191,17 +190,17 @@ define(function (require, exports, module) { 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); + $('' + " " + (token.type || 'keyword').split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); return $hintObj; }); } diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 3dd3d8e5d86..f51da9291e2 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/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 */ } From b424fb4c2ad126682a9932f9f3d3a2ddf1e719a2 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Tue, 24 Nov 2015 18:27:42 +0530 Subject: [PATCH 03/14] JSLint fix. --- src/extensions/default/JavaScriptCodeHints/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index 3f47e82b5be..fc48f89344e 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -267,8 +267,7 @@ define(function (require, exports, module) { }); } else { $hintObj.text(token.value); - } - + } $hintObj.data("token", token); $('' + " " + (token.type || 'keyword').split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); return $hintObj; From 313c0f384738289076b00333511016934aafd83b Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Wed, 25 Nov 2015 12:39:43 +0530 Subject: [PATCH 04/14] Styling changes --- .../default/JavaScriptCodeHints/main.js | 14 ++++++++++--- .../styles/brackets-js-hints.css | 21 ++++++++++++++++--- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index fc48f89344e..a764d6f4a40 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -179,7 +179,7 @@ define(function (require, exports, module) { _infered = true; types.every(getInferHelper('Object')); if (_infered) { - type = '[{}]'; + type = '[O]'; } } } @@ -190,7 +190,7 @@ define(function (require, exports, module) { var typeString = " "; if (type) { if (type.indexOf('Object') === 0) { - typeString = '{}'; + typeString = 'O'; } else if (type.indexOf('[') === 0) { typeString = inferArrayType(type); } else if (type.indexOf('fn') === 0) { @@ -268,8 +268,16 @@ define(function (require, exports, module) { } else { $hintObj.text(token.value); } + $hintObj.data("token", token); - $('' + " " + (token.type || 'keyword').split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); + + if (token.type) { + $('' + " " + token.type.split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); + } else { + if (token.keyword) { + $('' + " " + "keyword" + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword"); + } + } return $hintObj; }); } diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index f51da9291e2..2c56f70dcd2 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -38,6 +38,14 @@ 1px 1px 0 #8d8d8d; } +.dark .brackets-js-hints-type { + text-shadow: + -1px -1px 0 #696969, + 1px -1px 0 #696969, + -1px 1px 0 #696969, + 1px 1px 0 #696969; +} + .highlight .brackets-js-hints-type { font-size: 13px; text-shadow: @@ -51,13 +59,20 @@ color: #d3d3d3; font-weight: 100; font-style: italic!important; - padding-left: 10px; float:right; - margin-left:5px; + padding-left: 10px; +} + +.dark .brackets-js-hints-type-details { + color: #696969; } .highlight .brackets-js-hints-type-details { - color: #0c50af; + color: #6495ed; +} + +.brackets-js-hints-type-details.keyword { + color: #6495ed; } From 925a6c70492d64cc615540b8a31929d8ddc9e5b6 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Thu, 26 Nov 2015 12:18:21 +0530 Subject: [PATCH 05/14] Adding doc to the highlighted hint. TODO: fix the css --- .../default/JavaScriptCodeHints/Session.js | 8 ++++ .../default/JavaScriptCodeHints/main.js | 9 ++++ .../styles/brackets-js-hints.css | 42 +++++++++++++++++-- .../JavaScriptCodeHints/tern-worker.js | 4 +- 4 files changed, 59 insertions(+), 4 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/Session.js b/src/extensions/default/JavaScriptCodeHints/Session.js index a26eed3ddae..e4636160ca6 100644 --- a/src/extensions/default/JavaScriptCodeHints/Session.js +++ b/src/extensions/default/JavaScriptCodeHints/Session.js @@ -570,6 +570,14 @@ define(function (require, exports, module) { if (hint.depth !== undefined) { searchResult.depth = hint.depth; } + + if (hint.doc) { + searchResult.doc = hint.doc; + } + + if (hint.url) { + searchResult.url = hint.url; + } if (!type.property && !type.showFunctionType && hint.origin && isBuiltin(hint.origin)) { diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index a764d6f4a40..8d0594e746b 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -278,6 +278,15 @@ define(function (require, exports, module) { $('' + " " + "keyword" + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword"); } } + + if (token.doc) { + $('' + " " + token.doc + '').appendTo($hintObj).addClass("jshint-description"); + } + + if (token.url) { + $('').appendTo($hintObj).addClass("jshint-description-url").html('🌐'); + } + return $hintObj; }); } diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 2c56f70dcd2..be25225d697 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -21,13 +21,16 @@ * */ +.brackets-js-hints { + max-width: 400px; +} + .brackets-js-hints-type { font-size: 10px; width:25px; color: white; font-weight: 900; text-align: center; - float: left; box-sizing: border-box; font-style:normal; padding:0px 0px 0px 6px; @@ -59,8 +62,40 @@ color: #d3d3d3; font-weight: 100; font-style: italic!important; - float:right; - padding-left: 10px; + padding-left: 20px; + display:none; +} + +.jshint-description { + line-height: 1.3; + display: none; + width: calc(100% - 50px); + padding-bottom: 3px; + padding-left: 37px; + padding-right: 37px; + color: #d3d3d3; + word-wrap:break-word; + box-sizing: border-box; +} + +.jshint-description-url { + color: #6495ed; + clear: right; + float : right; + background : transparent !important; + display:none; +} + +.highlight .jshint-description-url { + display:block; +} + +.dark .jshint-description { + color: #696969; +} + +.highlight .jshint-description { + display: block; } .dark .brackets-js-hints-type-details { @@ -69,6 +104,7 @@ .highlight .brackets-js-hints-type-details { color: #6495ed; + display: inline-block; } .brackets-js-hints-type-details.keyword { diff --git a/src/extensions/default/JavaScriptCodeHints/tern-worker.js b/src/extensions/default/JavaScriptCodeHints/tern-worker.js index c191d643129..2d9528d7566 100644 --- a/src/extensions/default/JavaScriptCodeHints/tern-worker.js +++ b/src/extensions/default/JavaScriptCodeHints/tern-worker.js @@ -168,6 +168,8 @@ var config = {}; query.types = true; query.expandWordForward = false; query.lineCharPositions = true; + query.docs = true; + query.urls = true; var request = {query: query, files: [], offset: offset, timeout: inferenceTimeout}; if (fileInfo.type !== MessageIds.TERN_FILE_INFO_TYPE_EMPTY) { @@ -294,7 +296,7 @@ var config = {}; for (i = 0; i < data.completions.length; ++i) { var completion = data.completions[i]; completions.push({value: completion.name, type: completion.type, depth: completion.depth, - guess: completion.guess, origin: completion.origin}); + guess: completion.guess, origin: completion.origin, doc: completion.doc, url: completion.url}); } } From 25a6acd4a88250eec0fb54fcaab76493efbe59b3 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Fri, 27 Nov 2015 13:48:00 +0530 Subject: [PATCH 06/14] Styling fix. --- src/extensions/default/JavaScriptCodeHints/main.js | 10 ++++++---- .../styles/brackets-js-hints.css | 13 ++++++++----- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index 8d0594e746b..6df363c884d 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -279,17 +279,19 @@ define(function (require, exports, module) { } } + if (token.url) { + $('ooo').appendTo($hintObj).addClass("jshint-description-url"); + } + if (token.doc) { $('' + " " + token.doc + '').appendTo($hintObj).addClass("jshint-description"); } - if (token.url) { - $('').appendTo($hintObj).addClass("jshint-description-url").html('🌐'); - } + $('
').appendTo($hintObj); return $hintObj; }); - } + } // trim leading and trailing string literal delimiters from the query trimmedQuery = _.trim(query, HintUtils.SINGLE_QUOTE + HintUtils.DOUBLE_QUOTE); diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index be25225d697..58744a9c004 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -21,8 +21,8 @@ * */ -.brackets-js-hints { - max-width: 400px; +.hint-width-limiter { + width:470px; } .brackets-js-hints-type { @@ -34,11 +34,13 @@ box-sizing: border-box; font-style:normal; padding:0px 0px 0px 6px; + float: left; text-shadow: -1px -1px 0 #8d8d8d, 1px -1px 0 #8d8d8d, -1px 1px 0 #8d8d8d, 1px 1px 0 #8d8d8d; + font-stretch: expanded; } .dark .brackets-js-hints-type { @@ -74,20 +76,21 @@ padding-left: 37px; padding-right: 37px; color: #d3d3d3; - word-wrap:break-word; box-sizing: border-box; + word-wrap: break-word; + white-space: normal; + width:450px; } .jshint-description-url { color: #6495ed; - clear: right; float : right; background : transparent !important; display:none; } .highlight .jshint-description-url { - display:block; + display:inline-block; } .dark .jshint-description { From e0ae9fd4010adff3528bbfa52881df4b810f1e59 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Fri, 27 Nov 2015 14:25:28 +0530 Subject: [PATCH 07/14] Reorganizing metadata to make the list uncluttered. --- .../default/JavaScriptCodeHints/main.js | 16 +++++++++------- .../styles/brackets-js-hints.css | 6 +++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index 6df363c884d..ec13dcd052d 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -271,27 +271,29 @@ define(function (require, exports, module) { $hintObj.data("token", token); + if (token.url) { + $('ooo').appendTo($hintObj).addClass("jshint-description-url"); + } + if (token.type) { - $('' + " " + token.type.split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); + //$('' + " " + token.type.split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); + $('' + " " + token.type.split('->').join(':') + '').appendTo($hintObj).addClass("jshint-description"); } else { if (token.keyword) { $('' + " " + "keyword" + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword"); } } - if (token.url) { - $('ooo').appendTo($hintObj).addClass("jshint-description-url"); - } - if (token.doc) { - $('' + " " + token.doc + '').appendTo($hintObj).addClass("jshint-description"); + //$('' + " " + token.doc + '').appendTo($hintObj).addClass("jshint-description"); + $hintObj.attr('title', token.doc); } $('
').appendTo($hintObj); return $hintObj; }); - } + } // trim leading and trailing string literal delimiters from the query trimmedQuery = _.trim(query, HintUtils.SINGLE_QUOTE + HintUtils.DOUBLE_QUOTE); diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 58744a9c004..6cfad9c3066 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -22,7 +22,7 @@ */ .hint-width-limiter { - width:470px; + width:450px; } .brackets-js-hints-type { @@ -71,7 +71,6 @@ .jshint-description { line-height: 1.3; display: none; - width: calc(100% - 50px); padding-bottom: 3px; padding-left: 37px; padding-right: 37px; @@ -79,7 +78,7 @@ box-sizing: border-box; word-wrap: break-word; white-space: normal; - width:450px; + width:450px; } .jshint-description-url { @@ -99,6 +98,7 @@ .highlight .jshint-description { display: block; + color:#6495ed; } .dark .brackets-js-hints-type-details { From a977e0cdecd9e371fbdf61ef667be73cda4783ae Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Wed, 2 Dec 2015 10:59:20 +0530 Subject: [PATCH 08/14] Styling change and inclusion of doc on hover. --- .../default/JavaScriptCodeHints/main.js | 55 +++--- .../styles/brackets-js-hints.css | 170 ++++++++++++------ 2 files changed, 146 insertions(+), 79 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index ec13dcd052d..d196c4a3342 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -161,49 +161,49 @@ define(function (require, exports, module) { }; } - function inferArrayType(typeExpr) { - var type = "[?]"; + function inferArrayTypeClass(typeExpr) { + var type = "type-array"; var types = typeExpr.split('[')[1].split(']')[0].split(','); _infered = true; types.every(getInferHelper('string')); if (_infered) { - type = '[S]'; + type = 'type-string-array'; } else { _infered = true; types.every(getInferHelper('number')); if (_infered) { - type = '[N]'; + type = 'type-num-array'; } else { _infered = true; types.every(getInferHelper('Object')); if (_infered) { - type = '[O]'; + type = 'type-object-array'; } } } return type; } - function getRenderType(type) { - var typeString = " "; + function getRenderTypeClass(type) { + var typeClass = 'type-undetermined'; if (type) { if (type.indexOf('Object') === 0) { - typeString = 'O'; + typeClass = 'type-object'; } else if (type.indexOf('[') === 0) { - typeString = inferArrayType(type); + typeClass = inferArrayTypeClass(type); } else if (type.indexOf('fn') === 0) { - typeString = 'fn'; + typeClass = 'type-function'; } else if (type.indexOf('string') === 0) { - typeString = "S"; + typeClass = "type-string"; } else if (type.indexOf('number') === 0) { - typeString = 'N'; + typeClass = 'type-number'; } else if (type.indexOf('bool') === 0) { - typeString = 'B'; + typeClass = 'type-boolean'; } } - return typeString; + return typeClass; } /* @@ -222,7 +222,8 @@ define(function (require, exports, module) { function formatHints(hints, query) { return hints.map(function (token) { var $hintObj = $("").addClass("brackets-js-hints"); - $('' + getRenderType(token.type) + '').appendTo($hintObj).addClass("brackets-js-hints-type"); + ($hintObj).addClass(getRenderTypeClass(token.type)); + //$('' + getRenderType(token.type) + '').appendTo($hintObj).addClass("brackets-js-hints-type"); // level indicates either variable scope or property confidence if (!type.property && !token.builtin && token.depth !== undefined) { switch (token.depth) { @@ -268,16 +269,23 @@ define(function (require, exports, module) { } else { $hintObj.text(token.value); } - + $hintObj.data("token", token); - if (token.url) { - $('ooo').appendTo($hintObj).addClass("jshint-description-url"); - } - if (token.type) { - //$('' + " " + token.type.split('->').join(':') + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); - $('' + " " + token.type.split('->').join(':') + '').appendTo($hintObj).addClass("jshint-description"); + if (token.type.length > 40) { + if (token.url) { + $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("jshint-description").attr('href', token.url); + } else { + $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("jshint-description"); + } + } else { + if (token.url) { + $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").attr('href', token.url); + } else { + $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); + } + } } else { if (token.keyword) { $('' + " " + "keyword" + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword"); @@ -285,7 +293,6 @@ define(function (require, exports, module) { } if (token.doc) { - //$('' + " " + token.doc + '').appendTo($hintObj).addClass("jshint-description"); $hintObj.attr('title', token.doc); } @@ -311,7 +318,7 @@ define(function (require, exports, module) { handleWideResults: hints.handleWideResults }; } - + /** * @constructor */ diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 6cfad9c3066..dd98603d315 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -25,71 +25,131 @@ width:450px; } -.brackets-js-hints-type { - font-size: 10px; +.brackets-js-hints.type-undetermined:before { + color: cornflowerblue; + content: '12'; + border: 1px cornflowerblue solid; + float:left; width:25px; - color: white; - font-weight: 900; text-align: center; - box-sizing: border-box; - font-style:normal; - padding:0px 0px 0px 6px; - float: left; - text-shadow: - -1px -1px 0 #8d8d8d, - 1px -1px 0 #8d8d8d, - -1px 1px 0 #8d8d8d, - 1px 1px 0 #8d8d8d; - font-stretch: expanded; -} - -.dark .brackets-js-hints-type { - text-shadow: - -1px -1px 0 #696969, - 1px -1px 0 #696969, - -1px 1px 0 #696969, - 1px 1px 0 #696969; -} - -.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; + margin-left:5px; + visibility: hidden; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-number:before { + color: cornflowerblue; + content: '12'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-string:before { + color: cornflowerblue; + content: 'ab'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-function:before { + color: cornflowerblue; + content: 'fn( )'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-array:before { + color: cornflowerblue; + content: '[ ]'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-object:before { + color: cornflowerblue; + content: '{ :}'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-num-array:before { + color: cornflowerblue; + content: '[12]'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-string-array:before { + color: cornflowerblue; + content: '[ab]'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; +} + +.brackets-js-hints.type-boolean:before { + color: cornflowerblue; + content: 't/f'; + border: 1px cornflowerblue solid; + float:left; + width:25px; + text-align: center; + margin-left:5px; + margin-top:-1px; + line-height: 1.2em; } .brackets-js-hints-type-details { - color: #d3d3d3; + color: #d3d3d3 !important; font-weight: 100; - font-style: italic!important; - padding-left: 20px; - display:none; + font-style: italic !important; + padding-left: 25px; } .jshint-description { - line-height: 1.3; display: none; - padding-bottom: 3px; - padding-left: 37px; - padding-right: 37px; + padding-left: 45px !important; + padding-right:10px !important; color: #d3d3d3; - box-sizing: border-box; - word-wrap: break-word; + word-wrap: break-word; white-space: normal; width:450px; -} - -.jshint-description-url { - color: #6495ed; - float : right; - background : transparent !important; - display:none; -} - -.highlight .jshint-description-url { - display:inline-block; + box-sizing: border-box; } .dark .jshint-description { @@ -98,15 +158,15 @@ .highlight .jshint-description { display: block; - color:#6495ed; + color:#6495ed !important; } .dark .brackets-js-hints-type-details { - color: #696969; + color: #696969 !important; } .highlight .brackets-js-hints-type-details { - color: #6495ed; + color: #6495ed !important; display: inline-block; } From fc7a16802de210dad82279bc3d8872aa0d39dab4 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Wed, 2 Dec 2015 12:58:09 +0530 Subject: [PATCH 09/14] Type icon vertical placement fix --- .../JavaScriptCodeHints/styles/brackets-js-hints.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index dd98603d315..79eea415865 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -34,7 +34,6 @@ text-align: center; margin-left:5px; visibility: hidden; - margin-top:-1px; line-height: 1.2em; } @@ -46,7 +45,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -58,7 +56,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -70,7 +67,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -82,7 +78,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -94,7 +89,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -106,7 +100,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -118,7 +111,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } @@ -130,7 +122,6 @@ width:25px; text-align: center; margin-left:5px; - margin-top:-1px; line-height: 1.2em; } From b6464309d2c50fb5e25857e7415b652948d38ff3 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Thu, 3 Dec 2015 11:50:15 +0530 Subject: [PATCH 10/14] Right alignment of type description. --- .../styles/brackets-js-hints.css | 41 +++++++++++++------ 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 79eea415865..c08c043527e 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -22,7 +22,12 @@ */ .hint-width-limiter { - width:450px; + width:400px; +} + +span.brackets-js-hints { + width: 400px; + display: inline-block; } .brackets-js-hints.type-undetermined:before { @@ -32,7 +37,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; visibility: hidden; line-height: 1.2em; } @@ -44,7 +50,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -55,7 +62,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -66,7 +74,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -77,7 +86,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -88,7 +98,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -99,7 +110,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -110,7 +122,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -121,7 +134,8 @@ float:left; width:25px; text-align: center; - margin-left:5px; + margin-left:-5px; + margin-right:5px; line-height: 1.2em; } @@ -129,17 +143,18 @@ color: #d3d3d3 !important; font-weight: 100; font-style: italic !important; - padding-left: 25px; + margin-right: 25px; + float:right; } .jshint-description { display: none; - padding-left: 45px !important; + padding-left: 35px !important; padding-right:10px !important; color: #d3d3d3; word-wrap: break-word; white-space: normal; - width:450px; + width:400px; box-sizing: border-box; } From 344849971e715dd3ec2a063575bbe741ada960c9 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Tue, 8 Dec 2015 18:28:57 +0530 Subject: [PATCH 11/14] Fine tuning the UI and embedding js doc limiting to max 2 lines. --- .../default/JavaScriptCodeHints/main.js | 24 +++++----- .../styles/brackets-js-hints.css | 44 ++++++++++++++++--- 2 files changed, 53 insertions(+), 15 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index d196c4a3342..c43c898f2da 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -272,19 +272,22 @@ define(function (require, exports, module) { $hintObj.data("token", token); + function _appendLink() { + if (token.url) { + $('< >').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) { - $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("jshint-description").attr('href', token.url); - } else { - $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("jshint-description"); - } + _appendLink(); + $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("jshint-description"); } else { - if (token.url) { - $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").attr('href', token.url); - } else { - $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); - } + $('' + " " + token.type.split('->').join(':').trim() + '').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); + $('' + " " + token.doc.trim() + '').appendTo($hintObj).addClass("jshint-jsdoc"); } $('
').appendTo($hintObj); diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index c08c043527e..36776a01389 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/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,7 +143,7 @@ span.brackets-js-hints { color: #d3d3d3 !important; font-weight: 100; font-style: italic !important; - margin-right: 25px; + margin-right: 5px; float:right; } @@ -151,7 +151,7 @@ span.brackets-js-hints { 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; } From c154d96103ac8cc5fad62eb9e188e4b49fed2b73 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Wed, 9 Dec 2015 17:07:11 +0530 Subject: [PATCH 12/14] jsdoc and type color changes on dark theme. --- .../JavaScriptCodeHints/styles/brackets-js-hints.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 36776a01389..87aa7deefd6 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -159,7 +159,7 @@ span.brackets-js-hints { } .dark .jshint-description { - color: #696969; + color: #ccc; } .jshint-jsdoc { @@ -175,7 +175,10 @@ span.brackets-js-hints { clear: left; max-height: 3em; overflow: hidden; - opacity:0.7; +} + +.dark .jshint-jsdoc { + color: #ccc; } .jshint-link { From ca9b0f1ba53cc3ceb2cd62bd1e97437ef767d006 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Wed, 9 Dec 2015 23:45:49 +0530 Subject: [PATCH 13/14] fix for "Unexpected Syntax error" thrown by jquery --- src/extensions/default/JavaScriptCodeHints/main.js | 10 ++++------ .../JavaScriptCodeHints/styles/brackets-js-hints.css | 5 +---- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index c43c898f2da..82220dd5753 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -284,24 +284,22 @@ define(function (require, exports, module) { if (token.type) { if (token.type.length > 40) { _appendLink(); - $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("jshint-description"); + $('' + token.type.split('->').join(':').toString().trim() + '').appendTo($hintObj).addClass("jshint-description"); } else { - $('' + " " + token.type.split('->').join(':').trim() + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); + $('' + token.type.split('->').join(':').toString().trim() + '').appendTo($hintObj).addClass("brackets-js-hints-type-details"); _appendLink(); } } else { if (token.keyword) { - $('' + " " + "keyword" + '').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword"); + $('keyword').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword"); } } if (token.doc) { $hintObj.attr('title', token.doc); - $('' + " " + token.doc.trim() + '').appendTo($hintObj).addClass("jshint-jsdoc"); + $('').text(token.doc.trim()).appendTo($hintObj).addClass("jshint-jsdoc"); } - $('
').appendTo($hintObj); - return $hintObj; }); } diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 87aa7deefd6..35bc2b6b964 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -21,9 +21,6 @@ * */ -.hint-width-limiter { - width:400px; -} span.brackets-js-hints { width: 400px; @@ -149,7 +146,7 @@ span.brackets-js-hints { .jshint-description { display: none; - padding-left: 35px !important; + padding-left: 28px !important; padding-right:10px !important; color: #d4d4d4; word-wrap: break-word; From 84e3cb409a078be7ef42bbbd17132149510af231 Mon Sep 17 00:00:00 2001 From: Swagatam Mitra Date: Thu, 10 Dec 2015 11:41:25 +0530 Subject: [PATCH 14/14] Changing '<>' link to boxed '?' --- .../default/JavaScriptCodeHints/main.js | 2 +- .../styles/brackets-js-hints.css | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/extensions/default/JavaScriptCodeHints/main.js b/src/extensions/default/JavaScriptCodeHints/main.js index 82220dd5753..331e1291fb2 100644 --- a/src/extensions/default/JavaScriptCodeHints/main.js +++ b/src/extensions/default/JavaScriptCodeHints/main.js @@ -274,7 +274,7 @@ define(function (require, exports, module) { function _appendLink() { if (token.url) { - $('< >').appendTo($hintObj).addClass("jshint-link").attr('href', token.url).on("click", function (event) { + $('').appendTo($hintObj).addClass("jshint-link").attr('href', token.url).on("click", function (event) { event.stopImmediatePropagation(); event.stopPropagation(); }); diff --git a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css index 35bc2b6b964..3b297ea7056 100644 --- a/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css +++ b/src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css @@ -181,11 +181,18 @@ span.brackets-js-hints { .jshint-link { float:right; display:none; - color:orangered !important; - margin:0px !important; margin-right: 10px !important; - padding:0px !important; - font-weight: 900 !important; +} + +.jshint-link:before { + float: right; + color: orangered !important; + content: '?' !important; + border: 1px orangered solid; + width: 10px; + text-align: center; + line-height: 1em; + visibility: visible !important; } .highlight .jshint-link {