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: 'long_press_time_in_seconds',
 172       label: 'Long Press Time',
 173       units: 'seconds'
 174     },
 175     {
 176       key: 'semi_long_press_time_in_seconds',
 177       label: 'Semi Long Press Time',
 178       units: 'seconds',
 179       step: 0.1
 180     },
 181     {
 182       key: 'show_press_delay_in_ms',
 183       label: 'Delay before show press event is fired',
 184       units: 'milliseconds',
 185     },
 186     {
 187       key: 'max_seconds_between_double_click',
 188       label: 'Maximum Double Click Interval',
 189       units: 'seconds',
 190       step: 0.1
 191     },
 192     {
 193       key: 'max_separation_for_gesture_touches_in_pixels',
 194       label: 'Maximum Separation for Gesture Touches',
 195       units: 'pixels'
 196     },
 197     {
 198       key: 'max_swipe_deviation_ratio',
 199       label: 'Maximum Swipe Deviation',
 200       units: ''
 201     },
 202     {
 203       key: 'max_touch_down_duration_in_seconds_for_click',
 204       label: 'Maximum Touch-Down Duration for Click',
 205       units: 'seconds',
 206       step: 0.1
 207     },
 208     {
 209       key: 'max_touch_move_in_pixels_for_click',
 210       label: 'Maximum Touch-Move for Click',
 211       units: 'pixels'
 212     },
 213     {
 214       key: 'max_distance_between_taps_for_double_tap',
 215       label: 'Maximum Distance between two taps for Double Tap',
 216       units: 'pixels'
 217     },
 218     {
 219       key: 'min_distance_for_pinch_scroll_in_pixels',
 220       label: 'Minimum Distance for Pinch Scroll',
 221       units: 'pixels'
 222     },
 223     {
 224       key: 'min_flick_speed_squared',
 225       label: 'Minimum Flick Speed Squared',
 226       units: '(pixels/sec.)<sup>2</sup>'
 227     },
 228     {
 229       key: 'min_pinch_update_distance_in_pixels',
 230       label: 'Minimum Pinch Update Distance',
 231       units: 'pixels'
 232     },
 233     {
 234       key: 'min_rail_break_velocity',
 235       label: 'Minimum Rail-Break Velocity',
 236       units: 'pixels/sec.'
 237     },
 238     {
 239       key: 'min_scroll_delta_squared',
 240       label: 'Minimum Scroll Delta Squared',
 241       units: ''
 242     },
 243     {
 244       key: 'scroll_prediction_seconds',
 245       label: 'Scroll prediction interval<br>' +
 246           '(Enable scroll prediction in ' +
 247               '<a href="chrome://flags">chrome://flags</a>)',
 248       units: 'seconds',
 249       step: 0.01
 250     },
 251     {
 252       key: 'min_swipe_speed',
 253       label: 'Minimum Swipe Speed',
 254       units: 'pixels/sec.'
 255     },
 256     {
 257       key: 'min_touch_down_duration_in_seconds_for_click',
 258       label: 'Minimum Touch-Down Duration for Click',
 259       units: 'seconds',
 260       step: 0.01
 261     },
 262     {
 263       key: 'points_buffered_for_velocity',
 264       label: 'Points Buffered for Velocity',
 265       units: '',
 266       step: 1
 267     },
 268     {
 269       key: 'rail_break_proportion',
 270       label: 'Rail-Break Proportion',
 271       units: '%'
 272     },
 273     {
 274       key: 'rail_start_proportion',
 275       label: 'Rail-Start Proportion',
 276       units: '%'
 277     },
 278     {
 279       key: 'fling_acceleration_curve_coefficient_0',
 280       label: 'Touchscreen Fling Acceleration',
 281       units: 'x<sup>3</sup>',
 282       min: '-1'
 283     },
 284     {
 285       key: 'fling_acceleration_curve_coefficient_1',
 286       label: '+',
 287       units: 'x<sup>2</sup>',
 288       min: '-1'
 289     },
 290     {
 291       key: 'fling_acceleration_curve_coefficient_2',
 292       label: '+',
 293       units: 'x<sup>1</sup>',
 294       min: '-1'
 295     },
 296     {
 297       key: 'fling_acceleration_curve_coefficient_3',
 298       label: '+',
 299       units: 'x<sup>0</sup>',
 300       min: '-1'
 301     },
 302     {
 303       key: 'fling_velocity_cap',
 304       label: 'Touchscreen Fling Velocity Cap',
 305       units: 'pixels / second'
 306     },
 307     {
 308       key: 'tab_scrub_activation_delay_in_ms',
 309       label: 'Tab scrub auto activation delay, (-1 for never)',
 310       units: 'milliseconds'
 311     }
 312   ];
 313
 314   return new GeneralConfig(GESTURE_TITLE, GESTURE_PREFIX, GESTURE_FIELDS);
 315 }
 316
 317 /**
 318  * Returns a GeneralConfig for configuring overscroll.* preferences.
 319  * @return {object} A GeneralConfig object.
 320  */
 321 function OverscrollConfig() {
 322   /** @const */ var OVERSCROLL_TITLE = 'Overscroll Configuration';
 323
 324   /** @const */ var OVERSCROLL_PREFIX = 'overscroll.';
 325
 326   var OVERSCROLL_FIELDS = [
 327     {
 328       key: 'horizontal_threshold_complete',
 329       label: 'Complete when overscrolled (horizontal)',
 330       units: '%'
 331     },
 332     {
 333       key: 'vertical_threshold_complete',
 334       label: 'Complete when overscrolled (vertical)',
 335       units: '%'
 336     },
 337     {
 338       key: 'minimum_threshold_start_touchpad',
 339       label: 'Start overscroll gesture (horizontal; touchpad)',
 340       units: 'pixels'
 341     },
 342     {
 343       key: 'minimum_threshold_start',
 344       label: 'Start overscroll gesture (horizontal; touchscreen)',
 345       units: 'pixels'
 346     },
 347     {
 348       key: 'vertical_threshold_start',
 349       label: 'Start overscroll gesture (vertical)',
 350       units: 'pixels'
 351     },
 352     {
 353       key: 'horizontal_resist_threshold',
 354       label: 'Start resisting overscroll after (horizontal)',
 355       units: 'pixels'
 356     },
 357     {
 358       key: 'vertical_resist_threshold',
 359       label: 'Start resisting overscroll after (vertical)',
 360       units: 'pixels'
 361     },
 362   ];
 363
 364   return new GeneralConfig(OVERSCROLL_TITLE,
 365                            OVERSCROLL_PREFIX,
 366                            OVERSCROLL_FIELDS);
 367 }
 368
 369 /**
 370  * Returns a GeneralConfig for configuring flingcurve.* preferences.
 371  * @return {object} A GeneralConfig object.
 372  */
 373 function FlingConfig() {
 374   /** @const */ var FLING_TITLE = 'Fling Configuration';
 375
 376   /** @const */ var FLING_PREFIX = 'flingcurve.';
 377
 378   var FLING_FIELDS = [
 379     {
 380       key: 'touchscreen_alpha',
 381       label: 'Touchscreen fling deacceleration coefficients',
 382       units: 'alpha',
 383       min: '-inf'
 384     },
 385     {
 386       key: 'touchscreen_beta',
 387       label: '',
 388       units: 'beta',
 389       min: '-inf'
 390     },
 391     {
 392       key: 'touchscreen_gamma',
 393       label: '',
 394       units: 'gamma',
 395       min: '-inf'
 396     },
 397     {
 398       key: 'touchpad_alpha',
 399       label: 'Touchpad fling deacceleration coefficients',
 400       units: 'alpha',
 401       min: '-inf'
 402     },
 403     {
 404       key: 'touchpad_beta',
 405       label: '',
 406       units: 'beta',
 407       min: '-inf'
 408     },
 409     {
 410       key: 'touchpad_gamma',
 411       label: '',
 412       units: 'gamma',
 413       min: '-inf'
 414     },
 415   ];
 416
 417   return new GeneralConfig(FLING_TITLE, FLING_PREFIX, FLING_FIELDS);
 418 }
 419
 420 /**
 421  * WebUI instance for configuring preference values related to gesture input.
 422  */
 423 window.gesture_config = {
 424   /**
 425    * Build and initialize the gesture configuration form.
 426    */
 427   initialize: function() {
 428     var g = GestureConfig();
 429     g.buildAll();
 430
 431     var o = OverscrollConfig();
 432     o.buildAll();
 433
 434     var f = FlingConfig();
 435     f.buildAll();
 436
 437     $('reset-all-button').onclick = function() {
 438       g.onReset();
 439       o.onReset();
 440       f.onReset();
 441     };
 442   },
 443
 444   /**
 445    * Checks if all gesture preferences are set to default by checking the status
 446    * of the reset button associated with each preference.
 447    * @return {boolean} True if all gesture preferences are set to default.
 448    */
 449   areAllPrefsSetToDefault: function() {
 450     var resets = $('gesture-form').querySelectorAll('.row-reset');
 451     for (var i = 0; i < resets.length; i++) {
 452       if (!resets[i].disabled)
 453         return false;
 454     }
 455     return true;
 456   },
 457
 458   /**
 459    * Updates the status and label of a preference reset button.
 460    * @param {HTMLInputElement} resetButton Reset button for the preference.
 461    * @param {boolean} isDefault Whether the preference is set to the default
 462    *     value.
 463    */
 464   updateResetButton: function(resetButton, isDefault) {
 465     /** @const */ var TITLE_DEFAULT = 'Default';
 466
 467     /** @const */ var TITLE_NOT_DEFAULT = 'Reset';
 468
 469     resetButton.innerHTML = isDefault ? TITLE_DEFAULT : TITLE_NOT_DEFAULT;
 470     resetButton.disabled = isDefault;
 471   },
 472
 473   /**
 474    * Updates the status and label of "Reset All" button.
 475    * @param {boolean} isDefault Whether all preference are set to their default
 476    *     values.
 477    */
 478   updateResetAllButton: function(isDefault) {
 479     /** @const */ var TITLE_DEFAULT = 'Everything is set to default';
 480
 481     /** @const */ var TITLE_NOT_DEFAULT = 'Reset All To Default';
 482
 483     var button = $('reset-all-button');
 484     button.innerHTML = isDefault ? TITLE_DEFAULT : TITLE_NOT_DEFAULT;
 485     button.disabled = isDefault;
 486   },
 487
 488   /**
 489    * Handle callback from call to updatePreferenceValue.
 490    * @param {string} prefName The name of the requested preference value.
 491    * @param {value} value The current value associated with prefName.
 492    * @param {boolean} isDefault Whether the value is the default value.
 493    */
 494   updatePreferenceValueResult: function(prefName, value, isDefault) {
 495     prefName = prefName.substring(prefName.indexOf('.') + 1);
 496     $(prefName).value = value;
 497     this.updateResetButton($(prefName + '-reset'), isDefault);
 498     this.updateResetAllButton(this.areAllPrefsSetToDefault());
 499   },
 500 };
 501
 502 document.addEventListener('DOMContentLoaded', gesture_config.initialize);