Support warnings, notes and errors with different styling

static/compiler.js

@@ -29,7 +29,7 @@ function parseLines(lines, callback) {
         if (line != "") {
             var match = line.match(re);
             if (match) {
-                callback(parseInt(match[1]), match[4]);
+                callback(parseInt(match[1]), match[4].trim());
             } else {
                 callback(null, line);
             }
@@ -86,7 +86,10 @@ function Compiler(domRoot, origFilters, windowLocalPrefix, onChangeCallback) {
     }
 
     function makeErrNode(text) {
-        var node = $('<div class="error"><span class="error-icon">!!</span><span class="msg"></span></div>');
+        var clazz = "error";
+        if (text.match(/^warning/)) clazz = "warning";
+        if (text.match(/^note/)) clazz = "note";
+        var node = $('<div class="' + clazz + ' inline-msg"><span class="icon">!!</span><span class="msg"></span></div>');
         node.find(".msg").text(text);
         return node[0];
     }

static/gcc.css

@@ -16,16 +16,41 @@ body {
     display: inline-block;
 }
 
-.error {
-    background: #faa !important;
+.inline-msg {
     font-family: arial;
     font-size: 70%; 
-    color: #a00; 
     padding: 2px 5px 3px;
 }
 
-span.error-icon {
-    color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;
+span.icon {
+    border-radius: 50%; padding: 0 3px; margin-right: 7px;
+}
+
+.error {
+    background: #faa !important;
+    color: #a00; 
+}
+
+.error span.icon {
+    color: white; background-color: red; font-weight: bold;
+}
+
+.warning {
+    background: #ffa !important;
+    color: #440; 
+}
+
+.warning span.icon {
+    color: black; background-color: yellow;
+}
+
+.note {
+    background: #aaf !important;
+    color: #00a; 
+}
+
+.note span.icon {
+    color: white; background-color: blue;
 }
 
 .template {