Bug 1187025 - Add keyboard shortcuts for differences/next/prev in the reftest analyzer. r=dbaron

Save trees, DONTBUILD this.

layout/tools/reftest/reftest-analyzer.xhtml

@@ -118,7 +118,7 @@ function load() {
     req.open('GET', gParams.logurl, true);
     req.send();
   }
-  window.addEventListener('keypress', maybe_load_image, false);
+  window.addEventListener('keypress', handle_keyboard_shortcut, false);
   ID("image1").addEventListener('error', image_load_error, false);
   ID("image2").addEventListener('error', image_load_error, false);
 }
@@ -390,7 +390,7 @@ function show_image(i) {
   }
 }
 
-function maybe_load_image(event) {
+function handle_keyboard_shortcut(event) {
   switch (event.charCode) {
   case 49: // "1" key
     document.getElementById("radio1").checked = true;
@@ -400,6 +400,32 @@ function maybe_load_image(event) {
     document.getElementById("radio2").checked = true;
     show_image(2);
     break;
+  case 100: // "d" key
+    document.getElementById("differences").click();
+    break;
+  case 112: // "p" key
+    shift_images(-1);
+    break;
+  case 110: // "n" key
+    shift_images(1);
+    break;
+  }
+}
+
+function shift_images(dir) {
+  var activeItem = document.querySelector(".activeitem");
+  if (!activeItem) {
+    return;
+  }
+  for (var elm = activeItem; elm; elm = elm.parentElement) {
+    if (elm.tagName != "tr") {
+      continue;
+    }
+    elm = dir > 0 ? elm.nextElementSibling : elm.previousElementSibling;
+    if (elm) {
+      elm.getElementsByTagName("a")[0].click();
+    }
+    return;
   }
 }
 
@@ -546,7 +572,7 @@ function show_pixelinfo(x, y, pix1rgb, pix1hex, pix2rgb, pix2hex) {
     <form id="imgcontrols">
     <input id="radio1" type="radio" name="which" value="0" onchange="show_image(1)" checked="checked" /><label id="label1" title="1" for="radio1">Image 1</label>
     <input id="radio2" type="radio" name="which" value="1" onchange="show_image(2)"                   /><label id="label2" title="2" for="radio2">Image 2</label>
-    <label><input type="checkbox" onchange="show_differences(this)" />Circle differences</label>
+    <label><input id="differences" type="checkbox" onchange="show_differences(this)" />Circle differences</label>
     </form>
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg">
       <defs>