Update Button to be made of Material

To accomplish this, I made the following changes:

1) Material is now in charge of drawing the material shadows.
2) In order to mix in the style for the shadow, Element now takes a list of
   Styles instead of a single style.
3) Update all clients of Element#style to understand that we now have a list.
4) Update components that drawer shadows to have Material do that work instead.
   a) One exception: FloatingActionButton draws its own shadow because of its
      crazy clip requirements. We'll probably want to find a better way for
      FloatingActionButton to clip in the future.

I've also added a widgets-fn example to demo the fn material widgets.

This CL introduces a bug into Drawer whereby you can get ink splashes
everywhere in the drawer. In the future, we'll need to separate out the
different material aspects to get non-splashable materials.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1003553002

examples/stocks-fn/stockarrow.dart

@@ -74,11 +74,11 @@ class StockArrow extends Component {
 
     return new Container(
       inlineStyle: 'border-color: $border',
-      style: _style,
+      styles: [_style],
       children: [
         new Container(
           inlineStyle: 'border-$type-color: $border',
-          style: up ? _upStyle : _downStyle
+          styles: [up ? _upStyle : _downStyle]
         )
       ]
     );

examples/stocks-fn/stockrow.dart

@@ -47,23 +47,23 @@ class StockRow extends Component {
       ),
       new Container(
         key: 'Ticker',
-        style: _tickerStyle,
+        styles: [_tickerStyle],
         children: [new Text(stock.symbol)]
       ),
       new Container(
         key: 'LastSale',
-        style: _lastSaleStyle,
+        styles: [_lastSaleStyle],
         children: [new Text(lastSale)]
       ),
       new Container(
         key: 'Change',
-        style: _changeStyle,
+        styles: [_changeStyle],
         children: [new Text(changeInPrice)]
       )
     ];
 
     return new Material(
-      style: _style,
+      styles: [_style],
       children: children
     );
   }

examples/stocks-fn/stocksapp.dart

@@ -64,6 +64,7 @@ class StocksApp extends App {
   Node build() {
     var drawer = new Drawer(
       animation: _drawerAnimation,
+      level: 3,
       children: [
         new DrawerHeader(
           children: [new Text('Stocks')]
@@ -103,19 +104,19 @@ class StocksApp extends App {
 
     var toolbar = new Toolbar(
       children: [
-        new Icon(key: 'menu', style: _iconStyle,
+        new Icon(key: 'menu', styles: [_iconStyle],
             size: 24,
             type: 'navigation/menu_white')
           ..events.listen('click', _drawerAnimation.toggle),
         new Container(
-          style: _titleStyle,
+          styles: [_titleStyle],
           children: [title]
         ),
-        new Icon(key: 'search', style: _iconStyle,
+        new Icon(key: 'search', styles: [_iconStyle],
             size: 24,
             type: 'action/search_white')
           ..events.listen('click', _handleSearchClick),
-        new Icon(key: 'more_white', style: _iconStyle,
+        new Icon(key: 'more_white', styles: [_iconStyle],
             size: 24,
             type: 'navigation/more_vert_white')
       ]
@@ -124,14 +125,14 @@ class StocksApp extends App {
     var list = new Stocklist(stocks: _sortedStocks, query: _searchQuery);
 
     var fab = new FloatingActionButton(content: new Icon(
-      type: 'content/add_white', size: 24));
+      type: 'content/add_white', size: 24), level: 3);
 
     return new Container(
       key: 'StocksApp',
       children: [
         new Container(
           key: 'Content',
-          style: _style,
+          styles: [_style],
           children: [toolbar, list]
         ),
         fab,

examples/widgets-fn/main.sky

+#!mojo mojo:sky_viewer
+<!--
+// 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.
+-->
+<sky>
+<import src="/sky/framework/debug/shake-to-reload.sky" />
+<script>
+import 'widgets_app.dart';
+main() {
+  new WidgetsApp();
+}
+</script>
+</sky>

examples/widgets-fn/widgets_app.dart

+// 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 '../../framework/fn.dart';
+import '../../framework/components/button.dart';
+
+class WidgetsApp extends App {
+  Node build() {
+    return new Button(content: new Text('Go'), level: 1);
+  }
+}