Add basic colouration

app.js

@@ -95,7 +95,7 @@ function compile(req, res) {
             return res.end(JSON.stringify({code: -1, stderr: "Unable to open temp file: " + err}));
         }
         var outputFilename = path.join(dirPath, 'output.S');
-        options = options.concat([ '-x', 'c++', '-o', outputFilename, '-S', '-']);
+        options = options.concat([ '-x', 'c++', '-g', '-o', outputFilename, '-S', '-']);
         var compilerWrapper = props.get("gcc-explorer", "compiler-wrapper");
         if (compilerWrapper) {
             options = [compiler].concat(options);

static/asm.js

@@ -70,11 +70,21 @@ function processAsm(asm, filters) {
     var commentOnly = /^\s*#.*/;
     var sourceTag = /^\s*\.loc\s+(\d+)\s+(\d+).*/;
     var stdInLooking = /.*<stdin>|-/;
+    var hasOpcode = /^\s*([a-zA-Z0-9$_][a-zA-Z0-9$_.]*:\s*)?[a-zA-Z].*/;
     var source = null;
     $.each(asmLines, function(_, line) {
+        var match;
         if (line.trim() == "") return;
+        if (match = line.match(sourceTag)) {
+            source = null;
+            var file = files[parseInt(match[1])];
+            if (file && file.match(stdInLooking)) {
+                source = parseInt(match[2]);
+            }
+        }
+
         if (filters.commentOnly && line.match(commentOnly)) return;
-        var match = line.match(labelDefinition);
+        match = line.match(labelDefinition);
         if (match && labelsUsed[match[1]] == undefined) {
             if (filters.labels) return;
         }
@@ -85,15 +95,8 @@ function processAsm(asm, filters) {
             if (match) return;
         }
 
-        if (match = line.match(sourceTag)) {
-            source = null;
-            var file = files[parseInt(match[1])];
-            if (file && file.match(stdInLooking)) {
-                source = parseInt(match[2]);
-            }
-        }
-
-        result.push({text: line, source: source});
+        var hasOpcodeMatch = line.match(hasOpcode);
+        result.push({text: line, source: hasOpcodeMatch ? source : null});
     });
     return result;
 }

static/gcc.css

@@ -47,3 +47,12 @@ li.social {
 .indented {
     margin-left: 36px;
 }
+
+.rainbow-0 { background: #ffa !important; }
+.rainbow-1 { background: #faf !important; }
+.rainbow-2 { background: #faa !important; }
+.rainbow-3 { background: #aff !important; }
+.rainbow-4 { background: #afa !important; }
+.rainbow-5 { background: #aaf !important; }
+.rainbow-6 { background: #77a !important; }
+.rainbow-7 { background: #a77 !important; }

static/gcc.js

@@ -43,8 +43,13 @@ function parseLines(lines, callback) {
         }
     });
 }
+function clearBackground(cm) {
+    for (var i = 0; i < cm.lineCount(); ++i) {
+        cm.setLineClass(i, null, null);
+    }
+}
 
-var errorLines = [];
+var hasErrors = false;
 function onCompileResponse(data) {
     var stdout = data.stdout || "";
     var stderr = data.stderr || "";
@@ -53,15 +58,16 @@ function onCompileResponse(data) {
     } else {
         stderr += "\nCompilation failed";
     }
-    $.each(errorLines, function(_, line) { 
-        if (line) cppEditor.setLineClass(line, null, null);
-    });
-    errorLines = [];
     $('.result .output :visible').remove();
+    hasErrors = false;
     parseLines(stderr + stdout, function(lineNum, msg) {
         var elem = $('.result .output .template').clone().appendTo('.result .output').removeClass('template');
         if (lineNum) {
-            errorLines.push(cppEditor.setLineClass(lineNum - 1, null, "error"));
+            if (!hasErrors) {
+                clearBackground(cppEditor);
+            }
+            hasErrors = true;
+            cppEditor.setLineClass(lineNum - 1, null, "error");
             elem.html($('<a href="#">').append(lineNum + " : " + msg)).click(function() {
                 cppEditor.setSelection({line: lineNum - 1, ch: 0}, {line: lineNum, ch: 0});
                 return false;
@@ -74,11 +80,45 @@ function onCompileResponse(data) {
     updateAsm();
 }
 
+function numberUsedLines(asm) {
+    var sourceLines = {};
+    $.each(asm, function(_, x) { if (x.source) sourceLines[x.source - 1] = true; });
+    var ordinal = 0;
+    $.each(sourceLines, function(k, _) { sourceLines[k] = ordinal++; });
+    var asmLines = {};
+    $.each(asm, function(index, x) { if (x.source) asmLines[index] = sourceLines[x.source - 1]; });
+    return { source: sourceLines, asm: asmLines };
+}
+
+var lastUpdatedAsm = null;
 function updateAsm() {
     if (!currentAssembly) return;
-    var asm = processAsm(currentAssembly, getAsmFilters());
+    var newFilters = getAsmFilters();
+    var hashedUpdate = JSON.stringify({
+        src: cppEditor.getValue(), 
+        asm: currentAssembly, 
+        filter: newFilters
+    });
+    if (lastUpdatedAsm == hashedUpdate) { return; }
+    lastUpdatedAsm = hashedUpdate;
+
+    var asm = processAsm(currentAssembly, newFilters);
     var asmText = $.map(asm, function(x){ return x.text; }).join("\n");
+    var numberedLines = numberUsedLines(asm);
     asmCodeMirror.setValue(asmText);
+    
+    if (!hasErrors) {
+        clearBackground(cppEditor);
+        clearBackground(asmCodeMirror);
+        if (newFilters.colouriseAsm) {
+            $.each(numberedLines.source, function(line, ordinal) {
+                cppEditor.setLineClass(parseInt(line), null, "rainbow-" + (ordinal & 7));
+            });
+            $.each(numberedLines.asm, function(line, ordinal) {
+                asmCodeMirror.setLineClass(parseInt(line), null, "rainbow-" + (ordinal & 7));
+            });
+        }
+    }
 }
 
 function onChange() {

static/index.html

@@ -76,6 +76,7 @@
                             <button class="btn" type="button" value="labels">Unused labels</button>
                             <button class="btn" type="button" value="directives">Directives</button>
                             <button class="btn" type="button" value="commentOnly">Comment-only lines</button>
+                            <button class="btn" type="button" value="colouriseAsm">Colourise</button>
                         </div>
                     </td></table>
                 </form>