[Effen] Move 'flex' out of CSS also.

This introduces a new kind of ContentNode similar to Style but which
instead of changing the styles that apply to the node, provides new
settings to apply to the "parentData" structure.

If you have better ideas for the class names here let me know.

Note that the layout.dart backend of this is hacky (more so than
before, even); once we have something other than the DOM and CSS to
back it, it'll get rewritten.

R=eseidel@chromium.org

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

framework/components/action_bar.dart

@@ -16,8 +16,9 @@ class ActionBar extends Component {
     padding-top: ${kStatusBarHeight}px;''');
 
   static Style _centerStyle = new Style('''
-    padding-left: 24px;
-    flex: 1;''');
+    padding-left: 24px;''');
+
+  static FlexBoxParentData _centerLayoutSettings = new FlexBoxParentData()..flex = 1;
 
   UINode left;
   UINode center;
@@ -31,7 +32,7 @@ class ActionBar extends Component {
   }) : super(key: key);
 
   UINode build() {
-    List<UINode> children = [left, new StyleNode(center, _centerStyle)];
+    List<UINode> children = [left, new StyleNode(new ParentDataNode(center, _centerLayoutSettings), _centerStyle)];
 
     if (right != null)
       children.addAll(right);

framework/fn.dart

@@ -148,6 +148,12 @@ class StyleNode extends ContentNode {
   StyleNode(UINode content, this.style): super(content);
 }
 
+class ParentDataNode extends ContentNode {
+  final ParentData parentData;
+
+  ParentDataNode(UINode content, this.parentData): super(content);
+}
+
 /*
  * SkyNodeWrappers correspond to a desired state of a RenderCSS. They are fully
  * immutable, with one exception: A UINode which is a Component which lives within
@@ -389,14 +395,28 @@ abstract class SkyElementWrapper extends SkyNodeWrapper {
     List<Style> styles = new List<Style>();
     if (style != null)
       styles.add(style);
+    ParentData parentData = null;
     UINode parent = _parent;
     while (parent != null && parent is! SkyNodeWrapper) {
       if (parent is StyleNode && parent.style != null)
         styles.add(parent.style);
+      else
+      if (parent is ParentDataNode && parent.parentData != null) {
+        if (parentData != null)
+          parentData.merge(parent.parentData); // this will throw if the types aren't the same
+        else
+          parentData = parent.parentData;
+      }
       parent = parent._parent;
     }
     _root.updateStyles(styles);
-
+    if (parentData != null) {
+      assert(_root.parentData != null);
+      _root.parentData.merge(parentData); // this will throw if the types aren't approriate
+      assert(parent != null);
+      assert(parent._root != null);
+      parent._root.markNeedsLayout();
+    }
     _root.updateInlineStyle(inlineStyle);
 
     _syncChildren(oldSkyElementWrapper);

framework/layout.dart

@@ -53,6 +53,10 @@ class ParentData {
     detachSiblings();
   }
   void detachSiblings() { } // workaround for lack of inter-class mixins in Dart
+  void merge(ParentData other) {
+    // override this in subclasses to merge in data from other into this
+    assert(other.runtimeType == this.runtimeType);
+  }
 }
 
 abstract class RenderNode extends Node {
@@ -261,8 +265,16 @@ abstract class RenderCSS extends RenderBox {
     return styles.map((s) => s._className).join(' ');
   }
 
+  String _inlineStyles = '';
+  String _additionalStylesFromParent = ''; // used internally to propagate parentData settings to the child
+
   void updateInlineStyle(String newStyle) {
-    _skyElement.setAttribute('style', newStyle);
+    _inlineStyles = newStyle;
+    _updateInlineStyleAttribute();
+  }
+
+  void _updateInlineStyleAttribute() {
+    _skyElement.setAttribute('style', "$_inlineStyles;$_additionalStylesFromParent");
   }
 
   double get width {
@@ -320,7 +332,14 @@ class RenderCSSContainer extends RenderCSS with ContainerRenderNodeMixin<RenderC
 
 }
 
-class FlexBoxParentData extends CSSParentData { }
+class FlexBoxParentData extends CSSParentData {
+  int flex;
+  void merge(FlexBoxParentData other) {
+    if (other.flex != null)
+      flex = other.flex;
+    super.merge(other);
+  }
+}
 
 enum FlexDirection { Row }
 
@@ -351,6 +370,21 @@ class RenderCSSFlex extends RenderCSSContainer {
     return super.stylesToClasses(styles) + ' ' + settings;
   }
 
+  void markNeedsLayout() {
+    super.markNeedsLayout();
+
+    // pretend we did the layout:
+    RenderCSS child = _firstChild;
+    while (child != null) {
+      assert(child.parentData is FlexBoxParentData);
+      if (child.parentData.flex != null) {
+        child._additionalStylesFromParent = 'flex:${child.parentData.flex};';
+        child._updateInlineStyleAttribute();
+      }
+      child = child.parentData.nextSibling;
+    }
+  }
+
 }
 
 class RenderCSSText extends RenderCSS {