sproutcore 1.11.0.rc3 → 1.11.0

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/viewDidResize.js

@@ -55,29 +55,6 @@ test("parentViewDidResize should only be called when the parent's layout propert
   // equals(callCount, 2, 'parentViewDidResize should invoke twice');
 });
 
-/**
-  When a view's layout changes, _checkForResize determines whether the size has changed using a comparison of the previously
-  cached layout and the new (current) layout. If it seems that the view has resized, it calls `viewDidResize`. Previously
-  it would call viewDidResize and then update the _previousLayout cache afterward. This meant that any adjustments that
-  were triggered by viewDidResize (which would in turn call _checkForResize) would compare the new layout against the
-  previous previous layout, instead of just the previous layout.
-
-  Long story short, to ensure that _checkForResize is checking the current layout against the *last* layout, it's important
-  that the last layout, _previousLayout, is updated *before* continuing on.
-*/
-test("SC.View.prototype._checkForResize() updates the _previousLayout cache before calling viewDidResize", function () {
-  var view1 = SC.View.create({
-      layout: { width: 200, height: 200 },
-      viewDidResize: function () {
-        ok(this._previousLayout !== originalPreviousLayout, "The previous layout should not be the same anymore.");
-      }
-    }),
-    originalPreviousLayout;
-
-  originalPreviousLayout = view1.get('layout');
-  SC.run(function () { view1.adjust({ width: 100 }); });
-});
-
 test("The view's frame should only notify changes when its layout changes if the effective size or position actually change.", function () {
   var view2 = SC.View.create({
       frameCallCount: 0,

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

@@ -99,6 +99,14 @@ SC.CoreView.reopen(
   */
   createdByParent: false,
 
+  /** @deprecated Version 1.11.0 Please use parentView instead. */
+  owner: function () {
+    //@if(debug)
+    SC.warn("Developer Warning: The `owner` property of SC.View has been deprecated in favor of the `parentView`, which is the same value. Please use `parentView`.");
+    //@endif
+    return this.get('parentView');
+  }.property('parentView').cacheable(),
+
   /**
     The current pane.
 
@@ -1104,7 +1112,7 @@ SC.CoreView.reopen(
     This method is invoked whenever the clippingFrame changes, notifying
     each child view that its clippingFrame has also changed.
   */
-  _sc_view_clippingFrameDidChange: function () {
+  _sc_clippingFrameDidChange: function () {
     this.notifyPropertyChange('clippingFrame');
   },
 
@@ -1320,8 +1328,6 @@ SC.CoreView.reopen(
     // Orphan the view if adopted.
     this._doOrphan();
 
-    // TODO: Deprecate owner in this sense.
-    this.set('owner', null);
     delete this.page;
   },
 
@@ -1414,8 +1420,8 @@ SC.CoreView.reopen(
       // clone the hash that was given so we do not pollute it if it's being reused
       else { attrs = SC.clone(attrs); }
 
-      // Assign the owner, parentView & page to ourself.
-      attrs.owner = attrs.parentView = this;
+      // Assign the parentView & page to ourself.
+      attrs.parentView = this;
       if (!attrs.page) { attrs.page = this.page; }
 
       // Track that we created this view.
@@ -1430,12 +1436,11 @@ SC.CoreView.reopen(
       } else {
         view = view.create(attrs);
       }
-    // Assign the parentView & owner if the view is an instance.
+    // Assign the parentView if the view is an instance.
     // TODO: This should not be accepting view instances, for the purpose of lazy code elsewhere in the framework.
     //       We should ensure users of `createChildViews` are using appendChild and other manipulation methods.
     } else {
       view.set('parentView', this);
-      view.set('owner', this);
       view._adopted();
 
       if (!view.get('page')) { view.set('page', this.page); }
@@ -2292,8 +2297,8 @@ SC.View = SC.CoreView.extend(/** @scope SC.View.prototype */{
     // current frame (see original computeFrameWithParentFrame in views/view.js)
     if (this.get('useStaticLayout')) {
       f = sc_super();
-      f = f ? this._adjustForBorder(f, layout) : null;
-      f = f ? this._adjustForScale(f, layout) : null;
+      f = f ? this._sc_adjustForBorder(f, layout) : null;
+      f = f ? this._sc_adjustForScale(f, layout) : null;
       return f;
     }
 
@@ -2311,15 +2316,11 @@ SC.View = SC.CoreView.extend(/** @scope SC.View.prototype */{
         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;
+      SC.throw(("%@.layout() cannot use width:auto if staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
     }
 
     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;
+      SC.throw(("%@.layout() cannot use height:auto if staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
     }
 
     if (!pdim) { pdim = this.computeParentDimensions(layout); }
@@ -2440,7 +2441,7 @@ SC.View = SC.CoreView.extend(/** @scope SC.View.prototype */{
     // Okay we have all our numbers. Let's adjust them for things.
 
     // First, adjust for border.
-    f = this._adjustForBorder(f, layout);
+    f = this._sc_adjustForBorder(f, layout);
 
     // Make sure the width/height fix their min/max (note the inlining of SC.none for performance)...
     /*jshint eqnull:true */
@@ -2450,7 +2451,7 @@ SC.View = SC.CoreView.extend(/** @scope SC.View.prototype */{
     if ((layout.minWidth != null) && (f.width < layout.minWidth)) f.width = layout.minWidth;
 
     // Finally, adjust for scale.
-    f = this._adjustForScale(f, layout);
+    f = this._sc_adjustForScale(f, layout);
 
     return f;
   },

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

@@ -405,11 +405,6 @@ SC.View.reopen(
 
       // Always run the animation asynchronously so that the original layout is guaranteed to be applied to the DOM.
       this.invokeNext('_animate');
-
-      // Route.
-      if (this.get('viewState') === SC.CoreView.ATTACHED_SHOWN) {
-        this.set('viewState', SC.CoreView.ATTACHED_SHOWN_ANIMATING);
-      }
     } else if (!optionsDidChange) {
       this.invokeNext(function () {
         this.runAnimationCallback(options, null, false);
@@ -433,6 +428,11 @@ SC.View.reopen(
 
       // Apply the animation layout.
       this.set('layout', animationLayout);
+
+      // Route.
+      if (this.get('viewState') === SC.CoreView.ATTACHED_SHOWN) {
+        this.set('viewState', SC.CoreView.ATTACHED_SHOWN_ANIMATING);
+      }
     }
   },
 

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

@@ -67,6 +67,65 @@ SC.View.reopen(
     }
   },
 
+  _sc_assignProperty: function (key, value) {
+    if (key === 'layout') {
+      var newExplicitLayout = this._sc_computeExplicitLayout(value), // Convert the layout to an explicit layout.
+          layoutDiff = {},
+          explicitLayout = this.get('explicitLayout');
+      for (var layoutKey in newExplicitLayout) {
+        var currentValue = explicitLayout[layoutKey];
+
+        layoutDiff[layoutKey] = currentValue === undefined ? null : currentValue;
+
+        if (layoutKey === 'centerX') {
+          layoutDiff.left = explicitLayout.left;
+          layoutDiff.right = explicitLayout.right;
+        }
+
+        if (layoutKey === 'centerY') {
+          layoutDiff.top = explicitLayout.top;
+          layoutDiff.bottom = explicitLayout.bottom;
+        }
+      }
+
+      this._originalProperties.layout = layoutDiff;
+    } else {
+      // Get the original value of the property for reset.
+      this._originalProperties[key] = this.get(key);
+    }
+
+    // Apply the override.
+    if (key === 'layout') {
+      //@if(debug)
+      if (SC.LOG_DESIGN_MODE || this.SC_LOG_DESIGN_MODE) {
+        SC.Logger.log('  - Adjusting %@: %@ (cached as %@)'.fmt(key, SC.inspect(value), SC.inspect(this._originalProperties[key])));
+      }
+      //@endif
+      this.adjust(value);
+    } else {
+      //@if(debug)
+      if (SC.LOG_DESIGN_MODE || this.SC_LOG_DESIGN_MODE) {
+        SC.Logger.log('  - Setting %@: %@ (cached as %@)'.fmt(key, SC.inspect(value), SC.inspect(this._originalProperties[key])));
+      }
+      //@endif
+      this.set(key,value);
+    }
+  },
+
+  _sc_revertProperty: function (key, oldValue) {
+    //@if(debug)
+    if (SC.LOG_DESIGN_MODE || this.SC_LOG_DESIGN_MODE) {
+      SC.Logger.log('  - Resetting %@ to %@'.fmt(key, SC.inspect(oldValue)));
+    }
+    //@endif
+
+    if (key === 'layout') {
+      this.adjust(oldValue);
+    } else {
+      this.set(key, oldValue);
+    }
+  },
+
   /**
     Updates the design mode for this view.
 
@@ -114,18 +173,13 @@ SC.View.reopen(
       prevProperties = this._originalProperties;
       if (prevProperties) {
         //@if(debug)
-        if (SC.LOG_DESIGN_MODE) {
-          SC.Logger.log('%@ — Removing previous design property overrides from "%@":'.fmt(this, lastDesignMode));
+        if (SC.LOG_DESIGN_MODE || this.SC_LOG_DESIGN_MODE) {
+          SC.Logger.log('%@ — Removing previous design property overrides set by "%@":'.fmt(this, lastDesignMode));
         }
         //@endif
 
         for (key in prevProperties) {
-          //@if(debug)
-          if (SC.LOG_DESIGN_MODE) {
-            SC.Logger.log('  - Resetting %@ to %@'.fmt(key, prevProperties[key]));
-          }
-          //@endif
-          this.set(key, prevProperties[key]);
+          this._sc_revertProperty(key, prevProperties[key]);
         }
 
         // Remove the cache.
@@ -138,7 +192,7 @@ SC.View.reopen(
           newProperties = SC.merge(modeAdjust[size], modeAdjust[designMode]);
 
           //@if(debug)
-          if (SC.LOG_DESIGN_MODE) {
+          if (SC.LOG_DESIGN_MODE || this.SC_LOG_DESIGN_MODE) {
             SC.Logger.log('%@ — Applying design properties for "%@":'.fmt(this, designMode));
           }
           //@endif
@@ -146,21 +200,7 @@ SC.View.reopen(
           // Cache the original properties for reset.
           this._originalProperties = {};
           for (key in newProperties) {
-            // Cache the original value for reset.
-            this._originalProperties[key] = this.get(key);
-
-            //@if(debug)
-            if (SC.LOG_DESIGN_MODE) {
-              SC.Logger.log('  - Setting %@: %@'.fmt(key, newProperties[key]));
-            }
-            //@endif
-
-            // Apply the override.
-            if (key === 'layout') {
-              this.adjust(newProperties[key]);
-            } else {
-              this.set(key, newProperties[key]);
-            }
+            this._sc_assignProperty(key, newProperties[key]);
           }
         }
       }

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

@@ -36,10 +36,12 @@ SC._SCALE_VALUE_REGEX = /^\d+(,\d+){0,2}$/;
 SC.View.reopen(
   /** @scope SC.View.prototype */ {
 
-  /**
-    Walks like a duck. Is YES to indicate that a view has layout support.
-  */
-  hasLayout: YES,
+  // ------------------------------------------------------------------------
+  // Properties
+  //
+
+  /* @private Internal variable used to check for layout changes that resize. */
+  _sc_previousLayout: null,
 
   /**
     The view's background color. Only recommended for use during prototyping and in views
@@ -55,190 +57,261 @@ SC.View.reopen(
   */
   backgroundColor: null,
 
-  /* @private Internal variable used to check for layout changes that resize. */
-  _previousLayout: null,
-
   /**
-    Activates use of brower's static layout. To activate, set this property to YES.
-
-    @type Boolean
-    @default NO
+    The frame of the view including the borders and scale
   */
-  useStaticLayout: NO,
+  borderFrame: function () {
+    var frame = this.get('frame'),
+        ret = null;
 
-  // ...........................................
-  // LAYOUT
-  //
+    if (frame) {
+      /*jshint eqnull:true */
+      var layout = this.get('layout'),
+        defaultValue = layout.border == null ? 0 : layout.border,
+        borderTop = this._sc_explicitValueFor(layout.borderTop, defaultValue),
+        borderRight = this._sc_explicitValueFor(layout.borderRight, defaultValue),
+        borderBottom = this._sc_explicitValueFor(layout.borderBottom, defaultValue),
+        borderLeft = this._sc_explicitValueFor(layout.borderLeft, defaultValue);
 
-  /**
-    The 'frame' property depends on the 'layout' property as well as the
-    parent view's frame.  In order to properly invalidate any cached values,
-    we need to invalidate the cache whenever 'layout' changes.  However,
-    observing 'layout' does not guarantee that; the observer might not be run
-    immediately.
+      ret = {
+          x: frame.x,
+          y: frame.y,
+          width: frame.width,
+          height: frame.height
+        };
 
-    In order to avoid any window of opportunity where the cached frame could
-    be invalid, we need to force layoutDidChange() to always immediately run
-    whenever 'layout' is set.
-  */
-  propertyDidChange: function (key, value, _keepCache) {
-    //@if(debug)
-    // Debug mode only property validation.
-    switch (key) {
-    case 'layout':
-      // If a layout value is accidentally set to NaN, this can result in infinite loops. Help the developer out by failing
-      // early so that they can follow the stack trace to the problem.
-      var layout = this.get('layout');
-      for (var property in layout) {
-        if (!layout.hasOwnProperty(property)) { continue; }
-
-        var layoutValue = layout[property];
-        if (isNaN(layoutValue) && (layoutValue !== SC.LAYOUT_AUTO) &&
-            !SC._ROTATION_VALUE_REGEX.exec(layoutValue) && !SC._SCALE_VALUE_REGEX.exec(layoutValue)) {
-          throw new Error("SC.View layout property set to invalid value, %@: %@.".fmt(property, layoutValue));
-        }
+      var scale = frame.scale;
+      /*jshint eqnull:true*/
+      if (scale != null) {
+        var scaledBorderTop = borderTop * scale,
+            scaledBorderRight = borderRight * scale,
+            scaledBorderBottom = borderBottom * scale,
+            scaledBorderLeft = borderLeft * scale;
+
+        ret.scale = scale;
+        ret.x -= scaledBorderLeft;
+        ret.y -= scaledBorderTop;
+        ret.width += scaledBorderLeft + scaledBorderRight;
+        ret.height += scaledBorderTop + scaledBorderBottom;
+      } else {
+        ret.x -= borderLeft;
+        ret.y -= borderTop;
+        ret.width += borderLeft + borderRight;
+        ret.height += borderTop + borderBottom;
       }
-      break;
-    }
-    //@endif
 
-    // 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.
+      if (frame.transformOriginX != null) {
+        ret.transformOriginX = frame.transformOriginX;
+      }
 
-    // To allow layout to be a computed property, we check if any property has
-    // 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) {
-      var dependents = this._kvo_dependents[key];
-      if (dependents && dependents.indexOf('layout') !== -1) { layoutChange = true; }
+      if (frame.transformOriginY != null) {
+        ret.transformOriginY = frame.transformOriginY;
+      }
     }
 
-    if (key === 'layout' || layoutChange) {
-      this.layoutDidChange();
-    }
+    return ret;
+  }.property('frame').cacheable(),
 
-    // Resume notification as usual.
-    sc_super();
-  },
 
-  /** @private Apply the adjustment to a clone of the layout (cloned unless newLayout is passed in) */
-  _sc_applyAdjustment: function (key, newValue, layout, newLayout) {
-    var animateLayout = this._animateLayout;
+  /**
+    This this property to YES whenever the view needs to layout its child
+    views.  Normally this property is set automatically whenever the layout
+    property for a child view changes.
 
-    // If a call to animate occurs in the same run loop, the animation layout
-    // would still be applied in the next run loop, potentially overriding this
-    // adjustment. So we need to cancel the animation layout.
-    if (animateLayout) {
-      if (newValue === null) {
-        delete animateLayout[key];
-      } else {
-        animateLayout[key] = newValue;
-      }
+    @type Boolean
+  */
+  childViewsNeedLayout: NO,
 
-      if (this._pendingAnimations && this._pendingAnimations[key]) {
-        // Adjusting a value that was about to be animated cancels the animation.
-        delete this._pendingAnimations[key];
-      }
+  /**
+    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.
 
-    // Ignore undefined values or values equal to the current value.
-    /*jshint eqeqeq:false*/
-    if (newValue !== undefined && layout[key] != newValue) { // coerced so '100' == 100
-      // Only clone the layout if it is not given.
-      if (!newLayout) newLayout = SC.clone(this.get('layout'));
+    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.
 
-      if (newValue === null) {
-        delete newLayout[key];
-      } else {
-        newLayout[key] = newValue;
-      }
-    }
+    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.
 
-    return newLayout;
-  },
+    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,
 
   /**
-    This convenience method will take the current layout, apply any changes
-    you pass and set it again.  It is more convenient than having to do this
-    yourself sometimes.
+    The options for the given child view layout plugin.
 
-    You can pass just a key/value pair or a hash with several pairs.  You can
-    also pass a null value to delete a property.
+    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:
 
-    This method will avoid actually setting the layout if the value you pass
-    does not edit the layout.
+        childViewLayoutOptions: {
+          paddingAfter: 20,
+          paddingBefore: 20,
+          spacing: 10
+        }
 
-    @param {String|Hash} key
-    @param {Object} value
-    @returns {SC.View} receiver
+    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
   */
-  adjust: function (key, value) {
-    if (key === undefined) { return this; } // FAST PATH! Nothing to do.
+  childViewLayoutOptions: null,
 
+  /** @private The explicit layout of the view, computed from the layout using the explicit position. */
+  explicitLayout: function () {
     var layout = this.get('layout'),
-      newLayout;
-
-    // Normalize arguments.
-    if (SC.typeOf(key) === SC.T_STRING) {
-      newLayout = this._sc_applyAdjustment(key, value, layout);
-    } else {
-      for (var aKey in key) {
-        if (!key.hasOwnProperty(aKey)) { continue; }
+        ret = null;
 
-        newLayout = this._sc_applyAdjustment(aKey, key[aKey], layout, newLayout);
-      }
+    if (layout) {
+      ret = this._sc_computeExplicitLayout(layout);
     }
 
-    // now set adjusted layout
-    if (newLayout) {
-      var transitionAdjust = this.get('transitionAdjust');
+    return ret;
+  }.property('layout').cacheable(),
 
-      if (this.get('viewState') & SC.CoreView.IS_SHOWN && transitionAdjust) {
-        // Run the adjust transition.
-        this._transitionAdjust(newLayout);
-      } else {
-        this.set('layout', newLayout);
-      }
-    }
+  /**
+    Walks like a duck. Is `true` to indicate that a view has layout support.
+  */
+  hasLayout: true,
 
-    return this;
-  },
+  /**
+    Whether the view and its child views should be monitored for changes that
+    affect the current child view layout.
 
-  /** @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') || {};
+    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.
 
-    // Execute the adjusting transition.
-    transitionAdjust.run(this, options, layout);
-  },
+    If you only want to automatically layout the child views once, you can
+    set this to `false` to improve performance.
 
-  /** @private */
-  didTransitionAdjust: function () {},
+    @type Boolean
+    @default true
+  */
+  isChildViewLayoutLive: true,
 
   /**
-    Set the layout to a hash of layout properties to describe in detail how your view
-    should be positioned on screen. Like most application development environments,
-    your views are laid out absolutely, relative to their parent view.
+    Returns whether the height is 'fixed' or not. A fixed height is defined on the layout
+    as an integer number of pixels.  Fixed widths are therefore unaffected by changes
+    to their parent view's height.
 
-    You can define your layout using combinations of the following positional properties:
+    @field
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layout
+  */
+  isFixedHeight: function() {
+    var layout = this.get('layout');
 
-     - left
-     - top
-     - right
-     - bottom
-     - height
-     - width
-     - centerX: offset from center, horizontally
-     - centerY: offset from center, vertically
-     - minWidth
-     - minHeight
-     - maxWidth
-     - maxHeight
-     - scale: once positioned, scales the view in place.
+    // Height is fixed if it has a height and it isn't SC.LAYOUT_AUTO or a percent.
+    return (layout.height !== undefined) &&
+      !SC.isPercentage(layout.height) &&
+      (layout.height !== SC.LAYOUT_AUTO);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns whether the layout is 'fixed' or not.  A fixed layout means a
+    fixed left & top position and fixed width & height.  Fixed layouts are
+    therefore unaffected by changes to their parent view's layout.
+
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layoutStyle
+  */
+  isFixedLayout: function () {
+    return this.get('isFixedPosition') && this.get('isFixedSize');
+  }.property('isFixedPosition', 'isFixedSize').cacheable(),
+
+  /**
+    Returns whether the position is 'fixed' or not.  A fixed position means a
+    fixed left & top position within its parent's frame.  Fixed positions are
+    therefore unaffected by changes to their parent view's size.
+
+    @field
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layoutStyle
+  */
+  isFixedPosition: function () {
+    var explicitLayout = this.get('explicitLayout'),
+      left = explicitLayout.left,
+      top = explicitLayout.top,
+      hasFixedLeft,
+      hasFixedTop;
+
+    // Position is fixed if it has left + top, but not as percentages and not as SC.LAYOUT_AUTO.
+    hasFixedLeft = left !== undefined && !SC.isPercentage(left) && left !== SC.LAYOUT_AUTO;
+    hasFixedTop = top !== undefined && !SC.isPercentage(top) && top !== SC.LAYOUT_AUTO;
+
+    return hasFixedLeft && hasFixedTop;
+  }.property('explicitLayout').cacheable(),
+
+  /**
+    Returns whether the size is 'fixed' or not.  A fixed size means a fixed
+    width and height.  Fixed sizes are therefore unaffected by changes to their
+    parent view's size.
+
+    @field
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layout
+  */
+  isFixedSize: function () {
+    return this.get('isFixedHeight') && this.get('isFixedWidth');
+  }.property('isFixedWidth', 'isFixedHeight').cacheable(),
+
+  /**
+    Returns whether the width is 'fixed' or not. A fixed width is defined on the layout
+    as an integer number of pixels.  Fixed widths are therefore unaffected by changes
+    to their parent view's width.
+
+    @field
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layout
+  */
+  isFixedWidth: function() {
+    var layout = this.get('layout');
+
+    // Width is fixed if it has a width and it isn't SC.LAYOUT_AUTO or a percent.
+    return (layout.width !== undefined) &&
+      !SC.isPercentage(layout.width) &&
+      (layout.width !== SC.LAYOUT_AUTO);
+  }.property('layout').cacheable(),
+
+  /**
+    Set the layout to a hash of layout properties to describe in detail how your view
+    should be positioned on screen. Like most application development environments,
+    your views are laid out absolutely, relative to their parent view.
+
+    You can define your layout using combinations of the following positional properties:
+
+     - left
+     - top
+     - right
+     - bottom
+     - height
+     - width
+     - centerX: offset from center, horizontally
+     - centerY: offset from center, vertically
+     - minWidth
+     - minHeight
+     - maxWidth
+     - maxHeight
+     - scale: once positioned, scales the view in place.
      - transformOriginX, transformOriginY: defines the point (as a decimal percentage) around which
        your view will scale. (Also impacts rotation; see below.)
 
@@ -286,269 +359,395 @@ SC.View.reopen(
   */
   layout: { top: 0, left: 0, bottom: 0, right: 0 },
 
-  /** @private The explicit layout of the view, computed from the layout using the explicit position. */
-  explicitLayout: function () {
-    var layout = this.get('layout'),
-        explicitPosition = this.get('explicitPosition'),
-        ret;
+  /**
+    The view responsible for laying out this view.  The default version
+    returns the current parent view.
+  */
+  layoutView: function () {
+    return this.get('parentView');
+  }.property('parentView').cacheable(),
 
-    if (layout) {
-      ret = SC.clone(layout);
+  /**
+    The transition plugin to use when this view is moved or resized by adjusting
+    its layout.
 
-      // Only use the explicit position values.
-      // delete ret.left;
-      delete ret.right;
-      // delete ret.top;
-      delete ret.bottom;
+    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.
 
-      /*jshint eqnull:true */
-      if (explicitPosition.left != null) { ret.left = explicitPosition.left; }
-      if (explicitPosition.right != null) { ret.right = explicitPosition.right; }
-      if (explicitPosition.top != null) { ret.top = explicitPosition.top; }
-      if (explicitPosition.bottom != null) { ret.bottom = explicitPosition.bottom; }
-      if (explicitPosition.centerX != null) { ret.centerX = explicitPosition.centerX; }
-      if (explicitPosition.centerY != null) { ret.centerY = explicitPosition.centerY; }
-
-      // BORDERS
-      // Apply border first, so that the more specific borderX values will override it next.
-      var border = layout.border;
-      if (border != null) {
-        ret.borderTop = border;
-        ret.borderRight = border;
-        ret.borderBottom = border;
-        ret.borderLeft = border;
-        delete ret.border;
-      }
+    There are a number of pre-built transition adjust plugins available in
+    the SproutCore foundation framework:
 
-      if (layout.borderTop != null) {
-        ret.borderTop = layout.borderTop;
-      }
-      if (layout.borderRight != null) {
-        ret.borderRight = layout.borderRight;
+      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,
+
+  /**
+    Activates use of brower's static layout. To activate, set this property to YES.
+
+    @type Boolean
+    @default NO
+  */
+  useStaticLayout: NO,
+
+  // ------------------------------------------------------------------------
+  // Methods
+  //
+
+  /** @private */
+  _sc_adjustForBorder: function (frame, layout) {
+    /*jshint eqnull:true */
+    var defaultValue = layout.border == null ? 0 : layout.border,
+        borderTop = this._sc_explicitValueFor(layout.borderTop, defaultValue),
+        borderLeft = this._sc_explicitValueFor(layout.borderLeft, defaultValue),
+        borderBottom = this._sc_explicitValueFor(layout.borderBottom, defaultValue),
+        borderRight = this._sc_explicitValueFor(layout.borderRight, defaultValue);
+
+    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
+    frame.width -= (borderLeft + borderRight); // Border takes up space
+    frame.height -= (borderTop + borderBottom); // Border takes up space
+
+    return frame;
+  },
+
+  /** @private */
+  _sc_adjustForScale: function (frame, layout) {
+
+    // Scale not supported on this platform, ignore the layout values.
+    if (!SC.platform.supportsCSSTransforms) {
+      frame.scale = 1;
+      frame.transformOriginX = frame.transformOriginY = 0.5;
+
+    // Use scale.
+    } else {
+
+      // Get the scale and transform origins, if not provided. (Note inlining of SC.none for performance)
+      /*jshint eqnull:true*/
+      var scale = layout.scale,
+          oX = layout.transformOriginX,
+          oY = layout.transformOriginY;
+
+      // If the scale is set and isn't 1, do some calculations.
+      if (scale != null && scale !== 1) {
+        // Scale the rect.
+        frame = SC.scaleRect(frame, scale, oX, oY);
+
+        // Add the scale and original unscaled height and width.
+        frame.scale = scale;
       }
-      if (layout.borderBottom != null) {
-        ret.borderBottom = layout.borderBottom;
+
+      // If the origin is set and isn't 0.5, include it.
+      if (oX != null && oX !== 0.5) {
+        frame.transformOriginX = oX;
       }
-      if (layout.borderLeft != null) {
-        ret.borderLeft = layout.borderLeft;
+
+      // If the origin is set and isn't 0.5, include it.
+      if (oY != null && oY !== 0.5) {
+        frame.transformOriginY = oY;
       }
     }
 
-    return ret;
-  }.property('explicitPosition').cacheable(),
+    // Make sure width/height are never < 0.
+    if (frame.height < 0) frame.height = 0;
+    if (frame.width < 0) frame.width = 0;
 
-  /** @private The explicit position of the view, computed from the layout property, which may be written in shortform. */
-  explicitPosition: function () {
-    var layout = this.get('layout'),
-      ret;
+    return frame;
+  },
 
-    if (layout) {
-      ret = {};
-
-      /* jshint eqnull:true */
-      var hasBottom = (layout.bottom != null);
-      var hasRight = (layout.right != null);
-      var hasLeft = (layout.left != null);
-      var hasTop = (layout.top != null);
-      var hasCenterX = (layout.centerX != null);
-      var hasCenterY = (layout.centerY != null);
-      var hasHeight = (layout.height != null); //  || (layout.maxHeight != null)
-      var hasWidth = (layout.width != null); // || (layout.maxWidth != null)
-
-      if (hasLeft) {
-        ret.left = layout.left;
-      } else if (!hasCenterX && !(hasWidth && hasRight)) {
-        ret.left = 0;
+  /** @private Apply the adjustment to a clone of the layout (cloned unless newLayout is passed in) */
+  _sc_applyAdjustment: function (key, newValue, layout, newLayout) {
+    var animateLayout = this._animateLayout;
+
+    // If a call to animate occurs in the same run loop, the animation layout
+    // would still be applied in the next run loop, potentially overriding this
+    // adjustment. So we need to cancel the animation layout.
+    if (animateLayout) {
+      if (newValue === null) {
+        delete animateLayout[key];
+      } else {
+        animateLayout[key] = newValue;
       }
 
-      if (hasRight && !(hasLeft && hasWidth)) {
-        ret.right = layout.right;
-      } else if (!hasCenterX && !hasWidth) {
-        ret.right = 0;
+      if (this._pendingAnimations && this._pendingAnimations[key]) {
+        // Adjusting a value that was about to be animated cancels the animation.
+        delete this._pendingAnimations[key];
       }
 
-      //@if(debug)
-      // Debug-only warning when layout isn't valid.
-      // UNUSED: This is too noisy for certain views that adjust their own layouts based on top of the default layout.
-      // if (hasRight && hasLeft && hasWidth) {
-      //   SC.warn("Developer Warning: When setting `width` in the layout, you must only set `left` or `right`, but not both: %@".fmt(this));
-      // }
-      //@endif
+    }
 
-      if (hasTop) {
-        ret.top = layout.top;
-      } else if (!hasCenterY && !(hasHeight && hasBottom)) {
-        ret.top = 0;
-      }
+    // Ignore undefined values or values equal to the current value.
+    /*jshint eqeqeq:false*/
+    if (newValue !== undefined && layout[key] != newValue) { // coerced so '100' == 100
+      // Only clone the layout if it is not given.
+      if (!newLayout) newLayout = SC.clone(this.get('layout'));
 
-      if (hasBottom && !(hasTop && hasHeight)) {
-        ret.bottom = layout.bottom;
-      } else if (!hasCenterY && !hasHeight) {
-        ret.bottom = 0;
+      if (newValue === null) {
+        delete newLayout[key];
+      } else {
+        newLayout[key] = newValue;
       }
+    }
 
-      //@if(debug)
-      // Debug-only warning when layout isn't valid.
-      // UNUSED: This is too noisy for certain views that adjust their own layouts based on top of the default layout.
-      // if (hasBottom && hasTop && hasHeight) {
-      //   SC.warn("Developer Warning: When setting `height` in the layout, you must only set `top` or `bottom`, but not both: %@".fmt(this));
-      // }
-      //@endif
+    return newLayout;
+  },
 
-      // CENTERS
-      if (hasCenterX) {
-        ret.centerX = layout.centerX;
+  /** @private */
+  _sc_checkForResize: function (previousLayout, currentLayout) {
+    // Did our layout change in a way that could cause us to have changed size?  If
+    // not, then there's no need to invalidate the frames of our child views.
+    var didResizeHeight = true,
+        didResizeWidth = true,
+        didResize = true;
 
-        //@if(debug)
-        // Debug-only warning when layout isn't valid.
-        if (!hasWidth) {
-          SC.warn("Developer Warning: When setting `centerX` in the layout, you must also set `width`: %@".fmt(this));
-        }
-        //@endif
-      }
+    // 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.
+    /*jshint eqnull:true*/
 
-      if (hasCenterY) {
-        ret.centerY = layout.centerY;
+    // Simple test: Width is defined and hasn't changed.
+    // Complex test: No defined width, left or right haven't changed.
+    if (previousLayout != null &&
+        ((previousLayout.width != null &&
+          previousLayout.width === currentLayout.width) ||
+         (previousLayout.width == null &&
+           currentLayout.width == null &&
+           previousLayout.left === currentLayout.left &&
+           previousLayout.right === currentLayout.right))) {
+      didResizeWidth = false;
+    }
 
-        //@if(debug)
-        // Debug-only warning when layout isn't valid.
-        if (!hasHeight) {
-          SC.warn("Developer Warning: When setting `centerY` in the layout, you must also set `height`: %@".fmt(this));
-        }
-        //@endif
-      }
+    // Simple test: Height is defined and hasn't changed.
+    // Complex test: No defined height, top or bottom haven't changed.
+    if (!didResizeWidth &&
+        ((previousLayout.height != null &&
+          previousLayout.height === currentLayout.height) ||
+         (previousLayout.height == null &&
+           currentLayout.height == null &&
+           previousLayout.top === currentLayout.top &&
+           previousLayout.bottom === currentLayout.bottom))) {
+      didResizeHeight = false;
     }
 
-    return ret;
-  }.property('layout').cacheable(),
+    // Border test: Even if the width & height haven't changed, a change in a border would be a resize.
+    if (!didResizeHeight && !didResizeWidth) {
+      didResize = !(previousLayout.border === currentLayout.border &&
+              previousLayout.borderTop === currentLayout.borderTop &&
+              previousLayout.borderLeft === currentLayout.borderLeft &&
+              previousLayout.borderBottom === currentLayout.borderBottom &&
+              previousLayout.borderRight === currentLayout.borderRight);
+    }
 
-  /**
-    Returns whether the layout is 'fixed' or not.  A fixed layout means a
-    fixed left & top position and fixed width & height.  Fixed layouts are
-    therefore unaffected by changes to their parent view's layout.
+    return didResize;
+  },
 
-    @returns {Boolean} YES if fixed, NO otherwise
-    @test in layoutStyle
-  */
-  isFixedLayout: function () {
-    return this.get('isFixedPosition') && this.get('isFixedSize');
-  }.property('isFixedPosition', 'isFixedSize').cacheable(),
+  /** @private Called when the child view layout plugin or options change. */
+  _cvl_childViewLayoutDidChange: function () {
+    this.set('childViewsNeedLayout', true);
 
-  /**
-    Returns whether the position is 'fixed' or not.  A fixed position means a
-    fixed left & top position within its parent's frame.  Fixed positions are
-    therefore unaffected by changes to their parent view's size.
+    // Filter the input channel.
+    this.invokeOnce(this.layoutChildViewsIfNeeded);
+  },
 
-    @field
-    @returns {Boolean} YES if fixed, NO otherwise
-    @test in layoutStyle
-  */
-  isFixedPosition: function () {
-    var explicitPosition = this.get('explicitPosition'),
-      left = explicitPosition.left,
-      top = explicitPosition.top,
-      hasFixedLeft,
-      hasFixedTop;
+  /** @private Called when the child views change. */
+  _cvl_childViewsDidChange: function () {
+    this._cvl_teardownChildViewsLiveLayout();
+    this._cvl_setupChildViewsLiveLayout();
 
-    // Position is fixed if it has left + top, but not as percentages and not as SC.LAYOUT_AUTO.
-    hasFixedLeft = left !== undefined && !SC.isPercentage(left) && left !== SC.LAYOUT_AUTO;
-    hasFixedTop = top !== undefined && !SC.isPercentage(top) && top !== SC.LAYOUT_AUTO;
+    this.set('childViewsNeedLayout', true);
 
-    return hasFixedLeft && hasFixedTop;
-  }.property('explicitPosition').cacheable(),
+    // Filter the input channel.
+    this.invokeOnce(this.layoutChildViewsIfNeeded);
+  },
 
-  /**
-    Returns whether the size is 'fixed' or not.  A fixed size means a fixed
-    width and height.  Fixed sizes are therefore unaffected by changes to their
-    parent view's size.
+  /** @private Add observers to the child views for automatic child view layout. */
+  _cvl_setupChildViewsLiveLayout: function () {
+    var childViewLayout = this.childViewLayout,
+      childViews,
+      childLayoutProperties = childViewLayout.childLayoutProperties || [];
 
-    @field
-    @returns {Boolean} YES if fixed, NO otherwise
-    @test in layout
-  */
-  isFixedSize: function () {
-    return this.get('isFixedHeight') && this.get('isFixedWidth');
-  }.property('isFixedWidth', 'isFixedHeight').cacheable(),
+    // 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];
 
-  /**
-    Returns whether the height is 'fixed' or not. A fixed height is defined on the layout
-    as an integer number of pixels.  Fixed widths are therefore unaffected by changes
-    to their parent view's height.
+      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);
+        }
+      }
+    }
+  },
 
-    @field
-    @returns {Boolean} YES if fixed, NO otherwise
-    @test in layout
-  */
-  isFixedHeight: function() {
-    var layout = this.get('layout');
+  /** @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 || [];
 
-    // Height is fixed if it has a height and it isn't SC.LAYOUT_AUTO or a percent.
-    return (layout.height !== undefined) &&
-      !SC.isPercentage(layout.height) &&
-      (layout.height !== SC.LAYOUT_AUTO);
-  }.property('layout').cacheable(),
+    for (var i = 0, len = childLayoutProperties.length; i < len; i++) {
+      var observedProperty = childLayoutProperties[i];
 
-  /**
-    Returns whether the width is 'fixed' or not. A fixed width is defined on the layout
-    as an integer number of pixels.  Fixed widths are therefore unaffected by changes
-    to their parent view's width.
+      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);
+        }
+      }
+    }
+  },
 
-    @field
-    @returns {Boolean} YES if fixed, NO otherwise
-    @test in layout
-  */
-  isFixedWidth: function() {
-    var layout = this.get('layout');
+  /** @private Computes the explicit layout. */
+  _sc_computeExplicitLayout: function (layout) {
+    var ret = SC.copy(layout);
 
-    // Width is fixed if it has a width and it isn't SC.LAYOUT_AUTO or a percent.
-    return (layout.width !== undefined) &&
-      !SC.isPercentage(layout.width) &&
-      (layout.width !== SC.LAYOUT_AUTO);
-  }.property('layout').cacheable(),
+    /* jshint eqnull:true */
+    var hasBottom = (layout.bottom != null);
+    var hasRight = (layout.right != null);
+    var hasLeft = (layout.left != null);
+    var hasTop = (layout.top != null);
+    var hasCenterX = (layout.centerX != null);
+    var hasCenterY = (layout.centerY != null);
+    var hasHeight = (layout.height != null); //  || (layout.maxHeight != null)
+    var hasWidth = (layout.width != null); // || (layout.maxWidth != null)
 
-  /**
-    Converts a frame from the receiver's offset to the target offset.  Both
-    the receiver and the target must belong to the same pane.  If you pass
-    null, the conversion will be to the pane level.
+    /*jshint eqnull:true */
+    // Left + Top take precedence (left & right & width becomes left & width).
+    delete ret.right; // Right will be set if needed below.
+    delete ret.bottom; // Bottom will be set if needed below.
 
-    Note that the context of a view's frame is the view's parent frame.  In
-    other words, if you want to convert the frame of your view to the global
-    frame, then you should do:
+    if (hasLeft) {
+      ret.left = layout.left;
+    } else if (!hasCenterX && !(hasWidth && hasRight)) {
+      ret.left = 0;
+    }
 
-        var pv = this.get('parentView'), frame = this.get('frame');
-        var newFrame = pv ? pv.convertFrameToView(frame, null) : frame;
+    if (hasRight && !(hasLeft && hasWidth)) {
+      ret.right = layout.right;
+    } else if (!hasCenterX && !hasWidth) {
+      ret.right = 0;
+    }
 
-    @param {Rect} frame the source frame
-    @param {SC.View} targetView the target view to convert to
-    @returns {Rect} converted frame
-    @test in convertFrames
-  */
-  convertFrameToView: function (frame, targetView) {
-    return this._convertFrameFromViewHelper(frame, this, targetView);
-  },
+    //@if(debug)
+    // Debug-only warning when layout isn't valid.
+    // UNUSED: This is too noisy for certain views that adjust their own layouts based on top of the default layout.
+    // if (hasRight && hasLeft && hasWidth) {
+    //   SC.warn("Developer Warning: When setting `width` in the layout, you must only set `left` or `right`, but not both: %@".fmt(this));
+    // }
+    //@endif
 
-  /**
-    Converts a frame offset in the coordinates of another view system to the
-    receiver's view.
+    if (hasTop) {
+      ret.top = layout.top;
+    } else if (!hasCenterY && !(hasHeight && hasBottom)) {
+      ret.top = 0;
+    }
 
-    Note that the convext of a view's frame is relative to the view's
-    parentFrame.  For example, if you want to convert the frame of view that
-    belongs to another view to the receiver's frame you would do:
+    if (hasBottom && !(hasTop && hasHeight)) {
+      ret.bottom = layout.bottom;
+    } else if (!hasCenterY && !hasHeight) {
+      ret.bottom = 0;
+    }
 
-        var frame = view.get('frame');
-        var newFrame = this.convertFrameFromView(frame, view.get('parentView'));
+    //@if(debug)
+    // Debug-only warning when layout isn't valid.
+    // UNUSED: This is too noisy for certain views that adjust their own layouts based on top of the default layout.
+    // if (hasBottom && hasTop && hasHeight) {
+    //   SC.warn("Developer Warning: When setting `height` in the layout, you must only set `top` or `bottom`, but not both: %@".fmt(this));
+    // }
+    //@endif
+
+    // CENTERS
+    if (hasCenterX) {
+      ret.centerX = layout.centerX;
+
+      //@if(debug)
+      // Debug-only warning when layout isn't valid.
+      if (hasCenterX && !hasWidth) {
+        SC.warn("Developer Warning: When setting `centerX` in the layout, you must also define the `width`: %@".fmt(this));
+      }
+      //@endif
+    }
+
+    if (hasCenterY) {
+      ret.centerY = layout.centerY;
+
+      //@if(debug)
+      // Debug-only warning when layout isn't valid.
+      if (hasCenterY && !hasHeight) {
+        SC.warn("Developer Warning: When setting `centerY` in the layout, you must also define the `height`: %@".fmt(this));
+      }
+      //@endif
+    }
+
+    // BORDERS
+    // Apply border first, so that the more specific borderX values will override it next.
+    var border = layout.border;
+    if (border != null) {
+      ret.borderTop = border;
+      ret.borderRight = border;
+      ret.borderBottom = border;
+      ret.borderLeft = border;
+      delete ret.border;
+    }
+
+    // Override generic border with more specific borderX.
+    if (layout.borderTop != null) {
+      ret.borderTop = layout.borderTop;
+    }
+    if (layout.borderRight != null) {
+      ret.borderRight = layout.borderRight;
+    }
+    if (layout.borderBottom != null) {
+      ret.borderBottom = layout.borderBottom;
+    }
+    if (layout.borderLeft != null) {
+      ret.borderLeft = layout.borderLeft;
+    }
 
-    @param {Rect} frame the source frame
-    @param {SC.View} targetView the target view to convert to
-    @returns {Rect} converted frame
-    @test in converFrames
-  */
-  convertFrameFromView: function (frame, targetView) {
-    return this._convertFrameFromViewHelper(frame, targetView, this);
+    return ret;
   },
 
   /** @private */
-  _convertFrameFromViewHelper: function (frame, fromView, targetView) {
+  _sc_convertFrameFromViewHelper: function (frame, fromView, targetView) {
     var myX = frame.x, myY = frame.y, myWidth = frame.width, myHeight = frame.height, view, f;
 
     // first, walk up from the view of the frame, up to the top level
@@ -605,324 +804,150 @@ SC.View.reopen(
     return { x: myX, y: myY, width: myWidth, height: myHeight };
   },
 
-  /**
-    Attempt to scroll the view to visible.  This will walk up the parent
-    view hierarchy looking looking for a scrollable view.  It will then
-    call scrollToVisible() on it.
-
-    Returns YES if an actual scroll took place, no otherwise.
-
-    @returns {Boolean}
-  */
-  scrollToVisible: function () {
-    var pv = this.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;
-    }
-  },
-
   /** @private */
   _sc_explicitValueFor: function (givenValue, impliedValue) {
     return givenValue === undefined ? impliedValue : givenValue;
   },
 
-  /** @private */
-  _adjustForBorder: function (frame, layout) {
-    /*jshint eqnull:true */
-    var defaultValue = layout.border == null ? 0 : layout.border,
-        borderTop = this._sc_explicitValueFor(layout.borderTop, defaultValue),
-        borderLeft = this._sc_explicitValueFor(layout.borderLeft, defaultValue),
-        borderBottom = this._sc_explicitValueFor(layout.borderBottom, defaultValue),
-        borderRight = this._sc_explicitValueFor(layout.borderRight, defaultValue);
-
-    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
-    frame.width -= (borderLeft + borderRight); // Border takes up space
-    frame.height -= (borderTop + borderBottom); // Border takes up space
-
-    return frame;
-  },
-
-  /** @private */
-  _adjustForScale: function (frame, layout) {
-
-    // Scale not supported on this platform, ignore the layout values.
-    if (!SC.platform.supportsCSSTransforms) {
-      frame.scale = 1;
-      frame.transformOriginX = frame.transformOriginY = 0.5;
-
-    // Use scale.
-    } else {
-
-      // Get the scale and transform origins, if not provided. (Note inlining of SC.none for performance)
-      /*jshint eqnull:true*/
-      var scale = layout.scale,
-          oX = layout.transformOriginX,
-          oY = layout.transformOriginY;
-
-      // If the scale is set and isn't 1, do some calculations.
-      if (scale != null && scale !== 1) {
-        // Scale the rect.
-        frame = SC.scaleRect(frame, scale, oX, oY);
-
-        // Add the scale and original unscaled height and width.
-        frame.scale = scale;
-      }
-
-      // If the origin is set and isn't 0.5, include it.
-      if (oX != null && oX !== 0.5) {
-        frame.transformOriginX = oX;
-      }
-
-      // If the origin is set and isn't 0.5, include it.
-      if (oY != null && oY !== 0.5) {
-        frame.transformOriginY = oY;
-      }
-    }
-
-    // Make sure width/height are never < 0.
-    if (frame.height < 0) frame.height = 0;
-    if (frame.width < 0) frame.width = 0;
+  /** @private Attempts to run a transition adjust, ensuring any showing transitions are stopped in place. */
+  _sc_transitionAdjust: function (layout) {
+    var transitionAdjust = this.get('transitionAdjust'),
+      options = this.get('transitionAdjustOptions') || {};
 
-    return frame;
+    // Execute the adjusting transition.
+    transitionAdjust.run(this, options, layout);
   },
 
-  /** */
-  computeParentDimensions: function (frame) {
-    var parentView = this.get('parentView'),
-        parentFrame = (parentView) ? parentView.get('frame') : null,
-        ret;
+  /** @private
+    Invoked by other views to notify this view that its frame has changed.
 
-    if (parentFrame) {
-      ret = {
-        width: parentFrame.width,
-        height: parentFrame.height
-      };
-    } else if (frame) {
-      ret = {
-        width: (frame.left || 0) + (frame.width || 0) + (frame.right || 0),
-        height: (frame.top || 0) + (frame.height || 0) + (frame.bottom || 0)
-      };
-    } else {
-      ret = {
-        width: 0,
-        height: 0
-      };
-    }
+    This notifies the view that its frame property has changed,
+    then notifies its child views that their clipping frames may have changed.
+  */
+  _sc_viewFrameDidChange: function () {
+    this.notifyPropertyChange('frame');
 
-    return ret;
+    // Notify the children that their clipping frame may have changed. Top-down, because a child's
+    // clippingFrame is dependent on its parent's frame.
+    this._callOnChildViews('_sc_clippingFrameDidChange');
   },
 
   /**
-    The frame of the view including the borders and scale
-  */
-  borderFrame: function () {
-    var frame = this.get('frame'),
-        ret = null;
-
-    if (frame) {
-      var layout = this.get('layout'),
-        defaultValue = layout.border == null ? 0 : layout.border,
-        borderTop = this._sc_explicitValueFor(layout.borderTop, defaultValue),
-        borderRight = this._sc_explicitValueFor(layout.borderRight, defaultValue),
-        borderBottom = this._sc_explicitValueFor(layout.borderBottom, defaultValue),
-        borderLeft = this._sc_explicitValueFor(layout.borderLeft, defaultValue);
-
-      ret = {
-          x: frame.x,
-          y: frame.y,
-          width: frame.width,
-          height: frame.height
-        };
-
-      var scale = frame.scale;
-      /*jshint eqnull:true*/
-      if (scale != null) {
-        var scaledBorderTop = borderTop * scale,
-            scaledBorderRight = borderRight * scale,
-            scaledBorderBottom = borderBottom * scale,
-            scaledBorderLeft = borderLeft * scale;
-
-        ret.scale = scale;
-        ret.x -= scaledBorderLeft;
-        ret.y -= scaledBorderTop;
-        ret.width += scaledBorderLeft + scaledBorderRight;
-        ret.height += scaledBorderTop + scaledBorderBottom;
-      } else {
-        ret.x -= borderLeft;
-        ret.y -= borderTop;
-        ret.width += borderLeft + borderRight;
-        ret.height += borderTop + borderBottom;
-      }
-
-      if (frame.transformOriginX != null) {
-        ret.transformOriginX = frame.transformOriginX;
-      }
-
-      if (frame.transformOriginY != null) {
-        ret.transformOriginY = frame.transformOriginY;
-      }
-    }
-
-    return ret;
-  }.property('frame').cacheable(),
+    This convenience method will take the current layout, apply any changes
+    you pass and set it again.  It is more convenient than having to do this
+    yourself sometimes.
 
-  /**
-    This method may be called on your view whenever the parent view resizes.
+    You can pass just a key/value pair or a hash with several pairs.  You can
+    also pass a null value to delete a property.
 
-    The default version of this method will reset the frame and then call
-    viewDidResize() if its size may have changed.  You will not usually override
-    this method, but you may override the viewDidResize() method.
+    This method will avoid actually setting the layout if the value you pass
+    does not edit the layout.
 
-    @param {Frame} parentFrame the parent view's current frame.
-    @returns {void}
-    @test in viewDidResize
+    @param {String|Hash} key
+    @param {Object} value
+    @returns {SC.View} receiver
   */
-  parentViewDidResize: function (parentFrame) {
-    // Determine if our position may have changed.
-    var positionMayHaveChanged = !this.get('isFixedPosition');
+  adjust: function (key, value) {
+    if (key === undefined) { return this; } // FAST PATH! Nothing to do.
 
-    // Figure out if our size may have changed.
-    var isStatic = this.get('useStaticLayout'),
-        // Figure out whether our height may have changed.
-        parentHeight = parentFrame ? parentFrame.height : 0,
-        parentHeightDidChange = parentHeight !== this._scv_parentHeight,
-        isFixedHeight = this.get('isFixedHeight'),
-        heightMayHaveChanged = isStatic || (parentHeightDidChange && !isFixedHeight),
-        // Figure out whether our width may have changed.
-        parentWidth = parentFrame ? parentFrame.width : 0,
-        parentWidthDidChange = parentWidth !== this._scv_parentWidth,
-        isFixedWidth = this.get('isFixedWidth'),
-        widthMayHaveChanged = isStatic || (parentWidthDidChange && !isFixedWidth);
+    var layout = this.get('layout'),
+      newLayout;
 
-    // Update the cached parent frame.
-    this._scv_parentHeight = parentHeight;
-    this._scv_parentWidth = parentWidth;
+    // Normalize arguments.
+    if (SC.typeOf(key) === SC.T_STRING) {
+      newLayout = this._sc_applyAdjustment(key, value, layout);
+    } else {
+      for (var aKey in key) {
+        if (!key.hasOwnProperty(aKey)) { continue; }
 
-    // If our height or width changed, our resulting frame change may impact our child views.
-    if (heightMayHaveChanged || widthMayHaveChanged) {
-      this.viewDidResize();
-    }
-    // If our size didn't change but our position did, our frame will change, but it won't impact our child
-    // views' frames. (Note that the _viewFrameDidChange call is made by viewDidResize above.)
-    else if (positionMayHaveChanged) {
-      this._viewFrameDidChange();
+        newLayout = this._sc_applyAdjustment(aKey, key[aKey], layout, newLayout);
+      }
     }
-  },
-
-  /**
-    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
-    depends on the size of your parent view).  You can override this method
-    to implement your own layout if you like, such as performing a grid
-    layout.
 
-    The default implementation simply notifies about the change to 'frame' and
-    then calls parentViewDidResize on all of your children.
-
-    @returns {void}
-  */
-  viewDidResize: function () {
-    this._viewFrameDidChange();
+    // now set adjusted layout
+    if (newLayout) {
+      var transitionAdjust = this.get('transitionAdjust');
 
-    // Also notify our children.
-    var cv = this.childViews,
-        frame = this.get('frame'),
-        len, idx, view;
-    for (idx = 0; idx < (len = cv.length); ++idx) {
-      view = cv[idx];
-      view.tryToPerform('parentViewDidResize', frame);
+      if (this.get('viewState') & SC.CoreView.IS_SHOWN && transitionAdjust) {
+        // Run the adjust transition.
+        this._sc_transitionAdjust(newLayout);
+      } else {
+        this.set('layout', newLayout);
+      }
     }
+
+    return this;
   },
 
-  /** @private
-    Invoked by other views to notify this view that its frame has changed.
+  /** */
+  computeParentDimensions: function (frame) {
+    var parentView = this.get('parentView'),
+        parentFrame = (parentView) ? parentView.get('frame') : null,
+        ret;
 
-    This notifies the view that its frame property has changed,
-    then notifies its child views that their clipping frames may have changed.
-  */
-  _viewFrameDidChange: function () {
-    this.notifyPropertyChange('frame');
+    if (parentFrame) {
+      ret = {
+        width: parentFrame.width,
+        height: parentFrame.height
+      };
+    } else if (frame) {
+      ret = {
+        width: (frame.left || 0) + (frame.width || 0) + (frame.right || 0),
+        height: (frame.top || 0) + (frame.height || 0) + (frame.bottom || 0)
+      };
+    } else {
+      ret = {
+        width: 0,
+        height: 0
+      };
+    }
 
-    // Notify the children that their clipping frame may have changed. Top-down, because a child's
-    // clippingFrame is dependent on its parent's frame.
-    this._callOnChildViews('_sc_view_clippingFrameDidChange');
+    return ret;
   },
 
-  // Implementation note: As a general rule, paired method calls, such as
-  // beginLiveResize/endLiveResize that are called recursively on the tree
-  // should reverse the order when doing the final half of the call. This
-  // ensures that the calls are propertly nested for any cleanup routines.
-  //
-  // -> View A.beginXXX()
-  //   -> View B.beginXXX()
-  //     -> View C.beginXXX()
-  //   -> View D.beginXXX()
-  //
-  // ...later on, endXXX methods are called in reverse order of beginXXX...
-  //
-  //   <- View D.endXXX()
-  //     <- View C.endXXX()
-  //   <- View B.endXXX()
-  // <- View A.endXXX()
-  //
-  // See the two methods below for an example implementation.
-
   /**
-    Call this method when you plan to begin a live resize.  This will
-    notify the receiver view and any of its children that are interested
-    that the resize is about to begin.
+    Converts a frame from the receiver's offset to the target offset.  Both
+    the receiver and the target must belong to the same pane.  If you pass
+    null, the conversion will be to the pane level.
 
-    @returns {SC.View} receiver
-    @test in viewDidResize
-  */
-  beginLiveResize: function () {
-    // call before children have been notified...
-    if (this.willBeginLiveResize) this.willBeginLiveResize();
+    Note that the context of a view's frame is the view's parent frame.  In
+    other words, if you want to convert the frame of your view to the global
+    frame, then you should do:
 
-    // notify children in order
-    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;
+        var pv = this.get('parentView'), frame = this.get('frame');
+        var newFrame = pv ? pv.convertFrameToView(frame, null) : frame;
+
+    @param {Rect} frame the source frame
+    @param {SC.View} targetView the target view to convert to
+    @returns {Rect} converted frame
+    @test in convertFrames
+  */
+  convertFrameToView: function (frame, targetView) {
+    return this._sc_convertFrameFromViewHelper(frame, this, targetView);
   },
 
   /**
-    Call this method when you are finished with a live resize.  This will
-    notify the receiver view and any of its children that are interested
-    that the live resize has ended.
+    Converts a frame offset in the coordinates of another view system to the
+    receiver's view.
 
-    @returns {SC.View} receiver
-    @test in viewDidResize
-  */
-  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();
-    }
+    Note that the convext of a view's frame is relative to the view's
+    parentFrame.  For example, if you want to convert the frame of view that
+    belongs to another view to the receiver's frame you would do:
 
-    // call *after* all children have been notified...
-    if (this.didEndLiveResize) this.didEndLiveResize();
-    return this;
-  },
+        var frame = view.get('frame');
+        var newFrame = this.convertFrameFromView(frame, view.get('parentView'));
 
-  /**
-    The view responsible for laying out this view.  The default version
-    returns the current parent view.
+    @param {Rect} frame the source frame
+    @param {SC.View} targetView the target view to convert to
+    @returns {Rect} converted frame
+    @test in converFrames
   */
-  layoutView: function () {
-    return this.get('parentView');
-  }.property('parentView').cacheable(),
+  convertFrameFromView: function (frame, targetView) {
+    return this._sc_convertFrameFromViewHelper(frame, targetView, this);
+  },
+
+  /** @private */
+  didTransitionAdjust: function () {},
 
   /**
     This method is called whenever a property changes that invalidates the
@@ -949,8 +974,21 @@ SC.View.reopen(
     }
 
     // Optimize notifications depending on if we resized or just moved.
-    this._checkForResize();
+    var didResize = this._sc_checkForResize(this._sc_previousLayout, currentLayout);
+
+    // Cache the last layout to fine-tune notifications when the layout changes.
+    // NOTE: Do this before continuing so that any adjustments that occur in viewDidResize or from
+    //  _sc_viewFrameDidChange (say to the position after a resize), don't result in _sc_checkForResize
+    //  running against the old _sc_previousLayout.
+    this._sc_previousLayout = currentLayout;
 
+    if (didResize) {
+      this.viewDidResize();
+    } else {
+      // Even if we didn't resize, our frame sould have changed.
+      // TODO: consider checking for position changes by testing the resulting frame against the cached frame. This is difficult to do.
+      this._sc_viewFrameDidChange();
+    }
 
     // Notify layoutView/parentView, unless we are transitioning.
     var layoutView = this.get('layoutView');
@@ -969,54 +1007,6 @@ SC.View.reopen(
     return this;
   },
 
-  /** @private */
-  _checkForResize: function () {
-    // Did our layout change in a way that could cause us to have changed size?  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.
-    /*jshint eqnull:true*/
-    if (previousLayout &&
-        previousLayout.width != null &&
-        previousLayout.height != null &&
-        previousLayout.width === currentLayout.width &&
-        previousLayout.height === currentLayout.height &&
-        previousLayout.border === currentLayout.border &&
-        previousLayout.borderTop === currentLayout.borderTop &&
-        previousLayout.borderLeft === currentLayout.borderLeft &&
-        previousLayout.borderBottom === currentLayout.borderBottom &&
-        previousLayout.borderRight === currentLayout.borderRight) {
-      didResize = false;
-    }
-
-    // Cache the last layout to fine-tune notifications when the layout changes.
-    // NOTE: Do this before continuing so that any adjustments that occur in viewDidResize or from _viewFrameDidChange
-    // (say to the position after a resize), don't result in _checkForResize running against the old _previousLayout.
-    this._previousLayout = currentLayout;
-
-    if (didResize) {
-      this.viewDidResize();
-    } 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 this property to YES whenever the view needs to layout its child
-    views.  Normally this property is set automatically whenever the layout
-    property for a child view changes.
-
-    @type Boolean
-  */
-  childViewsNeedLayout: NO,
-
   /**
     One of two methods that are invoked whenever one of your childViews
     layout changes.  This method is invoked every time a child view's layout
@@ -1093,65 +1083,225 @@ SC.View.reopen(
         set[i].updateLayout(force);
       }
 
-      set.clear(); // reset & reuse
+      set.clear(); // reset & reuse
+    }
+  },
+
+  /**
+    This method may be called on your view whenever the parent view resizes.
+
+    The default version of this method will reset the frame and then call
+    viewDidResize() if its size may have changed.  You will not usually override
+    this method, but you may override the viewDidResize() method.
+
+    @param {Frame} parentFrame the parent view's current frame.
+    @returns {void}
+    @test in viewDidResize
+  */
+  parentViewDidResize: function (parentFrame) {
+    // Determine if our position may have changed.
+    var positionMayHaveChanged = !this.get('isFixedPosition');
+
+    // Figure out if our size may have changed.
+    var isStatic = this.get('useStaticLayout'),
+        // Figure out whether our height may have changed.
+        parentHeight = parentFrame ? parentFrame.height : 0,
+        parentHeightDidChange = parentHeight !== this._scv_parentHeight,
+        isFixedHeight = this.get('isFixedHeight'),
+        heightMayHaveChanged = isStatic || (parentHeightDidChange && !isFixedHeight),
+        // Figure out whether our width may have changed.
+        parentWidth = parentFrame ? parentFrame.width : 0,
+        parentWidthDidChange = parentWidth !== this._scv_parentWidth,
+        isFixedWidth = this.get('isFixedWidth'),
+        widthMayHaveChanged = isStatic || (parentWidthDidChange && !isFixedWidth);
+
+    // Update the cached parent frame.
+    this._scv_parentHeight = parentHeight;
+    this._scv_parentWidth = parentWidth;
+
+    // If our height or width changed, our resulting frame change may impact our child views.
+    if (heightMayHaveChanged || widthMayHaveChanged) {
+      this.viewDidResize();
+    }
+    // If our size didn't change but our position did, our frame will change, but it won't impact our child
+    // views' frames. (Note that the _sc_viewFrameDidChange call is made by viewDidResize above.)
+    else if (positionMayHaveChanged) {
+      this._sc_viewFrameDidChange();
+    }
+  },
+
+  /**
+    The 'frame' property depends on the 'layout' property as well as the
+    parent view's frame.  In order to properly invalidate any cached values,
+    we need to invalidate the cache whenever 'layout' changes.  However,
+    observing 'layout' does not guarantee that; the observer might not be run
+    before all other observers.
+
+    In order to avoid any window of opportunity where the cached frame could
+    be invalid, we need to force layoutDidChange() to immediately run
+    whenever 'layout' is set.
+  */
+  propertyDidChange: function (key, value, _keepCache) {
+    //@if(debug)
+    // Debug mode only property validation.
+    if (key === 'layout') {
+      // If a layout value is accidentally set to NaN, this can result in infinite loops. Help the
+      // developer out by failing early so that they can follow the stack trace to the problem.
+      for (var property in value) {
+        if (!value.hasOwnProperty(property)) { continue; }
+
+        var layoutValue = value[property];
+        if (isNaN(layoutValue) && (layoutValue !== SC.LAYOUT_AUTO) &&
+            !SC._ROTATION_VALUE_REGEX.exec(layoutValue) && !SC._SCALE_VALUE_REGEX.exec(layoutValue)) {
+          throw new Error("SC.View layout property set to invalid value, %@: %@.".fmt(property, layoutValue));
+        }
+      }
+    }
+    //@endif
+
+    // To allow layout to be a computed property, we check if any property has
+    // changed and if layout is dependent on the property.
+    var layoutChange = false;
+    if (typeof this.layout === "function" && this._kvo_dependents) {
+      var dependents = this._kvo_dependents[key];
+      if (dependents && dependents.indexOf('layout') !== -1) { layoutChange = true; }
+    }
+
+    // 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.
+    if (key === 'layout' || layoutChange) {
+      this.layoutDidChange();
+    }
+
+    // Resume notification as usual.
+    return sc_super();
+  },
+
+  /**
+  */
+  // propertyWillChange: function (key) {
+  //   // To allow layout to be a computed property, we check if any property has
+  //   // changed and if layout is dependent on the property.
+  //   var layoutChange = false;
+  //   if (typeof this.layout === "function" && this._kvo_dependents) {
+  //     var dependents = this._kvo_dependents[key];
+  //     if (dependents && dependents.indexOf('layout') !== -1) { layoutChange = true; }
+  //   }
+
+  //   if (key === 'layout' || layoutChange) {
+  //     this._sc_previousLayout = this.get('layout');
+  //   }
+
+  //   return sc_super();
+  // },
+
+  /**
+    Attempt to scroll the view to visible.  This will walk up the parent
+    view hierarchy looking looking for a scrollable view.  It will then
+    call scrollToVisible() on it.
+
+    Returns YES if an actual scroll took place, no otherwise.
+
+    @returns {Boolean}
+  */
+  scrollToVisible: function () {
+    var pv = this.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;
     }
   },
 
-  /** @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);
-  },
+  /**
+    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
+    depends on the size of your parent view).  You can override this method
+    to implement your own layout if you like, such as performing a grid
+    layout.
 
-  /** @private Called when the child views change. */
-  _cvl_childViewsDidChange: function () {
-    this._cvl_teardownChildViewsLiveLayout();
-    this._cvl_setupChildViewsLiveLayout();
+    The default implementation simply notifies about the change to 'frame' and
+    then calls parentViewDidResize on all of your children.
 
-    this.set('childViewsNeedLayout', true);
+    @returns {void}
+  */
+  viewDidResize: function () {
+    this._sc_viewFrameDidChange();
 
-    // Filter the input channel.
-    this.invokeOnce(this.layoutChildViewsIfNeeded);
+    // Also notify our children.
+    var cv = this.childViews,
+        frame = this.get('frame'),
+        len, idx, view;
+    for (idx = 0; idx < (len = cv.length); ++idx) {
+      view = cv[idx];
+      view.tryToPerform('parentViewDidResize', frame);
+    }
   },
 
-  /** @private Add observers to the child views for automatic child view layout. */
-  _cvl_setupChildViewsLiveLayout: function () {
-    var childViewLayout = this.childViewLayout,
-      childViews,
-      childLayoutProperties = childViewLayout.childLayoutProperties || [];
+  // Implementation note: As a general rule, paired method calls, such as
+  // beginLiveResize/endLiveResize that are called recursively on the tree
+  // should reverse the order when doing the final half of the call. This
+  // ensures that the calls are propertly nested for any cleanup routines.
+  //
+  // -> View A.beginXXX()
+  //   -> View B.beginXXX()
+  //     -> View C.beginXXX()
+  //   -> View D.beginXXX()
+  //
+  // ...later on, endXXX methods are called in reverse order of beginXXX...
+  //
+  //   <- View D.endXXX()
+  //     <- View C.endXXX()
+  //   <- View B.endXXX()
+  // <- View A.endXXX()
+  //
+  // See the two methods below for an example implementation.
 
-    // 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];
+  /**
+    Call this method when you plan to begin a live resize.  This will
+    notify the receiver view and any of its children that are interested
+    that the resize is about to begin.
 
-      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);
-        }
-      }
+    @returns {SC.View} receiver
+    @test in viewDidResize
+  */
+  beginLiveResize: function () {
+    // call before children have been notified...
+    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];
+      if (view.beginLiveResize) view.beginLiveResize();
     }
+    return this;
   },
 
-  /** @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];
+  /**
+    Call this method when you are finished with a live resize.  This will
+    notify the receiver view and any of its children that are interested
+    that the live resize has ended.
 
-      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);
-        }
-      }
+    @returns {SC.View} receiver
+    @test in viewDidResize
+  */
+  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();
     }
+
+    // call *after* all children have been notified...
+    if (this.didEndLiveResize) this.didEndLiveResize();
+    return this;
   },
 
   /**
@@ -1187,79 +1337,6 @@ SC.View.reopen(
     context.setStyle(this.get('layoutStyle'));
   },
 
-  // ------------------------------------------------------------------------
-  // 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
   //
@@ -1313,21 +1390,33 @@ SC.View.reopen(
     if (this.didAppendToDocument) { this.didAppendToDocument(); }
   },
 
-  /** @private Override: The 'adopted' event (uses _checkForResize so our childViews are notified if our frame changes). */
+  /** @private Override: The 'adopted' event (uses isFixedSize 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();
+    // If our size depends on our parent, it will have changed on adoption.
+    var isFixedSize = this.get('isFixedSize');
+    if (isFixedSize) {
+      // Even if our size is fixed, our frame may have changed (in particular if the anchor is not top/left)
+      this._sc_viewFrameDidChange();
+    } else {
+      this.viewDidResize();
+    }
 
     sc_super();
   },
 
-  /** @private Extension: The 'orphaned' event. */
+  /** @private Extension: The 'orphaned' event (uses isFixedSize so our childViews are notified if our frame changes). */
   _orphaned: function () {
     sc_super();
 
     if (!this.isDestroyed) {
-      // Our frame may change once we've been removed from a parent.
-      this._checkForResize();
+      // If our size depends on our parent, it will have changed on orphaning.
+      var isFixedSize = this.get('isFixedSize');
+      if (isFixedSize) {
+      // Even if our size is fixed, our frame may have changed (in particular if the anchor is not top/left)
+      this._sc_viewFrameDidChange();
+      } else {
+        this.viewDidResize();
+      }
     }
   },
 
@@ -1344,64 +1433,7 @@ SC.View.reopen(
   _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
+  }
 
 });
 
@@ -1561,4 +1593,5 @@ SC.View.mixin(
   convertLayoutToCustomLayout: function (layout, layoutParams, parentFrame) {
     // TODO: [EG] Create Top/Left/Width/Height to a Custom Layout conversion
   }
+
 });