Support different highlight colors for popup hints

3 files changed, 21 insertions, 8 deletions

diff --git a/css/codeq.css b/css/codeq.css
index e82cf85..03bb08e 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -439,11 +439,6 @@ div.vertical-line{
 
 /* codeq hints */
 
-/* the highlighted part of the text, used in pop-up and drop-down hints */
-.editor-mark {
-    background-color: #e7c3c3;
-}
-
 /* the pop-up window, it is already absolutely positioned and its and positioning properties controlled from CodeMirror */
 .editor-popup {
     background: #245269;
diff --git a/css/codeq/hint.css b/css/codeq/hint.css
index 17f7b6d..7323a59 100644
--- a/css/codeq/hint.css
+++ b/css/codeq/hint.css
@@ -27,3 +27,20 @@ a.hint-static-link {
 .hints > div:hover {
     opacity: 1;
 }
+
+/* the highlighted part of the text, used in pop-up and drop-down hints */
+.editor-mark {
+    background-color: #e7c3c3;
+}
+
+.editor-mark.insert {
+    background-color: #b9ed61;
+}
+
+.editor-mark.remove {
+    background-color: #ffbb99;
+}
+
+.editor-mark.change {
+    background-color: #f4dd32;
+}
diff --git a/js/codeq/hint.js b/js/codeq/hint.js
index b5468e0..5db9fca 100644
--- a/js/codeq/hint.js
+++ b/js/codeq/hint.js
@@ -38,11 +38,11 @@
                 hintCounter = 0;
             },
 
-            addMark = function (start, end) {
+            addMark = function (start, end, style) {
                 var posStart = editor.posFromIndex(start),
                     posEnd = editor.posFromIndex(end),
                     doc = editor.getDoc(),
-                    mark = doc.markText(posStart, posEnd, {'className': 'editor-mark _emark_' + hintCounter}),
+                    mark = doc.markText(posStart, posEnd, {'className': 'editor-mark _emark_' + hintCounter + ' ' + style}),
                     result = {'start': posStart, 'end': posEnd, 'mark': mark, 'className': '_emark_' + hintCounter};
                 hintCleaners.push(function () { mark.clear(); mark = null; doc = null; result.mark = null; });
                 hintCounter++;
@@ -255,7 +255,8 @@
                 'popup': function (type, template, serverHint) {
                     codeq.log.debug('Processing popup hint');
                     var args = serverHint.args,
-                        mark = addMark(serverHint.start, serverHint.end), // add the mark
+                        style = serverHint.style || '',
+                        mark = addMark(serverHint.start, serverHint.end, style), // add the mark
                         langs = codeq.availableLangs,
                         translations = {},
                         lang, i, content, htmlPrefix, instFunc;