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