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 <style> | 5 <!-- X-WebKit-CSP is our development name for Content-Security-Policy. |
| 6 body { | 6 The 'unsafe-eval' is required for jstemplate_compiled.js. |
| 7 margin: 10px; | 7 TODO(tsepez) rename when Content-security-policy is done. |
| 8 min-width: 47em; | 8 --> |
| 9 } | 9 <meta http-equiv="X-WebKit-CSP" content="object-src 'none'; |
| 10 | 10 script-src chrome://resources 'self' 'unsafe-eval'"> |
|
Evan Stade
2011/06/20 18:50:28
4 space indent for continuation lines
| |
| 11 a { | 11 <link rel="stylesheet" href="flags.css"/> |
| 12 color: blue; | 12 <script src="chrome://flags/flags.js"></script> |
| 13 font-size: 103%; | 13 <script src="chrome://flags/strings.js"></script> |
| 14 } | 14 <script src="chrome://resources/js/i18n_template.js"></script> |
| 15 | |
| 16 div#header { | |
| 17 margin-bottom: 1.05em; | |
| 18 /* 67px is the height of the header's background image. */ | |
| 19 min-height: 67px; | |
| 20 overflow: hidden; | |
| 21 padding-bottom: 20px; | |
| 22 -webkit-padding-start: 0; | |
| 23 padding-top: 20px; | |
| 24 position: relative; | |
| 25 box-sizing: border-box; | |
| 26 } | |
| 27 | |
| 28 #header h1 { | |
| 29 background: url('../../app/theme/flags_section.png') 0px 20px no-repeat; | |
| 30 display: inline; | |
| 31 margin: 0; | |
| 32 padding-bottom: 43px; | |
| 33 -webkit-padding-start: 75px; | |
| 34 padding-top: 40px; | |
| 35 } | |
| 36 | |
| 37 html[dir=rtl] #header h1 { | |
| 38 background: url('../../app/theme/flags_section.png') right no-repeat; | |
| 39 } | |
| 40 | |
| 41 h1 { | |
| 42 font-size: 156%; | |
| 43 font-weight: bold; | |
| 44 padding: 0; | |
| 45 margin: 0; | |
| 46 } | |
| 47 | |
| 48 #blurb-container { | |
| 49 padding-bottom: 1.5em; | |
| 50 font-size: 120%; | |
| 51 } | |
| 52 | |
| 53 #blurb-warning { | |
| 54 color: red; | |
| 55 font-weight: bold; | |
| 56 } | |
| 57 | |
| 58 div.content { | |
| 59 font-size: 88%; | |
| 60 margin-top: 5px; | |
| 61 } | |
| 62 | |
| 63 .section-header { | |
| 64 background: #ebeff9; | |
| 65 border-top: 1px solid #b5c7de; | |
| 66 font-size: 99%; | |
| 67 padding-bottom: 2px; | |
| 68 -webkit-padding-start: 5px; | |
| 69 padding-top: 3px; | |
| 70 width: 100%; | |
| 71 } | |
| 72 | |
| 73 .section-header > table tr td:first-child { | |
| 74 width: 100%; | |
| 75 } | |
| 76 | |
| 77 .section-header > table { | |
| 78 width: 100%; | |
| 79 } | |
| 80 | |
| 81 .section-header-title { | |
| 82 font-weight: bold; | |
| 83 } | |
| 84 | |
| 85 .vbox-container { | |
| 86 display: -webkit-box; | |
| 87 -webkit-box-orient: vertical; | |
| 88 } | |
| 89 | |
| 90 .wbox { | |
| 91 display: -webkit-box; | |
| 92 -webkit-box-align: stretch; | |
| 93 -webkit-box-flex: 1; | |
| 94 } | |
| 95 | |
| 96 #top { | |
| 97 -webkit-padding-end: 5px; | |
| 98 } | |
| 99 | |
| 100 /* Disabled experiments display grey text on a grey background. The title, | |
| 101 however, should remain completely legible. */ | |
| 102 .experiment-disabled > td { | |
| 103 background: #F0F0F0; | |
| 104 color: #A0A0A0; | |
| 105 } | |
| 106 | |
| 107 .experiment-disabled .experiment-name { | |
| 108 color: #000; | |
| 109 } | |
| 110 | |
| 111 .experiment { | |
| 112 border-bottom: 1px solid #cdcdcd; | |
| 113 } | |
| 114 | |
| 115 .experiment td { | |
| 116 padding-bottom: 4px; | |
| 117 padding-top: 5px; | |
| 118 } | |
| 119 | |
| 120 /* Indent the text related to each experiment. */ | |
| 121 .experiment-text { | |
| 122 -webkit-padding-start: 5px; | |
| 123 } | |
| 124 | |
| 125 .experiment-name { | |
| 126 font-weight: bold; | |
| 127 } | |
| 128 | |
| 129 .no-experiments { | |
| 130 margin: 6em 0 0; | |
| 131 text-align: center; | |
| 132 font-size: 1.2em; | |
| 133 } | |
| 134 | |
| 135 /* Match the indentation of .experiment-text. */ | |
| 136 .experiment-actions { | |
| 137 -webkit-padding-start: 5px; | |
| 138 margin-top: 0.2em; | |
| 139 margin-bottom: 0.2em; | |
| 140 } | |
| 141 | |
| 142 div.needs-restart { | |
| 143 padding-top: 10px; | |
| 144 -webkit-padding-start: 5px; | |
| 145 } | |
| 146 | |
| 147 button { | |
| 148 font-size: 104%; | |
| 149 } | |
| 150 | |
| 151 </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> | 15 </head> |
| 244 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> | 16 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| 245 <div id="body-container" style="visibility:hidden"> | 17 <div id="body-container" style="visibility:hidden"> |
| 246 | 18 |
| 247 <div id="header"><h1 i18n-content="flagsLongTitle">TITLE</h1></div> | 19 <div id="header"><h1 i18n-content="flagsLongTitle">TITLE</h1></div> |
| 248 | 20 |
| 249 <div id="blurb-container"> | 21 <div id="blurb-container"> |
| 250 <span id="blurb-warning" i18n-content="flagsWarningHeader">WARNING</span> | 22 <span id="blurb-warning" i18n-content="flagsWarningHeader">WARNING</span> |
| 251 <span i18n-content="flagsBlurb">WARNING TEXT</span> | 23 <span i18n-content="flagsBlurb">WARNING TEXT</span> |
| 252 </div> | 24 </div> |
| (...skipping 30 matching lines...) Expand all Loading... | |
| 283 <tr jsvalues="class:enabled ? 'experiment-enabled' : 'experiment-disable d'"> | 55 <tr jsvalues="class:enabled ? 'experiment-enabled' : 'experiment-disable d'"> |
| 284 <td valign="top"> | 56 <td valign="top"> |
| 285 <div class="experiment-text"> | 57 <div class="experiment-text"> |
| 286 <div> | 58 <div> |
| 287 <span class="experiment-name" | 59 <span class="experiment-name" |
| 288 jscontent="name">NAME</span> | 60 jscontent="name">NAME</span> |
| 289 <div> | 61 <div> |
| 290 <span jsvalues=".innerHTML:description"> | 62 <span jsvalues=".innerHTML:description"> |
| 291 </div> | 63 </div> |
| 292 <div jsdisplay="choices && choices.length > 0"> | 64 <div jsdisplay="choices && choices.length > 0"> |
| 293 <select jsvalues=".internal_name:internal_name;.disabled:!enable d" | 65 <select |
| 294 onchange="handleSelectChoiceExperiment(this, this.select edIndex)"> | 66 classs="experiment-select" |
| 67 jsvalues=".internal_name:internal_name;.disabled:!enabled"> | |
| 295 <option jsvalues=".selected:selected" | 68 <option jsvalues=".selected:selected" |
| 296 jsselect="choices" | 69 jsselect="choices" |
| 297 jscontent="description">NAME | 70 jscontent="description">NAME |
| 298 </option> | 71 </option> |
| 299 </select> | 72 </select> |
| 300 </div> | 73 </div> |
| 301 </div> | 74 </div> |
| 302 </div> | 75 </div> |
| 303 <div class="experiment-actions"> | 76 <div class="experiment-actions"> |
| 304 <!-- If enabled isn't set (i.e. in multi_type options), | 77 <!-- If enabled isn't set (i.e. in multi_type options), |
| 305 then both jsdisplay tests fail, and we get no | 78 then both jsdisplay tests fail, and we get no |
| 306 rendering from this section. --> | 79 rendering from this section. --> |
| 307 <span> | 80 <span> |
| 308 <a | 81 <a |
| 82 class="experiment-disable-link" | |
| 309 jsvalues=".internal_name:internal_name" | 83 jsvalues=".internal_name:internal_name" |
| 310 jsdisplay="enabled" | 84 jsdisplay="enabled" |
| 311 onclick="handleEnableExperiment(this, false)" | 85 href="#" |
| 312 href="javascript:void(0);" | |
| 313 i18n-content="disable" | 86 i18n-content="disable" |
| 314 >DISABLE</a> | 87 >DISABLE</a> |
| 315 <a | 88 <a |
| 89 class="experiment-enable-link" | |
| 316 jsvalues=".internal_name:internal_name" | 90 jsvalues=".internal_name:internal_name" |
| 317 jsdisplay="!enabled" | 91 jsdisplay="!enabled" |
| 318 onclick="handleEnableExperiment(this, true)" | 92 href="#" |
| 319 href="javascript:void(0);" | |
| 320 i18n-content="enable" | 93 i18n-content="enable" |
| 321 >ENABLE</a> | 94 >ENABLE</a> |
| 322 </span> | 95 </span> |
| 323 </div> | 96 </div> |
| 324 </td> | 97 </td> |
| 325 </tr> | 98 </tr> |
| 326 </table> | 99 </table> |
| 327 </div> | 100 </div> |
| 328 </div> | 101 </div> |
| 329 | 102 |
| 330 <div class="needs-restart" jsdisplay="needsRestart"> | 103 <div class="needs-restart" jsdisplay="needsRestart"> |
| 331 <div i18n-content="flagsRestartNotice">NEEDS_RESTART</div> | 104 <div i18n-content="flagsRestartNotice">NEEDS_RESTART</div> |
| 332 <button type="button" | 105 <button class="experiment-restart-button" |
| 333 onclick="restartBrowser();" | 106 type="button" |
| 334 i18n-content="flagsRestartButton">RESTART</button> | 107 i18n-content="flagsRestartButton">RESTART</button> |
| 335 </div> | 108 </div> |
| 336 </div> | 109 </div> |
| 337 </div> | 110 </div> |
| 338 </div> | 111 </div> |
| 112 <script src="chrome://resources/js/i18n_process.js"></script> | |
| 113 <script src="chrome://resources/js/jstemplate_compiled.js"></script> | |
| 339 </body> | 114 </body> |
| 340 </html> | 115 </html> |
| 116 | |
| OLD | NEW |