[llvm-cov] Add filter and sort table functions to the index page.

[MaggieYi]

Summary

The filter and sort table functions have been added to the index page. The user could user filter input to only show the source files that the users are interested in. The user also could sort the entries of the index table by filename, function coverage, line coverage or region coverage.

[vsk]

When you mentioned filtering and sorting in D24367 I imagined simple extensions to the -{line,region}-coverage-{lt,gt} options.. I would strongly prefer to not have any javascript in llvm-cov. Apart from not having good tools to test javascript in tree, this opens us up to much more scope creep than I'm comfortable with. E.g, there is already an IE-specific JS hack in this patch.

test/tools/llvm-cov/showLineExecutionCounts.cpp

 //
 // Test index creation.
 // RUN: FileCheck -check-prefix=TEXT-INDEX -input-file %t.dir/index.txt %s
 // TEXT-INDEX: Filename
 // TEXT-INDEX-NEXT: ---
 // TEXT-INDEX-NEXT: {{.*}}showLineExecutionCounts.cpp
 //
 // RUN: FileCheck -check-prefix HTML-INDEX -input-file %t.html.dir/index.html %s
-// HTML-INDEX-LABEL: <table>
-// HTML-INDEX: <td class='column-entry-left'>Filename</td>
-// HTML-INDEX: <td class='column-entry'>Function Coverage</td>
-// HTML-INDEX: <td class='column-entry'>Line Coverage</td>
-// HTML-INDEX: <td class='column-entry'>Region Coverage</td>
+// HTML-INDEX: <h5><label>Filter: <input type="text" id="filterTerm" class="filter_box" onkeyup="applyFilter()" />
+// HTML-INDEX-LABEL: <table id="filter">
+// HTML-INDEX: <td class='column-entry-left'><a href="#" onclick="javascript:sortTable(0)">Filename</a></td>
+// HTML-INDEX: <td class='column-entry'><a href="#" onclick="javascript:sortTable(1)">Function Coverage</a></td>
+// HTML-INDEX: <td class='column-entry'><a href="#" onclick="javascript:sortTable(2)">Line Coverage</a></td>
+// HTML-INDEX: <td class='column-entry'><a href="#" onclick="javascript:sortTable(3)">Region Coverage</a></td>
 // HTML-INDEX: <a href='coverage{{.*}}showLineExecutionCounts.cpp.html'{{.*}}showLineExecutionCounts.cpp</a>
 // HTML-INDEX: <td class='column-entry-green'>
 // HTML-INDEX: 100.00% (1/1)
 // HTML-INDEX: <td class='column-entry-yellow'>
 // HTML-INDEX: 80.00% (16/20)
 // HTML-INDEX: <td class='column-entry-red'>
 // HTML-INDEX: 70.00% (7/10)
 // HTML-INDEX: TOTALS
+// HTML-INDEX: <script type = "text/javascript">
+// HTML-INDEX: function applyFilter()
+// HTML-INDEX: function sortTable(sortColumn)

tools/llvm-cov/SourceCoverageViewHTML.cpp

table {
   border-collapse: collapse;
 }
 .light-row {
   background: #ffffff;
   border: 1px solid #dbdbdb;
 }
 .column-entry {
   text-align: right;
+  background-color: #DAE7FE;
 }
 .column-entry-left {
   text-align: left;
+  background-color: #DAE7FE;
 }
 .column-entry-yellow {
   text-align: right;
   background-color: #ffffd0;
 }
 .column-entry-red {
   text-align: right;
   background-color: #ffd0d0;

 const char *BeginPre = "<pre>";
 
 const char *EndPre = "</pre>";
 
 const char *BeginExpansionDiv = "<div class='expansion-view'>";
 
 const char *EndExpansionDiv = "</div>";
 
-const char *BeginTable = "<table>";
+const char *BeginTable = "<table id=\"filter\">";
 
 const char *EndTable = "</table>";
 
 const char *ProjectTitleTag = "h1";
 
 const char *ReportTitleTag = "h2";
 
 const char *CreatedTimeTag = "h4";
 
+const char *JSForCoverage = R"(
+<script type = "text/javascript">
+
+var TableIDvalue = "filter";
+var TableLastSortedColumn = -1;
+var CellPadding = Array(5).join(" ");
+
+function getText(element) {
+  if (navigator.appName == 'Microsoft Internet Explorer') {
+    return element.innerText;
+  }
+  return element.textContent;
+}
+
+function applyFilter()
+{
+  var filterText = document.getElementById('filterTerm').value;
+  var targetTable = document.getElementById(TableIDvalue);
+  var targetTableColCount = 0;
+
+  for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
+    var rowData = '';
+
+    if (rowIndex == 0) {
+      targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
+      continue;
+    }
+
+    for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
+      var cellText = '';
+      rowData += getText(targetTable.rows.item(rowIndex).cells.item(colIndex));
+    }
+
+    rowData = rowData.toLowerCase();
+    filterText = filterText.toLowerCase();
+
+    if (rowData.indexOf(filterText) == -1)
+      targetTable.rows.item(rowIndex).style.display = 'none';
+    else
+      targetTable.rows.item(rowIndex).style.display = 'table-row';
+  }
+}
+
+function sortTable(sortColumn)
+{
+  var table = document.getElementById(TableIDvalue);
+  var rowData = []
+  for (var i = 1, len = table.rows.length; i < len-1; ++i) {
+    var sortVal = getText(table.rows.item(i).cells.item(sortColumn));
+    if (sortColumn != 0)
+      sortVal = parseFloat(sortVal);
+
+    rowData.push({
+      html: table.rows.item(i).innerHTML,
+      toSort: sortVal
+    });
+  }
+
+  if (sortColumn == TableLastSortedColumn) {
+    rowData.reverse();
+  }
+  else {
+    rowData.sort(function (a, b) {
+      return(a.toSort == b.toSort ? 0 : (a.toSort > b.toSort ? 1 : -1));
+    });
+    TableLastSortedColumn = sortColumn;
+  }
+
+  for (var i = 1, len = table.rows.length; i < len-1; ++i) {
+    table.rows.item(i).innerHTML = rowData[i-1].html;
+  }
+  return false;
+}
+</script>
+)";
+
 std::string getPathToStyle(StringRef ViewPath) {
   std::string PathToStyle = "";
   std::string PathSep = sys::path::get_separator();
   unsigned NumSeps = ViewPath.count(PathSep);
   for (unsigned I = 0, E = NumSeps; I < E; ++I)
     PathToStyle += ".." + PathSep;
   return PathToStyle + "style.css";
 }
