rebaseline_server: get "image size" working again

BUG=skia:2134
NOTRY=True
R=rmistry@google.com

Author: epoger@google.com

Review URL: https://codereview.chromium.org/155973003

git-svn-id: http://skia.googlecode.com/svn/trunk@13343 2bbb7eff-a529-9590-31e7-b0007b416f81

2 files changed, 49 insertions, 53 deletions

diff --git a/gm/rebaseline_server/static/diff_viewer.js b/gm/rebaseline_server/static/diff_viewer.js
index cad83321fb..3cb3a7c2cf 100644
--- a/gm/rebaseline_server/static/diff_viewer.js
+++ b/gm/rebaseline_server/static/diff_viewer.js
@@ -1,9 +1,5 @@
-var MAX_SWAP_IMG_SIZE = 200;
-var MAGNIFIER_WIDTH = 100;
-var MAGNIFIER_HEIGHT = 100;
-var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5;
-var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5;
-var MAGNIFIER_SCALE_FACTOR = 2.0;
+// What portion of the image width will be taken up by the magnifier.
+var MAGNIFIER_WIDTH_FACTOR = 0.66;
 
 angular.module('diff_viewer', []).directive('imgCompare', function() {
   // Custom directive for comparing (3-way) images
@@ -18,9 +14,9 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
           var ctx = canvas.getContext('2d');
           var magnifyContent = false;
 
-          // When the type attribute changes, load the image and then render
+          // When the type attribute changes, set magnifyContent appropriately.
           attrs.$observe('type', function(value) {
-              switch(value) {
+              switch(attrs.type) {
                 case "differingPixelsInWhite":
                     magnifyContent = true;
                     break;
@@ -36,26 +32,25 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
                     console.log("Unknown type attribute on <img-compare>: " + value);
                     return;
               }
+          });
+
+          // Reset ImageController's scale and render the image;
+          // we need to do this whenever attrs.src or attrs.width changes.
+          scope.setScaleAndRender = function() {
+              // compute the scaled image width/height for image and canvas
+              scope.setImgScale(image.width, attrs.width);
 
+              // Set canvas to correct size
+              canvas.width = image.width / scope.imgScaleDivisor;
+              canvas.height = image.height / scope.imgScaleDivisor;
+
+              scope.renderImage();
+          };
+          attrs.$observe('src', function(value) {
               image.src = attrs.src;
-              image.onload = function() {
-                  // compute the scaled image width/height for image and canvas
-                  var divisor = 1;
-                  // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZE,
-                  // and the images are scaled down in halves.
-                  while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) {
-                      divisor *= 2;
-                  }
-
-                  scope.setImgScaleFactor(1 / divisor);
-
-                  // Set canvas to correct size
-                  canvas.width = image.width * scope.imgScaleFactor;
-                  canvas.height = image.height * scope.imgScaleFactor;
-
-                  scope.renderImage();
-              }
+              image.onload = scope.setScaleAndRender;
           });
+          attrs.$observe('width', scope.setScaleAndRender);
 
           // When the magnify attribute changes, render the magnified rect at
           // the default zoom level.
@@ -70,22 +65,22 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
                   return;
               }
 
-              var magX = magCenter.x - MAGNIFIER_HALF_WIDTH;
-              var magY = magCenter.y - MAGNIFIER_HALF_HEIGHT;
+              var magX = magCenter.x - scope.magnifierHalfWidth;
+              var magY = magCenter.y - scope.magnifierHalfHeight;
 
-              var magMaxX = canvas.width - MAGNIFIER_WIDTH;
-              var magMaxY = canvas.height - MAGNIFIER_HEIGHT;
+              var magMaxX = canvas.width - scope.magnifierWidth;
+              var magMaxY = canvas.height - scope.magnifierHeight;
 
               var magRect = { x: Math.max(0, Math.min(magX, magMaxX)),
                               y: Math.max(0, Math.min(magY, magMaxY)),
-                              width: MAGNIFIER_WIDTH,
-                              height: MAGNIFIER_HEIGHT
+                              width: scope.magnifierWidth,
+                              height: scope.magnifierHeight
                             };
 
-              var imgRect = { x: (magCenter.x / scope.imgScaleFactor) - MAGNIFIER_HALF_WIDTH,
-                              y: (magCenter.y  / scope.imgScaleFactor) - MAGNIFIER_HALF_HEIGHT,
-                              width: MAGNIFIER_WIDTH,
-                              height: MAGNIFIER_HEIGHT
+              var imgRect = { x: (magCenter.x * scope.imgScaleDivisor) - scope.magnifierHalfWidth,
+                              y: (magCenter.y * scope.imgScaleDivisor) - scope.magnifierHalfHeight,
+                              width: scope.magnifierWidth,
+                              height: scope.magnifierHeight
                             };
 
               // draw the magnified image
@@ -112,8 +107,8 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
           // compute a rect (x,y,width,height) that represents the bounding box for
           // the magnification effect
           scope.computeMagnifierOutline = function(event) {
-            var scaledWidth = MAGNIFIER_WIDTH * scope.imgScaleFactor;
-            var scaledHeight = MAGNIFIER_HEIGHT * scope.imgScaleFactor;
+            var scaledWidth = scope.magnifierWidth / scope.imgScaleDivisor;
+            var scaledHeight = scope.magnifierHeight / scope.imgScaleDivisor;
             return {
               x: event.offsetX - (scaledWidth * 0.5),
               y: event.offsetY  - (scaledHeight * 0.5),
@@ -160,12 +155,16 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
 });
 
 function ImageController($scope, $http, $location, $timeout, $parse) {
-  $scope.imgScaleFactor = 1.0;
+  $scope.imgScaleDivisor = 1.0;
   $scope.magnifierOn = false;
   $scope.magnifyCenter = undefined;
 
-  $scope.setImgScaleFactor = function(scaleFactor) {
-    $scope.imgScaleFactor = scaleFactor;
+  $scope.setImgScale = function(srcImageWidth, displayWidth) {
+    $scope.imgScaleDivisor = srcImageWidth / displayWidth;
+    $scope.magnifierWidth = displayWidth * MAGNIFIER_WIDTH_FACTOR;
+    $scope.magnifierHeight = $scope.magnifierWidth;
+    $scope.magnifierHalfWidth = $scope.magnifierWidth / 2;
+    $scope.magnifierHalfHeight = $scope.magnifierHeight / 2;
   }
 
   $scope.setMagnifierState = function(magnifierOn) {
@@ -173,7 +172,6 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   }
 
   $scope.setMagnifyCenter = function(magnifyCenter) {
-      $scope.magnifyCenter = magnifyCenter;
+    $scope.magnifyCenter = magnifyCenter;
   }
 }
-
diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html
index f756dcc5d7..46d6ab8be1 100644
--- a/gm/rebaseline_server/static/view.html
+++ b/gm/rebaseline_server/static/view.html
@@ -115,7 +115,7 @@
       </td>
       <td><table>
         <tr><td>
-          Image size
+          Image width
           <input type="text" ng-model="imageSizePending"
                  ng-init="imageSizePending=100"
                  ng-change="areUpdatesPending = true"
@@ -302,25 +302,23 @@
           </td>
 
           <!-- expected image -->
-          <td valign="top" width="{{imageSize}}">
-            <br/>
+          <td valign="bottom" width="{{imageSize}}">
             <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"
+            <img-compare type="baseline" width="{{imageSize}}"
                          src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png" />
 
           </td>
 
           <!-- actual image -->
-          <td valign="top" width="{{imageSize}}">
-            <br/>
+          <td valign="bottom" width="{{imageSize}}">
             <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"
+            <img-compare type="test" width="{{imageSize}}"
                          src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png" />
 
           </td>
 
           <!-- whitediffs: every differing pixel shown in white -->
-          <td valign="top" width="{{imageSize}}">
+          <td valign="bottom" 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.">
 
@@ -328,7 +326,7 @@
               ({{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"
+              <img-compare type="differingPixelsInWhite" width="{{imageSize}}"
                            src="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" />
 
             </div>
@@ -339,7 +337,7 @@
           </td>
 
           <!-- diffs: per-channel RGB deltas -->
-          <td valign="top" width="{{imageSize}}">
+          <td valign="bottom" 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]}}">
 
@@ -348,7 +346,7 @@
               <br/>
               <a href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
               <img-compare ng-style="{backgroundColor: pixelDiffBgColor}"
-                           type="differencePerPixel"
+                           type="differencePerPixel" width="{{imageSize}}"
                            src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"
                            ng-mousedown="MagnifyDraw($event, true)"
                            ng-mousemove="MagnifyDraw($event, false)"