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 |