Enable brightness controls for all ChromeOS builds. Make brightness controls auto-repeat.

BUG=chromium:100732
TEST=Launch ChromeOS and go to the System settings page.  Tap or press and hold the brightness buttons to adjust the screen brightness.


Review URL: http://codereview.chromium.org/8340002

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

5 files changed, 176 insertions, 24 deletions

diff --git a/chrome/browser/resources/options/chromeos/system_options.html b/chrome/browser/resources/options/chromeos/system_options.html
index 98c36f3..add9e28 100644
--- a/chrome/browser/resources/options/chromeos/system_options.html
+++ b/chrome/browser/resources/options/chromeos/system_options.html
@@ -21,18 +21,16 @@
         </div>
       </div>
     </section>
-    <if expr="pp_ifdef('touchui')">
-      <section>
-        <h3 i18n-content="screen"></h3>
-        <div id="brightness-value">
-          <span i18n-content="brightness"></span>
-          <button id="brightness-decrease-button"
-              i18n-content="brightnessDecrease"></button>
-          <button id="brightness-increase-button"
-              i18n-content="brightnessIncrease"></button>
-        </div>
-      </section>
-    </if>
+    <section>
+      <h3 i18n-content="screen"></h3>
+      <div id="brightness-value">
+        <span i18n-content="brightness"></span>
+        <button id="brightness-decrease-button"
+            i18n-content="brightnessDecrease"></button>
+        <button id="brightness-increase-button"
+            i18n-content="brightnessIncrease"></button>
+      </div>
+    </section>
     <section>
       <h3 i18n-content="touchpad"></h3>
       <div class="option-control-table">
