OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html ng-app="Loader" ng-controller="Loader.Controller"> | 3 <html ng-app="Loader" ng-controller="Loader.Controller"> |
4 | 4 |
5 <head> | 5 <head> |
6 <title ng-bind="windowTitle"></title> | 6 <title ng-bind="windowTitle"></title> |
7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"
></script> | 7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"
></script> |
8 <script src="loader.js"></script> | 8 <script src="loader.js"></script> |
| 9 <script src="diff_viewer.js"></script> |
9 <link rel="stylesheet" href="view.css"> | 10 <link rel="stylesheet" href="view.css"> |
10 </head> | 11 </head> |
11 | 12 |
12 <body> | 13 <body> |
13 <h2> | 14 <h2> |
14 Instructions, roadmap, etc. are at | 15 Instructions, roadmap, etc. are at |
15 <a href="http://tinyurl.com/SkiaRebaselineServer"> | 16 <a href="http://tinyurl.com/SkiaRebaselineServer"> |
16 http://tinyurl.com/SkiaRebaselineServer | 17 http://tinyurl.com/SkiaRebaselineServer |
17 </a> | 18 </a> |
18 </h2> | 19 </h2> |
(...skipping 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
205 <button ng-click="moveSelectedItemsToTab(otherTab)" | 206 <button ng-click="moveSelectedItemsToTab(otherTab)" |
206 ng-disabled="selectedItems.length == 0" | 207 ng-disabled="selectedItems.length == 0" |
207 ng-hide="otherTab == viewingTab"> | 208 ng-hide="otherTab == viewingTab"> |
208 move {{selectedItems.length}} selected tests to {{otherTab}} tab | 209 move {{selectedItems.length}} selected tests to {{otherTab}} tab |
209 </button> | 210 </button> |
210 </div> | 211 </div> |
211 </td> | 212 </td> |
212 </tr> | 213 </tr> |
213 </table> <!-- results header --> | 214 </table> <!-- results header --> |
214 </td></tr><tr><td> | 215 </td></tr><tr><td> |
215 <table border="1"> <!-- results --> | 216 <table border="1" ng-app="diff_viewer"> <!-- results --> |
216 <tr> | 217 <tr> |
217 <!-- Most column headers are displayed in a common fashion... --> | 218 <!-- Most column headers are displayed in a common fashion... --> |
218 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'conf
ig']"> | 219 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'conf
ig']"> |
219 <input type="radio" | 220 <input type="radio" |
220 name="sortColumnRadio" | 221 name="sortColumnRadio" |
221 value="{{categoryName}}" | 222 value="{{categoryName}}" |
222 ng-checked="(sortColumn == categoryName)" | 223 ng-checked="(sortColumn == categoryName)" |
223 ng-click="sortResultsBy(categoryName)"> | 224 ng-click="sortResultsBy(categoryName)"> |
224 {{categoryName}} | 225 {{categoryName}} |
225 </th> | 226 </th> |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
268 <!-- item-selection checkbox column --> | 269 <!-- item-selection checkbox column --> |
269 </th> | 270 </th> |
270 </tr> | 271 </tr> |
271 | 272 |
272 <!-- For most columns... if the user clicks on the cell, and we are on | 273 <!-- For most columns... if the user clicks on the cell, and we are on |
273 the default tab, update the filter to only show results with the | 274 the default tab, update the filter to only show results with the |
274 same value for this category. | 275 same value for this category. |
275 This is made a bit tricky by the fact that AngularJS expressions | 276 This is made a bit tricky by the fact that AngularJS expressions |
276 do not allow control flow statements. See | 277 do not allow control flow statements. See |
277 http://docs.angularjs.org/guide/expression --> | 278 http://docs.angularjs.org/guide/expression --> |
278 <tr ng-repeat="result in limitedTestData"> | 279 <tr ng-repeat="result in limitedTestData" ng-controller="ImageController
"> |
279 <td ng-click="(viewingTab != defaultTab) || showOnlyResultType(result.
resultType)"> | 280 <td ng-click="(viewingTab != defaultTab) || showOnlyResultType(result.
resultType)"> |
280 {{result.resultType}} | 281 {{result.resultType}} |
281 </td> | 282 </td> |
282 <td ng-repeat="categoryName in ['builder', 'test']" | 283 <td ng-repeat="categoryName in ['builder', 'test']" |
283 ng-click="(viewingTab != defaultTab) || setCategoryValueMatch(cate
goryName, result[categoryName])"> | 284 ng-click="(viewingTab != defaultTab) || setCategoryValueMatch(cate
goryName, result[categoryName])"> |
284 {{result[categoryName]}} | 285 {{result[categoryName]}} |
285 </td> | 286 </td> |
286 <td ng-click="(viewingTab != defaultTab) || showOnlyConfig(result.conf
ig)"> | 287 <td ng-click="(viewingTab != defaultTab) || showOnlyConfig(result.conf
ig)"> |
287 {{result.config}} | 288 {{result.config}} |
288 </td> | 289 </td> |
289 <td> | 290 <td> |
290 <a ng-repeat="bug in result['bugs']" | 291 <a ng-repeat="bug in result['bugs']" |
291 href="https://code.google.com/p/skia/issues/detail?id={{bug}}" | 292 href="https://code.google.com/p/skia/issues/detail?id={{bug}}" |
292 target="_blank"> | 293 target="_blank"> |
293 {{bug}} | 294 {{bug}} |
294 </a> | 295 </a> |
295 </td> | 296 </td> |
296 | 297 |
297 <!-- expected image --> | 298 <!-- expected image --> |
298 <td valign="top" width="{{imageSize}}"> | 299 <td valign="top" width="{{imageSize}}"> |
299 <a class="image-link" target="_blank" href="http://chromium-skia-gm.
commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/
{{result.expectedHashDigest}}.png"> | 300 <br/> |
300 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata
storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e
xpectedHashDigest}}.png"/> | 301 <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm
/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"
target="_blank">View Image</a><br/> |
301 </a> | 302 <img-compare type="baseline" |
| 303 src="http://chromium-skia-gm.commondatastorage.googleap
is.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDiges
t}}.png" /> |
| 304 |
302 </td> | 305 </td> |
303 | 306 |
304 <!-- actual image --> | 307 <!-- actual image --> |
305 <td valign="top" width="{{imageSize}}"> | 308 <td valign="top" width="{{imageSize}}"> |
306 <a class="image-link" target="_blank" href="http://chromium-skia-gm.
commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{
result.actualHashDigest}}.png"> | 309 <br/> |
307 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata
storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act
ualHashDigest}}.png"/> | 310 <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm
/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png" targ
et="_blank">View Image</a><br/> |
308 </a> | 311 <img-compare type="test" |
| 312 src="http://chromium-skia-gm.commondatastorage.googleap
is.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.
png" /> |
| 313 |
309 </td> | 314 </td> |
310 | 315 |
311 <!-- whitediffs: every differing pixel shown in white --> | 316 <!-- whitediffs: every differing pixel shown in white --> |
312 <td valign="top" width="{{imageSize}}"> | 317 <td valign="top" width="{{imageSize}}"> |
313 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" | 318 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" |
314 title="{{result.numDifferingPixels | number:0}} of {{(100 * res
ult.numDifferingPixels / result.percentDifferingPixels) | number:0}} pixels ({{r
esult.percentDifferingPixels.toFixed(4)}}%) differ from expectation."> | 319 title="{{result.numDifferingPixels | number:0}} of {{(100 * res
ult.numDifferingPixels / result.percentDifferingPixels) | number:0}} pixels ({{r
esult.percentDifferingPixels.toFixed(4)}}%) differ from expectation."> |
315 <a class="image-link" target="_blank" href="/static/generated-imag
es/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"> | 320 |
316 <img width="{{imageSize}}" src="/static/generated-images/whitedi
ffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/> | |
317 </a><br> | |
318 {{result.percentDifferingPixels.toFixed(4)}}% | 321 {{result.percentDifferingPixels.toFixed(4)}}% |
319 ({{result.numDifferingPixels}}) | 322 ({{result.numDifferingPixels}}) |
| 323 <br/> |
| 324 <a href="/static/generated-images/whitediffs/{{result.expectedHash
Digest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/> |
| 325 <img-compare type="differingPixelsInWhite" |
| 326 src="/static/generated-images/whitediffs/{{result.exp
ectedHashDigest}}-vs-{{result.actualHashDigest}}.png" /> |
| 327 |
320 </div> | 328 </div> |
321 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" | 329 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" |
322 style="text-align:center"> | 330 style="text-align:center"> |
323 –none– | 331 –none– |
324 </div> | 332 </div> |
325 </td> | 333 </td> |
326 | 334 |
327 <!-- diffs: per-channel RGB deltas --> | 335 <!-- diffs: per-channel RGB deltas --> |
328 <td valign="top" width="{{imageSize}}"> | 336 <td valign="top" width="{{imageSize}}"> |
329 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" | 337 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" |
330 title="Weighted difference measure is {{result.weightedDiffMeas
ure.toFixed(4)}}%. Maximum difference per channel: R={{result.maxDiffPerChannel
[0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}"> | 338 title="Weighted difference measure is {{result.weightedDiffMeas
ure.toFixed(4)}}%. Maximum difference per channel: R={{result.maxDiffPerChannel
[0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}"> |
331 <a class="image-link" target="_blank" href="/static/generated-imag
es/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"> | 339 |
332 <img width="{{imageSize}}" src="/static/generated-images/diffs/{
{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/> | |
333 </a><br> | |
334 {{result.weightedDiffMeasure.toFixed(4)}}% | 340 {{result.weightedDiffMeasure.toFixed(4)}}% |
335 {{result.maxDiffPerChannel}} | 341 {{result.maxDiffPerChannel}} |
| 342 <br/> |
| 343 <a href="/static/generated-images/diffs/{{result.expectedHashDiges
t}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/> |
| 344 <img-compare type="differencePerPixel" |
| 345 src="/static/generated-images/diffs/{{result.expected
HashDigest}}-vs-{{result.actualHashDigest}}.png" |
| 346 ng-mousedown="MagnifyDraw($event, true)" |
| 347 ng-mousemove="MagnifyDraw($event, false)" |
| 348 ng-mouseup="MagnifyEnd($event)" |
| 349 ng-mouseleave="MagnifyEnd($event)" /> |
| 350 |
336 </div> | 351 </div> |
337 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" | 352 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" |
338 style="text-align:center"> | 353 style="text-align:center"> |
339 –none– | 354 –none– |
340 </div> | 355 </div> |
341 </td> | 356 </td> |
342 | 357 |
343 <td> | 358 <td> |
344 <input type="checkbox" | 359 <input type="checkbox" |
345 name="rowSelect" | 360 name="rowSelect" |
(...skipping 10 matching lines...) Expand all Loading... |
356 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and | 371 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and |
357 issues list) from | 372 issues list) from |
358 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab
les.json ? | 373 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab
les.json ? |
359 I tried importing the | 374 I tried importing the |
360 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using | 375 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using |
361 that to do so, but I got Access-Control-Allow-Origin errors. | 376 that to do so, but I got Access-Control-Allow-Origin errors. |
362 --> | 377 --> |
363 | 378 |
364 </body> | 379 </body> |
365 </html> | 380 </html> |
OLD | NEW |