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

Side by Side 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, 10 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 unified diff | 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')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html>	1 <html ng-app="diff_viewer">

2 <head>	2 <head>

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

4 <script type="text/javascript" src="https://storage.cloud.google.com/chromiu m-skia-gm/telemetry/hosted-files/jquery-1.7.1.min.js"></script>	4 <script type="text/javascript" src="https://storage.cloud.google.com/chromiu m-skia-gm/telemetry/hosted-files/jquery-1.7.1.min.js"></script>

5 <script type="text/javascript" src="https://storage.cloud.google.com/chromiu m-skia-gm/telemetry/hosted-files/togglecols.js"></script>	5 <script type="text/javascript" src="https://storage.cloud.google.com/chromiu m-skia-gm/telemetry/hosted-files/togglecols.js"></script>

	6 <script type="text/javascript" src="https://storage.cloud.google.com/chromiu m-skia-gm/telemetry/hosted-files/angular.min.js"></script>

	7 <script type="text/javascript" src="https://storage.cloud.google.com/chromiu m-skia-gm/telemetry/hosted-files/diff_viewer.js"></script>

6 </head>	8 </head>

7	9

8 <body onload="resetToggleArrows([0, 3, 4])">	10 <body onload="sortRows(0, false, [0, 2, 3, 4])">

9 <h2>Image comparision failures for {{ slave_info.slave_name }}</h2>	11 <h2>Image comparision failures for {{ slave_info.slave_name }}</h2>

10 <a href='{{ absolute_url }}index.html'>Back</a>	12 <a href='{{ absolute_url }}index.html'>Back</a>

11 <br/><br/>	13 <br/><br/>

12 Can download this slave's SKPs with:<br/>	14 Can download this slave's SKPs with:<br/>

