1 files changed, 81 insertions, 0 deletions
diff --git a/chromium/third_party/skia/tools/skpdiff/viewer.html b/chromium/third_party/skia/tools/skpdiff/viewer.html
new file mode 100644
index 00000000000..6ae65f756c5
--- /dev/null
+++ b/chromium/third_party/skia/tools/skpdiff/viewer.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<!-- This whole page uses the module -->
+<html ng-app="diff_viewer">
+  <head>
+    <script type="text/javascript"
+            src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
+    <script type="text/javascript" src="skpdiff_output.json"></script>
+    <script type="text/javascript" src="diff_viewer.js"></script>
+    <link rel="stylesheet" type="text/css" href="viewer_style.css">
+    <title>SkPDiff</title>
+  </head>
+  <body ng-controller="DiffListController" 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>Name</td>
+          <td>Difference Mask</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}" 
+            ng-controller="ImageController">
+          <td ng-show="isDynamic">
+            <input type="checkbox"
+                   ng-model="record.isRebaselined"
+                   ng-click="selectedRebaseline($index, $event)"
+                   ng-class="{lastselected: lastSelectedIndex == $index}" />
+          </td>
+          <td class="common-name">{{ record.commonName }}</td>
+          <td>
+            <img-compare type="alphaMask"
+                         class="left-image"
+                         ng-mousedown="MagnifyDraw($event, true)"
+                         ng-mousemove="MagnifyDraw($event, false)"
+                         ng-mouseup="MagnifyEnd($event)"
+                         ng-mouseleave="MagnifyEnd($event)"/>
+          </td>
+          <td>
+            <img-compare type="baseline"
+                         name="{{record.commonName}}"
+                         class="gm-image left-image" />
+          </td>
+          <td>
+            <img-compare type="test"
+                         name="{{record.commonName}}"
+                         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>
+  </body>
+</html>