Merge pull request #1391 from yann300/autocompletion

Mix - solidity autocompletion ui design

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

@@ -13,6 +13,18 @@
 	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);
+	}
+
+	var previousWord = "";
 	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;
@@ -22,41 +34,60 @@
 		  if (line == cur.line && m[0] === curWord) continue;
 		  if ((!curWord || m[0].lastIndexOf(curWord, 0) === 0) && !Object.prototype.hasOwnProperty.call(seen, m[0])) {
 			seen[m[0]] = true;
-			list.push({ text: m[0] });
+			var w = { text: m[0] };
+			checkDeclaration(previousWord, "Contract", w);
+			checkDeclaration(previousWord, "Function", w);
+			list.push(w);
 		  }
+		  previousWord = m[0];
 		}
 	  }
 	}
-
-	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();
+				render(elt, data, cur, type.name.toLowerCase(), keywordsTypeName[type.name.toLowerCase()]);
-				elt.appendChild(document.createTextNode(cur.displayText || cur.text));
 			}
 			list.push(token);
 		}
 	}
 	return list;
 }
+
+function render(elt, data, cur, csstype, type)
+{
+	var container = document.createElement("div");
+	var word = document.createElement("div");
+	word.className = csstype + " solToken";
+	word.appendChild(document.createTextNode(cur.displayText || cur.text));
+	var typeDiv = document.createElement("type");
+	typeDiv.appendChild(document.createTextNode(type));
+	typeDiv.className = "solTokenType";
+	container.appendChild(word);
+	container.appendChild(typeDiv);
+	elt.appendChild(container);
+}
+
+function checkDeclaration(previousToken, target, current)
+{
+	if (previousToken.toLowerCase() === target.toLowerCase())
+	{
+		current.render = function(elt, data, cur)
+		{
+			render(elt, data, cur, "sol" + target, target);
+		}
+	}
+}

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

@@ -31,33 +31,29 @@
   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;
 }
 
-.solcurrency {
+.CodeMirror-hint-active .solToken,
-  color: red;
+.CodeMirror-hint-active .solTokenType
+{
+  color: white !important;
 }
 
-.solkeywords {
+.solToken {
-  color: brown;
+  float: left;
 }
 
-.solstdcontract {
+.solTokenType
-  color: blue;
+{
-}
+  font-style: italic;
-
+  color: #808080;
-.soltime {
+  float: right;
-  color: green;
-}
-
-.soltypes {
-  color: orange;
-}
-
-.solMisc {
-  color: grey;
 }

mix/qml/html/cm/solarized.css

@@ -16,14 +16,14 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
 .solarized.base1 { color: #93a1a1; }
 .solarized.base2 { color: #eee8d5; }
 .solarized.base3  { color: #fdf6e3; }
-.solarized.solar-yellow  { color: #b58900; }
+.solarized.solar-yellow, .solcurrency  { color: #b58900; }
-.solarized.solar-orange  { color: #cb4b16; }
+.solarized.solar-orange, .solkeywords  { color: #cb4b16; }
 .solarized.solar-red { color: #dc322f; }
-.solarized.solar-magenta { color: #d33682; }
+.solarized.solar-magenta, .solstdcontract { color: #d33682; }
 .solarized.solar-violet  { color: #6c71c4; }
-.solarized.solar-blue { color: #268bd2; }
+.solarized.solar-blue, .soltime { color: #268bd2; }
-.solarized.solar-cyan { color: #2aa198; }
+.solarized.solar-cyan, .soltypes { color: #2aa198; }
-.solarized.solar-green { color: #859900; }
+.solarized.solar-green, .solMisc { color: #859900; }
 
 /* Color scheme for code-mirror */
 

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