<!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;"> </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>