diff --git a/chrome/browser/resources/options/chromeos/system_options.js b/chrome/browser/resources/options/chromeos/system_options.js
index 56ccd26..a447a26 100644
--- a/chrome/browser/resources/options/chromeos/system_options.js
+++ b/chrome/browser/resources/options/chromeos/system_options.js
@@ -5,6 +5,8 @@
 cr.define('options', function() {
 
   var OptionsPage = options.OptionsPage;
+  var RepeatingButton = cr.ui.RepeatingButton;
+
   /////////////////////////////////////////////////////////////////////////////
   // SystemOptions class:
 
@@ -63,27 +65,24 @@ cr.define('options', function() {
         chrome.send('accessibilityChange',
                     [String($('accesibility-check').checked)]);
       };
-
-      if (cr.isTouch) {
-        initializeBrightnessButton_('brightness-decrease-button',
-            'decreaseScreenBrightness');
-        initializeBrightnessButton_('brightness-increase-button',
-            'increaseScreenBrightness');
-      }
+      initializeBrightnessButton_('brightness-decrease-button',
+          'decreaseScreenBrightness');
+      initializeBrightnessButton_('brightness-increase-button',
+          'increaseScreenBrightness');
     }
   };
 
   /**
-   * Initializes a button for controlling screen brightness on touch builds of
-   * ChromeOS.
+   * Initializes a button for controlling screen brightness.
    * @param {string} id Button ID.
    * @param {string} callback Name of the callback function.
    */
   function initializeBrightnessButton_(id, callback) {
-    // TODO(kevers): Make brightness buttons auto-repeat if held.
-    $(id).onclick = function(event) {
+    var button = $(id);
+    cr.ui.decorate(button, RepeatingButton);
+    button.addEventListener(RepeatingButton.Event.BUTTON_HELD, function(e) {
       chrome.send(callback);
-    }
+    });
   }
 
   /**
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 9d7499c..d65e97a 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -73,6 +73,7 @@
 <script src="chrome://resources/js/cr/ui/list.js"></script>
 <script src="chrome://resources/js/cr/ui/grid.js"></script>
 <script src="chrome://resources/js/cr/ui/position_util.js"></script>
+<script src="chrome://resources/js/cr/ui/repeating_button.js"></script>
 <script src="chrome://resources/js/cr/ui/tree.js"></script>
 <script src="chrome://resources/js/local_strings.js"></script>
 <script src="chrome://resources/js/util.js"></script>
diff --git a/chrome/browser/resources/shared/js/cr/ui/repeating_button.js b/chrome/browser/resources/shared/js/cr/ui/repeating_button.js
new file mode 100644
index 0000000..43807bb
--- /dev/null
+++ b/chrome/browser/resources/shared/js/cr/ui/repeating_button.js
@@ -0,0 +1,152 @@
+// Copyright (c) 2011 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.
+
+cr.define('cr.ui', function() {
+  /**
+   * Creates a new button element. The repeating button behaves like a
+   * keyboard button, which auto-repeats if held. This button is designed
+   * for use with controls such as brightness and volume adjustment buttons.
+   * @constructor
+   * @extends {HTMLButtonElement}
+   */
+  var RepeatingButton = cr.ui.define('button');
+
+  /**
+   * DOM Events that may be fired by the Repeating button.
+   */
+  RepeatingButton.Event = {
+    BUTTON_HELD: 'buttonHeld'
+  };
+
+  RepeatingButton.prototype = {
+    __proto__: HTMLButtonElement.prototype,
+
+    /**
+     * Delay in milliseconds before the first repeat trigger of the button
+     * held action.
+     * @type {number}
+     * @private
+     */
+    holdDelayTime_: 500,
+
+    /**
+     * Delay in milliseconds between triggers of the button held action.
+     * @type {number}
+     * @private
+     */
+    holdRepeatIntervalTime_: 50,
+
+    /**
+     * Callback function when repeated intervals trigger. Initialized when the
+     * button is held for an initial delay period and cleared when the button
+     * is released.
+     * @type {function}
+     * @private
+     */
+    intervalCallback_: undefined,
+
+    /**
+     * Callback function to arm the repeat timer. Initialized when the button
+     * is pressed and cleared when the interval timer is set or the button is
+     * released.
+     * @type {function}
+     * @private
+     */
+    armRepeaterCallback_: undefined,
+
+    /**
+     * Initializes the button.
+     */
+    decorate: function() {
+      this.addEventListener('mousedown', this.buttonDown_.bind(this));
+      this.addEventListener('mouseup', this.buttonUp_.bind(this));
+      this.addEventListener('mouseout', this.buttonUp_.bind(this));
+      this.addEventListener('touchstart', this.touchStart_.bind(this));
+      this.addEventListener('touchend', this.buttonUp_.bind(this));
+      this.addEventListener('touchcancel', this.buttonUp_.bind(this));
+    },
+
+    /**
+     * Called when the user initiates a touch gesture.
+     * @param {!Event} e The triggered event.
+     * @private
+     */
+    touchStart_: function(e) {
+      // Block system level gestures to prevent double tap to zoom. Also,
+      // block following mouse event to prevent double firing of the button
+      // held action in the case of a tap. Otherwise, a single tap action in
+      // webkit generates the following event sequence: touchstart, touchend,
+      // mouseover, mousemove, mousedown, mouseup and click.
+      e.preventDefault();
+      this.buttonDown_(e);
+    },
+
+    /**
+     * Called when the user presses this button.
+     * @param {!Event} e The triggered event.
+     * @private
+     */
+    buttonDown_: function(e) {
+      this.clearTimeout_();
+      // Trigger the button held action immediately, after an initial delay and
+      // then repeated based on a fixed time increment. The time intervals are
+      // in agreement with the defaults for the ChromeOS keyboard and virtual
+      // keyboard.
+      // TODO(kevers): Consider adding a common location for picking up the
+      //               initial delay and repeat interval.
+      this.buttonHeld_();
+      var self = this;
+      this.armRepeaterCallback_ = function() {
+        // In the event of a click/tap operation, this button has already been
+        // released by the time this timeout triggers. Test to ensure that the
+        // button is still being held (i.e. clearTimeout has not been called).
+        if (self.armRepeaterCallback_) {
+          self.armRepeaterCallback_ = undefined;
+          self.intervalCallback_ = setInterval(self.buttonHeld_.bind(self),
+                                               self.holdRepeatIntervalTime_);
+        }
+      };
+      setTimeout(this.armRepeaterCallback_,
+                 Math.max(0, this.holdDelayTime_ -
+                     this.holdRepeatIntervalTime_));
+    },
+
+    /**
+     * Called when the user releases this button.
+     * @param {!Event} e The triggered event.
+     * @private
+     */
+    buttonUp_: function(e) {
+      this.clearTimeout_();
+    },
+
+    /**
+     * Resets the interval callback.
+     * @private
+     */
+    clearTimeout_: function() {
+      if (this.armRepeaterCallback_) {
+        clearTimeout(this.armRepeaterCallback_);
+        this.armRepeaterCallback_ = undefined;
+      }
+      if (this.intervalCallback_) {
+        clearInterval(this.intervalCallback_);
+        this.intervalCallback_ = undefined;
+      }
+    },
+
+    /**
+     * Dispatches the action associated with keeping this button pressed.
+     * @private
+     */
+    buttonHeld_: function() {
+      cr.dispatchSimpleEvent(this, RepeatingButton.Event.BUTTON_HELD);
+    }
+  };
+
+  return {
+    RepeatingButton: RepeatingButton
+  };
+});
+
diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd
index 8300093..22d3592 100644
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -92,6 +92,8 @@ without changes to the corresponding grd file. paaaae -->
                file="shared/js/cr/ui/splitter.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_CR_UI_GRID"
                file="shared/js/cr/ui/grid.js" type="BINDATA" />
+      <include name="IDR_SHARED_JS_CR_UI_REPEATING_BUTTON"
+               file="shared/js/cr/ui/repeating_button.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_CR_UI_TABLE"
                file="shared/js/cr/ui/table.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_CR_UI_TABLE_COLUMN"