• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 |experimentsData| input argument which represents data about all
12 * the current experiments and populates the html jstemplate with that data.
13 * with that data. It expects an object structure like the above.
14 * @param {Object} experimentsData Information about all experiments.
15 *     See returnFlagsExperiments() for the structure of this object.
16 */
17function renderTemplate(experimentsData) {
18  // This is the javascript code that processes the template:
19  jstProcess(new JsEvalContext(experimentsData),
20             $('flagsExperimentTemplate'));
21
22  // Add handlers to dynamically created HTML elements.
23  var elements = document.getElementsByClassName('experiment-select');
24  for (var i = 0; i < elements.length; ++i) {
25    elements[i].onchange = function() {
26      handleSelectChoiceExperiment(this, this.selectedIndex);
27      return false;
28    };
29  }
30
31  elements = document.getElementsByClassName('experiment-disable-link');
32  for (var i = 0; i < elements.length; ++i) {
33    elements[i].onclick = function() {
34      handleEnableExperiment(this, false);
35      return false;
36    };
37  }
38
39  elements = document.getElementsByClassName('experiment-enable-link');
40  for (var i = 0; i < elements.length; ++i) {
41    elements[i].onclick = function() {
42      handleEnableExperiment(this, true);
43      return false;
44    };
45  }
46
47  elements = document.getElementsByClassName('experiment-restart-button');
48  for (var i = 0; i < elements.length; ++i) {
49    elements[i].onclick = restartBrowser;
50  }
51
52  $('experiment-reset-all').onclick = resetAllFlags;
53
54  highlightReferencedFlag();
55}
56
57/**
58 * Highlight an element associated with the page's location's hash. We need to
59 * fake fragment navigation with '.scrollIntoView()', since the fragment IDs
60 * don't actually exist until after the template code runs; normal navigation
61 * therefore doesn't work.
62 */
63function highlightReferencedFlag() {
64  if (window.location.hash) {
65    var el = document.querySelector(window.location.hash);
66    if (el && !el.classList.contains('referenced')) {
67      // Unhighlight whatever's highlighted.
68      if (document.querySelector('.referenced'))
69        document.querySelector('.referenced').classList.remove('referenced');
70      // Highlight the referenced element.
71      el.classList.add('referenced');
72      el.scrollIntoView();
73    }
74  }
75}
76
77/**
78 * Asks the C++ FlagsDOMHandler to get details about the available experiments
79 * and return detailed data about the configuration. The FlagsDOMHandler
80 * should reply to returnFlagsExperiments() (below).
81 */
82function requestFlagsExperimentsData() {
83  chrome.send('requestFlagsExperiments');
84}
85
86/**
87 * Asks the C++ FlagsDOMHandler to restart the browser (restoring tabs).
88 */
89function restartBrowser() {
90  chrome.send('restartBrowser');
91}
92
93/**
94 * Reset all flags to their default values and refresh the UI.
95 */
96function resetAllFlags() {
97  // Asks the C++ FlagsDOMHandler to reset all flags to default values.
98  chrome.send('resetAllFlags');
99  requestFlagsExperimentsData();
100}
101
102/**
103 * Called by the WebUI to re-populate the page with data representing the
104 * current state of all experiments.
105 * @param {Object} experimentsData Information about all experiments.
106 *     in the following format:
107 *   {
108 *     supportedExperiments: [
109 *       {
110 *         internal_name: 'Experiment ID string',
111 *         name: 'Experiment Name',
112 *         description: 'description',
113 *         // enabled is only set if the experiment is single valued.
114 *         enabled: true,
115 *         // choices is only set if the experiment has multiple values.
116 *         choices: [
117 *           {
118 *             internal_name: 'Experiment ID string',
119 *             description: 'description',
120 *             selected: true
121 *           }
122 *         ],
123 *         supported_platforms: [
124 *           'Mac',
125 *           'Linux'
126 *         ],
127 *       }
128 *     ],
129 *     unsupportedExperiments: [
130 *       // Mirrors the format of |supportedExperiments| above.
131 *     ],
132 *     needsRestart: false,
133 *     showBetaChannelPromotion: false,
134 *     showDevChannelPromotion: false,
135 *     showOwnerWarning: false
136 *   }
137 */
138function returnFlagsExperiments(experimentsData) {
139  var bodyContainer = $('body-container');
140  renderTemplate(experimentsData);
141
142  if (experimentsData.showBetaChannelPromotion)
143    $('channel-promo-beta').hidden = false;
144  else if (experimentsData.showDevChannelPromotion)
145    $('channel-promo-dev').hidden = false;
146
147  bodyContainer.style.visibility = 'visible';
148  var ownerWarningDiv = $('owner-warning');
149  if (ownerWarningDiv)
150    ownerWarningDiv.hidden = !experimentsData.showOwnerWarning;
151}
152
153/**
154 * Handles a 'enable' or 'disable' button getting clicked.
155 * @param {HTMLElement} node The node for the experiment being changed.
156 * @param {boolean} enable Whether to enable or disable the experiment.
157 */
158function handleEnableExperiment(node, enable) {
159  // Tell the C++ FlagsDOMHandler to enable/disable the experiment.
160  chrome.send('enableFlagsExperiment', [String(node.internal_name),
161                                        String(enable)]);
162  requestFlagsExperimentsData();
163}
164
165/**
166 * Invoked when the selection of a multi-value choice is changed to the
167 * specified index.
168 * @param {HTMLElement} node The node for the experiment being changed.
169 * @param {number} index The index of the option that was selected.
170 */
171function handleSelectChoiceExperiment(node, index) {
172  // Tell the C++ FlagsDOMHandler to enable the selected choice.
173  chrome.send('enableFlagsExperiment',
174              [String(node.internal_name) + '@' + index, 'true']);
175  requestFlagsExperimentsData();
176}
177
178// Get data and have it displayed upon loading.
179document.addEventListener('DOMContentLoaded', requestFlagsExperimentsData);
180
181// Update the highlighted flag when the hash changes.
182window.addEventListener('hashchange', highlightReferencedFlag);
183