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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave3.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
« compute_engine_scripts/telemetry/telemetry_master_scripts/json_summary_combiner.py ('K') | « compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave2.html ('k') | compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html » ('j') | compute_engine_scripts/telemetry/telemetry_slave_scripts/write_json_summary.py » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave3.html
diff --git a/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave3.html b/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave3.html
index 3df7faa63ad10b8cdf9279e5c738a97ce43864f9..f8267e1d0811d8376e9096bebb40807b5ef90bd6 100644
--- a/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave3.html
+++ b/compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave3.html
@@ -1,11 +1,13 @@
-<html>
+<html ng-app="diff_viewer">
<head>
<title>Image comparision failures for slave3</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 slave3</h2>
<a href='index.html'>Back</a>
<br/><br/>
@@ -16,117 +18,194 @@
Can download withpatch images with:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;<i>gsutil cp gs://dummy-bucket/slave3/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='slave3-fileslave3_1.png' id='compare_value'>fileslave3_1.png</a><br/>
<a href='http://storage.cloud.google.com/dummy-bucket/skps/slave3/fileslave3_.skp'>Download SKP</a>
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_1.png" alt="nopatch/fileslave3_1.png" width="200" height="200"></a>
- <br/><br/>
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="baseline"
+ name="baseline"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_1.png"
+ class="gm-image left-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_1.png" alt="withpatch/fileslave3_1.png" width="200" height="200"></a>
- <br/><br/>
+ <a id='compare_value'>315</a>% (perceptual diff)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="test"
+ name="test"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_1.png"
+ class="gm-image right-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_1-vs-fileslave3_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_1-vs-fileslave3_1.png" alt="whitediffs/fileslave3_1-vs-fileslave3_1.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>312</a>% (311)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_1-vs-fileslave3_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differingPixelsInWhite"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_1.png" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_1-vs-fileslave3_1.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_1-vs-fileslave3_1.png" alt="diffs/fileslave3_1-vs-fileslave3_1.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>313</a>% 314
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_1-vs-fileslave3_1.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differencePerPixel"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_1-vs-fileslave3_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='slave3-fileslave3_2.png' id='compare_value'>fileslave3_2.png</a><br/>
<a href='http://storage.cloud.google.com/dummy-bucket/skps/slave3/fileslave3_.skp'>Download SKP</a>
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_2.png" alt="nopatch/fileslave3_2.png" width="200" height="200"></a>
- <br/><br/>
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="baseline"
+ name="baseline"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_2.png"
+ class="gm-image left-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_2.png" alt="withpatch/fileslave3_2.png" width="200" height="200"></a>
- <br/><br/>
+ <a id='compare_value'>325</a>% (perceptual diff)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="test"
+ name="test"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_2.png"
+ class="gm-image right-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_2-vs-fileslave3_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_2-vs-fileslave3_2.png" alt="whitediffs/fileslave3_2-vs-fileslave3_2.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>322</a>% (321)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_2-vs-fileslave3_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differingPixelsInWhite"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_2.png" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_2-vs-fileslave3_2.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_2-vs-fileslave3_2.png" alt="diffs/fileslave3_2-vs-fileslave3_2.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>323</a>% 324
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_2-vs-fileslave3_2.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differencePerPixel"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_2-vs-fileslave3_2.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='slave3-fileslave3_3.png' id='compare_value'>fileslave3_3.png</a><br/>
<a href='http://storage.cloud.google.com/dummy-bucket/skps/slave3/fileslave3_.skp'>Download SKP</a>
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_3.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_3.png" alt="nopatch/fileslave3_3.png" width="200" height="200"></a>
- <br/><br/>
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_3.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="baseline"
+ name="baseline"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_3.png"
+ class="gm-image left-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_3.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_3.png" alt="withpatch/fileslave3_3.png" width="200" height="200"></a>
- <br/><br/>
+ <a id='compare_value'>335</a>% (perceptual diff)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_3.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="test"
+ name="test"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_3.png"
+ class="gm-image right-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_3-vs-fileslave3_3.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_3-vs-fileslave3_3.png" alt="whitediffs/fileslave3_3-vs-fileslave3_3.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>332</a>% (331)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_3-vs-fileslave3_3.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differingPixelsInWhite"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_3.png" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_3-vs-fileslave3_3.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_3-vs-fileslave3_3.png" alt="diffs/fileslave3_3-vs-fileslave3_3.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>333</a>% 334
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_3-vs-fileslave3_3.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differencePerPixel"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_3-vs-fileslave3_3.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='slave3-fileslave3_4.png' id='compare_value'>fileslave3_4.png</a><br/>
<a href='http://storage.cloud.google.com/dummy-bucket/skps/slave3/fileslave3_.skp'>Download SKP</a>
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_4.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_4.png" alt="nopatch/fileslave3_4.png" width="200" height="200"></a>
- <br/><br/>
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_4.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="baseline"
+ name="baseline"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/nopatch/fileslave3_4.png"
+ class="gm-image left-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_4.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_4.png" alt="withpatch/fileslave3_4.png" width="200" height="200"></a>
- <br/><br/>
+ <a id='compare_value'>345</a>% (perceptual diff)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_4.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="test"
+ name="test"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/withpatch/fileslave3_4.png"
+ class="gm-image right-image" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_4-vs-fileslave3_4.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_4-vs-fileslave3_4.png" alt="whitediffs/fileslave3_4-vs-fileslave3_4.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>342</a>% (341)
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_4-vs-fileslave3_4.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differingPixelsInWhite"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/whitediffs/fileslave3_4.png" />
</td>
<td>
- <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_4-vs-fileslave3_4.png'><img src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_4-vs-fileslave3_4.png" alt="diffs/fileslave3_4-vs-fileslave3_4.png" width="200" height="200"></a>
- <br/>
<a id='compare_value'>343</a>% 344
+ <a href='http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_4-vs-fileslave3_4.png' target="_blank">View Image</a>
+ <br/>
+ <img-compare type="differencePerPixel"
+ class="left-image"
+ src="http://storage.cloud.google.com/dummy-bucket/slave3/diffs/fileslave3_4-vs-fileslave3_4.png"
+ ng-mousedown="MagnifyDraw($event, true)"
+ ng-mousemove="MagnifyDraw($event, false)"
+ ng-mouseup="MagnifyEnd($event)"
+ ng-mouseleave="MagnifyEnd($event)" />
</td>
</tr>
« compute_engine_scripts/telemetry/telemetry_master_scripts/json_summary_combiner.py ('K') | « compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_no_url/slave2.html ('k') | compute_engine_scripts/telemetry/telemetry_master_scripts/test_data/combiner/html_outputs/differences_with_url/slave1.html » ('j') | compute_engine_scripts/telemetry/telemetry_slave_scripts/write_json_summary.py » ('J')

Powered by Google App Engine
This is Rietveld 408576698