Add magnifier to rebaseline server

gm/rebaseline_server/static/diff_viewer.js

-var MAX_SWAP_IMG_SIZE = 400;
-var MAGNIFIER_WIDTH = 200;
-var MAGNIFIER_HEIGHT = 200;
+var MAX_SWAP_IMG_SIZE = 200;

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

I assume the previous version of this file was copied in from
compute_engine_scripts/telemetry/static-files/diff_viewer.js , as created in
https://codereview.chromium.org/148093012/ ('Add magnifying ability, perceptual
diff and improve layout of Skia Tryserver HTML output').  Right?

Do we envision maintaining this copy separately, or should rebaseline_server and
compute_engine_scripts/ share identical diff_viewer.js code?

As noted in the codereview linked above, I already had some comments on this
code...

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

The previous version of this file is actually from tools/skpdiff/diff_viewer.js
Having separate copies is probably ok.

This is my thinking:
CT will use the code in RBS once it is done. I am not going to add any more
features to CT's output HTML, I might add bugfixes if necessary but I really
want to use RBS for this because it has more features than I have, plus it has
the ability to handle multiple images on a page (by limiting them to 20 or 50)
instead of risking the page crashing like it does in CT.
This code is a direct copy of the one in skpdiff, I do not completely understand
how it does what it does but it works in RBS. These are the changes I made:
* Changed it to handle 4 columns of images instead of the 3.
* Getting and setting the image source from view.html
* Reduced the max image size.
* Removed logic for sorting since you already have that in RBS.

[epoger, 2014/02/04 18:50:14]

Ah.  So we currently have *3* diff_viewers:
1. here
2. tools/skpdiff
3. compute_engine_scripts/telemetry

We will allow them to diverge for now; eventually, we hope to unify on the RBS
UI anyway, and the others can be deleted.

+var MAGNIFIER_WIDTH = 100;
+var MAGNIFIER_HEIGHT = 100;
 var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5;
 var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5;
-// TODO add support for a magnified scale factor
 var MAGNIFIER_SCALE_FACTOR = 2.0;
 
-angular.module('diff_viewer', []).
-directive('imgCompare', function() {
+angular.module('diff_viewer', []).directive('imgCompare', function() {
   // Custom directive for comparing (3-way) images
   return {
       restrict: 'E', // The directive can be used as an element name
       replace: true, // The directive replaces itself with the template
       template: '<canvas/>',
       scope: true,
       link: function(scope, elm, attrs, ctrl) {
           var image = new Image();
           var canvas = elm[0];
           var ctx = canvas.getContext('2d');
 
           var magnifyContent = false;
           var maskCanvas = false;
 
           // When the type attribute changes, load the image and then render
           attrs.$observe('type', function(value) {
               switch(value) {
-                case "alphaMask":
-                    image.src = scope.record.differencePath;
+                case "differingPixelsInWhite":
+                    magnifyContent = true;
+                    break;
+                case "differencePerPixel":
                     maskCanvas = true;
                     break;
                 case "baseline":
-                    image.src = scope.record.baselinePath;
                     magnifyContent = true;
                     break;
                 case "test":
-                    image.src = scope.record.testPath;
                     magnifyContent = true;
                     break;
                 default:
                     console.log("Unknown type attribute on <img-compare>: " + value);
                     return;
               }
 
+              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);
@@ skipping 84 matching lines @@
             var scaledHeight = MAGNIFIER_HEIGHT * scope.imgScaleFactor;
             return {
               x: event.offsetX - (scaledWidth * 0.5),
               y: event.offsetY  - (scaledHeight * 0.5),
               width: scaledWidth,
               height: scaledHeight
             };
           };
 
           // event handler for mouse events that triggers the magnification
-          // effect across the 3 images being compared.
+          // effect across the 4 images being compared.
           scope.MagnifyDraw = function(event, startMagnify) {
               if (startMagnify) {
                   scope.setMagnifierState(true);
               }  else if (!scope.magnifierOn) {
                   return;
               }
 
               scope.renderImage();
 
               // render the magnifier outline rect
@@ skipping 10 matching lines @@
               scope.setMagnifyCenter({x: event.offsetX, y: event.offsetY});
           };
 
           // event handler that triggers the end of the magnification effect and
           // resets all the canvases to their original state.
           scope.MagnifyEnd = function(event) {
               scope.renderImage();
               // update scope on baseline / test that will cause them to render
               scope.setMagnifierState(false);
               scope.setMagnifyCenter(undefined);
-        };
+          };
       }
   };
 });
 
 function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.imgScaleFactor = 1.0;
   $scope.magnifierOn = false;
   $scope.magnifyCenter = undefined;
   $scope.updatedMaskSize = undefined;
   $scope.maskSizeUpdated = false;
@@ skipping 12 matching lines @@
 
   $scope.updateMaskCanvasSize = function(updatedSize) {
       $scope.updatedMaskSize = updatedSize;
   }
 
   $scope.maskCanvasSizeUpdated = function(flag) {
       $scope.maskSizeUpdated = flag;
   }
 }
 
