From c5404bee0ed2d1f4656add6ab241669eb8246c3d Mon Sep 17 00:00:00 2001
From: Brendan Dahl <brendan.dahl@gmail.com>
Date: Fri, 25 Feb 2022 11:13:46 -0800
Subject: [PATCH] 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  |  17 +++-
 test/resources/reftest-analyzer.html | 131 ++++++++++++++-------------
 test/resources/reftest-analyzer.js   |   1 +
 3 files changed, 83 insertions(+), 66 deletions(-)

diff --git a/test/resources/reftest-analyzer.css b/test/resources/reftest-analyzer.css
index 925e7346d..311e3a137 100644
--- a/test/resources/reftest-analyzer.css
+++ b/test/resources/reftest-analyzer.css
@@ -75,8 +75,7 @@ a {
   width: 320px;
 }
 
-#images {
-  overflow: auto;
+#imagepane {
   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;
+}
diff --git a/test/resources/reftest-analyzer.html b/test/resources/reftest-analyzer.html
index 249c2eb40..00f9eaa0d 100644
--- a/test/resources/reftest-analyzer.html
+++ b/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,73 +103,76 @@ 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>
-    <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 -->
-        <filter id="showDifferences" x="0%" y="0%" width="100%" height="100%"
-                style="color-interpolation-filters: sRGB">
-          <feImage id="feimage1" result="img1" xlink:href="#image1" />
-          <feImage id="feimage2" result="img2" xlink:href="#image2" />
-          <!-- inv1 and inv2 are the images with RGB inverted -->
-          <feComponentTransfer result="inv1" in="img1">
-            <feFuncR type="linear" slope="-1" intercept="1" />
-            <feFuncG type="linear" slope="-1" intercept="1" />
-            <feFuncB type="linear" slope="-1" intercept="1" />
-          </feComponentTransfer>
-          <feComponentTransfer result="inv2" in="img2">
-            <feFuncR type="linear" slope="-1" intercept="1" />
-            <feFuncG type="linear" slope="-1" intercept="1" />
-            <feFuncB type="linear" slope="-1" intercept="1" />
-          </feComponentTransfer>
-          <!-- w1 will have non-white pixels anywhere that img2
-               is brighter than img1, and w2 for the reverse.
-               It would be nice not to have to go through these
-               intermediate states, but feComposite
-               type="arithmetic" can't transform the RGB channels
-               and leave the alpha channel untouched. -->
-          <feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" />
-          <feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" />
-          <!-- c1 will have non-black pixels anywhere that img2
-               is brighter than img1, and c2 for the reverse -->
-          <feComponentTransfer result="c1" in="w1">
-            <feFuncR type="linear" slope="-1" intercept="1" />
-            <feFuncG type="linear" slope="-1" intercept="1" />
-            <feFuncB type="linear" slope="-1" intercept="1" />
-          </feComponentTransfer>
-          <feComponentTransfer result="c2" in="w2">
-            <feFuncR type="linear" slope="-1" intercept="1" />
-            <feFuncG type="linear" slope="-1" intercept="1" />
-            <feFuncB type="linear" slope="-1" intercept="1" />
-          </feComponentTransfer>
-          <!-- c will be nonblack (and fully on) for every pixel+component where there are differences -->
-          <feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" />
-          <!-- a will be opaque for every pixel with differences and transparent for all others -->
-          <feColorMatrix result="a" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 1 1 0 0" />
+    <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 -->
+          <filter id="showDifferences" x="0%" y="0%" width="100%" height="100%"
+                  style="color-interpolation-filters: sRGB">
+            <feImage id="feimage1" result="img1" xlink:href="#image1" />
+            <feImage id="feimage2" result="img2" xlink:href="#image2" />
+            <!-- inv1 and inv2 are the images with RGB inverted -->
+            <feComponentTransfer result="inv1" in="img1">
+              <feFuncR type="linear" slope="-1" intercept="1" />
+              <feFuncG type="linear" slope="-1" intercept="1" />
+              <feFuncB type="linear" slope="-1" intercept="1" />
+            </feComponentTransfer>
+            <feComponentTransfer result="inv2" in="img2">
+              <feFuncR type="linear" slope="-1" intercept="1" />
+              <feFuncG type="linear" slope="-1" intercept="1" />
+              <feFuncB type="linear" slope="-1" intercept="1" />
+            </feComponentTransfer>
+            <!-- w1 will have non-white pixels anywhere that img2
+                 is brighter than img1, and w2 for the reverse.
+                 It would be nice not to have to go through these
+                 intermediate states, but feComposite
+                 type="arithmetic" can't transform the RGB channels
+                 and leave the alpha channel untouched. -->
+            <feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" />
+            <feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" />
+            <!-- c1 will have non-black pixels anywhere that img2
+                 is brighter than img1, and c2 for the reverse -->
+            <feComponentTransfer result="c1" in="w1">
+              <feFuncR type="linear" slope="-1" intercept="1" />
+              <feFuncG type="linear" slope="-1" intercept="1" />
+              <feFuncB type="linear" slope="-1" intercept="1" />
+            </feComponentTransfer>
+            <feComponentTransfer result="c2" in="w2">
+              <feFuncR type="linear" slope="-1" intercept="1" />
+              <feFuncG type="linear" slope="-1" intercept="1" />
+              <feFuncB type="linear" slope="-1" intercept="1" />
+            </feComponentTransfer>
+            <!-- c will be nonblack (and fully on) for every pixel+component where there are differences -->
+            <feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" />
+            <!-- a will be opaque for every pixel with differences and transparent for all others -->
+            <feColorMatrix result="a" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 1 1 0 0" />
 
