Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html i18n-values="dir:textdirection;"> | 2 <html i18n-values="dir:textdirection;"> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <!-- X-WebKit-CSP is our development name for Content-Security-Policy. | |
| 6 The 'unsafe-eval' is required for jstemplate_compiled.js. | |
| 7 TODO(tsepez) rename when Content-security-policy is done. | |
| 8 --> | |
| 9 <meta http-equiv="X-WebKit-CSP" content="object-src 'none'; script-src chrome:// resources 'self' 'unsafe-eval'"> | |
|
Evan Stade
2011/06/18 00:37:25
80 (I think you can just wrap strings in html like
| |
| 5 <style> | 10 <style> |
| 6 body { | 11 body { |
|
Evan Stade
2011/06/18 00:37:25
while you are at it, could you please move the sty
| |
| 7 margin: 10px; | 12 margin: 10px; |
| 8 min-width: 47em; | 13 min-width: 47em; |
| 9 } | 14 } |
| 10 | 15 |
| 11 a { | 16 a { |
| 12 color: blue; | 17 color: blue; |
| 13 font-size: 103%; | 18 font-size: 103%; |
| 14 } | 19 } |
| 15 | 20 |
| 16 div#header { | 21 div#header { |
| (...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 142 div.needs-restart { | 147 div.needs-restart { |
| 143 padding-top: 10px; | 148 padding-top: 10px; |
| 144 -webkit-padding-start: 5px; | 149 -webkit-padding-start: 5px; |
| 145 } | 150 } |
| 146 | 151 |
| 147 button { | 152 button { |
| 148 font-size: 104%; | 153 font-size: 104%; |
| 149 } | 154 } |
| 150 | 155 |
| 151 </style> | 156 </style> |
| 152 <script> | |
| 153 | |
| 154 /** | |
| 155 * This variable structure is here to document the structure that the template | |
| 156 * expects to correctly populate the page. | |
| 157 */ | |
| 158 var flagsExperimentsDataFormat = { | |
| 159 'flagsExperiments': [ | |
| 160 { | |
| 161 'internal_name': 'Experiment ID string', | |
| 162 'name': 'Experiment Name', | |
| 163 'description': 'description', | |
| 164 /* enabled is only set if the experiment is single valued */ | |
| 165 'enabled': true, | |
| 166 /* choices is only set if the experiment has multiple values */ | |
| 167 'choices': [ | |
| 168 { | |
| 169 'internal_name': 'Experiment ID string', | |
| 170 'description': 'description', | |
| 171 'selected': true | |
| 172 } | |
| 173 ] | |
| 174 } | |
| 175 ], | |
| 176 'needsRestart': false | |
| 177 }; | |
| 178 | |
| 179 /** | |
| 180 * Takes the |flagsExperimentsData| input argument which represents data about | |
| 181 * the currently available experiments and populates the html jstemplate | |
| 182 * with that data. It expects an object structure like the above. | |
| 183 * @param {Object} flagsExperimentsData Information about available experiments | |
| 184 */ | |
| 185 function renderTemplate(flagsExperimentsData) { | |
| 186 // This is the javascript code that processes the template: | |
| 187 var input = new JsEvalContext(flagsExperimentsData); | |
| 188 var output = document.getElementById('flagsExperimentTemplate'); | |
| 189 jstProcess(input, output); | |
| 190 } | |
| 191 | |
| 192 /** | |
| 193 * Asks the C++ FlagsDOMHandler to get details about the available experiments | |
| 194 * and return detailed data about the configuration. The FlagsDOMHandler | |
| 195 * should reply to returnFlagsExperiments() (below). | |
| 196 */ | |
| 197 function requestFlagsExperimentsData() { | |
| 198 chrome.send('requestFlagsExperiments', []); | |
| 199 } | |
| 200 | |
| 201 /** | |
| 202 * Asks the C++ FlagsDOMHandler to restart the browser (restoring tabs). | |
| 203 */ | |
| 204 function restartBrowser() { | |
| 205 chrome.send('restartBrowser', []); | |
| 206 } | |
| 207 | |
| 208 /** | |
| 209 * Called by the WebUI to re-populate the page with data representing the | |
| 210 * current state of installed experiments. | |
| 211 */ | |
| 212 function returnFlagsExperiments(flagsExperimentsData){ | |
| 213 var bodyContainer = document.getElementById('body-container'); | |
| 214 renderTemplate(flagsExperimentsData); | |
| 215 bodyContainer.style.visibility = 'visible'; | |
| 216 } | |
| 217 | |
| 218 /** | |
| 219 * Handles a 'enable' or 'disable' button getting clicked. | |
| 220 */ | |
| 221 function handleEnableExperiment(node, enable) { | |
| 222 // Tell the C++ FlagsDOMHandler to enable/disable the experiment. | |
| 223 chrome.send('enableFlagsExperiment', [String(node.internal_name), | |
| 224 String(enable)]); | |
| 225 requestFlagsExperimentsData(); | |
| 226 } | |
| 227 | |
| 228 /** | |
| 229 * Invoked when the selection of a multi-value choice is changed to the | |
| 230 * specified index. | |
| 231 */ | |
| 232 function handleSelectChoiceExperiment(node, index) { | |
| 233 // Tell the C++ FlagsDOMHandler to enable the selected choice. | |
| 234 chrome.send('enableFlagsExperiment', | |
| 235 [String(node.internal_name) + "@" + index, "true"]); | |
| 236 requestFlagsExperimentsData(); | |
| 237 } | |
| 238 | |
| 239 // Get data and have it displayed upon loading. | |
| 240 document.addEventListener('DOMContentLoaded', requestFlagsExperimentsData); | |
| 241 | |
| 242 </script> | |
| 243 </head> | |
| 244 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> | 157 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| 245 <div id="body-container" style="visibility:hidden"> | 158 <div id="body-container" style="visibility:hidden"> |
| 246 | 159 |
| 247 <div id="header"><h1 i18n-content="flagsLongTitle">TITLE</h1></div> | 160 <div id="header"><h1 i18n-content="flagsLongTitle">TITLE</h1></div> |
| 248 | 161 |
| 249 <div id="blurb-container"> | 162 <div id="blurb-container"> |
| 250 <span id="blurb-warning" i18n-content="flagsWarningHeader">WARNING</span> | 163 <span id="blurb-warning" i18n-content="flagsWarningHeader">WARNING</span> |
| 251 <span i18n-content="flagsBlurb">WARNING TEXT</span> | 164 <span i18n-content="flagsBlurb">WARNING TEXT</span> |
| 252 </div> | 165 </div> |
| 253 | 166 |
| (...skipping 29 matching lines...) Expand all Loading... | |
| 283 <tr jsvalues="class:enabled ? 'experiment-enabled' : 'experiment-disable d'"> | 196 <tr jsvalues="class:enabled ? 'experiment-enabled' : 'experiment-disable d'"> |
| 284 <td valign="top"> | 197 <td valign="top"> |
| 285 <div class="experiment-text"> | 198 <div class="experiment-text"> |
| 286 <div> | 199 <div> |
| 287 <span class="experiment-name" | 200 <span class="experiment-name" |
| 288 jscontent="name">NAME</span> | 201 jscontent="name">NAME</span> |
| 289 <div> | 202 <div> |
| 290 <span jsvalues=".innerHTML:description"> | 203 <span jsvalues=".innerHTML:description"> |
| 291 </div> | 204 </div> |
| 292 <div jsdisplay="choices && choices.length > 0"> | 205 <div jsdisplay="choices && choices.length > 0"> |
| 293 <select jsvalues=".internal_name:internal_name;.disabled:!enable d" | 206 <select |
| 294 onchange="handleSelectChoiceExperiment(this, this.select edIndex)"> | 207 classs="experiment-select" |
|
Evan Stade
2011/06/18 00:37:25
s/classs/class
also 4 space indent rather than 2
| |
| 208 jsvalues=".internal_name:internal_name;.disabled:!enabled"> | |
| 295 <option jsvalues=".selected:selected" | 209 <option jsvalues=".selected:selected" |
| 296 jsselect="choices" | 210 jsselect="choices" |
| 297 jscontent="description">NAME | 211 jscontent="description">NAME |
| 298 </option> | 212 </option> |
| 299 </select> | 213 </select> |
| 300 </div> | 214 </div> |
| 301 </div> | 215 </div> |
| 302 </div> | 216 </div> |
| 303 <div class="experiment-actions"> | 217 <div class="experiment-actions"> |
| 304 <!-- If enabled isn't set (i.e. in multi_type options), | 218 <!-- If enabled isn't set (i.e. in multi_type options), |
| 305 then both jsdisplay tests fail, and we get no | 219 then both jsdisplay tests fail, and we get no |
| 306 rendering from this section. --> | 220 rendering from this section. --> |
| 307 <span> | 221 <span> |
| 308 <a | 222 <a |
| 223 class="experiment-disable-link" | |
| 309 jsvalues=".internal_name:internal_name" | 224 jsvalues=".internal_name:internal_name" |
| 310 jsdisplay="enabled" | 225 jsdisplay="enabled" |
| 311 onclick="handleEnableExperiment(this, false)" | 226 href="#" |
| 312 href="javascript:void(0);" | |
| 313 i18n-content="disable" | 227 i18n-content="disable" |
| 314 >DISABLE</a> | 228 >DISABLE</a> |
| 315 <a | 229 <a |
| 230 class="experiment-enable-link" | |
| 316 jsvalues=".internal_name:internal_name" | 231 jsvalues=".internal_name:internal_name" |
| 317 jsdisplay="!enabled" | 232 jsdisplay="!enabled" |
| 318 onclick="handleEnableExperiment(this, true)" | 233 href="#" |
| 319 href="javascript:void(0);" | |
| 320 i18n-content="enable" | 234 i18n-content="enable" |
| 321 >ENABLE</a> | 235 >ENABLE</a> |
| 322 </span> | 236 </span> |
| 323 </div> | 237 </div> |
| 324 </td> | 238 </td> |
| 325 </tr> | 239 </tr> |
| 326 </table> | 240 </table> |
| 327 </div> | 241 </div> |
| 328 </div> | 242 </div> |
| 329 | 243 |
| 330 <div class="needs-restart" jsdisplay="needsRestart"> | 244 <div class="needs-restart" jsdisplay="needsRestart"> |
| 331 <div i18n-content="flagsRestartNotice">NEEDS_RESTART</div> | 245 <div i18n-content="flagsRestartNotice">NEEDS_RESTART</div> |
| 332 <button type="button" | 246 <button class="experiment-restart-button" |
| 333 onclick="restartBrowser();" | 247 type="button" |
| 334 i18n-content="flagsRestartButton">RESTART</button> | 248 i18n-content="flagsRestartButton">RESTART</button> |
| 335 </div> | 249 </div> |
| 336 </div> | 250 </div> |
| 337 </div> | 251 </div> |
| 338 </div> | 252 </div> |
| 253 <script src="chrome://flags/flags.js"></script> | |
| 254 <script src="chrome://flags/strings.js"></script> | |
| 255 <script src="chrome://resources/js/i18n_template.js"></script> | |
| 256 <script src="chrome://resources/js/i18n_process.js"></script> | |
| 257 <script src="chrome://resources/js/jstemplate_compiled.js"></script> | |
| 339 </body> | 258 </body> |
| 340 </html> | 259 </html> |
| OLD | NEW |