1 // Copyright (c) 2013 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.
5 // Redefine '$' here rather than including 'cr.js', since this is
6 // the only function needed. This allows this file to be loaded
7 // in a browser directly for layout and some testing purposes.
8 var $ = function(id) { return document.getElementById(id); };
11 * A generic WebUI for configuring preference values used by Chrome's gesture
12 * recognition systems.
13 * @param {string} title The user-visible title to display for the configuration
15 * @param {string} prefix The prefix for the configuration fields.
16 * @param {!Object} fields An array of fields that contain the name of the pref
17 * and user-visible labels.
19 function GeneralConfig(title, prefix, fields) {
25 GeneralConfig.prototype = {
27 * Sets up the form for configuring all the preference values.
29 buildAll: function() {
36 * Dynamically builds web-form based on the list of preferences.
38 buildForm: function() {
41 var section = $('section-template').cloneNode(true);
42 section.removeAttribute('id');
43 var title = section.querySelector('.section-title');
44 title.textContent = this.title;
46 for (var i = 0; i < this.fields.length; i++) {
47 var field = this.fields[i];
49 var row = $('section-row-template').cloneNode(true);
50 row.removeAttribute('id');
52 var label = row.querySelector('.row-label');
53 var input = row.querySelector('.input');
54 var units = row.querySelector('.row-units');
55 var reset = row.querySelector('.row-reset');
57 label.setAttribute('for', field.key);
58 label.innerHTML = field.label;
60 input.min = field.min || 0;
63 input.max = field.max;
65 input.step = field.step || 'any';
68 units.innerHTML = field.units;
70 reset.id = field.key + '-reset';
71 gesture_config.updateResetButton(reset, true);
73 section.querySelector('.section-properties').appendChild(row);
75 $('gesture-form').appendChild(section);
79 * Initializes the form by adding appropriate event listeners to elements.
81 initForm: function() {
82 for (var i = 0; i < this.fields.length; i++) {
83 var field = this.fields[i];
85 $(field.key).onchange = (function(key) {
86 config.setPreferenceValue(key, $(key).value);
87 gesture_config.updateResetButton($(key + '-reset'), false);
88 gesture_config.updateResetAllButton(false);
89 }).bind(null, field.key);
90 $(field.key + '-reset').onclick = (function(key) {
91 config.resetPreferenceValue(key);
92 }).bind(null, field.key);
97 * Requests preference values for all the relevant fields.
99 loadForm: function() {
100 for (var i = 0; i < this.fields.length; i++)
101 this.updatePreferenceValue(this.fields[i].key);
105 * Handles processing of "Reset All" button.
106 * Causes all form values to be updated based on current preference values.
107 * @return {boolean} Returns false.
109 onReset: function() {
110 for (var i = 0; i < this.fields.length; i++) {
111 var field = this.fields[i];
112 this.resetPreferenceValue(field.key);
118 * Requests a preference setting's value.
119 * This method is asynchronous; the result is provided by a call to
120 * updatePreferenceValueResult.
121 * @param {string} prefName The name of the preference value being requested.
123 updatePreferenceValue: function(prefName) {
124 chrome.send('updatePreferenceValue', [this.prefix + prefName]);
128 * Sets a preference setting's value.
129 * @param {string} prefName The name of the preference value being set.
130 * @param {value} value The value to be associated with prefName.
132 setPreferenceValue: function(prefName, value) {
133 chrome.send('setPreferenceValue',
134 [this.prefix + prefName, parseFloat(value)]);
138 * Resets a preference to its default value and get that callback
139 * to updatePreferenceValueResult with the new value of the preference.
140 * @param {string} prefName The name of the requested preference.
142 resetPreferenceValue: function(prefName) {
143 chrome.send('resetPreferenceValue', [this.prefix + prefName]);
148 * Returns a GeneralConfig for configuring gestures.* preferences.
149 * @return {object} A GeneralConfig object.
151 function GestureConfig() {
152 /** The title of the section for the gesture preferences. **/
153 /** @const */ var GESTURE_TITLE = 'Gesture Configuration';
155 /** Common prefix of gesture preferences. **/
156 /** @const */ var GESTURE_PREFIX = 'gesture.';
158 /** List of fields used to dynamically build form. **/
159 var GESTURE_FIELDS = [
161 key: 'fling_max_cancel_to_down_time_in_ms',
162 label: 'Maximum Cancel to Down Time for Tap Suppression',
163 units: 'milliseconds',
166 key: 'fling_max_tap_gap_time_in_ms',
167 label: 'Maximum Tap Gap Time for Tap Suppression',
168 units: 'milliseconds',
171 key: 'long_press_time_in_seconds',
172 label: 'Long Press Time',
176 key: 'semi_long_press_time_in_seconds',
177 label: 'Semi Long Press Time',
182 key: 'show_press_delay_in_ms',
183 label: 'Delay before show press event is fired',
184 units: 'milliseconds',
187 key: 'max_seconds_between_double_click',
188 label: 'Maximum Double Click Interval',
193 key: 'max_separation_for_gesture_touches_in_pixels',
194 label: 'Maximum Separation for Gesture Touches',
198 key: 'max_swipe_deviation_ratio',
199 label: 'Maximum Swipe Deviation',
203 key: 'max_touch_down_duration_in_seconds_for_click',
204 label: 'Maximum Touch-Down Duration for Click',
209 key: 'max_touch_move_in_pixels_for_click',
210 label: 'Maximum Touch-Move for Click',
214 key: 'max_distance_between_taps_for_double_tap',
215 label: 'Maximum Distance between two taps for Double Tap',
219 key: 'min_distance_for_pinch_scroll_in_pixels',
220 label: 'Minimum Distance for Pinch Scroll',
224 key: 'min_flick_speed_squared',
225 label: 'Minimum Flick Speed Squared',
226 units: '(pixels/sec.)<sup>2</sup>'
229 key: 'min_pinch_update_distance_in_pixels',
230 label: 'Minimum Pinch Update Distance',
234 key: 'min_rail_break_velocity',
235 label: 'Minimum Rail-Break Velocity',
239 key: 'min_scroll_delta_squared',
240 label: 'Minimum Scroll Delta Squared',
244 key: 'min_scroll_successive_velocity_events',
245 label: 'Minimum Scroll Successive Velocity Events',
249 key: 'scroll_prediction_seconds',
250 label: 'Scroll prediction interval<br>' +
251 '(Enable scroll prediction in ' +
252 '<a href="chrome://flags">chrome://flags</a>)',
257 key: 'min_swipe_speed',
258 label: 'Minimum Swipe Speed',
262 key: 'min_touch_down_duration_in_seconds_for_click',
263 label: 'Minimum Touch-Down Duration for Click',
268 key: 'points_buffered_for_velocity',
269 label: 'Points Buffered for Velocity',
274 key: 'rail_break_proportion',
275 label: 'Rail-Break Proportion',
279 key: 'rail_start_proportion',
280 label: 'Rail-Start Proportion',
284 key: 'fling_acceleration_curve_coefficient_0',
285 label: 'Touchscreen Fling Acceleration',
286 units: 'x<sup>3</sup>',
290 key: 'fling_acceleration_curve_coefficient_1',
292 units: 'x<sup>2</sup>',
296 key: 'fling_acceleration_curve_coefficient_2',
298 units: 'x<sup>1</sup>',
302 key: 'fling_acceleration_curve_coefficient_3',
304 units: 'x<sup>0</sup>',
308 key: 'fling_velocity_cap',
309 label: 'Touchscreen Fling Velocity Cap',
310 units: 'pixels / second'
313 key: 'tab_scrub_activation_delay_in_ms',
314 label: 'Tab scrub auto activation delay, (-1 for never)',
315 units: 'milliseconds'
319 return new GeneralConfig(GESTURE_TITLE, GESTURE_PREFIX, GESTURE_FIELDS);
323 * Returns a GeneralConfig for configuring overscroll.* preferences.
324 * @return {object} A GeneralConfig object.
326 function OverscrollConfig() {
327 /** @const */ var OVERSCROLL_TITLE = 'Overscroll Configuration';
329 /** @const */ var OVERSCROLL_PREFIX = 'overscroll.';
331 var OVERSCROLL_FIELDS = [
333 key: 'horizontal_threshold_complete',
334 label: 'Complete when overscrolled (horizontal)',
338 key: 'vertical_threshold_complete',
339 label: 'Complete when overscrolled (vertical)',
343 key: 'minimum_threshold_start_touchpad',
344 label: 'Start overscroll gesture (horizontal; touchpad)',
348 key: 'minimum_threshold_start',
349 label: 'Start overscroll gesture (horizontal; touchscreen)',
353 key: 'vertical_threshold_start',
354 label: 'Start overscroll gesture (vertical)',
358 key: 'horizontal_resist_threshold',
359 label: 'Start resisting overscroll after (horizontal)',
363 key: 'vertical_resist_threshold',
364 label: 'Start resisting overscroll after (vertical)',
369 return new GeneralConfig(OVERSCROLL_TITLE,
375 * Returns a GeneralConfig for configuring flingcurve.* preferences.
376 * @return {object} A GeneralConfig object.
378 function FlingConfig() {
379 /** @const */ var FLING_TITLE = 'Fling Configuration';
381 /** @const */ var FLING_PREFIX = 'flingcurve.';
385 key: 'touchscreen_alpha',
386 label: 'Touchscreen fling deacceleration coefficients',
391 key: 'touchscreen_beta',
397 key: 'touchscreen_gamma',
403 key: 'touchpad_alpha',
404 label: 'Touchpad fling deacceleration coefficients',
409 key: 'touchpad_beta',
415 key: 'touchpad_gamma',
422 return new GeneralConfig(FLING_TITLE, FLING_PREFIX, FLING_FIELDS);
426 * WebUI instance for configuring preference values related to gesture input.
428 window.gesture_config = {
430 * Build and initialize the gesture configuration form.
432 initialize: function() {
433 var g = GestureConfig();
436 var o = OverscrollConfig();
439 var f = FlingConfig();
442 $('reset-all-button').onclick = function() {
450 * Checks if all gesture preferences are set to default by checking the status
451 * of the reset button associated with each preference.
452 * @return {boolean} True if all gesture preferences are set to default.
454 areAllPrefsSetToDefault: function() {
455 var resets = $('gesture-form').querySelectorAll('.row-reset');
456 for (var i = 0; i < resets.length; i++) {
457 if (!resets[i].disabled)
464 * Updates the status and label of a preference reset button.
465 * @param {HTMLInputElement} resetButton Reset button for the preference.
466 * @param {boolean} isDefault Whether the preference is set to the default
469 updateResetButton: function(resetButton, isDefault) {
470 /** @const */ var TITLE_DEFAULT = 'Default';
472 /** @const */ var TITLE_NOT_DEFAULT = 'Reset';
474 resetButton.innerHTML = isDefault ? TITLE_DEFAULT : TITLE_NOT_DEFAULT;
475 resetButton.disabled = isDefault;
479 * Updates the status and label of "Reset All" button.
480 * @param {boolean} isDefault Whether all preference are set to their default
483 updateResetAllButton: function(isDefault) {
484 /** @const */ var TITLE_DEFAULT = 'Everything is set to default';
486 /** @const */ var TITLE_NOT_DEFAULT = 'Reset All To Default';
488 var button = $('reset-all-button');
489 button.innerHTML = isDefault ? TITLE_DEFAULT : TITLE_NOT_DEFAULT;
490 button.disabled = isDefault;
494 * Handle callback from call to updatePreferenceValue.
495 * @param {string} prefName The name of the requested preference value.
496 * @param {value} value The current value associated with prefName.
497 * @param {boolean} isDefault Whether the value is the default value.
499 updatePreferenceValueResult: function(prefName, value, isDefault) {
500 prefName = prefName.substring(prefName.indexOf('.') + 1);
501 $(prefName).value = value;
502 this.updateResetButton($(prefName + '-reset'), isDefault);
503 this.updateResetAllButton(this.areAllPrefsSetToDefault());
507 document.addEventListener('DOMContentLoaded', gesture_config.initialize);