download and rebaseline images using server

tools/skpdiff/diff_viewer.js

+var MAX_SWAP_IMG_SIZE = 400;
+
 angular.module('diff_viewer', []).
 config(['$routeProvider', function($routeProvider) {
     // Show the list of differences by default
     $routeProvider.
     otherwise({ templateUrl: '/diff_list.html', controller: DiffListController});
 }]).
 directive('swapImg', function() {
     // Custom directive for showing an image that gets swapped my mouseover.
     return {
         restrict: 'E', // The directive can be used as an element name
@@ skipping 10 matching lines @@
             var ctx = elm[0].getContext('2d');
 
             scope.render = function() {
                 var image;
                 if (scope.side == "left") {
                     image = leftImage;
                 } else {
                     image = rightImage;
                 }
 
-                // Make it so the maximum size of an image is 500, and the images are scaled
-                // down in halves.
+                // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZE, and the images are
+                // scaled down in halves.
                 var divisor = 1;
-                while ((image.width / divisor) > 500) {
+                while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) {
                     divisor *= 2;
                 }
 
                 // Set canvas to correct size and draw the image into it
                 elm[0].width = image.width / divisor;
                 elm[0].height = image.height / divisor;
                 ctx.drawImage(image, 0, 0, elm[0].width, elm[0].height);
             };
 
             // When the leftSrc attribute changes, load the image and then rerender
@@ skipping 22 matching lines @@
                     scope.side = "right";
                 } else {
                     scope.side = "left";
                 }
                 scope.render();
             };
         }
     };
 });
 
-function DiffListController($scope) {
+function DiffListController($scope, $http, $timeout) {
     // 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;
 
     // 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;
     };
 
     // A predicate for pulling out the number used for sorting
     $scope.sortingDiffer = function(record) {
         return record.diffs[$scope.sortIndex].result;
     };
+
+    // Flash status indicators on the rows, and then remove them so the style can potentially be
+    // reapplied later.
+    $scope.flashRowStatus = function(success, record) {
+        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.
+        record.cssClasses = flashStyle;
+
+        // The animation cannot be repeated unless the class is removed the element.
+        $timeout(function() {
+            record.cssClasses = "";
+        }, flashDurationMillis);
+    }
+
+    $scope.setHashOf = function(imagePath, record) {
+        $http.post("/set_hash", {
+            "path": imagePath
+        }).success(function(data) {
+            $scope.flashRowStatus(data.success, record);
+        }).error(function() {
+            $scope.flashRowStatus(false, record);
+        });
+
+    };
 }