Improvements to the reftest analyzer.

- Scroll the selected reference into view (makes it easier to tell which pdf you're looking at)
- Show the keyboard shortcuts (easier for new people)
- Keep the test/ref controls visible (if you scroll you can now tell if you're looking at a test or ref)

test/resources/reftest-analyzer.css

@@ -75,8 +75,7 @@ a {
   width: 320px;
 }
 
-#images {
+#imagepane {
-  overflow: auto;
   position: fixed;
   left: 340px;
   right: 0;
@@ -84,6 +83,15 @@ a {
   bottom: 0;
 }
 
+#images {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 22px;
+  bottom: 0;
+  overflow: auto;
+}
+
 #imgcontrols {
   margin: 0;
   display: block;
@@ -179,3 +187,8 @@ a {
 #differences {
   margin: 0 0 10px 20px;
 }
+
+#shortcuts {
+  float: right;
+  font-size: 10px;
+}

test/resources/reftest-analyzer.html

@@ -92,7 +92,7 @@ Original author: L. David Baron <dbaron@dbaron.org>
     <div id="itemlist">
       <table id="itemtable"></table>
     </div>
-    <div id="images">
+    <div id="imagepane">
     <form id="imgcontrols">
       <label>
         <input type="radio" name="which" id="testImage" value="0" checked="checked"> Test
@@ -103,7 +103,9 @@ Original author: L. David Baron <dbaron@dbaron.org>
       <label>
         <input type="checkbox" id="differences"> Circle differences
       </label>
+      <span id="shortcuts">Shortcuts: n=next p=previous t=toggle d=differences</span>
     </form>
+    <div id="images">
       <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>
           <!-- use sRGB to avoid loss of data -->
@@ -171,5 +173,6 @@ Original author: L. David Baron <dbaron@dbaron.org>
         <rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
       </svg>
     </div>
+  </div>
 </body>
 </html>

test/resources/reftest-analyzer.js

@@ -336,6 +336,7 @@ window.onload = function () {
     }
     gSelected = i;
     ID("url" + gSelected).classList.add("selected");
+    ID("url" + gSelected).scrollIntoView();
     const item = gTestItems[i];
     const cell = ID("images");