| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | |
| epoger@google.com | 542b65f | 2013-10-15 20:10:33 +0000 | [diff] [blame] | 3 | <html ng-app="Loader" ng-controller="Loader.Controller"> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 4 | |
| 5 | <head> |
| epoger@google.com | 542b65f | 2013-10-15 20:10:33 +0000 | [diff] [blame] | 6 | <title ng-bind="windowTitle"></title> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 7 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> |
| 8 | <script src="loader.js"></script> |
| 9 | </head> |
| 10 | |
| 11 | <body> |
| epoger@google.com | dcb4e65 | 2013-10-11 18:45:33 +0000 | [diff] [blame] | 12 | <em> |
| 13 | {{loadingMessage}} |
| epoger@google.com | 5f2bb00 | 2013-10-02 18:57:48 +0000 | [diff] [blame] | 14 | </em> |
| epoger@google.com | afaad3d | 2013-09-30 15:06:25 +0000 | [diff] [blame] | 15 | |
| epoger@google.com | cce4e09 | 2013-10-18 18:36:25 +0000 | [diff] [blame] | 16 | <div ng-hide="!categories"> |
| epoger@google.com | 9fb6c8a | 2013-10-09 18:05:58 +0000 | [diff] [blame] | 17 | <div ng-hide="!(header.isEditable && header.isExported)" |
| 18 | style="background-color:#ffbb00"> |
| 19 | WARNING! These results are editable and exported, so any user |
| 20 | who can connect to this server over the network can modify them. |
| 21 | </div> |
| epoger@google.com | 542b65f | 2013-10-15 20:10:33 +0000 | [diff] [blame] | 22 | <div ng-hide="!(header.timeUpdated)"> |
| 23 | Results current as of {{localTimeString(header.timeUpdated)}} |
| 24 | </div> |
| epoger@google.com | cce4e09 | 2013-10-18 18:36:25 +0000 | [diff] [blame] | 25 | <table border="1"> |
| epoger@google.com | 5f2bb00 | 2013-10-02 18:57:48 +0000 | [diff] [blame] | 26 | <tr> |
| 27 | <th colspan="2"> |
| 28 | Filters |
| 29 | </th> |
| 30 | <th> |
| 31 | Settings |
| 32 | </th> |
| 33 | </tr> |
| 34 | <tr valign="top"> |
| 35 | <td> |
| 36 | resultType<br> |
| 37 | <label ng-repeat="(resultType, count) in categories['resultType']"> |
| 38 | <input type="checkbox" |
| 39 | name="resultTypes" |
| 40 | value="{{resultType}}" |
| 41 | ng-checked="!isHiddenResultType(resultType)" |
| 42 | ng-click="toggleHiddenResultType(resultType)"> |
| 43 | {{resultType}} ({{count}})<br> |
| 44 | </label> |
| 45 | </td> |
| 46 | <td> |
| 47 | config<br> |
| 48 | <label ng-repeat="(config, count) in categories['config']"> |
| 49 | <input type="checkbox" |
| 50 | name="configs" |
| 51 | value="{{config}}" |
| 52 | ng-checked="!isHiddenConfig(config)" |
| 53 | ng-click="toggleHiddenConfig(config)"> |
| 54 | {{config}} ({{count}})<br> |
| 55 | </label> |
| 56 | </td> |
| 57 | <td><table> |
| 58 | <tr><td> |
| 59 | Image size |
| 60 | <input type="text" ng-model="imageSizePending" |
| 61 | ng-init="imageSizePending=100" |
| 62 | ng-change="areUpdatesPending = true" |
| 63 | maxlength="4"/> |
| 64 | </td></tr> |
| 65 | <tr><td> |
| 66 | Max records to display |
| 67 | <input type="text" ng-model="displayLimitPending" |
| 68 | ng-init="displayLimitPending=50" |
| 69 | ng-change="areUpdatesPending = true" |
| 70 | maxlength="4"/> |
| 71 | </td></tr> |
| 72 | <tr><td> |
| 73 | <button style="font-size:30px" |
| 74 | ng-click="updateResults()" |
| 75 | ng-disabled="!areUpdatesPending"> |
| 76 | Update Results |
| 77 | </button> |
| 78 | </td></tr> |
| 79 | </tr></table></td> |
| 80 | </tr> |
| 81 | </table> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 82 | |
| epoger@google.com | cce4e09 | 2013-10-18 18:36:25 +0000 | [diff] [blame] | 83 | <p> |
| 84 | TODO(epoger): |
| 85 | <input type="checkbox" name="showTodosCheckbox" value="true" |
| 86 | ng-checked="showTodos == true" |
| 87 | ng-click="showTodos = !showTodos"> |
| 88 | show |
| 89 | <ul ng-hide="!showTodos"> |
| 90 | <li> |
| 91 | Implement editing of results (we have added the --editable |
| 92 | flag to the server, but it's not fully implemented yet). |
| 93 | <div ng-hide="!header.isEditable"> |
| 94 | Currently selected items are: {{selectedItems}} |
| 95 | </div> |
| 96 | </li><li> |
| 97 | If server was run with --reload flag, automatically check for |
| 98 | new results and tell the user when new results are available |
| 99 | (the user can reload the page if he wants to see them). |
| 100 | </li><li> |
| 101 | Add ability to filter builder and test names |
| 102 | (using a free-form text field, with partial string match) |
| 103 | </li><li> |
| 104 | Add more columns, such as pixel diffs, notes/bugs, |
| 105 | ignoreFailure boolean |
| 106 | </li><li> |
| 107 | Improve the column sorting, as per |
| 108 | <a href="http://jsfiddle.net/vojtajina/js64b/14/"> |
| 109 | http://jsfiddle.net/vojtajina/js64b/14/ |
| 110 | </a> |
| 111 | </li><li> |
| 112 | Right now, if you change which column is used to |
| 113 | sort the data, the column widths may fluctuate based on the |
| 114 | longest string <i>currently visible</i> within the top {{displayLimit}} |
| 115 | results. Can we fix the column widths to be wide enough to hold |
| 116 | any result, even the currently hidden results? |
| 117 | </li> |
| 118 | </ul> |
| epoger@google.com | 5f2bb00 | 2013-10-02 18:57:48 +0000 | [diff] [blame] | 119 | <p> |
| epoger@google.com | cce4e09 | 2013-10-18 18:36:25 +0000 | [diff] [blame] | 120 | Found {{filteredTestData.length}} matches, and displaying the first |
| 121 | {{displayLimit}}: <br> |
| 122 | <!-- TODO(epoger): If (displayLimit <= filteredTestData.length), |
| 123 | modify this message to indicate that all results are shown. --> |
| epoger@google.com | 5f2bb00 | 2013-10-02 18:57:48 +0000 | [diff] [blame] | 124 | (click on the column header radio buttons to re-sort by that column) |
| 125 | <br> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 126 | <table border="1"> |
| 127 | <tr> |
| epoger@google.com | 5f2bb00 | 2013-10-02 18:57:48 +0000 | [diff] [blame] | 128 | <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'config']"> |
| 129 | <input type="radio" |
| 130 | name="sortColumnRadio" |
| 131 | value="{{categoryName}}" |
| 132 | ng-checked="(sortColumn == categoryName)" |
| 133 | ng-click="sortResultsBy(categoryName)"> |
| 134 | {{categoryName}} |
| 135 | </th> |
| 136 | <th> |
| 137 | <input type="radio" |
| 138 | name="sortColumnRadio" |
| 139 | value="expectedHashDigest" |
| 140 | ng-checked="(sortColumn == 'expectedHashDigest')" |
| 141 | ng-click="sortResultsBy('expectedHashDigest')"> |
| 142 | expected image |
| 143 | </th> |
| 144 | <th> |
| 145 | <input type="radio" |
| 146 | name="sortColumnRadio" |
| 147 | value="actualHashDigest" |
| 148 | ng-checked="(sortColumn == 'actualHashDigest')" |
| 149 | ng-click="sortResultsBy('actualHashDigest')"> |
| 150 | actual image |
| 151 | </th> |
| epoger@google.com | 9fb6c8a | 2013-10-09 18:05:58 +0000 | [diff] [blame] | 152 | <th ng-hide="!header.isEditable"> |
| 153 | <!-- item-selection checkbox column --> |
| epoger@google.com | 9fb6c8a | 2013-10-09 18:05:58 +0000 | [diff] [blame] | 154 | </th> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 155 | </tr> |
| epoger@google.com | 5f2bb00 | 2013-10-02 18:57:48 +0000 | [diff] [blame] | 156 | <tr ng-repeat="result in limitedTestData"> |
| 157 | <td>{{result.resultType}}</td> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 158 | <td>{{result.builder}}</td> |
| 159 | <td>{{result.test}}</td> |
| 160 | <td>{{result.config}}</td> |
| 161 | <td> |
| epoger@google.com | dcb4e65 | 2013-10-11 18:45:33 +0000 | [diff] [blame] | 162 | <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 163 | <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"/> |
| 164 | </a> |
| 165 | </td> |
| 166 | <td> |
| epoger@google.com | dcb4e65 | 2013-10-11 18:45:33 +0000 | [diff] [blame] | 167 | <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"> |
| 168 | <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"/> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 169 | </a> |
| 170 | </td> |
| epoger@google.com | 9fb6c8a | 2013-10-09 18:05:58 +0000 | [diff] [blame] | 171 | <td ng-hide="!header.isEditable"> |
| 172 | <input type="checkbox" |
| 173 | name="rowSelect" |
| 174 | value="{{result.index}}" |
| 175 | ng-checked="isItemSelected(result.index)" |
| 176 | ng-click="toggleItemSelected(result.index)"> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 177 | </tr> |
| 178 | </table> |
| epoger@google.com | cce4e09 | 2013-10-18 18:36:25 +0000 | [diff] [blame] | 179 | </div> |
| epoger@google.com | f9d134d | 2013-09-27 15:02:44 +0000 | [diff] [blame] | 180 | |
| 181 | <!-- TODO(epoger): Can we get the base URLs (commondatastorage and |
| 182 | issues list) from |
| 183 | http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json |
| 184 | ? I tried importing the |
| 185 | http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using |
| 186 | that to do so, but I got Access-Control-Allow-Origin errors. |
| 187 | --> |
| 188 | |
| 189 | </body> |
| 190 | </html> |