Initial check-in of gesture config WebUI.

chrome/browser/resources/gesture_config.js

+// 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.
+
+// Since '$' is the only feature used from the standard 'cr.*' library,
+// I just redefine it here.  This allows this file to be loaded in a
+// browser directly for layout and some testing purposes.

[flackr, 2012/06/06 14:50:54]

Try to avoid personal pronouns. i.e. Redefine '$' here rather than including
cr.js since this is the only function needed.

[Kevin Greer, 2012/06/06 20:26:20]

Done.

+var $ = function(id) { return document.getElementById(id); };
+
+/**
+ * WebUI for configuring gesture.* preference values used by
+ * Chrome's gesture recognition system.
+ */
+var gesture_config = (function() {
+  'use strict';
+
+  /** Common prefix of gesture preferences. **/
+  var GESTURE_PREFIX = 'gesture.';
+
+  /** List of fields used to dynamically build form. **/
+  var FIELDS = [
+    {
+      key: 'long_press_time_in_seconds',
+      label: 'Long Press Time',

[flackr, 2012/06/06 14:50:54]

These labels will need to be localized.

[Kevin Greer, 2012/06/06 20:26:20]

This is screen is meant to be an unsupported/internal feature which will not be
internationalized.
Does this mean it should appear under about:// instead of chrome://?
On 2012/06/06 14:50:54, flackr wrote:

+      units: 'seconds'
+    },
+    {
+      key: 'max_seconds_between_double_click',
+      label: 'Max. Double Click Interval',

[rjkroege, 2012/06/06 15:10:28]

why abbreviate Max, Min? Does it negatively effect layout.

[Kevin Greer, 2012/06/06 20:26:20]

Changed to the long forms.
On 2012/06/06 15:10:28, rjkroege wrote:

+      units: 'seconds'
+    },
+    {
+      key: 'max_separation_for_gesture_touches_in_pixels',
+      label: 'Max. Separation for Gesture Touches',
+      units: 'pixels'
+    },
+    {
+      key: 'max_swipe_deviation_ratio',
+      label: 'Max. Swipe Deviation',
+      units: ''
+    },
+    {
+      key: 'max_touch_down_duration_in_seconds_for_click',
+      label: 'Max. Touch-Down Duration for Click',
+      units: 'seconds'
+    },
+    {
+      key: 'max_touch_move_in_pixels_for_click',
+      label: 'Max. Touch-Move for Click',
+      units: 'pixels'
+    },
+    {
+      key: 'min_distance_for_pinch_scroll_in_pixels',
+      label: 'Min. Distance for Pinch Scroll',
+      units: 'pixels'
+    },
+    {
+      key: 'min_flick_speed_squared',
+      label: 'Min. Flick Speed Squared',
+      units: ''
+    },
+    {
+      key: 'min_pinch_update_distance_in_pixels',
+      label: 'Min. Pinch Update Distance',
+      units: 'pixels'
+    },
+    {
+      key: 'min_rail_break_velocity',
+      label: 'Min. Rail-Break Velocity',
+      units: ''
+    },
+    {
+      key: 'min_scroll_delta_squared',
+      label: 'Min. Scroll Delta Squared',
+      units: ''
+    },
+    {
+      key: 'min_swipe_speed',
+      label: 'Min. Swipe Speed',
+      units: ''
+    },
+    {
+      key: 'min_touch_down_duration_in_seconds_for_click',
+      label: 'Min. Touch-Down Duration for Click',
+      units: 'seconds'
+    },
+    {
+      key: 'points_buffered_for_velocity',
+      label: 'Points Buffered for Velocity',
+      units: ''
+    },
+    {
+      key: 'rail_break_proportion',
+      label: 'Rail-Break Proportion',
+      units: ''
+    },
+    {
+      key: 'rail_start_proportion',
+      label: 'Rail-Start Proportion',
+      units: ''
+    }
+  ];
+
+  /**
+   * Dynamically builds web-form based on FIELDS list.
+   * @return {string} The form's HTML.
+   */
+  function buildForm() {
+    var buf = [];
+
+    for (var i = 0; i < FIELDS.length; i++) {
+      var field = FIELDS[i];
+
+      buf.push('<div class="row">');
+      buf.push('<label>');
+      buf.push(field.label);
+      buf.push('</label>');
+      buf.push('<input type="number" id="' + field.key + '" size=20 />');
+      if (field.units)
+        buf.push('<div class="units">(' + field.units + ')</div>');
+      buf.push('</div>');

[flackr, 2012/06/06 14:50:54]

Can you define and clone a template DOM node rather than constructing an HTML
string?

[Kevin Greer, 2012/06/07 19:07:00]

Given all of the conditional logic in the formatting, I think it would be a lot
more trouble than it would be worth.
On 2012/06/06 14:50:54, flackr wrote:

[flackr, 2012/06/07 21:07:54]

I don't think this should be that bad, you would just clone the node, and
populate fields / attributes (some only if you have data for them). Then perhaps
add a class to toggle visibility of the units div.

This way you could see and edit the structure of a row in the HTML file.

On 2012/06/07 19:07:00, Kevin Greer wrote:

[Kevin Greer, 2012/06/08 11:51:25]

Will do in next CL.
On 2012/06/07 21:07:54, flackr wrote:

+    }
+
+    return buf.join('');
+  }
+
+  /**
+   * Request a preference setting's value.
+   * This method is asynchronous; the result is provided by a call to
+   * getPreferenceValueResult.
+   * @param {string} prefName The name of the preference value being requested.
+   */
+  function getPreferenceValue(prefName) {
+    chrome.send('getPreferenceValue', [GESTURE_PREFIX + prefName]);
+  }
+
+  /**
+   * Handle callback from call to getPreferenceValue.
+   * @param {string} prefName The name of the requested preference value.
+   * @param {value} value The current value associated with prefName.
+   */
+  function getPreferenceValueResult(prefName, value) {
+    prefName = prefName.substring(prefName.indexOf('.') + 1);
+    $(prefName).value = value;
+  }
+
+  /**
+   * Set a preference setting's value.
+   * @param {string} prefName The name of the preference value being set.
+   * @param {value} value The value to be associated with prefName.
+   */
+  function setPreferenceValue(prefName, value) {
+    chrome.send(
+        'setPreferenceValue',
+        [GESTURE_PREFIX + prefName, parseFloat(value)]);
+  }
+
+  /**
+   * Handle processing of "Update" button.
+   * Causes all preference values to be updated based on current form values.
+   */
+  function onUpdate() {
+    for (var i = 0; i < FIELDS.length; i++) {
+      var key = FIELDS[i].key;
+      setPreferenceValue(key, $(key).value);
+    }
+    return false;
+  }
+
+  /**
+   * Handle processing of "Reset" button.
+   * Causes off form values to be updated based on current preference values.
+   */
+  function onReset() {
+    for (var i = 0; i < FIELDS.length; i++) {
+      getPreferenceValue(FIELDS[i].key);
+    }
+    return false;
+  }
+
+  /**
+   * Build and initialize the gesture configuration form.
+   */
+  function initialize() {
+    $('gestureForm').innerHTML = buildForm();
+
+    // Load Current Values
+    onReset();
+
+    $('updateButton').onclick = onUpdate.bind(this);
+    $('resetButton').onclick = onReset.bind(this);

[flackr, 2012/06/06 14:50:54]

On the settings page we update / fetch values immediately as they are changed,
are we sure that we want to use a delayed batch update model here?

[Kevin Greer, 2012/06/06 20:26:20]

Changed.
On 2012/06/06 14:50:54, flackr wrote:

+  }
+
+  return {
+    initialize: initialize,
+    getPreferenceValue: getPreferenceValue,
+    getPreferenceValueResult: getPreferenceValueResult,
+    setPreferenceValue: setPreferenceValue
+  };
+})();
+
+document.addEventListener('DOMContentLoaded', gesture_config.initialize);