Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / e57c62d039cbd67a4e52776b3e95c5d002b818d2 / . / tools / skpdiff / viewer.html
blob: 46c5871ae1716da1b18e5295a5fccd7aa9275925 [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">
18 <!-- Give a choice of how to order the differs -->
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]19 <div style="margin:8px">
20 Show me the worst by metric:
21 <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
22 <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</span>
23 {{ differ.title }}
24 </button>
25 </div>
zachr@google.com1bc995e2013-07-12 13:39:53 +0000[diff] [blame]26 <!-- Begin list of differences -->
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]27 <table>
28 <thead>
29 <tr>
zachr@google.com6f8e2c52013-08-07 15:43:04 +0000[diff] [blame]30 <td>Expected Image</td>
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]31 <td>Actual Image</td>
32 <td>Results</td>
33 </tr>
34 </thead>
35 <tbody>
zachr@google.com1bc995e2013-07-12 13:39:53 +0000[diff] [blame]36 <!--
37 Loops through every record and crates a row for it. This sorts based on the whichever
38 metric the user chose, and places a limit on the max number of records to show.
39 -->
zachr@google.com6f8e2c52013-08-07 15:43:04 +0000[diff] [blame]40 <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
41 class="{{ record.cssClasses }}">
42 <td ng-click="setHashOf(record.baselinePath, record)">
43 <swap-img left-src="{{ record.baselinePath }}"
44 right-src="{{ record.testPath }}"
45 side="left"
46 class="gm-image left-image" /></td>
47 <td ng-click="setHashOf(record.testPath, record)">
48 <swap-img left-src="{{ record.baselinePath }}"
49 right-src="{{ record.testPath }}"
50 side="right"
51 class="gm-image right-image" /></td>
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]52 <td>
53 <div ng-repeat="diff in record.diffs"
54 ng-mouseover="highlight(diff.differName)"
55 class="result result-{{$index}}">
56 <span class="result-button">{{ diff.result }}</span>
57 </div>
58 </td>
59 </tr>
60 </tbody>
61 </table>
zachr@google.com1bc995e2013-07-12 13:39:53 +0000[diff] [blame]62 </script>
63 <!-- Whatever template is used is rendered in the following div -->
64 <div ng-view></div>
zachr@google.com9432c0c2013-07-09 21:08:28 +0000[diff] [blame]65 </body>
zachr@google.com35f02fb2013-07-22 17:05:24 +0000[diff] [blame]66</html>