compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.html - Issue 148093012: Add magnifying ability, perceptual diff and improve layout of Skia Tryserver HTML output

Unified Diff: compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.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/static-files/diff_viewer.js ('K') | « compute_engine_scripts/telemetry/static-files/diff_viewer.js ('k') | compute_engine_scripts/telemetry/telemetry_master_scripts/json_summary_combiner.py » ('j') | compute_engine_scripts/telemetry/telemetry_master_scripts/json_summary_combiner.py » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.html

diff --git a/compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.html b/compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.html

index 2440d1517ff8b3c3087a58cda6bbc6267e2bc60e..c3ff185340f5871091fc4a99b0719bbf57042bbf 100644

--- a/compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.html

+++ b/compute_engine_scripts/telemetry/telemetry_master_scripts/html-templates/failures_per_slave.html

@@ -1,11 +1,13 @@

-<html>

+<html ng-app="diff_viewer">

<head>

<title>Image comparision failures for {{ slave_info.slave_name }}</title>

+ <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 {{ slave_info.slave_name }}</h2>

@@ -16,42 +18,62 @@

Can download withpatch images with:<br/>

    <i>gsutil cp {{ slave_info.files_location_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/>

<thead>

- <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>

{% for file_info in slave_info.failed_files %}

- <tr>

+ <tr ng-controller="ImageController">

<a href='{{ file_info.skp_location }}'>Download SKP</a>

</td>

<td>

- <a href='{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}'><img src="{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}" alt="nopatch/{{ file_info.file_name }}" width="200" height="200"></a>

- <br/><br/>

+ <a href='{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}' target="_blank">View Image</a>

+ <br/>

+ <img-compare type="baseline"

+ name="baseline"

+ src="{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}"

+ class="gm-image left-image" />

</td>

<td>

- <a href='{{ gs_http_files_location_withpatch }}/{{ file_info.file_name }}'><img src="{{ gs_http_files_location_withpatch }}/{{ file_info.file_name }}" alt="withpatch/{{ file_info.file_name }}" width="200" height="200"></a>

- <br/><br/>

+ <a id='compare_value'>{{ file_info.perceptual_diff }}</a>% (perceptual diff)

+ <a href='{{ gs_http_files_location_withpatch }}/{{ file_info.file_name }}' target="_blank">View Image</a>

+ <br/>

+ <img-compare type="test"

+ name="test"

+ src="{{ gs_http_files_location_withpatch }}/{{ file_info.file_name }}"

+ class="gm-image right-image" />

</td>

<td>

- <a href='{{ gs_http_files_location_whitediffs }}/{{ file_info.diff_file_name }}'><img src="{{ gs_http_files_location_whitediffs }}/{{ file_info.diff_file_name }}" alt="whitediffs/{{ file_info.diff_file_name }}" width="200" height="200"></a>

- <br/>

<a id='compare_value'>{{ file_info.percent_pixels_differing }}</a>% ({{ file_info.num_pixels_differing }})

+ <a href='{{ gs_http_files_location_whitediffs }}/{{ file_info.diff_file_name }}' target="_blank">View Image</a>

+ <br/>

+ <img-compare type="differingPixelsInWhite"

+ class="left-image"

+ src="{{ gs_http_files_location_whitediffs }}/{{ file_info.file_name }}" />

</td>

<td>

- <a href='{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_name }}'><img src="{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_name }}" alt="diffs/{{ file_info.diff_file_name }}" width="200" height="200"></a>

- <br/>

<a id='compare_value'>{{ file_info.weighted_diff_measure }}</a>% {{ file_info.max_diff_per_channel }}

+ <a href='{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_name }}' target="_blank">View Image</a>

+ <br/>

+ <img-compare type="differencePerPixel"

+ class="left-image"

+ src="{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_name }}"

+ ng-mousedown="MagnifyDraw($event, true)"

+ ng-mousemove="MagnifyDraw($event, false)"

+ ng-mouseup="MagnifyEnd($event)"

+ ng-mouseleave="MagnifyEnd($event)" />

</td>

</tr>

{% endfor %}