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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 22580004: add ui for mutli-rebaselining (Closed) Base URL: https://skia.googlecode.com/svn/trunk
Patch Set: better commit rebaselines comment 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 <div ng-class="statusClass">
19 <div style="margin:8px"> 19 <!-- The commit button -->
20 Show me the worst by metric: 20 <div ng-show="isDynamic" class="commit">
21 <button ng-repeat="differ in differs" ng-click="setSortIndex($index)"> 21 <button ng-click="commitRebaselines()">Commit</button>
22 <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</s pan> 22 </div>
23 {{ differ.title }} 23 <!-- Give a choice of how to order the differs -->
24 </button> 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>
36 <td>Expected Image</td>
37 <td>Actual Image</td>
38 <td>Results</td>
39 </tr>
40 </thead>
41 <tbody>
42 <!--
43 Loops through every record and crates a row for it. This sorts bas ed on the whichever
44 metric the user chose, and places a limit on the max number of rec ords to show.
45 -->
46 <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:5 00"
47 ng-class="{selected: record.isRebaselined}">
48 <td ng-show="isDynamic">
49 <input type="checkbox"
50 ng-model="record.isRebaselined"
51 ng-click="selectedRebaseline($index, $event)"
52 ng-class="{lastselected: lastSelectedIndex == $index}" />
53 </td>
54 <td>
55 <swap-img left-src="{{ record.baselinePath }}"
56 right-src="{{ record.testPath }}"
57 side="left"
58 class="gm-image left-image" /></td>
59 <td>
60 <swap-img left-src="{{ record.baselinePath }}"
61 right-src="{{ record.testPath }}"
62 side="right"
63 class="gm-image right-image" /></td>
64 <td>
65 <div ng-repeat="diff in record.diffs"
66 ng-mouseover="highlight(diff.differName)"
67 class="result result-{{$index}}">
68 <span class="result-button">{{ diff.result }}</span>
69 </div>
70 </td>
71 </tr>
72 </tbody>
73 </table>
25 </div> 74 </div>
26 <!-- Begin list of differences -->
27 <table>
28 <thead>
29 <tr>
30 <td>Expected Image</td>
31 <td>Actual Image</td>
32 <td>Results</td>
33 </tr>
34 </thead>
35 <tbody>
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 recor ds to show.
39 -->
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>
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>
62 </script> 75 </script>
63 <!-- Whatever template is used is rendered in the following div --> 76 <!-- Whatever template is used is rendered in the following div -->
64 <div ng-view></div> 77 <div ng-view></div>
65 </body> 78 </body>
66 </html> 79 </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