Save slider preferences when using touch.

On the Settings page, when you change a slider (input type="range") by
touch, we don't save the associated preference.

Listen to touchend and touchcancel, and add a test for this.

BUG=394938
R=estade@chromium.org

Review URL: https://codereview.chromium.org/400993003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@284292 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/options/browser_options.html

@@ -110,12 +110,12 @@
       <span i18n-content="deviceGroupDescription"></span>
       <div id="touchpad-settings" class="settings-row" hidden>
         <span class="option-name" i18n-content="touchpadSpeed"></span>
-        <input id="sensitivity-range" type="range" min="1" max="5"
+        <input id="touchpad-sensitivity-range" type="range" min="1" max="5"
             pref="settings.touchpad.sensitivity2" class="touch-slider">
       </div>
       <div id="mouse-settings" class="settings-row" hidden>
         <span class="option-name" i18n-content="mouseSpeed"></span>
-        <input id="sensitivity-range" type="range" min="1" max="5"
+        <input id="mouse-sensitivity-range" type="range" min="1" max="5"
             pref="settings.mouse.sensitivity2" class="touch-slider">
       </div>
       <div id="no-pointing-devices" i18n-content="noPointingDevices"

chrome/browser/resources/options/pref_ui.js

@@ -296,6 +296,8 @@ cr.define('options', function() {
       // https://bugs.webkit.org/show_bug.cgi?id=52256
       this.addEventListener('keyup', this.handleRelease_.bind(this));
       this.addEventListener('mouseup', this.handleRelease_.bind(this));
+      this.addEventListener('touchcancel', this.handleRelease_.bind(this));
+      this.addEventListener('touchend', this.handleRelease_.bind(this));
     },
 
     /**

chrome/browser/ui/webui/options/options_browsertest.js

@@ -311,6 +311,47 @@ TEST_F('OptionsWebUITest', 'DISABLED_OverlayShowDoesntShift', function() {
   expectGT(numFrozenPages, 0);
 });
 
+GEN('#if defined(OS_CHROMEOS)');
+// Verify that range inputs respond to touch events. Currently only Chrome OS
+// uses slider options.
+TEST_F('OptionsWebUITest', 'RangeInputHandlesTouchEvents', function() {
+  this.mockHandler.expects(once()).setIntegerPref([
+    'settings.touchpad.sensitivity2', 1]);
+
+  var touchpadRange = $('touchpad-sensitivity-range');
+  var event = document.createEvent('UIEvent');
+  event.initUIEvent('touchstart', true, true, window);
+  touchpadRange.dispatchEvent(event);
+
+  event = document.createEvent('UIEvent');
+  event.initUIEvent('touchmove', true, true, window);
+  touchpadRange.dispatchEvent(event);
+
+  touchpadRange.value = 1;
+
+  event = document.createEvent('UIEvent');
+  event.initUIEvent('touchend', true, true, window);
+  touchpadRange.dispatchEvent(event);
+
+  // touchcancel should also trigger the handler, since it
+  // changes the slider position.
+  this.mockHandler.expects(once()).setIntegerPref([
+    'settings.touchpad.sensitivity2', 2]);
+
+  event = document.createEvent('UIEvent');
+  event.initUIEvent('touchstart', true, true, window);
+  touchpadRange.dispatchEvent(event);
+
+  touchpadRange.value = 2;
+
+  event = document.createEvent('UIEvent');
+  event.initUIEvent('touchcancel', true, true, window);
+  touchpadRange.dispatchEvent(event);
+
+  testDone();
+});
+GEN('#endif');  // defined(OS_CHROMEOS)
+
 /**
  * TestFixture for OptionsPage WebUI testing including tab history and support
  * for preference manipulation. If you don't need the features in the C++