13     <i>gsutil cp {{ slave_info.skps_location }}/* /tmp/s kps/</i><br/><br/>	15     <i>gsutil cp {{ slave_info.skps_location }}/* /tmp/s kps/</i><br/><br/>

14 Can download nopatch images with:<br/>	16 Can download nopatch images with:<br/>

15     <i>gsutil cp {{ slave_info.files_location_nopatch }} /* /tmp/nopatch-imgs/</i><br/><br/>	17     <i>gsutil cp {{ slave_info.files_location_nopatch }} /* /tmp/nopatch-imgs/</i><br/><br/>

16 Can download withpatch images with:<br/>	18 Can download withpatch images with:<br/>

17     <i>gsutil cp {{ slave_info.files_location_withpatch }}/* /tmp/withpath-imgs/</i><br/><br/>	19     <i>gsutil cp {{ slave_info.files_location_withpatch }}/* /tmp/withpath-imgs/</i><br/><br/>

18	20

19 Click on the linked column headers to sort rows.<br/><br/><br/>	21 Click on the linked column headers to sort rows.<br/>

	22 Click on images in the 'Difference per pixel' column to magnify the other th ree images.<br/><br/><br/>

20	23

21 <table border="1" cellpadding="5" id="slave_results">	24 <table border="1" cellpadding="5" id="slave_results">

22 <thead>	25 <thead>

23 <tr bgcolor="#CCCCFF">	26 <tr bgcolor="#CCCCFF">

24 <th><a href="#" onclick="sortRows(0, false, [0, 3, 4]); return false;">F ailed Files</a><img src="" id="toggle-arrows-0"></th>	27 <th><a href="#" onclick="sortRows(0, false, [0, 2, 3, 4]); return false; ">Failed Files</a><img src="" id="toggle-arrows-0"></th>

25 <th>NoPatch Image</th>	28 <th>NoPatch Image</th>

26 <th>WithPatch Image</th>	29 <th><a href="#" onclick="sortRows(2, false, [0, 2, 3, 4]); return false; ">WithPatch Image</a><img src="" id="toggle-arrows-2"></th>

27 <th><a href="#" onclick="sortRows(3, true, [0, 3, 4]); return false;">Di ffering pixels in white</a><img src="" id="toggle-arrows-3"></th>	30 <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>

28 <th><a href="#" onclick="sortRows(4, true, [0, 3, 4]); return false;">Di fference per pixel</a><img src="" id="toggle-arrows-4"></th>	31 <th><a href="#" onclick="sortRows(4, true, [0, 2, 3, 4]); return false;" >Difference per pixel</a><img src="" id="toggle-arrows-4"></th>

29 </tr>	32 </tr>

30 </thead>	33 </thead>

31 <tbody>	34 <tbody>

32 {% for file_info in slave_info.failed_files %}	35 {% for file_info in slave_info.failed_files %}

33 <tr>	36 <tr ng-controller="ImageController">

34 <td align="center">	37 <td align="center">

35 <a name='{{ slave_info.slave_name }}-{{ file_info.file_name }}' id=' compare_value'>{{ file_info.file_name }}</a><br/>	38 <a name='{{ slave_info.slave_name }}-{{ file_info.file_name }}' id=' compare_value'>{{ file_info.file_name }}</a><br/>

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

37 </td>	40 </td>

38 <td>	41 <td>

39 <a href='{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}'><img src="{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}" a lt="nopatch/{{ file_info.file_name }}" width="200" height="200"></a>	42 <a href='{{ gs_http_files_location_nopatch }}/{{ file_info.file_name }}' target="_blank">View Image</a>

40 <br/><br/>	43 <br/>

	44 <img-compare type="baseline"

	45 name="baseline"

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

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

41 </td>	48 </td>

42 <td>	49 <td>

43 <a href='{{ gs_http_files_location_withpatch }}/{{ file_info.file_na me }}'><img src="{{ gs_http_files_location_withpatch }}/{{ file_info.file_name } }" alt="withpatch/{{ file_info.file_name }}" width="200" height="200"></a>	50 <a id='compare_value'>{{ file_info.perceptual_diff }}</a>% (perceptu al diff)

44 <br/><br/>	51 <a href='{{ gs_http_files_location_withpatch }}/{{ file_info.file_na me }}' target="_blank">View Image</a>

	52 <br/>

	53 <img-compare type="test"

	54 name="test"

	55 src="{{ gs_http_files_location_withpatch }}/{{ file_inf o.file_name }}"

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

45 </td>	57 </td>

46 <td>	58 <td>

47 <a href='{{ gs_http_files_location_whitediffs }}/{{ file_info.diff_f ile_name }}'><img src="{{ gs_http_files_location_whitediffs }}/{{ file_info.diff _file_name }}" alt="whitediffs/{{ file_info.diff_file_name }}" width="200" heigh t="200"></a>	59 <a id='compare_value'>{{ file_info.percent_pixels_differing }}</a>% ({{ file_info.num_pixels_differing }})

	60 <a href='{{ gs_http_files_location_whitediffs }}/{{ file_info.diff_f ile_name }}' target="_blank">View Image</a>

48 <br/>	61 <br/>

49 <a id='compare_value'>{{ file_info.percent_pixels_differing }}</a>% ({{ file_info.num_pixels_differing }})	62 <img-compare type="differingPixelsInWhite"

	63 class="left-image"

	64 src="{{ gs_http_files_location_whitediffs }}/{{ file_in fo.file_name }}" />

50 </td>	65 </td>

51 <td>	66 <td>

52 <a href='{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_n ame }}'><img src="{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_name }}" alt="diffs/{{ file_info.diff_file_name }}" width="200" height="200"></a>	67 <a id='compare_value'>{{ file_info.weighted_diff_measure }}</a>% {{ file_info.max_diff_per_channel }}

	68 <a href='{{ gs_http_files_location_diffs }}/{{ file_info.diff_file_n ame }}' target="_blank">View Image</a>

53 <br/>	69 <br/>

54 <a id='compare_value'>{{ file_info.weighted_diff_measure }}</a>% {{ file_info.max_diff_per_channel }}	70 <img-compare type="differencePerPixel"

	71 class="left-image"

	72 src="{{ gs_http_files_location_diffs }}/{{ file_info.di ff_file_name }}"

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

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

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

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

55 </td>	77 </td>

56 </tr>	78 </tr>

57 {% endfor %}	79 {% endfor %}

58 </tbody>	80 </tbody>

59 </table>	81 </table>

60 </body>	82 </body>

61 </html>	83 </html>

OLD	NEW