2013-07-09 21:08:28 +00:00
|
|
|
<!doctype html>
|
2013-07-12 13:39:53 +00:00
|
|
|
<!-- This whole page uses the module -->
|
|
|
|
|
<html ng-app="diff_viewer">
|
2013-07-09 21:08:28 +00:00
|
|
|
<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>
|
2013-07-12 13:39:53 +00:00
|
|
|
<!--
|
|
|
|
|
All templates are being included with the main page to avoid using AJAX, which would force
|
|
|
|
|
us to use a webserver.
|
|
|
|
|
-->
|
|
|
|
|
<script type="text/ng-template" id="/diff_list.html">
|
2013-08-07 18:06:39 +00:00
|
|
|
<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;"> </span>
|
|
|
|
|
{{ differ.title }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Begin list of differences -->
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<td ng-show="isDynamic">Rebaseline?</td>
|
2013-10-16 15:00:11 +00:00
|
|
|
<td>Name</td>
|
2013-08-07 18:06:39 +00:00
|
|
|
<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>
|
2013-10-16 15:00:11 +00:00
|
|
|
<td class="common-name">{{ record.commonName }}</td>
|
2013-08-07 18:06:39 +00:00
|
|
|
<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>
|
2013-07-09 21:08:28 +00:00
|
|
|
</div>
|
2013-07-12 13:39:53 +00:00
|
|
|
</script>
|
|
|
|
|
<!-- Whatever template is used is rendered in the following div -->
|
|
|
|
|
<div ng-view></div>
|
2013-07-09 21:08:28 +00:00
|
|
|
</body>
|
2013-07-22 17:05:24 +00:00
|
|
|
</html>
|
