[analyzer] Add keyboard j/k navigation to HTML reports

[george.karpenkov]

Summary

Navigating inside very HTML report can be rather frustrating: clicking on arrows requires a lot of mouse navigation, and scrolls to the top of the corresponding note, which loses context.
This small patch adds keyboard navigation using j/k keys, which scrolls the desired element right into the middle of the screen.

Wrapping around, issues with only a single element, default navigation all work as expected.

[dcoughlin]

Comments inline.

LGTM.

lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

388

I don't think we should provide these instructions on every report. They will not be relevant to most users.

816

I guess this means you can't combine keyboard and mouse navigation (i.e., by clicking on the arrows)?

[george.karpenkov]

Synchronize keyboard navigation with mouse navigation.

lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

388

Right, but it's arguably very useful, how could the user possibly know of the shortcut?

816

Fixed in this version: now mouse and keyboard do the same thing.

lib/Rewrite/HTMLRewrite.cpp

os << "<style type=\"text/css\">\n"
       " .PathIndex { -webkit-border-radius:8px }\n"
       " .PathIndex { border-radius:8px }\n"
       " .PathIndexEvent { background-color:#bfba87 }\n"
       " .PathIndexControl { background-color:#8c8c8c }\n"
       " .PathNav a { text-decoration:none; font-size: larger }\n"
       " .CodeInsertionHint { font-weight: bold; background-color: #10dd10 }\n"
       " .CodeRemovalHint { background-color:#de1010 }\n"
       " .CodeRemovalHint { border-bottom:1px solid #6F9DBE }\n"
+      " .selected{ background-color:orange !important; }\n"
       " table.simpletable {\n"
       "   padding: 5px;\n"
       "   font-size:12pt;\n"
       "   margin:20px;\n"
       "   border-collapse: collapse; border-spacing: 0px;\n"
       " }\n"
       " td.rowname {\n"
       "   text-align: right;\n"

lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

public:
   // Add HTML header/footers to file specified by FID
   void FinalizeHTML(const PathDiagnostic& D, Rewriter &R,
                     const SourceManager& SMgr, const PathPieces& path,
                     FileID FID, const FileEntry *Entry, const char *declName);
 
   // Rewrite the file specified by FID with HTML formatting.
   void RewriteFile(Rewriter &R, const SourceManager& SMgr,
                    const PathPieces& path, FileID FID);
+
+  /// \return Javascript for navigating the HTML report using j/k keys.
+  std::string generateKeyboardNavigationJavascript();
 };
 
 } // end anonymous namespace
 
 HTMLDiagnostics::HTMLDiagnostics(AnalyzerOptions &AnalyzerOpts,
                                  const std::string& prefix,
                                  const Preprocessor &pp,
                                  bool supportsMultipleFiles)
void HTMLDiagnostics::FinalizeHTML(const PathDiagnostic& D, Rewriter &R,
   if (llvm::sys::path::is_relative(Entry->getName())) {
     llvm::sys::fs::current_path(DirName);
     DirName += '/';
   }
 
   int LineNumber = path.back()->getLocation().asLocation().getExpansionLineNumber();
   int ColumnNumber = path.back()->getLocation().asLocation().getExpansionColumnNumber();
 
+  R.InsertTextBefore(SMgr.getLocForStartOfFile(FID),
+                     generateKeyboardNavigationJavascript());
+
   // Add the name of the file as an <h1> tag.
   {
     std::string s;
     llvm::raw_string_ostream os(s);
 
     os << "<!-- REPORTHEADER -->\n"
        << "<h3>Bug Summary</h3>\n<table class=\"simpletable\">\n"
           "<tr><td class=\"rowname\">File:</td><td>"
// Add the name of the file as an <h1> tag.
 
     // Output any other meta data.
 
     for (PathDiagnostic::meta_iterator I=D.meta_begin(), E=D.meta_end();
          I!=E; ++I) {
       os << "<tr><td></td><td>" << html::EscapeText(*I) << "</td></tr>\n";
     }
 
-    os << "</table>\n<!-- REPORTSUMMARYEXTRA -->\n"
-          "<h3>Annotated Source Code</h3>\n";
+    os << R"<<<(
+</table>
+<!-- REPORTSUMMARYEXTRA -->
+<h3>Annotated Source Code</h3>
+<p><span class='macro'>[?]
+  <span class='expansion'>Use j/k keys for keyboard navigation</span>
+</span></p>
+)<<<";
 
     R.InsertTextBefore(SMgr.getLocForStartOfFile(FID), os.str());
   }
 
   // Embed meta-data tags.
   {
     std::string s;
     llvm::raw_string_ostream os(s);
void HTMLDiagnostics::HighlightRange(Rewriter& R, FileID BugFileID,
   // Highlight the range.  Make the span tag the outermost tag for the
   // selected range.
 
   SourceLocation E =
     InstantiationEnd.getLocWithOffset(EndColNo - OldEndColNo);
 
   html::HighlightRange(R, InstantiationStart, E, HighlightStart, HighlightEnd);
 }
+
+std::string HTMLDiagnostics::generateKeyboardNavigationJavascript() {
+  return R"<<<(
+<script type='text/javascript'>
+var digitMatcher = new RegExp("[0-9]+");
+
+document.addEventListener("DOMContentLoaded", function() {
+    document.querySelectorAll(".PathNav > a").forEach(
+        function(currentValue, currentIndex) {
+            var hrefValue = currentValue.getAttribute("href");
+            currentValue.onclick = function() {
+                scrollTo(document.querySelector(hrefValue));
+                return false;
+            };
+        });
+});
+
+var findNum = function() {
+    var s = document.querySelector(".selected");
+    if (!s || s.id == "EndPath") {
+        return 0;
+    }
+    var out = parseInt(digitMatcher.exec(s.id)[0]);
+    return out;
+};
+
+var scrollTo = function(el) {
+    document.querySelectorAll(".selected").forEach(function(s) {
+        s.classList.remove("selected");
+    });
+    el.classList.add("selected");
+    window.scrollBy(0, el.getBoundingClientRect().top -
+        (window.innerHeight / 2));
+}
+
+var move = function(num, up, numItems) {
+  if (num == 1 && up || num == numItems - 1 && !up) {
+    return 0;
+  } else if (num == 0 && up) {
+    return numItems - 1;
+  } else if (num == 0 && !up) {
+    return 1 % numItems;
+  }
+  return up ? num - 1 : num + 1;
+}
+
+var numToId = function(num) {
+  if (num == 0) {
+    return document.getElementById("EndPath")
+  }
+  return document.getElementById("Path" + num);
+};
+
+var navigateTo = function(up) {
+  var numItems = document.querySelectorAll(".line > .msg").length;
+  var currentSelected = findNum();
+  var newSelected = move(currentSelected, up, numItems);
+  var newEl = numToId(newSelected, numItems);
+
+  // Scroll element into center.
+  scrollTo(newEl);
+};
+
+window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return;
+  }
+  if (event.key == "j") {
+    navigateTo(/*up=*/false);
+  } else if (event.key == "k") {
+    navigateTo(/*up=*/true);
+  } else {
+    return;
+  } 
+  event.preventDefault();
+}, true);
+</script>
+  )<<<";
+}