[ntp4] Improve horizontal mousewheel event handling for touch devices.

chrome/browser/resources/ntp4/card_slider.js

 // 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.
 
 /**
  * @fileoverview Card slider implementation. Allows you to create interactions
  * that have items that can slide left to right to reveal additional items.
  * Works by adding the necessary event handlers to a specific DOM structure
  * including a frame, container and cards.
  * - The frame defines the boundary of one item. Each card will be expanded to
@@ skipping 110 matching lines @@
       assert(view.getComputedStyle(this.container_).display == '-webkit-box',
           'Container should be display -webkit-box.');
       assert(view.getComputedStyle(this.frame_).overflow == 'hidden',
           'Frame should be overflow hidden.');
       assert(view.getComputedStyle(this.container_).position == 'static',
           'Container should be position static.');
 
       this.updateCardWidths_();
 
       this.mouseWheelScrollAmount_ = 0;
+      this.mouseWheelCardSelected_ = false;
+      this.mouseWheelIsContinuous_ = false;
       this.scrollClearTimeout_ = null;
       this.frame_.addEventListener('mousewheel',
                                    this.onMouseWheel_.bind(this));
 
       if (document.documentElement.getAttribute('touchui')) {
         this.container_.addEventListener(TouchHandler.EventType.TOUCH_START,
                                          this.onTouchStart_.bind(this));
         this.container_.addEventListener(TouchHandler.EventType.DRAG_START,
                                          this.onDragStart_.bind(this));
         this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE,
@@ skipping 85 matching lines @@
      * Handle horizontal scrolls to flip between pages.
      * @private
      */
     onMouseWheel_: function(e) {
       if (e.wheelDeltaX == 0)
         return;
 
       // Prevent OS X 10.7+ history swiping on the NTP.
       e.preventDefault();
 
-      // Mac value feels ok with multitouch trackpads and magic mice
-      // (with physical scrollwheel, too), but not so great with logitech
-      // mice.
-      var scrollAmountPerPage = cr.isMac ? 400 : 120;
-      if (!ntp4.isRTL())
-        scrollAmountPerPage *= -1;
-      this.mouseWheelScrollAmount_ += e.wheelDeltaX;
-      if (Math.abs(this.mouseWheelScrollAmount_) >=
-          Math.abs(scrollAmountPerPage)) {
-        var pagesToScroll = this.mouseWheelScrollAmount_ / scrollAmountPerPage;
-        pagesToScroll =
-            (pagesToScroll > 0 ? Math.floor : Math.ceil)(pagesToScroll);
+      // Continuous devices such as an Apple Touchpad or Apple MagicMouse will
+      // send arbitrary delta values. Conversly, standard mousewheels will
+      // send delta values in increments of 120.  (There is of course a small
+      // chance we mistake a continuous device for a non-continuous device.
+      // Unfortunately there isn't a better way to do this until real touch
+      // events are available to desktop clients.)
+      var DISCRETE_DELTA = 120;
+      if (e.wheelDeltaX % DISCRETE_DELTA)
+        this.mouseWheelIsContinuous_ = true;
+
+      if (this.mouseWheelIsContinuous_) {
+        // For continuous devices, detect a page swipe when the accumulated
+        // delta matches a pre-defined threshhold.  After changing the page,
+        // ignore wheel events for a short time before repeating this process.
+        if (this.mouseWheelCardSelected_) return;
+        this.mouseWheelScrollAmount_ += e.wheelDeltaX;
+        if (Math.abs(this.mouseWheelScrollAmount_) >= 600) {
+          var pagesToScroll = this.mouseWheelScrollAmount_ > 0 ? 1 : -1;
+          if (!ntp4.isRTL())
+            pagesToScroll *= -1;
+          var newCardIndex = this.currentCard + pagesToScroll;
+          newCardIndex = Math.min(this.cards_.length - 1,
+                                  Math.max(0, newCardIndex));
+          this.selectCard(newCardIndex, true);
+          this.mouseWheelCardSelected_ = true;
+        }
+      } else {
+        // For discrete devices, consider each wheel tick a page change.
+        var pagesToScroll = e.wheelDeltaX / DISCRETE_DELTA;
+        if (!ntp4.isRTL())
+          pagesToScroll *= -1;
         var newCardIndex = this.currentCard + pagesToScroll;
         newCardIndex = Math.min(this.cards_.length - 1,
                                 Math.max(0, newCardIndex));
         this.selectCard(newCardIndex, true);
-        this.mouseWheelScrollAmount_ -= pagesToScroll * scrollAmountPerPage;
       }
 
       // We got a mouse wheel event, so cancel any pending scroll wheel timeout.
       if (this.scrollClearTimeout_ != null)
         clearTimeout(this.scrollClearTimeout_);
       // If we didn't use up all the scroll, hold onto it for a little bit, but
       // drop it after a delay.
       if (this.mouseWheelScrollAmount_ != 0) {
         this.scrollClearTimeout_ =
             setTimeout(this.clearMouseWheelScroll_.bind(this), 500);
       }
     },
 
     /**
      * Resets the amount of horizontal scroll we've seen to 0. See
      * onMouseWheel_.
      * @private
      */
     clearMouseWheelScroll_: function() {
       this.mouseWheelScrollAmount_ = 0;
+      this.mouseWheelCardSelected_ = false;
     },
 
     /**
      * Selects a new card, ensuring that it is a valid index, transforming the
      * view and possibly calling the change card callback.
      * @param {number} newCardIndex Index of card to show.
      * @param {boolean=} opt_animate If true will animate transition from
      *     current position to new position.
      */
     selectCard: function(newCardIndex, opt_animate) {
@@ skipping 146 matching lines @@
       // Stop listening to any current touch
       this.touchHandler_.cancelTouch();
 
       // Ensure we're at a card bounary
       this.transformToCurrentCard_(true);
     },
   };
 
   return CardSlider;
 })();