sky-scrollable should use a reasonable fling curve

sky/framework/sky-scrollable.sky

 <!--
 // Copyright 2015 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.
 -->
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="/sky/framework/fling-curve.sky" as="FlingCurve" />
 
 <sky-element
   name="sky-scrollable"
   on-gesturescrollstart="handleScrollStart_"
   on-gesturescrollend="handleScrollEnd_"
   on-gesturescrollupdate="handleScrollUpdate_"
   on-gestureflingstart="handleFlingStart_"
   on-gestureflingcancel="handleFlingCancel_">
 <template>
   <style>
   :host {
     overflow: hidden;
   }
   #scrollable {
     transform: translateY(0);
   }
   </style>
   <div id="scrollable">
     <content />
   </div>
 </template>
 <script>
-// TODO(abarth): Move the fling curve to a separate module.
-var kFlingFriction = 0.9;
-var kFlingVelocityMin = 1;
-
 module.exports = class extends SkyElement {
   created() {
     this.scrollable_ = null;
     this.scrollOffset_ = 0;
-    this.flingVelocity_ = 0;
+    this.flingCurve_ = null;
     this.flingAnimationId_ = null;
   }
 
   shadowRootReady() {
     this.scrollable_ = this.shadowRoot.getElementById('scrollable');
   }
 
   scrollBy(scrollDelta) {
-    var offset = Math.max(0, Math.min(this.scrollable_.offsetHeight, this.scrollOffset_ + scrollDelta));
+    var scrollHeight = this.scrollable_.clientHeight - this.clientHeight;
+    var offset = Math.max(0, Math.min(scrollHeight, this.scrollOffset_ + scrollDelta));
     if (offset == this.scrollOffset_)
       return false;
     this.scrollOffset_ = offset;
     this.applyScrollOffset_();
     return true;
   }
 
   applyScrollOffset_() {
     var transform = 'translateY(' + -this.scrollOffset_.toFixed(2) + 'px)';
     this.scrollable_.style.transform = transform;
   }
 
-  scheduleFlingTick_() {
-    this.flingAnimationId_ = requestAnimationFrame(this.tickFling_.bind(this));
+  scheduleFlingUpdate_() {
+    this.flingAnimationId_ = requestAnimationFrame(this.updateFling_.bind(this));
   }
 
-  tickFling_() {
+  stopFling_() {
+    cancelAnimationFrame(this.flingAnimationId_);
+    this.flingCurve_ = null;
     this.flingAnimationId_ = null;
-    if (!this.scrollBy(this.flingVelocity_)) {
-      this.flingVelocity_ = 0;
-      return;
-    }
-    var velocity = this.flingVelocity_ * kFlingFriction;
-    if (velocity < kFlingVelocityMin)
-      velocity = 0;
-    this.flingVelocity_ = velocity;
-    if (velocity)
-      this.scheduleFlingTick_();
+  }
+
+  updateFling_(timeStamp) {
+    var scrollDelta = this.flingCurve_.update(timeStamp);
+    if (!scrollDelta || !this.scrollBy(scrollDelta))
+      return this.stopFling_();
+    this.scheduleFlingUpdate_();
   }
 
   handleScrollStart_(event) {
   }
 
   handleScrollEnd_(event) {
   }
 
   handleScrollUpdate_(event) {
     this.scrollBy(-event.dy);
   }
 
   handleFlingStart_(event) {
-    this.flingVelocity_ = -event.velocityY;
-    this.scheduleFlingTick_();
+    this.flingCurve_ = new FlingCurve(-event.velocityY, event.timeStamp);
+    this.scheduleFlingUpdate_();
   }
 
   handleFlingCancel_(event) {
-    if (!this.flingAnimationId_)
-      return;
-    cancelAnimationFrame(this.flingAnimationId_);
-    this.flingVelocity_ = 0;
-    this.flingAnimationId_ = null;
+    this.stopFling_();
   }
 }.register();
 </script>
 </sky-element>