Home | History | Annotate | Download | only in skpdiff 
      1 <!doctype html>
      2 <!-- This whole page uses the module -->
      3 <html ng-app="diff_viewer">
      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>
     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       <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;">&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 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>
     74       </div>
     75     </script>
     76     <!-- Whatever template is used is rendered in the following div -->
     77     <div ng-view></div>
     78   </body>
     79 </html>
     80