Add magnifier to rebaseline server

gm/rebaseline_server/static/view.html

Index: gm/rebaseline_server/static/view.html
diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html
index cbc2bd8d134e86d0e56b4e1775206cff8d8645ae..71b58c62882f0eaee12df776e9ea606ee49fd3e9 100644
--- a/gm/rebaseline_server/static/view.html
+++ b/gm/rebaseline_server/static/view.html
@@ -6,6 +6,7 @@
   <title ng-bind="windowTitle"></title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
   <script src="loader.js"></script>
+  <script src="diff_viewer.js"></script>
   <link rel="stylesheet" href="view.css">
 </head>
 
@@ -212,7 +213,7 @@
         </tr>
       </table> <!-- results header -->
       </td></tr><tr><td>
-      <table border="1"> <!-- results -->
+      <table border="1" ng-app="diff_viewer"> <!-- results -->
         <tr>
           <!-- Most column headers are displayed in a common fashion... -->
           <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'config']">
@@ -275,7 +276,7 @@
              This is made a bit tricky by the fact that AngularJS expressions
              do not allow control flow statements.  See
              http://docs.angularjs.org/guide/expression -->
-        <tr ng-repeat="result in limitedTestData">
+        <tr ng-repeat="result in limitedTestData" ng-controller="ImageController">

[epoger, 2014/02/04 16:45:52]

One thing I'm not sure about (being an AngularJS neophyte) is what happens when
different elements use different controllers.  Previously, all elements used
Loader.Controller.

I don't know if that might have anything to do with the pixel-diff images not
displaying until you mouseover their spaces, or not.

[rmistry, 2014/02/04 18:35:33]

Yes maybe it is because of different controllers, I am still investigating.

The behavior is: When you first go to the page all images are there but when you
move the mouse on an image the rest disappear till you mouse over them.

           <td ng-click="(viewingTab != defaultTab) || showOnlyResultType(result.resultType)">
             {{result.resultType}}
           </td>
@@ -296,27 +297,37 @@
 
           <!-- expected image -->
           <td valign="top" width="{{imageSize}}">
-            <a class="image-link" target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png">
-              <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"/>
-            </a>
+            <br/>
+            <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png" target="_blank">View Image</a><br/>
+            <img-compare type="baseline"
+                         src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"
+                         class="gm-image left-image" />
+
           </td>
 
           <!-- actual image -->
           <td valign="top" width="{{imageSize}}">
-            <a class="image-link" target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png">
-              <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"/>
-            </a>
+            <br/>
+            <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
+            <img-compare type="test"
+                         src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"
+                         class="gm-image left-image" />

[epoger, 2014/02/04 16:45:52]

What's the significance of this class name?  Should it be different than the
class name of the expected image?

[rmistry, 2014/02/04 18:35:33]

Does not look like the class name is important here, I had it like this
initially because that is how it was in skpdiff, but not needed for RBS or CT.

+
           </td>
 
           <!-- whitediffs: every differing pixel shown in white -->
           <td valign="top" width="{{imageSize}}">
             <div ng-hide="result.expectedHashDigest == result.actualHashDigest"
                  title="{{result.numDifferingPixels | number:0}} of {{(100 * result.numDifferingPixels / result.percentDifferingPixels) | number:0}} pixels ({{result.percentDifferingPixels.toFixed(4)}}%) differ from expectation.">
-              <a class="image-link" target="_blank" href="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png">
-                <img width="{{imageSize}}" src="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/>
-              </a><br>
+
               {{result.percentDifferingPixels.toFixed(4)}}%
               ({{result.numDifferingPixels}})
+              <br/>
+              <a href="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
+              <img-compare type="differingPixelsInWhite"
+                           class="left-image"
+                           src="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" />
+
             </div>
             <div ng-hide="result.expectedHashDigest != result.actualHashDigest"
                  style="text-align:center">
@@ -328,11 +339,19 @@
           <td valign="top" width="{{imageSize}}">
             <div ng-hide="result.expectedHashDigest == result.actualHashDigest"
                  title="Weighted difference measure is {{result.weightedDiffMeasure.toFixed(4)}}%.  Maximum difference per channel: R={{result.maxDiffPerChannel[0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}">
-              <a class="image-link" target="_blank" href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png">
-                <img width="{{imageSize}}" src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/>
-              </a><br>
+
               {{result.weightedDiffMeasure.toFixed(4)}}%
               {{result.maxDiffPerChannel}}
+              <br/>
+              <a href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
+              <img-compare type="differencePerPixel"
+                           class="left-image"

[epoger, 2014/02/04 16:45:52]

Ditto: What's the significance of this class name?  Should it be different than
the class name of the whitediffs?

[rmistry, 2014/02/04 18:35:33]

Removed as per comment above.

+                           src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"
+                           ng-mousedown="MagnifyDraw($event, true)"
+                           ng-mousemove="MagnifyDraw($event, false)"
+                           ng-mouseup="MagnifyEnd($event)"
+                           ng-mouseleave="MagnifyEnd($event)" />
+
             </div>
             <div ng-hide="result.expectedHashDigest != result.actualHashDigest"
                  style="text-align:center">