Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / 627f66283b16dab30b31b381e35795104b70a56b / . / tools / skpdiff / viewer.html
blob: 1d3793bbf5f6cfd6b347d5af674f3322ace36d72 [file] [log] [blame]
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]1<!doctype html>
zachr@google.com1bc995e2013-07-12 13:39:53 +0000[diff] [blame]2<!-- This whole page uses the module -->
3<html ng-app="diff_viewer">
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]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>
zachr@google.com1bc995e2013-07-12 13:39:53 +0000[diff] [blame]13 <!--
14 All templates are being included with the main page to avoid using AJAX, which would force
15 us to use a webserver.
16 -->
17 <script type="text/ng-template" id="/diff_list.html">
zachr@google.com74c5ab12013-08-07 18:06:39 +0000[diff] [blame]18 <div ng-class="statusClass">
19 <!-- The commit button -->
20 <div ng-show="isDynamic" class="commit">
21 <button ng-click="commitRebaselines()">Commit</button>
22 </div>
23 <!-- Give a choice of how to order the differs -->
24 <div style="margin:8px">
25 Show me the worst by metric:
26 <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
27 <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</span>
28 {{ differ.title }}
29 </button>
30 </div>
31 <!-- Begin list of differences -->
32 <table>
33 <thead>
34 <tr>
35 <td ng-show="isDynamic">Rebaseline?</td>
djsollen@google.com1e391b52013-10-16 15:00:11 +0000[diff] [blame]36 <td>Name</td>
zachr@google.com74c5ab12013-08-07 18:06:39 +0000[diff] [blame]37 <td>Expected Image</td>
38 <td>Actual Image</td>
39 <td>Results</td>
40 </tr>
41 </thead>
42 <tbody>
43 <!--
44 Loops through every record and crates a row for it. This sorts based on the whichever
45 metric the user chose, and places a limit on the max number of records to show.
46 -->
47 <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
48 ng-class="{selected: record.isRebaselined}">
49 <td ng-show="isDynamic">
50 <input type="checkbox"
51 ng-model="record.isRebaselined"
52 ng-click="selectedRebaseline($index, $event)"
53 ng-class="{lastselected: lastSelectedIndex == $index}" />
54 </td>
djsollen@google.com1e391b52013-10-16 15:00:11 +0000[diff] [blame]55 <td class="common-name">{{ record.commonName }}</td>
zachr@google.com74c5ab12013-08-07 18:06:39 +0000[diff] [blame]56 <td>
57 <swap-img left-src="{{ record.baselinePath }}"
58 right-src="{{ record.testPath }}"
59 side="left"
60 class="gm-image left-image" /></td>
61 <td>
62 <swap-img left-src="{{ record.baselinePath }}"
63 right-src="{{ record.testPath }}"
64 side="right"
65 class="gm-image right-image" /></td>
66 <td>
67 <div ng-repeat="diff in record.diffs"
68 ng-mouseover="highlight(diff.differName)"
69 class="result result-{{$index}}">
70 <span class="result-button">{{ diff.result }}</span>
71 </div>
72 </td>
73 </tr>
74 </tbody>
75 </table>
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]76 </div>
zachr@google.com1bc995e2013-07-12 13:39:53 +0000[diff] [blame]77 </script>
78 <!-- Whatever template is used is rendered in the following div -->
79 <div ng-view></div>
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]80 </body>
zachr@google.com35f02fb2013-07-22 17:05:24 +0000[diff] [blame]81</html>