sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -41,7 +41,7 @@ SC.View.reopen(
     A child view without a cursor of its own inherits its parent's cursor by
     default.  Set this to NO to prevent this behavior.
 
-    @property {Boolean}
+    @type Boolean
   */
   shouldInheritCursor: YES
 

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

@@ -1,20 +1,75 @@
 sc_require("views/view");
 
+SC.CoreView.mixin(
+  /** @scope SC.CoreView */ {
+
+  /**
+    The view is enabled.
+
+    @static
+    @constant
+  */
+  ENABLED: 0x08, // 8
+
+  /**
+    The view has been disabled.
+
+    @static
+    @constant
+  */
+  IS_DISABLED: 0x10, // 16
+
+  /**
+    The view is disabled.
+
+    @static
+    @constant
+  */
+  DISABLED: 0x11, // 17
+
+  /**
+    The view is enabled itself, but is effectively disabled in the pane due to
+    a disabled parent view.
+
+    @static
+    @constant
+  */
+  DISABLED_BY_PARENT: 0x12 // 18
+
+});
+
+
 SC.View.reopen(
   /** @scope SC.View.prototype */ {
-  // ..........................................................
-  // IS ENABLED SUPPORT
+
+  // ------------------------------------------------------------------------
+  // Properties
   //
 
+  /**
+    The current enabled state of the view.
+
+    Views have a few possible enabled states:
+
+    * SC.CoreView.ENABLED
+    * SC.CoreView.DISABLED
+    * SC.CoreView.DISABLED_BY_PARENT
+
+    @type String
+    @default SC.CoreView.ENABLED
+    @readonly
+  */
+  enabledState: SC.CoreView.ENABLED,
+
   /**
     Set to true when the item is enabled.   Note that changing this value
-    will alter the isVisibleInWindow property for this view and any
+    will alter the `isEnabledInPane` property for this view and any
     child views as well as to automatically add or remove a 'disabled' CSS
     class name.
 
     This property is observable and bindable.
 
-    @property {Boolean}
+    @type Boolean
   */
   isEnabled: YES,
   isEnabledBindingDefault: SC.Binding.oneWay().bool(),
@@ -24,15 +79,72 @@ SC.View.reopen(
     are enabled in the pane.  You should use this property when deciding
     whether to respond to an incoming event or not.
 
-    This property is not observable.
+    @type Boolean
+  */
+  // The previous version used a lazy upward search method.  This has better
+  // performance, but made isEnabledInPane non-bindable.
+  // isEnabledInPane: function() {
+  //   var ret = this.get('isEnabled'), pv ;
+  //   if (ret && (pv = this.get('parentView'))) { ret = pv.get('isEnabledInPane'); }
+  //   return ret ;
+  // }.property('parentView', 'isEnabled'),
+  isEnabledInPane: function () {
+    return this.get('enabledState') === SC.CoreView.ENABLED;
+  }.property('enabledState').cacheable(),
+
+  /**
+    By default, setting isEnabled to false on a view will place all of its
+    child views in a disabled state.  To block this from happening to a
+    specific child view and its children, you can set `shouldInheritEnabled`
+    to false.
+
+    In this way you can set `isEnabled` to false on a main pane to disable all
+    buttons, collections and other controls within it, but can still keep a
+    section of it editable using `shouldInheritEnabled: false`.
 
-    @property {Boolean}
+    @type Boolean
   */
-  isEnabledInPane: function() {
-    var ret = this.get('isEnabled'), pv ;
-    if (ret && (pv = this.get('parentView'))) { ret = pv.get('isEnabledInPane'); }
-    return ret ;
-  }.property('parentView', 'isEnabled'),
+  shouldInheritEnabled: true,
+
+  // ------------------------------------------------------------------------
+  // Actions & Events
+  //
+
+  /** @private */
+  _doEnable: function () {
+    var handled = true;
+
+    if (this.get('enabledState') & SC.CoreView.IS_DISABLED) {
+      this._callOnChildViews('_parentDidEnableInPane');
+      this._gotoEnabledState();
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  /** @private */
+  _doDisable: function () {
+    var handled = true;
+
+    if (this.get('enabledState') !== SC.CoreView.DISABLED) {
+      if (this.get('isFirstResponder')) {
+        this.resignFirstResponder();
+      }
+
+      this._callOnChildViews('_parentDidDisableInPane');
+      this._gotoDisabledState();
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  // ------------------------------------------------------------------------
+  // Methods
+  //
 
   /** @private
     Observes the isEnabled property and resigns first responder if set to NO.
@@ -41,18 +153,105 @@ SC.View.reopen(
 
     @observes isEnabled
   */
-  _sc_view_isEnabledDidChange: function(){
-    if(!this.get('isEnabled') && this.get('isFirstResponder')){
-      this.resignFirstResponder();
-    }
+  _sc_view_isEnabledDidChange: function () {
+    // Filter the input channel.
+    this.invokeOnce(this._doUpdateEnabled);
   }.observes('isEnabled'),
 
-  applyAttributesToContext: function(original, context) {
+  /** @private */
+  _doUpdateEnabled: function () {
+    var state = this.get('viewState');
+
+    // Call the proper action.
+    if (this.get('isEnabled')) {
+      this._doEnable();
+    } else {
+      this._doDisable();
+    }
+
+    // Update the display if in a visible state.
+    switch (state) {
+    case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+      // Update the display.
+      this._doUpdateEnabledStyle();
+      break;
+    default:
+      // Indicate that a display update is required the next time we are visible.
+      this._enabledStyleNeedsUpdate = true;
+    }
+  },
+
+  /** @private Enhance. */
+  _executeQueuedUpdates: function (original) {
+    original();
+
+    // Update the layout style of the layer if necessary.
+    if (this._enabledStyleNeedsUpdate) {
+      this._doUpdateEnabledStyle();
+    }
+  }.enhance(),
+
+  /** @private */
+  _doUpdateEnabledStyle: function () {
+    var isEnabled = this.get('isEnabled');
+
+    this.$().toggleClass('disabled', !isEnabled);
+    this.$().attr('aria-disabled', !isEnabled ? true : null);
+
+    // Reset that an update is required.
+    this._enabledStyleNeedsUpdate = false;
+  },
+
+  /** @private */
+  _parentDidEnableInPane: function () {
+    var isEnabled = this.get('isEnabled');
+
+    if (isEnabled) {
+      this._gotoEnabledState();
+    } else {
+      // There's no need to continue to further child views.
+      return false;
+    }
+  },
+
+  /** @private */
+  _parentDidDisableInPane: function () {
     var isEnabled = this.get('isEnabled');
 
+    if (isEnabled && this.get('shouldInheritEnabled')) {
+      this._gotoDisableByParentState();
+    } else {
+      // There's no need to continue to further child views.
+      return false;
+    }
+  },
+
+  applyAttributesToContext: function (original, context) {
     original(context);
 
-    context.setClass('disabled', !isEnabled);
-    context.attr('aria-disabled', !isEnabled ? 'true' : null);
-  }.enhance()
+    if (!this.get('isEnabled')) {
+      context.addClass('disabled');
+      context.setAttr('aria-disabled', 'true');
+    }
+
+  }.enhance(),
+
+  /** @private */
+  _gotoEnabledState: function () {
+    this.set('enabledState', SC.CoreView.ENABLED);
+  },
+
+  /** @private */
+  _gotoDisabledState: function () {
+    this.set('enabledState', SC.CoreView.DISABLED);
+  },
+
+  /** @private */
+  _gotoDisableByParentState: function () {
+    // Update the state.
+    this.set('enabledState', SC.CoreView.DISABLED_BY_PARENT);
+  }
+
 });

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

@@ -1,5 +1,5 @@
 sc_require("views/view");
-sc_require('views/view/layout_style') ;
+sc_require('views/view/layout_style');
 
 /** Select a horizontal layout for various views.*/
 SC.LAYOUT_HORIZONTAL = 'sc-layout-horizontal';
@@ -32,33 +32,30 @@ SC.ANCHOR_CENTER = { centerX: 0, centerY: 0 };
 
 SC.LAYOUT_AUTO = 'auto';
 
+
 SC.View.reopen(
   /** @scope SC.View.prototype */ {
 
   /**
-    Set to YES to indicate the view has visibility support added.
+    Set to YES to indicate the view has layout support added.
   */
   hasLayout: YES,
 
-  concatenatedProperties: ["layoutProperties"],
-
   /**
     Optional background color.  Will be applied to the view's element if
     set.  This property is intended for one-off views that need a background
     element.  If you plan to create many view instances it is probably better
     to use CSS.
 
-    @property {String}
+    @type String
   */
   backgroundColor: null,
 
-  displayProperties: ['backgroundColor'],
-
   /**
     Activates use of brower's static layout. To activate, set this
     property to YES.
 
-    @property {Boolean}
+    @type Boolean
   */
   useStaticLayout: NO,
 
@@ -66,13 +63,38 @@ SC.View.reopen(
   // LAYOUT
   //
 
-  init: function(original) {
+  /** @private */
+  init: function (original) {
     original();
 
-    // TODO: This makes it impossible to override
-    this.layoutStyleCalculator = SC.View.LayoutStyleCalculator.create({ view: this });
-
     this._previousLayout = this.get('layout');
+
+    // Apply the automatic child view layout if it is defined.
+    var childViewLayout = this.childViewLayout;
+    if (childViewLayout) {
+      // Layout the child views once.
+      this.set('childViewsNeedLayout', true);
+      this.layoutChildViewsIfNeeded();
+
+      // If the child view layout is live, start observing affecting properties.
+      if (this.get('isChildViewLayoutLive')) {
+        this.addObserver('childViews.[]', this, this._cvl_childViewsDidChange);
+        // DISABLED. this.addObserver('childViewLayout', this, this._cvl_childViewLayoutDidChange);
+        this.addObserver('childViewLayoutOptions', this, this._cvl_childViewLayoutDidChange);
+
+        // Initialize the child views.
+        this._cvl_setupChildViewsLiveLayout();
+      }
+    }
+
+  }.enhance(),
+
+  /** @private */
+  destroy: function (original) {
+    // Clean up.
+    this._previousLayout = null;
+
+    return original();
   }.enhance(),
 
   /**
@@ -86,7 +108,7 @@ SC.View.reopen(
     be invalid, we need to force layoutDidChange() to always immediately run
     whenever 'layout' is set.
   */
-  propertyDidChange: function(key, value, _keepCache) {
+  propertyDidChange: function (key, value, _keepCache) {
     // If the key is 'layout', we need to call layoutDidChange() immediately
     // so that if the frame has changed any cached values (for both this view
     // and any child views) can be appropriately invalidated.
@@ -95,11 +117,11 @@ SC.View.reopen(
     // changed and if layout is dependent on the property.
     // If it is we call layoutDidChange.
     var layoutChange = false;
-    if(typeof this.layout === "function" && this._kvo_dependents) {
+    if (typeof this.layout === "function" && this._kvo_dependents) {
       var dependents = this._kvo_dependents[key];
-      if(dependents && dependents.indexOf('layout')!=-1) { layoutChange = true; }
+      if (dependents && dependents.indexOf('layout') != -1) { layoutChange = true; }
     }
-    if(key==='layout' || layoutChange) { this.layoutDidChange(); }
+    if (key === 'layout' || layoutChange) { this.layoutDidChange(); }
     // Resume notification as usual.
     sc_super();
   },
@@ -120,47 +142,45 @@ SC.View.reopen(
     @param {Object} value
     @returns {SC.View} receiver
   */
-  adjust: function(key, value) {
+  adjust: function (key, value) {
     var layout = this.get('layout'), didChange = NO, cur, hash;
 
-    if (key === undefined) { return this ; } // nothing to do.
+    if (key === undefined) { return this; } // nothing to do.
 
     // handle string case
     if (SC.typeOf(key) === SC.T_STRING) {
       // this is copied from below
       cur = layout[key];
 
-      if(value === undefined || cur == value) return this;
+      if (value === undefined || cur == value) return this;
 
       layout = SC.clone(layout);
 
-      if(value === null) {
+      if (value === null) {
         delete layout[key];
       } else {
         layout[key] = value;
       }
 
       didChange = YES;
-    }
-
-    else {
+    } else {
       hash = key;
 
-      for(key in hash) {
+      for (key in hash) {
         if (!hash.hasOwnProperty(key)) { continue; }
 
-        value = hash[key] ;
-        cur = layout[key] ;
+        value = hash[key];
+        cur = layout[key];
 
         if (value === undefined || cur == value) { continue; }
 
         // only clone the layout the first time we see a change
-        if(!didChange) layout = SC.clone(layout);
+        if (!didChange) layout = SC.clone(layout);
 
         if (value === null) {
-          delete layout[key] ;
+          delete layout[key];
         } else {
-          layout[key] = value ;
+          layout[key] = value;
         }
 
         didChange = YES;
@@ -169,10 +189,30 @@ SC.View.reopen(
 
     // now set adjusted layout
     if (didChange) {
-      this.set('layout', layout) ;
+      var transitionAdjust = this.get('transitionAdjust');
+
+      if (this.get('viewState') & SC.CoreView.IS_SHOWN && transitionAdjust) {
+        // Run the adjust transition.
+        this._transitionAdjust(layout);
+      } else {
+        this.set('layout', layout);
+      }
     }
 
-    return this ;
+    return this;
+  },
+
+  /** @private Attempts to run a transition adjust, ensuring any showing transitions are stopped in place. */
+  _transitionAdjust: function (layout) {
+    var transitionAdjust = this.get('transitionAdjust'),
+      options = this.get('transitionAdjustOptions') || {};
+
+    // Execute the adjusting transition.
+    transitionAdjust.run(this, options, layout);
+  },
+
+  /** @private */
+  didTransitionAdjust: function () {
   },
 
   /**
@@ -196,6 +236,7 @@ SC.View.reopen(
      - borderRight: right border
      - borderBottom: bottom border
      - borderLeft: bottom left
+     - opacity: the opacity of the view
      - zIndex: position above or below other views
 
     Note that you can only use certain combinations to set layout.  For
@@ -221,7 +262,7 @@ SC.View.reopen(
     @returns {Boolean} YES if fixed, NO otherwise
     @test in layoutStyle
   */
-  isFixedLayout: function() {
+  isFixedLayout: function () {
     return this.get('isFixedPosition') && this.get('isFixedSize');
   }.property('isFixedPosition', 'isFixedSize').cacheable(),
 
@@ -233,7 +274,7 @@ SC.View.reopen(
     @returns {Boolean} YES if fixed, NO otherwise
     @test in layoutStyle
   */
-  isFixedPosition: function() {
+  isFixedPosition: function () {
     var layout = this.get('layout'),
         ret;
 
@@ -245,7 +286,7 @@ SC.View.reopen(
 
     // The position may appear fixed, but only if none of the values are percentages.
     if (ret) {
-      ret = ( !SC.isPercentage(layout.top) && !SC.isPercentage(layout.left) );
+      ret = (!SC.isPercentage(layout.top) && !SC.isPercentage(layout.left));
     }
 
     return ret;
@@ -271,7 +312,7 @@ SC.View.reopen(
 
     // The size may appear fixed, but only if none of the values are percentages.
     if (ret) {
-      ret = ( !SC.isPercentage(layout.width) && !SC.isPercentage(layout.height) );
+      ret = (!SC.isPercentage(layout.width) && !SC.isPercentage(layout.height));
     }
 
     return ret;
@@ -294,28 +335,32 @@ SC.View.reopen(
     @returns {Rect} converted frame
     @test in convertFrames
   */
-  convertFrameToView: function(frame, targetView) {
-    var myX=0, myY=0, targetX=0, targetY=0, view = this, f ;
+  convertFrameToView: function (frame, targetView) {
+    var myX = 0, myY = 0, targetX = 0, targetY = 0, view = this, f;
 
     // walk up this side
     while (view) {
-      f = view.get('frame'); myX += f.x; myY += f.y ;
-      view = view.get('layoutView') ;
+      f = view.get('frame');
+      myX += f.x;
+      myY += f.y;
+      view = view.get('layoutView');
     }
 
     // walk up other size
     if (targetView) {
-      view = targetView ;
+      view = targetView;
       while (view) {
-        f = view.get('frame'); targetX += f.x; targetY += f.y ;
-        view = view.get('layoutView') ;
+        f = view.get('frame');
+        targetX += f.x;
+        targetY += f.y;
+        view = view.get('layoutView');
       }
     }
 
     // now we can figure how to translate the origin.
-    myX = frame.x + myX - targetX ;
-    myY = frame.y + myY - targetY ;
-    return { x: myX, y: myY, width: frame.width, height: frame.height } ;
+    myX = frame.x + myX - targetX;
+    myY = frame.y + myY - targetY;
+    return { x: myX, y: myY, width: frame.width, height: frame.height };
   },
 
   /**
@@ -334,29 +379,32 @@ SC.View.reopen(
     @returns {Rect} converted frame
     @test in converFrames
   */
-  convertFrameFromView: function(frame, targetView) {
-    var myX=0, myY=0, targetX=0, targetY=0, view = this, f ;
+  convertFrameFromView: function (frame, targetView) {
+    var myX = 0, myY = 0, targetX = 0, targetY = 0, view = this, f;
 
     // walk up this side
     //Note: Intentional assignment of variable f
     while (view && (f = view.get('frame'))) {
-      myX += f.x; myY += f.y ;
-      view = view.get('parentView') ;
+      myX += f.x;
+      myY += f.y;
+      view = view.get('parentView');
     }
 
     // walk up other size
     if (targetView) {
-      view = targetView ;
-      while(view) {
-        f = view.get('frame'); targetX += f.x; targetY += f.y ;
-        view = view.get('parentView') ;
+      view = targetView;
+      while (view) {
+        f = view.get('frame');
+        targetX += f.x;
+        targetY += f.y;
+        view = view.get('parentView');
       }
     }
 
     // now we can figure how to translate the origin.
-    myX = frame.x - myX + targetX ;
-    myY = frame.y - myY + targetY ;
-    return { x: myX, y: myY, width: frame.width, height: frame.height } ;
+    myX = frame.x - myX + targetX;
+    myY = frame.y - myY + targetY;
+    return { x: myX, y: myY, width: frame.width, height: frame.height };
   },
 
   /**
@@ -368,24 +416,30 @@ SC.View.reopen(
 
     @returns {Boolean}
   */
-  scrollToVisible: function() {
+  scrollToVisible: function () {
     var pv = this.get('parentView');
-    while(pv && !pv.get('isScrollable')) { pv = pv.get('parentView'); }
+    while (pv && !pv.get('isScrollable')) { pv = pv.get('parentView'); }
 
     // found view, first make it scroll itself visible then scroll this.
     if (pv) {
       pv.scrollToVisible();
       return pv.scrollToVisible(this);
     } else {
-      return NO ;
+      return NO;
     }
   },
 
-  _adjustForBorder: function(frame, layout){
-    var borderTop = ((layout.borderTop !== undefined) ? layout.borderTop : layout.border) || 0,
-        borderLeft = ((layout.borderLeft !== undefined) ? layout.borderLeft : layout.border) || 0,
-        borderBottom = ((layout.borderBottom !== undefined) ? layout.borderBottom : layout.border) || 0,
-        borderRight = ((layout.borderRight !== undefined) ? layout.borderRight : layout.border) || 0;
+  /** @private */
+  _effectiveBorderFor: function (layoutName, layout) {
+    return ((layout[layoutName] !== undefined) ? layout[layoutName] : layout.border) || 0;
+  },
+
+  /** @private */
+  _adjustForBorder: function (frame, layout) {
+    var borderTop = this._effectiveBorderFor('borderTop', layout),
+        borderLeft = this._effectiveBorderFor('borderLeft', layout),
+        borderBottom = this._effectiveBorderFor('borderBottom', layout),
+        borderRight = this._effectiveBorderFor('borderRight', layout);
 
     frame.x += borderLeft; // The border on the left pushes the frame to the right
     frame.y += borderTop; // The border on the top pushes the frame down
@@ -410,7 +464,7 @@ SC.View.reopen(
     @param {Rect} pdim the projected parent dimensions
     @returns {Rect} the computed frame
   */
-  computeFrameWithParentFrame: function(original, pdim) {
+  computeFrameWithParentFrame: function (original, pdim) {
     var f, layout = this.get('layout');
 
     // We can't predict the frame for static layout, so just return the view's
@@ -435,124 +489,124 @@ SC.View.reopen(
         lcY = layout.centerY;
 
     if (lW === AUTO) {
-      error = SC.Error.desc(("%@.layout() cannot use width:auto if "+
-                "staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
-      SC.Logger.error(error.toString()) ;
-      throw error ;
+      error = SC.Error.desc(("%@.layout() cannot use width:auto if " +
+        "staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
+      SC.Logger.error(error.toString());
+      throw error;
     }
 
     if (lH === AUTO) {
-       error = SC.Error.desc(("%@.layout() cannot use height:auto if "+
-                "staticLayout is disabled").fmt(this),"%@".fmt(this), -1);
-       SC.Logger.error(error.toString())  ;
-      throw error ;
+      error = SC.Error.desc(("%@.layout() cannot use height:auto if " +
+        "staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
+      SC.Logger.error(error.toString());
+      throw error;
     }
 
-    if (!pdim) { pdim = this.computeParentDimensions(layout) ; }
+    if (!pdim) { pdim = this.computeParentDimensions(layout); }
     dH = pdim.height;
     dW = pdim.width;
 
     // handle left aligned and left/right
     if (!SC.none(lL)) {
-      if(SC.isPercentage(lL)){
-        f.x = dW*lL;
-      }else{
-        f.x = lL ;
+      if (SC.isPercentage(lL)) {
+        f.x = dW * lL;
+      } else {
+        f.x = lL;
       }
       if (lW !== undefined) {
-        if(lW === AUTO) { f.width = AUTO ; }
-        else if(SC.isPercentage(lW)) { f.width = dW*lW ; }
-        else { f.width = lW ; }
+        if (lW === AUTO) { f.width = AUTO; }
+        else if (SC.isPercentage(lW)) { f.width = dW * lW; }
+        else { f.width = lW; }
       } else { // better have lR!
-        f.width = dW - f.x ;
-        if(lR && SC.isPercentage(lR)) { f.width = f.width - (lR*dW) ; }
-        else { f.width = f.width - (lR || 0) ; }
+        f.width = dW - f.x;
+        if (lR && SC.isPercentage(lR)) { f.width = f.width - (lR * dW); }
+        else { f.width = f.width - (lR || 0); }
       }
     // handle right aligned
     } else if (!SC.none(lR)) {
       if (SC.none(lW)) {
         if (SC.isPercentage(lR)) {
-          f.width = dW - (dW*lR) ;
+          f.width = dW - (dW * lR);
         }
-        else f.width = dW - lR ;
-        f.x = 0 ;
+        else f.width = dW - lR;
+        f.x = 0;
       } else {
-        if(lW === AUTO) f.width = AUTO ;
-        else if(SC.isPercentage(lW)) f.width = dW*lW ;
-        else f.width = (lW || 0) ;
-        if (SC.isPercentage(lW)) f.x = dW - (lR*dW) - f.width ;
-        else f.x = dW - lR - f.width ;
+        if (lW === AUTO) f.width = AUTO;
+        else if (SC.isPercentage(lW)) f.width = dW * lW;
+        else f.width = (lW || 0);
+        if (SC.isPercentage(lW)) f.x = dW - (lR * dW) - f.width;
+        else f.x = dW - lR - f.width;
       }
 
     // handle centered
     } else if (!SC.none(lcX)) {
-      if(lW === AUTO) f.width = AUTO ;
-      else if (SC.isPercentage(lW)) f.width = lW*dW ;
-      else f.width = (lW || 0) ;
-      if(SC.isPercentage(lcX)) f.x = (dW - f.width)/2 + (lcX*dW) ;
-      else f.x = (dW - f.width)/2 + lcX ;
+      if (lW === AUTO) f.width = AUTO;
+      else if (SC.isPercentage(lW)) f.width = lW * dW;
+      else f.width = (lW || 0);
+      if (SC.isPercentage(lcX)) f.x = (dW - f.width) / 2 + (lcX * dW);
+      else f.x = (dW - f.width) / 2 + lcX;
     } else {
-      f.x = 0 ; // fallback
+      f.x = 0; // fallback
       if (SC.none(lW)) {
-        f.width = dW ;
+        f.width = dW;
       } else {
-        if(lW === AUTO) f.width = AUTO ;
-        if (SC.isPercentage(lW)) f.width = lW*dW ;
-        else f.width = (lW || 0) ;
+        if (lW === AUTO) f.width = AUTO;
+        if (SC.isPercentage(lW)) f.width = lW * dW;
+        else f.width = (lW || 0);
       }
     }
 
     // handle top aligned and top/bottom
     if (!SC.none(lT)) {
-      if(SC.isPercentage(lT)) f.y = lT*dH ;
-      else f.y = lT ;
+      if (SC.isPercentage(lT)) f.y = lT * dH;
+      else f.y = lT;
       if (lH !== undefined) {
-        if(lH === AUTO) f.height = AUTO ;
-        else if(SC.isPercentage(lH)) f.height = lH*dH ;
-        else f.height = lH ;
+        if (lH === AUTO) f.height = AUTO;
+        else if (SC.isPercentage(lH)) f.height = lH * dH;
+        else f.height = lH;
       } else { // better have lB!
-        if(lB && SC.isPercentage(lB)) f.height = dH - f.y - (lB*dH) ;
-        else f.height = dH - f.y - (lB || 0) ;
+        if (lB && SC.isPercentage(lB)) f.height = dH - f.y - (lB * dH);
+        else f.height = dH - f.y - (lB || 0);
       }
 
     // handle bottom aligned
     } else if (!SC.none(lB)) {
       if (SC.none(lH)) {
-        if (SC.isPercentage(lB)) f.height = dH - (lB*dH) ;
-        else f.height = dH - lB ;
-        f.y = 0 ;
+        if (SC.isPercentage(lB)) f.height = dH - (lB * dH);
+        else f.height = dH - lB;
+        f.y = 0;
       } else {
-        if(lH === AUTO) f.height = AUTO ;
-        if (lH && SC.isPercentage(lH)) f.height = lH*dH ;
-        else f.height = (lH || 0) ;
-        if (SC.isPercentage(lB)) f.y = dH - (lB*dH) - f.height ;
-        else f.y = dH - lB - f.height ;
+        if (lH === AUTO) f.height = AUTO;
+        if (lH && SC.isPercentage(lH)) f.height = lH * dH;
+        else f.height = (lH || 0);
+        if (SC.isPercentage(lB)) f.y = dH - (lB * dH) - f.height;
+        else f.y = dH - lB - f.height;
       }
 
     // handle centered
     } else if (!SC.none(lcY)) {
-      if(lH === AUTO) f.height = AUTO ;
-      if (lH && SC.isPercentage(lH)) f.height = lH*dH ;
-      else f.height = (lH || 0) ;
-      if (SC.isPercentage(lcY)) f.y = (dH - f.height)/2 + (lcY*dH) ;
-      else f.y = (dH - f.height)/2 + lcY ;
+      if (lH === AUTO) f.height = AUTO;
+      if (lH && SC.isPercentage(lH)) f.height = lH * dH;
+      else f.height = (lH || 0);
+      if (SC.isPercentage(lcY)) f.y = (dH - f.height) / 2 + (lcY * dH);
+      else f.y = (dH - f.height) / 2 + lcY;
 
     // fallback
     } else {
-      f.y = 0 ; // fallback
+      f.y = 0; // fallback
       if (SC.none(lH)) {
-        f.height = dH ;
+        f.height = dH;
       } else {
-        if(lH === AUTO) f.height = AUTO ;
-        if (SC.isPercentage(lH)) f.height = lH*dH ;
-        else f.height = lH || 0 ;
+        if (lH === AUTO) f.height = AUTO;
+        if (SC.isPercentage(lH)) f.height = lH * dH;
+        else f.height = lH || 0;
       }
     }
 
     f.x = Math.floor(f.x);
     f.y = Math.floor(f.y);
-    if(f.height !== AUTO) f.height = Math.floor(f.height);
-    if(f.width !== AUTO) f.width = Math.floor(f.width);
+    if (f.height !== AUTO) f.height = Math.floor(f.height);
+    if (f.width !== AUTO) f.width = Math.floor(f.width);
 
     // if width or height were set to auto and we have a layer, try lookup
     if (f.height === AUTO || f.width === AUTO) {
@@ -573,30 +627,30 @@ SC.View.reopen(
 
     // make sure the width/height fix min/max...
     if (!SC.none(layout.maxHeight) && (f.height > layout.maxHeight)) {
-      f.height = layout.maxHeight ;
+      f.height = layout.maxHeight;
     }
 
     if (!SC.none(layout.minHeight) && (f.height < layout.minHeight)) {
-      f.height = layout.minHeight ;
+      f.height = layout.minHeight;
     }
 
     if (!SC.none(layout.maxWidth) && (f.width > layout.maxWidth)) {
-      f.width = layout.maxWidth ;
+      f.width = layout.maxWidth;
     }
 
     if (!SC.none(layout.minWidth) && (f.width < layout.minWidth)) {
-      f.width = layout.minWidth ;
+      f.width = layout.minWidth;
     }
 
     // make sure width/height are never < 0
-    if (f.height < 0) f.height = 0 ;
-    if (f.width < 0) f.width = 0 ;
+    if (f.height < 0) f.height = 0;
+    if (f.width < 0) f.width = 0;
 
     return f;
   }.enhance(),
 
-  computeParentDimensions: function(frame) {
-    var ret, pv = this.get('parentView'), pf = (pv) ? pv.get('frame') : null ;
+  computeParentDimensions: function (frame) {
+    var ret, pv = this.get('parentView'), pf = (pv) ? pv.get('frame') : null;
 
     if (pf) {
       ret = { width: pf.width, height: pf.height };
@@ -607,27 +661,26 @@ SC.View.reopen(
         height: (f.top || 0) + (f.height || 0) + (f.bottom || 0)
       };
     }
-    return ret ;
+    return ret;
   },
 
   /**
     The frame of the view including the borders
   */
-  borderFrame: function(){
+  borderFrame: function () {
     var layout = this.get('layout'),
         frame = this.get('frame'),
-        defaultBorder = layout.border,
-        topBorder = ((layout.topBorder !== undefined) ? layout.topBorder : layout.border) || 0,
-        rightBorder = ((layout.rightBorder !== undefined) ? layout.rightBorder : layout.border) || 0,
-        bottomBorder = ((layout.bottomBorder !== undefined) ? layout.bottomBorder : layout.border) || 0,
-        leftBorder = ((layout.leftBorder !== undefined) ? layout.leftBorder : layout.border) || 0;
-
-    return {
-      x: frame.x - leftBorder,
-      y: frame.y - topBorder,
-      width: frame.width + leftBorder + rightBorder,
-      height: frame.height + topBorder + bottomBorder
-    };
+        borderTop = this._effectiveBorderFor('borderTop', layout),
+        borderRight = this._effectiveBorderFor('borderRight', layout),
+        borderBottom = this._effectiveBorderFor('borderBottom', layout),
+        borderLeft = this._effectiveBorderFor('borderLeft', layout);
+
+    return frame ? {
+      x: frame.x - borderLeft,
+      y: frame.y - borderTop,
+      width: frame.width + borderLeft + borderRight,
+      height: frame.height + borderTop + borderBottom
+    } : null;
   }.property('frame').cacheable(),
 
   /**
@@ -640,14 +693,14 @@ SC.View.reopen(
     @returns {void}
     @test in viewDidResize
   */
-  parentViewDidResize: function() {
+  parentViewDidResize: function () {
     var positionMayHaveChanged,
       sizeMayHaveChanged;
 
     // If this view uses static layout, our "do we think the frame changed?"
     // result of isFixedLayout is not applicable and we simply have to assume
     // that the frame may have changed.
-    sizeMayHaveChanged = this.useStaticLayout || !this.get('isFixedSize');
+    sizeMayHaveChanged = this.get('useStaticLayout') || !this.get('isFixedSize');
     positionMayHaveChanged = !this.get('isFixedPosition');
 
     if (sizeMayHaveChanged) {
@@ -659,8 +712,6 @@ SC.View.reopen(
     }
   },
 
-
-
   /**
     This method is invoked on your view when the view resizes due to a layout
     change or potentially due to the parent view resizing (if your view’s size
@@ -673,12 +724,12 @@ SC.View.reopen(
 
     @returns {void}
   */
-  viewDidResize: function() {
+  viewDidResize: function () {
     this._viewFrameDidChange();
 
     // Also notify our children.
-    var cv = this.childViews, len, idx, view ;
-    for (idx=0; idx<(len= cv.length); ++idx) {
+    var cv = this.childViews, len, idx, view;
+    for (idx = 0; idx < (len = cv.length); ++idx) {
       view = cv[idx];
       view.tryToPerform('parentViewDidResize');
     }
@@ -690,9 +741,9 @@ SC.View.reopen(
     This notifies the view that its frame property has changed,
     then propagates those changes to its child views.
   */
-  _viewFrameDidChange: function() {
+  _viewFrameDidChange: function () {
     this.notifyPropertyChange('frame');
-    this._sc_view_clippingFrameDidChange();
+    this._callOnChildViews('_sc_view_clippingFrameDidChange');
   },
 
   // Implementation note: As a general rule, paired method calls, such as
@@ -702,7 +753,7 @@ SC.View.reopen(
   //
   // -> View A.beginXXX()
   //   -> View B.beginXXX()
-  //     -> View C.begitXXX()
+  //     -> View C.beginXXX()
   //   -> View D.beginXXX()
   //
   // ...later on, endXXX methods are called in reverse order of beginXXX...
@@ -722,17 +773,17 @@ SC.View.reopen(
     @returns {SC.View} receiver
     @test in viewDidResize
   */
-  beginLiveResize: function() {
+  beginLiveResize: function () {
     // call before children have been notified...
-    if (this.willBeginLiveResize) this.willBeginLiveResize() ;
+    if (this.willBeginLiveResize) this.willBeginLiveResize();
 
     // notify children in order
-    var ary = this.get('childViews'), len = ary.length, idx, view ;
-    for (idx=0; idx<len; ++idx) {
-      view = ary[idx] ;
+    var ary = this.get('childViews'), len = ary.length, idx, view;
+    for (idx = 0; idx < len; ++idx) {
+      view = ary[idx];
       if (view.beginLiveResize) view.beginLiveResize();
     }
-    return this ;
+    return this;
   },
 
   /**
@@ -743,25 +794,25 @@ SC.View.reopen(
     @returns {SC.View} receiver
     @test in viewDidResize
   */
-  endLiveResize: function() {
+  endLiveResize: function () {
     // notify children in *reverse* order
-    var ary = this.get('childViews'), len = ary.length, idx, view ;
-    for (idx=len-1; idx>=0; --idx) { // loop backwards
-      view = ary[idx] ;
-      if (view.endLiveResize) view.endLiveResize() ;
+    var ary = this.get('childViews'), len = ary.length, idx, view;
+    for (idx = len - 1; idx >= 0; --idx) { // loop backwards
+      view = ary[idx];
+      if (view.endLiveResize) view.endLiveResize();
     }
 
     // call *after* all children have been notified...
-    if (this.didEndLiveResize) this.didEndLiveResize() ;
-    return this ;
+    if (this.didEndLiveResize) this.didEndLiveResize();
+    return this;
   },
 
   /**
     The view responsible for laying out this view.  The default version
     returns the current parent view.
   */
-  layoutView: function() {
-    return this.get('parentView') ;
+  layoutView: function () {
+    return this.get('parentView');
   }.property('parentView').cacheable(),
 
   /**
@@ -777,87 +828,77 @@ SC.View.reopen(
 
     @returns {SC.View} receiver
   */
-  layoutDidChange: function() {
-    // Did our layout change in a way that could cause us to be resized?  If
-    // not, then there's no need to invalidate the frames of our child views.
-    var previousLayout = this._previousLayout,
-        currentLayout  = this.get('layout'),
-        didResize      = YES,
-        previousWidth, previousHeight, currentWidth, currentHeight;
-
+  layoutDidChange: function () {
+    var currentLayout = this.get('layout');
 
-    // Handle old style rotation
+    // Handle old style rotation.
     if (!SC.none(currentLayout.rotate)) {
+      //@if (debug)
+      SC.Logger.warn('Developer Warning: Please set rotateX instead of rotate.');
+      //@endif
       if (SC.none(currentLayout.rotateX)) {
         currentLayout.rotateX = currentLayout.rotate;
-        SC.Logger.warn('Please set rotateX instead of rotate');
       }
-    }
-    if (!SC.none(currentLayout.rotateX)) {
-      currentLayout.rotate = currentLayout.rotateX;
-    } else {
       delete currentLayout.rotate;
     }
 
-    var animations = currentLayout.animations;
-    if (animations) {
-      if (!SC.none(animations.rotate)) {
-        if (SC.none(animations.rotateX)) {
-          animations.rotateX = animations.rotate;
-          SC.Logger.warn('Please animate rotateX instead of rotate');
-        }
-      }
-      if (!SC.none(animations.rotateX)) {
-        animations.rotate = animations.rotateX;
-      } else {
-        delete animations.rotate;
+    // Optimize notifications depending on if we resized or just moved.
+    this._checkForResize();
+
+    // Notify layoutView/parentView, unless we are transitioning.
+    var layoutView = this.get('layoutView');
+    if (layoutView) {
+      layoutView.set('childViewsNeedLayout', YES);
+      layoutView.layoutDidChangeFor(this);
+
+      // Check if childViewsNeedLayout is still true.
+      if (layoutView.get('childViewsNeedLayout')) {
+        layoutView.invokeOnce(layoutView.layoutChildViewsIfNeeded);
       }
+    } else {
+      this.invokeOnce(this.updateLayout);
     }
 
-    if (previousLayout  &&  previousLayout !== currentLayout) {
-      // This is a simple check to see whether we think the view may have
-      // resized.  We could look for a number of cases, but for now we'll
-      // handle only one simple case:  if the width and height are both
-      // specified, and they have not changed.
-      previousWidth = previousLayout.width;
-      if (previousWidth !== undefined) {
-        currentWidth = currentLayout.width;
-        if (previousWidth === currentWidth) {
-          previousHeight = previousLayout.height;
-          if (previousLayout !== undefined) {
-            currentHeight = currentLayout.height;
-            if (previousHeight === currentHeight) didResize = NO;
-          }
-        }
+    return this;
+  },
+
+  /** @private */
+  _checkForResize: function () {
+    // Did our layout change in a way that could cause us to be resized?  If
+    // not, then there's no need to invalidate the frames of our child views.
+    var previousLayout = this._previousLayout,
+        currentLayout  = this.get('layout'),
+        didResize = true;
+
+    // We test the new layout to see if we believe it will affect the view's frame.
+    // Since all the child view frames may depend on the parent's frame, it's
+    // best only to notify a frame change when it actually happens.
+    if (previousLayout && !SC.none(previousLayout.width) && !SC.none(previousLayout.height) && previousLayout !== currentLayout) {
+      var currentTest,
+        previousTest;
+
+      // This code already exists in _adjustForBorder, so we use it to test the effective width/height.
+      // TODO: consider checking min/max sizes
+      previousTest = this._adjustForBorder({ x: 0, y: 0, width: previousLayout.width, height: previousLayout.height },
+        previousLayout);
+      currentTest = this._adjustForBorder({ x: 0, y: 0, width: currentLayout.width || 0, height: currentLayout.height || 0 },
+        currentLayout);
+
+      if (previousTest.width === currentTest.width && previousTest.height === currentTest.height) {
+        didResize = false;
       }
     }
 
-    this.beginPropertyChanges() ;
-    this.notifyPropertyChange('hasAcceleratedLayer');
-    this.notifyPropertyChange('layoutStyle') ;
     if (didResize) {
       this.viewDidResize();
-    }
-    else {
-      // Even if we didn't resize, our frame might have changed.
-      // viewDidResize() handles this in the other case.
+    } else {
+      // Even if we didn't resize, our frame may have changed
+      // TODO: consider checking for position changes by testing the resulting frame against the cached frame.  This is difficult to do.
       this._viewFrameDidChange();
     }
-    this.endPropertyChanges() ;
-
-    // notify layoutView...
-    var layoutView = this.get('layoutView');
-    if (layoutView) {
-      layoutView.set('childViewsNeedLayout', YES);
-      layoutView.layoutDidChangeFor(this) ;
-      if (layoutView.get('childViewsNeedLayout')) {
-        layoutView.invokeOnce(layoutView.layoutChildViewsIfNeeded);
-      }
-    }
 
+    // Cache the last layout to fine-tune notifications when the layout changes.
     this._previousLayout = currentLayout;
-
-    return this ;
   },
 
   /**
@@ -865,7 +906,7 @@ SC.View.reopen(
     views.  Normally this property is set automatically whenever the layout
     property for a child view changes.
 
-    @property {Boolean}
+    @type Boolean
   */
   childViewsNeedLayout: NO,
 
@@ -888,8 +929,10 @@ SC.View.reopen(
     @param {SC.View} childView the view whose layout has changed.
     @returns {void}
   */
-  layoutDidChangeFor: function(childView) {
-    var set = this._needLayoutViews ;
+  layoutDidChangeFor: function (childView) {
+    var set = this._needLayoutViews;
+
+    // Track this view.
     if (!set) set = this._needLayoutViews = SC.CoreSet.create();
     set.add(childView);
   },
@@ -898,17 +941,18 @@ SC.View.reopen(
     Called your layout method if the view currently needs to layout some
     child views.
 
-    @param {Boolean} isVisible if true assume view is visible even if it is not.
+    @param {Boolean} force if true assume view is visible even if it is not.
     @returns {SC.View} receiver
     @test in layoutChildViews
   */
-  layoutChildViewsIfNeeded: function(isVisible) {
-    if (!isVisible) isVisible = this.get('isVisibleInWindow');
-    if (isVisible && this.get('childViewsNeedLayout')) {
+  layoutChildViewsIfNeeded: function (force) {
+    if (this.get('childViewsNeedLayout')) {
+      this.layoutChildViews(force);
+
       this.set('childViewsNeedLayout', NO);
-      this.layoutChildViews();
     }
-    return this ;
+
+    return this;
   },
 
   /**
@@ -917,19 +961,90 @@ SC.View.reopen(
     own layout updating method if you want, though usually the better option
     is to override the layout method from the parent view.
 
-    The default implementation of this method simply calls the renderLayout()
+    The default implementation of this method simply calls the updateLayout()
     method on the views that need layout.
 
+    @param {Boolean} force Force the update to the layer's layout style immediately even if the view is not in a shown state.  Otherwise the style will be updated when the view returns to a shown state.
     @returns {void}
   */
-  layoutChildViews: function() {
-    var set = this._needLayoutViews,
-        len = set ? set.length : 0,
-        i;
-    for (i = 0; i < len; ++i) {
-      set[i].updateLayout();
+  layoutChildViews: function (force) {
+    var childViewLayout = this.childViewLayout,
+      set, len, i;
+
+    // Allow the child view layout plugin to layout all child views.
+    if (childViewLayout) {
+      // Adjust all other child views right now.
+      // Note: this will add the affected child views to the set so they will be updated only once in this run loop
+      childViewLayout.layoutChildViews(this);
+    }
+
+    // Retreive these values after they may have been updated by adjustments by
+    // the childViewLayout plugin.
+    set = this._needLayoutViews;
+    if (set) {
+      for (i = 0, len = set.length; i < len; ++i) {
+        set[i].updateLayout(force);
+      }
+
+      set.clear(); // reset & reuse
+    }
+  },
+
+  /** @private Called when the child view layout plugin or options change. */
+  _cvl_childViewLayoutDidChange: function () {
+    this.set('childViewsNeedLayout', true);
+
+    // Filter the input channel.
+    this.invokeOnce(this.layoutChildViewsIfNeeded);
+  },
+
+  /** @private Called when the child views change. */
+  _cvl_childViewsDidChange: function () {
+    this._cvl_teardownChildViewsLiveLayout();
+    this._cvl_setupChildViewsLiveLayout();
+
+    this.set('childViewsNeedLayout', true);
+
+    // Filter the input channel.
+    this.invokeOnce(this.layoutChildViewsIfNeeded);
+  },
+
+  /** @private Add observers to the child views for automatic child view layout. */
+  _cvl_setupChildViewsLiveLayout: function () {
+    var childViewLayout = this.childViewLayout,
+      childViews,
+      childLayoutProperties = childViewLayout.childLayoutProperties || [];
+
+    // Create a reference to the current child views so that we can clean them if they change.
+    childViews = this._cvl_childViews = this.get('childViews');
+    for (var i = 0, len = childLayoutProperties.length; i < len; i++) {
+      var observedProperty = childLayoutProperties[i];
+
+      for (var j = 0, jlen = childViews.get('length'); j < jlen; j++) {
+        var childView = childViews.objectAt(j);
+        if (!childView.get('useAbsoluteLayout') && !childView.get('useStaticLayout')) {
+          childView.addObserver(observedProperty, this, this._cvl_childViewLayoutDidChange);
+        }
+      }
+    }
+  },
+
+  /** @private Remove observers from the child views for automatic child view layout. */
+  _cvl_teardownChildViewsLiveLayout: function () {
+    var childViewLayout = this.childViewLayout,
+      childViews = this._cvl_childViews || [],
+      childLayoutProperties = childViewLayout.childLayoutProperties || [];
+
+    for (var i = 0, len = childLayoutProperties.length; i < len; i++) {
+      var observedProperty = childLayoutProperties[i];
+
+      for (var j = 0, jlen = childViews.get('length'); j < jlen; j++) {
+        var childView = childViews.objectAt(j);
+        if (!childView.get('useAbsoluteLayout') && !childView.get('useStaticLayout')) {
+          childView.removeObserver(observedProperty, this, this._cvl_childViewLayoutDidChange);
+        }
+      }
     }
-    set.clear(); // reset & reuse
   },
 
   /**
@@ -941,22 +1056,14 @@ SC.View.reopen(
     You will not usually override this method, but you may call it if you
     implement layoutChildViews() in a view yourself.
 
+    @param {Boolean} force Force the update to the layer's layout style immediately even if the view is not in a shown state.  Otherwise the style will be updated when the view returns to a shown state.
     @returns {SC.View} receiver
     @test in layoutChildViews
   */
-  updateLayout: function() {
-    var layer = this.get('layer'), context;
-    if (layer) {
-      context = this.renderContext(layer);
-      this.renderLayout(context, NO);
-      context.update();
-
-      // If this view uses static layout, then notify if the frame changed.
-      // (viewDidResize will do a comparison)
-      if (this.useStaticLayout) this.viewDidResize();
-    }
-    layer = null ;
-    return this ;
+  updateLayout: function (force) {
+    this._doUpdateLayout(force);
+
+    return this;
   },
 
   /**
@@ -969,25 +1076,245 @@ SC.View.reopen(
     @returns {void}
     @test in layoutChildViews
   */
-  renderLayout: function(context, firstTime) {
-    this.get('layoutStyleCalculator').willRenderAnimations();
-    context.addStyle(this.get('layoutStyle'));
-    this.get('layoutStyleCalculator').didRenderAnimations();
+  renderLayout: function (context) {
+    context.setStyle(this.get('layoutStyle'));
   },
 
-  _renderLayerSettings: function(original, context, firstTime) {
-    original(context, firstTime);
-    this.renderLayout(context, firstTime);
-  }.enhance(),
-
-  applyAttributesToContext: function(original, context) {
+  applyAttributesToContext: function (original, context) {
     original(context);
 
+    // Have to pass 'true' for second argument for legacy.
+    this.renderLayout(context, true);
+
     if (this.get('useStaticLayout')) { context.addClass('sc-static-layout'); }
-    if (this.get('backgroundColor')) {
-      context.css('backgroundColor', this.get('backgroundColor'));
+
+    var backgroundColor = this.get('backgroundColor');
+    if (backgroundColor) {
+      context.setStyle('backgroundColor', backgroundColor);
+    }
+  }.enhance(),
+
+  // ------------------------------------------------------------------------
+  // Child View Layouts
+  //
+
+  /**
+    The child view layout plugin to use when laying out child views.
+
+    You can set this property to a child layout plugin object to
+    automatically set and adjust the layouts of this view's child views
+    according to some specific layout style.  For instance, SproutCore includes
+    two such plugins, SC.View.VERTICAL_STACK and SC.View.HORIZONTAL_STACK.
+
+    SC.View.VERTICAL_STACK will arrange child views in order in a vertical
+    stack, which only requires that the height of each child view be specified.
+    Likewise, SC.View.HORIZONTAL_STACK does the same in the horizontal
+    direction, which requires that the width of each child view be specified.
+
+    Where child layout plugins are extremely useful, besides simplifying
+    the amount of layout code you need to write, is that they can update the
+    layouts automatically as things change.  For more details and examples,
+    please see the documentation for SC.View.VERTICAL_STACK and
+    SC.View.HORIZONTAL_STACK.
+
+    To define your own child view layout plugin, simply create an object that
+    conforms to the SC.ChildViewLayoutProtocol protocol.
+
+    **Note** This should only be set once and is not bindable.
+
+    @type Object
+    @default null
+   */
+  childViewLayout: null,
+
+  /**
+    The options for the given child view layout plugin.
+
+    These options are specific to the current child layout plugin being used and
+    are used to modify the applied layouts.  For example, SC.View.VERTICAL_STACK
+    accepts options like:
+
+        childViewLayoutOptions: {
+          paddingAfter: 20,
+          paddingBefore: 20,
+          spacing: 10
+        }
+
+    To determine what options may be used for a given plugin and to see what the
+    default options are, please refer to the documentation for the child layout
+    plugin being used.
+
+    @type Object
+    @default null
+  */
+  childViewLayoutOptions: null,
+
+  /**
+    Whether the view and its child views should be monitored for changes that
+    affect the current child view layout.
+
+    When `true` and using a childViewLayout plugin, the view and its child views
+    will be observed for any changes that would affect the layout of all the
+    child views.  For example, if `isChildViewLayout` is true and using
+    SC.View.VERTICAL_STACK, if any child view's height or visibility changes
+    all of the child views will be re-adjusted.
+
+    If you only want to automatically layout the child views once, you can
+    set this to `false` to improve performance.
+
+    @type Boolean
+    @default true
+  */
+  isChildViewLayoutLive: true,
+
+  // ------------------------------------------------------------------------
+  // Statechart
+  //
+
+  /** @private Update this view's layout action. */
+  _doUpdateLayout: function (force) {
+    var isRendered = this.get('_isRendered'),
+      isVisibleInWindow = this.get('isVisibleInWindow'),
+      handled = true;
+
+    if (isRendered) {
+      if (isVisibleInWindow || force) {
+        // Only in the visible states do we allow updates without being forced.
+        this._doUpdateLayoutStyle();
+      } else {
+        // Otherwise mark the view as needing an update when we enter a shown state again.
+        this._layoutStyleNeedsUpdate = true;
+      }
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  /** @private */
+  _doUpdateLayoutStyle: function () {
+    var context;
+
+    context = this.renderContext(this.get('layer'));
+    context.setStyle(this.get('layoutStyle'));
+    context.update();
+
+    // Reset that an update is required.
+    this._layoutStyleNeedsUpdate = false;
+
+    // Notify updated.
+    this._updatedLayout();
+  },
+
+  /** @private Enhance. */
+  _executeQueuedUpdates: function (original) {
+    original();
+
+    // Update the layout style of the layer if necessary.
+    if (this._layoutStyleNeedsUpdate) {
+      this._doUpdateLayoutStyle();
+    }
+  }.enhance(),
+
+  /** @private Override: Notify on attached (avoids notify of frame changed). */
+  _notifyAttached: function () {
+    // If we are using static layout then we don't know the frame until appended to the document.
+    if (this.get('useStaticLayout') || !this.get('isFixedLayout')) {
+      // We call viewDidResize so that it calls parentViewDidResize on all child views.
+      this.viewDidResize();
     }
-  }.enhance()
+
+    // Notify.
+    if (this.didAppendToDocument) { this.didAppendToDocument(); }
+  },
+
+  /** @private Override: The 'adopted' event (uses _checkForResize so our childViews are notified if our frame changes). */
+  _adopted: function (beforeView) {
+    // Our frame may change once we've been adopted to a parent.
+    this._checkForResize();
+  },
+
+  /** @private Extension: The 'orphaned' event. */
+  _orphaned: function (oldParentView) {
+    sc_super();
+
+    // Our frame may change once we've been removed from a parent.
+    if (!this.isDestroyed) { this._checkForResize(); }
+  },
+
+  /** @private Extension: The 'updatedContent' event. */
+  _updatedContent: function () {
+    sc_super();
+
+    // If this view uses static layout, then notify that the frame (likely)
+    // changed.
+    if (this.get('useStaticLayout')) { this.viewDidResize(); }
+  },
+
+  /** @private The 'updatedLayout' event. */
+  _updatedLayout: function () {
+    // Notify.
+    this.didRenderAnimations();
+  },
+
+  // ------------------------------------------------------------------------
+  // Transitions
+  //
+
+  /**
+    The transition plugin to use when this view is moved or resized by adjusting
+    its layout.
+
+    SC.CoreView uses a pluggable transition architecture where the transition
+    setup, execution and cleanup can be handled by a plugin.  This allows you
+    to create complex transition animations and share them across all your views
+    with only a single line of code.
+
+    There are a number of pre-built transition adjust plugins available in
+    the SproutCore foundation framework:
+
+      SC.View.SMOOTH_ADJUST
+      SC.View.BOUNCE_ADJUST
+      SC.View.SPRING_ADJUST
+
+    To create a custom transition plugin simply create a regular JavaScript
+    object that conforms to the SC.ViewTransitionProtocol protocol.
+
+    NOTE: When creating custom transition adjust plugins, be aware that SC.View
+    will not call the `setup` method of the plugin, only the `run` method.
+
+    @type Object (SC.ViewTransitionProtocol)
+    @default null
+    @since Version 1.10
+  */
+  transitionAdjust: null,
+
+  /**
+    The options for the given `transitionAdjust` plugin.
+
+    These options are specific to the current transition plugin used and are
+    used to modify the transition animation.  To determine what options
+    may be used for a given plugin and to see what the default options are,
+    see the documentation for the transition plugin being used.
+
+    Most transitions will accept a duration and timing option, but may
+    also use other options.  For example, SC.View.BOUNCE_ADJUST accepts options
+    like:
+
+        transitionAdjustOptions: {
+          bounciness: 0.5, // how much the adjustment should bounce back each time
+          bounces: 4, // the number of bounces
+          duration: 0.25,
+          delay: 1
+        }
+
+    @type Object
+    @default null
+    @since Version 1.10
+  */
+  transitionAdjustOptions: null
+
 });
 
 SC.View.mixin(
@@ -996,7 +1323,7 @@ SC.View.mixin(
   /**
     Convert any layout to a Top, Left, Width, Height layout
   */
-  convertLayoutToAnchoredLayout: function(layout, parentFrame){
+  convertLayoutToAnchoredLayout: function (layout, parentFrame) {
     var ret = {top: 0, left: 0, width: parentFrame.width, height: parentFrame.height},
         pFW = parentFrame.width, pFH = parentFrame.height, //shortHand for parentDimensions
         lR = layout.right,
@@ -1011,14 +1338,14 @@ SC.View.mixin(
     // X Conversion
     // handle left aligned and left/right
     if (!SC.none(lL)) {
-      if(SC.isPercentage(lL)) ret.left = lL*pFW;
+      if (SC.isPercentage(lL)) ret.left = lL * pFW;
       else ret.left = lL;
       if (lW !== undefined) {
-        if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
-        else if(SC.isPercentage(lW)) ret.width = lW*pFW ;
-        else ret.width = lW ;
+        if (lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO;
+        else if (SC.isPercentage(lW)) ret.width = lW * pFW;
+        else ret.width = lW;
       } else {
-        if (lR && SC.isPercentage(lR)) ret.width = pFW - ret.left - (lR*pFW);
+        if (lR && SC.isPercentage(lR)) ret.width = pFW - ret.left - (lR * pFW);
         else ret.width = pFW - ret.left - (lR || 0);
       }
 
@@ -1028,14 +1355,14 @@ SC.View.mixin(
       // if no width, calculate it from the parent frame
       if (SC.none(lW)) {
         ret.left = 0;
-        if(lR && SC.isPercentage(lR)) ret.width = pFW - (lR*pFW);
+        if (lR && SC.isPercentage(lR)) ret.width = pFW - (lR * pFW);
         else ret.width = pFW - (lR || 0);
 
       // If has width, calculate the left anchor from the width and right and parent frame
       } else {
-        if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        if (lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO;
         else {
-          if (SC.isPercentage(lW)) ret.width = lW*pFW;
+          if (SC.isPercentage(lW)) ret.width = lW * pFW;
           else ret.width = lW;
           if (SC.isPercentage(lR)) ret.left = pFW - (ret.width + lR);
           else ret.left = pFW - (ret.width + lR);
@@ -1044,18 +1371,18 @@ SC.View.mixin(
 
     // handle centered
     } else if (!SC.none(lcX)) {
-      if(lW && SC.isPercentage(lW)) ret.width = (lW*pFW) ;
-      else ret.width = (lW || 0) ;
-      ret.left = ((pFW - ret.width)/2);
-      if (SC.isPercentage(lcX)) ret.left = ret.left + lcX*pFW;
+      if (lW && SC.isPercentage(lW)) ret.width = (lW * pFW);
+      else ret.width = (lW || 0);
+      ret.left = ((pFW - ret.width) / 2);
+      if (SC.isPercentage(lcX)) ret.left = ret.left + lcX * pFW;
       else ret.left = ret.left + lcX;
 
     // if width defined, assume left of zero
     } else if (!SC.none(lW)) {
       ret.left =  0;
-      if(lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+      if (lW === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO;
       else {
-        if(SC.isPercentage(lW)) ret.width = lW*pFW;
+        if (SC.isPercentage(lW)) ret.width = lW * pFW;
         else ret.width = lW;
       }
 
@@ -1066,21 +1393,21 @@ SC.View.mixin(
     }
 
     // handle min/max
-    if (layout.minWidth !== undefined) ret.minWidth = layout.minWidth ;
-    if (layout.maxWidth !== undefined) ret.maxWidth = layout.maxWidth ;
+    if (layout.minWidth !== undefined) ret.minWidth = layout.minWidth;
+    if (layout.maxWidth !== undefined) ret.maxWidth = layout.maxWidth;
 
     // Y Conversion
     // handle left aligned and top/bottom
     if (!SC.none(lT)) {
-      if(SC.isPercentage(lT)) ret.top = lT*pFH;
+      if (SC.isPercentage(lT)) ret.top = lT * pFH;
       else ret.top = lT;
       if (lH !== undefined) {
-        if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-        else if (SC.isPercentage(lH)) ret.height = lH*pFH;
-        else ret.height = lH ;
+        if (lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO;
+        else if (SC.isPercentage(lH)) ret.height = lH * pFH;
+        else ret.height = lH;
       } else {
         ret.height = pFH - ret.top;
-        if(lB && SC.isPercentage(lB)) ret.height = ret.height - (lB*pFH);
+        if (lB && SC.isPercentage(lB)) ret.height = ret.height - (lB * pFH);
         else ret.height = ret.height - (lB || 0);
       }
 
@@ -1090,34 +1417,34 @@ SC.View.mixin(
       // if no height, calculate it from the parent frame
       if (SC.none(lH)) {
         ret.top = 0;
-        if (lB && SC.isPercentage(lB)) ret.height = pFH - (lB*pFH);
+        if (lB && SC.isPercentage(lB)) ret.height = pFH - (lB * pFH);
         else ret.height = pFH - (lB || 0);
 
       // If has height, calculate the top anchor from the height and bottom and parent frame
       } else {
-        if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        if (lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO;
         else {
-          if (SC.isPercentage(lH)) ret.height = lH*pFH;
+          if (SC.isPercentage(lH)) ret.height = lH * pFH;
           else ret.height = lH;
           ret.top = pFH - ret.height;
-          if (SC.isPercentage(lB)) ret.top = ret.top - (lB*pFH);
+          if (SC.isPercentage(lB)) ret.top = ret.top - (lB * pFH);
           else ret.top = ret.top - lB;
         }
       }
 
     // handle centered
     } else if (!SC.none(lcY)) {
-      if(lH && SC.isPercentage(lH)) ret.height = (lH*pFH) ;
-      else ret.height = (lH || 0) ;
-      ret.top = ((pFH - ret.height)/2);
-      if(SC.isPercentage(lcY)) ret.top = ret.top + lcY*pFH;
+      if (lH && SC.isPercentage(lH)) ret.height = (lH * pFH);
+      else ret.height = (lH || 0);
+      ret.top = ((pFH - ret.height) / 2);
+      if (SC.isPercentage(lcY)) ret.top = ret.top + lcY * pFH;
       else ret.top = ret.top + lcY;
 
     // if height defined, assume top of zero
     } else if (!SC.none(lH)) {
       ret.top =  0;
-      if(lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
-      else if (SC.isPercentage(lH)) ret.height = lH*pFH;
+      if (lH === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO;
+      else if (SC.isPercentage(lH)) ret.height = lH * pFH;
       else ret.height = lH;
 
     // fallback, full height.
@@ -1126,16 +1453,16 @@ SC.View.mixin(
       ret.height = 0;
     }
 
-    if(ret.top) ret.top = Math.floor(ret.top);
-    if(ret.bottom) ret.bottom = Math.floor(ret.bottom);
-    if(ret.left) ret.left = Math.floor(ret.left);
-    if(ret.right) ret.right = Math.floor(ret.right);
-    if(ret.width !== SC.LAYOUT_AUTO) ret.width = Math.floor(ret.width);
-    if(ret.height !== SC.LAYOUT_AUTO) ret.height = Math.floor(ret.height);
+    if (ret.top) ret.top = Math.floor(ret.top);
+    if (ret.bottom) ret.bottom = Math.floor(ret.bottom);
+    if (ret.left) ret.left = Math.floor(ret.left);
+    if (ret.right) ret.right = Math.floor(ret.right);
+    if (ret.width !== SC.LAYOUT_AUTO) ret.width = Math.floor(ret.width);
+    if (ret.height !== SC.LAYOUT_AUTO) ret.height = Math.floor(ret.height);
 
     // handle min/max
-    if (layout.minHeight !== undefined) ret.minHeight = layout.minHeight ;
-    if (layout.maxHeight !== undefined) ret.maxHeight = layout.maxHeight ;
+    if (layout.minHeight !== undefined) ret.minHeight = layout.minHeight;
+    if (layout.maxHeight !== undefined) ret.maxHeight = layout.maxHeight;
 
     return ret;
   },
@@ -1143,7 +1470,7 @@ SC.View.mixin(
   /**
     For now can only convert Top/Left/Width/Height to a Custom Layout
   */
-  convertLayoutToCustomLayout: function(layout, layoutParams, parentFrame){
+  convertLayoutToCustomLayout: function (layout, layoutParams, parentFrame) {
     // TODO: [EG] Create Top/Left/Width/Height to a Custom Layout conversion
   }
 });