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

Unified Diff: experimental/skpdiff/viewer.html

Issue 18925004: modularize the display of diffs for skpdiff (Closed) Base URL: https://skia.googlecode.com/svn/trunk
Patch Set: swapimg -> swapImg Created 7 years, 5 months 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 | « experimental/skpdiff/diff_viewer.js ('k') | experimental/skpdiff/viewer_style.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: experimental/skpdiff/viewer.html
diff --git a/experimental/skpdiff/viewer.html b/experimental/skpdiff/viewer.html
index b0ac4f2e580f0f14365254271f238909616303d6..0949dab5655ee9a8b7781400ad9bd0ef7999bd9f 100644
--- a/experimental/skpdiff/viewer.html
+++ b/experimental/skpdiff/viewer.html
@@ -1,5 +1,6 @@
<!doctype html>
-<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>
@@ -9,7 +10,12 @@
<title>SkPDiff</title>
</head>
<body>
- <div ng-app ng-controller="DiffViewController">
+ <!--
+ 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">
+ <!-- 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)">
@@ -17,6 +23,7 @@
{{ differ.title }}
</button>
</div>
+ <!-- Begin list of differences -->
<table>
<thead>
<tr>
@@ -26,9 +33,19 @@
</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">
- <td><img src="{{ record.baselinePath }}" class="gm-image baseline-image" /></td>
- <td><img src="{{ record.testPath }}" class="gm-image test-image" /></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)"
@@ -39,6 +56,8 @@
</tr>
</tbody>
</table>
- </div>
+ </script>
+ <!-- Whatever template is used is rendered in the following div -->
+ <div ng-view></div>
</body>
</html>
« no previous file with comments | « experimental/skpdiff/diff_viewer.js ('k') | experimental/skpdiff/viewer_style.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698