sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -16,13 +16,3 @@ test("Static layout", function() {
 
   ok(view.$().is('.sc-static-layout'), "views with useStaticLayout get the sc-static-layout class");
 });
-
-test("Background color", function() {
-  var view = SC.View.create({
-    backgroundColor: "red"
-  });
-
-  view.createLayer();
-
-  equals(view.get('layer').style.backgroundColor, "red", "backgroundColor sets the CSS background-color class");
-});

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

@@ -4,7 +4,7 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test equals context ok same Q$ htmlbody */
+/*global module, test, equals, same */
 
 // ..........................................................
 // viewDidResize()
@@ -45,8 +45,37 @@ test("parentViewDidResize should only be called when the parent's layout propert
   equals(callCount, 2, 'parentViewDidResize should invoke twice');
 
   // This is tricky, if the height increases, but the same size border is added, the effective height/width is unchanged.
-  SC.run(function () { view.adjust({'height': 70, 'borderTop': 10 }); });
-  equals(callCount, 2, 'parentViewDidResize should invoke twice');
+  /*
+    Testing for this type of change on every call to adjust isn't worth the computation cost. Essentially,
+    what we lose is that parentViewDidResize will get called still if a view happens to adjust its border and
+    size at the same time, such that its frame doesn't change, which has a very small chance of occurring and
+    isn't critical if it does occur.
+    */
+  // SC.run(function () { view.adjust({'height': 70, 'borderTop': 10 }); });
+  // 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 () {
@@ -62,25 +91,29 @@ test("The view's frame should only notify changes when its layout changes if the
       layout: { width: 200, height: 200 }
     });
 
-  SC.run(function () { view2.set('layout', { height: 50, width: 50 }); });
+  // Because the view is created independently and then added to a parent, it's frame should change
+  // once when added to the parent.
   equals(view2.get('frameCallCount'), 1, 'frame should have notified changing once.');
 
+  SC.run(function () { view2.set('layout', { height: 50, width: 50 }); });
+  equals(view2.get('frameCallCount'), 2, 'frame should have notified changing twice.');
+
   SC.run(function () { view2.adjust('top', 0); });
-  equals(view2.get('frameCallCount'), 2, 'frame should have notified changing once.');
+  equals(view2.get('frameCallCount'), 3, 'frame should have notified changing thrice.');
 
   SC.run(function () { view2.adjust('height', 100); });
-  equals(view2.get('frameCallCount'), 3, 'frame should have notified changing twice.');
+  equals(view2.get('frameCallCount'), 4, 'frame should have notified changing four times.');
 
   // Tricky.
   SC.run(function () { view2.adjust({ 'height': 110, 'borderTop': 10, 'top': -10 }); });
-  equals(view2.get('frameCallCount'), 4, 'frame should have notified changing twice.');
+  equals(view2.get('frameCallCount'), 5, 'frame should have notified changing five times.');
 
   SC.run(function () { view2.adjust('width', null); });
-  equals(view2.get('frameCallCount'), 5, 'frame should have notified changing thrice.');
+  equals(view2.get('frameCallCount'), 6, 'frame should have notified changing six times.');
 
   // Tricky.
   SC.run(function () { view2.adjust('width', 200); });
-  equals(view2.get('frameCallCount'), 6, 'frame should have notified changing thrice.');
+  equals(view2.get('frameCallCount'), 7, 'frame should have notified changing seven times.');
 });
 
 test("making sure that the frame value is correct inside viewDidResize()", function() {
@@ -141,51 +174,101 @@ test("When parentViewDidResize is called on a view, it should only notify on fra
     });
 
   // try with fixed layout
-  view.set('layout', { top: 10, left: 10, height: 10, width: 10 });
+  SC.run(function () {
+    view.set('layout', { top: 10, left: 10, height: 10, width: 10 });
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ width: 90, height: 90 });
+  });
+  view.viewDidResize.expect(0, "Should not notify view resize with fixed position and fixed size");
+  equals(view.frameCallCount, 0, 'Should not notify frame changed with fixed position and fixed size.');
+
+  // Try with flexible height
+  SC.run(function () {
+    view.set('layout', { top: 10, left: 10, bottom: 10, width: 10 });
+    // Adjust height.
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ height: 80 });
+  });
+  view.viewDidResize.expect(1, "View with fixed width and flexible height SHOULD resize when parent's height is adjusted");
+  equals(view.frameCallCount, 1, "Adjusting parent's height SHOULD notify frame with fixed position, fixed width and flexible height");
+
+  // Adjust width.
   view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 90, height: 90 });
-  view.viewDidResize.expect(0);
-  equals(view.frameCallCount, 0, 'should not notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
 
-  // try with flexible height
-  view.set('layout', { top: 10, left: 10, bottom: 10, width: 10 });
+  SC.run(function () {
+    parentView.adjust({ width: 80 });
+  });
+  view.viewDidResize.expect(0, "View with fixed width and flexible height should NOT resize when parent's width is adjusted");
+  equals(view.frameCallCount, 0, "Adjusting parent's width should NOT notify frame with fixed position, fixed width and flexible height");
+
+  // Adjust both.
   view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 80, height: 80 });
