Make the parts of reftest-analyzer scroll independently. (Bug 612505)
authorL. David Baron <dbaron@dbaron.org>
Wed, 02 Feb 2011 08:40:17 -0800
changeset 61782 10df9d3ed091f6a3880f875452f75b7fe9e1b479
parent 61781 7abdd2abd9cbf3976fbccd5de41c2f162cdc9c8a
child 61783 95b2986b495e2877f98be1d82d389d5c78e98924
push idunknown
push userunknown
push dateunknown
bugs612505
milestone2.0b11pre
Make the parts of reftest-analyzer scroll independently. (Bug 612505)
layout/tools/reftest/reftest-analyzer.xhtml
--- a/layout/tools/reftest/reftest-analyzer.xhtml
+++ b/layout/tools/reftest/reftest-analyzer.xhtml
@@ -51,34 +51,42 @@ Features to add:
 ** move log loading into popup from viewer UI
 
 -->
 <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Reftest analyzer</title>
   <style type="text/css"><![CDATA[
 
+  html, body { margin: 0; padding: 0 }
+
+  #pixelarea, #itemlist, #images { position: absolute; overflow: auto; }
+  #pixelarea { top: 0; left: 0; width: 320px; height: 84px; }
+  #itemlist { top: 84px; left: 0; width: 320px; bottom: 0; }
+  #images { top: 0; bottom: 0; left: 320px; right: 0; }
+
   #leftpane { width: 320px; }
   #images { position: fixed; top: 10px; left: 340px; }
 
   form#imgcontrols { margin: 0; display: block; }
 
   #itemlist > table { border-collapse: collapse; }
   #itemlist > table > tbody > tr > td { border: 1px solid; padding: 1px; }
 
   /*
   #itemlist > table > tbody > tr.pass > td.url { background: lime; }
   #itemlist > table > tbody > tr.fail > td.url { background: red; }
   */
 
-  #magnification { margin-top: 1em; }
-  #pixelinfo { font: small sans-serif; position: absolute; width: 200px; left: 100px; margin-top: 2px; }
-  #pixelinfo table { border-collapse: collapse; white-space: nowrap;}
-  #pixelinfo table td, #pixelinfo table th { padding: 0 6px 2px 0; text-align: left; }
-  #pixelinfo table td { font-family: monospace; }
+  #magnification > svg { display: block; width: 84px; height: 84px; }
+
+  #pixelinfo { font: small sans-serif; position: absolute; width: 200px; left: 84px; }
+  #pixelinfo table { border-collapse: collapse; }
+  #pixelinfo table th { white-space: nowrap; text-align: left; padding: 0; }
+  #pixelinfo table td { font-family: monospace; padding: 0 0 0 0.25em; }
 
   #pixelhint { display: inline; color: #88f; cursor: help; }
   #pixelhint > * { display: none; position: absolute; margin: 8px 0 0 8px; padding: 4px; width: 400px; background: #ffa; color: black; box-shadow: 3px 3px 2px #888; z-index: 1; }
   #pixelhint:hover { color: #000; }
   #pixelhint:hover > * { display: block; }
   #pixelhint p { margin: 0; }
   #pixelhint p + p { margin-top: 1em; }
 
@@ -445,17 +453,17 @@ function show_pixelinfo(x, y, pix1rgb, p
 <p>... or load it from a file:<br/>
 <input type="file" id="fileentry" onchange="fileentry_changed()" />
 </p>
 </div>
 
 <div id="loading" style="display:none">Loading log...</div>
 
 <div id="viewer" style="display:none">
-  <div id="leftpane">
+  <div id="pixelarea">
     <div id="pixelinfo">
       <table>
         <tbody>
           <tr><th>Pixel at:</th><td colspan="2" id="coords"/></tr>
           <tr><th>Image 1:</th><td id="pix1rgb"></td><td id="pix1hex"></td></tr>
           <tr><th>Image 2:</th><td id="pix2rgb"></td><td id="pix2hex"></td></tr>
         </tbody>
       </table>
@@ -467,22 +475,22 @@ function show_pixelinfo(x, y, pix1rgb, p
             the pixel centered in the magnified view.</p>
             <p>Image 1 is shown in the upper triangle of each pixel and Image 2
             is shown in the lower triangle.</p>
           </div>
         </div>
       </div>
     </div>
     <div id="magnification">
-      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" shape-rendering="optimizeSpeed">
+      <svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" shape-rendering="optimizeSpeed">
         <g id="mag"/>
       </svg>
     </div>
-    <div id="itemlist"></div>
   </div>
+  <div id="itemlist"></div>
   <div id="images" style="display:none">
     <form id="imgcontrols">
     <label><input type="radio" name="which" value="0" onchange="show_image(1)" checked="checked" />Image 1</label>
     <label><input type="radio" name="which" value="1" onchange="show_image(2)" />Image 2</label>
     <label><input 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="800px" height="1000px" viewbox="0 0 800 1000" id="svg">
       <defs>