[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);
-        var newCardIndex = this.currentCard + pagesToScroll;
-        newCardIndex = Math.min(this.cards_.length - 1,
-                                Math.max(0, newCardIndex));
-        this.selectCard(newCardIndex, true);
-        this.mouseWheelScrollAmount_ -= pagesToScroll * scrollAmountPerPage;
+      // 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;

[Evan Stade, 2011/10/22 00:48:35]

why is this necessary? don't you want it to be possible to switch through many
cards with an aggressive swipe?

[csilv, 2011/10/22 01:24:32]

No.  We really want a swipe to change a single page at a time.  You can see this
on Android or iPhone that use page swipe UIs... no mater how aggressive it is,
it's single page only.  If we were using touch events, this would be easy to do.
  But that's not an option.

[Evan Stade, 2011/10/22 01:57:46]

ok

+        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 'tick' a page change.
+        var scrollAmountPerPage = DISCRETE_DELTA;
+        if (!ntp4.isRTL())
+          scrollAmountPerPage *= -1;
+        this.mouseWheelScrollAmount_ += e.wheelDeltaX;

[Evan Stade, 2011/10/22 00:48:35]

why do you add this just to subtract it again?

[csilv, 2011/10/22 01:24:32]

This was the original code that you wrote, but you raise a good point.  Since
this section will only be invoked for discrete devices, I can simplify this
logic quite a bit.  I'll do that.

[csilv, 2011/10/22 01:49:35]

Done.

+        if (Math.abs(this.mouseWheelScrollAmount_) >=
+            Math.abs(scrollAmountPerPage)) {
+          var pagesToScroll =
+              this.mouseWheelScrollAmount_ / scrollAmountPerPage;
+          pagesToScroll =
+              (pagesToScroll > 0 ? Math.floor : Math.ceil)(pagesToScroll);
+          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;
 })();