src/third_party/skia/gm/rebaseline_server/static/view.html

   1 <!DOCTYPE html>
   2
   3 <html ng-app="Loader" ng-controller="Loader.Controller">
   4
   5 <head>
   6   <title ng-bind="windowTitle"></title>
   7   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   8   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>
   9   <script src="constants.js"></script>
  10   <script src="loader.js"></script>
  11   <script src="utils.js"></script>
  12   <link rel="stylesheet" href="view.css">
  13 </head>
  14
  15 <body>
  16   <h2>
  17     Instructions, roadmap, etc. are at
  18     <a href="http://tinyurl.com/SkiaRebaselineServer">
  19       http://tinyurl.com/SkiaRebaselineServer
  20     </a>
  21   </h2>
  22
  23   <em ng-show="!readyToDisplay">
  24     Loading results from <a href="{{resultsToLoad}}">{{resultsToLoad}}</a> ...
  25     {{loadingMessage}}
  26   </em>
  27
  28   <div ng-show="readyToDisplay">
  29
  30     <div class="warning-div"
  31          ng-show="urlSchemaVersionLoaded != constants.URL_VALUE__SCHEMA_VERSION__CURRENT">
  32       WARNING!  The URL you loaded used schema version {{urlSchemaVersionLoaded}}, rather than
  33       the most recent version {{constants.URL_VALUE__SCHEMA_VERSION__CURRENT}}.  It has been
  34       converted to the most recent version on a best-effort basis; you may wish to double-check
  35       which records are displayed.
  36     </div>
  37
  38     <div class="warning-div"
  39          ng-show="header[constants.KEY__HEADER__IS_EDITABLE] && header[constants.KEY__HEADER__IS_EXPORTED]">
  40       WARNING!  These results are editable and exported, so any user
  41       who can connect to this server over the network can modify them.
  42     </div>
  43
  44     <div ng-show="header[constants.KEY__HEADER__TIME_UPDATED]">
  45       These results, from raw JSON file
  46       <a href="{{resultsToLoad}}">{{resultsToLoad}}</a>, current as of
  47       {{localTimeString(header[constants.KEY__HEADER__TIME_UPDATED])}}
  48       <br>
  49       To see other sets of results (all results, failures only, etc.),
  50       <a href="/">click here</a>
  51     </div>
  52
  53     <div class="tab-wrapper"><!-- tabs -->
  54       <div class="tab-spacer" ng-repeat="tab in tabs">
  55         <div class="tab tab-{{tab == viewingTab}}"
  56              ng-click="setViewingTab(tab)">
  57           &nbsp;{{tab}} ({{numResultsPerTab[tab]}})&nbsp;
  58         </div>
  59         <div class="tab-spacer">
  60           &nbsp;
  61         </div>
  62       </div>
  63     </div><!-- tabs -->
  64
  65     <div class="tab-main"><!-- main display area of selected tab -->
  66
  67     <br>
  68     <!-- We only show the filters/settings table on the Unfiled tab. -->
  69     <table ng-show="viewingTab == defaultTab" border="1">
  70     <tr>
  71       <th colspan="4">
  72         Filters
  73       </th>
  74       <th>
  75         Settings
  76       </th>
  77     </tr>
  78     <tr valign="top">
  79
  80       <!-- filters -->
  81       <td ng-repeat="columnName in orderedColumnNames">
  82
  83         <!-- Only display filterable columns here... -->
  84         <div ng-if="extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__IS_FILTERABLE]">
  85           {{extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__HEADER_TEXT]}}<br>
  86
  87           <!-- If we filter this column using free-form text match... -->
  88           <div ng-if="extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__USE_FREEFORM_FILTER]">
  89             <input type="text"
  90                    ng-model="columnStringMatch[columnName]"
  91                    ng-change="setUpdatesPending(true)"/>
  92             <br>
  93             <button ng-click="setColumnStringMatch(columnName, '')"
  94                     ng-disabled="('' == columnStringMatch[columnName])">
  95               clear (show all)
  96             </button>
  97           </div>
  98
  99           <!-- If we filter this column using checkboxes... -->
 100           <div ng-if="!extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__USE_FREEFORM_FILTER]">
 101             <label ng-repeat="valueAndCount in extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__VALUES_AND_COUNTS]">
 102               <input type="checkbox"
 103                      name="resultTypes"
 104                      value="{{valueAndCount[0]}}"
 105                      ng-checked="isValueInSet(valueAndCount[0], showingColumnValues[columnName])"
 106                      ng-click="toggleValueInSet(valueAndCount[0], showingColumnValues[columnName]); setUpdatesPending(true)">
 107               {{valueAndCount[0]}} ({{valueAndCount[1]}})<br>
 108             </label>
 109             <button ng-click="showingColumnValues[columnName] = {}; toggleValuesInSet(allColumnValues[columnName], showingColumnValues[columnName]); updateResults()"
 110                     ng-disabled="!readyToDisplay || allColumnValues[columnName].length == setSize(showingColumnValues[columnName])">
 111               all
 112             </button>
 113             <button ng-click="showingColumnValues[columnName] = {}; updateResults()"
 114                     ng-disabled="!readyToDisplay || 0 == setSize(showingColumnValues[columnName])">
 115               none
 116             </button>
 117             <button ng-click="toggleValuesInSet(allColumnValues[columnName], showingColumnValues[columnName]); updateResults()">
 118               toggle
 119             </button>
 120           </div>
 121
 122         </div>
 123       </td>
 124
 125       <!-- settings -->
 126       <td><table>
 127         <tr><td>
 128           <input type="checkbox" ng-model="showThumbnailsPending"
 129                  ng-init="showThumbnailsPending = true"
 130                  ng-change="areUpdatesPending = true"/>
 131           Show thumbnails
 132         </td></tr>
 133         <tr><td>
 134           <input type="checkbox" ng-model="mergeIdenticalRowsPending"
 135                  ng-init="mergeIdenticalRowsPending = true"
 136                  ng-change="areUpdatesPending = true"/>
 137           Merge identical rows
 138         </td></tr>
 139         <tr><td>
 140           Image width
 141           <input type="text" ng-model="imageSizePending"
 142                  ng-init="imageSizePending=100"
 143                  ng-change="areUpdatesPending = true"
 144                  maxlength="4"/>
 145         </td></tr>
 146         <tr><td>
 147           Max records to display
 148           <input type="text" ng-model="displayLimitPending"
 149                  ng-init="displayLimitPending=50"
 150                  ng-change="areUpdatesPending = true"
 151                  maxlength="4"/>
 152         </td></tr>
 153         <tr><td>
 154           <button class="update-results-button"
 155                   ng-click="updateResults()"
 156                   ng-disabled="!areUpdatesPending">
 157             Update Results
 158           </button>
 159         </td></tr>
 160       </tr></table></td>
 161     </tr>
 162   </table>
 163
 164       <p>
 165
 166       <!-- Submission UI that we only show in the Pending Approval tab. -->
 167       <div ng-show="'Pending Approval' == viewingTab">
 168         <div style="display:inline-block">
 169           <button style="font-size:20px"
 170                   ng-click="submitApprovals(filteredImagePairs)"
 171                   ng-disabled="submitPending || (filteredImagePairs.length == 0)">
 172             Update these {{filteredImagePairs.length}} expectations on the server
 173           </button>
 174         </div>
 175         <div style="display:inline-block">
 176           <div style="font-size:20px"
 177                ng-show="submitPending">
 178             Submitting, please wait...
 179           </div>
 180         </div>
 181         <div>
 182           Advanced settings...
 183           <input type="checkbox" ng-model="showSubmitAdvancedSettings">
 184           show
 185           <ul ng-show="showSubmitAdvancedSettings">
 186             <li ng-repeat="setting in [constants.KEY__EXPECTATIONS__REVIEWED, constants.KEY__EXPECTATIONS__IGNOREFAILURE]">
 187               {{setting}}
 188               <input type="checkbox" ng-model="submitAdvancedSettings[setting]">
 189             </li>
 190             <li ng-repeat="setting in ['bug']">
 191               {{setting}}
 192               <input type="text" ng-model="submitAdvancedSettings[setting]">
 193             </li>
 194           </ul>
 195         </div>
 196       </div>
 197
 198       <p>
 199
 200     <div class="results-header"> <!-- results header -->
 201           <div class="results-header-actions">
 202             all tests shown:
 203             <button ng-click="selectAllImagePairs()">
 204               select
 205             </button>
 206             <button ng-click="clearAllImagePairs()">
 207               clear
 208             </button>
 209             <button ng-click="toggleAllImagePairs()">
 210               toggle
 211             </button>
 212           <div ng-repeat="otherTab in tabs">
 213             <button ng-click="moveSelectedImagePairsToTab(otherTab)"
 214                     ng-disabled="selectedImagePairs.length == 0"
 215                     ng-show="otherTab != viewingTab">
 216               move {{selectedImagePairs.length}} selected tests to {{otherTab}} tab
 217             </button>
 218           </div>
 219         </div>
 220         <div class="results-header-stats">
 221           Found {{filteredImagePairs.length}} matches;
 222           <span ng-show="filteredImagePairs.length > limitedImagePairs.length">
 223             displaying the first {{limitedImagePairs.length}}.
 224           </span>
 225           <span ng-show="filteredImagePairs.length <= limitedImagePairs.length">
 226             displaying them all.
 227           </span>
 228           <span ng-show="renderEndTime > renderStartTime">
 229             Rendered in {{(renderEndTime - renderStartTime).toFixed(0)}} ms.
 230           </span>
 231           <br>
 232           (click on the column header radio buttons to re-sort by that column)
 233         </div>
 234     </div> <!-- results header -->
 235
 236     <table border="0"><tr><td> <!-- table holding results header + results table -->
 237       </td></tr><tr><td>
 238       <table border="1"> <!-- results -->
 239         <tr>
 240           <!-- Most column headers are displayed in a common fashion... -->
 241           <th ng-repeat="columnName in orderedColumnNames">
 242               <a ng-class="'sort-' + sortedByColumnsCls(columnName)"
 243                  ng-click="sortResultsBy(constants.KEY__IMAGEPAIRS__EXTRACOLUMNS, columnName)"
 244                  href=""
 245                  class="sortable-header">
 246                {{extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__HEADER_TEXT]}}
 247              </a>
 248           </th>
 249
 250           <!-- ... but there are a few columns where we display things differently. -->
 251           <th>
 252             <a ng-class="'sort-' + sortedByColumnsCls(constants.KEY__EXPECTATIONS__BUGS)"
 253                ng-click="sortResultsBy(constants.KEY__IMAGEPAIRS__EXPECTATIONS, constants.KEY__EXPECTATIONS__BUGS)"
 254                href=""
 255                class="sortable-header">
 256                   bugs
 257             </a>
 258           </th>
 259           <th width="{{imageSize}}">
 260             <a ng-class="'sort-' + sortedByColumnsCls(constants.KEY__IMAGEPAIRS__IMAGE_A_URL)"
 261                ng-click="sortResultsBy('none', constants.KEY__IMAGEPAIRS__IMAGE_A_URL)"
 262                href=""
 263                class="sortable-header">
 264                    {{imageSets[constants.KEY__IMAGESETS__SET__IMAGE_A][constants.KEY__IMAGESETS__FIELD__DESCRIPTION]}}
 265             </a>
 266           </th>
 267           <th width="{{imageSize}}">
 268             <a ng-class="'sort-' + sortedByColumnsCls(constants.KEY__IMAGEPAIRS__IMAGE_B_URL)"
 269                ng-click="sortResultsBy('none', constants.KEY__IMAGEPAIRS__IMAGE_B_URL)"
 270                href=""
 271                class="sortable-header">
 272                   {{imageSets[constants.KEY__IMAGESETS__SET__IMAGE_B][constants.KEY__IMAGESETS__FIELD__DESCRIPTION]}}
 273             </a>
 274           </th>
 275           <th width="{{imageSize}}">
 276             <a ng-class="'sort-' + sortedByColumnsCls(constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS)"
 277                ng-click="sortResultsBy(constants.KEY__IMAGEPAIRS__DIFFERENCES, constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS)"
 278                href=""
 279                class="sortable-header">
 280                   differing pixels in white
 281             </a>
 282           </th>
 283           <th width="{{imageSize}}">
 284             <a ng-class="'sort-' + sortedByColumnsCls(constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF)"
 285                ng-click="sortResultsBy(constants.KEY__IMAGEPAIRS__DIFFERENCES, constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF)"
 286                href=""
 287                class="sortable-header">
 288                perceptual difference
 289             </a>
 290             <br>
 291             <input type="range" ng-model="pixelDiffBgColorBrightness"
 292                    ng-init="pixelDiffBgColorBrightness=64; pixelDiffBgColor=brightnessStringToHexColor(pixelDiffBgColorBrightness)"
 293                    ng-change="pixelDiffBgColor=brightnessStringToHexColor(pixelDiffBgColorBrightness)"
 294                    title="image background brightness"
 295                    min="0" max="255"/>
 296           </th>
 297           <th>
 298             <!-- imagepair-selection checkbox column -->
 299           </th>
 300         </tr>
 301
 302         <tr ng-repeat="imagePair in limitedImagePairs" valign="top"
 303             ng-class-odd="'results-odd'" ng-class-even="'results-even'"
 304             results-updated-callback-directive>
 305
 306           <td ng-repeat="columnName in orderedColumnNames">
 307             {{imagePair[constants.KEY__IMAGEPAIRS__EXTRACOLUMNS][columnName]}}
 308             <br>
 309             <button class="show-only-button"
 310                     ng-show="viewingTab == defaultTab"
 311                     ng-disabled="1 == setSize(showingColumnValues[columnName])"
 312                     ng-click="showOnlyColumnValue(columnName, imagePair[constants.KEY__IMAGEPAIRS__EXTRACOLUMNS][columnName])"
 313                     title="show only results of {{extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__HEADER_TEXT]}} {{imagePair[constants.KEY__IMAGEPAIRS__EXTRACOLUMNS][columnName]}}">
 314               show only
 315             </button>
 316             <br>
 317             <button class="show-all-button"
 318                     ng-show="viewingTab == defaultTab"
 319                     ng-disabled="allColumnValues[columnName].length == setSize(showingColumnValues[columnName])"
 320                     ng-click="showAllColumnValues(columnName)"
 321                     title="show results of all {{extraColumnHeaders[columnName][constants.KEY__EXTRACOLUMNHEADERS__HEADER_TEXT]}}s">
 322               show all
 323             </button>
 324           </td>
 325
 326           <!-- bugs -->
 327           <td>
 328             <a ng-repeat="bug in imagePair[constants.KEY__IMAGEPAIRS__EXPECTATIONS][constants.KEY__EXPECTATIONS__BUGS]"
 329                href="https://code.google.com/p/skia/issues/detail?id={{bug}}"
 330                target="_blank">
 331               {{bug}}
 332             </a>
 333           </td>
 334
 335           <!-- image A -->
 336           <td width="{{imageSize}}" ng-if="imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN] > 0" rowspan="{{imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN]}}">
 337             <div ng-if="imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL] != null">
 338               <a href="{{imageSets[constants.KEY__IMAGESETS__SET__IMAGE_A][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL]}}" target="_blank">View Image</a><br/>
 339               <img ng-if="showThumbnails"
 340                    width="{{imageSize}}"
 341                    ng-src="{{imageSets[constants.KEY__IMAGESETS__SET__IMAGE_A][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL]}}" />
 342             </div>
 343             <div ng-show="imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL] == null"
 344                  style="text-align:center">
 345               &ndash;none&ndash;
 346             </div>
 347           </td>
 348
 349           <!-- image B -->
 350           <td width="{{imageSize}}" ng-if="imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN] > 0" rowspan="{{imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN]}}">
 351             <div ng-if="imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL] != null">
 352               <a href="{{imageSets[constants.KEY__IMAGESETS__SET__IMAGE_B][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL]}}" target="_blank">View Image</a><br/>
 353               <img ng-if="showThumbnails"
 354                    width="{{imageSize}}"
 355                    ng-src="{{imageSets[constants.KEY__IMAGESETS__SET__IMAGE_B][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL]}}" />
 356             </div>
 357             <div ng-show="imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL] == null"
 358                  style="text-align:center">
 359               &ndash;none&ndash;
 360             </div>
 361           </td>
 362
 363           <!-- whitediffs: every differing pixel shown in white -->
 364           <td width="{{imageSize}}" ng-if="imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN] > 0" rowspan="{{imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN]}}">
 365             <div ng-if="imagePair[constants.KEY__IMAGEPAIRS__IS_DIFFERENT]"
 366                  title="{{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__NUM_DIFF_PIXELS] | number:0}} of {{(100 * imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__NUM_DIFF_PIXELS] / imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS]) | number:0}} pixels ({{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS].toFixed(4)}}%) differ from expectation.">
 367
 368               <a href="{{imageSets[constants.KEY__IMAGESETS__SET__WHITEDIFFS][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__WHITE_DIFF_URL]}}" target="_blank">View Image</a><br/>
 369               <img ng-if="showThumbnails"
 370                    width="{{imageSize}}"
 371                    ng-src="{{imageSets[constants.KEY__IMAGESETS__SET__WHITEDIFFS][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__WHITE_DIFF_URL]}}" />
 372               <br/>
 373               {{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS].toFixed(4)}}%
 374               ({{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__NUM_DIFF_PIXELS]}})
 375             </div>
 376             <div ng-show="!imagePair[constants.KEY__IMAGEPAIRS__IS_DIFFERENT]"
 377                  style="text-align:center">
 378               &ndash;none&ndash;
 379             </div>
 380           </td>
 381
 382           <!-- diffs: per-channel RGB deltas -->
 383           <td width="{{imageSize}}" ng-if="imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN] > 0" rowspan="{{imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN]}}">
 384             <div ng-if="imagePair[constants.KEY__IMAGEPAIRS__IS_DIFFERENT]"
 385                  title="Perceptual difference measure is {{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF].toFixed(4)}}%.  Maximum difference per channel: R={{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__MAX_DIFF_PER_CHANNEL][0]}}, G={{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__MAX_DIFF_PER_CHANNEL][1]}}, B={{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__MAX_DIFF_PER_CHANNEL][2]}}">
 386
 387               <a href="{{imageSets[constants.KEY__IMAGESETS__SET__DIFFS][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__DIFF_URL]}}" target="_blank">View Image</a><br/>
 388               <img ng-if="showThumbnails"
 389                    ng-style="{backgroundColor: pixelDiffBgColor}"
 390                    width="{{imageSize}}"
 391                    ng-src="{{imageSets[constants.KEY__IMAGESETS__SET__DIFFS][constants.KEY__IMAGESETS__FIELD__BASE_URL]}}/{{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__DIFF_URL]}}" />
 392               <br/>
 393               {{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF].toFixed(4)}}%
 394               {{imagePair[constants.KEY__IMAGEPAIRS__DIFFERENCES][constants.KEY__DIFFERENCES__MAX_DIFF_PER_CHANNEL]}}
 395             </div>
 396             <div ng-show="!imagePair[constants.KEY__IMAGEPAIRS__IS_DIFFERENT]"
 397                  style="text-align:center">
 398               &ndash;none&ndash;
 399             </div>
 400           </td>
 401
 402           <td ng-if="imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN] > 0" rowspan="{{imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN]}}">
 403             <br/>
 404             <input type="checkbox"
 405                    name="rowSelect"
 406                    value="{{imagePair.index}}"
 407                    ng-checked="isValueInArray(imagePair.index, selectedImagePairs)"
 408                    ng-click="toggleSomeImagePairs($index, imagePair[constants.KEY__IMAGEPAIRS__ROWSPAN])">
 409         </tr>
 410       </table> <!-- imagePairs -->
 411     </td></tr></table> <!-- table holding results header + imagePairs table -->
 412
 413   </div><!-- main display area of selected tab -->
 414   </div><!-- everything: hide until readyToDisplay -->
 415
 416 </body>
 417 </html>