-function DiffListController($scope, $http, $location, $timeout, $parse) {
-    // Detect if we are running the web server version of the viewer. If so, we set a flag and
-    // enable some extra functionality of the website for rebaselining.
-    $scope.isDynamic = ($location.protocol() == "http" || $location.protocol() == "https");
-
-    // Label each kind of differ for the sort buttons.
-    $scope.differs = [
-        {
-            "title": "Different Pixels"
-        },
-        {
-            "title": "Perceptual Difference"
-        }
-    ];
-
-    // Puts the records within AngularJS scope
-    $scope.records = SkPDiffRecords.records;
-
-    // Keep track of the index of the last record to change so that shift clicking knows what range
-    // of records to apply the action to.
-    $scope.lastSelectedIndex = undefined;
-
-    // Indicates which diff metric is used for sorting
-    $scope.sortIndex = 1;
-
-    // Called by the sort buttons to adjust the metric used for sorting
-    $scope.setSortIndex = function(idx) {
-        $scope.sortIndex = idx;
-
-        // Because the index of things has most likely changed, the ranges of shift clicking no
-        // longer make sense from the user's point of view. We reset it to avoid confusion.
-        $scope.lastSelectedIndex = undefined;
-    };
-
-    // A predicate for pulling out the number used for sorting
-    $scope.sortingDiffer = function(record) {
-        return record.diffs[$scope.sortIndex].result;
-    };
-
-    // Flash status indicator on the page, and then remove it so the style can potentially be
-    // reapplied later.
-    $scope.flashStatus = function(success) {
-        var flashStyle = success ? "success-flash" : "failure-flash";
-        var flashDurationMillis = success ? 500 : 800;
-
-        // Store the style in the record. The row will pick up the style this way instead of through
-        // index because index can change with sort order.
-        $scope.statusClass = flashStyle;
-
-        // The animation cannot be repeated unless the class is removed the element.
-        $timeout(function() {
-            $scope.statusClass = "";
-        }, flashDurationMillis);
-    };
-
-    $scope.selectedRebaseline = function(index, event) {
-        // Retrieve the records in the same order they are displayed.
-        var recordsInOrder = $parse("records | orderBy:sortingDiffer")($scope);
-
-        // If the user is shift clicking, apply the last tick/untick to all elements in between this
-        // record, and the last one they ticked/unticked.
-        if (event.shiftKey && $scope.lastSelectedIndex !== undefined) {
-            var currentAction = recordsInOrder[index].isRebaselined;
-            var smallerIndex = Math.min($scope.lastSelectedIndex, index);
-            var largerIndex = Math.max($scope.lastSelectedIndex, index);
-            for (var recordIndex = smallerIndex; recordIndex <= largerIndex; recordIndex++) {
-                recordsInOrder[recordIndex].isRebaselined = currentAction;
-            }
-            $scope.lastSelectedIndex = index;
-        }
-        else
-        {
-            $scope.lastSelectedIndex = index;
-        }
-
-    };
-
-    $scope.commitRebaselines = function() {
-        // Gather up all records that have the rebaseline set.
-        var rebaselines = [];
-        for (var recordIndex = 0; recordIndex < $scope.records.length; recordIndex++) {
-            if ($scope.records[recordIndex].isRebaselined) {
-                rebaselines.push($scope.records[recordIndex].testPath);
-            }
-        }
-        $http.post("/commit_rebaselines", {
-            "rebaselines": rebaselines
-        }).success(function(data) {
-            $scope.flashStatus(data.success);
-        }).error(function() {
-            $scope.flashStatus(false);
-        });
-    };
-}