[Effen] s/Node/UINode/, s/Element/WrapperNode/, s/EventTarget/EventListenerNode/

R=eseidel@chromium.org

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

examples/hello_world/hello_world.dart

@@ -5,7 +5,7 @@
 import 'package:sky/framework/fn.dart';
 
 class HelloWorldApp extends App {
-  Node build() {
+  UINode build() {
     return new Text('Hello, world!');
   }
 }

examples/stocks/lib/stock_app.dart

@@ -112,7 +112,7 @@ class StocksApp extends App {
     );
   }
 
-  Node buildActionBar() {
+  UINode buildActionBar() {
     return new StyleNode(
       new ActionBar(
         left: new IconButton(
@@ -133,7 +133,7 @@ class StocksApp extends App {
   }
 
   // TODO(abarth): Should we factor this into a SearchBar in the framework?
-  Node buildSearchBar() {
+  UINode buildSearchBar() {
     return new StyleNode(
       new ActionBar(
         left: new IconButton(
@@ -146,7 +146,7 @@ class StocksApp extends App {
       _searchBarStyle);
   }
 
-  void addMenuToOverlays(List<Node> overlays) {
+  void addMenuToOverlays(List<UINode> overlays) {
     if (_menuController == null)
       return;
     overlays.add(new ModalOverlay(
@@ -154,8 +154,8 @@ class StocksApp extends App {
       onDismiss: _handleMenuHide));
   }
 
-  Node build() {
-    List<Node> overlays = [];
+  UINode build() {
+    List<UINode> overlays = [];
     addMenuToOverlays(overlays);
 
     return new Scaffold(

examples/stocks/lib/stock_arrow.dart

@@ -73,7 +73,7 @@ class StockArrow extends Component {
     return _kRedColors[_colorIndexForPercentChange(percentChange)];
   }
 
-  Node build() {
+  UINode build() {
     String border = _colorForPercentChange(percentChange).toString();
     bool up = percentChange > 0;
     String type = up ? 'bottom' : 'top';

examples/stocks/lib/stock_list.dart

@@ -18,7 +18,7 @@ class Stocklist extends FixedHeightScrollable {
     this.query
   }) : super(key: key, scrollBehavior: new OverscrollBehavior());
 
-  List<Node> buildItems(int start, int count) {
+  List<UINode> buildItems(int start, int count) {
     return stocks
       .skip(start)
       .where((stock) => query == null || stock.symbol.contains(

examples/stocks/lib/stock_menu.dart

@@ -16,7 +16,7 @@ class StockMenu extends Component {
 
   StockMenu({Object key, this.controller}) : super(key: key);
 
-  Node build() {
+  UINode build() {
     return new StyleNode(
       new PopupMenu(
         controller: controller,

examples/stocks/lib/stock_row.dart

@@ -39,14 +39,14 @@ class StockRow extends Component {
     this.stock = stock;
   }
 
-  Node build() {
+  UINode build() {
     String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
 
     String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
     if (stock.percentChange > 0)
       changeInPrice = "+" + changeInPrice;
 
-    List<Node> children = [
+    List<UINode> children = [
       new StockArrow(
         percentChange: stock.percentChange
       ),

examples/widgets/widgets_app.dart

@@ -13,7 +13,7 @@ class WidgetsApp extends App {
     top: 200px;
     left: 200px;''');
 
-  Node build() {
+  UINode build() {
     return new Container(
       children: [
         new Button(key: 'Go', content: new Text('Go'), level: 1),

framework/README.md

@@ -33,14 +33,14 @@ main() {
 import 'package:sky/framework/fn.dart';
 
 class HelloWorldApp extends App {
-  Node build() {
+  UINode build() {
     return new Text('Hello, world!');
   }
 }
 ```
 
 An app is comprised of (and is, itself, a) components. A component's main job is
-to implement `Node build()`. The idea here is that the `build` method describes
+to implement `UINode build()`. The idea here is that the `build` method describes
 the DOM of a component at any given point during its lifetime. In this case, our
 `HelloWorldApp`'s `build` method just returns a `Text` node which displays the
 obligatory line of text.
@@ -48,7 +48,7 @@ obligatory line of text.
 Nodes
 -----
 
-A component's `build` method must return a single `Node` which *may* have
+A component's `build` method must return a single `UINode` which *may* have
 children (and so on, forming a *subtree*). Effen comes with a few built-in nodes
 which mirror the built-in nodes/elements of sky: `Text`, `Anchor` (`<a />`,
 `Image` (`<img />`) and `Container` (`<div />`). `build` can return a tree of
@@ -146,7 +146,7 @@ Event Handling
 --------------
 
 Events logically fire through the Effen node tree. If want to handle an event as
-it bubbles from the target to the root, create an `EventTarget`. `EventTarget`
+it bubbles from the target to the root, create an `EventListenerNode`. `EventListenerNode`
 has named (typed) parameters for a small set of events that we've hit so far, as
 well as a 'custom' argument which is a `Map<String, sky.EventListener>`. If
 you'd like to add a type argument for an event, just post a patch.
@@ -165,8 +165,8 @@ class MyComp extends Component {
     // do other stuff
   }
 
-  Node build() {
-    new EventTarget(
+  UINode build() {
+    new EventListenerNode(
       new Container(
         children: // ...
       ),
@@ -189,9 +189,9 @@ Styling
 -------
 
 Styling is the part of Effen which is least designed and is likely to change.
-There are two ways to specify styles:
+There are three ways to specify styles:
 
-  * `Style` objects which are interned and can be applied to Elements via the
+  * `Style` objects which are interned and can be applied to WrapperNodes via the
     ``style` constructor parameter. Use `Style` objects for styles which are
     `*not* animated.
 
@@ -199,7 +199,7 @@ There are two ways to specify styles:
     `inlineStyle` constructor parameter.  Use `inlineStyle` for styles which
     *are* animated.
   
-If you need to apply a Style to a Component or Node which you didn't construct
+If you need to apply a Style to a Component or UINode which you didn't construct
 (i.e. one that was handed into your constructor), you can wrap it in a
 `StyleNode` which also takes a `Style` constructor in it's `style` constructor
 parameter.

framework/components/action_bar.dart

@@ -19,9 +19,9 @@ class ActionBar extends Component {
     padding-left: 24px;
     flex: 1;''');
 
-  Node left;
-  Node center;
-  List<Node> right;
+  UINode left;
+  UINode center;
+  List<UINode> right;
 
   ActionBar({
     String key,
@@ -30,8 +30,8 @@ class ActionBar extends Component {
     this.right
   }) : super(key: key);
 
-  Node build() {
-    List<Node> children = [left, new StyleNode(center, _centerStyle)];
+  UINode build() {
+    List<UINode> children = [left, new StyleNode(center, _centerStyle)];
 
     if (right != null)
       children.addAll(right);

framework/components/button.dart

@@ -19,12 +19,12 @@ class Button extends Component {
     border-radius: 2px;'''
   );
 
-  Node content;
+  UINode content;
   int level;
 
   Button({ Object key, this.content, this.level }) : super(key: key);
 
-  Node build() {
+  UINode build() {
     return new StyleNode(
       new Material(
         content: new InkWell(children: [content]),

framework/components/button_base.dart

@@ -9,10 +9,10 @@ abstract class ButtonBase extends Component {
 
   ButtonBase({ Object key }) : super(key: key);
 
-  Node buildContent();
+  UINode buildContent();
 
-  Node build() {
-    return new EventTarget(
+  UINode build() {
+    return new EventListenerNode(
       buildContent(),
       onPointerDown: _handlePointerDown,
       onPointerUp: _handlePointerUp,

framework/components/checkbox.dart

@@ -64,8 +64,8 @@ class Checkbox extends ButtonBase {
     onChanged(!checked);
   }
 
-  Node buildContent() {
-    return new EventTarget(
+  UINode buildContent() {
+    return new EventListenerNode(
       new Container(
         style: _style,
         children: [

framework/components/drawer.dart

@@ -103,7 +103,7 @@ class Drawer extends AnimatedComponent {
     bottom: 0;'''
   );
 
-  List<Node> children;
+  List<UINode> children;
   int level;
   DrawerController controller;
 
@@ -118,13 +118,13 @@ class Drawer extends AnimatedComponent {
     animateField(controller.position, #_position);
   }
 
-  Node build() {
+  UINode build() {
     bool isClosed = _position <= -_kWidth;
     String inlineStyle = 'display: ${isClosed ? 'none' : ''}';
     String maskInlineStyle = 'opacity: ${(_position / _kWidth + 1) * 0.5}';
     String contentInlineStyle = 'transform: translateX(${_position}px)';
 
-    var mask = new EventTarget(
+    var mask = new EventListenerNode(
       new Container(
         style: _maskStyle,
         inlineStyle: maskInlineStyle
@@ -141,7 +141,7 @@ class Drawer extends AnimatedComponent {
       ),
       level: level);
 
-    return new EventTarget(
+    return new EventListenerNode(
       new Container(
         style: _style,
         inlineStyle: inlineStyle,

framework/components/drawer_header.dart

@@ -26,11 +26,11 @@ class DrawerHeader extends Component {
     padding: 0 16px;'''
   );
 
-  List<Node> children;
+  List<UINode> children;
 
   DrawerHeader({ Object key, this.children }) : super(key: key);
 
-  Node build() {
+  UINode build() {
     return new Container(
       style: _style,
       children: [

framework/components/fixed_height_scrollable.dart

@@ -52,7 +52,7 @@ abstract class FixedHeightScrollable extends Scrollable {
     });
   }
 
-  Node buildContent() {
+  UINode buildContent() {
     var itemNumber = 0;
     var drawCount = 1;
     var transformStyle = '';

framework/components/floating_action_button.dart

@@ -29,14 +29,14 @@ class FloatingActionButton extends Component {
     bottom: 0;
     -webkit-clip-path: circle(28px at center);''');
 
-  Node content;
+  UINode content;
   int level;
 
   FloatingActionButton({ Object key, this.content, this.level: 0 })
       : super(key: key);
 
-  Node build() {
-    List<Node> children = [];
+  UINode build() {
+    List<UINode> children = [];
 
     if (content != null)
       children.add(content);

framework/components/icon.dart

@@ -17,7 +17,7 @@ class Icon extends Component {
     this.type: ''
   }) : super(key: key);
 
-  Node build() {
+  UINode build() {
     String category = '';
     String subtype = '';
     List<String> parts = type.split('/');

framework/components/icon_button.dart

@@ -15,8 +15,8 @@ class IconButton extends Component {
   IconButton({ String icon: '', this.onGestureTap })
     : super(key: icon), icon = icon;
 
-  Node build() {
-    return new EventTarget(
+  UINode build() {
+    return new EventListenerNode(
       new StyleNode(new Icon(type: icon, size: 24), _style),
       onGestureTap: onGestureTap);
   }

framework/components/ink_splash.dart

@@ -107,7 +107,7 @@ class InkSplash extends Component {
     });
   }
 
-  Node build() {
+  UINode build() {
     _ensureListening();
 
     return new Container(

framework/components/ink_well.dart

@@ -14,7 +14,7 @@ class InkWell extends Component {
   LinkedHashSet<SplashController> _splashes;
 
   String inlineStyle;
-  List<Node> children;
+  List<UINode> children;
 
   InkWell({ Object key, this.inlineStyle, this.children })
       : super(key: key) {
@@ -23,8 +23,8 @@ class InkWell extends Component {
     });
   }
 
-  Node build() {
-    List<Node> childrenIncludingSplashes = [];
+  UINode build() {
+    List<UINode> childrenIncludingSplashes = [];
 
     if (_splashes != null) {
       childrenIncludingSplashes.addAll(
@@ -34,7 +34,7 @@ class InkWell extends Component {
     if (children != null)
       childrenIncludingSplashes.addAll(children);
 
-    return new EventTarget(
+    return new EventListenerNode(
       new Container(
         style: _containmentStyleHack,
         inlineStyle: inlineStyle,

framework/components/input.dart

@@ -65,13 +65,13 @@ class Input extends Component {
     }
   }
 
-  Node build() {
+  UINode build() {
     if (focused && !_isAttachedToKeyboard) {
       keyboard.show(_editableValue.stub);
       _isAttachedToKeyboard = true;
     }
 
-    List<Node> children = [];
+    List<UINode> children = [];
 
     if (placeholder != null && _value.isEmpty) {
       children.add(new Container(

framework/components/material.dart

@@ -16,12 +16,12 @@ class Material extends Component {
     new Style('box-shadow: ${Shadow[5]}'),
   ];
 
-  Node content;
+  UINode content;
   int level;
 
   Material({ Object key, this.content, this.level: 0 }) : super(key: key);
 
-  Node build() {
+  UINode build() {
     return new StyleNode(content, _shadowStyle[level]);
   }
 }

framework/components/menu_divider.dart

@@ -12,7 +12,7 @@ class MenuDivider extends Component {
 
   MenuDivider({ Object key }) : super(key: key);
 
-  Node build() {
+  UINode build() {
     return new Container(
       style: _style
     );

framework/components/menu_item.dart

@@ -34,12 +34,12 @@ class MenuItem extends ButtonBase {
     flex: 1;'''
   );
 
-  List<Node> children;
+  List<UINode> children;
   String icon;
 
   MenuItem({ Object key, this.icon, this.children }) : super(key: key);
 
-  Node buildContent() {
+  UINode buildContent() {
     return new StyleNode(
       new InkWell(
         children: [

framework/components/modal_overlay.dart

@@ -12,13 +12,13 @@ class ModalOverlay extends Component {
     bottom: 0;
     right: 0;''');
 
-  List<Node> children;
+  List<UINode> children;
   GestureEventListener onDismiss;
 
   ModalOverlay({ Object key, this.children, this.onDismiss }) : super(key: key);
 
-  Node build() {
-    return new EventTarget(
+  UINode build() {
+    return new EventListenerNode(
       new Container(
         style: _style,
         children: children),

framework/components/popup_menu.dart

@@ -41,7 +41,7 @@ class PopupMenu extends AnimatedComponent {
     box-sizing: border-box;
     background-color: ${Grey[50]};''');
 
-  List<List<Node>> items;
+  List<List<UINode>> items;
   int level;
   PopupMenuController controller;
 
@@ -82,9 +82,9 @@ class PopupMenu extends AnimatedComponent {
     });
   }
 
-  Node build() {
+  UINode build() {
     int i = 0;
-    List<Node> children = new List.from(items.map((List<Node> item) {
+    List<UINode> children = new List.from(items.map((List<UINode> item) {
       double opacity = _opacityFor(i);
       return new PopupMenuItem(key: i++, children: item, opacity: opacity);
     }));

framework/components/popup_menu_item.dart

@@ -12,12 +12,12 @@ class PopupMenuItem extends Component {
     min-width: 112px;
     padding: 16px;''');
 
-  List<Node> children;
+  List<UINode> children;
   double opacity;
 
   PopupMenuItem({ Object key, this.children, this.opacity}) : super(key: key);
 
-  Node build() {
+  UINode build() {
     return new StyleNode(
       new InkWell(
         inlineStyle: opacity == null ? null : 'opacity: ${opacity}',

framework/components/radio.dart

@@ -53,8 +53,8 @@ class Radio extends ButtonBase {
     this.groupValue
   }) : super(key: key);
 
-  Node buildContent() {
-    return new EventTarget(
+  UINode buildContent() {
+    return new EventListenerNode(
       new StyleNode(
         new InkWell(
           children: value == groupValue ? [new Container(style: _dotStyle)] : []

framework/components/scaffold.dart

@@ -33,11 +33,11 @@ class Scaffold extends Component {
     bottom: 0;
     right: 0;''');
 
-  Node header;
-  Node content;
+  UINode header;
+  UINode content;
   FloatingActionButton fab;
   Drawer drawer;
-  List<Node> overlays;
+  List<UINode> overlays;
 
   Scaffold({
     Object key,
@@ -48,8 +48,8 @@ class Scaffold extends Component {
     this.overlays
   }) : super(key: key);
 
-  Node build() {
-    List<Node> children = [
+  UINode build() {
+    List<UINode> children = [
       new Container(
         key: 'Main',
         style: _mainStyle,

framework/components/scrollable.dart

@@ -28,10 +28,10 @@ abstract class Scrollable extends Component {
     onDidUnmount(_stopSimulation);
   }
 
-  Node buildContent();
+  UINode buildContent();
 
-  Node build() {
-    return new EventTarget(
+  UINode build() {
+    return new EventListenerNode(
       buildContent(),
       onPointerDown: _handlePointerDown,
       onPointerUp: _handlePointerUpOrCancel,

framework/editing/editable_text.dart

@@ -56,13 +56,13 @@ class EditableText extends Component {
     _showCursor = false;
   }
 
-  Node build() {
+  UINode build() {
     if (focused && _cursorTimer == null)
       _startCursorTimer();
     else if (!focused && _cursorTimer != null)
       _stopCursorTimer();
 
-    List<Node> children = new List<Node>();
+    List<UINode> children = new List<UINode>();
 
     if (!value.composing.isValid) {
       children.add(new Text(value.text));

framework/fn.dart

@@ -67,25 +67,25 @@ void _parentInsertBefore(sky.ParentNode parent,
 enum _SyncOperation { IDENTICAL, INSERTION, STATEFUL, STATELESS, REMOVAL }
 
 /*
- * All Effen nodes derive from Node. All nodes have a _parent, a _key and
+ * All Effen nodes derive from UINode. All nodes have a _parent, a _key and
  * can be sync'd.
  */
-abstract class Node {
+abstract class UINode {
   String _key;
-  Node _parent;
+  UINode _parent;
   sky.Node _root;
   bool _defunct = false;
   int _nodeDepth;
 
-  Node({ Object key }) {
+  UINode({ Object key }) {
     _key = key == null ? "$runtimeType" : "$runtimeType-$key";
   }
 
   // Subclasses which implements Nodes that become stateful may return true
   // if the |old| node has become stateful and should be retained.
-  bool _willSync(Node old) => false;
+  bool _willSync(UINode old) => false;
 
-  void _sync(Node old, sky.ParentNode host, sky.Node insertBefore);
+  void _sync(UINode old, sky.ParentNode host, sky.Node insertBefore);
 
   void _remove() {
     _defunct = true;
@@ -95,7 +95,7 @@ abstract class Node {
   void _ensureDepth() {
     if (_nodeDepth == null) {
       _nodeDepth = 0;
-      Node parent = _parent;
+      UINode parent = _parent;
       while (parent != null) {
         _nodeDepth++;
         parent = parent._parent;
@@ -126,13 +126,13 @@ abstract class Node {
     _trace('_sync($outString) $key');
   }
 
-  void _removeChild(Node node) {
+  void _removeChild(UINode node) {
     _traceSync(_SyncOperation.REMOVAL, node._key);
     node._remove();
   }
 
   // Returns the child which should be retained as the child of this node.
-  Node _syncChild(Node node, Node oldNode, sky.ParentNode host,
+  UINode _syncChild(UINode node, UINode oldNode, sky.ParentNode host,
       sky.Node insertBefore) {
 
     assert(oldNode == null || node._key == oldNode._key);
@@ -173,13 +173,13 @@ abstract class Node {
   }
 }
 
-abstract class ContentNode extends Node {
-  Node content;
+abstract class ContentNode extends UINode {
+  UINode content;
 
-  ContentNode(Node content) : this.content = content, super(key: content._key);
+  ContentNode(UINode content) : this.content = content, super(key: content._key);
 
-  void _sync(Node old, sky.ParentNode host, sky.Node insertBefore) {
-    Node oldContent = old == null ? null : (old as ContentNode).content;
+  void _sync(UINode old, sky.ParentNode host, sky.Node insertBefore) {
+    UINode oldContent = old == null ? null : (old as ContentNode).content;
     content = _syncChild(content, oldContent, host, insertBefore);
     _root = content._root;
   }
@@ -193,16 +193,16 @@ abstract class ContentNode extends Node {
 class StyleNode extends ContentNode {
   final Style style;
 
-  StyleNode(Node content, this.style): super(content);
+  StyleNode(UINode content, this.style): super(content);
 }
 
 /*
  * RenderNodes correspond to a desired state of a sky.Node. They are fully
- * immutable, with one exception: A Node which is a Component which lives within
- * an Element's children list, may be replaced with the "old" instance if it
+ * immutable, with one exception: A UINode which is a Component which lives within
+ * an WrapperNode's children list, may be replaced with the "old" instance if it
  * has become stateful.
  */
-abstract class RenderNode extends Node {
+abstract class RenderNode extends UINode {
 
   static final Map<sky.Node, RenderNode> _nodeMap =
       new HashMap<sky.Node, RenderNode>();
@@ -215,7 +215,7 @@ abstract class RenderNode extends Node {
 
   sky.Node _createNode();
 
-  void _sync(Node old, sky.ParentNode host, sky.Node insertBefore) {
+  void _sync(UINode old, sky.ParentNode host, sky.Node insertBefore) {
     if (old == null) {
       _root = _createNode();
       _parentInsertBefore(host, _root, insertBefore);
@@ -242,7 +242,7 @@ typedef GestureEventListener(sky.GestureEvent e);
 typedef PointerEventListener(sky.PointerEvent e);
 typedef EventListener(sky.Event e);
 
-class EventTarget extends ContentNode  {
+class EventListenerNode extends ContentNode  {
   final Map<String, sky.EventListener> listeners;
 
   static final Set<String> _registeredEvents = new HashSet<String>();
@@ -291,7 +291,7 @@ class EventTarget extends ContentNode  {
     return listeners;
   }
 
-  EventTarget(Node content, {
+  EventListenerNode(UINode content, {
     EventListener onWheel,
     GestureEventListener onGestureFlingCancel,
     GestureEventListener onGestureFlingStart,
@@ -328,12 +328,12 @@ class EventTarget extends ContentNode  {
   }
 
   static void _dispatchEvent(sky.Event e) {
-    Node target = RenderNode._getMounted(e.target);
+    UINode target = RenderNode._getMounted(e.target);
 
     // TODO(rafaelw): StopPropagation?
     while (target != null) {
-      if (target is EventTarget) {
-        (target as EventTarget)._handleEvent(e);
+      if (target is EventListenerNode) {
+        (target as EventListenerNode)._handleEvent(e);
       }
 
       target = target._parent;
@@ -346,7 +346,7 @@ class EventTarget extends ContentNode  {
     }
   }
 
-  void _sync(Node old, sky.ParentNode host, sky.Node insertBefore) {
+  void _sync(UINode old, sky.ParentNode host, sky.Node insertBefore) {
     for (var type in listeners.keys) {
       _ensureDocumentListener(type);
     }
@@ -380,23 +380,23 @@ class Text extends RenderNode {
   }
 }
 
-final List<Node> _emptyList = new List<Node>();
+final List<UINode> _emptyList = new List<UINode>();
 
-abstract class Element extends RenderNode {
+abstract class WrapperNode extends RenderNode {
 
   String get _tagName;
 
   sky.Node _createNode() => sky.document.createElement(_tagName);
 
-  final List<Node> children;
+  final List<UINode> children;
   final Style style;
   final String inlineStyle;
 
   String _class;
 
-  Element({
+  WrapperNode({
     Object key,
-    List<Node> children,
+    List<UINode> children,
     this.style,
     this.inlineStyle
   }) : this.children = children == null ? _emptyList : children,
@@ -437,7 +437,7 @@ abstract class Element extends RenderNode {
         styles.add(style);
       }
 
-      Node parent = _parent;
+      UINode parent = _parent;
       while (parent != null && parent is! RenderNode) {
         if (parent is StyleNode && (parent as StyleNode).style != null)
           styles.add((parent as StyleNode).style);
@@ -450,33 +450,33 @@ abstract class Element extends RenderNode {
   }
 
   void _syncNode(RenderNode old) {
-    Element oldElement = old as Element;
+    WrapperNode oldWrapperNode = old as WrapperNode;
     sky.Element root = _root as sky.Element;
 
     _ensureClass();
-    if (_class != oldElement._class && _class != '')
+    if (_class != oldWrapperNode._class && _class != '')
       root.setAttribute('class', _class);
 
-    if (inlineStyle != oldElement.inlineStyle)
+    if (inlineStyle != oldWrapperNode.inlineStyle)
       root.setAttribute('style', inlineStyle);
 
-    _syncChildren(oldElement);
+    _syncChildren(oldWrapperNode);
   }
 
-  void _syncChildren(Element oldElement) {
+  void _syncChildren(WrapperNode oldWrapperNode) {
     sky.Element root = _root as sky.Element;
     assert(root != null);
 
     var startIndex = 0;
     var endIndex = children.length;
 
-    var oldChildren = oldElement.children;
+    var oldChildren = oldWrapperNode.children;
     var oldStartIndex = 0;
     var oldEndIndex = oldChildren.length;
 
     sky.Node nextSibling = null;
-    Node currentNode = null;
-    Node oldNode = null;
+    UINode currentNode = null;
+    UINode oldNode = null;
 
     void sync(int atIndex) {
       children[atIndex] = _syncChild(currentNode, oldNode, _root, nextSibling);
@@ -498,7 +498,7 @@ abstract class Element extends RenderNode {
       nextSibling = currentNode._root;
     }
 
-    HashMap<String, Node> oldNodeIdMap = null;
+    HashMap<String, UINode> oldNodeIdMap = null;
 
     bool oldNodeReordered(String key) {
       return oldNodeIdMap != null &&
@@ -518,7 +518,7 @@ abstract class Element extends RenderNode {
       if (oldNodeIdMap != null)
         return;
 
-      oldNodeIdMap = new HashMap<String, Node>();
+      oldNodeIdMap = new HashMap<String, UINode>();
       for (int i = oldStartIndex; i < oldEndIndex; i++) {
         var node = oldChildren[i];
         if (node is! Text) {
@@ -580,7 +580,7 @@ abstract class Element extends RenderNode {
   }
 }
 
-class Container extends Element {
+class Container extends WrapperNode {
 
   String get _tagName => 'div';
 
@@ -590,7 +590,7 @@ class Container extends Element {
 
   Container({
     Object key,
-    List<Node> children,
+    List<UINode> children,
     Style style,
     String inlineStyle
   }) : super(
@@ -601,7 +601,7 @@ class Container extends Element {
   );
 }
 
-class Image extends Element {
+class Image extends WrapperNode {
 
   String get _tagName => 'img';
 
@@ -615,7 +615,7 @@ class Image extends Element {
 
   Image({
     Object key,
-    List<Node> children,
+    List<UINode> children,
     Style style,
     String inlineStyle,
     this.width,
@@ -628,7 +628,7 @@ class Image extends Element {
     inlineStyle: inlineStyle
   );
 
-  void _syncNode(Node old) {
+  void _syncNode(UINode old) {
     super._syncNode(old);
 
     Image oldImage = old as Image;
@@ -645,13 +645,13 @@ class Image extends Element {
   }
 }
 
-class Anchor extends Element {
+class Anchor extends WrapperNode {
 
   String get _tagName => 'a';
 
   static final Anchor _emptyAnchor = new Anchor();
 
-  Node get _emptyNode => _emptyAnchor;
+  UINode get _emptyNode => _emptyAnchor;
 
   final String href;
   final int width;
@@ -659,7 +659,7 @@ class Anchor extends Element {
 
   Anchor({
     Object key,
-    List<Node> children,
+    List<UINode> children,
     Style style,
     String inlineStyle,
     this.width,
@@ -672,7 +672,7 @@ class Anchor extends Element {
     inlineStyle: inlineStyle
   );
 
-  void _syncNode(Node old) {
+  void _syncNode(UINode old) {
     super._syncNode(old);
 
     Anchor oldAnchor = old as Anchor;
@@ -756,14 +756,14 @@ void _scheduleComponentForRender(Component c) {
   }
 }
 
-abstract class Component extends Node {
+abstract class Component extends UINode {
   bool get _isBuilding => _currentlyBuilding == this;
   bool _dirty = true;
 
   sky.Node get _host => _root.parentNode;
   sky.Node get _insertionPoint => _root == null ? _root : _root.nextSibling;
 
-  Node _built;
+  UINode _built;
   final int _order;
   static int _currentOrder = 0;
   bool _stateful;
@@ -817,7 +817,7 @@ abstract class Component extends Node {
     super._remove();
   }
 
-  bool _willSync(Node old) {
+  bool _willSync(UINode old) {
     Component oldComponent = old as Component;
     if (oldComponent == null || !oldComponent._stateful)
       return false;
@@ -842,7 +842,7 @@ abstract class Component extends Node {
    * 3) Syncing against an old version
    *      assert(_built == null && old != null)
    */
-  void _sync(Node old, sky.ParentNode host, sky.Node insertBefore) {
+  void _sync(UINode old, sky.ParentNode host, sky.Node insertBefore) {
     assert(!_defunct);
     assert(_built == null || old == null);
 
@@ -894,7 +894,7 @@ abstract class Component extends Node {
     _scheduleComponentForRender(this);
   }
 
-  Node build();
+  UINode build();
 }
 
 abstract class App extends Component {

sdk/README.md

@@ -32,7 +32,7 @@ The simplest Sky app is, appropriately, HelloWorldApp:
 import 'package:sky/framework/fn.dart';
 
 class HelloWorldApp extends App {
-  Node build() {
+  UINode build() {
     return new Text('Hello, world!');
   }
 }
@@ -45,7 +45,7 @@ void main() {
 Execution starts in `main`, which creates the `HelloWorldApp`. The framework
 then marks `HelloWorldApp` as dirty, which schedules it to build during the next
 animation frame. Each animation frame, the framework calls `build` on all the
-dirty components and diffs the virtual `Node` hierarchy returned this frame with
+dirty components and diffs the virtual `UINode` hierarchy returned this frame with
 the hierarchy returned last frame. Any differences are then applied as mutations
 to the physical hierarchy retained by the engine.