Add ViewConfiguration and make our scrollbar size match Android

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-element.sky" />
 
 <sky-element>
 <template>
   <style>
   :host {
     overflow: hidden;
     position: relative;
     will-change: transform;
   }
   #scrollable {
     will-change: transform;
   }
   #vbar {
     position: absolute;
     right: 0;
-    width: 3px;
     background-color: lightgray;
     pointer-events: none;
     top: 0;
     height: 0;
     will-change: opacity;
     opacity: 0;
-    transition: opacity 0.2s ease-in-out;
+    transition-property: opacity;
+    transition-function: ease-in-out;
   }
   </style>
   <div id="scrollable">
     <content />
   </div>
   <div id="vbar" />
 </template>
 <script>
 import "dart:math" as math;
 import "dart:sky";
 import "fling-curve.dart";
+import "view-configuration.dart";
 
 @Tagname('sky-scrollable')
 class SkyScrollable extends SkyElement {
   Element _scrollable;
   Element _vbar;
   double _scrollOffset = 0.0;
   FlingCurve _flingCurve;
   int _flingAnimationId;
 
   SkyScrollable() {
     addEventListener('gesturescrollstart', _handleScrollStart);
     addEventListener('gesturescrollend', _handleScrollEnd);
     addEventListener('gesturescrollupdate', _handleScrollUpdate);
     addEventListener('gestureflingstart', _handleFlingStart);
     addEventListener('gestureflingcancel', _handleFlingCancel);
     addEventListener('wheel', _handleWheel);
   }
 
   void shadowRootReady() {
     _scrollable = shadowRoot.getElementById('scrollable');
     _vbar = shadowRoot.getElementById('vbar');
+    ViewConfiguration config = new ViewConfiguration();
+    // This is not documented anywhere, but the scrollbar appears to only paint
+    // 3px even though it's official width is 10px?
+    // Chrome appears 3px wide with a 3px outer spacing.
+    // Contacts appears 3px wide with a 5px runner and 5px outer spacing.
+    // Settings appears 4px wide with no outer spacing.
+    double paintPercent = 0.3;
+    double outerGapPercent = 0.3;
+    double innerGapPercent = 0.4;
+    double paintWidth = paintPercent * config.kScrollbarSize;
+    _vbar.style['width'] = "${paintWidth}px";
+    _vbar.style['margin-right'] = "${outerGapPercent * config.kScrollbarSize}px";
+    _vbar.style['margin-left'] ="${innerGapPercent * config.kScrollbarSize}px";
+    // The scroll thumb never quite makes it to the top or bottom in gmail
+    // or chrome (in chrome more from the bottom than the top).
+    _vbar.style['margin-top'] = "${config.kScrollbarSize}px";
+    _vbar.style['margin-bottom'] = "${config.kScrollbarSize}px";
+
+    // Some android apps round their scrollbars, some don't, not rounding for now.
+    //_vbar.style['border-radius'] = "${paintWidth / 2}px";

[abarth-chromium, 2015/02/24 21:48:25]

Remove commented out code?

+
+    double msToSeconds = 1.0 / 1000.0;
+    _vbar.style['transition-duration'] = "${msToSeconds * config.kScrollbarFadeDuration}s";
+    _vbar.style['transition-delay'] = "${msToSeconds * config.kScrollbarFadeDelay}s";

[abarth-chromium, 2015/02/24 21:48:25]

Can we make these strings all compile-time constants?

   }
 
   double get scrollOffset => _scrollOffset;
 
   set scrollOffset(double value) {
     // TODO(abarth): Can we get these values without forcing a synchronous layout?
     double outerHeight = clientHeight.toDouble();
     double innerHeight = _scrollable.clientHeight.toDouble();
     double scrollRange = innerHeight - outerHeight;
     double newScrollOffset = math.max(0.0, math.min(scrollRange, value));
@@ skipping 56 matching lines @@
   }
 
   void _handleWheel(WheelEvent event) {
     scrollBy(-event.offsetY);
   }
 }
 
 _init(script) => register(script, SkyScrollable);
 </script>
 </sky-element>