| <!doctype html> |
| <!-- This whole page uses the module --> |
| <html ng-app="diff_viewer"> |
| <head> |
| <script type="text/javascript" |
| src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> |
| <script type="text/javascript" src="skpdiff_output.json"></script> |
| <script type="text/javascript" src="diff_viewer.js"></script> |
| <link rel="stylesheet" type="text/css" href="viewer_style.css"> |
| <title>SkPDiff</title> |
| </head> |
| <body> |
| <!-- |
| All templates are being included with the main page to avoid using AJAX, which would force |
| us to use a webserver. |
| --> |
| <script type="text/ng-template" id="/diff_list.html"> |
| <div ng-class="statusClass"> |
| <!-- The commit button --> |
| <div ng-show="isDynamic" class="commit"> |
| <button ng-click="commitRebaselines()">Commit</button> |
| </div> |
| <!-- Give a choice of how to order the differs --> |
| <div style="margin:8px"> |
| Show me the worst by metric: |
| <button ng-repeat="differ in differs" ng-click="setSortIndex($index)"> |
| <span class="result-{{ $index }}" style="padding-left:12px;"> </span> |
| {{ differ.title }} |
| </button> |
| </div> |
| <!-- Begin list of differences --> |
| <table> |
| <thead> |
| <tr> |
| <td ng-show="isDynamic">Rebaseline?</td> |
| <td>Name</td> |
| <td>Expected Image</td> |
| <td>Actual Image</td> |
| <td>Results</td> |
| </tr> |
| </thead> |
| <tbody> |
| <!-- |
| Loops through every record and crates a row for it. This sorts based on the whichever |
| metric the user chose, and places a limit on the max number of records to show. |
| --> |
| <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500" |
| ng-class="{selected: record.isRebaselined}"> |
| <td ng-show="isDynamic"> |
| <input type="checkbox" |
| ng-model="record.isRebaselined" |
| ng-click="selectedRebaseline($index, $event)" |
| ng-class="{lastselected: lastSelectedIndex == $index}" /> |
| </td> |
| <td class="common-name">{{ record.commonName }}</td> |
| <td> |
| <swap-img left-src="{{ record.baselinePath }}" |
| right-src="{{ record.testPath }}" |
| side="left" |
| class="gm-image left-image" /></td> |
| <td> |
| <swap-img left-src="{{ record.baselinePath }}" |
| right-src="{{ record.testPath }}" |
| side="right" |
| class="gm-image right-image" /></td> |
| <td> |
| <div ng-repeat="diff in record.diffs" |
| ng-mouseover="highlight(diff.differName)" |
| class="result result-{{$index}}"> |
| <span class="result-button">{{ diff.result }}</span> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </script> |
| <!-- Whatever template is used is rendered in the following div --> |
| <div ng-view></div> |
| </body> |
| </html> |