Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Type Inference in hint list. #11949

Merged
merged 14 commits into from
Dec 10, 2015
Merged

Type Inference in hint list. #11949

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3f58338
Type Inference in hint list.
swmitra Nov 23, 2015
02207d6
Adding Type details towards right of the hint token
swmitra Nov 24, 2015
b424fb4
JSLint fix.
swmitra Nov 24, 2015
313c0f3
Styling changes
swmitra Nov 25, 2015
925a6c7
Adding doc to the highlighted hint. TODO: fix the css
swmitra Nov 26, 2015
25a6acd
Styling fix.
swmitra Nov 27, 2015
e0ae9fd
Reorganizing metadata to make the list uncluttered.
swmitra Nov 27, 2015
a977e0c
Styling change and inclusion of doc on hover.
swmitra Dec 2, 2015
fc7a168
Type icon vertical placement fix
swmitra Dec 2, 2015
b646430
Right alignment of type description.
swmitra Dec 3, 2015
3448499
Fine tuning the UI and embedding js doc limiting to max 2 lines.
swmitra Dec 8, 2015
c154d96
jsdoc and type color changes on dark theme.
swmitra Dec 9, 2015
ca9b0f1
fix for "Unexpected Syntax error" thrown by jquery
swmitra Dec 9, 2015
84e3cb4
Changing '<>' link to boxed '?'
swmitra Dec 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/extensions/default/JavaScriptCodeHints/Session.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
94 changes: 91 additions & 3 deletions src/extensions/default/JavaScriptCodeHints/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,63 @@ 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 inferArrayTypeClass(typeExpr) {
var type = "type-array";
var types = typeExpr.split('[')[1].split(']')[0].split(',');

_infered = true;

types.every(getInferHelper('string'));
if (_infered) {
type = 'type-string-array';
} else {
_infered = true;
types.every(getInferHelper('number'));
if (_infered) {
type = 'type-num-array';
} else {
_infered = true;
types.every(getInferHelper('Object'));
if (_infered) {
type = 'type-object-array';
}
}
}
return type;
}

function getRenderTypeClass(type) {
var typeClass = 'type-undetermined';
if (type) {
if (type.indexOf('Object') === 0) {
typeClass = 'type-object';
} else if (type.indexOf('[') === 0) {
typeClass = inferArrayTypeClass(type);
} else if (type.indexOf('fn') === 0) {
typeClass = 'type-function';
} else if (type.indexOf('string') === 0) {
typeClass = "type-string";
} else if (type.indexOf('number') === 0) {
typeClass = 'type-number';
} else if (type.indexOf('bool') === 0) {
typeClass = 'type-boolean';
}
}
return typeClass;
}

/*
* Returns a formatted list of hints with the query substring
* highlighted.
Expand All @@ -165,7 +222,8 @@ define(function (require, exports, module) {
function formatHints(hints, query) {
return hints.map(function (token) {
var $hintObj = $("<span>").addClass("brackets-js-hints");

($hintObj).addClass(getRenderTypeClass(token.type));
//$('<span>' + getRenderType(token.type) + '</span>').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) {
Expand Down Expand Up @@ -211,9 +269,39 @@ define(function (require, exports, module) {
} else {
$hintObj.text(token.value);
}

$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) {
_appendLink();
$('<span>' + " " + token.type.split('->').join(':').trim() + '</span>').appendTo($hintObj).addClass("jshint-description");
} else {
$('<span>' + " " + token.type.split('->').join(':').trim() + '</span>').appendTo($hintObj).addClass("brackets-js-hints-type-details");
_appendLink();
}
} else {
if (token.keyword) {
$('<span>' + " " + "keyword" + '</span>').appendTo($hintObj).addClass("brackets-js-hints-type-details").addClass("keyword");
}
}

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);

return $hintObj;
});
}
Expand All @@ -234,7 +322,7 @@ define(function (require, exports, module) {
handleWideResults: hints.handleWideResults
};
}

/**
* @constructor
*/
Expand Down
194 changes: 194 additions & 0 deletions src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,200 @@
*
*/

.hint-width-limiter {
width:400px;
}

span.brackets-js-hints {
width: 400px;
display: inline-block;
}

.brackets-js-hints.type-undetermined:before {
color: cornflowerblue;
content: '12';
border: 1px cornflowerblue solid;
float:left;
width:25px;
text-align: center;
margin-left:-5px;
margin-right:5px;
visibility: hidden;
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-right:5px;
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-right:5px;
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-right:5px;
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-right:5px;
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-right:5px;
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-right:5px;
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-right:5px;
line-height: 1.2em;
}

.brackets-js-hints.type-boolean:before {
color: cornflowerblue;
content: 'bool';
border: 1px cornflowerblue solid;
float:left;
width:25px;
text-align: center;
margin-left:-5px;
margin-right:5px;
line-height: 1.2em;
}

.brackets-js-hints-type-details {
color: #d3d3d3 !important;
font-weight: 100;
font-style: italic !important;
margin-right: 5px;
float:right;
}

.jshint-description {
display: none;
padding-left: 35px !important;
padding-right:10px !important;
color: #d4d4d4;
word-wrap: break-word;
white-space: normal;
width:400px;
box-sizing: border-box;
}

.dark .jshint-description {
color: #696969;
}

.jshint-jsdoc {
display: none;
padding-left: 28px !important;
padding-right: 10px !important;
color: grey;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look very visible in the dark mode. We use #ccc in pref hints so it will be good to use it here as well.

Dark Mode: #cccccc
Light Mode: #6e6e64

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;
}

.highlight .jshint-jsdoc {
display: block;
}

.dark .brackets-js-hints-type-details {
color: #696969 !important;
}

.highlight .brackets-js-hints-type-details {
color: #6495ed !important;
display: inline-block;
}

.brackets-js-hints-type-details.keyword {
color: #6495ed !important;
}


.brackets-js-hints.priority-high {
color: #486c00; /* green */
}
Expand Down
4 changes: 3 additions & 1 deletion src/extensions/default/JavaScriptCodeHints/tern-worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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});
}
}

Expand Down