Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(95)

Side by Side Diff: tools/skpdiff/viewer.html

Issue 20654006: download and rebaseline images using server (Closed) Base URL: https://skia.googlecode.com/svn/trunk
Patch Set: fix other missing filepath Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « tools/skpdiff/skpdiff_server.py ('k') | tools/skpdiff/viewer_style.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- This whole page uses the module --> 2 <!-- This whole page uses the module -->
3 <html ng-app="diff_viewer"> 3 <html ng-app="diff_viewer">
4 <head> 4 <head>
5 <script type="text/javascript" 5 <script type="text/javascript"
6 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.m in.js"></script> 6 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.m in.js"></script>
7 <script type="text/javascript" src="skpdiff_output.json"></script> 7 <script type="text/javascript" src="skpdiff_output.json"></script>
8 <script type="text/javascript" src="diff_viewer.js"></script> 8 <script type="text/javascript" src="diff_viewer.js"></script>
9 <link rel="stylesheet" type="text/css" href="viewer_style.css"> 9 <link rel="stylesheet" type="text/css" href="viewer_style.css">
10 <title>SkPDiff</title> 10 <title>SkPDiff</title>
11 </head> 11 </head>
12 <body> 12 <body>
13 <!-- 13 <!--
14 All templates are being included with the main page to avoid using AJAX, w hich would force 14 All templates are being included with the main page to avoid using AJAX, w hich would force
15 us to use a webserver. 15 us to use a webserver.
16 --> 16 -->
17 <script type="text/ng-template" id="/diff_list.html"> 17 <script type="text/ng-template" id="/diff_list.html">
18 <!-- Give a choice of how to order the differs --> 18 <!-- Give a choice of how to order the differs -->
19 <div style="margin:8px"> 19 <div style="margin:8px">
20 Show me the worst by metric: 20 Show me the worst by metric:
21 <button ng-repeat="differ in differs" ng-click="setSortIndex($index)"> 21 <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
22 <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</s pan> 22 <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</s pan>
23 {{ differ.title }} 23 {{ differ.title }}
24 </button> 24 </button>
25 </div> 25 </div>
26 <!-- Begin list of differences --> 26 <!-- Begin list of differences -->
27 <table> 27 <table>
28 <thead> 28 <thead>
29 <tr> 29 <tr>
30 <td>Baseline Image</td> 30 <td>Expected Image</td>
31 <td>Actual Image</td> 31 <td>Actual Image</td>
32 <td>Results</td> 32 <td>Results</td>
33 </tr> 33 </tr>
34 </thead> 34 </thead>
35 <tbody> 35 <tbody>
36 <!-- 36 <!--
37 Loops through every record and crates a row for it. This sorts based on the whichever 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 recor ds to show. 38 metric the user chose, and places a limit on the max number of recor ds to show.
39 --> 39 -->
40 <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500 "> 40 <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500 "
41 <td><swap-img left-src="{{ record.baselinePath }}" 41 class="{{ record.cssClasses }}">
42 right-src="{{ record.testPath }}" 42 <td ng-click="setHashOf(record.baselinePath, record)">
43 side="left" 43 <swap-img left-src="{{ record.baselinePath }}"
44 class="gm-image left-image" /></td> 44 right-src="{{ record.testPath }}"
45 <td><swap-img left-src="{{ record.baselinePath }}" 45 side="left"
46 right-src="{{ record.testPath }}" 46 class="gm-image left-image" /></td>
47 side="right" 47 <td ng-click="setHashOf(record.testPath, record)">
48 class="gm-image right-image" /></td> 48 <swap-img left-src="{{ record.baselinePath }}"
49 right-src="{{ record.testPath }}"
50 side="right"
51 class="gm-image right-image" /></td>
49 <td> 52 <td>
50 <div ng-repeat="diff in record.diffs" 53 <div ng-repeat="diff in record.diffs"
51 ng-mouseover="highlight(diff.differName)" 54 ng-mouseover="highlight(diff.differName)"
52 class="result result-{{$index}}"> 55 class="result result-{{$index}}">
53 <span class="result-button">{{ diff.result }}</span> 56 <span class="result-button">{{ diff.result }}</span>
54 </div> 57 </div>
55 </td> 58 </td>
56 </tr> 59 </tr>
57 </tbody> 60 </tbody>
58 </table> 61 </table>
59 </script> 62 </script>
60 <!-- Whatever template is used is rendered in the following div --> 63 <!-- Whatever template is used is rendered in the following div -->
61 <div ng-view></div> 64 <div ng-view></div>
62 </body> 65 </body>
63 </html> 66 </html>
OLDNEW
« no previous file with comments | « tools/skpdiff/skpdiff_server.py ('k') | tools/skpdiff/viewer_style.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698