Add a scrollbar to sky-scrollable

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;
+    position: relative;
   }
   #scrollable {
     transform: translateY(0);
   }
+  #vbar {
+    position: absolute;
+    right: 0;
+    width: 3px;
+    background-color: lightgray;
+    top: 0;
+    height: 0;
+  }
   </style>
+  <div id="vbar" />
   <div id="scrollable">
     <content />
   </div>
 </template>
 <script>
+const kScrollbarFadeDurationMS = 300;
+
 module.exports = class extends SkyElement {
   created() {
     this.scrollable_ = null;
+    this.vbar_ = null;
     this.scrollOffset_ = 0;
     this.flingCurve_ = null;
     this.flingAnimationId_ = null;
   }
 
   shadowRootReady() {
     this.scrollable_ = this.shadowRoot.getElementById('scrollable');
+    this.vbar_ = this.shadowRoot.getElementById('vbar');
+  }
+
+  get scrollOffset() {
+    return this.scrollOffset_;
+  }
+
+  set scrollOffset(value) {
+    // TODO(abarth): Can we get these values without forcing a synchronous layout?

[ojan, 2015/01/27 05:32:25]

We should add apis that give you stale values and remove these ones. Or we could
just make these return stale values. In either case, we'll want a method to
force a layout too probably?

[abarth-chromium, 2015/01/27 05:36:39]

Yeah, it seems fine to use stale values here.  I also need some sort of
notification for when the layout has changed because I need to clamp the
scrollOffset again.

[abarth-chromium, 2015/01/27 05:36:39]

Yeah, it seems fine to use stale values here.  I also need some sort of
notification for when the layout has changed because I need to clamp the
scrollOffset again.

+    var outerHeight = this.clientHeight;
+    var innerHeight = this.scrollable_.clientHeight;
+    var scrollRange = innerHeight - outerHeight;
+    var newScrollOffset = Math.max(0, Math.min(scrollRange, value));
+    if (newScrollOffset == this.scrollOffset_)
+      return;
+    this.scrollOffset_ = newScrollOffset;
+    var transform = 'translateY(' + -this.scrollOffset_.toFixed(2) + 'px)';
+    this.scrollable_.style.transform = transform;
+
+    var topPercent = newScrollOffset / innerHeight * 100;
+    var heightPercent = outerHeight / innerHeight * 100;
+    this.vbar_.style.top = topPercent + '%';
+    this.vbar_.style.height = heightPercent + '%';

[ojan, 2015/01/27 05:32:25]

This won't work if the scrollable's height is auto. I guess you can't get a
scrollbar in that case anyways?

[abarth-chromium, 2015/01/27 05:36:39]

Yeah.  This should work as long as you don't change from being a fixed height to
being auto, but the whole thing gets screwed up when you change layout anyway.

   }
 
   scrollBy(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;
+    var oldScrollOffset = this.scrollOffset_;
+    this.scrollOffset += scrollDelta;
+    return this.scrollOffset_ != oldScrollOffset;
   }
 
   scheduleFlingUpdate_() {
     this.flingAnimationId_ = requestAnimationFrame(this.updateFling_.bind(this));
   }
 
   stopFling_() {
     cancelAnimationFrame(this.flingAnimationId_);
     this.flingCurve_ = null;
     this.flingAnimationId_ = null;
@@ skipping 20 matching lines @@
     this.flingCurve_ = new FlingCurve(-event.velocityY, event.timeStamp);
     this.scheduleFlingUpdate_();
   }
 
   handleFlingCancel_(event) {
     this.stopFling_();
   }
 }.register();
 </script>
 </sky-element>