-          <!-- a, dilated by 4 pixels -->
-          <feMorphology result="dila4" in="a" operator="dilate" radius="4" />
-          <!-- a, dilated by 1 pixel -->
-          <feMorphology result="dila1" in="a" operator="dilate" radius="1" />
+            <!-- a, dilated by 4 pixels -->
+            <feMorphology result="dila4" in="a" operator="dilate" radius="4" />
+            <!-- a, dilated by 1 pixel -->
+            <feMorphology result="dila1" in="a" operator="dilate" radius="1" />
 
-          <!-- all the pixels in the 3-pixel dilation of a but not in the 1-pixel dilation of a, to highlight the diffs -->
-          <feComposite result="highlight" in="dila4" in2="dila1" operator="out" />
+            <!-- all the pixels in the 3-pixel dilation of a but not in the 1-pixel dilation of a, to highlight the diffs -->
+            <feComposite result="highlight" in="dila4" in2="dila1" operator="out" />
 
-          <feFlood result="red" flood-color="red" />
-          <feComposite result="redhighlight" in="red" in2="highlight" operator="in" />
-          <feFlood result="black" flood-color="black" flood-opacity="0.5" />
-          <feMerge>
-            <feMergeNode in="black" />
-            <feMergeNode in="redhighlight" />
-          </feMerge>
-        </filter>
-      </defs>
-      <g id="magnify">
-        <image x="0" y="0" id="image1" />
-        <image x="0" y="0" id="image2" />
-      </g>
-      <rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
-    </svg>
+            <feFlood result="red" flood-color="red" />
+            <feComposite result="redhighlight" in="red" in2="highlight" operator="in" />
+            <feFlood result="black" flood-color="black" flood-opacity="0.5" />
+            <feMerge>
+              <feMergeNode in="black" />
+              <feMergeNode in="redhighlight" />
+            </feMerge>
+          </filter>
+        </defs>
+        <g id="magnify">
+          <image x="0" y="0" id="image1" />
+          <image x="0" y="0" id="image2" />
+        </g>
+        <rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
+      </svg>
+    </div>
   </div>
 </body>
 </html>
diff --git a/test/resources/reftest-analyzer.js b/test/resources/reftest-analyzer.js
index 913f2331e..fbc54a459 100644
--- a/test/resources/reftest-analyzer.js
+++ b/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");