chrome/browser/resources/flags.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * This variable structure is here to document the structure that the template
   7  * expects to correctly populate the page.
   8  */
   9
  10 /**
  11  * Takes the |flagsExperimentsData| input argument which represents data about
  12  * the currently available experiments and populates the html jstemplate
  13  * with that data. It expects an object structure like the above.
  14  * @param {Object} flagsExperimentsData Information about available experiments.
  15  *     See returnFlagsExperiments() for the structure of this object.
  16  */
  17 function renderTemplate(flagsExperimentsData) {
  18   // This is the javascript code that processes the template:
  19   var input = new JsEvalContext(flagsExperimentsData);
  20   var output = $('flagsExperimentTemplate');
  21   jstProcess(input, output);
  22
  23   // Add handlers to dynamically created HTML elements.
  24   var elements = document.getElementsByClassName('experiment-select');
  25   for (var i = 0; i < elements.length; ++i) {
  26     elements[i].onchange = function() {
  27       handleSelectChoiceExperiment(this, this.selectedIndex);
  28       return false;
  29     };
  30   }
  31
  32   elements = document.getElementsByClassName('experiment-disable-link');
  33   for (var i = 0; i < elements.length; ++i) {
  34     elements[i].onclick = function() {
  35       handleEnableExperiment(this, false);
  36       return false;
  37     };
  38   }
  39
  40   elements = document.getElementsByClassName('experiment-enable-link');
  41   for (var i = 0; i < elements.length; ++i) {
  42     elements[i].onclick = function() {
  43       handleEnableExperiment(this, true);
  44       return false;
  45     };
  46   }
  47
  48   elements = document.getElementsByClassName('experiment-restart-button');
  49   for (var i = 0; i < elements.length; ++i) {
  50     elements[i].onclick = restartBrowser;
  51   }
  52 }
  53
  54 /**
  55  * Asks the C++ FlagsDOMHandler to get details about the available experiments
  56  * and return detailed data about the configuration. The FlagsDOMHandler
  57  * should reply to returnFlagsExperiments() (below).
  58  */
  59 function requestFlagsExperimentsData() {
  60   chrome.send('requestFlagsExperiments');
  61 }
  62
  63 /**
  64  * Asks the C++ FlagsDOMHandler to restart the browser (restoring tabs).
  65  */
  66 function restartBrowser() {
  67   chrome.send('restartBrowser');
  68 }
  69
  70 /**
  71  * Called by the WebUI to re-populate the page with data representing the
  72  * current state of installed experiments.
  73  * @param {Object} flagsExperimentsData Information about available experiments
  74  *     in the following format:
  75  *   {
  76  *     flagsExperiments: [
  77  *       {
  78  *         internal_name: 'Experiment ID string',
  79  *         name: 'Experiment Name',
  80  *         description: 'description',
  81  *         // enabled is only set if the experiment is single valued.
  82  *         enabled: true,
  83  *         // choices is only set if the experiment has multiple values.
  84  *         choices: [
  85  *           {
  86  *             internal_name: 'Experiment ID string',
  87  *             description: 'description',
  88  *             selected: true
  89  *           }
  90  *         ],
  91  *         supported: true,
  92  *         supported_platforms: [
  93  *           'Mac',
  94  *           'Linux'
  95  *         ],
  96  *       }
  97  *     ],
  98  *     needsRestart: false
  99  *   }
 100  */
 101 function returnFlagsExperiments(flagsExperimentsData) {
 102   var bodyContainer = $('body-container');
 103   renderTemplate(flagsExperimentsData);
 104   bodyContainer.style.visibility = 'visible';
 105 }
 106
 107 /**
 108  * Handles a 'enable' or 'disable' button getting clicked.
 109  * @param {HTMLElement} node The node for the experiment being changed.
 110  * @param {boolean} enable Whether to enable or disable the experiment.
 111  */
 112 function handleEnableExperiment(node, enable) {
 113   // Tell the C++ FlagsDOMHandler to enable/disable the experiment.
 114   chrome.send('enableFlagsExperiment', [String(node.internal_name),
 115                                         String(enable)]);
 116   requestFlagsExperimentsData();
 117 }
 118
 119 /**
 120  * Invoked when the selection of a multi-value choice is changed to the
 121  * specified index.
 122  * @param {HTMLElement} node The node for the experiment being changed.
 123  * @param {number} index The index of the option that was selected.
 124  */
 125 function handleSelectChoiceExperiment(node, index) {
 126   // Tell the C++ FlagsDOMHandler to enable the selected choice.
 127   chrome.send('enableFlagsExperiment',
 128               [String(node.internal_name) + '@' + index, 'true']);
 129   requestFlagsExperimentsData();
 130 }
 131
 132 // Get data and have it displayed upon loading.
 133 document.addEventListener('DOMContentLoaded', requestFlagsExperimentsData);
 134