| zachr@google.com | 9432c0c | 2013-07-09 21:08:28 +0000 | [diff] [blame] | 1 | <!doctype html> |
| zachr@google.com | 1bc995e | 2013-07-12 13:39:53 +0000 | [diff] [blame] | 2 | <!-- This whole page uses the module --> |
| 3 | <html ng-app="diff_viewer"> |
| zachr@google.com | 9432c0c | 2013-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.com | 1bc995e | 2013-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.com | 74c5ab1 | 2013-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;"> </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 based on the whichever |
| 44 | metric the user chose, and places a limit on the max number of records to show. |
| 45 | --> |
| 46 | <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500" |
| 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> |
| zachr@google.com | 9432c0c | 2013-07-09 21:08:28 +0000 | [diff] [blame] | 74 | </div> |
| zachr@google.com | 1bc995e | 2013-07-12 13:39:53 +0000 | [diff] [blame] | 75 | </script> |
| 76 | <!-- Whatever template is used is rendered in the following div --> |
| 77 | <div ng-view></div> |
| zachr@google.com | 9432c0c | 2013-07-09 21:08:28 +0000 | [diff] [blame] | 78 | </body> |
| zachr@google.com | 35f02fb | 2013-07-22 17:05:24 +0000 | [diff] [blame] | 79 | </html> |