Disentangle Material and InkSplash

Most of the elements that want to be Material (i.e., have a level and cast a
shadow) don't want to be InkWells (i.e., have an ink splash effect). This CL
disentangles these two components, fixing bugs in the Drawer and in the
PopupMenu. Separating these concepts also lets us use Material for the
ActionBar and the FloatingActionButton.

R=rafaelw@chromium.org

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

framework/components/action_bar.dart

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import '../fn.dart';
-import '../theme/shadows.dart';
 import '../theme/view-configuration.dart';
+import 'material.dart';
 
 class ActionBar extends Component {
   static final Style _style = new Style('''
@@ -13,8 +13,7 @@ class ActionBar extends Component {
     height: 56px;
     padding: 0 8px;
     transition: background-color 0.3s;
-    padding-top: ${kStatusBarHeight}px;
-    box-shadow: ${Shadow[2]};''');
+    padding-top: ${kStatusBarHeight}px;''');
 
   static Style _centerStyle = new Style('''
     padding-left: 24px;
@@ -37,6 +36,8 @@ class ActionBar extends Component {
     if (right != null)
       children.addAll(right);
 
-    return new Container(style: _style, children: children);
+    return new Material(
+      content: new Container(style: _style, children: children),
+      level: 2);
   }
 }

framework/components/button.dart

@@ -26,7 +26,9 @@ class Button extends Component {
 
   Node build() {
     return new StyleNode(
-      new Material(children: [content], level: level),
+      new Material(
+        content: new InkWell(children: [content]),
+        level: level),
       _style);
   }
 }

framework/components/drawer.dart

@@ -126,7 +126,6 @@ class Drawer extends AnimatedComponent {
 
     var mask = new EventTarget(
       new Container(
-        key: 'Mask',
         style: _maskStyle,
         inlineStyle: maskInlineStyle
       ),
@@ -134,13 +133,13 @@ class Drawer extends AnimatedComponent {
       onGestureFlingStart: controller.handleFlingStart
     );
 
-    Node content = new StyleNode(
-      new Material(
-        key: 'Content',
+    Material content = new Material(
+      content: new Container(
+        style: _contentStyle,
         inlineStyle: contentInlineStyle,
-        children: children,
-        level: level),
-      _contentStyle);
+        children: children
+      ),
+      level: level);
 
     return new EventTarget(
       new Container(

framework/components/floating_action_button.dart

@@ -41,9 +41,10 @@ class FloatingActionButton extends Component {
     if (content != null)
       children.add(content);
 
-    return new Container(
-      style: level > 0 ? _style.extend(Material.shadowStyle[level]) : _style,
-      children: [new StyleNode(new InkWell(children: children), _clipStyle)]
-    );
+    return new Material(
+      content: new Container(
+        style: _style,
+        children: [new StyleNode(new InkWell(children: children), _clipStyle)]),
+      level: level);
   }
 }

framework/components/material.dart

@@ -7,7 +7,7 @@ import '../theme/shadows.dart';
 import 'ink_well.dart';
 
 class Material extends Component {
-  static final List<Style> shadowStyle = [
+  static final List<Style> _shadowStyle = [
     null,
     new Style('box-shadow: ${Shadow[1]}'),
     new Style('box-shadow: ${Shadow[2]}'),
@@ -16,20 +16,12 @@ class Material extends Component {
     new Style('box-shadow: ${Shadow[5]}'),
   ];
 
-  String inlineStyle;
-  List<Node> children;
+  Node content;
   int level;
 
-  Material({
-    Object key,
-    this.inlineStyle,
-    this.children,
-    this.level: 0
-  }) : super(key: key);
+  Material({ Object key, this.content, this.level: 0 }) : super(key: key);
 
   Node build() {
-    return new StyleNode(
-      new InkWell(inlineStyle: inlineStyle, children: children),
-      shadowStyle[level]);
+    return new StyleNode(content, _shadowStyle[level]);
   }
 }

framework/components/popup_menu.dart

@@ -14,7 +14,8 @@ import 'material.dart';
 import 'popup_menu_item.dart';
 
 const double _kMenuOpenDuration = 300.0;
-const double _kMenuCloneDuration = 200.0;
+const double _kMenuCloseDuration = 200.0;
+const double _kMenuCloseDelay = 100.0;
 
 class PopupMenuController {
   bool isOpen = false;
@@ -26,7 +27,8 @@ class PopupMenuController {
   }
 
   Future close() {
-    return position.animateTo(0.0, _kMenuCloneDuration).then((_) {
+    return position.animateTo(0.0, _kMenuCloseDuration,
+        initialDelay: _kMenuCloseDelay).then((_) {
       isOpen = false;
     });
   }
@@ -87,11 +89,12 @@ class PopupMenu extends AnimatedComponent {
       return new PopupMenuItem(key: i++, children: item, opacity: opacity);
     }));
 
-    return new StyleNode(
-      new Material(
+    return new Material(
+      content: new Container(
+        style: _style,
         inlineStyle: _inlineStyle(),
-        children: children,
-        level: level),
-      _style);
+        children: children
+      ),
+      level: level);
   }
 }