| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE HTML> | |
| 2 <html i18n-values="dir:textdirection;"><head> | |
| 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| 4 <title i18n-content="title"></title> | |
| 5 | |
| 6 <style> | |
| 7 body { | |
| 8 font-size: 84%; | |
| 9 font-family: Arial, Helvetica, sans-serif; | |
| 10 padding: 0.75em; | |
| 11 margin: 0; | |
| 12 min-width: 45em; | |
| 13 } | |
| 14 | |
| 15 h1, h2 { | |
| 16 font-size: 120%; | |
| 17 letter-spacing: -1px; | |
| 18 margin: 0; | |
| 19 } | |
| 20 | |
| 21 h1 { | |
| 22 font-weight: bold; | |
| 23 color: #4a8ee6; | |
| 24 padding: 0; | |
| 25 } | |
| 26 | |
| 27 h2 { | |
| 28 font-weight: normal; | |
| 29 padding: 0.5em 1em; | |
| 30 color: #3a75bd; | |
| 31 -webkit-margin-start: -38px; | |
| 32 -webkit-padding-start: 38px; | |
| 33 border-top: 1px solid #3a75bd; | |
| 34 padding-top: 0.5em; | |
| 35 } | |
| 36 | |
| 37 h2:first-child { | |
| 38 border-top: 0; | |
| 39 padding-top: 0; | |
| 40 float: left; | |
| 41 vertical-align: text-bottom; | |
| 42 } | |
| 43 | |
| 44 #header { | |
| 45 padding: 0.6em 1em 0.75em 0; | |
| 46 margin-bottom: 0.75em; | |
| 47 position: relative; | |
| 48 overflow: hidden; | |
| 49 background: #5296de; | |
| 50 background-size: 100%; | |
| 51 border: 1px solid #3a75bd; | |
| 52 border-radius: 6px; | |
| 53 color: white; | |
| 54 text-shadow: 0 0 2px black; | |
| 55 } | |
| 56 | |
| 57 html[dir='rtl'] #header { | |
| 58 padding: 0.6em 0 0.75em 1em; | |
| 59 } | |
| 60 | |
| 61 #header h1 { | |
| 62 -webkit-padding-start: 3em; | |
| 63 margin: 0; | |
| 64 display: inline; | |
| 65 background: url('shared/images/gear.png') no-repeat; | |
| 66 background-position: 12px 60%; | |
| 67 color: white; | |
| 68 } | |
| 69 | |
| 70 html[dir='rtl'] #header h1 { | |
| 71 background-position-left: auto; | |
| 72 backgroun-position-right: 12px; | |
| 73 } | |
| 74 | |
| 75 #header p { | |
| 76 font-size: 84%; | |
| 77 font-style: italic; | |
| 78 padding: 0; | |
| 79 margin: 0; | |
| 80 color: white; | |
| 81 -webkit-padding-start: 0.4em; | |
| 82 display: inline; | |
| 83 } | |
| 84 | |
| 85 .list { | |
| 86 line-height: 200%; | |
| 87 border-collapse: collapse; | |
| 88 font-size: 84%; | |
| 89 width: 100%; | |
| 90 } | |
| 91 .list:not(.filtered) tr:nth-child(odd) td { | |
| 92 background: #eff3ff; | |
| 93 } | |
| 94 | |
| 95 .list td { | |
| 96 padding: 0 0.5em; | |
| 97 vertical-align: top; | |
| 98 line-height: 1.4em; | |
| 99 padding-top: 0.35em; | |
| 100 font-family: 'Courier New', monospace; | |
| 101 white-space: pre; | |
| 102 } | |
| 103 | |
| 104 .list tr td:nth-last-child(1), | |
| 105 .list tr th:nth-last-child(1) { | |
| 106 -webkit-padding-end: 1em; | |
| 107 } | |
| 108 | |
| 109 .list:not(.filtered) .tab .name { | |
| 110 -webkit-padding-start: 1.5em; | |
| 111 } | |
| 112 | |
| 113 .list .name { | |
| 114 width: 20%; | |
| 115 } | |
| 116 | |
| 117 .list .button_cell { | |
| 118 width: 7%; | |
| 119 } | |
| 120 | |
| 121 .list .name div { | |
| 122 height: 1.6em; | |
| 123 overflow: hidden; | |
| 124 white-space: nowrap; | |
| 125 text-overflow: ellipsis; | |
| 126 } | |
| 127 | |
| 128 .button_hidden { | |
| 129 display: none; | |
| 130 } | |
| 131 | |
| 132 .number_expanded, .number_collapsed { | |
| 133 text-align: left; | |
| 134 width: 80%; | |
| 135 } | |
| 136 | |
| 137 html[dir='rtl'] .number_expanded, html[dir='rtl'] .number_collapsed { | |
| 138 text-align: right; | |
| 139 } | |
| 140 | |
| 141 tr:not(.firstRow) > *:nth-child(1), | |
| 142 tr:not(.firstRow) > *:nth-child(2), | |
| 143 tr.firstRow th:nth-child(1), | |
| 144 tr.firstRow th:nth-child(2) { | |
| 145 -webkit-border-end: 1px solid #b5c6de; | |
| 146 } | |
| 147 | |
| 148 .name { | |
| 149 background-position: 5em center; | |
| 150 background-repeat: no-repeat; | |
| 151 } | |
| 152 | |
| 153 html[dir='rtl'] #details .name { | |
| 154 background-position-left: auto; | |
| 155 background-position-right: 5em; | |
| 156 } | |
| 157 | |
| 158 .number_collapsed .stat_value { | |
| 159 display: none; | |
| 160 } | |
| 161 | |
| 162 .number_expanded .stat_value { | |
| 163 display: auto; | |
| 164 } | |
| 165 | |
| 166 #anchor { | |
| 167 display: none; | |
| 168 } | |
| 169 | |
| 170 .globalButton { | |
| 171 float: left; | |
| 172 margin: 1px 5px; | |
| 173 } | |
| 174 | |
| 175 html[dir='rtl'] .globalButton { | |
| 176 float: right; | |
| 177 } | |
| 178 </style> | |
| 179 <script src="shared/js/local_strings.js"></script> | |
| 180 <script> | |
| 181 var localStrings; | |
| 182 | |
| 183 function getValueDivForButton(button) { | |
| 184 return document.getElementById(button.id.substr(0, button.id.length - 4)); | |
| 185 } | |
| 186 | |
| 187 function getButtonForValueDiv(valueDiv) { | |
| 188 return document.getElementById(valueDiv.id + '-btn'); | |
| 189 } | |
| 190 | |
| 191 function changeCollapsedStatus() { | |
| 192 var valueDiv = getValueDivForButton(this); | |
| 193 if (valueDiv.parentNode.className == 'number_collapsed') { | |
| 194 valueDiv.parentNode.className = 'number_expanded'; | |
| 195 this.textContent = localStrings.getString('collapse_btn'); | |
| 196 } else { | |
| 197 valueDiv.parentNode.className = 'number_collapsed'; | |
| 198 this.textContent = localStrings.getString('expand_btn'); | |
| 199 } | |
| 200 } | |
| 201 | |
| 202 function collapseAll() { | |
| 203 var valueDivs = document.getElementsByClassName('stat_value'); | |
| 204 for(var i = 0; i < valueDivs.length; i++) { | |
| 205 var button = getButtonForValueDiv(valueDivs[i]); | |
| 206 if (button && button.className != 'button_hidden') { | |
| 207 button.textContent = localStrings.getString('expand_btn'); | |
| 208 valueDivs[i].parentNode.className = 'number_collapsed'; | |
| 209 } | |
| 210 } | |
| 211 } | |
| 212 | |
| 213 function expandAll() { | |
| 214 var valueDivs = document.getElementsByClassName('stat_value'); | |
| 215 for(var i = 0; i < valueDivs.length; i++) { | |
| 216 var button = getButtonForValueDiv(valueDivs[i]); | |
| 217 if (button && button.className != 'button_hidden') { | |
| 218 button.textContent = localStrings.getString('collapse_btn'); | |
| 219 valueDivs[i].parentNode.className = 'number_expanded'; | |
| 220 } | |
| 221 } | |
| 222 } | |
| 223 | |
| 224 document.addEventListener('DOMContentLoaded', function() { | |
| 225 localStrings = new LocalStrings(); | |
| 226 | |
| 227 var collapseAllBtn = document.getElementById('collapseAll'); | |
| 228 collapseAllBtn.onclick = collapseAll; | |
| 229 | |
| 230 var expandAllBtn = document.getElementById('expandAll'); | |
| 231 expandAllBtn.onclick = expandAll; | |
| 232 | |
| 233 var anchorName = document.getElementById('anchor').textContent; | |
| 234 var valueDivs = document.getElementsByClassName('stat_value'); | |
| 235 for(var i = 0; i < valueDivs.length; i++) { | |
| 236 var button = getButtonForValueDiv(valueDivs[i]); | |
| 237 button.onclick = changeCollapsedStatus; | |
| 238 if (valueDivs[i].textContent.split('\n').length > 1) { | |
| 239 button.textContent = localStrings.getString('expand_btn'); | |
| 240 valueDivs[i].parentNode.className = 'number_collapsed'; | |
| 241 } else { | |
| 242 button.className = 'button_hidden'; | |
| 243 } | |
| 244 } | |
| 245 }); | |
| 246 </script> | |
| 247 | |
| 248 </head> | |
| 249 <body id="t"> | |
| 250 <div id="header"> | |
| 251 <h1 i18n-content="title"></h1> | |
| 252 <p i18n-content="description"></p> | |
| 253 </div> | |
| 254 <div id="content"> | |
| 255 <h2 i18n-content="table_title"></h2> | |
| 256 <div id="anchor" jscontent="anchor"></div> | |
| 257 <button id="expandAll" class="globalButton" i18n-content="expand_all_btn"> | |
| 258 </button> | |
| 259 <button id="collapseAll" class="globalButton" | |
| 260 i18n-content="collapse_all_btn"></button> | |
| 261 <table class="list" id="details"> | |
| 262 <tr jsselect="details"> | |
| 263 <td class="name"><a jsvalues="name:anchor_value"><div | |
| 264 jscontent="stat_name"></div></a></td> | |
| 265 <td class="button_cell"><button jsvalues="id:stat_name + '-value-btn'" | |
| 266 class="expand_status"></button></td> | |
| 267 <td class="number"><div class="stat_value" jscontent="stat_value" | |
| 268 jsvalues="id:stat_name + '-value'"></div></td> | |
| 269 </tr> | |
| 270 </table> | |
| 271 </div> | |
| 272 </body> | |
| 273 </html> | |
| OLD | NEW |