1<!doctype html>
2<!-- This whole page uses the module -->
3<html ng-app="diff_viewer">
4  <head>
5    <script type="text/javascript"
6            src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
7    <script type="text/javascript" src="skpdiff_output.json"></script>
8    <script type="text/javascript" src="diff_viewer.js"></script>
9    <link rel="stylesheet" type="text/css" href="viewer_style.css">
10    <title>SkPDiff</title>
11  </head>
12  <body ng-controller="DiffListController" ng-class="statusClass">
13    <!-- The commit button -->
14    <div ng-show="isDynamic" class="commit">
15      <button ng-click="commitRebaselines()">Commit</button>
16    </div>
17    <!-- Give a choice of how to order the differs -->
18    <div style="margin:8px">
19      Show me the worst by metric:
20      <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
21        <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</span>
22        {{ differ.title }}
23      </button>
24    </div>
25    <!-- Begin list of differences -->
26    <table>
27      <thead>
28        <tr>
29          <td ng-show="isDynamic">Rebaseline?</td>
30          <td>Name</td>
31          <td>Difference Mask</td>
32          <td>Expected Image</td>
33          <td>Actual Image</td>
34          <td>Results</td>
35        </tr>
36      </thead>
37      <tbody>
38        <!--
39          Loops through every record and crates a row for it. This sorts based on the whichever
40          metric the user chose, and places a limit on the max number of records to show.
41        -->
42        <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
43            ng-class="{selected: record.isRebaselined}" 
44            ng-controller="ImageController">
45          <td ng-show="isDynamic">
46            <input type="checkbox"
47                   ng-model="record.isRebaselined"
48                   ng-click="selectedRebaseline($index, $event)"
49                   ng-class="{lastselected: lastSelectedIndex == $index}" />
50          </td>
51          <td class="common-name">{{ record.commonName }}</td>
52          <td>
53            <img-compare type="alphaMask"
54                         class="left-image"
55                         ng-mousedown="MagnifyDraw($event, true)"
56                         ng-mousemove="MagnifyDraw($event, false)"
57                         ng-mouseup="MagnifyEnd($event)"
58                         ng-mouseleave="MagnifyEnd($event)"/>
59          </td>
60          <td>
61            <img-compare type="baseline"
62                         name="{{record.commonName}}"
63                         class="gm-image left-image" />
64          </td>
65          <td>
66            <img-compare type="test"
67                         name="{{record.commonName}}"
68                         class="gm-image right-image" />
69          </td>
70          <td>
71            <div ng-repeat="diff in record.diffs"
72                 ng-mouseover="highlight(diff.differName)"
73                 class="result result-{{$index}}">
74              <span class="result-button">{{ diff.result }}</span>
75            </div>
76          </td>
77        </tr>
78      </tbody>
79    </table>
80  </body>
81</html>
82