add ui for mutli-rebaselining

R=epoger@google.com

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

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

1 files changed, 56 insertions, 43 deletions

diff --git a/tools/skpdiff/viewer.html b/tools/skpdiff/viewer.html
index 46c5871ae1..f4b8fd7fc9 100644
--- a/tools/skpdiff/viewer.html
+++ b/tools/skpdiff/viewer.html
@@ -15,50 +15,63 @@
       us to use a webserver.
     -->
     <script type="text/ng-template" id="/diff_list.html">
-      <!-- Give a choice of how to order the differs -->
-      <div style="margin:8px">
-        Show me the worst by metric:
-        <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
-          <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</span>
-          {{ differ.title }}
-        </button>
+      <div ng-class="statusClass">
+        <!-- The commit button -->
+        <div ng-show="isDynamic" class="commit">
+          <button ng-click="commitRebaselines()">Commit</button>
+        </div>
+        <!-- Give a choice of how to order the differs -->
+        <div style="margin:8px">
+          Show me the worst by metric:
+          <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
+            <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</span>
+            {{ differ.title }}
+          </button>
+        </div>
+        <!-- Begin list of differences -->
+        <table>
+          <thead>
+            <tr>
+              <td ng-show="isDynamic">Rebaseline?</td>
+              <td>Expected Image</td>
+              <td>Actual Image</td>
+              <td>Results</td>
+            </tr>
+          </thead>
+          <tbody>
+            <!--
+              Loops through every record and crates a row for it. This sorts based on the whichever
+              metric the user chose, and places a limit on the max number of records to show.
+            -->
+            <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
+                ng-class="{selected: record.isRebaselined}">
+              <td ng-show="isDynamic">
+                <input type="checkbox"
+                       ng-model="record.isRebaselined"
+                       ng-click="selectedRebaseline($index, $event)"
+                       ng-class="{lastselected: lastSelectedIndex == $index}" />
+              </td>
+              <td>
+                <swap-img left-src="{{ record.baselinePath }}"
+                          right-src="{{ record.testPath }}"
+                          side="left"
+                          class="gm-image left-image" /></td>
+              <td>
+                <swap-img left-src="{{ record.baselinePath }}"
+                          right-src="{{ record.testPath }}"
+                          side="right"
+                          class="gm-image right-image" /></td>
+              <td>
+                <div ng-repeat="diff in record.diffs"
+                     ng-mouseover="highlight(diff.differName)"
+                     class="result result-{{$index}}">
+                  <span class="result-button">{{ diff.result }}</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <!-- Begin list of differences -->
-      <table>
-        <thead>
-          <tr>
-            <td>Expected Image</td>
-            <td>Actual Image</td>
-            <td>Results</td>
-          </tr>
-        </thead>
-        <tbody>
-          <!--
-            Loops through every record and crates a row for it. This sorts based on the whichever
-            metric the user chose, and places a limit on the max number of records to show.
-          -->
-          <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
-              class="{{ record.cssClasses }}">
-            <td ng-click="setHashOf(record.baselinePath, record)">
-              <swap-img left-src="{{ record.baselinePath }}"
-                        right-src="{{ record.testPath }}"
-                        side="left"
-                        class="gm-image left-image" /></td>
-            <td ng-click="setHashOf(record.testPath, record)">
-              <swap-img left-src="{{ record.baselinePath }}"
-                        right-src="{{ record.testPath }}"
-                        side="right"
-                        class="gm-image right-image" /></td>
-            <td>
-              <div ng-repeat="diff in record.diffs"
-                   ng-mouseover="highlight(diff.differName)"
-                   class="result result-{{$index}}">
-                <span class="result-button">{{ diff.result }}</span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
     </script>
     <!-- Whatever template is used is rendered in the following div -->
     <div ng-view></div>