[analyzer] Adjust JS code of analyzer's HTML report for IE support.

[ASDenysPetrov]

Summary

Change and replace some functions which IE does not support. This patch is made as a continuation of D92928 revision. Also improve hot keys behavior.

[NoQ]

clang/lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

1352–1357

This probably also solves keyboard layout problems, nice!

1373

Shouldn't it be i < upper?

[ASDenysPetrov]

clang/lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

1352–1357

Exactly=)

1373

[lower, upper). Sure! Thanks!

[ASDenysPetrov]

Fixed the range in range function.

[vsavchenko]

Can you please also attach an HTML file just to verify that it works?

clang/lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

1293

nit: space please

1396–1398

nit: space please

[ASDenysPetrov]

Corrected nits. Thanks to "the sharp eye" @vsavchenko =).

[ASDenysPetrov]

Replaced a closure in highlightArrowsForSelectedEvent with function object.

[ASDenysPetrov]

report-cdf7f5.html26 KBDownload

This is a sample file which now should work both on IE and Chromium-based browsers.

[NoQ]

Works in Firefox on macOS as well!

[ASDenysPetrov]

In D107366#2926343, @NoQ wrote:

Works in Firefox on macOS as well!

Great!
@vsavchenko , any suggestions?

[vsavchenko]

In D107366#2926662, @ASDenysPetrov wrote:

In D107366#2926343, @NoQ wrote:

Works in Firefox on macOS as well!

Great!
@vsavchenko , any suggestions?

LGTM! Thanks fo taking care of this!

[vsavchenko]

Oh, wait! I found a bug!

[vsavchenko]

Now it captures (and makes bold) one extra arrow from the previous note.
Correct example attached!

report-e4b488.html27 KBDownload

clang/lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

1373

And this bug is probably because of this!

[ASDenysPetrov]

In D107366#2927842, @vsavchenko wrote:

Now it captures (and makes bold) one extra arrow from the previous note.
Correct example attached!

report-e4b488.html27 KBDownload

Damn. I've already fixed it. It returned back after some branch manipulations I didn't notice. Thank you!

[ASDenysPetrov]

Final fixes.

[ASDenysPetrov]

report-86a04f.html26 KBDownload

- Final sample file.

[ASDenysPetrov]

Is it ready to load now?

[vsavchenko]

Now it looks good! Thanks again!

clang/lib/StaticAnalyzer/Core/HTMLDiagnostics.cpp

var findNum = function() {
     var s = document.querySelector(".msg.selected");
     if (!s || s.id == "EndPath") {
         return 0;
     }
     var out = parseInt(digitMatcher.exec(s.id)[0]);
     return out;
 };
 
+var classListAdd = function(el, theClass) {
+  if(!el.className.baseVal)
+    el.className += " " + theClass;
+  else
+    el.className.baseVal += " " + theClass;
+};
+
+var classListRemove = function(el, theClass) {
+  var className = (!el.className.baseVal) ?
+      el.className : el.className.baseVal;
+    className = className.replace(" " + theClass, "");
+  if(!el.className.baseVal)
+    el.className = className;
+  else
+    el.className.baseVal = className;
+};
+
 var scrollTo = function(el) {
     querySelectorAllArray(".selected").forEach(function(s) {
-        s.classList.remove("selected");
+      classListRemove(s, "selected");
     });
-    el.classList.add("selected");
+    classListAdd(el, "selected");
     window.scrollBy(0, el.getBoundingClientRect().top -
         (window.innerHeight / 2));
     highlightArrowsForSelectedEvent();
-}
+};
 
 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;
var navigateTo = function(up) {
   // Scroll element into center.
   scrollTo(newEl);
 };
 
 window.addEventListener("keydown", function (event) {
   if (event.defaultPrevented) {
     return;
   }
-  if (event.key == "j") {
+  // key 'j'
+  if (event.keyCode == 74) {
     navigateTo(/*up=*/false);
-  } else if (event.key == "k") {
+  // key 'k'
+  } else if (event.keyCode == 75) {
     navigateTo(/*up=*/true);
   } else {
     return;
   }
   event.preventDefault();
 }, true);
 </script>
   )<<<";
 }
 
 StringRef HTMLDiagnostics::generateArrowDrawingJavascript() {
   return R"<<<(
 <script type='text/javascript'>
 // Return range of numbers from a range [lower, upper).
 function range(lower, upper) {
-  const size = upper - lower;
-  return Array.from(new Array(size), (x, i) => i + lower);
+  var array = [];
+  for (var i = lower; i <= upper; ++i) {
+      array.push(i);
+  }
+  return array;
 }
 
 var getRelatedArrowIndices = function(pathId) {
   // HTML numeration of events is a bit different than it is in the path.
   // Everything is rotated one step to the right, so the last element
   // (error diagnostic) has index 0.
   if (pathId == 0) {
     // arrowIndices has at least 2 elements
     pathId = arrowIndices.length - 1;
   }
 
   return range(arrowIndices[pathId], arrowIndices[pathId - 1]);
 }
 
 var highlightArrowsForSelectedEvent = function() {
   const selectedNum = findNum();
   const arrowIndicesToHighlight = getRelatedArrowIndices(selectedNum);
   arrowIndicesToHighlight.forEach((index) => {
     var arrow = document.querySelector("#arrow" + index);
-    arrow.classList.add("selected");
+    if(arrow) {
+      classListAdd(arrow, "selected")
+    }
   });
 }
 
 var getAbsoluteBoundingRect = function(element) {
   const relative = element.getBoundingClientRect();
   return {
     left: relative.left + window.pageXOffset,
     right: relative.right + window.pageXOffset,