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