autocompletion redesign

mix/qml/html/cm/anyword-hint.js

@@ -13,6 +13,19 @@
 	var curWord = start != end && curLine.slice(start, end);
 
 	var list = [], seen = {};
+
+	if (editor.getMode().name === "solidity")
+	{
+		list = addSolToken(curWord, list, seen, solCurrency(), solCurrency);
+		list = addSolToken(curWord, list, seen, solKeywords(), solKeywords);
+		list = addSolToken(curWord, list, seen, solStdContract(), solStdContract);
+		list = addSolToken(curWord, list, seen, solTime(), solTime);
+		list = addSolToken(curWord, list, seen, solTypes(), solTypes);
+		list = addSolToken(curWord, list, seen, solMisc(), solMisc);
+	}
+
+	seen = solKeywords();
+
 	var re = new RegExp(word.source, "g");
 	for (var dir = -1; dir <= 1; dir += 2) {
 	  var line = cur.line, endLine = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
@@ -28,32 +41,32 @@
 	  }
 	}
 
-	if (editor.getMode().name === "solidity")
-	{
-		list = addSolToken(curWord, list, solCurrency(), solCurrency);
-		list = addSolToken(curWord, list, solKeywords(), solKeywords);
-		list = addSolToken(curWord, list, solStdContract(), solStdContract);
-		list = addSolToken(curWord, list, solTime(), solTime);
-		list = addSolToken(curWord, list, solTypes(), solTypes);
-		list = addSolToken(curWord, list, solMisc(), solMisc);
-	}
-
 	return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
   });
 })();
 
 
-function addSolToken(curWord, list, tokens, type)
+function addSolToken(curWord, list, seen, tokens, type)
 {
+	var keywordsTypeName = keywordsName();
 	for (var key in tokens)
 	{
+		seen[key] = true;
 		if (curWord === false || key.indexOf(curWord, 0) === 0)
 		{
 			var token = { text: key };
 			token.render = function(elt, data, cur)
 			{
-				elt.className = elt.className + " " + type.name.toLowerCase();
+				var container = document.createElement("div");
-				elt.appendChild(document.createTextNode(cur.displayText || cur.text));
+				var word = document.createElement("div");
+				word.className = type.name.toLowerCase() + " solToken";
+				word.appendChild(document.createTextNode(cur.displayText || cur.text));
+				var typeDiv = document.createElement("type");
+				typeDiv.appendChild(document.createTextNode(keywordsTypeName[type.name.toLowerCase()]));
+				typeDiv.className = "solTokenType";
+				container.appendChild(word);
+				container.appendChild(typeDiv);
+				elt.appendChild(container);
 			}
 			list.push(token);
 		}

mix/qml/html/cm/show-hint.css

@@ -31,33 +31,53 @@
   white-space: pre;
   color: black;
   cursor: pointer;
+  padding-left: 20px;
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 
 .CodeMirror-hint-active {
   background: #4a90e2;
-  color: white;
+  color: white !important;
+}
+
+.CodeMirror-hint-active .solToken,
+.CodeMirror-hint-active .solTokenType
+{
+  color: white !important;
 }
 
 .solcurrency {
-  color: red;
+  color: #b58900;
 }
 
 .solkeywords {
-  color: brown;
+  color: #cb4b16;
 }
 
 .solstdcontract {
-  color: blue;
+  color: #d33682;
 }
 
 .soltime {
-  color: green;
+  color: #268bd2;
 }
 
 .soltypes {
-  color: orange;
+  color: #2aa198;
 }
 
 .solMisc {
-  color: grey;
+  color: #859900;
+}
+
+.solToken {
+  float: left;
+}
+
+.solTokenType
+{
+  font-style: italic;
+  color: #808080;
+  float: right;
 }

mix/qml/html/cm/solidityToken.js

@@ -27,3 +27,15 @@ function solMisc()
 {
 	return { "true": true, "false": true, "null": true };
 }
+
+function keywordsName()
+{
+	var keywords = {};
+	keywords[solCurrency.name.toLowerCase()] = "Currency";
+	keywords[solKeywords.name.toLowerCase()] = "Keyword";
+	keywords[solStdContract.name.toLowerCase()] = "Contract";
+	keywords[solTime.name.toLowerCase()] = "Time";
+	keywords[solTypes.name.toLowerCase()] = "Type";
+	keywords[solMisc.name.toLowerCase()] = "Misc";
+	return keywords;
+}