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 |