Bug 454781 - Mochitest doesn't align the names of the testfiles and test results, r=sayrer

testing/mochitest/harness-overlay.xul

@@ -48,11 +48,8 @@
       srvScope.makeTags();
       var url = "chrome://mochikit/content/" + dir + "/";
       var [links, count] = srvScope.list(url, chromeDir, true);
-      var listContent = srvScope.linksToListItems(links);
-      var tableContent = srvScope.linksToTableRows(links);
+      var tableContent = srvScope.linksToTableRows(links, 0);
       function populate() {
-        $("list-holder").setAttribute("rowspan", 1 + count);
-        $("test-list").innerHTML += listContent;
         $("test-table").innerHTML += tableContent;
         $("wrapper").innerHTML += " "; // redraw the table
       }
@@ -102,9 +99,7 @@
               <td>Passed</td>
               <td>Failed</td>
               <td>Todo</td>
-              <td id="list-holder">
-                <ul class="top" id="test-list"><li><b>Test Files</b></li></ul>
-              </td>
+              <td>Test Files</td>
             </tr>
           </table>
         </div>

testing/mochitest/server.js

@@ -414,20 +414,45 @@ function linksToListItems(links)
 /**
  * Transform nested hashtables of paths to a flat table rows.
  */
-function linksToTableRows(links)
+function linksToTableRows(links, recursionLevel)
 {
   var response = "";
   for (var [link, value] in links) {
     var classVal = (!isTest(link) && !(value instanceof Object))
       ? "non-test invisible"
       : "";
+
+    spacer = "padding-left: " + (10 * recursionLevel) + "px";
+
     if (value instanceof Object) {
       response += TR({class: "dir", id: "tr-" + link },
-                     TD({colspan: "3"}," "));
-      response += linksToTableRows(value);
+                     TD({colspan: "3"}, " "),
+                     TD({style: spacer},
+                        A({href: link}, link)));
+      response += linksToTableRows(value, recursionLevel + 1);
     } else {
-      response += TR({class: classVal, id: "tr-" + link},
-                     TD("0"), TD("0"), TD("0"));
+      var bug_title = link.match(/test_bug\S+/);
+      var bug_num = null;
+      if (bug_title != null) {
+          bug_num = bug_title[0].match(/\d+/);
+      }
+      if ((bug_title == null) || (bug_num == null)) {
+        response += TR({class: classVal, id: "tr-" + link },
+                       TD("0"),
+                       TD("0"),
+                       TD("0"),
+                       TD({style: spacer},
+                          A({href: link}, link)));
+      } else {
+        var bug_url = "https://bugzilla.mozilla.org/show_bug.cgi?id=" + bug_num;
+        response += TR({class: classVal, id: "tr-" + link },
+                       TD("0"),
+                       TD("0"),
+                       TD("0"),
+                       TD({style: spacer},
+                          A({href: link}, link), " - ",
+                          A({href: bug_url}, "Bug " + bug_num)));
+      }
     }
   }
   return response;
@@ -539,15 +564,8 @@ function testListing(metadata, response)
           ),
     
           TABLE({cellpadding: 0, cellspacing: 0, id: "test-table"},
-            TR(TD("Passed"), TD("Failed"), TD("Todo"), 
-                TD({rowspan: count+1},
-                   UL({class: "top"},
-                      LI(B("Test Files")),        
-                      linksToListItems(links)
-                      )
-                )
-            ),
-            linksToTableRows(links)
+            TR(TD("Passed"), TD("Failed"), TD("Todo"), TD("Test Files")),
+            linksToTableRows(links, 0)
           ),
           DIV({class: "clear"})
         )

testing/mochitest/tests/SimpleTest/TestRunner.js

@@ -198,12 +198,11 @@ TestRunner.updateUI = function() {
   // Set the table values
   var trID = "tr-" + $('current-test-path').innerHTML;
   var row = $(trID);
-  replaceChildNodes(row,
-    TD({'style':
-        {'backgroundColor': results.notOK > 0 ? "#f00":"#0d0"}}, results.OK),
-    TD({'style':
-        {'backgroundColor': results.notOK > 0 ? "#f00":"#0d0"}}, results.notOK),
-    TD({'style': {'backgroundColor':
-                   results.todo > 0 ? "orange":"#0d0"}}, results.todo)
-  );
+  var tds = row.getElementsByTagName("td");
+  tds[0].style.backgroundColor = results.notOK > 0 ? "#f00" : "#0d0";
+  tds[0].textContent = results.OK;
+  tds[1].style.backgroundColor = results.notOK > 0 ? "#f00" : "#0d0";
+  tds[1].textContent = results.notOK;
+  tds[2].style.backgroundColor = results.todo > 0 ? "orange" : "#0d0";
+  tds[2].textContent = results.todo;
 }