[layout test results.html] Small UI tweaks and tiny bug fixes

- When click the toolbar to select a view during animation, show the
  view for 1 second. This is convenient to briefly view a specific view
  without stopping the animation. Previously the time showing the clicked
  view was random.

- Let GUI.getExpectation(el) handle cases that the el is under
  result-frame, so that keyboard navigation still works when the focus
  is under result-frame (e.g. after the toolbar or the image result is
  clicked).

- Let GUI.activeExpectation() return the open expectation if no
  expectation line can be found from the focused element, so that keyboard
  navigation can be based on the open expectation if the focus is neither
  under the expectation line nor result-frame.

- Correct total count. Previously the total count didn't include expected
  failures, skipped and wontfix tests, etc.

Change-Id: Ibc4b697c52a7b5d37f0ebbfb5c925cc478f15f06
Reviewed-on: https://chromium-review.googlesource.com/777469
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Quinten Yearsley <qyearsley@chromium.org>
Cr-Commit-Position: refs/heads/master@{#517674}

third_party/WebKit/LayoutTests/fast/harness/results.html

@@ -317,7 +317,8 @@ TestResult(CRASH) + TextExpectation(Failure) => [ Failure <b>Crash</b> ]</pre>
 </div>
 
 <div id="report_header" style="margin-top:8px">
-  <span class="fix-width">Tests shown</span><span id="report_title" style="font-weight:bold"></span>
+  <span class="fix-width">Tests shown</span><span id="report_count"></span>
+  <span id="report_title" style="font-weight:bold"></span>
   in format:
     <select id="report_format" onchange="Query.generateReport()">
       <option value="plain" selected>Plain text</option>
@@ -825,6 +826,7 @@ const Query = {
     };
     window.setTimeout( _ => {
       traversal.traverse(filter, report.print);
+      document.querySelector("#report_count").innerText = traversal.html.length;
       this.completeReportPromise(traversal);
       this.currentRAF = window.requestAnimationFrame(callback);
     }, 0);
@@ -1002,9 +1004,8 @@ const GUI = {
 
   showNextExpectation: function(backward) {
     let nextExpectation;
-    let openDetails = document.querySelector(".details.open");
-    let openExpectation = openDetails && GUI.getExpectation(openDetails);
     let activeExpectation = GUI.activeExpectation();
+    let openExpectation = GUI.openExpectation();
     if (openExpectation)
       GUI.hideResults(openExpectation);
     if (openExpectation && openExpectation == activeExpectation) {
@@ -1024,12 +1025,13 @@ const GUI = {
     }
   },
 
+  openExpectation: function() {
+    let openDetails = document.querySelector(".details.open");
+    return openDetails && GUI.getExpectation(openDetails);
+  },
+
   activeExpectation: function() {
-    let result = GUI.closest(document.activeElement, "expect");
-    if (result)
-      return result;
-    result = GUI.closest(document.activeElement, "result-frame");
-    return result ? result.previousElementSibling : null;
+    return GUI.getExpectation(document.activeElement) || GUI.openExpectation();
   },
 
   initEvents: function() {
@@ -1123,7 +1125,6 @@ const GUI = {
   printSummary: function (fullResults) {
     if (fullResults.builder_name)
       document.querySelector("#builder_name").innerText = fullResults.builder_name;
-    document.querySelector("#summary_total").innerText = fullResults.num_passes + fullResults.num_regressions;
     document.querySelector("#summary_passed").innerText = fullResults.num_passes;
     document.querySelector("#summary_regressions").innerText = fullResults.num_regressions;
     let failures = fullResults["num_failures_by_type"];
@@ -1141,10 +1142,12 @@ const GUI = {
       "count_unexpected_pass": 0,
       "count_unexpected_fail": 0,
       "count_testexpectations": 0,
-      "count_flaky": 0
+      "count_flaky": 0,
+      "count_all": 0,
     };
     var t = new Traversal(fullResults.tests);
     t.traverse( test => {
+      counts.count_all++;
       if (Filters.unexpectedPass(test))
         counts.count_unexpected_pass++;
       if (Filters.unexpectedFailure(test))
@@ -1156,11 +1159,16 @@ const GUI = {
     });
     for (let p in counts)
       document.querySelector("#" + p).innerText = counts[p];
-    document.querySelector("#count_all").innerText = fullResults.num_passes + fullResults.num_regressions;
+
+    document.querySelector("#summary_total").innerText = counts.count_all;
   },
 
   getExpectation: function(el) {
-    return GUI.closest(el, "expect");
+    let result = GUI.closest(el, "expect");
+    if (result)
+      return result;
+    result = GUI.closest(document.activeElement, "result-frame");
+    return result ? result.previousElementSibling : null;
   },
 
   isFlag: function(el) {
@@ -1376,6 +1384,11 @@ class ImageResultsToolbar extends TXToolbar {
       if (ev.target.tagName == "A") {
         this.selectAnchor(ev.target);
         ev.preventDefault();
+        if (this.animationIntervalId) {
+          // Restart animation to show the clicked view for one second.
+          this.setAnimation(false);
+          window.setTimeout(_ => this.setAnimation(true), 1000);
+        }
       }
     });