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="constants.js"></script> |
| 9 <script src="diff_viewer.js"></script> |
8 <script src="loader.js"></script> | 10 <script src="loader.js"></script> |
9 <script src="diff_viewer.js"></script> | |
10 <link rel="stylesheet" href="view.css"> | 11 <link rel="stylesheet" href="view.css"> |
11 </head> | 12 </head> |
12 | 13 |
13 <body> | 14 <body> |
14 <h2> | 15 <h2> |
15 Instructions, roadmap, etc. are at | 16 Instructions, roadmap, etc. are at |
16 <a href="http://tinyurl.com/SkiaRebaselineServer"> | 17 <a href="http://tinyurl.com/SkiaRebaselineServer"> |
17 http://tinyurl.com/SkiaRebaselineServer | 18 http://tinyurl.com/SkiaRebaselineServer |
18 </a> | 19 </a> |
19 </h2> | 20 </h2> |
20 | 21 |
21 <em> | 22 <em> |
22 {{loadingMessage}} | 23 {{loadingMessage}} |
23 </em> | 24 </em> |
24 | 25 |
25 <div ng-hide="!categories"><!-- everything: hide until data is loaded --> | 26 <div ng-hide="!extraColumnHeaders"><!-- everything: hide until data is loaded
--> |
26 | 27 |
27 <div class="warning-div" | 28 <div class="warning-div" |
28 ng-hide="!(header.isEditable && header.isExported)"> | 29 ng-hide="!(header[constants.KEY__HEADER__IS_EDITABLE] && header[constan
ts.KEY__HEADER__IS_EXPORTED])"> |
29 WARNING! These results are editable and exported, so any user | 30 WARNING! These results are editable and exported, so any user |
30 who can connect to this server over the network can modify them. | 31 who can connect to this server over the network can modify them. |
31 </div> | 32 </div> |
32 | 33 |
33 <div ng-hide="!(header.timeUpdated)"> | 34 <div ng-hide="!(header[constants.KEY__HEADER___TIME_UPDATED])"> |
34 Results current as of {{localTimeString(header.timeUpdated)}} | 35 Results current as of {{localTimeString(header[constants.KEY__HEADER__TIME
_UPDATED])}} |
35 </div> | 36 </div> |
36 | 37 |
37 <div><!-- tabs --> | 38 <div><!-- tabs --> |
38 <div class="tab-spacer" ng-repeat="tab in tabs"> | 39 <div class="tab-spacer" ng-repeat="tab in tabs"> |
39 <div class="tab-{{tab == viewingTab}}" | 40 <div class="tab-{{tab == viewingTab}}" |
40 ng-click="setViewingTab(tab)"> | 41 ng-click="setViewingTab(tab)"> |
41 {{tab}} ({{numResultsPerTab[tab]}}) | 42 {{tab}} ({{numResultsPerTab[tab]}}) |
42 </div> | 43 </div> |
43 <div class="tab-spacer"> | 44 <div class="tab-spacer"> |
44 | 45 |
45 </div> | 46 </div> |
46 </div> | 47 </div> |
47 </div><!-- tabs --> | 48 </div><!-- tabs --> |
48 | 49 |
49 <div class="tab-main"><!-- main display area of selected tab --> | 50 <div class="tab-main"><!-- main display area of selected tab --> |
50 | 51 |
51 <br> | 52 <br> |
52 <!-- We only show the filters/settings table on the Unfiled tab. --> | 53 <!-- We only show the filters/settings table on the Unfiled tab. --> |
53 <table ng-hide="viewingTab != defaultTab" border="1"> | 54 <table ng-hide="viewingTab != defaultTab" border="1"> |
54 <tr> | 55 <tr> |
55 <th colspan="4"> | 56 <th colspan="4"> |
56 Filters | 57 Filters |
57 </th> | 58 </th> |
58 <th> | 59 <th> |
59 Settings | 60 Settings |
60 </th> | 61 </th> |
61 </tr> | 62 </tr> |
62 <tr valign="top"> | 63 <tr valign="top"> |
63 <!-- TODO(epoger): make this an ng-repeat over resultType, config, etc? --
> | |
64 <td> | 64 <td> |
65 resultType<br> | 65 resultType<br> |
66 <label ng-repeat="(resultType, count) in categories['resultType'] track
by $index"> | 66 <label ng-repeat="(resultType, count) in extraColumnHeaders[constants.KE
Y__EXTRACOLUMN__RESULT_TYPE][constants.KEY__VALUES_AND_COUNTS] track by $index"> |
67 <input type="checkbox" | 67 <input type="checkbox" |
68 name="resultTypes" | 68 name="resultTypes" |
69 value="{{resultType}}" | 69 value="{{resultType}}" |
70 ng-checked="!isValueInSet(resultType, hiddenResultTypes)" | 70 ng-checked="!isValueInSet(resultType, hiddenResultTypes)" |
71 ng-click="toggleValueInSet(resultType, hiddenResultTypes); setU
pdatesPending(true)"> | 71 ng-click="toggleValueInSet(resultType, hiddenResultTypes); setU
pdatesPending(true)"> |
72 {{resultType}} ({{count}})<br> | 72 {{resultType}} ({{count}})<br> |
73 </label> | 73 </label> |
74 <button ng-click="hiddenResultTypes = {}; updateResults()"> | 74 <button ng-click="hiddenResultTypes = {}; updateResults()"> |
75 all | 75 all |
76 </button> | 76 </button> |
77 <button ng-click="hiddenResultTypes = {}; toggleValuesInSet(allResultTyp
es, hiddenResultTypes); updateResults()"> | 77 <button ng-click="hiddenResultTypes = {}; toggleValuesInSet(allResultTyp
es, hiddenResultTypes); updateResults()"> |
78 none | 78 none |
79 </button> | 79 </button> |
80 <button ng-click="toggleValuesInSet(allResultTypes, hiddenResultTypes);
updateResults()"> | 80 <button ng-click="toggleValuesInSet(allResultTypes, hiddenResultTypes);
updateResults()"> |
81 toggle | 81 toggle |
82 </button> | 82 </button> |
83 </td> | 83 </td> |
84 <td ng-repeat="category in ['builder', 'test']"> | 84 <td ng-repeat="category in [constants.KEY__EXTRACOLUMN__BUILDER, constants
.KEY__EXTRACOLUMN__TEST]"> |
85 {{category}} | 85 {{category}} |
86 <br> | 86 <br> |
87 <input type="text" | 87 <input type="text" |
88 ng-model="categoryValueMatch[category]" | 88 ng-model="categoryValueMatch[category]" |
89 ng-change="setUpdatesPending(true)"/> | 89 ng-change="setUpdatesPending(true)"/> |
90 <br> | 90 <br> |
91 <button ng-click="setCategoryValueMatch(category, '')" | 91 <button ng-click="setCategoryValueMatch(category, '')" |
92 ng-disabled="('' == categoryValueMatch[category])"> | 92 ng-disabled="('' == categoryValueMatch[category])"> |
93 clear (show all) | 93 clear (show all) |
94 </button> | 94 </button> |
95 </td> | 95 </td> |
96 <td> | 96 <td> |
97 config<br> | 97 config<br> |
98 <label ng-repeat="(config, count) in categories['config'] track by $inde
x"> | 98 <label ng-repeat="(config, count) in extraColumnHeaders[constants.KEY__E
XTRACOLUMN__CONFIG][constants.KEY__VALUES_AND_COUNTS] track by $index"> |
99 <input type="checkbox" | 99 <input type="checkbox" |
100 name="configs" | 100 name="configs" |
101 value="{{config}}" | 101 value="{{config}}" |
102 ng-checked="!isValueInSet(config, hiddenConfigs)" | 102 ng-checked="!isValueInSet(config, hiddenConfigs)" |
103 ng-click="toggleValueInSet(config, hiddenConfigs); setUpdatesPe
nding(true)"> | 103 ng-click="toggleValueInSet(config, hiddenConfigs); setUpdatesPe
nding(true)"> |
104 {{config}} ({{count}})<br> | 104 {{config}} ({{count}})<br> |
105 </label> | 105 </label> |
106 <button ng-click="hiddenConfigs = {}; updateResults()"> | 106 <button ng-click="hiddenConfigs = {}; updateResults()"> |
107 all | 107 all |
108 </button> | 108 </button> |
(...skipping 29 matching lines...) Expand all Loading... |
138 </tr></table></td> | 138 </tr></table></td> |
139 </tr> | 139 </tr> |
140 </table> | 140 </table> |
141 | 141 |
142 <p> | 142 <p> |
143 | 143 |
144 <!-- Submission UI that we only show in the Pending Approval tab. --> | 144 <!-- Submission UI that we only show in the Pending Approval tab. --> |
145 <div ng-hide="'Pending Approval' != viewingTab"> | 145 <div ng-hide="'Pending Approval' != viewingTab"> |
146 <div style="display:inline-block"> | 146 <div style="display:inline-block"> |
147 <button style="font-size:20px" | 147 <button style="font-size:20px" |
148 ng-click="submitApprovals(filteredTestData)" | 148 ng-click="submitApprovals(filteredImagePairs)" |
149 ng-disabled="submitPending || (filteredTestData.length == 0)"> | 149 ng-disabled="submitPending || (filteredImagePairs.length == 0)
"> |
150 Update these {{filteredTestData.length}} expectations on the server | 150 Update these {{filteredImagePairs.length}} expectations on the serve
r |
151 </button> | 151 </button> |
152 </div> | 152 </div> |
153 <div style="display:inline-block"> | 153 <div style="display:inline-block"> |
154 <div style="font-size:20px" | 154 <div style="font-size:20px" |
155 ng-hide="!submitPending"> | 155 ng-hide="!submitPending"> |
156 Submitting, please wait... | 156 Submitting, please wait... |
157 </div> | 157 </div> |
158 </div> | 158 </div> |
159 <div> | 159 <div> |
160 Advanced settings... | 160 Advanced settings... |
161 <input type="checkbox" ng-model="showSubmitAdvancedSettings"> | 161 <input type="checkbox" ng-model="showSubmitAdvancedSettings"> |
162 show | 162 show |
163 <ul ng-hide="!showSubmitAdvancedSettings"> | 163 <ul ng-hide="!showSubmitAdvancedSettings"> |
164 <li ng-repeat="setting in ['reviewed-by-human', 'ignore-failure']"> | 164 <li ng-repeat="setting in [constants.KEY__EXPECTATIONS__REVIEWED, co
nstants.KEY__EXPECTATIONS__IGNOREFAILURE]"> |
165 {{setting}} | 165 {{setting}} |
166 <input type="checkbox" ng-model="submitAdvancedSettings[setting]"> | 166 <input type="checkbox" ng-model="submitAdvancedSettings[setting]"> |
167 </li> | 167 </li> |
168 <li ng-repeat="setting in ['bug']"> | 168 <li ng-repeat="setting in ['bug']"> |
169 {{setting}} | 169 {{setting}} |
170 <input type="text" ng-model="submitAdvancedSettings[setting]"> | 170 <input type="text" ng-model="submitAdvancedSettings[setting]"> |
171 </li> | 171 </li> |
172 </ul> | 172 </ul> |
173 </div> | 173 </div> |
174 </div> | 174 </div> |
175 | 175 |
176 <p> | 176 <p> |
177 | 177 |
178 <table border="0"><tr><td> <!-- table holding results header + results table
--> | 178 <table border="0"><tr><td> <!-- table holding results header + results table
--> |
179 <table border="0" width="100%"> <!-- results header --> | 179 <table border="0" width="100%"> <!-- results header --> |
180 <tr> | 180 <tr> |
181 <td> | 181 <td> |
182 Found {{filteredTestData.length}} matches; | 182 Found {{filteredImagePairs.length}} matches; |
183 <span ng-hide="filteredTestData.length <= limitedTestData.length"> | 183 <span ng-hide="filteredImagePairs.length <= limitedImagePairs.length
"> |
184 displaying the first {{limitedTestData.length}} | 184 displaying the first {{limitedImagePairs.length}} |
185 </span> | 185 </span> |
186 <span ng-hide="filteredTestData.length > limitedTestData.length"> | 186 <span ng-hide="filteredImagePairs.length > limitedImagePairs.length"
> |
187 displaying them all | 187 displaying them all |
188 </span> | 188 </span> |
189 <br> | 189 <br> |
190 (click on the column header radio buttons to re-sort by that column) | 190 (click on the column header radio buttons to re-sort by that column) |
191 </td> | 191 </td> |
192 <td align="right"> | 192 <td align="right"> |
193 <div> | 193 <div> |
194 all tests shown: | 194 all tests shown: |
195 <button ng-click="selectAllItems()"> | 195 <button ng-click="selectAllImagePairs()"> |
196 select | 196 select |
197 </button> | 197 </button> |
198 <button ng-click="clearAllItems()"> | 198 <button ng-click="clearAllImagePairs()"> |
199 clear | 199 clear |
200 </button> | 200 </button> |
201 <button ng-click="toggleAllItems()"> | 201 <button ng-click="toggleAllImagePairs()"> |
202 toggle | 202 toggle |
203 </button> | 203 </button> |
204 </div> | 204 </div> |
205 <div ng-repeat="otherTab in tabs"> | 205 <div ng-repeat="otherTab in tabs"> |
206 <button ng-click="moveSelectedItemsToTab(otherTab)" | 206 <button ng-click="moveSelectedImagePairsToTab(otherTab)" |
207 ng-disabled="selectedItems.length == 0" | 207 ng-disabled="selectedImagePairs.length == 0" |
208 ng-hide="otherTab == viewingTab"> | 208 ng-hide="otherTab == viewingTab"> |
209 move {{selectedItems.length}} selected tests to {{otherTab}} tab | 209 move {{selectedImagePairs.length}} selected tests to {{otherTab}
} tab |
210 </button> | 210 </button> |
211 </div> | 211 </div> |
212 </td> | 212 </td> |
213 </tr> | 213 </tr> |
214 </table> <!-- results header --> | 214 </table> <!-- results header --> |
215 </td></tr><tr><td> | 215 </td></tr><tr><td> |
216 <table border="1" ng-app="diff_viewer"> <!-- results --> | 216 <table border="1" ng-app="diff_viewer"> <!-- results --> |
217 <tr> | 217 <tr> |
218 <!-- Most column headers are displayed in a common fashion... --> | 218 <!-- Most column headers are displayed in a common fashion... --> |
219 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'conf
ig']"> | 219 <th ng-repeat="categoryName in [constants.KEY__EXTRACOLUMN__RESULT_TYP
E, constants.KEY__EXTRACOLUMN__BUILDER, constants.KEY__EXTRACOLUMN__TEST, consta
nts.KEY__EXTRACOLUMN__CONFIG]"> |
220 <input type="radio" | 220 <input type="radio" |
221 name="sortColumnRadio" | 221 name="sortColumnRadio" |
222 value="{{categoryName}}" | 222 value="{{categoryName}}" |
223 ng-checked="(sortColumn == categoryName)" | 223 ng-checked="(sortColumnKey == categoryName)" |
224 ng-click="sortResultsBy(categoryName)"> | 224 ng-click="sortResultsBy(constants.KEY__EXTRA_COLUMN_VALUES, c
ategoryName)"> |
225 {{categoryName}} | 225 {{categoryName}} |
226 </th> | 226 </th> |
227 <!-- ... but there are a few columns where we display things different
ly. --> | 227 <!-- ... but there are a few columns where we display things different
ly. --> |
228 <th> | 228 <th> |
229 <input type="radio" | 229 <input type="radio" |
230 name="sortColumnRadio" | 230 name="sortColumnRadio" |
231 value="bugs" | 231 value="bugs" |
232 ng-checked="(sortColumn == 'bugs')" | 232 ng-checked="(sortColumnKey == constants.KEY__EXPECTATIONS__BU
GS)" |
233 ng-click="sortResultsBy('bugs')"> | 233 ng-click="sortResultsBy(constants.KEY__EXPECTATIONS_DATA, con
stants.KEY__EXPECTATIONS__BUGS)"> |
234 bugs | 234 bugs |
235 </th> | 235 </th> |
236 <th width="{{imageSize}}"> | 236 <th width="{{imageSize}}"> |
237 <input type="radio" | 237 {{imageSets[0][constants.KEY__IMAGESETS__DESCRIPTION]}} |
238 name="sortColumnRadio" | |
239 value="expectedHashDigest" | |
240 ng-checked="(sortColumn == 'expectedHashDigest')" | |
241 ng-click="sortResultsBy('expectedHashDigest')"> | |
242 expected image | |
243 </th> | 238 </th> |
244 <th width="{{imageSize}}"> | 239 <th width="{{imageSize}}"> |
245 <input type="radio" | 240 {{imageSets[1][constants.KEY__IMAGESETS__DESCRIPTION]}} |
246 name="sortColumnRadio" | |
247 value="actualHashDigest" | |
248 ng-checked="(sortColumn == 'actualHashDigest')" | |
249 ng-click="sortResultsBy('actualHashDigest')"> | |
250 actual image | |
251 </th> | 241 </th> |
252 <th width="{{imageSize}}"> | 242 <th width="{{imageSize}}"> |
253 <input type="radio" | 243 <input type="radio" |
254 name="sortColumnRadio" | 244 name="sortColumnRadio" |
255 value="percentDifferingPixels" | 245 value="percentDifferingPixels" |
256 ng-checked="(sortColumn == 'percentDifferingPixels')" | 246 ng-checked="(sortColumnKey == constants.KEY__DIFFERENCE_DATA_
_PERCENT_DIFF_PIXELS)" |
257 ng-click="sortResultsBy('percentDifferingPixels')"> | 247 ng-click="sortResultsBy(constants.KEY__DIFFERENCE_DATA, const
ants.KEY__DIFFERENCE_DATA__PERCENT_DIFF_PIXELS)"> |
258 differing pixels in white | 248 differing pixels in white |
259 </th> | 249 </th> |
260 <th width="{{imageSize}}"> | 250 <th width="{{imageSize}}"> |
261 <input type="radio" | 251 <input type="radio" |
262 name="sortColumnRadio" | 252 name="sortColumnRadio" |
263 value="weightedDiffMeasure" | 253 value="weightedDiffMeasure" |
264 ng-checked="(sortColumn == 'weightedDiffMeasure')" | 254 ng-checked="(sortColumnKey == constants.KEY__DIFFERENCE_DATA_
_WEIGHTED_DIFF)" |
265 ng-click="sortResultsBy('weightedDiffMeasure')"> | 255 ng-click="sortResultsBy(constants.KEY__DIFFERENCE_DATA, const
ants.KEY__DIFFERENCE_DATA__WEIGHTED_DIFF)"> |
266 perceptual difference | 256 perceptual difference |
267 <br> | 257 <br> |
268 <input type="range" ng-model="pixelDiffBgColorBrightness" | 258 <input type="range" ng-model="pixelDiffBgColorBrightness" |
269 ng-init="pixelDiffBgColorBrightness=64; pixelDiffBgColor=brig
htnessStringToHexColor(pixelDiffBgColorBrightness)" | 259 ng-init="pixelDiffBgColorBrightness=64; pixelDiffBgColor=brig
htnessStringToHexColor(pixelDiffBgColorBrightness)" |
270 ng-change="pixelDiffBgColor=brightnessStringToHexColor(pixelD
iffBgColorBrightness)" | 260 ng-change="pixelDiffBgColor=brightnessStringToHexColor(pixelD
iffBgColorBrightness)" |
271 title="image background brightness" | 261 title="image background brightness" |
272 min="0" max="255"/> | 262 min="0" max="255"/> |
273 </th> | 263 </th> |
274 <th> | 264 <th> |
275 <!-- item-selection checkbox column --> | 265 <!-- imagepair-selection checkbox column --> |
276 </th> | 266 </th> |
277 </tr> | 267 </tr> |
278 | 268 |
279 <tr ng-repeat="result in limitedTestData" ng-controller="ImageController
"> | 269 <tr ng-repeat="imagePair in limitedImagePairs" ng-controller="ImageContr
oller"> |
280 <td> | 270 <td> |
281 {{result.resultType}} | 271 {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRA
COLUMN__RESULT_TYPE]}} |
282 <br> | 272 <br> |
283 <button class="show-only-button" | 273 <button class="show-only-button" |
284 ng-hide="viewingTab != defaultTab" | 274 ng-hide="viewingTab != defaultTab" |
285 ng-click="showOnlyResultType(result.resultType)" | 275 ng-click="showOnlyResultType(imagePair[constants.KEY__EXTRA_
COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE])" |
286 title="show only results of type '{{result.resultType}}'"> | 276 title="show only results of type {{imagePair[constants.KEY__
EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE]}}"> |
287 show only | 277 show only |
288 </button> | 278 </button> |
289 <br> | 279 <br> |
290 <button class="show-all-button" | 280 <button class="show-all-button" |
291 ng-hide="viewingTab != defaultTab" | 281 ng-hide="viewingTab != defaultTab" |
292 ng-disabled="0 == setSize(hiddenResultTypes)" | 282 ng-disabled="0 == setSize(hiddenResultTypes)" |
293 ng-click="showAllResultTypes()" | 283 ng-click="showAllResultTypes()" |
294 title="show results of all types"> | 284 title="show results of all types"> |
295 show all | 285 show all |
296 </button> | 286 </button> |
297 </td> | 287 </td> |
298 <td ng-repeat="categoryName in ['builder', 'test']"> | 288 <td ng-repeat="categoryName in [constants.KEY__EXTRACOLUMN__BUILDER, c
onstants.KEY__EXTRACOLUMN__TEST]"> |
299 {{result[categoryName]}} | 289 {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][categoryName]}} |
300 <br> | 290 <br> |
301 <button class="show-only-button" | 291 <button class="show-only-button" |
302 ng-hide="viewingTab != defaultTab" | 292 ng-hide="viewingTab != defaultTab" |
303 ng-disabled="result[categoryName] == categoryValueMatch[cate
goryName]" | 293 ng-disabled="imagePair[constants.KEY__EXTRA_COLUMN_VALUES][c
ategoryName] == categoryValueMatch[categoryName]" |
304 ng-click="setCategoryValueMatch(categoryName, result[categor
yName])" | 294 ng-click="setCategoryValueMatch(categoryName, imagePair[cons
tants.KEY__EXTRA_COLUMN_VALUES][categoryName])" |
305 title="show only results of {{categoryName}} '{{result[categ
oryName]}}'"> | 295 title="show only results of {{categoryName}} {{imagePair[con
stants.KEY__EXTRA_COLUMN_VALUES][categoryName]}}"> |
306 show only | 296 show only |
307 </button> | 297 </button> |
308 <br> | 298 <br> |
309 <button class="show-all-button" | 299 <button class="show-all-button" |
310 ng-hide="viewingTab != defaultTab" | 300 ng-hide="viewingTab != defaultTab" |
311 ng-disabled="'' == categoryValueMatch[categoryName]" | 301 ng-disabled="'' == categoryValueMatch[categoryName]" |
312 ng-click="setCategoryValueMatch(categoryName, '')" | 302 ng-click="setCategoryValueMatch(categoryName, '')" |
313 title="show results of all {{categoryName}}s"> | 303 title="show results of all {{categoryName}}s"> |
314 show all | 304 show all |
315 </button> | 305 </button> |
316 </td> | 306 </td> |
317 <td> | 307 <td> |
318 {{result.config}} | 308 {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRA
COLUMN__CONFIG]}} |
319 <br> | 309 <br> |
320 <button class="show-only-button" | 310 <button class="show-only-button" |
321 ng-hide="viewingTab != defaultTab" | 311 ng-hide="viewingTab != defaultTab" |
322 ng-click="showOnlyConfig(result.config)" | 312 ng-click="showOnlyConfig(imagePair[constants.KEY__EXTRA_COLU
MN_VALUES][constants.KEY__EXTRACOLUMN__CONFIG])" |
323 title="show only results of config '{{result.config}}'"> | 313 title="show only results of config {{imagePair[constants.KEY
__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__CONFIG]}}"> |
324 show only | 314 show only |
325 </button> | 315 </button> |
326 <br> | 316 <br> |
327 <button class="show-all-button" | 317 <button class="show-all-button" |
328 ng-hide="viewingTab != defaultTab" | 318 ng-hide="viewingTab != defaultTab" |
329 ng-disabled="0 == setSize(hiddenConfigs)" | 319 ng-disabled="0 == setSize(hiddenConfigs)" |
330 ng-click="showAllConfigs()" | 320 ng-click="showAllConfigs()" |
331 title="show results of all configs"> | 321 title="show results of all configs"> |
332 show all | 322 show all |
333 </button> | 323 </button> |
334 </td> | 324 </td> |
335 <td> | 325 <td> |
336 <a ng-repeat="bug in result['bugs']" | 326 <a ng-repeat="bug in imagePair[constants.KEY__EXPECTATIONS_DATA][con
stants.KEY__EXPECTATIONS__BUGS]" |
337 href="https://code.google.com/p/skia/issues/detail?id={{bug}}" | 327 href="https://code.google.com/p/skia/issues/detail?id={{bug}}" |
338 target="_blank"> | 328 target="_blank"> |
339 {{bug}} | 329 {{bug}} |
340 </a> | 330 </a> |
341 </td> | 331 </td> |
342 | 332 |
343 <!-- expected image --> | 333 <!-- image A --> |
344 <td valign="bottom" width="{{imageSize}}"> | 334 <td valign="bottom" width="{{imageSize}}"> |
345 <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm
/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"
target="_blank">View Image</a><br/> | 335 <a href="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imag
ePair[constants.KEY__IMAGE_A_URL]}}" target="_blank">View Image</a><br/> |
346 <img-compare type="baseline" width="{{imageSize}}" | 336 <img-compare type="baseline" width="{{imageSize}}" |
347 src="http://chromium-skia-gm.commondatastorage.googleap
is.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDiges
t}}.png" /> | 337 src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]
}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" /> |
348 | |
349 </td> | 338 </td> |
350 | 339 |
351 <!-- actual image --> | 340 <!-- image B --> |
352 <td valign="bottom" width="{{imageSize}}"> | 341 <td valign="bottom" width="{{imageSize}}"> |
353 <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm
/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png" targ
et="_blank">View Image</a><br/> | 342 <a href="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imag
ePair[constants.KEY__IMAGE_B_URL]}}" target="_blank">View Image</a><br/> |
354 <img-compare type="test" width="{{imageSize}}" | 343 <img-compare type="test" width="{{imageSize}}" |
355 src="http://chromium-skia-gm.commondatastorage.googleap
is.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.
png" /> | 344 src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]
}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" /> |
356 | |
357 </td> | 345 </td> |
358 | 346 |
359 <!-- whitediffs: every differing pixel shown in white --> | 347 <!-- whitediffs: every differing pixel shown in white --> |
360 <td valign="bottom" width="{{imageSize}}"> | 348 <td valign="bottom" width="{{imageSize}}"> |
361 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" | 349 <div ng-hide="!imagePair[constants.KEY__IS_DIFFERENT]" |
362 title="{{result.numDifferingPixels | number:0}} of {{(100 * res
ult.numDifferingPixels / result.percentDifferingPixels) | number:0}} pixels ({{r
esult.percentDifferingPixels.toFixed(4)}}%) differ from expectation."> | 350 title="{{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KE
Y__DIFFERENCE_DATA__NUM_DIFF_PIXELS] | number:0}} of {{(100 * imagePair[constant
s.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__NUM_DIFF_PIXELS] / image
Pair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCENT_DIF
F_PIXELS]) | number:0}} pixels ({{imagePair[constants.KEY__DIFFERENCE_DATA][cons
tants.KEY__DIFFERENCE_DATA__PERCENT_DIFF_PIXELS].toFixed(4)}}%) differ from expe
ctation."> |
363 | 351 |
364 {{result.percentDifferingPixels.toFixed(4)}}% | 352 {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERE
NCE_DATA__PERCENT_DIFF_PIXELS].toFixed(4)}}% |
365 ({{result.numDifferingPixels}}) | 353 ({{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFER
ENCE_DATA__NUM_DIFF_PIXELS]}}) |
366 <br/> | 354 <br/> |
367 <a href="/static/generated-images/whitediffs/{{result.expectedHash
Digest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/> | 355 <a href="/static/generated-images/whitediffs/{{getImageDiffRelativ
eUrl(imagePair)}}" target="_blank">View Image</a><br/> |
368 <img-compare type="differingPixelsInWhite" width="{{imageSize}}" | 356 <img-compare type="differingPixelsInWhite" width="{{imageSize}}" |
369 src="/static/generated-images/whitediffs/{{result.exp
ectedHashDigest}}-vs-{{result.actualHashDigest}}.png" /> | 357 src="/static/generated-images/whitediffs/{{getImageDi
ffRelativeUrl(imagePair)}}" /> |
370 | 358 |
371 </div> | 359 </div> |
372 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" | 360 <div ng-hide="imagePair[constants.KEY__IS_DIFFERENT]" |
373 style="text-align:center"> | 361 style="text-align:center"> |
374 –none– | 362 –none– |
375 </div> | 363 </div> |
376 </td> | 364 </td> |
377 | 365 |
378 <!-- diffs: per-channel RGB deltas --> | 366 <!-- diffs: per-channel RGB deltas --> |
379 <td valign="bottom" width="{{imageSize}}"> | 367 <td valign="bottom" width="{{imageSize}}"> |
380 <div ng-hide="result.expectedHashDigest == result.actualHashDigest" | 368 <div ng-hide="!imagePair[constants.KEY__IS_DIFFERENT]" |
381 title="Perceptual difference measure is {{result.perceptualDiff
erence.toFixed(4)}}%. Maximum difference per channel: R={{result.maxDiffPerChan
nel[0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}"> | 369 title="Perceptual difference measure is {{imagePair[constants.K
EY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCEPTUAL_DIFF].toFixed(4)
}}%. Maximum difference per channel: R={{imagePair[constants.KEY__DIFFERENCE_DA
TA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL][0]}}, G={{imagePair[co
nstants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANN
EL][1]}}, B={{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENC
E_DATA__MAX_DIFF_PER_CHANNEL][2]}}"> |
382 | 370 |
383 {{result.perceptualDifference.toFixed(4)}}% | 371 {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERE
NCE_DATA__PERCEPTUAL_DIFF].toFixed(4)}}% |
384 {{result.maxDiffPerChannel}} | 372 {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERE
NCE_DATA__MAX_DIFF_PER_CHANNEL]}} |
385 <br/> | 373 <br/> |
386 <a href="/static/generated-images/diffs/{{result.expectedHashDiges
t}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/> | 374 <a href="/static/generated-images/diffs/{{getImageDiffRelativeUrl(
imagePair)}}" target="_blank">View Image</a><br/> |
387 <img-compare ng-style="{backgroundColor: pixelDiffBgColor}" | 375 <img-compare ng-style="{backgroundColor: pixelDiffBgColor}" |
388 type="differencePerPixel" width="{{imageSize}}" | 376 type="differencePerPixel" width="{{imageSize}}" |
389 src="/static/generated-images/diffs/{{result.expected
HashDigest}}-vs-{{result.actualHashDigest}}.png" | 377 src="/static/generated-images/diffs/{{getImageDiffRel
ativeUrl(imagePair)}}" |
390 ng-mousedown="MagnifyDraw($event, true)" | 378 ng-mousedown="MagnifyDraw($event, true)" |
391 ng-mousemove="MagnifyDraw($event, false)" | 379 ng-mousemove="MagnifyDraw($event, false)" |
392 ng-mouseup="MagnifyEnd($event)" | 380 ng-mouseup="MagnifyEnd($event)" |
393 ng-mouseleave="MagnifyEnd($event)" /> | 381 ng-mouseleave="MagnifyEnd($event)" /> |
394 | 382 |
395 </div> | 383 </div> |
396 <div ng-hide="result.expectedHashDigest != result.actualHashDigest" | 384 <div ng-hide="imagePair[constants.KEY__IS_DIFFERENT]" |
397 style="text-align:center"> | 385 style="text-align:center"> |
398 –none– | 386 –none– |
399 </div> | 387 </div> |
400 </td> | 388 </td> |
401 | 389 |
402 <td> | 390 <td> |
403 <input type="checkbox" | 391 <input type="checkbox" |
404 name="rowSelect" | 392 name="rowSelect" |
405 value="{{result.index}}" | 393 value="{{imagePair.index}}" |
406 ng-checked="isValueInArray(result.index, selectedItems)" | 394 ng-checked="isValueInArray(imagePair.index, selectedImagePair
s)" |
407 ng-click="toggleValueInArray(result.index, selectedItems)"> | 395 ng-click="toggleValueInArray(imagePair.index, selectedImagePa
irs)"> |
408 </tr> | 396 </tr> |
409 </table> <!-- results --> | 397 </table> <!-- imagePairs --> |
410 </td></tr></table> <!-- table holding results header + results table --> | 398 </td></tr></table> <!-- table holding results header + imagePairs table --> |
411 | 399 |
412 </div><!-- main display area of selected tab --> | 400 </div><!-- main display area of selected tab --> |
413 </div><!-- everything: hide until data is loaded --> | 401 </div><!-- everything: hide until data is loaded --> |
414 | 402 |
415 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and | |
416 issues list) from | |
417 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab
les.json ? | |
418 I tried importing the | |
419 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using | |
420 that to do so, but I got Access-Control-Allow-Origin errors. | |
421 --> | |
422 | |
423 </body> | 403 </body> |
424 </html> | 404 </html> |
OLD | NEW |