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

Unified Diff: compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html

Issue 148093012: Add magnifying ability, perceptual diff and improve layout of Skia Tryserver HTML output (Closed) Base URL: https://skia.googlesource.com/buildbot.git@master
Patch Set: Rebase Created 6 years, 11 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
Index: compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html
diff --git a/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html b/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html
index 3062af2125ad5a85b906ed52da47f9aaa13ed272..914b5b1fde343fab6af54528b32c391ac772e0b8 100644
--- a/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html
+++ b/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html
@@ -1,11 +1,13 @@
-<html>
+<html ng-app="diff_viewer">
<head>
<title>Image comparision failures for slave1</title>
<script type="text/javascript" src="https://storage.cloud.google.com/chromium-skia-gm/telemetry/hosted-files/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://storage.cloud.google.com/chromium-skia-gm/telemetry/hosted-files/togglecols.js"></script>
+ <script type="text/javascript" src="https://storage.cloud.google.com/chromium-skia-gm/telemetry/hosted-files/angular.min.js"></script>
+ <script type="text/javascript" src="https://storage.cloud.google.com/chromium-skia-gm/telemetry/hosted-files/diff_viewer.js"></script>
</head>
- <body onload="resetToggleArrows([0, 3, 4])">
+ <body onload="sortRows(0, false, [0, 2, 3, 4])">
<h2>Image comparision failures for slave1</h2>
<a href='http://dummy-link.foobar/index.html'>Back</a>
<br/><br/>
@@ -16,67 +18,106 @@
Can download withpatch images with:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;<i>gsutil cp gs://dummy-bucket/slave1/withpatch/* /tmp/withpath-imgs/</i><br/><br/>
- Click on the linked column headers to sort rows.<br/><br/><br/>
+ Click on the linked column headers to sort rows.<br/>
+ Click on images in the 'Difference per pixel' column to magnify the other three images.<br/><br/><br/>
<table border="1" cellpadding="5" id="slave_results">
<thead>
<tr bgcolor="#CCCCFF">
- <th><a href="#" onclick="sortRows(0, false, [0, 3, 4]); return false;">Failed Files</a><img src="" id="toggle-arrows-0"></th>
+ <th><a href="#" onclick="sortRows(0, false, [0, 2, 3, 4]); return false;">Failed Files</a><img src="" id="toggle-arrows-0"></th>
<th>NoPatch Image</th>
- <th>WithPatch Image</th>
- <th><a href="#" onclick="sortRows(3, true, [0, 3, 4]); return false;">Differing pixels in white</a><img src="" id="toggle-arrows-3"></th>
- <th><a href="#" onclick="sortRows(4, true, [0, 3, 4]); return false;">Difference per pixel</a><img src="" id="toggle-arrows-4"></th>
+ <th><a href="#" onclick="sortRows(2, false, [0, 2, 3, 4]); return false;">WithPatch Image</a><img src="" id="toggle-arrows-2"></th>
+ <th><a href="#" onclick="sortRows(3, true, [0, 2, 3, 4]); return false;">Differing pixels in white</a><img src="" id="toggle-arrows-3"></th>
+ <th><a href="#" onclick="sortRows(4, true, [0, 2, 3, 4]); return false;">Difference per pixel</a><img src="" id="toggle-arrows-4"></th>
</tr>
</thead>
<tbody>
- <tr>
+ <tr ng-controller="ImageController">
<td align="center">
<a name='slave1-fileslave1_1.png' id='compare_value'>fileslave1_1.png</a><br/>
<a href='http://storage.cloud.google.com/dummy-bucket/skps/slave1/fileslave1_.skp'>Download SKP</a>
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_1.png" alt="nopatch/fileslave1_1.png" width="200" height="200"></a>
- <br/><br/>
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="baseline"
+ name="baseline"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_1.png"
+ class="gm-image left-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_1.png" alt="withpatch/fileslave1_1.png" width="200" height="200"></a>
- <br/><br/>
+ <a id='compare_value'>115</a>% (perceptual diff)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="test"
+ name="test"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_1.png"
+ class="gm-image right-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_1-vs-fileslave1_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_1-vs-fileslave1_1.png" alt="whitediffs/fileslave1_1-vs-fileslave1_1.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>112</a>% (111)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_1-vs-fileslave1_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differingPixelsInWhite"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_1.png" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_1-vs-fileslave1_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_1-vs-fileslave1_1.png" alt="diffs/fileslave1_1-vs-fileslave1_1.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>113</a>% 114
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_1-vs-fileslave1_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differencePerPixel"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_1-vs-fileslave1_1.png"
+ ng-mousedown="MagnifyDraw($event, true)"
+ ng-mousemove="MagnifyDraw($event, false)"
+ ng-mouseup="MagnifyEnd($event)"
+ ng-mouseleave="MagnifyEnd($event)" />
</td>
</tr>
- <tr>
+ <tr ng-controller="ImageController">
<td align="center">
<a name='slave1-fileslave1_2.png' id='compare_value'>fileslave1_2.png</a><br/>
<a href='http://storage.cloud.google.com/dummy-bucket/skps/slave1/fileslave1_.skp'>Download SKP</a>
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_2.png" alt="nopatch/fileslave1_2.png" width="200" height="200"></a>
- <br/><br/>
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="baseline"
+ name="baseline"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/nopatch/fileslave1_2.png"
+ class="gm-image left-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_2.png" alt="withpatch/fileslave1_2.png" width="200" height="200"></a>
- <br/><br/>
+ <a id='compare_value'>125</a>% (perceptual diff)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="test"
+ name="test"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/withpatch/fileslave1_2.png"
+ class="gm-image right-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_2-vs-fileslave1_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_2-vs-fileslave1_2.png" alt="whitediffs/fileslave1_2-vs-fileslave1_2.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>122</a>% (121)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_2-vs-fileslave1_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differingPixelsInWhite"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/whitediffs/fileslave1_2.png" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_2-vs-fileslave1_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_2-vs-fileslave1_2.png" alt="diffs/fileslave1_2-vs-fileslave1_2.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>123</a>% 124
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_2-vs-fileslave1_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differencePerPixel"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave1/diffs/fileslave1_2-vs-fileslave1_2.png"
+ ng-mousedown="MagnifyDraw($event, true)"
+ ng-mousemove="MagnifyDraw($event, false)"
+ ng-mouseup="MagnifyEnd($event)"
+ ng-mouseleave="MagnifyEnd($event)" />
</td>
</tr>

Powered by Google App Engine
This is Rietveld 408576698