sproutcore 1.11.0.rc2 → 1.11.0.rc3

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/layout_style.js

@@ -260,10 +260,7 @@ SC.View.LayoutStyleCalculator = {
 
     // Calculate the margin offset used to center the value along this axis.
     if (SC.none(sizeValue)) {
-      //@if(debug)
-      // This error message happens whenever width or height is not set.
-      SC.warn("Developer Warning: When setting '" + center + "' in the layout, you must also set '" + size + "'.");
-      //@endif
+      // Invalid!
       style[margin] = "50%";
     } else {
       value = centerValue - sizeValue / 2;

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/manipulation.js

@@ -56,17 +56,6 @@ SC.View.reopen(
 
     view.endPropertyChanges();
 
-    // Make sure all notifications are delayed since the appending
-    // doesn't complete until the end of the RunLoop
-    // There may be better ways to do this than with invokeLast,
-    // but it's the best I can do for now - PDW
-    // this.invokeLast(function () {
-    //   var pane = view.get('pane');
-    //   if (pane && pane.get('isPaneAttached')) {
-    //     view._notifyDidAppendToDocument();
-    //   }
-    // });
-
     return this ;
   },
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/statechart.js

@@ -6,16 +6,16 @@ SC.LOG_VIEW_STATES = false;
 SC.LOG_VIEW_STATES_STYLE = {
   0x0200: 'color: #67b7db; font-style: italic;', // UNRENDERED
   0x0300: 'color: #67b7db; font-style: italic;', // UNATTACHED
-  0x0301: 'color: #67b7db; font-style: italic;', // UNATTACHED_BY_PARENT
+  0x0380: 'color: #67b7db; font-style: italic;', // ATTACHED_PARTIAL
   0x03C0: 'color: #23abf5; font-style: italic;', // ATTACHED_SHOWN
-  0x03C3: 'color: #1fe7a8; font-style: italic;', // ATTACHED_SHOWN_ANIMATING
+  0x03C4: 'color: #1fe7a8; font-style: italic;', // ATTACHED_SHOWN_ANIMATING
   0x03A0: 'color: #67b7db; font-style: italic;', // ATTACHED_HIDDEN
   0x03A1: 'color: #67b7db; font-style: italic;', // ATTACHED_HIDDEN_BY_PARENT
   0x03C1: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_IN
   0x0381: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_OUT
   0x0382: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_OUT_BY_PARENT
   0x03C2: 'color: #b800db; font-style: italic;', // ATTACHED_SHOWING
-  0x03A2: 'color: #b800db; font-style: italic;' // ATTACHED_HIDING
+  0x03C3: 'color: #b800db; font-style: italic;'  // ATTACHED_HIDING
 };
 //@endif
 
@@ -23,6 +23,11 @@ SC.LOG_VIEW_STATES_STYLE = {
 SC.CoreView.mixin(
   /** @scope SC.CoreView */ {
 
+  // State bit masks
+
+  // Logically always present, so not necessary, but here for logical ordering.
+  // IS_CREATED: 0x0200, // 10 0000 0000, 512
+
   /**
     The view has been rendered.
 
@@ -33,7 +38,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  IS_RENDERED: 0x0100, // 256
+  IS_RENDERED: 0x0100, // 01 0000 0000, 256
 
   /**
     The view has been attached.
@@ -45,7 +50,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  IS_ATTACHED: 0x0080, // 128
+  IS_ATTACHED: 0x0080, // 00 1000 0000, 128
 
   /**
     The view is visible in the display.
@@ -57,7 +62,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  IS_SHOWN: 0x0040, // 64
+  IS_SHOWN: 0x0040, // 00 0100 0000, 64
 
   /**
     The view is invisible in the display.
@@ -69,7 +74,9 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  IS_HIDDEN: 0x0020, // 32
+  IS_HIDDEN: 0x0020, // 00 0010 0000, 32
+
+  // Main states
 
   /**
     The view has been created, but has not been rendered or attached.
@@ -77,7 +84,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  UNRENDERED: 0x0200, // 512
+  UNRENDERED: 0x0200, // 10 0000 0000, 512 (IS_CREATED)
 
   /**
     The view has been created and rendered, but has not been attached
@@ -86,43 +93,37 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  UNATTACHED: 0x0300, // 768
+  UNATTACHED: 0x0300, // 11 0000 0000, 768 (IS_CREATED + IS_RENDERED)
 
   /**
-    The view has been created and rendered, but an ancestor is not attached.
+    The view has been created and rendered and attached to a parent, but an ancestor is not
+    attached.
 
     @static
     @constant
   */
-  UNATTACHED_BY_PARENT: 0x0301, // 769
+  ATTACHED_PARTIAL: 0x0380, // 11 1000 0000, 896 (IS_CREATED + IS_RENDERED + IS_ATTACHED)
 
   /**
-    The view has been created, rendered and attached and is visible in the
+    The view has been created, rendered and attached, but is not visible in the
     display.
 
+    Test with & SC.CoreView.IS_HIDDEN
     @static
     @constant
   */
-  ATTACHED_SHOWN: 0x03C0, // 960
-
-  /**
-    The view has been created, rendered and attached, is visible in the
-    display and is being animated via a call to `animate()`.
-
-    @static
-    @constant
-  */
-  ATTACHED_SHOWN_ANIMATING: 0x03C3, // 963
+  ATTACHED_HIDDEN: 0x03A0, // 11 1010 0000, 928 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_HIDDEN)
 
   /**
-    The view has been created, rendered and attached, but is not visible in the
+    The view has been created, rendered and attached and is visible in the
     display.
 
-    Test with & SC.CoreView.IS_HIDDEN
     @static
     @constant
   */
-  ATTACHED_HIDDEN: 0x03A0, // 928
+  ATTACHED_SHOWN: 0x03C0, // 11 1100 0000, 960 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN)
+
+  // Minor states
 
   /**
     The view has been created, rendered and attached, but is not visible in the
@@ -131,7 +132,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  ATTACHED_HIDDEN_BY_PARENT: 0x03A1, // 929
+  ATTACHED_HIDDEN_BY_PARENT: 0x03A1, // 929  (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_HIDDEN +)
 
   /**
     The view has been created, rendered and attached and is visible in the
@@ -141,7 +142,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  ATTACHED_BUILDING_IN: 0x03C1, // 961
+  ATTACHED_BUILDING_IN: 0x03C1, // 961 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN +)
 
   /**
     The view has been created, rendered and attached.  It is currently
@@ -151,7 +152,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  ATTACHED_BUILDING_OUT: 0x0381, // 897
+  ATTACHED_BUILDING_OUT: 0x03C4, // 964 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN +)
 
   /**
     The view has been created, rendered and attached.  It is currently
@@ -162,7 +163,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  ATTACHED_BUILDING_OUT_BY_PARENT: 0x0382, // 898
+  ATTACHED_BUILDING_OUT_BY_PARENT: 0x03C5, // 965 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN +)
 
   /**
     The view has been created, rendered and attached and is visible in the
@@ -172,7 +173,7 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  ATTACHED_SHOWING: 0x03C2, // 962
+  ATTACHED_SHOWING: 0x03C2, // 962 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN +)
 
   /**
     The view has been created, rendered and attached.  It is currently
@@ -182,7 +183,16 @@ SC.CoreView.mixin(
     @static
     @constant
   */
-  ATTACHED_HIDING: 0x03A2 // 930
+  ATTACHED_HIDING: 0x03C3, // 963 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN +)
+
+  /**
+    The view has been created, rendered and attached, is visible in the
+    display and is being animated via a call to `animate()`.
+
+    @static
+    @constant
+  */
+  ATTACHED_SHOWN_ANIMATING: 0x03C6 // 966 (IS_CREATED + IS_RENDERED + IS_ATTACHED + IS_SHOWN +)
 
 });
 
@@ -219,7 +229,7 @@ SC.CoreView.reopen(
   //
 
   /* @private Internal variable used to store the number of children building out while we wait to be detached. */
-  _buildingOutCount: null,
+  _sc_buildOutCount: null,
 
   /* @private Internal variable used to track the original view being detached that we are delaying so that we can build out. */
   _owningView: null,
@@ -245,7 +255,7 @@ SC.CoreView.reopen(
 
     * SC.CoreView.UNRENDERED
     * SC.CoreView.UNATTACHED
-    * SC.CoreView.UNATTACHED_BY_PARENT
+    * SC.CoreView.ATTACHED_PARTIAL
     * SC.CoreView.ATTACHED_SHOWING
     * SC.CoreView.ATTACHED_SHOWN
     * SC.CoreView.ATTACHED_SHOWN_ANIMATING
@@ -263,9 +273,9 @@ SC.CoreView.reopen(
   viewState: SC.CoreView.UNRENDERED,
 
   /**
-    Whether the view's layer is attached to the document or not.
+    Whether the view's layer is attached to a parent or not.
 
-    When the view's layer is attached to the document, this value will be true.
+    When the view's layer is attached to a parent view, this value will be true.
 
     @field
     @type Boolean
@@ -273,8 +283,7 @@ SC.CoreView.reopen(
     @readonly
   */
   isAttached: function () {
-    var state = this.get('viewState');
-    return state & SC.CoreView.IS_ATTACHED;
+    return (this.get('viewState') & SC.CoreView.IS_ATTACHED) > 0;
   }.property('viewState').cacheable(),
 
   /** @private
@@ -290,7 +299,7 @@ SC.CoreView.reopen(
   */
   // NOTE: This property is of little value, so it's private in case we decide to toss it.
   _isRendered: function () {
-    return this.get('viewState') !== SC.CoreView.UNRENDERED;
+    return (this.get('viewState') & SC.CoreView.IS_RENDERED) > 0;
   }.property('viewState').cacheable(),
 
   /**
@@ -312,10 +321,7 @@ SC.CoreView.reopen(
     @readonly
   */
   isVisibleInWindow: function () {
-    var state = this.get('viewState');
-    return state & SC.CoreView.IS_ATTACHED &&
-      state !== SC.CoreView.ATTACHED_HIDDEN &&
-      state !== SC.CoreView.ATTACHED_HIDDEN_BY_PARENT;
+    return( this.get('viewState') & SC.CoreView.IS_SHOWN) > 0;
   }.property('viewState').cacheable(),
 
 
@@ -329,7 +335,7 @@ SC.CoreView.reopen(
       handled = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doAdopt(%@, %@)'.fmt(this, parentView, beforeView), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -353,11 +359,11 @@ SC.CoreView.reopen(
         parentViewState = parentView.get('viewState'),
         parentNode, nextNode, nextView, siblings;
 
-      // Notify *will* (top-down from parent to children).
+      // Notify that the child view will be added to the parent view.
       if (parentView.willAddChild) { parentView.willAddChild(this, beforeView); }
       if (this.willAddToParent) { this.willAddToParent(parentView, beforeView); }
 
-      // Set parentView.
+      // Set the parentView.
       this.set('parentView', parentView);
 
       // Add to the new parent's childViews array.
@@ -369,9 +375,10 @@ SC.CoreView.reopen(
       // Pass the current designMode to the view (and its children).
       this.updateDesignMode(this.get('designMode'), parentView.get('designMode'));
 
-      // Notify adopted (on self and all child views).
-      this._adopted();
+      // Notify adopted.
+      this._adopted(beforeView);
 
+      // When a view is adopted, it should go to the same state as its new parent.
       switch (this.get('viewState')) {
       case SC.CoreView.UNRENDERED:
         switch (parentViewState) {
@@ -412,10 +419,6 @@ SC.CoreView.reopen(
           this._doAttach(parentNode, nextNode);
         }
       }
-
-      // Notify *did* (bottom-up from children to parent).
-      if (this.didAddToParent) { this.didAddToParent(parentView, beforeView); }
-      if (parentView.didAddChild) { parentView.didAddChild(this, beforeView); }
     } else {
       handled = false;
     }
@@ -431,7 +434,7 @@ SC.CoreView.reopen(
       isHandled = false;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doAttach(%@, %@)'.fmt(this, parentNode, nextNode), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -444,23 +447,23 @@ SC.CoreView.reopen(
 
       this._executeQueuedUpdates();
 
-      // Attach to parentNode
+      // Attach to parentNode.
       // IE doesn't support insertBefore(blah, undefined) in version IE9.
       parentNode.insertBefore(node, nextNode || null);
 
       parentView = this.get('parentView');
       if (!parentView || (parentView && parentView.get('isAttached'))) {
-        // Update states after *will* and before *did* notifications!
-        this._routeOnAttached();
-
-        // Give child views a chance to notify and update state.
-        this._callOnChildViews('_parentDidAppendToDocument');
+        // Attach the view.
+        this._executeDoAttach();
 
-        // Notify *did* (bottom-up from children to parent).
-        this._notifyDidAttach();
+        // If there is a transition in, run it.
+        if (transitionIn) {
+          this._transitionIn(false);
+        }
       } else {
-        // Update states after *will* and before *did* notifications!
-        this._gotoUnattachedByParentState();
+        // Attaching an unattached view to an unattached view, simply moves it to unattached by
+        // parent state. Don't do any notifications.
+        this._gotoAttachedPartialState();
       }
 
       isHandled = true;
@@ -468,30 +471,29 @@ SC.CoreView.reopen(
 
     // Special case: view switched from building out to building in.
     case SC.CoreView.ATTACHED_BUILDING_OUT:
-      // If already building out, we need to cancel and possibly build in.
+      // If already building out, we need to cancel and possibly build in. Top-down so that any
+      // children that are hidden or building out on their own allow us to bail out early.
       this._callOnChildViews('_parentDidCancelBuildOut');
 
       // Remove the shared building out count if it exists.
-      this._buildingOutCount = null;
+      this._sc_buildOutCount = null;
 
       // Note: We can be in ATTACHED_BUILDING_OUT state without a transition out while we wait for child views.
-      // Update states after *will* and before *did* notifications!
       if (this.get('transitionOut')) {
-        if (transitionIn) {
-          // this.invokeNext(function () {
-            this._transitionIn();
-          // });
+        // Cancel the building out transition (in place if we are going to switch to transitioning back in).
+        this.cancelAnimation(transitionIn ? SC.LayoutState.CURRENT : undefined);
 
-          this._gotoAttachedBuildingInState();
-        } else {
-          // Update state first!
-          this._gotoAttachedShownState();
+        // Set the proper state.
+        this._gotoAttachedShownState();
 
-          this._cancelTransition();
+        if (transitionIn) {
+          this._transitionIn(true);
         }
+
+      // Waiting for child view transition outs.
       } else {
 
-        // Route.
+        // Set the proper state.
         this._gotoAttachedShownState();
       }
 
@@ -518,7 +520,7 @@ SC.CoreView.reopen(
       }
       //@endif
       break;
-    case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_PARTIAL:
       //@if(debug)
       SC.warn("Developer Warning: You can not attach the child view, %@, directly.".fmt(this));
       //@endif
@@ -534,7 +536,7 @@ SC.CoreView.reopen(
       isHandled = false;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doDestroyLayer()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -551,24 +553,17 @@ SC.CoreView.reopen(
     case SC.CoreView.ATTACHED_SHOWING:
     case SC.CoreView.ATTACHED_SHOWN:
     case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
-    case SC.CoreView.UNATTACHED_BY_PARENT:
     case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_PARTIAL:
       break;
 
     // Normal case (SC.CoreView.UNATTACHED): view is rendered and its layer is being destroyed.
     default:
-      // Notify *will* (top-down from parent to children).
-      this._notifyWillDestroyLayer();
-      this._callOnChildViews('_notifyWillDestroyLayer');
-
-      // Remove our reference to the layer (our self and all our child views).
-      this._executeDoDestroyLayer();
-      this._callOnChildViews('_executeDoDestroyLayer');
-
-      // UNUSED.
-      // Notify *did* (bottom-up from children to parent).
-      // this._callOnChildViews('_notifyDidDestroyLayer');
-      // this._notifyDidDestroyLayer();
+      // Notify that the layer will be destroyed. Bottom-up so that each child is in the proper
+      // state before its parent potentially alters its state. For example, a parent could modify
+      // children in `willDestroyLayer`.
+      this._callOnChildViews('_teardownLayer', false);
+      this._teardownLayer();
 
       isHandled = true;
     }
@@ -580,83 +575,109 @@ SC.CoreView.reopen(
   _doDetach: function (immediately) {
     var state = this.get('viewState'),
       transitionOut = this.get('transitionOut'),
-      inPlace = false,
-      isHandled = true;
+      shouldHandle = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doDetach()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
+    // Handle all 12 possible view states.
     switch (state) {
 
-    // Normal case: Attached visible view being detached.
+    // Scenario: The view is shown.
+    // Result: Allow the view and/or any of its child views to build out or else execute the detach.
     case SC.CoreView.ATTACHED_SHOWN:
+      this._executeDoBuildOut(immediately);
+
       break;
 
-    // Normal case: Attached non-visible view being detached.
-    case SC.CoreView.UNATTACHED_BY_PARENT:
+    // Scenario: The view is attached but isn't visible (possibly because an ancestor is detached or hidden).
+    // Result: Detach the view immediately.
+    case SC.CoreView.ATTACHED_PARTIAL:
     case SC.CoreView.ATTACHED_HIDDEN:
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
-      // No need to transition out, since we're hidden.
-      immediately = true;
+      // Detach immediately.
+      this._executeDoDetach();
+
       break;
 
-    // Near normal case: Attached visible view that is in the middle of an animation.
-    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+    // Scenario: The view is in the middle of a hiding transition.
+    // Result: Cancel the animation and then run as normal.
+    case SC.CoreView.ATTACHED_HIDING:
+      // Cancel the animation (in the future we will be able to let it run out while building out).
       this.cancelAnimation();
+
+      // Set the proper state.
+      this._gotoAttachedHiddenState();
+
+      // Detach immediately.
+      this._executeDoDetach();
+
       break;
 
-    // Near normal case: Attached showing view. We cancel the incoming animation
-    // rather than swapping to a build out (difficult to get right, because we lose track of the correct final layout).
+    // Scenario: The view is in the middle of an animation or showing transition.
+    // Result: Cancel the animation and then run as normal.
     case SC.CoreView.ATTACHED_SHOWING:
-      this.cancelAnimation(); // Fires didTransitionIn callback (state changes to ATTACHED_SHOWN/notifications sent).
-      break;
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING: // TODO: We need concurrent states!
+      // Cancel the animation (in the future we will be able to let it run out while building out).
+      this.cancelAnimation();
 
-    // Near normal case: Attached hiding view. We cancel the outgoing animation
-    // rather than swapping to a build out (difficult to get right, because we lose track of the correct final layout).
-    case SC.CoreView.ATTACHED_HIDING:
-      this.cancelAnimation(); // Fires didTransitionOut callback (state changes to ATTACHED_HIDDEN/notifications sent).
+      // Set the proper state.
+      this._gotoAttachedShownState();
+
+      this._executeDoBuildOut(immediately);
 
-      // No need to transition out, since we're hidden.
-      immediately = true;
       break;
 
-    // Near normal case: Attached building in view. We cancel the incoming
-    // animation and build out the view in place.
+    // Scenario: The view is building in.
+    // Result: If it has a build out transition, swap to it. Otherwise, cancel.
     case SC.CoreView.ATTACHED_BUILDING_IN:
-      if (immediately || !transitionOut) {
-        this.cancelAnimation(); // Fires didTransitionIn callback (state changes to ATTACHED_SHOWN/notifications sent).
-      } else {
-        // Set the state manually so the callback doesn't do clean up and notify.
-        this._gotoAttachedShownState();
+      // Cancel the build in transition.
+      if (transitionOut) {
+        //@if (debug)
+        if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
+          SC.Logger.log('%c       — cancelling build in in place'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
+        }
+        //@endif
 
-        // Cancel the animation in place (setup properties still exist and will be cleared by transitionOut)
-        this.cancelAnimation(SC.LayoutState.CURRENT); // Fires didTransitionIn callback (no state change/no notifications).
+        this.cancelAnimation(SC.LayoutState.CURRENT);
+      } else {
+        //@if (debug)
+        if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
+          SC.Logger.log('%c       — cancelling build in outright'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
+        }
+        //@endif
 
-        // Transition out in place.
-        inPlace = true;
+        this.cancelAnimation();
       }
+
+      // Set the proper state.
+      this._gotoAttachedShownState();
+
+      // Build out in place.
+      this._executeDoBuildOut(immediately, true);
       break;
 
-    // Special case: Already building out, because parent is building out. Stop
-    // the transition in place so that it can continue in place on its own.
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
-      // Note: *will* detach notice already sent.
+    // Scenario: View is already building out because of an ancestor.
+    // Result: Stop the transition so that it can continue in place on its own.
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+      // Cancel the build out transition.
       this.cancelAnimation(SC.LayoutState.CURRENT); // Fires didTransitionOut callback (necessary to clean up parent view build out wait)
 
-      // Switch state to regular state (the view should only have been able to get to ATTACHED_BUILDING_OUT_BY_PARENT from ATTACHED_SHOWN).
+      // Set the proper state. (the view should only have been able to get to ATTACHED_BUILDING_OUT_BY_PARENT from ATTACHED_SHOWN).
       this._gotoAttachedShownState();
 
       // TODO: Grab the build out count for all child views of this view. What a nightmare for an edge case!
 
-      // Transition out in place.
-      inPlace = true;
+      // Build out in place.
+      this._executeDoBuildOut(immediately, true);
 
       break;
 
-    // Special case: Already building out. Fast path!
+    // Scenario: View is already building out.
+    // Result: Stop if forced to.
     case SC.CoreView.ATTACHED_BUILDING_OUT:
       // If immediately is passed, cancel the build out prematurely.
       if (immediately) {
@@ -667,129 +688,120 @@ SC.CoreView.reopen(
         this._executeDoDetach();
       }
 
-      // Don't try to notify or run transition out code again.
-      return true;
-
-    // Invalid states that have no effect. Fast path!
-    case SC.CoreView.UNRENDERED:
-    case SC.CoreView.UNATTACHED:
-      return false;
-    }
-
-    // Notify *will* (top-down from parent to children). The children will be
-    // notified only when they are actually about to be removed.
-    // this._notifyWillDetach();
-
-    if (immediately) {
-      // Detach immediately.
-      this._executeDoDetach();
-    } else {
-      // In order to allow the removal of a parent to be delayed by children's
-      // transitions, we track which views are building out and finish
-      // only when they're all done.
-      this._buildingOutCount = 0;
-
-      // Tell all the child views so that any with a transitionOut may run it.
-      this._callOnChildViews('_parentWillBuildOutFromDocument', this);
-
-      if (transitionOut) {
-        // this.invokeNext(function () {
-          this._transitionOut(inPlace, this);
-        // });
+      break;
 
-        // Update states after *will* and before *did* notifications!
-        this._gotoAttachedBuildingOutState();
-      } else if (this._buildingOutCount > 0) {
-        // Some children are building out, we will have to wait for them.
-        this._gotoAttachedBuildingOutState();
-      } else {
-        this._buildingOutCount = null;
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart code is being improperly used.
+      // Telling the view to detach when it is already detached isn't correct: UNRENDERED, UNATTACHED
+      SC.warn("Core Developer Warning: Found invalid state for view, %@, in _doDetach".fmt(this));
+      //@endif
 
-        // Detach immediately.
-        this._executeDoDetach();
-      }
+      shouldHandle = false;
     }
 
-    return isHandled;
+    return shouldHandle;
   },
 
   /** @private Hide this view action. */
   _doHide: function () {
     var state = this.get('viewState'),
-      transitionHide = this.get('transitionHide');
+      transitionHide = this.get('transitionHide'),
+      shouldHandle = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doHide()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
+    // Handle all 12 possible view states.
     switch (state) {
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
-    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
-      return false;
-    case SC.CoreView.UNATTACHED: // FAST PATH!
-    case SC.CoreView.UNATTACHED_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
-      // Queue the visibility update for the next time we display.
-      this._visibleStyleNeedsUpdate = true;
 
-      return true;
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
-      // Note that visibility update is NOT conditional for this state.
-      this._doUpdateVisibleStyle();
+    // Scenario: The view is shown.
+    // Result: Notify that the view will hide and then either hide or run hide transition.
+    case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+    // ATTACHED_HIDDEN_BY_PARENT, ATTACHED_BUILDING_IN, ATTACHED_BUILDING_OUT_BY_PARENT, ATTACHED_BUILDING_OUT
 
-      // Update states after *will* and before *did* notifications!
-      this._gotoAttachedHiddenState();
+      // TODO: How do we check for conflicts in the hide transition against other concurrent transitions/animations?
+      if (transitionHide) {
+        // this.invokeNext(function () {
+        this._transitionHide();
+        // });
+      } else {
+        // Hide the view.
+        this._executeDoHide();
+      }
 
-      return true;
-    case SC.CoreView.ATTACHED_BUILDING_IN:
-    case SC.CoreView.ATTACHED_SHOWING:
-      // Cancel the animation and revert to hidden.
-      this.cancelAnimation();
-      this._teardownTransition();
-      this._gotoAttachedHiddenState();
       break;
 
-    // Near normal case: Attached visible view that is in the middle of an animation.
-    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
-      this.cancelAnimation();
-      break;
+    // Scenario: The view was showing at the time it was told to hide.
+    // Result: Cancel the animation.
+    case SC.CoreView.ATTACHED_SHOWING:
+      // Cancel the showing transition.
+      if (transitionHide) {
+        this.cancelAnimation(SC.LayoutState.CURRENT);
+      } else {
+        this.cancelAnimation();
+      }
 
-    case SC.CoreView.ATTACHED_SHOWN:
-      break;
-    default:
-    }
+      // Set the proper state.
+      this._gotoAttachedShownState();
 
-    // Notify *will* (top-down from parent to children).
-    if (this.willHideInDocument) { this.willHideInDocument(); }
+      // Hide the view.
+      if (transitionHide) {
+        this._transitionHide(true);
+      } else {
+        this._executeDoHide();
+      }
 
-    if (transitionHide) {
-      // Update states after *will* and before *did* notifications!
-      this._gotoAttachedHidingState();
+      break;
 
-      // this.invokeNext(function () {
-        this._transitionHide();
-      // });
+    // Scenario: The view is rendered but is not attached.
+    // Result: Queue an update to the visibility style.
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.ATTACHED_PARTIAL:
+      // Queue the visibility update for the next time we display.
+      this._visibleStyleNeedsUpdate = true;
 
-    } else {
-      // Clear out any child views that are still transitioning before we hide.
-      this._callOnChildViews('_parentWillHideInDocument');
+      break;
+
+    // Scenario: The view is not even rendered.
+    // Result: Nothing is required.
+    case SC.CoreView.UNRENDERED:
+      shouldHandle = false;
+      break;
 
+    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
+      return false;
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
       // Note that visibility update is NOT conditional for this state.
-      this.invokeOnce(this._doUpdateVisibleStyle);
+      this._doUpdateVisibleStyle();
 
       // Update states after *will* and before *did* notifications!
       this._gotoAttachedHiddenState();
-      this._callOnChildViews('_parentDidHideInDocument');
 
-      // Notify *did* (bottom-up from children to parent).
-      if (this.didHideInDocument) { this.didHideInDocument(); }
+      return true;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart code is being improperly used.
+      // Telling the view to hide when it is already hidden isn't correct:
+      //
+      SC.warn("Core Developer Warning: Found invalid state for view, %@, in _doHide".fmt(this));
+      //@endif
+
+      shouldHandle = false;
     }
 
-    return true;
+    return shouldHandle;
   },
 
   /** @private Orphan this view action. */
@@ -798,7 +810,7 @@ SC.CoreView.reopen(
       handled = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doOrphan()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -824,41 +836,23 @@ SC.CoreView.reopen(
 
   /** @private Render this view action. */
   _doRender: function () {
-    var state = this.get('viewState');
+    var state = this.get('viewState'),
+        shouldHandle = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doRender()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
+    // Handle all 12 possible view states.
     switch (state) {
-    case SC.CoreView.ATTACHED_SHOWING: // FAST PATHS!
-    case SC.CoreView.ATTACHED_SHOWN:
-    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
-    case SC.CoreView.ATTACHED_HIDING:
-    case SC.CoreView.ATTACHED_HIDDEN:
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
-    case SC.CoreView.ATTACHED_BUILDING_IN:
-    case SC.CoreView.ATTACHED_BUILDING_OUT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
-    case SC.CoreView.UNATTACHED:
-    case SC.CoreView.UNATTACHED_BY_PARENT:
-      return false;
-    case SC.CoreView.UNRENDERED:
-      // Render the layer.
-      var context = this.renderContext(this.get('tagName'));
 
-      this.renderToContext(context);
-      this.set('layer', context.element());
-
-      // Update states after *will* and before *did* notifications!
-      this._gotoUnattachedState();
-      this._callOnChildViews('_gotoUnattachedByParentState');
-
-      // Notify *did* (top-down from parent to children).
-      this._rendered();
-      this._callOnChildViews('_rendered');
+    // Scenario: The view is not rendered.
+    // Result: Render the layer and then notify.
+    case SC.CoreView.UNRENDERED:
+      // Render the view.
+      this._executeDoRender();
 
       // Bypass the unattached state for adopted views.
       var parentView = this.get('parentView');
@@ -874,93 +868,126 @@ SC.CoreView.reopen(
         this._doAttach(parentNode, nextNode);
       }
 
-      return true;
+      break;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart code is being improperly used.
+      // All other states should be impossible if parent was UNATTACHED:
+      // ATTACHED_SHOWING, ATTACHED_SHOWN, ATTACHED_SHOWN_ANIMATING, ATTACHED_HIDING, ATTACHED_HIDDEN, ATTACHED_HIDDEN_BY_PARENT, ATTACHED_BUILDING_IN, ATTACHED_BUILDING_OUT, ATTACHED_BUILDING_OUT_BY_PARENT, UNATTACHED, ATTACHED_PARTIAL
+      SC.warn("Core Developer Warning: Found invalid state for view, %@, in _doRender".fmt(this));
+      //@endif
+      shouldHandle = false;
     }
+
+    return shouldHandle;
   },
 
   /** @private Show this view action. */
   _doShow: function () {
     var state = this.get('viewState'),
-      parentView = this.get('parentView'),
-      // Views without a parent are not limited by a parent's current state.
-      isParentShown = parentView ? parentView.get('viewState') & SC.CoreView.IS_SHOWN : true,
-      transitionShow = this.get('transitionShow');
+        transitionShow = this.get('transitionShow'),
+        shouldHandle = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doShow()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
 
+    // Handle all 12 possible view states.
     switch (state) {
 
-    // Normal case: view is hidden and is being shown.
+    // Scenario: The view is hidden.
+    // Result: Depends on whether the parent view is shown or hidden by an ancestor.
     case SC.CoreView.ATTACHED_HIDDEN:
+      var parentView = this.get('parentView'),
+          // Views without a parent are not limited by a parent's current state.
+          isParentShown = parentView ? parentView.get('viewState') & SC.CoreView.IS_SHOWN : true;
+
+      // Scenario: The view is hidden and its ancestors are all visible.
+      // Result: Notify that the view and relevant child views will be shown.
       if (isParentShown) {
-        // Update before showing (note that visibility update is NOT conditional for this state).
-        this._doUpdateVisibleStyle();
+        var notifyStack = []; // Only those views that changed state get added to the stack.
+
+        // Run any queued updates.
+        this._executeQueuedUpdates();
+
+        // The children are updated top-down so that hidden or unattached children allow us to bail out early.
+        this._callOnChildViews('_parentWillShowInDocument', true, notifyStack);
+
+        // Notify for each child (that will change state) in reverse so that each child is in the proper
+        // state before its parent potentially alters its state. For example, a parent could modify
+        // children in `willShowInDocument`.
+        for (var i = notifyStack.length - 1; i >= 0; i--) {
+          var childView = notifyStack[i];
+
+          childView._notifyWillShowInDocument();
+        }
+        this._notifyWillShowInDocument();
+
+        // Show the view.
+        this._executeDoShow();
+        if (transitionShow) {
+          this._transitionShow(false);
+        }
 
-        // Notify *will* (top-down from parent to children).
-        this._callOnChildViews('_parentWillShowInDocument');
-        if (this.willShowInDocument) { this.willShowInDocument(); }
+      // Scenario: The view is hidden, but one of its ancestors is also hidden.
+      // Result: Track that the visible style needs update and go to hidden by parent state.
       } else {
         // Queue the visibility update for the next time we display.
         this._visibleStyleNeedsUpdate = true;
 
-        // Update states after *will* and before *did* notifications!
+        // Set the proper state.
         this._gotoAttachedHiddenByParentState();
-
-        return true;
       }
+
       break;
 
+    // Scenario: The view was hiding at the time it was told to show.
+    // Result: Revert or reverse the hiding transition.
     case SC.CoreView.ATTACHED_HIDING:
-      // Cancel the animation and revert to shown.
-      this.cancelAnimation();
-      this._teardownTransition();
+      // Cancel the hiding transition (in place if we are going to switch to transitioning back in).
+      this.cancelAnimation(transitionShow ? SC.LayoutState.CURRENT : SC.LayoutState.START);
+
+      // Set the proper state.
       this._gotoAttachedShownState();
+
+      if (transitionShow) {
+        this._transitionShow(true);
+      }
+
       break;
 
-    // Special case: Layer exists but is not attached. Queue an update to the visibility style.
+    // Scenario: The view is rendered but is not attached.
+    // Result: Queue an update to the visibility style.
     case SC.CoreView.UNATTACHED:
-    case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_PARTIAL:
       // Queue the visibility update for the next time we display.
       this._visibleStyleNeedsUpdate = true;
-      return true;
-
-    // Invalid states that have no effect.
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-    case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
-    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
-    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
-    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
-      return false;
-
-    default:
-    }
 
-    this._executeQueuedUpdates();
+      break;
 
-    if (transitionShow) {
-      // Update states after *will* and before *did* notifications!
-      this._gotoAttachedShowingState();
+    // Scenario: The view is not even rendered.
+    // Result: Nothing is required.
+    case SC.CoreView.UNRENDERED:
+      shouldHandle = false;
+      break;
 
-      // this.invokeNext(function () {
-        this._transitionShow();
-      // });
-    } else {
-      // Update states after *will* and before *did* notifications!
-      this._gotoAttachedShownState();
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart code is being improperly used.
+      // Telling the view to show when it is already visible isn't correct:
+      // ATTACHED_SHOWN, ATTACHED_SHOWN_ANIMATING, ATTACHED_SHOWING, ATTACHED_HIDDEN_BY_PARENT, ATTACHED_BUILDING_IN, ATTACHED_BUILDING_OUT_BY_PARENT, ATTACHED_BUILDING_OUT
+      SC.warn("Core Developer Warning: Found invalid state for view, %@, in _doShow".fmt(this));
+      //@endif
 
-      // Notify *did* (bottom-up from children to parent).
-      if (this.didShowInDocument) { this.didShowInDocument(); }
-      this._callOnChildViews('_parentDidShowInDocument');
+      shouldHandle = false;
     }
 
-    return true;
+    return shouldHandle;
   },
 
   /** @private Update this view's contents action. */
@@ -969,7 +996,7 @@ SC.CoreView.reopen(
       handled = true;
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _doUpdateContent(%@)'.fmt(this, force), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -1005,7 +1032,7 @@ SC.CoreView.reopen(
     var state = this.get('viewState');
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — didTransitionIn()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -1014,14 +1041,8 @@ SC.CoreView.reopen(
       state === SC.CoreView.ATTACHED_BUILDING_IN) {
       this._teardownTransition();
 
-      // Update states after *will* and before *did* notifications!
+      // Set the proper state.
       this._gotoAttachedShownState();
-
-      // Notify *did* (bottom-up from children to parent).
-      if (this.didShowInDocument) { this.didShowInDocument(); }
-      // if (state === SC.CoreView.ATTACHED_SHOWING) {
-      //   this._callOnChildViews('_parentDidShowInDocument');
-      // }
     }
   },
 
@@ -1037,7 +1058,7 @@ SC.CoreView.reopen(
     var state = this.get('viewState');
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — didTransitionOut()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -1050,9 +1071,9 @@ SC.CoreView.reopen(
       var owningView = this._owningView;
       // We can't clean up the transition until the parent is done.  For
       // example, a fast child build out inside of a slow parent build out.
-      owningView._buildingOutCount--;
+      owningView._sc_buildOutCount--;
 
-      if (owningView._buildingOutCount === 0) {
+      if (owningView._sc_buildOutCount === 0) {
         owningView._executeDoDetach();
 
         // Clean up.
@@ -1061,80 +1082,36 @@ SC.CoreView.reopen(
     } else if (state === SC.CoreView.ATTACHED_HIDING) {
       this._teardownTransition();
 
-      // Notify *will* (top-down from parent to children).
-      this._callOnChildViews('_parentWillHideInDocument');
-
-      // Note that visibility update is NOT conditional for this state.
-      this._doUpdateVisibleStyle();
-
-      // Update states after *will* and before *did* notifications!
-      this._gotoAttachedHiddenState();
-
-      // Notify *did* (bottom-up from children to parent).
-      this._callOnChildViews('_parentDidHideInDocument');
-      if (this.didHideInDocument) { this.didHideInDocument(); }
+      // Hide immediately.
+      this._executeDoHide();
     }
   },
 
   /** @private The 'adopted' event. */
-  _adopted: function () {
-    // This has been moved to the _notifyDidAttach event.
-    // this.notifyPropertyChange('frame');
+  _adopted: function (beforeView) {
+    // Notify all of our descendents that our parent has changed. They will update their `pane` value
+    // for one. Bottom-up in case a parent view modifies children when its pane changes for any
+    // reason.
+    this._callOnChildViews('_ancestorDidChangeParent', false);
+
+    // Notify that the child view has been added to the parent view.
+    var parentView = this.get('parentView');
+    if (this.didAddToParent) { this.didAddToParent(parentView, beforeView); }
+    if (parentView.didAddChild) { parentView.didAddChild(this, beforeView); }
   },
 
   /** @private The 'orphaned' event. */
   _orphaned: function (oldParentView) {
-    // Notify.
-    if (oldParentView.didRemoveChild) { oldParentView.didRemoveChild(this); }
-    if (this.didRemoveFromParent) { this.didRemoveFromParent(oldParentView); }
-  },
-
-  /** @private The 'rendered' event. */
-  _rendered: function () {
-    var displayProperties,
-      len, idx;
-
-    // Register display property observers.
-    displayProperties = this.get('displayProperties');
-    for (idx = 0, len = displayProperties.length; idx < len; idx++) {
-      this.addObserver(displayProperties[idx], this, this.displayDidChange);
+    // It's not necessary to send notice to destroyed views.
+    if (!this.isDestroyed) {
+      // Notify all of our descendents that our parent has changed. They will update their `pane` value
+      // for one. Bottom-up in case a parent view modifies children when its pane changes for any
+      // reason.
+      this._callOnChildViews('_ancestorDidChangeParent', false);
+
+      if (oldParentView.didRemoveChild) { oldParentView.didRemoveChild(this); }
+      if (this.didRemoveFromParent) { this.didRemoveFromParent(oldParentView); }
     }
-
-    // Begin observing isVisible & isFirstResponder.
-    this.addObserver('isVisible', this, this._isVisibleDidChange);
-    this.addObserver('isFirstResponder', this, this._isFirstResponderDidChange);
-
-    // TODO: we should be able to fix this with states
-    // if (this.get('useStaticLayout')) this.viewDidResize();
-
-    // var childView, childViews = this.get('childViews');
-    // for (var i = childViews.length - 1; i >= 0; i--) {
-    //   childView = childViews[i];
-
-    //   // We allow missing childViews in the array so ignore them.
-    //   if (!childView) { continue; }
-
-      // A parent view creating a layer might result in the creation of a
-      // child view's DOM node being created via a render context without
-      // createLayer() being invoked on the child.  In such cases, if anyone
-      // had requested 'layer' and it was cached as null, we need to
-      // invalidate it.
-      // TODO: we should be able to fix this with states
-      // childView.notifyPropertyChange('layer');
-
-      // A strange case, that a childView's frame won't be correct before
-      // we have a layer, if the childView doesn't have a fixed layout
-      // and we are using static layout.
-      // TODO: we should be able to fix this with states
-      // if (this.get('useStaticLayout')) {
-      //   if (!childView.get('isFixedLayout')) { childView.viewDidResize(); }
-      // }
-
-    //   childView._rendered();
-    // }
-
-    // Notify.
-    this._notifyDidRender();
   },
 
   // ------------------------------------------------------------------------
@@ -1143,67 +1120,56 @@ SC.CoreView.reopen(
 
   /** @private */
   _gotoAttachedBuildingInState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_BUILDING_IN);
   },
 
   /** @private */
   _gotoAttachedBuildingOutState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_BUILDING_OUT);
   },
 
   /** @private */
   _gotoAttachedBuildingOutByParentState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT);
   },
 
   /** @private */
   _gotoAttachedHiddenState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_HIDDEN);
   },
 
   /** @private */
   _gotoAttachedHiddenByParentState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_HIDDEN_BY_PARENT);
   },
 
   /** @private */
   _gotoAttachedHidingState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_HIDING);
   },
 
   /** @private */
   _gotoAttachedShowingState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_SHOWING);
   },
 
   /** @private */
   _gotoAttachedShownState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.ATTACHED_SHOWN);
   },
 
   /** @private */
   _gotoUnattachedState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.UNATTACHED);
   },
 
   /** @private */
-  _gotoUnattachedByParentState: function () {
-    // Update the state.
-    this.set('viewState', SC.CoreView.UNATTACHED_BY_PARENT);
+  _gotoAttachedPartialState: function () {
+    this.set('viewState', SC.CoreView.ATTACHED_PARTIAL);
   },
 
   /** @private */
   _gotoUnrenderedState: function () {
-    // Update the state.
     this.set('viewState', SC.CoreView.UNRENDERED);
   },
 
@@ -1211,12 +1177,34 @@ SC.CoreView.reopen(
   // Methods
   //
 
-  /** @private Clear building in transition. */
-  _cancelTransition: function () {
-    // Cancel conflicting transitions. This causes the animation callback to fire.
-    this.cancelAnimation();
-    // this._teardownTransition();
-  },
+  /** @private Adds observers once a view has a layer. */
+  _sc_addRenderedStateObservers: function () {
+    var displayProperties,
+      len, idx;
+
+    // Register display property observers.
+    displayProperties = this.get('displayProperties');
+    for (idx = 0, len = displayProperties.length; idx < len; idx++) {
+      this.addObserver(displayProperties[idx], this, this.displayDidChange);
+    }
+
+    // Begin observing isVisible & isFirstResponder.
+    this.addObserver('isVisible', this, this._isVisibleDidChange);
+    this.addObserver('isFirstResponder', this, this._isFirstResponderDidChange);
+  },
+
+  /** @private Called when an ancestor's parent changed. */
+  _ancestorDidChangeParent: function () {
+    // When an ancestor changes, the pane may have changed.
+    this.notifyPropertyChange('pane');
+  },
+
+  /** @private Clear building in transition. */
+  _cancelTransition: function () {
+    // Cancel conflicting transitions. This causes the animation callback to fire.
+    this.cancelAnimation();
+    // this._teardownTransition();
+  },
 
   /** @private */
   _doUpdateVisibleStyle: function () {
@@ -1230,13 +1218,12 @@ SC.CoreView.reopen(
   },
 
   /** @private Destroys the layer and updates the state. */
-  _executeDoDestroyLayer: function () {
+  _teardownLayer: function () {
+    this._notifyWillDestroyLayer();
+
     var displayProperties,
       idx, len;
 
-    // Remove the layer reference.
-    this.set('layer', null);
-
     // Unregister display property observers.
     displayProperties = this.get('displayProperties');
     for (idx = 0, len = displayProperties.length; idx < len; idx++) {
@@ -1247,26 +1234,203 @@ SC.CoreView.reopen(
     this.removeObserver('isVisible', this, this._isVisibleDidChange);
     this.removeObserver('isFirstResponder', this, this._isFirstResponderDidChange);
 
+    // Remove the layer reference.
+    this.set('layer', null);
+
     // Update states after *will* and before *did* notifications!
     this._gotoUnrenderedState();
   },
 
+  /** @private Attaches the view. */
+  _executeDoAttach: function () {
+    var notifyStack = []; // Only those views that changed state get added to the stack.
+
+    // Run any queued updates.
+    this._executeQueuedUpdates();
+
+    // Update the state and children state. The children are updated top-down so that hidden or
+    // unattached children allow us to bail out early.
+    this._gotoSomeAttachedState();
+    this._callOnChildViews('_parentDidAttach', true, notifyStack);
+
+    // Notify for each child (that changed state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `didAppendToDocument`.
+    for (var i = notifyStack.length - 1; i >= 0; i--) {
+      var childView = notifyStack[i];
+
+      childView._notifyDidAttach();
+    }
+    this._notifyDidAttach();
+  },
+
+  /** @private Builds out the view. */
+  _executeDoBuildOut: function (immediately, inPlace) {
+    if (immediately) {
+      // Detach immediately.
+      this._executeDoDetach();
+    } else {
+      // In order to allow the removal of a parent to be delayed by its children's transitions, we
+      // track which views are building out and finish only when they're all done.
+      this._sc_buildOutCount = 0;
+
+      // Tell all the child views so that any with a transitionOut may run it. Top-down so that
+      // any hidden or already building out child views allow us to bail out early.
+      this._callOnChildViews('_parentWillBuildOutFromDocument', true, this);
+
+      var transitionOut = this.get('transitionOut');
+      if (transitionOut) {
+        inPlace = inPlace || false;
+        this._transitionOut(inPlace, this);
+
+      } else if (this._sc_buildOutCount > 0) {
+        // Some children are building out, we will have to wait for them.
+        this._gotoAttachedBuildingOutState();
+      } else {
+        this._sc_buildOutCount = null;
+
+        // Detach immediately.
+        this._executeDoDetach();
+      }
+    }
+  },
+
   /** @private Detaches the view and updates the state. */
   _executeDoDetach: function () {
-    // Notify *will* (top-down from parent to children).
+    var notifyStack = []; // Only those views that changed state get added to the stack.
+
+    // The children are updated top-down so that hidden or unattached children allow us to bail out early.
+    this._callOnChildViews('_parentWillDetach', true, notifyStack);
+
+    // Notify for each child (that will change state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `willRemoveFromDocument`.
+    for (var i = notifyStack.length - 1; i >= 0; i--) {
+      var childView = notifyStack[i];
+
+      childView._notifyWillDetach();
+    }
     this._notifyWillDetach();
-    this._callOnChildViews('_parentWillRemoveFromDocument');
+
+    // Cancel any remaining animations (e.g. a concurrent hide).
+    var viewState = this.get('viewState');
+    switch (viewState) {
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+      this.cancelAnimation();
+      break;
+    }
 
     // Detach the layer.
     var node = this.get('layer');
     node.parentNode.removeChild(node);
 
-    // Update states after *will* and before *did* notifications!
+    // Update the state and children state. The children are updated top-down so that unattached
+    // children allow us to bail out early.
     this._gotoUnattachedState();
-    this._callOnChildViews('_parentDidRemoveFromDocument');
+    this._callOnChildViews('_parentDidDetach', true);
   },
 
-  /** @private */
+  /** @private Hides the view. */
+  _executeDoHide: function () {
+    var notifyStack = []; // Only those views that changed state get added to the stack.
+
+    // The children are updated top-down so that hidden or unattached children allow us to bail out early.
+    this._callOnChildViews('_parentWillHideInDocument', true, notifyStack);
+
+    // Notify for each child (that will change state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `willHideInDocument`.
+    for (var i = notifyStack.length - 1; i >= 0; i--) {
+      var childView = notifyStack[i];
+
+      childView._notifyWillHideInDocument();
+    }
+    this._notifyWillHideInDocument();
+
+    // Cancel any remaining animations (e.g. a concurrent build in or build out).
+    var viewState = this.get('viewState');
+    switch (viewState) {
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+      this.cancelAnimation();
+      break;
+    }
+
+    // Update the visible style.
+    this._doUpdateVisibleStyle();
+
+    // Update the state and children state. The children are updated top-down so that hidden or
+    // unattached children allow us to bail out early.
+    this._gotoAttachedHiddenState();
+    this._callOnChildViews('_parentDidHideInDocument', true); // , notifyStack
+
+    // Notify for each child (that changed state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `didHideInDocument`.
+    // for (var i = notifyStack.length - 1; i >= 0; i--) {
+    //   var childView = notifyStack[i];
+
+    //   childView._notifyDidHideInDocument();
+    // }
+    this._notifyDidHideInDocument();
+  },
+
+  /** @private Render the view's layer. */
+  _executeDoRender: function () {
+    var notifyStack = []; // Only those views that changed state get added to the stack.
+
+    // Render the layer.
+    var context = this.renderContext(this.get('tagName'));
+
+    this.renderToContext(context);
+    this.set('layer', context.element());
+
+    // Update the state and children state. The children are updated top-down so that invalid state
+    // children allow us to bail out early.
+    this._gotoUnattachedState();
+    this._callOnChildViews('_parentDidRender', true, notifyStack);
+
+    this._sc_addRenderedStateObservers();
+
+    // Notify for each child (that changed state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `didCreateLayer`.
+    for (var i = notifyStack.length - 1; i >= 0; i--) {
+      var childView = notifyStack[i];
+
+      childView._notifyDidRender();
+    }
+    this._notifyDidRender();
+  },
+
+  /** @private Shows the view. */
+  _executeDoShow: function () {
+    // var notifyStack = []; // Only those views that changed state get added to the stack.
+
+    // Update the visible style.
+    this._doUpdateVisibleStyle();
+
+    // Update the state and children state. The children are updated top-down so that hidden or
+    // unattached children allow us to bail out early. This view's state is going to be transitioning,
+    // but all child views are now considered shown.
+    this._gotoAttachedShownState();
+    this._callOnChildViews('_parentDidShowInDocument', true); // , notifyStack
+
+    // Notify for each child (that changed state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `didShowInDocument`.
+    // for (var i = notifyStack.length - 1; i >= 0; i--) {
+    //   var childView = notifyStack[i];
+
+    //   childView._notifyDidShowInDocument();
+    // }
+    this._notifyDidShowInDocument();
+  },
+
+  /** @private Updates the layer. */
   _executeDoUpdateContent: function () {
     var mixins = this.renderMixin,
       context = this.renderContext(this.get('layer'));
@@ -1349,6 +1513,21 @@ SC.CoreView.reopen(
     this.$().toggleClass('focus', isFirstResponder);
   },
 
+  /** @private Attempts to call `didAppendToDocument` on the view. */
+  _notifyDidAttach: function () {
+    // If we don't have the layout module then we don't know the frame until appended to the document.
+    this.notifyPropertyChange('frame');
+
+    // Notify.
+    if (this.didAppendToDocument) { this.didAppendToDocument(); }
+  },
+
+  /** @private Attempts to call `didHideInDocument` on the view. */
+  _notifyDidHideInDocument: function () {
+    if (this.didHideInDocument) { this.didHideInDocument(); }
+  },
+
+  /** @private Attempts to call `didCreateLayer` on the view. */
   _notifyDidRender: function () {
     var mixins = this.didCreateLayerMixin,
       idx, len;
@@ -1363,21 +1542,12 @@ SC.CoreView.reopen(
     }
   },
 
-  /** @private Notify on attached. */
-  _notifyDidAttach: function () {
-    // If we don't have the layout module then we don't know the frame until appended to the document.
-    this.notifyPropertyChange('frame');
-
-    // Notify.
-    if (this.didAppendToDocument) { this.didAppendToDocument(); }
-  },
-
-  /** @private Notify on detaching. */
-  _notifyWillDetach: function () {
-    if (this.willRemoveFromDocument) { this.willRemoveFromDocument(); }
+  /** @private Attempts to call `didShowInDocument` on the view. */
+  _notifyDidShowInDocument: function () {
+    if (this.didShowInDocument) { this.didShowInDocument(); }
   },
 
-  /** @private Notify before destroying layer. */
+  /** @private Attempts to call `willDestroyLayer` on the view. */
   _notifyWillDestroyLayer: function () {
     var idx, len,
       mixins;
@@ -1393,37 +1563,96 @@ SC.CoreView.reopen(
     if (this.willDestroyLayer) { this.willDestroyLayer(); }
   },
 
+  /** @private Attempts to call `willRemoveFromDocument` on the view. */
+  _notifyWillDetach: function () {
+    if (this.willRemoveFromDocument) { this.willRemoveFromDocument(); }
+  },
+
+  /** @private Attempts to call `willHideInDocument` on the view. */
+  _notifyWillHideInDocument: function () {
+    if (this.willHideInDocument) { this.willHideInDocument(); }
+  },
+
+  /** @private Attempts to call `willShowInDocument` on the view. */
+  _notifyWillShowInDocument: function () {
+    if (this.willShowInDocument) { this.willShowInDocument(); }
+  },
+
   /** @private Routes according to parent did append. */
-  _parentDidAppendToDocument: function () {
-    // Run any queued updates.
-    this._executeQueuedUpdates();
+  _parentDidAttach: function (notifyStack) {
+    var state = this.get('viewState'),
+        shouldContinue = true;
 
-    // Update states after *will* and before *did* notifications!
-    this._routeOnAttached();
+    // Handle all 12 possible view states.
+    switch (state) {
 
-    // Notify.
-    this._notifyDidAttach();
+    // Scenario: The child view was attached to the parent, which was unattached.
+    // Result: Update the child and then move it to the proper attached state.
+    case SC.CoreView.ATTACHED_PARTIAL:
+      // Run any queued updates.
+      this._executeQueuedUpdates();
+
+      // Go to the proper state.
+      this._gotoSomeAttachedState();
+
+      // If there is a transition in, run it. TODO: Check state here?
+      var transitionIn = this.get('transitionIn');
+      if (transitionIn) {
+        this._transitionIn(false);
+      }
+
+      break;
+
+    // Scenario: The child is unrendered or unattached.
+    // Result: The child would need to be forced into this state by its parent (otherwise it should
+    //         be in an ATTACHED_PARTIAL state), so just leave it alone and don't notify.
+    case SC.CoreView.UNRENDERED: // Render + attach?
+    case SC.CoreView.UNATTACHED: // Attach?
+      // There's no need to continue to further child views.
+      shouldContinue = false;
+      break;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // All other states should be impossible if parent was UNATTACHED:
+      // ATTACHED_BUILDING_IN, ATTACHED_SHOWING, ATTACHED_SHOWN, ATTACHED_SHOWN_ANIMATING, ATTACHED_BUILDING_OUT, ATTACHED_BUILDING_OUT_BY_PARENT, ATTACHED_HIDING, ATTACHED_HIDDEN, ATTACHED_HIDDEN_BY_PARENT
+      SC.warn("Core Developer Warning: Found invalid state for view, %@, in _parentDidAttach".fmt(this));
+      //@endif
+
+      // There's no need to continue to further child views.
+      shouldContinue = false;
+    }
+
+    if (shouldContinue) {
+      // Allow children that have changed state to notify that they have been attached.
+      notifyStack.push(this);
+    }
+
+    return shouldContinue;
   },
 
   /** @private Updates according to parent did cancel build out. */
   _parentDidCancelBuildOut: function () {
-    var state = this.get('viewState'),
-      transitionIn = this.get('transitionIn');
+    var state = this.get('viewState');
 
+    // If the view was building out because its parent was building out, attempt to reverse or
+    // revert the transition.
     if (state === SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT) {
-      if (transitionIn) {
-        // this.invokeNext(function () {
-          this._transitionIn();
-        // });
+      var transitionIn = this.get('transitionIn');
 
-        // Update states after *will* and before *did* notifications!
-        this._gotoAttachedBuildingInState();
-      } else {
-        this._cancelTransition();
+      // Cancel the building out transition (in place if we are going to switch to transitioning back in).
+      this.cancelAnimation(transitionIn ? SC.LayoutState.CURRENT : undefined);
 
-        // Update states after *will* and before *did* notifications!
-        this._gotoAttachedShownState();
+      // Set the proper state.
+      this._gotoAttachedShownState();
+
+      if (transitionIn) {
+        this._transitionIn(true);
       }
+
+    // If the view was building out on its own or is hidden we can ignore it.
     } else if (state === SC.CoreView.ATTACHED_BUILDING_OUT || state &
       SC.CoreView.IS_HIDDEN) {
       // There's no need to continue to further child views.
@@ -1431,203 +1660,355 @@ SC.CoreView.reopen(
     }
   },
 
-  /** @private Starts building out view if appropriate. */
-  _parentWillBuildOutFromDocument: function (owningView) {
+  /** @private Update child view states when the parent hides. Top-down! */
+  _parentDidHideInDocument: function () { // notifyStack
     var state = this.get('viewState'),
-      transitionOut = this.get('transitionOut');
+        shouldContinue = false;
 
+    // Handle all 12 possible view states.
     switch (state) {
-    case SC.CoreView.UNRENDERED:
-    case SC.CoreView.UNATTACHED:
-    case SC.CoreView.UNATTACHED_BY_PARENT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
-      // There's no need to continue to further child views.
-      // return false;
-    case SC.CoreView.ATTACHED_HIDDEN:
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
-    case SC.CoreView.ATTACHED_HIDING:
-      // Notify *will* (top-down from parent to children).
-      // this._notifyWillDetach();
 
-      return false;
-    case SC.CoreView.ATTACHED_SHOWING:
-    case SC.CoreView.ATTACHED_BUILDING_IN:
+    // Scenario: The child view was shown.
+    // Result: Go to hidden by parent state.
     case SC.CoreView.ATTACHED_SHOWN:
-      // Notify *will* (top-down from parent to children).
-      // this._notifyWillDetach();
-
-      if (transitionOut) {
-        this._owningView = owningView;
-
-        // this.invokeNext(function () {
-          this._transitionOut(false, owningView);
-        // });
-
-        // Update states after *will* and before *did* notifications!
-        this._gotoAttachedBuildingOutByParentState();
-      }
-      return true;
-    default:
-    }
-  },
+      // Go to the proper state.
+      this._gotoAttachedHiddenByParentState();
 
-  /** @private Clean up before parent is detached. */
-  _parentWillRemoveFromDocument: function () {
-    var state = this.get('viewState');
+      shouldContinue = true;
+      break;
 
-    switch (state) {
+    // Scenario: The child view was hidden or forced to unrendered or unattached state.
+    // Result: Do nothing.
     case SC.CoreView.UNRENDERED:
     case SC.CoreView.UNATTACHED:
-    case SC.CoreView.UNATTACHED_BY_PARENT:
-      // There's no need to continue to further child views.
-      return false;
-    // Cancel any outstanding isVisible transitions and mark for visibility update.
-    case SC.CoreView.ATTACHED_SHOWING:
-    case SC.CoreView.ATTACHED_HIDING:
-      this._cancelTransition();
-      this._teardownTransition();
-      this._visibleStyleNeedsUpdate = true;
-      break;
-    // Cancel any other outstanding transitions.
-    case SC.CoreView.ATTACHED_BUILDING_IN:
-    case SC.CoreView.ATTACHED_BUILDING_OUT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
-      this._cancelTransition();
-      this._teardownTransition();
-      break;
     case SC.CoreView.ATTACHED_HIDDEN:
-    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
-    case SC.CoreView.ATTACHED_SHOWN:
       break;
+
+    // Invalid states.
     default:
-      // Attached and not in a transitionary state.
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // All animating states should have been canceled when parent will hide is called.
+      // ATTACHED_HIDING, ATTACHED_BUILDING_IN, ATTACHED_SHOWING, ATTACHED_BUILDING_OUT, ATTACHED_BUILDING_OUT_BY_PARENT, ATTACHED_PARTIAL, ATTACHED_HIDDEN_BY_PARENT, ATTACHED_SHOWN_ANIMATING
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentDidHideInDocument".fmt(this));
+      //@endif
     }
 
-    // Notify *will*.
-    this._notifyWillDetach();
-  },
+    // if (shouldContinue) {
+    //   // Allow children that have changed state to notify that they have been hidden.
+    //   notifyStack.push(this);
+    // }
 
-  _ancestorDidChangeParent: function () {
-    this.notifyPropertyChange('pane');
+    return shouldContinue;
   },
 
   /** @private Routes according to parent did detach. */
-  _parentDidRemoveFromDocument: function () {
+  _parentDidDetach: function () {
     var state = this.get('viewState');
 
     if (state & SC.CoreView.IS_ATTACHED) {
       // Update states after *will* and before *did* notifications!
-      this._gotoUnattachedByParentState();
+      this._gotoAttachedPartialState();
     } else {
       // There's no need to continue to further child views.
       return false;
     }
   },
 
-  /** @private Routes according to parent did hide. */
-  _parentDidHideInDocument: function () {
-    var state = this.get('viewState');
+  /** @private Configure child views when parent did render. */
+  _parentDidRender: function (notifyStack) {
+    var state = this.get('viewState'),
+        shouldContinue = true;
 
+    // Handle all 12 possible view states.
     switch (state) {
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-    case SC.CoreView.UNATTACHED: // FAST PATH!
-    case SC.CoreView.UNATTACHED_BY_PARENT:
-    case SC.CoreView.ATTACHED_HIDING:
-    case SC.CoreView.ATTACHED_BUILDING_OUT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
-    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
+
+    // Scenario: The child view was unrendered and now is rendered.
+    // Result: Add rendered state observers and move it to the proper rendered state.
+    case SC.CoreView.UNRENDERED:
+      this._sc_addRenderedStateObservers();
+
+      // Go to the proper state.
+      this._gotoAttachedPartialState();
+      break;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // All other states should be impossible if parent was UNRENDERED:
+      // ATTACHED_BUILDING_IN, ATTACHED_SHOWING, ATTACHED_SHOWN, ATTACHED_SHOWN_ANIMATING, ATTACHED_BUILDING_OUT, ATTACHED_BUILDING_OUT_BY_PARENT, ATTACHED_HIDING, ATTACHED_HIDDEN, ATTACHED_HIDDEN_BY_PARENT, ATTACHED_PARTIAL, UNATTACHED
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentDidRender".fmt(this));
+      //@endif
+
+      // There's no need to continue to further child views.
+      shouldContinue = false;
+    }
+
+    if (shouldContinue) {
+      // Allow children that have changed state to notify that they have been rendered.
+      notifyStack.push(this);
+    }
+
+    return shouldContinue;
+  },
+
+  /** @private Update child view states when the parent shows. Top-down! */
+  _parentDidShowInDocument: function () { // notifyStack
+    var state = this.get('viewState'),
+        shouldContinue = true;
+
+    // Handle all 12 possible view states.
+    switch (state) {
+
+    // Scenario: The child view is only hidden because of the parent.
+    // Result: Go to shown state. This will notify.
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+      this._gotoAttachedShownState();
+
+      break;
+
+    // Scenario: The child view is hidden on its own or has been forced to an unrendered or unattached state.
+    // Result: Do nothing and don't notify.
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.ATTACHED_HIDDEN:
       // There's no need to continue to further child views.
-      return false;
-    case SC.CoreView.ATTACHED_BUILDING_IN:
-    case SC.CoreView.ATTACHED_SHOWING:
-    case SC.CoreView.ATTACHED_SHOWN:
+      shouldContinue = false;
       break;
+
+    // Invalid states.
     default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // These states should be impossible if the parent was HIDDEN.
+      // ATTACHED_SHOWN, ATTACHED_SHOWN_ANIMATING, ATTACHED_SHOWING, ATTACHED_HIDING, ATTACHED_BUILDING_IN, ATTACHED_BUILDING_OUT, ATTACHED_BUILDING_OUT_BY_PARENT
+      // This state should be impossible if its parent was UNATTACHED (it should have been trimmed above):
+      // ATTACHED_PARTIAL
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentDidShowInDocument".fmt(this));
+      //@endif
+      // There's no need to continue to further child views.
+      shouldContinue = false;
     }
 
-    // Update states after *will* and before *did* notifications!
-    this._gotoAttachedHiddenByParentState();
+    // if (shouldContinue) {
+    //   // Allow children that have changed state to notify that they have been made visible.
+    //   notifyStack.push(this);
+    // }
 
-    // Notify *did* (bottom-up from children to parent).
-    if (this.didHideInDocument) { this.didHideInDocument(); }
+    return shouldContinue;
   },
 
-  /** @private Routes according to parent will hide. */
-  _parentWillHideInDocument: function () {
-    var state = this.get('viewState');
+  /** @private Starts building out view if appropriate. */
+  _parentWillBuildOutFromDocument: function (owningView) {
+    var state = this.get('viewState'),
+      transitionOut = this.get('transitionOut'),
+      shouldContinue = true;
 
     switch (state) {
-    case SC.CoreView.UNRENDERED: // FAST PATH!
-    case SC.CoreView.UNATTACHED: // FAST PATH!
-    // case SC.CoreView.UNATTACHED_BY_PARENT:
-    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
-    // case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_HIDDEN:
       // There's no need to continue to further child views.
-      return false;
-    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
-      // Clear out any child views that are transitioning before we hide.
-      // Notify *will* (top-down from parent to children).
-      // this._callOnChildViews('_parentWillHideInDocument');
+      shouldContinue = false;
+      break;
 
-      // // Update states after *will* and before *did* notifications!
-      // this._gotoAttachedHiddenState();
+    // Scenario: The child view is building in at the same time that its ancestor wants to detach.
+    // Result: If the child wants to build out, switch to building out by parent, otherwise let the build in run for as long as it can.
+    case SC.CoreView.ATTACHED_BUILDING_IN:
 
-      // Cancel our hiding transition.
-      this._cancelTransition();
+      // Cancel the build in transition.
+      if (transitionOut) {
+        this.cancelAnimation(SC.LayoutState.CURRENT);
+      } else {
+        this.cancelAnimation();
+      }
 
-      // We didn't quite hide in time so indicate that visibility needs update next time we display.
-      // this._visibleStyleNeedsUpdate = true;
+      // Set the proper state.
+      this._gotoAttachedShownState();
+
+      // Build out the view by parent.
+      if (transitionOut) {
+        this._transitionOut(true, owningView);
+      }
 
-      return false;
-    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
-    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
-      this._cancelTransition();
       break;
-    // case SC.CoreView.ATTACHED_BUILDING_OUT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
-      this._cancelTransition();
+
+    // Scenario: The view is shown and possibly transitioning.
+    // Result: Allow any transitions to continue concurrent with build out transition (may be conflicts).
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_SHOWN:
+
+      // Build out the view by parent.
+      if (transitionOut) {
+        this._transitionOut(false, owningView);
+      }
       break;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // These states should not be reachable here: ATTACHED_PARTIAL, ATTACHED_HIDDEN_BY_PARENT, ATTACHED_BUILDING_OUT_BY_PARENT
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentWillBuildOutFromDocument".fmt(this));
+      //@endif
+      // There's no need to continue to further child views.
+      shouldContinue = false;
+    }
+
+    return shouldContinue;
+  },
+
+  /** @private Prepares according to parent will hide. This is called before the parent view hides
+    completely, which may be after a hide transition completes. */
+  _parentWillHideInDocument: function () { // notifyStack
+    var state = this.get('viewState'),
+        shouldContinue = true;
+
+    // Handle all 12 possible view states.
+    switch (state) {
+
+    // Scenario: The child view is visible.
+    // Result: Do nothing and continue.
     case SC.CoreView.ATTACHED_SHOWN:
       break;
+
+    // Scenario: The child view is animating.
+    // Result: Complete its animation immediately and continue.
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_HIDING:
+      this.cancelAnimation();
+      break;
+
+    // Scenario: The child view is hidden or has been forced to an unrendered or unattached state.
+    // Result: Do nothing and don't notify.
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.ATTACHED_HIDDEN:
+      // There's no need to continue to further child views.
+      break;
+
+    // Invalid states.
     default:
-      // Attached and not in a transitionary state.
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // This state should be impossible if its parent was UNATTACHED or HIDDEN/HIDING (it should have been trimmed above):
+      // ATTACHED_PARTIAL, ATTACHED_HIDDEN_BY_PARENT
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentWillHideInDocument".fmt(this));
+      //@endif
+      // There's no need to continue to further child views.
+      shouldContinue = false;
     }
 
-    // Notify *will* (top-down from parent to children).
-    if (this.willHideInDocument) { this.willHideInDocument(); }
+    // if (shouldContinue) {
+    //   // Allow children that have changed state to notify that they will be shown.
+    //   notifyStack.push(this);
+    // }
+
+    return shouldContinue;
   },
 
-  /** @private Routes according to parent did show. */
-  _parentDidShowInDocument: function () {
-    var state = this.get('viewState');
+  /** @private Clean up before parent is detached. */
+  _parentWillDetach: function (notifyStack) {
+    var state = this.get('viewState'),
+        shouldContinue = true;
 
-    if (state === SC.CoreView.ATTACHED_HIDDEN_BY_PARENT) {
-      // Update states after *will* and before *did* notifications!
-      this._gotoAttachedShownState();
+    // Handle all 12 possible view states.
+    switch (state) {
 
-      // Notify *did* (bottom-up from children to parent).
-      if (this.didShowInDocument) { this.didShowInDocument(); }
-    } else {
+    // Scenario: The child view is visible.
+    // Result: Do nothing and continue.
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
+
+    // Scenario: The child view is animating.
+    // Result: Complete its animation immediately and continue.
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING: // TODO: We need concurrent states!
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_BUILDING_IN: // Was building in and didn't have a build out.
+    case SC.CoreView.ATTACHED_BUILDING_OUT: // Was building out on its own at the same time.
+    case SC.CoreView.ATTACHED_HIDING:
+      this.cancelAnimation();
+      break;
+
+    // Scenario: The child view has forced to unattached or unrendered state, or it's hidden.
+    // Result: Don't continue.
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.ATTACHED_HIDDEN:
+      shouldContinue = false;
+      break;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // These states should not be reachable here: ATTACHED_PARTIAL, ATTACHED_HIDDEN_BY_PARENT, ATTACHED_BUILDING_OUT_BY_PARENT
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentWillDetach".fmt(this));
+      //@endif
       // There's no need to continue to further child views.
-      return false;
+      shouldContinue = false;
+    }
+
+    if (shouldContinue) {
+      // Allow children that have changed state to notify that they will be shown.
+      notifyStack.push(this);
     }
+
+    return shouldContinue;
   },
 
   /** @private Prepares according to parent will show. */
-  _parentWillShowInDocument: function () {
-    var state = this.get('viewState');
+  _parentWillShowInDocument: function (notifyStack) {
+    var state = this.get('viewState'),
+        shouldContinue = true;
 
-    if (state === SC.CoreView.ATTACHED_HIDDEN_BY_PARENT) {
+    // Handle all 12 possible view states.
+    switch (state) {
+
+    // Scenario: The child view is only hidden because of the parent.
+    // Result: Run queued updates. This will notify.
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
       this._executeQueuedUpdates();
 
-      // Notify *will* (top-dow`n from parent to children).
-      if (this.willShowInDocument) { this.willShowInDocument(); }
-    } else {
+      break;
+
+    // Scenario: The child view is hidden on its own or has been forced to an unrendered or unattached state.
+    // Result: Do nothing and don't notify.
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.ATTACHED_HIDDEN:
       // There's no need to continue to further child views.
-      return false;
+      shouldContinue = false;
+      break;
+
+    // Invalid states.
+    default:
+      //@if(debug)
+      // Add some debugging only warnings for if the view statechart is breaking assumptions.
+      // These states should be impossible if the parent was HIDDEN.
+      // ATTACHED_SHOWN, ATTACHED_SHOWN_ANIMATING, ATTACHED_SHOWING, ATTACHED_HIDING, ATTACHED_BUILDING_IN, ATTACHED_BUILDING_OUT, ATTACHED_BUILDING_OUT_BY_PARENT
+      // This state should be impossible if its parent was UNATTACHED (it should have been trimmed above):
+      // ATTACHED_PARTIAL
+      SC.warn("Core Developer Warning: Found invalid state for view %@ in _parentWillShowInDocument".fmt(this));
+      //@endif
+      // There's no need to continue to further child views.
+      shouldContinue = false;
     }
+
+    if (shouldContinue) {
+      // Allow children that have changed state to notify that they will be shown.
+      notifyStack.push(this);
+    }
+
+    return shouldContinue;
   },
 
   /** @private */
@@ -1671,12 +2052,12 @@ SC.CoreView.reopen(
   },
 
   /** @private Attempts to run a transition hide, ensuring any incoming transitions are stopped in place. */
-  _transitionHide: function () {
+  _transitionHide: function (inPlace) {
     var transitionHide = this.get('transitionHide'),
       options = this.get('transitionHideOptions') || {};
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _transitionHide()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
@@ -1688,32 +2069,35 @@ SC.CoreView.reopen(
     //   inPlace = true;
     //   break;
     // default:
-    this._setupTransition(transitionHide);
+    if (!inPlace) {
+      this._setupTransition(transitionHide);
+    }
     // }
 
     // Set up the hiding transition.
     if (transitionHide.setup) {
-      transitionHide.setup(this, options);
+      transitionHide.setup(this, options, inPlace);
     }
 
     // Execute the hiding transition.
     transitionHide.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+
+    // Set the proper state.
+    this._gotoAttachedHidingState();
   },
 
   /** @private Attempts to run a transition in, ensuring any outgoing transitions are stopped in place. */
-  _transitionIn: function () {
-    var state = this.get('viewState'),
-      transitionIn = this.get('transitionIn'),
-      options = this.get('transitionInOptions') || {},
-      inPlace = false;
+  _transitionIn: function (inPlace) {
+    var transitionIn = this.get('transitionIn'),
+      options = this.get('transitionInOptions') || {};
 
-    switch (state) {
-    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
-    case SC.CoreView.ATTACHED_BUILDING_OUT:
-      this.cancelAnimation(SC.LayoutState.CURRENT);
-      inPlace = true;
-      break;
-    default:
+    //@if (debug)
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
+      SC.Logger.log('%c%@ — _transitionIn()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
+    }
+    //@endif
+
+    if (!inPlace) {
       this._setupTransition(transitionIn);
     }
 
@@ -1724,6 +2108,9 @@ SC.CoreView.reopen(
 
     // Execute the incoming transition.
     transitionIn.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+
+    // Set the proper state.
+    this._gotoAttachedBuildingInState();
   },
 
   /** @private Attempts to run a transition out, ensuring any incoming transitions are stopped in place. */
@@ -1736,7 +2123,7 @@ SC.CoreView.reopen(
     }
 
     // Increment the shared building out count.
-    owningView._buildingOutCount++;
+    owningView._sc_buildOutCount++;
 
     // Set up the outgoing transition.
     if (transitionOut.setup) {
@@ -1745,25 +2132,29 @@ SC.CoreView.reopen(
 
     // Execute the outgoing transition.
     transitionOut.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+
+    // Set the proper state.
+    if (owningView === this) {
+      this._gotoAttachedBuildingOutState();
+    } else {
+      this._gotoAttachedBuildingOutByParentState();
+    }
   },
 
   /** @private Attempts to run a transition show, ensuring any hiding transitions are stopped in place. */
-  _transitionShow: function () {
+  _transitionShow: function (inPlace) {
     var transitionShow = this.get('transitionShow'),
-      options = this.get('transitionShowOptions') || {},
-      inPlace = false;
+      options = this.get('transitionShowOptions') || {};
 
     //@if (debug)
-    if (SC.LOG_VIEW_STATES) {
+    if (SC.LOG_VIEW_STATES || this.SC_LOG_VIEW_STATE) {
       SC.Logger.log('%c%@ — _transitionShow()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
     //@endif
-    // if (state === SC.CoreView.ATTACHED_HIDING) {
-    //   this.cancelAnimation(SC.LayoutState.CURRENT);
-    //   inPlace = true;
-    // } else {
-    this._setupTransition(transitionShow);
-    // }
+
+    if (!inPlace) {
+      this._setupTransition(transitionShow);
+    }
 
     // Set up the showing transition.
     if (transitionShow.setup) {
@@ -1773,36 +2164,28 @@ SC.CoreView.reopen(
     // Execute the showing transition.
     transitionShow.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
 
-    // This view's state is going to be transitioning, but all child views are now considered shown.
-    this._callOnChildViews('_parentDidShowInDocument');
+    // Set the proper state.
+    this._gotoAttachedShowingState();
   },
 
-  /** @private */
-  _routeOnAttached: function () {
+  /** @private Goes to the proper attached state depending on its parents state*/
+  _gotoSomeAttachedState: function () {
     var parentView = this.get('parentView'),
+      isParentHidden = parentView ? parentView.get('viewState') & SC.CoreView.IS_HIDDEN : false,
       // Views without a parent are not limited by a parent's current state.
       isParentShown = parentView ? parentView.get('viewState') & SC.CoreView.IS_SHOWN : true;
 
-    // Update states after *will* and before *did* notifications!
-    if (this.get('isVisible')) {
-      if (isParentShown) {
-        // Route.
-        var transitionIn = this.get('transitionIn');
-        if (transitionIn) {
-          this._gotoAttachedBuildingInState();
-
-          // this.invokeNext(function () {
-            this._transitionIn();
-          // });
-
-        } else {
-          this._gotoAttachedShownState();
-        }
+    // Set the proper state.
+    if (isParentShown) {
+      if (this.get('isVisible')) {
+        this._gotoAttachedShownState();
       } else {
-        this._gotoAttachedHiddenByParentState();
+        this._gotoAttachedHiddenState();
       }
+    } else if (isParentHidden) {
+      this._gotoAttachedHiddenByParentState();
     } else {
-      this._gotoAttachedHiddenState();
+      this._gotoAttachedPartialState();
     }
   }