OLD | NEW |
1 // Copyright 2012 The Chromium Authors. All rights reserved. | 1 // Copyright 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // Redefine '$' here rather than including 'cr.js', since this is | 5 // Redefine '$' here rather than including util.js, since this is the only |
6 // the only function needed. This allows this file to be loaded | 6 // function needed. |
7 // in a browser directly for layout and some testing purposes. | |
8 var $ = function(id) { return document.getElementById(id); }; | 7 var $ = function(id) { return document.getElementById(id); }; |
9 | 8 |
10 /** | 9 /** |
11 * WebUI for configuring instant.* preference values used by | 10 * WebUI for displaying Instant debug event information. |
12 * Chrome's instant search system. | |
13 */ | 11 */ |
14 var instantConfig = (function() { | 12 var instantConfig = (function() { |
15 'use strict'; | 13 'use strict'; |
16 | 14 |
17 /** List of fields used to dynamically build form. **/ | |
18 var FIELDS = [ | |
19 { | |
20 key: 'instant_ui.zero_suggest_url_prefix', | |
21 label: 'Prefix URL for the experimental Instant ZeroSuggest provider', | |
22 type: 'string', | |
23 size: 40, | |
24 units: '', | |
25 default: '' | |
26 }, | |
27 ]; | |
28 | |
29 /** | 15 /** |
30 * Returns a DOM element of the given type and class name. | 16 * Request debug events; results arrive asynchronously via setDebugEvents(). |
31 */ | 17 */ |
32 function createElementWithClass(elementType, className) { | 18 function getDebugEvents() { |
33 var element = document.createElement(elementType); | 19 chrome.send('getDebugEvents'); |
34 element.className = className; | |
35 return element; | |
36 } | 20 } |
37 | 21 |
38 /** | 22 /** |
39 * Dynamically builds web-form based on FIELDS list. | 23 * Handles callback from getDebugEvents(). |
40 * @return {string} The form's HTML. | 24 * @param {Array} events A list of debug events. |
41 */ | 25 */ |
42 function buildForm() { | 26 function setDebugEvents(events) { |
43 var buf = []; | 27 var debugEvents = $('debug-events'); |
44 | 28 |
45 for (var i = 0; i < FIELDS.length; i++) { | 29 for (var i = 0; i < events.length; ++i) { |
46 var field = FIELDS[i]; | 30 var event = document.createElement('p'); |
47 | 31 |
48 var row = createElementWithClass('div', 'row'); | 32 var time = document.createElement('span'); |
49 row.id = ''; | 33 time.className = 'time'; |
| 34 time.textContent = events[i].time; |
| 35 event.appendChild(time); |
50 | 36 |
51 var label = createElementWithClass('label', 'row-label'); | 37 var text = document.createElement('span'); |
52 label.setAttribute('for', field.key); | 38 text.textContent = events[i].text; |
53 label.textContent = field.label; | 39 event.appendChild(text); |
54 row.appendChild(label); | |
55 | 40 |
56 var input = createElementWithClass('input', 'row-input'); | 41 debugEvents.appendChild(event); |
57 input.type = field.type; | |
58 input.id = field.key; | |
59 input.title = "Default Value: " + field.default; | |
60 if (field.size) input.size = field.size; | |
61 input.min = field.min || 0; | |
62 if (field.max) input.max = field.max; | |
63 if (field.step) input.step = field.step; | |
64 row.appendChild(input); | |
65 | |
66 var units = createElementWithClass('div', 'row-units'); | |
67 if (field.units) units.innerHTML = field.units; | |
68 row.appendChild(units); | |
69 | |
70 $('instant-form').appendChild(row); | |
71 } | 42 } |
72 } | 43 } |
73 | 44 |
74 /** | 45 /** |
75 * Initialize the form by adding 'onChange' listeners to all fields. | 46 * Resets the list of debug events. |
76 */ | 47 */ |
77 function initForm() { | 48 function clearDebugEvents() { |
78 for (var i = 0; i < FIELDS.length; i++) { | 49 $('debug-events').innerHTML = ''; |
79 var field = FIELDS[i]; | 50 chrome.send('clearDebugEvents'); |
80 $(field.key).onchange = (function(key) { | |
81 setPreferenceValue(key); | |
82 }).bind(null, field.key); | |
83 } | |
84 } | 51 } |
85 | 52 |
86 /** | |
87 * Request a preference setting's value. | |
88 * This method is asynchronous; the result is provided by a call to | |
89 * getPreferenceValueResult. | |
90 * @param {string} prefName The name of the preference value being requested. | |
91 */ | |
92 function getPreferenceValue(prefName) { | |
93 chrome.send('getPreferenceValue', [prefName]); | |
94 } | |
95 | |
96 /** | |
97 * Handle callback from call to getPreferenceValue. | |
98 * @param {string} prefName The name of the requested preference value. | |
99 * @param {value} value The current value associated with prefName. | |
100 */ | |
101 function getPreferenceValueResult(prefName, value) { | |
102 if ($(prefName).type == 'checkbox') | |
103 $(prefName).checked = value; | |
104 else | |
105 $(prefName).value = value; | |
106 } | |
107 | |
108 /** | |
109 * Set a preference setting's value stored in the element with prefName. | |
110 * @param {string} prefName The name of the preference value being set. | |
111 */ | |
112 function setPreferenceValue(prefName) { | |
113 var value; | |
114 if ($(prefName).type == 'checkbox') | |
115 value = $(prefName).checked; | |
116 else if ($(prefName).type == 'number') | |
117 value = parseFloat($(prefName).value); | |
118 else | |
119 value = $(prefName).value; | |
120 chrome.send('setPreferenceValue', [prefName, value]); | |
121 } | |
122 | |
123 /** | |
124 * Saves data back into Chrome preferences. | |
125 */ | |
126 function onSave() { | |
127 for (var i = 0; i < FIELDS.length; i++) { | |
128 var field = FIELDS[i]; | |
129 setPreferenceValue(field.key); | |
130 } | |
131 return false; | |
132 } | |
133 | |
134 /** | |
135 * Request debug info. | |
136 * The method is asynchronous, results being provided via getDebugInfoResult. | |
137 */ | |
138 function getDebugInfo() { | |
139 chrome.send('getDebugInfo'); | |
140 } | |
141 | |
142 /** | |
143 * Handles callback from getDebugInfo. | |
144 * @param {Object} info The debug info. | |
145 */ | |
146 function getDebugInfoResult(info) { | |
147 for (var i = 0; i < info.entries.length; ++i) { | |
148 var entry = info.entries[i]; | |
149 var row = createElementWithClass('p', 'debug'); | |
150 row.appendChild(createElementWithClass('span', 'timestamp')).textContent = | |
151 entry.time; | |
152 row.appendChild(document.createElement('span')).textContent = entry.text; | |
153 $('instant-debug-info').appendChild(row); | |
154 } | |
155 } | |
156 | |
157 /** | |
158 * Resets list of debug events. | |
159 */ | |
160 function clearDebugInfo() { | |
161 $('instant-debug-info').innerHTML = ''; | |
162 chrome.send('clearDebugInfo'); | |
163 } | |
164 | |
165 function loadForm() { | |
166 for (var i = 0; i < FIELDS.length; i++) | |
167 getPreferenceValue(FIELDS[i].key); | |
168 } | |
169 | |
170 /** | |
171 * Build and initialize the configuration form. | |
172 */ | |
173 function initialize() { | 53 function initialize() { |
174 buildForm(); | 54 $('clear-debug-events').onclick = clearDebugEvents.bind(this); |
175 loadForm(); | 55 getDebugEvents(); |
176 initForm(); | |
177 getDebugInfo(); | |
178 | |
179 $('save-button').onclick = onSave.bind(this); | |
180 $('clear-button').onclick = clearDebugInfo.bind(this); | |
181 } | 56 } |
182 | 57 |
183 return { | 58 return { |
184 initialize: initialize, | 59 initialize: initialize, |
185 getDebugInfoResult: getDebugInfoResult, | 60 setDebugEvents: setDebugEvents, |
186 getPreferenceValueResult: getPreferenceValueResult | |
187 }; | 61 }; |
188 })(); | 62 })(); |
189 | 63 |
190 document.addEventListener('DOMContentLoaded', instantConfig.initialize); | 64 document.addEventListener('DOMContentLoaded', instantConfig.initialize); |
OLD | NEW |