Allow Effen Styles to be extendable

R=abarth@chromium.org

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

examples/stocks-fn/stockarrow.dart

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

examples/stocks-fn/stockrow.dart

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

examples/stocks-fn/stocksapp.dart

@@ -105,19 +105,19 @@ class StocksApp extends App {
 
     var toolbar = new Toolbar(
       children: [
-        new Icon(key: 'menu', styles: [_iconStyle],
+        new Icon(key: 'menu', style: _iconStyle,
             size: 24,
             type: 'navigation/menu_white')
           ..events.listen('click', _drawerAnimation.toggle),
         new Container(
-          styles: [_titleStyle],
+          style: _titleStyle,
           children: [title]
         ),
-        new Icon(key: 'search', styles: [_iconStyle],
+        new Icon(key: 'search', style: _iconStyle,
             size: 24,
             type: 'action/search_white')
           ..events.listen('click', _handleSearchClick),
-        new Icon(key: 'more_white', styles: [_iconStyle],
+        new Icon(key: 'more_white', style: _iconStyle,
             size: 24,
             type: 'navigation/more_vert_white')
       ]
@@ -133,7 +133,7 @@ class StocksApp extends App {
       children: [
         new Container(
           key: 'Content',
-          styles: [_style],
+          style: _style,
           children: [toolbar, list]
         ),
         fab,

framework/components/button.dart

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

framework/components/checkbox.dart

@@ -68,13 +68,13 @@ class Checkbox extends ButtonBase {
 
   Node build() {
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
-          styles: [highlight ? _containerHighlightStyle : _containerStyle],
+          style: highlight ? _containerHighlightStyle : _containerStyle,
           children: [
             new Container(
-              styles: [checked ? _checkedStyle : _uncheckedStyle]
+              style: checked ? _checkedStyle : _uncheckedStyle
             )
           ]
         )

framework/components/drawer.dart

@@ -150,21 +150,21 @@ class Drawer extends Component {
 
     Container mask = new Container(
       key: 'Mask',
-      styles: [_maskStyle],
+      style: _maskStyle,
       inlineStyle: maskInlineStyle
     )..events.listen('gesturetap', animation.handleMaskTap)
      ..events.listen('gestureflingstart', animation.handleFlingStart);
 
     Material content = new Material(
       key: 'Content',
-      styles: [_contentStyle],
+      style: _contentStyle,
       inlineStyle: contentInlineStyle,
       children: children,
       level: level
     );
 
     return new Container(
-      styles: [_style],
+      style: _style,
       inlineStyle: inlineStyle,
       children: [ mask, content ]
     );

framework/components/drawer_header.dart

@@ -33,15 +33,15 @@ class DrawerHeader extends Component {
 
   Node build() {
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
           key: 'Spacer',
-          styles: [_spacerStyle]
+          style: _spacerStyle
         ),
         new Container(
           key: 'Label',
-          styles: [_labelStyle],
+          style: _labelStyle,
           children: children
         )
       ]

framework/components/fixed_height_scrollable.dart

@@ -74,10 +74,10 @@ abstract class FixedHeightScrollable extends Scrollable {
     }
 
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
-          styles: [_scrollAreaStyle],
+          style: _scrollAreaStyle,
           inlineStyle: transformStyle,
           children: buildItems(itemNumber, drawCount)
         )

framework/components/floating_action_button.dart

@@ -43,17 +43,13 @@ class FloatingActionButton extends Component {
     if (content != null)
       children.add(content);
 
-    List<Style> containerStyle = [_style];
-    if (level > 0)
-      containerStyle.add(Material.shadowStyle[level]);
-
     return new Container(
       key: "Container",
-      styles: containerStyle,
+      style: level > 0 ? _style.extend(Material.shadowStyle[level]) : _style,
       children: [
         new Material(
           key: "Clip",
-          styles: [_clipStyle],
+          style: _clipStyle,
           children: children
         )
       ]

framework/components/icon.dart

@@ -7,13 +7,13 @@ import '../fn.dart';
 const String kAssetBase = '/sky/assets/material-design-icons';
 
 class Icon extends Component {
-  List<Style> styles;
+  Style style;
   int size;
   String type;
 
   Icon({
     String key,
-    this.styles,
+    this.style,
     this.size,
     this.type: ''
   }) : super(key: key);
@@ -28,7 +28,7 @@ class Icon extends Component {
     }
 
     return new Image(
-      styles: styles,
+      style: style,
       width: size,
       height: size,
       src: '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png'

framework/components/ink_splash.dart

@@ -94,11 +94,11 @@ class InkSplash extends Component {
     _ensureListening();
 
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
           inlineStyle: _inlineStyle,
-          styles: [_splashStyle]
+          style: _splashStyle
         )
       ]
     );

framework/components/input.dart

@@ -75,7 +75,7 @@ class Input extends Component {
 
     if (placeholder != null && _value.isEmpty) {
       children.add(new Container(
-          styles: [_placeholderStyle],
+          style: _placeholderStyle,
           children: [new Text(placeholder)]
       ));
     }
@@ -83,7 +83,7 @@ class Input extends Component {
     children.add(new EditableText(value: _editableValue, focused: focused));
 
     return new Container(
-      styles: [_style],
+      style: _style,
       inlineStyle: focused ? _focusedInlineStyle : null,
       children: children
     );

framework/components/material.dart

@@ -29,14 +29,14 @@ class Material extends Component {
 
   LinkedHashSet<SplashAnimation> _splashes;
 
-  List<Style> styles;
+  Style style;
   String inlineStyle;
   List<Node> children;
   int level;
 
   Material({
       Object key,
-      this.styles,
+      this.style,
       this.inlineStyle,
       this.children,
       this.level: 0 }) : super(key: key) {
@@ -50,7 +50,7 @@ class Material extends Component {
 
     if (_splashes != null) {
       childrenIncludingSplashes.add(new Container(
-        styles: [_splashesStyle],
+        style: _splashesStyle,
         children: new List.from(_splashes.map(
             (s) => new InkSplash(s.onStyleChanged))),
         key: 'Splashes'
@@ -60,14 +60,12 @@ class Material extends Component {
     if (children != null)
       childrenIncludingSplashes.addAll(children);
 
-    List<Style> stylesIncludingShadow = styles;
-    if (level > 0) {
-      stylesIncludingShadow = new List.from(styles);
-      stylesIncludingShadow.add(shadowStyle[level]);
-    }
-
-    return new Container(key: 'Material', styles: stylesIncludingShadow,
-        inlineStyle: inlineStyle, children: childrenIncludingSplashes);
+    return new Container(
+        key: 'Material',
+        style: level > 0 ? style.extend(shadowStyle[level]) : style,
+        inlineStyle: inlineStyle,
+        children: childrenIncludingSplashes
+    );
   }
 
   sky.ClientRect _getBoundingRect() => (getRoot() as sky.Element).getBoundingClientRect();

framework/components/menu_divider.dart

@@ -14,7 +14,7 @@ class MenuDivider extends Component {
 
   Node build() {
     return new Container(
-      styles: [_style]
+      style: _style
     );
   }
 }

framework/components/menu_item.dart

@@ -43,15 +43,15 @@ class MenuItem extends ButtonBase {
 
   Node build() {
     return new Material (
-      styles: [highlight ? _highlightStyle : _style],
+      style: highlight ? _highlightStyle : _style,
       children: [
         new Icon(
-          styles: [_iconStyle],
+          style: _iconStyle,
           size: 24,
           type: "${icon}_grey600"
         ),
         new Container(
-          styles: [_labelStyle],
+          style: _labelStyle,
           children: children
         )
       ]

framework/components/radio.dart

@@ -56,8 +56,8 @@ class Radio extends ButtonBase {
 
   Node build() {
     return new Material(
-      styles: [highlight ? _highlightStyle : _style],
-      children: value == groupValue ? [new Container(styles: [_dotStyle] )] : []
+      style: highlight ? _highlightStyle : _style,
+      children: value == groupValue ? [new Container(style: _dotStyle )] : []
     );
   }
 

framework/components/toolbar.dart

@@ -23,7 +23,7 @@ class Toolbar extends Component {
 
   Node build() {
     return new Container(
-      styles: [_style],
+      style: _style,
       children: children
     );
   }

framework/editing/editable_text.dart

@@ -75,8 +75,8 @@ class EditableText extends Component {
       String composing = value.textInside(value.composing);
       if (!composing.isEmpty) {
         children.add(new Container(
-          key: 'composing', 
-          styles: [_composingStyle],
+          key: 'composing',
+          style: _composingStyle,
           children: [new Text(composing)]
         ));
       }
@@ -87,10 +87,10 @@ class EditableText extends Component {
     }
 
     if (_showCursor)
-      children.add(new Container(key: 'cursor', styles: [_cusorStyle]));
+      children.add(new Container(key: 'cursor', style: _cusorStyle));
 
     return new Container(
-      styles: [_style],
+      style: _style,
       children: children
     );
   }

framework/fn.dart

@@ -46,23 +46,25 @@ class Style {
   final String _className;
   static final Map<String, Style> _cache = new HashMap<String, Style>();
 
-  static int nextStyleId = 1;
+  static int _nextStyleId = 1;
 
-  static String nextClassName(String styles) {
-    assert(sky.document != null);
-    String className = "style$nextStyleId";
-    nextStyleId++;
+  static String _getNextClassName() { return "style${_nextStyleId++}"; }
 
-    sky.Element styleNode = sky.document.createElement('style');
-    styleNode.setChild(new sky.Text(".$className { $styles }"));
-    sky.document.appendChild(styleNode);
+  Style extend(Style other) {
+    var className = "$_className ${other._className}";
 
-    return className;
+    return _cache.putIfAbsent(className, () {
+      return new Style._internal(className);
+    });
   }
 
   factory Style(String styles) {
     return _cache.putIfAbsent(styles, () {
-      return new Style._internal(nextClassName(styles));
+      var className = _getNextClassName();
+      sky.Element styleNode = sky.document.createElement('style');
+      styleNode.setChild(new sky.Text(".$className { $styles }"));
+      sky.document.appendChild(styleNode);
+      return new Style._internal(className);
     });
   }
 
@@ -140,11 +142,11 @@ abstract class Element extends Node {
   Element({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
 
     this.inlineStyle
   }) : super(key:key) {
-    _class = styles == null ? '' : styles.map((s) => s._className).join(' ');
+    _class = style == null ? '' : style._className;
     _children = children == null ? _emptyList : children;
 
     if (_isInCheckedMode) {
@@ -412,12 +414,12 @@ class Container extends Element {
   Container({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
     String inlineStyle
   }) : super(
     key: key,
     children: children,
-    styles: styles,
+    style: style,
     inlineStyle: inlineStyle
   );
 }
@@ -436,7 +438,7 @@ class Image extends Element {
   Image({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
     String inlineStyle,
     this.width,
     this.height,
@@ -444,7 +446,7 @@ class Image extends Element {
   }) : super(
     key: key,
     children: children,
-    styles: styles,
+    style: style,
     inlineStyle: inlineStyle
   );
 
@@ -480,7 +482,7 @@ class Anchor extends Element {
   Anchor({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
     String inlineStyle,
     this.width,
     this.height,
@@ -488,7 +490,7 @@ class Anchor extends Element {
   }) : super(
     key: key,
     children: children,
-    styles: styles,
+    style: style,
     inlineStyle: inlineStyle
   );