else
     OS << "<link rel='stylesheet' type='text/css' href='"
        << escape(PathToStyle, Opts) << "'>";
 
   OS << EndHeader << "<body>";
 }
 
 void emitEpilog(raw_ostream &OS) {
   OS << "</body>"
-     << "</html>";
+     << "</html>" << JSForCoverage;
 }
 
 } // anonymous namespace
 
 Expected<CoveragePrinter::OwnedStream>
 CoveragePrinterHTML::createViewFile(StringRef Path, bool InToplevel) {
   auto OSOrErr = createOutputStream(Path, "html", InToplevel);
   if (!OSOrErr)
CoveragePrinterHTML::createViewFile(StringRef Path, bool InToplevel) {
 
   return std::move(OS);
 }
 
 void CoveragePrinterHTML::closeViewFile(OwnedStream OS) {
   emitEpilog(*OS.get());
 }
 
+/// Emit filter input for the table in the index.
+void renderFilterInputHTML(raw_ostream &OS) {
+  std::string FilterLabel = "Filter: <input type=\"text\" id=\"filterTerm\" "
+                            "class=\"filter_box\" onkeyup=\"applyFilter()\" />";
+  OS << tag("h5", tag("label", FilterLabel));
+}
+
 /// Emit column labels for the table in the index.
 static void emitColumnLabelsForIndex(raw_ostream &OS) {
   SmallVector<std::string, 4> Columns;
-  Columns.emplace_back(tag("td", "Filename", "column-entry-left"));
-  for (const char *Label :
-       {"Function Coverage", "Line Coverage", "Region Coverage"})
+  std::string SortFilename =
+      "<a href=\"#\" onclick=\"javascript:sortTable(0)\">Filename</a>";
+  Columns.emplace_back(tag("td", SortFilename, "column-entry-left"));
+  for (
+      const char *Label :
+      {"<a href=\"#\" onclick=\"javascript:sortTable(1)\">Function "
+       "Coverage</a>",
+       "<a href=\"#\" onclick=\"javascript:sortTable(2)\">Line Coverage</a>",
+       "<a href=\"#\" onclick=\"javascript:sortTable(3)\">Region Coverage</a>"})
     Columns.emplace_back(tag("td", Label, "column-entry"));
   OS << tag("tr", join(Columns.begin(), Columns.end(), ""));
 }
 
 /// Render a file coverage summary (\p FCS) in a table row. If \p IsTotals is
 /// false, link the summary to \p SF.
 void CoveragePrinterHTML::emitFileSummary(raw_ostream &OS, StringRef SF,
                                           const FileCoverageSummary &FCS,
Error CoveragePrinterHTML::createIndexFile(
 
   // Emit some basic information about the coverage report.
   if (Opts.hasProjectTitle())
     OSRef << tag(ProjectTitleTag, escape(Opts.ProjectTitle, Opts));
   OSRef << tag(ReportTitleTag, "Coverage Report");
   if (Opts.hasCreatedTime())
     OSRef << tag(CreatedTimeTag, escape(Opts.CreatedTimeStr, Opts));
 
+  renderFilterInputHTML(OSRef);
+
   // Emit a table containing links to reports for each file in the covmapping.
   CoverageReport Report(Opts, Coverage);
   OSRef << BeginCenteredDiv << BeginTable;
   emitColumnLabelsForIndex(OSRef);
   FileCoverageSummary Totals("TOTALS");
   auto FileReports = Report.prepareFileReports(Totals, SourceFiles);
   for (unsigned I = 0, E = FileReports.size(); I < E; ++I)
     emitFileSummary(OSRef, SourceFiles[I], FileReports[I]);