add ui for mutli-rebaselining

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.
@@ skipping 58 matching lines @@
                     scope.side = "right";
                 } else {
                     scope.side = "left";
                 }
                 scope.render();
             };
         }
     };
 });
 
-function DiffListController($scope, $http, $timeout) {
+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 indicators on the rows, and then remove them so the style can potentially be
+    // Flash status indicator on the page, and then remove it so the style can potentially be
     // reapplied later.
-    $scope.flashRowStatus = function(success, record) {
+    $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.
-        record.cssClasses = flashStyle;
+        $scope.statusClass = flashStyle;
 
         // The animation cannot be repeated unless the class is removed the element.
         $timeout(function() {
-            record.cssClasses = "";
+            $scope.statusClass = "";
         }, 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);
-        });
+    $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);
+        });
+    };
 }