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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: gm/rebaseline_server/static/view.html

Issue 149473005: Add magnifier to rebaseline server (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: Cleanup view.html 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
« gm/rebaseline_server/static/diff_viewer.js ('K') | « gm/rebaseline_server/static/loader.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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 ">
epoger 2014/02/04 16:45:52 One thing I'm not sure about (being an AngularJS n
rmistry 2014/02/04 18:35:33 Yes maybe it is because of different controllers,
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 class="gm-image left-image" />
305
302 </td> 306 </td>
303 307
304 <!-- actual image --> 308 <!-- actual image -->
305 <td valign="top" width="{{imageSize}}"> 309 <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"> 310 <br/>
307 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/> 311 <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> 312 <img-compare type="test"
313 src="http://chromium-skia-gm.commondatastorage.googleap is.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}. png"
314 class="gm-image left-image" />
epoger 2014/02/04 16:45:52 What's the significance of this class name? Shoul
rmistry 2014/02/04 18:35:33 Does not look like the class name is important her
315
309 </td> 316 </td>
310 317
311 <!-- whitediffs: every differing pixel shown in white --> 318 <!-- whitediffs: every differing pixel shown in white -->
312 <td valign="top" width="{{imageSize}}"> 319 <td valign="top" width="{{imageSize}}">
313 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" 320 <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."> 321 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"> 322
316 <img width="{{imageSize}}" src="/static/generated-images/whitedi ffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/>
317 </a><br>
318 {{result.percentDifferingPixels.toFixed(4)}}% 323 {{result.percentDifferingPixels.toFixed(4)}}%
319 ({{result.numDifferingPixels}}) 324 ({{result.numDifferingPixels}})
325 <br/>
326 <a href="/static/generated-images/whitediffs/{{result.expectedHash Digest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
327 <img-compare type="differingPixelsInWhite"
328 class="left-image"
329 src="/static/generated-images/whitediffs/{{result.exp ectedHashDigest}}-vs-{{result.actualHashDigest}}.png" />
330
320 </div> 331 </div>
321 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" 332 <div ng-hide="result.expectedHashDigest != result.actualHashDigest"
322 style="text-align:center"> 333 style="text-align:center">
323 &ndash;none&ndash; 334 &ndash;none&ndash;
324 </div> 335 </div>
325 </td> 336 </td>
326 337
327 <!-- diffs: per-channel RGB deltas --> 338 <!-- diffs: per-channel RGB deltas -->
328 <td valign="top" width="{{imageSize}}"> 339 <td valign="top" width="{{imageSize}}">
329 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" 340 <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]}}"> 341 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"> 342
332 <img width="{{imageSize}}" src="/static/generated-images/diffs/{ {result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/>
333 </a><br>
334 {{result.weightedDiffMeasure.toFixed(4)}}% 343 {{result.weightedDiffMeasure.toFixed(4)}}%
335 {{result.maxDiffPerChannel}} 344 {{result.maxDiffPerChannel}}
345 <br/>
346 <a href="/static/generated-images/diffs/{{result.expectedHashDiges t}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
347 <img-compare type="differencePerPixel"
348 class="left-image"
epoger 2014/02/04 16:45:52 Ditto: What's the significance of this class name?
rmistry 2014/02/04 18:35:33 Removed as per comment above.
349 src="/static/generated-images/diffs/{{result.expected HashDigest}}-vs-{{result.actualHashDigest}}.png"
350 ng-mousedown="MagnifyDraw($event, true)"
351 ng-mousemove="MagnifyDraw($event, false)"
352 ng-mouseup="MagnifyEnd($event)"
353 ng-mouseleave="MagnifyEnd($event)" />
354
336 </div> 355 </div>
337 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" 356 <div ng-hide="result.expectedHashDigest != result.actualHashDigest"
338 style="text-align:center"> 357 style="text-align:center">
339 &ndash;none&ndash; 358 &ndash;none&ndash;
340 </div> 359 </div>
341 </td> 360 </td>
342 361
343 <td> 362 <td>
344 <input type="checkbox" 363 <input type="checkbox"
345 name="rowSelect" 364 name="rowSelect"
(...skipping 10 matching lines...) Expand all
356 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and 375 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and
357 issues list) from 376 issues list) from
358 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab les.json ? 377 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab les.json ?
359 I tried importing the 378 I tried importing the
360 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using 379 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. 380 that to do so, but I got Access-Control-Allow-Origin errors.
362 --> 381 -->
363 382
364 </body> 383 </body>
365 </html> 384 </html>
OLDNEW
« gm/rebaseline_server/static/diff_viewer.js ('K') | « gm/rebaseline_server/static/loader.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698