tools/skpdiff/viewer.html

<!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 ng-controller="DiffListController" 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;">&nbsp;</span>
        {{ differ.title }}
      </button>
    </div>
    <!-- Begin list of differences -->
    <table>
      <thead>
        <tr>
          <td ng-show="isDynamic">Rebaseline?</td>
          <td>Name</td>
          <td>Difference Mask</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}" 
            ng-controller="ImageController">
          <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>
            <img-compare type="alphaMask"
                         class="left-image"
                         ng-mousedown="MagnifyDraw($event, true)"
                         ng-mousemove="MagnifyDraw($event, false)"
                         ng-mouseup="MagnifyEnd($event)"
                         ng-mouseleave="MagnifyEnd($event)"/>
          </td>
          <td>
            <img-compare type="baseline"
                         name="{{record.commonName}}"
                         class="gm-image left-image" />
          </td>
          <td>
            <img-compare type="test"
                         name="{{record.commonName}}"
                         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>
  </body>
</html>