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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: tools/skpdiff/viewer.html

Issue 29103005: update skpdiff visualization (image magnification with alpha mask) (Closed) Base URL: https://skia.googlecode.com/svn/trunk
Patch Set: Created 7 years, 1 month 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « tools/skpdiff/skpdiff_main.cpp ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tools/skpdiff/viewer.html
diff --git a/tools/skpdiff/viewer.html b/tools/skpdiff/viewer.html
index 1d3793bbf5f6cfd6b347d5af674f3322ace36d72..6ae65f756c54bbaff4a153d868b64f07d1abfb6b 100644
--- a/tools/skpdiff/viewer.html
+++ b/tools/skpdiff/viewer.html
@@ -9,73 +9,73 @@
<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;">&nbsp;</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 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>
« no previous file with comments | « tools/skpdiff/skpdiff_main.cpp ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698