Fix reccmp html output for template functions (#296)

tools/reccmp/reccmp.py

@@ -10,7 +10,7 @@
 import os
 import sys
 import colorama
-import html
+import json
 import re
 from isledecomp.dir import walk_source_dir
 from isledecomp.parser import find_code_blocks
@@ -526,14 +526,16 @@ def can_resolve_register_differences(original_asm, new_asm):
 
       # If html, record the diffs to an HTML file
       if html_path:
-        escaped = html.escape('\\n'.join(udiff).replace('"', '\\"').replace('\n', '\\n'))
-        htmlinsert.append(f'{{address: "0x{addr:x}", name: "{html.escape(recinfo.name)}", matching: {effective_ratio}, diff: "{escaped}"}}')
+        htmlinsert.append({"address": f"0x{addr:x}",
+                           "name": recinfo.name,
+                           "matching": effective_ratio,
+                           "diff": '\n'.join(udiff)})
 
 
 def gen_html(html_file, data):
   output_data = Renderer().render_path(get_file_in_script_dir('template.html'),
     {
-      "data": ','.join(data)
+      "data": data,
     }
   )
 
@@ -564,7 +566,7 @@ def gen_svg(svg_file, name_svg, icon, svg_implemented_funcs, total_funcs, raw_ac
 
 
 if html_path:
-  gen_html(html_path, htmlinsert)
+  gen_html(html_path, json.dumps(htmlinsert))
 
 if verbose:
   if not found_verbose_target:

tools/reccmp/template.html

@@ -64,6 +64,11 @@
         color: #80FF80;
       }
 
+      .identical {
+        font-style: italic;
+        text-align: center;
+      }
+
       #sortind {
         margin: 0 0.5em;
       }
@@ -75,23 +80,23 @@
       }
     </style>
     <script>
-      var data = [{{{data}}}];
+      var data = {{{data}}};
+
+      function diffCssClass(firstChar) {
+        return firstChar === '-' ? 'diffneg' : (firstChar === '+' ? 'diffpos' : '');
+      }
+
+      function asmLineToDiv(line) {
+        const diff_line = document.createElement('div');
+        diff_line.className = diffCssClass(line[0]);
+        diff_line.innerText = line;
+        return diff_line;
+      }
 
       function formatAsm(asm) {
         var lines = asm.split('\n');
-
-        for (var i = 0; i < lines.length; i++) {
-          var l = lines[i];
-          if (l.length > 0) {
-            if (l[0] == '-') {
-              lines[i] = '<span class="diffneg">' + l + '</span>';
-            } else if (l[0] == '+') {
-              lines[i] = '<span class="diffpos">' + l + '</span>';
-            }
-          }
-        }
-
-        return lines.join('<br>');
+        return lines.filter(line => line.length > 0)
+                    .map(asmLineToDiv);
       }
 
       function rowClick() {
@@ -105,11 +110,16 @@
           decCel.colSpan = 3;
           var diff = data[this.dataset.index].diff;
           if (diff == '') {
-            diff = '<center><i>Identical function - no diff</i></center>';
+            diff = document.createElement('div');
+            diff.className = 'identical';
+            diff.innerText = 'Identical function - no diff';
+            decCel.appendChild(diff);
           } else {
             diff = formatAsm(diff);
+            for (const el of diff) {
+              decCel.appendChild(el);
+            }
           }
-          decCel.innerHTML = diff;
           this.dataset.expanded = true;
         }
       }
@@ -219,8 +229,8 @@
           var nameCel = row.appendChild(document.createElement('td'));
           var matchCel = row.appendChild(document.createElement('td'));
 
-          addrCel.innerHTML = addrCel.dataset.value = element.address;
-          nameCel.innerHTML = nameCel.dataset.value = element.name;
+          addrCel.innerText = addrCel.dataset.value = element.address;
+          nameCel.innerText = nameCel.dataset.value = element.name;
 
           var effectiveNote = (element.matching == 1 && element.diff != '') ? '*' : '';
           matchCel.innerHTML = (element.matching * 100).toFixed(2) + '%' + effectiveNote;