Add a scrollbar to sky-scrollable

sky/framework/sky-scrollable.sky

Index: sky/framework/sky-scrollable.sky
diff --git a/sky/framework/sky-scrollable.sky b/sky/framework/sky-scrollable.sky
index dd22953e5ce86accf11e99cf5873ec1459688c58..e04a620b94dca48f551e5433b24b0bb3e181c2e0 100644
--- a/sky/framework/sky-scrollable.sky
+++ b/sky/framework/sky-scrollable.sky
@@ -17,19 +17,32 @@
   <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;
@@ -37,21 +50,35 @@ module.exports = class extends SkyElement {
 
   shadowRootReady() {
     this.scrollable_ = this.shadowRoot.getElementById('scrollable');
+    this.vbar_ = this.shadowRoot.getElementById('vbar');
   }
 
-  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;
+  get scrollOffset() {
+    return this.scrollOffset_;
   }
 
-  applyScrollOffset_() {
+  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 oldScrollOffset = this.scrollOffset_;
+    this.scrollOffset += scrollDelta;
+    return this.scrollOffset_ != oldScrollOffset;
   }
 
   scheduleFlingUpdate_() {