-  view.viewDidResize.expect(1);
-  equals(view.frameCallCount, 1, 'should notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
+
+  SC.run(function () {
+    parentView.adjust({ width: 90, height: 90 });
+  });
+  view.viewDidResize.expect(1, "View with fixed width and flexible height SHOULD resize when parent's height and width are adjusted");
+  equals(view.frameCallCount, 1, "Adjusting parent's height and width SHOULD notify frame with fixed position, fixed width and flexible height");
 
   // try with flexible width
-  view.set('layout', { top: 10, left: 10, height: 10, right: 10 });
+  SC.run(function () {
+    view.set('layout', { top: 10, left: 10, height: 10, right: 10 });
+    // Adjust height.
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ height: 80 });
+  });
+  view.viewDidResize.expect(0, "View with flexible width and fixed height should NOT resize when parent's height is adjusted");
+  equals(view.frameCallCount, 0, "Adjusting parent's height should NOT notify frame with fixed position, flexible width and fixed height");
+
+  // Adjust width.
+  view.viewDidResize.reset(); view.frameCallCount = 0;
+  SC.run(function () {
+    parentView.adjust({ width: 80 });
+  });
+  view.viewDidResize.expect(1, "View with flexible width and fixed height SHOULD resize when parent's width is adjusted");
+  equals(view.frameCallCount, 1, "Adjusting parent's width SHOULD notify frame with fixed position, flexible width and fixed height");
+
+  // Adjust both.
   view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 70, height: 70 });
-  view.viewDidResize.expect(1);
-  equals(view.frameCallCount, 1, 'should notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
+  SC.run(function () {
+    parentView.adjust({ width: 90, height: 90 });
+  });
+  view.viewDidResize.expect(1, "View with flexible width and fixed height SHOULD resize when parent's height and width are adjusted");
+  equals(view.frameCallCount, 1, "Adjusting parent's height and width SHOULD notify frame with fixed position, flexible width and fixed height");
 
   // try with right align
-  view.set('layout', { top: 10, right: 10, height: 10, width: 10 });
-  view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 60, height: 60 });
+  SC.run(function () {
+    view.set('layout', { top: 10, right: 10, height: 10, width: 10 });
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ width: 60, height: 60 });
+  });
   view.viewDidResize.expect(0);
   equals(view.frameCallCount, 1, 'right align: should notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
 
   // try with bottom align
-  view.set('layout', { left: 10, bottom: 10, height: 10, width: 10 });
-  view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 50, height: 50 });
+  SC.run(function () {
+    view.set('layout', { left: 10, bottom: 10, height: 10, width: 10 });
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ width: 50, height: 50 });
+  });
   view.viewDidResize.expect(0);
   equals(view.frameCallCount, 1, 'bottom align: should notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
 
   // try with center horizontal align
-  view.set('layout', { centerX: 10, top: 10, height: 10, width: 10 });
-  view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 40, height: 40 });
+  SC.run(function () {
+    view.set('layout', { centerX: 10, top: 10, height: 10, width: 10 });
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ width: 40, height: 40 });
+  });
   view.viewDidResize.expect(0);
   equals(view.frameCallCount, 1, 'centerX: should notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
 
   // try with center vertical align
-  view.set('layout', { left: 10, centerY: 10, height: 10, width: 10 });
-  view.viewDidResize.reset(); view.frameCallCount = 0;
-  parentView.adjust({ width: 30, height: 30 });
+  SC.run(function () {
+    view.set('layout', { left: 10, centerY: 10, height: 10, width: 10 });
+    view.viewDidResize.reset(); view.frameCallCount = 0;
+    parentView.adjust({ width: 30, height: 30 });
+  });
   view.viewDidResize.expect(0);
   equals(view.frameCallCount, 1, 'centerY: should notify frame changed when isFixedPosition: %@ and isFixedSize: %@'.fmt(view.get('isFixedPosition'), view.get('isFixedSize')));
 });

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

@@ -424,6 +424,27 @@ test("Test showing and hiding parentView updates child views.", function () {
   view.destroy();
 });
 
