| 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" | |
| 271 jscontent="name">NAME</span> | |
| 272 <div> | |
| 273 <span 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 3256001:
Revert 57635: Implement about:labs (Closed)
Base URL: http://src.chromium.org/git/chromium.git