Home | History | Annotate | Download | only in resources 
      1 <!DOCTYPE HTML>
      2 <html i18n-values="dir:textdirection;">
      3 <head>
      4 <meta charset="utf-8">
      5 <style>
      6 body {
      7   margin: 10px;
      8   min-width: 47em;
      9 }
     10 
     11 a {
     12   color: blue;
     13   font-size: 103%;
     14 }
     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   padding-left: 0;
     23   padding-top: 20px;
     24   position: relative;
     25   box-sizing: border-box;
     26 }
     27 
     28 html[dir=rtl] #header {
     29   padding-right: 0;
     30 }
     31 
     32 #header h1 {
     33   background: url('../../app/theme/flags_section.png') 0px 20px no-repeat;
     34   display: inline;
     35   margin: 0;
     36   padding-bottom: 43px;
     37   padding-left: 75px;
     38   padding-top: 40px;
     39 }
     40 
     41 html[dir=rtl] #header h1 {
     42   background: url('../../app/theme/flags_section.png') right no-repeat;
     43   padding-right: 95px;
     44   padding-left: 0;
     45 }
     46 
     47 h1 {
     48   font-size: 156%;
     49   font-weight: bold;
     50   padding: 0;
     51   margin: 0;
     52 }
     53 
     54 #blurb-container {
     55   padding-bottom: 1.5em;
     56   font-size: 120%;
     57 }
     58 
     59 #blurb-warning {
     60   color: red;
     61   font-weight: bold;
     62 }
     63 
     64 div.content {
     65   font-size: 88%;
     66   margin-top: 5px;
     67 }
     68 
     69 .section-header {
     70   background: #ebeff9;
     71   border-top: 1px solid #b5c7de;
     72   font-size: 99%;
     73   padding-bottom: 2px;
     74   padding-left: 5px;
     75   padding-top: 3px;
     76   width: 100%;
     77 }
     78 
     79 html[dir=rtl] .section-header {
     80   padding-right: 5px;
     81   padding-left: 0;
     82 }
     83 
     84 .section-header > table tr td:first-child {
     85   width: 100%;
     86 }
     87 
     88 .section-header > table {
     89   width: 100%;
     90 }
     91 
     92 .section-header-title {
     93   font-weight: bold;
     94 }
     95 
     96 .vbox-container {
     97   display: -webkit-box;
     98   -webkit-box-orient: vertical;
     99 }
    100 
    101 .wbox {
    102   display: -webkit-box;
    103   -webkit-box-align: stretch;
    104   -webkit-box-flex: 1;
    105 }
    106 
    107 #top {
    108   padding-right: 5px;
    109 }
    110 
    111 html[dir=rtl] #top {
    112   padding-left: 5px;
    113   padding-right: 0;
    114 }
    115 
    116 /* Disabled experiments display grey text on a grey background.  The title,
    117    however, should remain completely legible. */
    118 .experiment-disabled > td {
    119   background: #F0F0F0;
    120   color: #A0A0A0;
    121 }
    122 
    123 .experiment-disabled .experiment-name {
    124   color: #000;
    125 }
    126 
    127 .experiment {
    128   border-bottom: 1px solid #cdcdcd;
    129 }
    130 
    131 .experiment td {
    132   padding-bottom: 4px;
    133   padding-top: 5px;
    134 }
    135 
    136 /* Indent the text related to each experiment. */
    137 .experiment-text {
    138   padding-left: 5px;
    139 }
    140 
    141 html[dir=rtl] .experiment-text {
    142   padding-right: 5px;
    143   padding-left: 0;
    144 }
    145 
    146 .experiment-name {
    147   font-weight: bold;
    148 }
    149 
    150 .no-experiments {
    151   margin: 6em 0 0;
    152   text-align: center;
    153   font-size: 1.2em;
    154 }
    155 
    156 /* Match the indentation of .experiment-text. */
    157 .experiment-actions {
    158   padding-left: 5px;
    159   margin-top: 0.2em;
    160   margin-bottom: 0.2em;
    161 }
    162 
    163 html[dir=rtl] .experiment-actions {
    164   padding-right: 5px;
    165   padding-left: 0;
    166 }
    167 
    168 div.needs-restart {
    169   padding-top: 10px;
    170   padding-left: 5px;
    171 }
    172 
    173 button {
    174   font-size: 104%;
    175 }
    176 
    177 </style>
    178 <script>
    179 
    180 /**
    181  * This variable structure is here to document the structure that the template
    182  * expects to correctly populate the page.
    183  */
    184 var flagsExperimentsDataFormat = {
    185   'flagsExperiments': [
    186     {
    187       'internal_name': 'Experiment ID string',
    188       'name': 'Experiment Name',
    189       'description': 'description',
    190       /* enabled is only set if the experiment is single valued */
    191       'enabled': true,
    192       /* choices is only set if the experiment has multiple values */
    193       'choices': [
    194         {
    195           'internal_name': 'Experiment ID string',
    196           'description': 'description',
    197           'selected': true
    198         }
    199       ]
    200     }
    201   ],
    202   'needsRestart': false
    203 };
    204 
    205 /**
    206  * Takes the |flagsExperimentsData| input argument which represents data about
    207  * the currently available experiments and populates the html jstemplate
    208  * with that data. It expects an object structure like the above.
    209  * @param {Object} flagsExperimentsData Information about available experiments
    210  */
    211 function renderTemplate(flagsExperimentsData) {
    212   // This is the javascript code that processes the template:
    213   var input = new JsEvalContext(flagsExperimentsData);
    214   var output = document.getElementById('flagsExperimentTemplate');
    215   jstProcess(input, output);
    216 }
    217 
    218 /**
    219  * Asks the C++ FlagsDOMHandler to get details about the available experiments
    220  * and return detailed data about the configuration. The FlagsDOMHandler
    221  * should reply to returnFlagsExperiments() (below).
    222  */
    223 function requestFlagsExperimentsData() {
    224   chrome.send('requestFlagsExperiments', []);
    225 }
    226 
    227 /**
    228  * Asks the C++ FlagsDOMHandler to restart the browser (restoring tabs).
    229  */
    230 function restartBrowser() {
    231   chrome.send('restartBrowser', []);
    232 }
    233 
    234 /**
    235  * Called by the WebUI to re-populate the page with data representing the
    236  * current state of installed experiments.
    237  */
    238 function returnFlagsExperiments(flagsExperimentsData){
    239   var bodyContainer = document.getElementById('body-container');
    240   renderTemplate(flagsExperimentsData);
    241   bodyContainer.style.visibility = 'visible';
    242 }
    243 
    244 /**
    245  * Handles a 'enable' or 'disable' button getting clicked.
    246  */
    247 function handleEnableExperiment(node, enable) {
    248   // Tell the C++ FlagsDOMHandler to enable/disable the experiment.
    249   chrome.send('enableFlagsExperiment', [String(node.internal_name),
    250                                        String(enable)]);
    251   requestFlagsExperimentsData();
    252 }
    253 
    254 /**
    255  * Invoked when the selection of a multi-value choice is changed to the
    256  * specified index.
    257  */
    258 function handleSelectChoiceExperiment(node, index) {
    259   // Tell the C++ FlagsDOMHandler to enable the selected choice.
    260   chrome.send('enableFlagsExperiment',
    261               [String(node.internal_name) + "@" + index, "true"]);
    262   requestFlagsExperimentsData();
    263 }
    264 
    265 // Get data and have it displayed upon loading.
    266 document.addEventListener('DOMContentLoaded', requestFlagsExperimentsData);
    267 
    268 </script>
    269 </head>
    270 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
    271 <div id="body-container" style="visibility:hidden">
    272 
    273   <div id="header"><h1 i18n-content="flagsLongTitle">TITLE</h1></div>
    274 
    275   <div id="blurb-container">
    276     <span id="blurb-warning" i18n-content="flagsWarningHeader">WARNING</span>
    277     <span i18n-content="flagsBlurb">WARNING TEXT</span>
    278   </div>
    279 
    280   <div id="flagsExperimentTemplate">
    281 
    282     <div id="container" class="vbox-container">
    283     <div id="top" class="wbox">
    284 
    285       <div class="section-header">
    286         <table cellpadding="0" cellspacing="0"><tr valign="center">
    287           <td>
    288             <span class="section-header-title" i18n-content="flagsTableTitle"
    289               >TITLE</span>
    290           </td>
    291         </tr></table>
    292       </div>
    293 
    294     </div>
    295     </div>
    296 
    297     <div class="content">
    298       <div class="experiment-name no-experiments"
    299            jsdisplay="flagsExperiments.length === 0">
    300         <div i18n-content="flagsNoExperimentsAvailable"
    301           >NO_EXPERIMENTS_ARE_AVAILABLE</div>
    302       </div>
    303 
    304       <div jsdisplay="flagsExperiments.length > 0">
    305       <div class="experiment" jsselect="flagsExperiments">
    306         <table width="100%" cellpadding="2" cellspacing="0">
    307         <!-- TODO(mkwst): This doesn't work exactly as expected for multivalue
    308                           experiments.  See http://crbug.com/73730 -->
    309         <tr jsvalues="class:enabled ? 'experiment-enabled' : 'experiment-disabled'">
    310         <td valign="top">
    311           <div class="experiment-text">
    312             <div>
    313               <span class="experiment-name" dir="ltr"
    314                     jscontent="name">NAME</span>
    315               <div>
    316                 <span dir="ltr" jsvalues=".innerHTML:description">
    317               </div>
    318               <div jsdisplay="choices && choices.length > 0">
    319                 <select jsvalues=".internal_name:internal_name;.disabled:!enabled"
    320                         onchange="handleSelectChoiceExperiment(this, this.selectedIndex)">
    321                   <option jsvalues=".selected:selected"
    322                           jsselect="choices"
    323                           jscontent="description">NAME
    324                   </option>
    325                 </select>
    326               </div>
    327             </div>
    328           </div>
    329           <div class="experiment-actions">
    330 	    <!-- If enabled isn't set (i.e. in multi_type options),
    331 		 then both jsdisplay tests fail, and we get no
    332 		 rendering from this section. -->
    333             <span>
    334               <a
    335                 jsvalues=".internal_name:internal_name"
    336                 jsdisplay="enabled"
    337                 onclick="handleEnableExperiment(this, false)"
    338                 href="javascript:void(0);"
    339                 i18n-content="disable"
    340                 >DISABLE</a>
    341               <a
    342                 jsvalues=".internal_name:internal_name"
    343                 jsdisplay="!enabled"
    344                 onclick="handleEnableExperiment(this, true)"
    345                 href="javascript:void(0);"
    346                 i18n-content="enable"
    347                 >ENABLE</a>
    348             </span>
    349           </div>
    350         </td>
    351         </tr>
    352         </table>
    353       </div>
    354       </div>
    355 
    356       <div class="needs-restart" jsdisplay="needsRestart">
    357         <div i18n-content="flagsRestartNotice">NEEDS_RESTART</div>
    358         <button type="button"
    359                 onclick="restartBrowser();"
    360                 i18n-content="flagsRestartButton">RESTART</button>
    361       </div>
    362     </div>
    363   </div>
    364 </div>
    365 </body>
    366 </html>
    367