+test("Test showing parentView with transitionShow", function () {
+  var parentView = SC.View.create({
+    isVisible: NO,
+    transitionShow: { run: function() {} }
+  });
+  var childView = SC.View.create();
+  childView._doAdopt(parentView);
+  parentView._doRender();
+  parentView._doAttach(document.body);
+
+  SC.run(function() { parentView.set('isVisible', YES) });
+
+  equals(parentView.viewState, SC.View.ATTACHED_SHOWING, "Upon being made visible, a view with a transition is in state");
+  equals(childView.viewState, SC.View.ATTACHED_SHOWN, "A visible view whose parent is ATTACHED_SHOWING is in state.");
+
+  parentView.destroy();
+  parentView = null;
+  childView.destroy();
+  childView = null;
+});
+
 test("Test hiding with transitionHide", function () {
   var child = SC.View.create(),
     transitionHide = { run: function () {} },
@@ -454,6 +475,35 @@ test("Test hiding with transitionHide", function () {
   view.destroy();
 });
 
+test("Adjusting unrelated layout property (not specified in transition's layoutProperties) during transition.", function() {
+  var transition = {
+    layoutProperties: ['opacity'],
+    run: function (view) {
+      view.adjust('opacity', 0);
+      view.invokeNext(view.didTransitionIn);
+    }
+  }
+  var view = SC.View.create({
+    transitionIn: transition,
+    layout: { height: 40 },
+    didTransitionIn: function() {
+      sc_super();
+      equals(this.getPath('layout.height'), 30, "height adjusted during an opacity transition is retained after the transition is complete");
+      start();
+    }
+  });
+
+  SC.run(function() {
+    view._doRender();
+    view._doAttach(document.body);
+    equals(view.getPath('layout.height'), 40, 'PRELIM: View height starts at 40');
+    equals(view.get('viewState'), SC.View.ATTACHED_BUILDING_IN, "PRELIM: View is building in");
+    view.adjust('height', 30);
+    stop(250);
+  });
+
+});
+
 /** isVisible */
 var child, view;
 module("SC.View isVisible integration with shown and hidden state", {
@@ -598,10 +648,10 @@ test("Test hiding and showing a showing view in same run loop should not update
   // Hide the view using isVisible.
   SC.run(function () {
     equals(view.viewState, SC.CoreView.ATTACHED_SHOWING, "The view should be in the state");
-    equals(child.viewState, SC.CoreView.ATTACHED_HIDDEN_BY_PARENT, "The child view should be in the state");
+    equals(child.viewState, SC.CoreView.ATTACHED_SHOWN, "The child view should be in the state");
 
     ok(view.get('isVisibleInWindow'), "isVisibleInWindow should be true");
-    ok(!child.get('isVisibleInWindow'), "isVisibleInWindow of child should be false");
+    ok(child.get('isVisibleInWindow'), "isVisibleInWindow of child should be true");
 
     view.set('isVisible', false);
     equals(view.viewState, SC.CoreView.ATTACHED_HIDDEN, "The view should be in the state");

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

@@ -167,6 +167,16 @@ SC.CoreView.reopen(
   */
   childViews: SC.EMPTY_CHILD_VIEWS_ARRAY,
 
+  /**
+    Use this property to automatically mix in a collection of mixins into all
+    child views created by the view. This collection is applied during createChildView
+    @property
+
+    @type Array
+    @default null
+  */
+  autoMixins: null,
+
   // ..........................................................
   // LAYER SUPPORT
   //
@@ -251,7 +261,7 @@ SC.CoreView.reopen(
     @returns {DOMElement} the discovered layer
   */
   findLayerInParentLayer: function (parentLayer) {
-    var id = "#" + this.get('layerId');
+    var id = "#" + this.get('layerId').escapeCssIdForSelector();
     return jQuery(id, parentLayer)[0] || jQuery(id)[0];
   },
 
@@ -908,6 +918,11 @@ SC.CoreView.reopen(
   // CORE DISPLAY METHODS
   //
 
+  /** @private
+    Caches the layerId to detect when it changes.
+    */
+  _lastLayerId: null,
+
   /** @private
     Setup a view, but do not finish waking it up.
 
@@ -918,18 +933,20 @@ SC.CoreView.reopen(
        dispatch
   */
   init: function () {
-    var childViews;
+    var childViews, layerId;
 
     sc_super();
 
+    layerId = this._lastLayerId = this.get('layerId');
+
     // Register the view for event handling. This hash is used by
     // SC.RootResponder to dispatch incoming events.
     //@if (debug)
-    if (SC.View.views[this.get('layerId')]) {
+    if (SC.View.views[layerId]) {
       throw new Error("Developer Error: A view with layerId, '%@', already exists.  Each view must have a unique layerId.".fmt(this.get('layerId')));
     }
     //@endif
-    SC.View.views[this.get('layerId')] = this;
+    SC.View.views[layerId] = this;
 
     // setup classNames
     this.classNames = this.get('classNames').slice();
@@ -961,8 +978,11 @@ SC.CoreView.reopen(
   },
 
   /**
-    Frame describes the current bounding rect for your view.  This is always
-    measured from the top-left corner of the parent view.
+    Frame describes this view's current bounding rect, relative to its parent view. You
+    can use this, for example, to reliably access a width for a view whose layout is
+    defined with left and right. (Note that width and height values are calculated in
+    the parent view's frame of reference as well, which has consequences for scaled
+    views.)
 
     @type Rect
     @test in layoutStyle
@@ -993,9 +1013,12 @@ SC.CoreView.reopen(
       /*
         TODO Can probably have some better width/height values - CC
         FIXME This will probably not work right with borders - PW
+        FIXME This assumes and reports a scale of 1 - DCP
       */
-      f.width = layer.offsetWidth;
-      f.height = layer.offsetHeight;
+      f.width = f.originalWidth = layer.offsetWidth;
+      f.height = f.originalHeight = layer.offsetHeight;
+      f.scale = 1;
+      f.transformOriginX = f.transformOriginY = 0.5;
       return f;
     }
 
@@ -1036,9 +1059,9 @@ SC.CoreView.reopen(
 
   /**
     The clipping frame returns the visible portion of the view, taking into
-    account the clippingFrame of the parent view.  Keep in mind that
-    the clippingFrame is in the context of the view itself, not it's parent
-    view.
+    account the clippingFrame of the parent view.  (Note that, in contrast
+    to `frame`, `clippingFrame` is in the context of the view itself, not
+    its parent view.)
 
     Normally this will be calculated based on the intersection of your own
     clippingFrame and your parentView's clippingFrame.
@@ -1046,20 +1069,48 @@ SC.CoreView.reopen(
     @type Rect
   */
   clippingFrame: function () {
-    var f = this.get('frame'),
-        ret = f,
-        pv, cf;
+    var f = this.get('frame');
 
+    // FAST PATH: No frame, no clipping frame.
     if (!f) return null;
-    pv = this.get('parentView');
-    if (pv) {
-      cf = pv.get('clippingFrame');
-      if (!cf) return { x: 0, y: 0, width: f.width, height: f.height};
-      ret = SC.intersectRects(cf, f);
-    }
+
+    var scale = (f.scale == null) ? 1 : f.scale,
+        scaleIsArray = NO,
+        pv = this.get('parentView'),
+        pcf = pv ? pv.get('clippingFrame') : null,
+        sf, spcf, originX, originY, deltaH, deltaW,
+        ret;
+
+    // FAST PATH: No parent clipping frame, no change. (The origin and scale are reset from parent view's
+    // context to our own.)
+    if (!pcf) return { x: 0, y: 0, width: f.width / scale, height: f.height / scale};
+
+    // Get the intersection.
+    ret = SC.intersectRects(pcf, f);
+
+    // Reorient the top-left from the parent's origin to ours.
     ret.x -= f.x;
     ret.y -= f.y;
 
+    // If we're scaled, we have to scale the intersected rectangle from our parent's frame of reference
+    // to our own.
+    if (scale !== 1) {
+      var scaleX, scaleY;
+      // We're scaling from parent space into our space, so the scale is reversed. (Layout scale may be an array.)
+      if (SC.typeOf(scale) === SC.T_ARRAY) {
+        scaleX = 1 / scale[0];
+        scaleY = 1 / scale[1];
+      } else {
+        scaleX = scaleY = 1 / scale;
+      }
+
+      // Convert the entire rectangle into our scale.
+      ret.x *= scaleX;
+      ret.width *= scaleX;
+      ret.y *= scaleY;
+      ret.height *= scaleY;
+    }
+
     return ret;
   }.property('parentView', 'frame').cacheable(),
 
@@ -1363,31 +1414,39 @@ SC.CoreView.reopen(
     @test in createChildViews
   */
   createChildView: function (view, attrs) {
-    if (!view.isClass) {
-      attrs = view;
-    } else {
+    // Create the view if it is a class.
+    if (view.isClass) {
       // attrs should always exist...
       if (!attrs) { attrs = {}; }
+
       // clone the hash that was given so we do not pollute it if it's being reused
       else { attrs = SC.clone(attrs); }
-    }
 
-    attrs.owner = attrs.parentView = this;
+      // Assign the owner, parentView & page to ourself.
+      attrs.owner = attrs.parentView = this;
+      if (!attrs.page) { attrs.page = this.page; }
 
-    // We need to set isVisibleInWindow before the init method is called on the view
-    // The prototype check is a bit hackish and should be revisited - PDW
-    // if (view.isClass && view.prototype.hasVisibility) {
-    //   attrs.isVisibleInWindow = this.get('isVisibleInWindow');
-    // }
-
-    if (!attrs.page) { attrs.page = this.page; }
-
-    // Now add this to the attributes and create.
-    if (view.isClass) {
       // Track that we created this view.
       attrs.createdByParent = true;
 
-      view = view.create(attrs);
+      // Insert the autoMixins if defined
+      var applyMixins = this.autoMixins;
+      if (!!applyMixins) {
+        applyMixins = SC.clone(applyMixins);
+        applyMixins.push(attrs);
+        view = view.create.apply(view, applyMixins);
+      } else {
+        view = view.create(attrs);
+      }
+    // Assign the parentView & owner 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); }
     }
 
     return view;
@@ -1626,8 +1685,18 @@ SC.CoreView.reopen(
     @default null
     @since Version 1.10
   */
-  transitionHideOptions: null
+  transitionHideOptions: null,
+
+  // ............................................
+  // Patches
+  //
 
+  /** @private
+    Override this method to apply design modes to this view and
+    its children.
+    @see SC.View
+  */
+  updateDesignMode: function (lastDesignMode, designMode) {}
 });
 
 SC.CoreView.mixin(
@@ -1862,10 +1931,43 @@ SC.CoreView.unload = function () {
 
   Base class for managing a view.  Views provide two functions:
 
-   1. They translate state and events into drawing instructions for the
-     web browser and
-   2. They act as first responders for incoming keyboard, mouse, and
-     touch events.
+   1. They display – translating your application's state into drawing
+     instructions for the web browser, and
+   2. They react – acting as responders for incoming keyboard, mouse, and touch
+     events.
+
+  View Basics
+  ====
+
+  SproutCore's view layer is made up of a tree of SC.View instances, nested
+  using the `childViews` list – usually an array of local property names. You
+  position each view by specifying a set of layout keys, like 'left', 'right',
+  'width', or 'centerX', in a hash on the layout property. (See the 'layout'
+  documentation for more.)
+
+  Other than positioning, SproutCore relies on CSS for all your styling needs.
+  Set an array of CSS classes on the `classNames` property, then style them with
+  standard CSS. (SproutCore's build tools come with Sass support built in, too.)
+  If you have a class that you want automatically added and removed as another
+  property changes, take a look at `classNameBindings`.
+
+  Different view classes do different things. The so-called "Big Five" view
+  classes are SC.LabelView, for displaying (optionally editable, optionally
+  localizable) text; SC.ButtonView, for the user to poke; SC.CollectionView
+  (most often as its subclass SC.ListView) for displaying an array of content;
+  SC.ContainerView, for easily swapping child views in and out; and SC.ScrollView,
+  for containing larger views and allowing them to be scrolled.
+
+  All views live in panes (subclasses of SC.Pane, like SC.MainPane and SC.PanelPane),
+  which are parentless views that know how to append themselves directly to the document.
+  Panes also serve as routers for events, like mouse, touch and keyboard events, that are
+  bound for their views. (See "View Events" below for more.)
+
+  For best performance, you should define your view and pane instances with `extend()`
+  inside an SC.Page instance, getting them as needed with `get`. As its name suggests,
+  SC.Page's only job is to instantiate views once when first requested, deferring the
+  expensive view creation process until each view is needed. Correctly using SC.Page is
+  considered an important best practice for high-performance applications.
 
   View Initialization
   ====
@@ -1903,6 +2005,199 @@ SC.CoreView.unload = function () {
      before its layer is removed from the DOM. You can use this to reverse any
      setup that is performed in `didAppendToDocument`.
 
+  View Events
+  ====
+
+  One of SproutCore's optimizations is application-wide event delegation: SproutCore
+  handles and standardizes events for you before sending them through your view layer's
+  chain of responding views. You should never need to attach event listeners to elements;
+  instead, just implement methods like `click`, `doubleClick`, `mouseEntered` and
+  `dataDragHover` on your views.
+
+  Note that events generally bubble up an event's responder chain, which is made up of the
+  targeted view (i.e. the view whose DOM element received the event), and its chain of
+  parentViews up to its pane. (In certain rare cases, you may wish to manipulate the responder
+  chain to bypass certain views; you can do so by overriding a view's `nextResponder` property.)
+
+  Simple mouse click events
+  ----
+  In many situations, all you need are clicks - in which case, just implement `click` or
+  `doubleClick` on your views. Note that these events bubble up the responder chain until
+  they encounter a view which implements the event method. For example, if a view and its
+  parent both implement `click`, the parent will not be notified of the click. (If you want a
+  view to handle the event AND allow the event to keep bubbling to its parent views, no
+  problem: just be sure to return NO from the event method.)
+  - `click` -- Called on a view when the user clicks the mouse on a view. (Note that the view
+    on which the user lifts the mouse button will receive the `click` event, regardless of
+    whether the user depressed the mouse button elsewhere. If you need finer-grained control
+    than this, see "Granular mouse click events" below.)
+  - `doubleClick` -- Called on a view when a user has double-clicked it. Double-clicks are
+    triggered when two clicks of the same button happen within eight pixels and 250ms of each
+    other. (If you need finer-grained control than this, see "Granular mouse click events"
+    below.) The same view may receive both `click` and `doubleClick` events.
+
+  Note that defining application behavior directly in event handlers is usually a bad idea; you
+  should follow the target/action pattern when possible. See SC.ButtonView and SC.ActionSupport.
+  Also note that you will not need to implement event handling yourself on most built-in
+  SproutCore controls.
+
+  Note that `click` and `doubleClick` event handlers on your views will not be notified of touch
+  events; you must also implement touch handling. See "Touch events" below.
+
+  Mouse movement events
+  ----
+  SproutCore normalizes (and brings sanity to) mouse movement events by calculating when
+  the mouse has entered and exited views, and sending the correct event to each view in
+  the responder chain. For example, if a mouse moves within a parent view but crosses from
+  one child view to another, the parent view will receive a mouseMoved event while the child
+  views will receive mouseEntered and mouseExit events.
+
+  In contrast to mouse click events, mouse movement events are called on the entire responder
+  chain regardless of how you handle it along the way - a view and its parent, both implementing
+  event methods, will both be notified of the event.
+
+  - `mouseEntered` -- Called when the cursor first enters a view. Called on every view that has
+    just entered the responder chain.
+  - `mouseMoved` -- Called when the cursor moves over a view.
+  - `mouseExited` -- Called when the cursor leaves a view. Called on every view that has
+    just exited the responder chain.
+
+  Granular mouse click events
+  ----
+  If you need more granular handling of mouse click events than what is provided by `click`
+  and `doubleClick`, you can handle their atomic components `mouseDown`, `mouseDrag` and
+  `mouseUp`. Like the compound events, these events bubble up their responder chain towards
+  the pane until they find an event which implements the event handler method. (Again, to
+  handle an event but allow it to continue bubbling, just return NO.)
+
+  It bears emphasizing that `mouseDrag` and `mouseUp` events for a given mouse click sequence
+  are *only ever called* on the view which successfully responded to the `mouseDown` event. This
+  gives `mouseDown` control over which view responder-chain is allowed to handle the entire
+  click sequence.
+
+  (Note that because of how events bubble up the responder chain, if a child view implements
+  `mouseDown` but not `mouseDrag` or `mouseUp`, those events will bubble to its parent. This
+  may cause unexpected behavior if similar events are handled at different parts of your view
+  hierarchy, for example if you handle `mouseDown` in a child and a parent, and only handle
+  `mouseUp` in the parent.)
+
+  - `mouseDown` -- Called on the target view and responder chain when the user depresses a
+    button. A view must implement `mouseDown` (and not return NO) in order to be notified
+    of the subsequent drag and up events.
+  - `mouseDrag` -- Called on the target view if it handled mouseDown. A view must implement
+    mouseDown (and not return NO) in order to receive mouseDrag; only the view which handled a
+    given click sequence's mouseDown will receive `mouseDrag` events (and will continue to
+    receive them even if the user drags the mouse off of it).
+  - `mouseUp` -- Called on the target view when the user lifts a mouse button. A view must
+    implement mouseDown (and not return NO) in order to receive mouseUp.
+
+  SproutCore implements a higher-level API for handling in-application dragging and dropping.
+  See `SC.Drag`, `SC.DragSource`, `SC.DragDataSource`, and `SC.DropTarget` for more.
+
+  Data-drag events
+  ----
+  Browsers implement a parallel system of events for drags which bring something with them: for
+  example, dragging text, an image, a URL or (in modern browsers) a file. They behave differently,
+  and require different responses from the developer, so SproutCore implements them as a separate
+  set of "data drag" events. These behave much like mouse events; the data-drag movement events
+  bubble indiscriminately, and the data-drag drop event bubbles until it finds a view which handles
+  it (and doesn't return NO).
+
+  By default, SproutCore cancels the default behavior of any data drag event which carries URLs
+  or files, as by default these would quit the app and open the dragged item in the browser. If
+  you wish to implement data drag-and-drop support in your application, you should set the event's
+  dataTransfer.dropEffect property to 'copy' in a `dataDragHovered` event handler.
+
+  - `dataDragEntered` -- Triggered when a data drag enters a view. You can use this handler to
+    update the view to visually signal that a drop is possible.
+  - `dataDragHovered` -- Triggered when the browser sends a dragover event to a view. If you want
+    to support dropping data on your view, you must set the event's `dataTransfer.dropEffect`
+    property to 'copy' (or related). Note that `dataDragHovered` is given access to dragenter
+    events as well, so you do not need to worry about this in your `dataDragEntered` methods.
+  - `dataDragDropped` -- If the last hover event's dropEffect was set correctly, this event will
+    give the view access to the data that was dropped. This event bubbles up the responder chain
+    until it finds a view which handles it (and doesn't return NO).
+  - `dataDragExited` -- Triggered when a data drag leaves a view. You can use this handler to
+    update the view to remove the visual drop signal. This event is fired regardless of whether
+    a drop occurred.
+
+
+  Touch events
+  ----
+  Touch events can be much more complicated than mouse events: multiple touches may be in flight
+  at once, and views may wish to handle average touches rather than individual touches.
+
+  Basic support for touch events is required to make your application touch-aware. (You will not
+  need to implement touch support for built-in SproutCore controls, which are touch-aware out of
+  the box.) The basic touch event handlers are `touchStart` and `touchEnd`; if all you need is
+  basic support then you can simply proxy these events to their mouse counterparts.
+
+  The counterpart to `mouseDragged` is `touchesDragged`, which is passed two arguments: a special
+  multitouch event object which includes methods for accessing information about all currently
+  in-flight touches, and a list of touches active on the current view. If you need to check the
+  status of touches currently being handled by other views, the special multitouch event object
+  exposes the `touchesForView` method. It also exposes the convenient `averagedTouchesForView`
+  method, which gives you easy access to an average touch center and distance. Unlike `mouseDragged`,
+  `touchesDragged` does not bubble, being only called on views whic handled `touchStart` for touches
+  which have moved.
+
+  To facilitate intuitive behavior in situations like scroll views with touch handlers inside them,
+  you may capture a touch from part way up its responder chain before it has a chance to bubble
+  up from the target. To capture a touch, expose a method on your view called `captureTouch` which
+  accepts the touch as its only argument, and which returns YES if you would like to capture that
+  touch. A captured touch will not bubble as normal, instead bubbling up from the capture point. Any
+  child views will not have the opportunity to handle the captured event unless you implement custom
+  responder swapping yourself.
+
+  Touch events bubble differently than mouse and keyboard events. The initial reverse `captureTouch`
+  bubbling is followed by regular `touchStart` bubbling; however, once this process has found a view
+  that's willing to respond to the touch, further events are applied only to that view. If a view
+  wishes to assign respondership for a touch to a different view, it can call one of several methods
+  on the touch object. For a fuller discussion of touch events, touch responder behavior, and the touch
+  object itself, see the documentation for SC.Touch.
+
+  Keyboard events
+  ----
+  The basic key events are `keyDown` and `keyUp`. In order to be notified of keyboard events,
+  a view must set `acceptsFirstResponder` to `YES`, and be on an active pane with
+  `acceptsKeyPane` set to YES. (You may also need to call `becomeFirstResponder` on your view
+  on a `mouseDown`, for example, to focus it. You can verify whether your view has successfully
+  received first responder status by checking `isFirstResponder`.)
+
+  Note that key events bubble similarly to mouse click events: they will stop bubbling if they
+  encounter a view which handles the event and does not return NO.
+
+  SproutCore implements a set of very convenient, higher-level keyboard events for action keys
+  such as *tab*, *enter*, and the arrow keys. These are not triggered automatically, but you
+  can gain access to them by proxying the keyboard event of your choice to `interpretKeyEvent`.
+  For example:
+
+        // Proxy the keyboard event to SC's built-in interpreter.
+        keyDown: function(evt) {
+          return this.interpretKeyEvents(evt);
+        },
+        // The interpreter will trigger the view's `cancel` event if the escape key was pressed.
+        cancel: function(evt) {
+          console.log('The escape key was pressed.'');
+        }
+
+  This will analyze the key press and fire an appropriate event. These events include, but are
+  not limited to:
+
+  - `moveUp`, `moveDown`, `moveLeft`, `moveRight` -- The arrow keys
+  - `insertNewline` -- The enter key (note the lower-case 'line')
+  - `cancel` -- The escape key
+  - `insertTab` -- The tab key
+  - `insertBacktab` -- Shift + the tab key
+  - `moveToBeginningOfDocument` -- The *home* key
+  - `moveToEndOfDocument` -- The *end* key
+  - `pageUp` and `pageDown`
+  - `moveLeftAndModifySelection` -- Shift + the left arrow
+  - `selectAll` -- Ctrl + A / Cmd + A
+
+  For a full list of available methods, see the key values on SC.BASE_KEY_BINDINGS and
+  SC.MODIFIED_KEY_BINDINGS.
+
   @extends SC.Responder
   @extends SC.DelegateSupport
   @since SproutCore 1.0
@@ -1911,7 +2206,326 @@ SC.CoreView.unload = function () {
 SC.View = SC.CoreView.extend(/** @scope SC.View.prototype */{
   classNames: ['sc-view'],
 
-  displayProperties: []
+  displayProperties: [],
+
+  /** @private Enhance. */
+  _executeQueuedUpdates: function () {
+    sc_super();
+
+    // Enabled
+    // Update the layout style of the layer if necessary.
+    if (this._enabledStyleNeedsUpdate) {
+      this._doUpdateEnabledStyle();
+    }
+
+    // Layout
+    // Update the layout style of the layer if necessary.
+    if (this._layoutStyleNeedsUpdate) {
+      this._doUpdateLayoutStyle();
+    }
+  },
+
+  /** Apply the attributes to the context. */
+  applyAttributesToContext: function (context) {
+    // Cursor
+    var cursor = this.get('cursor');
+    if (cursor) { context.addClass(cursor.get('className')); }
+
+    // Enabled
+    if (!this.get('isEnabled')) {
+      context.addClass('disabled');
+      context.setAttr('aria-disabled', 'true');
+    }
+
+    // Layout
+    // Have to pass 'true' for second argument for legacy.
+    this.renderLayout(context, true);
+
+    if (this.get('useStaticLayout')) { context.addClass('sc-static-layout'); }
+
+    // Background color defaults to null; for performance reasons we should ignore it
+    // unless it's ever been non-null.
+    var backgroundColor = this.get('backgroundColor');
+    if (!SC.none(backgroundColor) || this._scv_hasBackgroundColor) {
+      this._scv_hasBackgroundColor = YES;
+      if (backgroundColor) context.setStyle('backgroundColor', backgroundColor);
+      else context.removeStyle('backgroundColor');
+    }
+
+    // Theming
+    var theme = this.get('theme');
+    var themeClassNames = theme.classNames, idx, len = themeClassNames.length;
+
+    for (idx = 0; idx < len; idx++) {
+      context.addClass(themeClassNames[idx]);
+    }
+
+    sc_super();
+
+    var renderDelegate = this.get('renderDelegate');
+    if (renderDelegate && renderDelegate.className) {
+      context.addClass(renderDelegate.className);
+    }
+
+    // @if(debug)
+    if (renderDelegate && renderDelegate.name) {
+      SC.Logger.error("Render delegates now use 'className' instead of 'name'.");
+      SC.Logger.error("Name '%@' will be ignored.", renderDelegate.name);
+    }
+    // @endif
+  },
+
+  /**
+    Computes what the frame of this view would be if the parent were resized
+    to the passed dimensions.  You can use this method to project the size of
+    a frame based on the resize behavior of the parent.
+
+    This method is used especially by the scroll view to automatically
+    calculate when scrollviews should be visible.
+
+    Passing null for the parent dimensions will use the actual current
+    parent dimensions.  This is the same method used to calculate the current
+    frame when it changes.
+
+    @param {Rect} pdim the projected parent dimensions (optional)
+    @returns {Rect} the computed frame
+  */
+  computeFrameWithParentFrame: function (pdim) {
+    // Layout.
+    var f, layout = this.get('layout');
+
+    // We can't predict the frame for static layout, so just return the view's
+    // 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;
+      return f;
+    }
+
+    f = {};
+
+    var error, layer, AUTO = SC.LAYOUT_AUTO,
+        pv = this.get('parentView'),
+        scale, oX, oY, // Used with the special case ScrollView handling below.
+        dH, dW, //shortHand for parentDimensions
+        lR = layout.right,
+        lL = layout.left,
+        lT = layout.top,
+        lB = layout.bottom,
+        lW = layout.width,
+        lH = layout.height,
+        lcX = layout.centerX,
+        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;
+    }
+
+    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;
+    }
+
+    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 (lW !== undefined) {
+        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); }
+      }
+    // handle right aligned
+    } else if (!SC.none(lR)) {
+      if (SC.none(lW)) {
+        if (SC.isPercentage(lR)) {
+          f.width = dW - (dW * lR);
+        }
+        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;
+      }
+
+    // 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;
+    } else {
+      f.x = 0; // fallback
+      if (SC.none(lW)) {
+        f.width = dW;
+      } else {
+        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 (lH !== undefined) {
+        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);
+      }
+
+    // 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;
+      } 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;
+      }
+
+    // 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;
+
+    // fallback
+    } else {
+      f.y = 0; // fallback
+      if (SC.none(lH)) {
+        f.height = dH;
+      } else {
+        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 width or height were set to auto and we have a layer, try lookup
+    if (f.height === AUTO || f.width === AUTO) {
+      layer = this.get('layer');
+      if (f.height === AUTO) f.height = layer ? layer.clientHeight : 0;
+      if (f.width === AUTO) f.width = layer ? layer.clientWidth : 0;
+    }
+
+    // Okay we have all our numbers. Let's adjust them for things.
+
+    // First, adjust for border.
+    f = this._adjustForBorder(f, layout);
+
+    // Make sure the width/height fix their min/max (note the inlining of SC.none for performance)...
+    if ((layout.maxHeight != null) && (f.height > layout.maxHeight)) f.height = layout.maxHeight;
+    if ((layout.minHeight != null) && (f.height < layout.minHeight)) f.height = layout.minHeight;
+    if ((layout.maxWidth != null) && (f.width > layout.maxWidth)) f.width = layout.maxWidth;
+    if ((layout.minWidth != null) && (f.width < layout.minWidth)) f.width = layout.minWidth;
+
+    // Finally, adjust for scale. (Scale is only defined here if we're doing special-case ScrollView stuff.)
+    f = this._adjustForScale(f, layout, scale, oX, oY);
+
+    return f;
+  },
+
+  init: function () {
+    sc_super();
+
+    // Enabled.
+    // If the view is pre-configured as disabled, then go to the proper initial state.
+    if (!this.get('isEnabled')) { this._doDisable(); }
+
+    // Layout
+    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();
+
+        // Initialize our own frame observer.
+        if (!this.get('isFixedSize') && childViewLayout.layoutDependsOnSize && childViewLayout.layoutDependsOnSize(this)) {
+          this.addObserver('frame', this, this._cvl_childViewLayoutDidChange);
+        }
+      }
+    }
+
+    // Theming
+    this._lastTheme = this.get('theme');
+
+  },
+
+  /** @private */
+  destroy: function () {
+    // Clean up.
+    this._previousLayout = null;
+
+    return sc_super();
+  },
+
+  /** SC.CoreView.prototype. */
+  removeChild: function(view) {
+    // Manipulation
+    if (!view) { return this; } // nothing to do
+    if (view.parentView !== this) {
+      throw new Error("%@.removeChild(%@) must belong to parent".fmt(this, view));
+    }
+
+    // notify views
+    // TODO: Deprecate these notifications.
+    if (view.willRemoveFromParent) { view.willRemoveFromParent() ; }
+    if (this.willRemoveChild) { this.willRemoveChild(view) ; }
+
+    sc_super();
+
+    return this;
+  }
+
 });
 
 //unload views for IE, trying to collect memory.