| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html i18n-values="dir:textdirection;"> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title i18n-content="labsTitle"></title> |
| 6 <style> |
| 7 |
| 8 body { |
| 9 margin: 10px; |
| 10 min-width: 47em; |
| 11 } |
| 12 |
| 13 a { |
| 14 color: blue; |
| 15 font-size: 103%; |
| 16 } |
| 17 |
| 18 div#header { |
| 19 margin-bottom: 1.05em; |
| 20 overflow: hidden; |
| 21 padding-bottom: 1.5em; |
| 22 padding-left: 0; |
| 23 padding-top: 1.5em; |
| 24 position: relative; |
| 25 } |
| 26 |
| 27 html[dir=rtl] #header { |
| 28 padding-right: 0; |
| 29 } |
| 30 |
| 31 #header h1 { |
| 32 background: url('../../app/theme/extensions_section.png') 0px 20px no-repeat; |
| 33 display: inline; |
| 34 margin: 0; |
| 35 padding-bottom: 43px; |
| 36 padding-left: 75px; |
| 37 padding-top: 40px; |
| 38 } |
| 39 |
| 40 html[dir=rtl] #header h1 { |
| 41 background: url('../../app/theme/extensions_section.png') right no-repeat; |
| 42 padding-right: 95px; |
| 43 padding-left: 0; |
| 44 } |
| 45 |
| 46 h1 { |
| 47 font-size: 156%; |
| 48 font-weight: bold; |
| 49 padding: 0; |
| 50 margin: 0; |
| 51 } |
| 52 |
| 53 div.blurb { |
| 54 padding-bottom: 1.5em; |
| 55 } |
| 56 |
| 57 div.content { |
| 58 font-size: 88%; |
| 59 margin-top: 5px; |
| 60 } |
| 61 |
| 62 .section-header { |
| 63 background: #ebeff9; |
| 64 border-top: 1px solid #b5c7de; |
| 65 font-size: 99%; |
| 66 padding-bottom: 2px; |
| 67 padding-left: 5px; |
| 68 padding-top: 3px; |
| 69 width: 100%; |
| 70 } |
| 71 |
| 72 html[dir=rtl] .section-header { |
| 73 padding-right: 5px; |
| 74 padding-left: 0; |
| 75 } |
| 76 |
| 77 .section-header > table tr td:first-child { |
| 78 width: 100%; |
| 79 } |
| 80 |
| 81 .section-header > table { |
| 82 width: 100%; |
| 83 } |
| 84 |
| 85 .section-header-title { |
| 86 font-weight: bold; |
| 87 } |
| 88 |
| 89 .vbox-container { |
| 90 display: -webkit-box; |
| 91 -webkit-box-orient: vertical; |
| 92 } |
| 93 |
| 94 .wbox { |
| 95 display: -webkit-box; |
| 96 -webkit-box-align: stretch; |
| 97 -webkit-box-flex: 1; |
| 98 } |
| 99 |
| 100 #top { |
| 101 padding-right: 5px; |
| 102 } |
| 103 |
| 104 html[dir=rtl] #top { |
| 105 padding-left: 5px; |
| 106 padding-right: 0; |
| 107 } |
| 108 |
| 109 .experiment-enabled > td { |
| 110 padding-bottom: 4px; |
| 111 padding-top: 5px; |
| 112 } |
| 113 |
| 114 .experiment { |
| 115 border-bottom: 1px solid #cdcdcd; |
| 116 } |
| 117 |
| 118 /* Indent the text related to each experiment. */ |
| 119 .experiment-text { |
| 120 padding-left: 5px; |
| 121 } |
| 122 |
| 123 html[dir=rtl] .experiment-text { |
| 124 padding-right: 5px; |
| 125 padding-left: 0; |
| 126 } |
| 127 |
| 128 .experiment-name { |
| 129 font-weight: bold; |
| 130 } |
| 131 |
| 132 .no-experiments { |
| 133 margin: 6em 0 0; |
| 134 text-align: center; |
| 135 font-size: 1.2em; |
| 136 } |
| 137 |
| 138 /* Match the indentation of .experiment-text. */ |
| 139 .experiment-actions { |
| 140 padding-left: 5px; |
| 141 margin-top: 0.2em; |
| 142 margin-bottom: 0.2em; |
| 143 } |
| 144 |
| 145 html[dir=rtl] .experiment-actions { |
| 146 padding-right: 5px; |
| 147 padding-left: 0; |
| 148 } |
| 149 |
| 150 div.needs-restart { |
| 151 padding-top: 10px; |
| 152 padding-left: 5px; |
| 153 } |
| 154 |
| 155 button { |
| 156 font-size: 104%; |
| 157 } |
| 158 |
| 159 </style> |
| 160 <script> |
| 161 |
| 162 /** |
| 163 * This variable structure is here to document the structure that the template |
| 164 * expects to correctly populate the page. |
| 165 */ |
| 166 var labsExperimentsDataFormat = { |
| 167 'labsExperiments': [ |
| 168 { |
| 169 'internal_name': 'Experiment ID string', |
| 170 'name': 'Experiment Name', |
| 171 'description': 'description', |
| 172 'enabled': true |
| 173 } |
| 174 ], |
| 175 'needsRestart': false |
| 176 }; |
| 177 |
| 178 /** |
| 179 * Takes the |labsExperimentsData| input argument which represents data about |
| 180 * the currently available experiments and populates the html jstemplate |
| 181 * with that data. It expects an object structure like the above. |
| 182 * @param {Object} labsExperimentsData Detailed info about available experiments |
| 183 */ |
| 184 function renderTemplate(labsExperimentsData) { |
| 185 // This is the javascript code that processes the template: |
| 186 var input = new JsEvalContext(labsExperimentsData); |
| 187 var output = document.getElementById('labsExperimentTemplate'); |
| 188 jstProcess(input, output); |
| 189 } |
| 190 |
| 191 /** |
| 192 * Asks the C++ LabsDOMHandler to get details about the available experiments |
| 193 * and return detailed data about the configuration. The LabsDOMHandler |
| 194 * should reply to returnLabsExperiments() (below). |
| 195 */ |
| 196 function requestLabsExperimentsData() { |
| 197 chrome.send('requestLabsExperiments', []); |
| 198 } |
| 199 |
| 200 /** |
| 201 * Asks the C++ LabsDOMHandler to restart the browser (restoring tabs). |
| 202 */ |
| 203 function restartBrowser() { |
| 204 chrome.send('restartBrowser', []); |
| 205 } |
| 206 |
| 207 /** |
| 208 * Called by the dom_ui to re-populate the page with data representing the |
| 209 * current state of installed experiments. |
| 210 */ |
| 211 function returnLabsExperiments(labsExperimentsData){ |
| 212 var bodyContainer = document.getElementById('body-container'); |
| 213 renderTemplate(labsExperimentsData); |
| 214 bodyContainer.style.visibility = 'visible'; |
| 215 } |
| 216 |
| 217 /** |
| 218 * Handles a 'enable' or 'disable' button getting clicked. |
| 219 */ |
| 220 function handleEnableExperiment(node, enable) { |
| 221 // Tell the C++ LabsDOMHandler to enable/disable the experiment. |
| 222 chrome.send('enableLabsExperiment', [String(node.internal_name), |
| 223 String(enable)]); |
| 224 requestLabsExperimentsData(); |
| 225 } |
| 226 |
| 227 // Get data and have it displayed upon loading. |
| 228 document.addEventListener('DOMContentLoaded', requestLabsExperimentsData); |
| 229 |
| 230 </script> |
| 231 </head> |
| 232 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| 233 <div id="body-container" style="visibility:hidden"> |
| 234 |
| 235 <div id="header"><h1 i18n-content="labsLongTitle">TITLE</h1></div> |
| 236 |
| 237 <div class="blurb" i18n-content="labsBlurb">BLURB</div> |
| 238 |
| 239 <div id="labsExperimentTemplate"> |
| 240 |
| 241 <div id="container" class="vbox-container"> |
| 242 <div id="top" class="wbox"> |
| 243 |
| 244 <div class="section-header"> |
| 245 <table cellpadding="0" cellspacing="0"><tr valign="center"> |
| 246 <td> |
| 247 <span class="section-header-title" i18n-content="labsTableTitle" |
| 248 >TITLE</span> |
| 249 </td> |
| 250 </tr></table> |
| 251 </div> |
| 252 |
| 253 </div> |
| 254 </div> |
| 255 |
| 256 <div class="content"> |
| 257 <div class="experiment-name no-experiments" |
| 258 jsdisplay="labsExperiments.length === 0"> |
| 259 <div i18n-content="labsNoExperimentsAvailable" |
| 260 >NO_EXPERIMENTS_ARE_AVAILABLE</div> |
| 261 </div> |
| 262 |
| 263 <div jsdisplay="labsExperiments.length > 0"> |
| 264 <div class="experiment" jsselect="labsExperiments"> |
| 265 <table width="100%" cellpadding="2" cellspacing="0"> |
| 266 <tr class="experiment-enabled"> |
| 267 <td valign="top"> |
| 268 <div class="experiment-text"> |
| 269 <div> |
| 270 <span class="experiment-name" dir="ltr" |
| 271 jscontent="name">NAME</span> |
| 272 <div> |
| 273 <span dir="ltr" jsvalues=".innerHTML:description"> |
| 274 </div> |
| 275 </div> |
| 276 </div> |
| 277 <div class="experiment-actions"> |
| 278 <span> |
| 279 <a |
| 280 jsvalues=".internal_name:internal_name" |
| 281 jsdisplay="enabled" |
| 282 onclick="handleEnableExperiment(this, false)" |
| 283 href="javascript:void(0);" |
| 284 i18n-content="disable" |
| 285 >DISABLE</a> |
| 286 <a |
| 287 jsvalues=".internal_name:internal_name" |
| 288 jsdisplay="!enabled" |
| 289 onclick="handleEnableExperiment(this, true)" |
| 290 href="javascript:void(0);" |
| 291 i18n-content="enable" |
| 292 >ENABLE</a> |
| 293 </span> |
| 294 </div> |
| 295 </td> |
| 296 </tr> |
| 297 </table> |
| 298 </div> |
| 299 </div> |
| 300 |
| 301 <div class="needs-restart" jsdisplay="needsRestart"> |
| 302 <div i18n-content="labsRestartNotice">NEEDS_RESTART</div> |
| 303 <button type="button" |
| 304 onclick="restartBrowser();" |
| 305 i18n-content="labsRestartButton">RESTART</button> |
| 306 </div> |
| 307 </div> |
| 308 </div> |
| 309 </div> |
| 310 </body> |
| 311 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 3152055:
Implement about:labs (Closed)
