src/chrome/browser/resources/gesture_config.js

   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.
   4
   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); };
   9
  10 /**
  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
  14  *    section.
  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.
  18  */
  19 function GeneralConfig(title, prefix, fields) {
  20   this.title = title;
  21   this.prefix = prefix;
  22   this.fields = fields;
  23 }
  24
  25 GeneralConfig.prototype = {
  26   /**
  27    * Sets up the form for configuring all the preference values.
  28    */
  29   buildAll: function() {
  30     this.buildForm();
  31     this.loadForm();
  32     this.initForm();
  33   },
  34
  35   /**
  36    * Dynamically builds web-form based on the list of preferences.
  37    */
  38   buildForm: function() {
  39     var buf = [];
  40
  41     var section = $('section-template').cloneNode(true);
  42     section.removeAttribute('id');
  43     var title = section.querySelector('.section-title');
  44     title.textContent = this.title;
  45
  46     for (var i = 0; i < this.fields.length; i++) {
  47       var field = this.fields[i];
  48
  49       var row = $('section-row-template').cloneNode(true);
  50       row.removeAttribute('id');
  51
  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');
  56
  57       label.setAttribute('for', field.key);
  58       label.innerHTML = field.label;
  59       input.id = field.key;
  60       input.min = field.min || 0;
  61
  62       if (field.max)
  63         input.max = field.max;
  64
  65       input.step = field.step || 'any';
  66
  67       if (field.units)
  68         units.innerHTML = field.units;
  69
  70       reset.id = field.key + '-reset';
  71       gesture_config.updateResetButton(reset, true);
  72
  73       section.querySelector('.section-properties').appendChild(row);
  74     }
  75     $('gesture-form').appendChild(section);
  76   },
  77
  78   /**
  79    * Initializes the form by adding appropriate event listeners to elements.
  80    */
  81   initForm: function() {
  82     for (var i = 0; i < this.fields.length; i++) {
  83       var field = this.fields[i];
  84       var config = this;
  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);
  93     }
  94   },
  95
  96   /**
  97    * Requests preference values for all the relevant fields.
  98    */
  99   loadForm: function() {
 100     for (var i = 0; i < this.fields.length; i++)
 101       this.updatePreferenceValue(this.fields[i].key);
 102   },
 103
 104   /**
 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.
 108    */
 109   onReset: function() {
 110     for (var i = 0; i < this.fields.length; i++) {
 111       var field = this.fields[i];
 112       this.resetPreferenceValue(field.key);
 113     }
 114     return false;
 115   },
 116
 117   /**
 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.
 122    */
 123   updatePreferenceValue: function(prefName) {
 124     chrome.send('updatePreferenceValue', [this.prefix + prefName]);
 125   },
 126
 127   /**
 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.
 131    */
 132   setPreferenceValue: function(prefName, value) {
 133     chrome.send('setPreferenceValue',
 134         [this.prefix + prefName, parseFloat(value)]);
 135   },
 136
 137   /**
 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.
 141    */
 142   resetPreferenceValue: function(prefName) {
 143     chrome.send('resetPreferenceValue', [this.prefix + prefName]);
 144   }
 145 };
 146
 147 /**
 148  * Returns a GeneralConfig for configuring gestures.* preferences.
 149  * @return {object} A GeneralConfig object.
 150  */
 151 function GestureConfig() {
 152   /** The title of the section for the gesture preferences. **/
 153   /** @const */ var GESTURE_TITLE = 'Gesture Configuration';
 154
 155   /** Common prefix of gesture preferences. **/
 156   /** @const */ var GESTURE_PREFIX = 'gesture.';
 157
 158   /** List of fields used to dynamically build form. **/
 159   var GESTURE_FIELDS = [
 160     {
 161       key: 'fling_max_cancel_to_down_time_in_ms',
 162       label: 'Maximum Cancel to Down Time for Tap Suppression',
 163       units: 'milliseconds',
 164     },
 165     {
 166       key: 'fling_max_tap_gap_time_in_ms',
 167       label: 'Maximum Tap Gap Time for Tap Suppression',
 168       units: 'milliseconds',
 169     },
 170     {
 171       key: 'semi_long_press_time_in_seconds',
 172       label: 'Semi Long Press Time',
 173       units: 'seconds',
 174       step: 0.1
 175     },
 176     {
 177       key: 'max_separation_for_gesture_touches_in_pixels',
 178       label: 'Maximum Separation for Gesture Touches',
 179       units: 'pixels'
 180     },
 181     {
 182       key: 'fling_acceleration_curve_coefficient_0',
 183       label: 'Touchscreen Fling Acceleration',
 184       units: 'x<sup>3</sup>',
 185       min: '-1'
 186     },
 187     {
 188       key: 'fling_acceleration_curve_coefficient_1',
 189       label: '+',
 190       units: 'x<sup>2</sup>',
 191       min: '-1'
 192     },
 193     {
 194       key: 'fling_acceleration_curve_coefficient_2',
 195       label: '+',
 196       units: 'x<sup>1</sup>',
 197       min: '-1'
 198     },
 199     {
 200       key: 'fling_acceleration_curve_coefficient_3',
 201       label: '+',
 202       units: 'x<sup>0</sup>',
 203       min: '-1'
 204     },
 205     {
 206       key: 'tab_scrub_activation_delay_in_ms',
 207       label: 'Tab scrub auto activation delay, (-1 for never)',
 208       units: 'milliseconds'
 209     }
 210   ];
 211
 212   return new GeneralConfig(GESTURE_TITLE, GESTURE_PREFIX, GESTURE_FIELDS);
 213 }
 214
 215 /**
 216  * Returns a GeneralConfig for configuring overscroll.* preferences.
 217  * @return {object} A GeneralConfig object.
 218  */
 219 function OverscrollConfig() {
 220   /** @const */ var OVERSCROLL_TITLE = 'Overscroll Configuration';
 221
 222   /** @const */ var OVERSCROLL_PREFIX = 'overscroll.';
 223
 224   var OVERSCROLL_FIELDS = [
 225     {
 226       key: 'horizontal_threshold_complete',
 227       label: 'Complete when overscrolled (horizontal)',
 228       units: '%'
 229     },
 230     {
 231       key: 'vertical_threshold_complete',
 232       label: 'Complete when overscrolled (vertical)',
 233       units: '%'
 234     },
 235     {
 236       key: 'minimum_threshold_start_touchpad',
 237       label: 'Start overscroll gesture (horizontal; touchpad)',
 238       units: 'pixels'
 239     },
 240     {
 241       key: 'minimum_threshold_start',
 242       label: 'Start overscroll gesture (horizontal; touchscreen)',
 243       units: 'pixels'
 244     },
 245     {
 246       key: 'vertical_threshold_start',
 247       label: 'Start overscroll gesture (vertical)',
 248       units: 'pixels'
 249     },
 250     {
 251       key: 'horizontal_resist_threshold',
 252       label: 'Start resisting overscroll after (horizontal)',
 253       units: 'pixels'
 254     },
 255     {
 256       key: 'vertical_resist_threshold',
 257       label: 'Start resisting overscroll after (vertical)',
 258       units: 'pixels'
 259     },
 260   ];
 261
 262   return new GeneralConfig(OVERSCROLL_TITLE,
 263                            OVERSCROLL_PREFIX,
 264                            OVERSCROLL_FIELDS);
 265 }
 266
 267 /**
 268  * Returns a GeneralConfig for configuring flingcurve.* preferences.
 269  * @return {object} A GeneralConfig object.
 270  */
 271 function FlingConfig() {
 272   /** @const */ var FLING_TITLE = 'Fling Configuration';
 273
 274   /** @const */ var FLING_PREFIX = 'flingcurve.';
 275
 276   var FLING_FIELDS = [
 277     {
 278       key: 'touchscreen_alpha',
 279       label: 'Touchscreen fling deacceleration coefficients',
 280       units: 'alpha',
 281       min: '-inf'
 282     },
 283     {
 284       key: 'touchscreen_beta',
 285       label: '',
 286       units: 'beta',
 287       min: '-inf'
 288     },
 289     {
 290       key: 'touchscreen_gamma',
 291       label: '',
 292       units: 'gamma',
 293       min: '-inf'
 294     },
 295     {
 296       key: 'touchpad_alpha',
 297       label: 'Touchpad fling deacceleration coefficients',
 298       units: 'alpha',
 299       min: '-inf'
 300     },
 301     {
 302       key: 'touchpad_beta',
 303       label: '',
 304       units: 'beta',
 305       min: '-inf'
 306     },
 307     {
 308       key: 'touchpad_gamma',
 309       label: '',
 310       units: 'gamma',
 311       min: '-inf'
 312     },
 313   ];
 314
 315   return new GeneralConfig(FLING_TITLE, FLING_PREFIX, FLING_FIELDS);
 316 }
 317
 318 /**
 319  * WebUI instance for configuring preference values related to gesture input.
 320  */
 321 window.gesture_config = {
 322   /**
 323    * Build and initialize the gesture configuration form.
 324    */
 325   initialize: function() {
 326     var g = GestureConfig();
 327     g.buildAll();
 328
 329     var o = OverscrollConfig();
 330     o.buildAll();
 331
 332     var f = FlingConfig();
 333     f.buildAll();
 334
 335     $('reset-all-button').onclick = function() {
 336       g.onReset();
 337       o.onReset();
 338       f.onReset();
 339     };
 340   },
 341
 342   /**
 343    * Checks if all gesture preferences are set to default by checking the status
 344    * of the reset button associated with each preference.
 345    * @return {boolean} True if all gesture preferences are set to default.
 346    */
 347   areAllPrefsSetToDefault: function() {
 348     var resets = $('gesture-form').querySelectorAll('.row-reset');
 349     for (var i = 0; i < resets.length; i++) {
 350       if (!resets[i].disabled)
 351         return false;
 352     }
 353     return true;
 354   },
 355
 356   /**
 357    * Updates the status and label of a preference reset button.
 358    * @param {HTMLInputElement} resetButton Reset button for the preference.
 359    * @param {boolean} isDefault Whether the preference is set to the default
 360    *     value.
 361    */
 362   updateResetButton: function(resetButton, isDefault) {
 363     /** @const */ var TITLE_DEFAULT = 'Default';
 364
 365     /** @const */ var TITLE_NOT_DEFAULT = 'Reset';
 366
 367     resetButton.innerHTML = isDefault ? TITLE_DEFAULT : TITLE_NOT_DEFAULT;
 368     resetButton.disabled = isDefault;
 369   },
 370
 371   /**
 372    * Updates the status and label of "Reset All" button.
 373    * @param {boolean} isDefault Whether all preference are set to their default
 374    *     values.
 375    */
 376   updateResetAllButton: function(isDefault) {
 377     /** @const */ var TITLE_DEFAULT = 'Everything is set to default';
 378
 379     /** @const */ var TITLE_NOT_DEFAULT = 'Reset All To Default';
 380
 381     var button = $('reset-all-button');
 382     button.innerHTML = isDefault ? TITLE_DEFAULT : TITLE_NOT_DEFAULT;
 383     button.disabled = isDefault;
 384   },
 385
 386   /**
 387    * Handle callback from call to updatePreferenceValue.
 388    * @param {string} prefName The name of the requested preference value.
 389    * @param {value} value The current value associated with prefName.
 390    * @param {boolean} isDefault Whether the value is the default value.
 391    */
 392   updatePreferenceValueResult: function(prefName, value, isDefault) {
 393     prefName = prefName.substring(prefName.indexOf('.') + 1);
 394     $(prefName).value = value;
 395     this.updateResetButton($(prefName + '-reset'), isDefault);
 396     this.updateResetAllButton(this.areAllPrefsSetToDefault());
 397   },
 398 };
 399
 400 document.addEventListener('DOMContentLoaded', gesture_config.initialize);