sproutcore 1.11.0.rc2 → 1.11.0.rc3

data/lib/frameworks/sproutcore/frameworks/statechart/system/state.js

@@ -550,7 +550,7 @@ SC.State = SC.Object.extend(
 
     @param {String} name a unique name for the given substate.
     @param {SC.State} state a class that derives from `SC.State`
-    @param {Hash} [attr] liternal to be applied to the substate
+    @param {Object} [attr] literal to be applied to the substate
     @returns {SC.State} an instance of the given state class
   */
   addSubstate: function(name, state, attr) {

data/lib/frameworks/sproutcore/frameworks/template_view/panes/template.js

@@ -51,9 +51,6 @@ SC.TemplatePane.mixin( /** @scope SC.TemplatePane */ {
 
     pane = pane.create().append();
 
-    // Normally the awake process is started in the Page, but we don't have a Page
-    pane.awake();
-
     return pane;
   }
 });

data/lib/frameworks/sproutcore/frameworks/template_view/tests/panes/template.js

@@ -18,20 +18,3 @@ test("Template panes append a main pane to the document body", function() {
   pane.remove();
   pane.destroy();
 });
-
-test("Template panes should be awoken", function(){
-  var didAwake = false;
-
-  var originalAwake = SC.MainPane.prototype.awake; // null for now, but just in case
-  SC.MainPane.prototype.awake = function(){ didAwake = true; }
-
-  var pane = SC.TemplatePane.append({
-    layerId: 'template-panes-are-so-cool',
-    template: SC.Handlebars.compile('<h1>foo bar baz</h1>')
-  });
-
-  SC.MainPane.prototype.awake = originalAwake;
-
-  ok(didAwake, "should have awoken the pane");
-  pane.destroy();
-});

data/lib/frameworks/sproutcore/frameworks/template_view/tests/views/template/collection.js

@@ -33,16 +33,18 @@ test("creating a collection view works", function() {
   var selectCollectionView  = CollectionView.create({ tagName: "select" });
   var customTagCollectionView = CollectionView.create({ tagName: "p", itemView: CustomChildView });
 
-  defaultCollectionView.createLayer();
-  ulCollectionView.createLayer();
-  olCollectionView.createLayer();
-  dlCollectionView.createLayer();
-  dlCollectionView2.createLayer();
-  dlCollectionView3.createLayer();
-  dlCollectionView4.createLayer();
-  dlCollectionView5.createLayer();
-  selectCollectionView.createLayer();
-  customTagCollectionView.createLayer();
+  SC.run(function () {
+    defaultCollectionView.createLayer();
+    ulCollectionView.createLayer();
+    olCollectionView.createLayer();
+    dlCollectionView.createLayer();
+    dlCollectionView2.createLayer();
+    dlCollectionView3.createLayer();
+    dlCollectionView4.createLayer();
+    dlCollectionView5.createLayer();
+    selectCollectionView.createLayer();
+    customTagCollectionView.createLayer();
+  });
 
   ok(defaultCollectionView.$().is("ul"), "Unordered list collection view was rendered (Default)");
   equals(defaultCollectionView.$('li').length, 1, "List item was rendered (Default)");
@@ -87,7 +89,9 @@ test("not passing a block to the collection helper creates a collection", functi
     template: SC.Handlebars.compile('{{collection "TemplateTests.CollectionTestView"}}')
   });
 
-  view.createLayer();
+  SC.run(function () {
+    view.createLayer();
+  });
   equals(view.$('aside').length, 3, 'one aside element is created for each content item');
 });
 
@@ -100,7 +104,9 @@ test("passing a block to the collection helper sets it as the template for examp
     template: SC.Handlebars.compile('{{#collection "TemplateTests.CollectionTestView"}} <aside></aside> {{/collection}}')
   });
 
-  view.createLayer();
+  SC.run(function () {
+    view.createLayer();
+  });
   equals(view.$('aside').length, 3, 'one aside element is created for each content item');
 });
 
@@ -113,7 +119,9 @@ test("a block passed to a collection helper defaults to the content property of
     template: SC.Handlebars.compile('{{#collection "TemplateTests.CollectionTestView"}} <aside>{{content}}</aside> {{/collection}}')
   });
 
-  view.createLayer();
+  SC.run(function () {
+    view.createLayer();
+  });
 
   equals(view.$('li:has(aside:contains("foo")) + li:has(aside:contains("bar")) + li:has(aside:contains("baz"))').length, 1, 'one aside element is created for each content item');
 });
@@ -127,13 +135,18 @@ test("a block passed to a collection helper defaults to the view", function() {
     template: SC.Handlebars.compile('{{#collection "TemplateTests.CollectionTestView"}} <aside>{{content}}</aside> {{/collection}}')
   });
 
-  view.createLayer();
+  SC.run(function () {
+    view.createLayer();
+  });
+
   equals(view.$('li:has(aside:contains("foo")) + li:has(aside:contains("bar")) + li:has(aside:contains("baz"))').length, 1, 'precond - one aside element is created for each content item');
 
   SC.run(function() {
     TemplateTests.CollectionTestView.set('content', []);
   });
   equals(view.$('aside').length, 0, "all list item views should be removed from DOM");
+
+  view.destroyLayer();
 });
 
 test("should include an id attribute if id is set in the options hash", function() {
@@ -141,7 +154,9 @@ test("should include an id attribute if id is set in the options hash", function
     template: SC.Handlebars.compile('{{#collection "TemplateTests.CollectionTestView" id="baz"}}foo{{/collection}}')
   });
 
-  view.createLayer();
+  SC.run(function () {
+    view.createLayer();
+  });
   equals(view.$('ul#baz').length, 1, "adds an id attribute");
 });
 
@@ -153,7 +168,9 @@ test("should give its item views the class specified by itemClass", function() {
     template: SC.Handlebars.compile('{{#collection "TemplateTests.itemClassTestCollectionView" itemClass="baz"}}foo{{/collection}}')
   });
 
-  view.createLayer();
+  SC.run(function () {
+    view.createLayer();
+  });
   equals(view.$('ul li.baz').length, 3, "adds class attribute");
 });
 
@@ -266,7 +283,7 @@ test("should re-render when the content object changes", function() {
     template: SC.Handlebars.compile('{{#collection TemplateTests.RerenderTest}}{{content}}{{/collection}}')
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
 
   SC.run(function() {
     view.childViews[0].set('content', ['bing', 'bat', 'bang']);
@@ -290,7 +307,7 @@ test("should allow changes to content object before layer is created", function(
   view.set('content', [1, 2, 3]);
   view.set('content', [1, 2]);
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
   ok(view.$('li').length);
 });
 
@@ -299,10 +316,10 @@ test("should allow changing content property to be null", function() {
     content: [1, 2, 3]
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
   equals(view.$('li').length, 3, "precond - creates three elements");
 
-  view.set('content', null);
+  SC.run(function() { view.set('content', null); });
   equals(view.$('li').length, 0, "should not create any li elements");
 });
 
@@ -326,7 +343,7 @@ test("collection view within a collection view with default content should rende
     template: SC.Handlebars.compile('{{collection "TemplateTests.OuterCollectionView"}}')
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
 
   equals(view.$('ul ul:eq(0) li').length, 3, 'first nested collection view should have 3 list items');
   equals(view.$('ul ul:eq(1) li').length, 2, 'second nested collection view should have 2 list items');
@@ -353,7 +370,7 @@ test("collection view within a collection view should have the right childViews"
     template: SC.Handlebars.compile('{{collection "TemplateTests.OuterCollectionView"}}')
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
 
   var outer       = view.childViews[0];
   var firstInner  = outer.childViews[0].childViews[0];
@@ -376,7 +393,7 @@ test("should render inverse template when its present and there is no content",
     template: SC.Handlebars.compile('{{collection "TemplateTests.CollectionTestView"}}')
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
 
   equals(view.$('h1').text(), 'inverse', 'collection view with no content and inverse template should render inverse template');
 });
@@ -397,7 +414,7 @@ test("should render inverse template name when its present and there is no conte
     template: SC.Handlebars.compile('{{collection "TemplateTests.CollectionTestView"}}')
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
 
   equals(view.$('h1').text(), 'inverse template from file', 'collection view with no content and inverse template name should render template');
 });
@@ -425,7 +442,7 @@ test("#collection helper should raise an error when passing a first argument tha
   var errored = false;
 
   try {
-    view.createLayer();
+    SC.run(function() { view.createLayer(); });
   } catch(e) {
     errored = true;
   }
@@ -438,7 +455,7 @@ test("should still cleanup childViews after removed from DOM", function() {
     content: [1, 2, 3]
   });
 
-  view.createLayer();
+  SC.run(function() { view.createLayer(); });
   equals(view.get('childViews').length, 3, "precond - creates three child views");
 
   view.destroyLayer();

data/lib/frameworks/sproutcore/frameworks/template_view/views/bindable_span.js

@@ -174,8 +174,15 @@ SC._BindableSpan = SC.TemplateView.extend(
     elem = context.element();
     this.$().replaceWith(elem);
     this.set('layer', elem);
-    this._rendered();
-    this._callOnChildViews('_rendered');
+
+    this._sc_addRenderedStateObservers();
+    this._callOnChildViews('_sc_addRenderedStateObservers');
+
+    // Notify for each child (that changed state) in reverse so that each child is in the proper
+    // state before its parent potentially alters its state. For example, a parent could modify
+    // children in `didCreateLayer`.
+    this._callOnChildViews('_notifyDidRender', false);
+    this._notifyDidRender();
   }
 });
 

data/lib/frameworks/sproutcore/themes/ace/resources/collection/normal/list.css

@@ -1,5 +1,4 @@
 $theme.collection {
-  background: white;
 
   &.alternating .sc-collection-item.even {
     background: #eef3f6;

data/lib/frameworks/sproutcore/themes/ace/resources/scroll/scroll.css

@@ -0,0 +1,3 @@
+$theme.sc-scroll-view {
+  background-color: white;
+}

data/sproutcore.gemspec

@@ -7,7 +7,7 @@ is_jruby = (os == "java")
 Gem::Specification.new do |s|
   s.name = 'sproutcore'
   s.version = SproutCore::VERSION
-  s.authors = 'Strobe, Inc., Apple Inc. and contributors'
+  s.authors = '7x7 Software, Inc., Apple Inc. and contributors'
   s.email = 'community@sproutcore.com'
   s.license = 'MIT'
   s.homepage = 'http://www.sproutcore.com'
@@ -21,9 +21,9 @@ Gem::Specification.new do |s|
   s.add_dependency 'erubis', "~> 2.6"
   s.add_dependency 'thor', '~> 0.18'
   s.add_dependency 'sass', '~> 3.1'
-  s.add_dependency 'haml', '~> 3.1'
+  s.add_dependency 'haml', '~> 4.0'
 
-  s.add_dependency 'compass', '~> 0.11'
+  s.add_dependency 'compass', '~> 1.0'
   s.add_dependency 'chunky_png', '~> 1.2'
 
   s.add_dependency 'eventmachine', '~> 1.0'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sproutcore
 version: !ruby/object:Gem::Version
-  version: 1.11.0.rc2
+  version: 1.11.0.rc3
 platform: ruby
 authors:
-- Strobe, Inc., Apple Inc. and contributors
+- 7x7 Software, Inc., Apple Inc. and contributors
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-09 00:00:00.000000000 Z
+date: 2015-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack
@@ -100,28 +100,28 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '3.1'
+        version: '4.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '3.1'
+        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: '1.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: '1.0'
 - !ruby/object:Gem::Dependency
   name: chunky_png
   requirement: !ruby/object:Gem::Requirement
@@ -1139,8 +1139,7 @@ files:
 - lib/frameworks/sproutcore/frameworks/bootstrap/system/browser.js
 - lib/frameworks/sproutcore/frameworks/bootstrap/system/loader.js
 - lib/frameworks/sproutcore/frameworks/bootstrap/tests/system/browser.js
-- lib/frameworks/sproutcore/frameworks/core_foundation/child_view_layouts/horizontal_stack_layout.js
-- lib/frameworks/sproutcore/frameworks/core_foundation/child_view_layouts/vertical_stack_layout.js
+- lib/frameworks/sproutcore/frameworks/core_foundation/child_view_layouts/stack_layout.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/controllers/array.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/controllers/controller.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/controllers/object.js
@@ -1164,7 +1163,8 @@ files:
 - lib/frameworks/sproutcore/frameworks/core_foundation/panes/pane_statechart.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/protocols/child_view_layout_protocol.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/protocols/observable_protocol.js
-- lib/frameworks/sproutcore/frameworks/core_foundation/protocols/sparse_array_delegate.js
+- lib/frameworks/sproutcore/frameworks/core_foundation/protocols/responder_protocol.js
+- lib/frameworks/sproutcore/frameworks/core_foundation/protocols/sparse_array_delegate_protocol.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/protocols/view_transition_protocol.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/system/application.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/system/bezier_curves.js
@@ -1268,8 +1268,6 @@ files:
 - lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/attribute_bindings_test.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/background_color.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/border_frame_test.js
-- lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/build.js
-- lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/build_children.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/childViewLayout_test.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/class_name_bindings_test.js
 - lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/clippingFrame.js
@@ -1416,6 +1414,7 @@ files:
 - lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/cancelRecord.js
 - lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/commitChangesFromNestedStore.js
 - lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/commitRecord.js
+- lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/conflictedStoreKeys_test.js
 - lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/connectDataSource.js
 - lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/core_methods.js
 - lib/frameworks/sproutcore/frameworks/datastore/tests/system/store/createRecord.js
@@ -1507,10 +1506,9 @@ files:
 - lib/frameworks/sproutcore/frameworks/desktop/panes/panel.js
 - lib/frameworks/sproutcore/frameworks/desktop/panes/picker.js
 - lib/frameworks/sproutcore/frameworks/desktop/panes/sheet.js
-- lib/frameworks/sproutcore/frameworks/desktop/protocols/drag_data_source.js
-- lib/frameworks/sproutcore/frameworks/desktop/protocols/drag_source.js
-- lib/frameworks/sproutcore/frameworks/desktop/protocols/drop_target.js
-- lib/frameworks/sproutcore/frameworks/desktop/protocols/responder.js
+- lib/frameworks/sproutcore/frameworks/desktop/protocols/drag_data_source_protocol.js
+- lib/frameworks/sproutcore/frameworks/desktop/protocols/drag_source_protocol.js
+- lib/frameworks/sproutcore/frameworks/desktop/protocols/drop_target_protocol.js
 - lib/frameworks/sproutcore/frameworks/desktop/render_delegates/button.js
 - lib/frameworks/sproutcore/frameworks/desktop/render_delegates/checkbox.js
 - lib/frameworks/sproutcore/frameworks/desktop/render_delegates/collection.js
@@ -1683,7 +1681,7 @@ files:
 - lib/frameworks/sproutcore/frameworks/desktop/tests/views/source_list/methods.js
 - lib/frameworks/sproutcore/frameworks/desktop/tests/views/source_list/ui.js
 - lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/children.js
-- lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/dividers.js
+- lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/dividers_test.js
 - lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/methods.js
 - lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/split_child.js
 - lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/split_thumb.js
@@ -1932,8 +1930,10 @@ files:
 - lib/frameworks/sproutcore/frameworks/media/render_delegates/media_slider.js
 - lib/frameworks/sproutcore/frameworks/media/resources/controls.png
 - lib/frameworks/sproutcore/frameworks/media/resources/playeras3.fla
+- lib/frameworks/sproutcore/frameworks/media/resources/silence.mp3
 - lib/frameworks/sproutcore/frameworks/media/resources/video.css
 - lib/frameworks/sproutcore/frameworks/media/resources/videoCanvas.swf
+- lib/frameworks/sproutcore/frameworks/media/tests/audio.js
 - lib/frameworks/sproutcore/frameworks/media/tests/media_capabilities.js
 - lib/frameworks/sproutcore/frameworks/media/views/audio.js
 - lib/frameworks/sproutcore/frameworks/media/views/controls.js
@@ -1986,6 +1986,7 @@ files:
 - lib/frameworks/sproutcore/frameworks/runtime/private/observer_queue.js
 - lib/frameworks/sproutcore/frameworks/runtime/private/observer_set.js
 - lib/frameworks/sproutcore/frameworks/runtime/private/property_chain.js
+- lib/frameworks/sproutcore/frameworks/runtime/protocols/mixin_protocol.js
 - lib/frameworks/sproutcore/frameworks/runtime/README
 - lib/frameworks/sproutcore/frameworks/runtime/system/binding.js
 - lib/frameworks/sproutcore/frameworks/runtime/system/enumerator.js
@@ -2302,6 +2303,7 @@ files:
 - lib/frameworks/sproutcore/themes/ace/resources/radio/radio_selected.png
 - lib/frameworks/sproutcore/themes/ace/resources/radio/radio_selected_active.png
 - lib/frameworks/sproutcore/themes/ace/resources/radio/radio_unselected.png
+- lib/frameworks/sproutcore/themes/ace/resources/scroll/scroll.css
 - lib/frameworks/sproutcore/themes/ace/resources/scroller/horizontal/horizontal.css
 - lib/frameworks/sproutcore/themes/ace/resources/scroller/horizontal/horizontal_overlay.css
 - lib/frameworks/sproutcore/themes/ace/resources/scroller/horizontal/thumb.png

data/lib/frameworks/sproutcore/frameworks/core_foundation/child_view_layouts/horizontal_stack_layout.js

@@ -1,465 +0,0 @@
-// ==========================================================================
-// Project:   SproutCore
-// Copyright: @2013 7x7 Software, Inc.
-// License:   Licensed under MIT license (see license.js)
-// ==========================================================================
-sc_require('views/view');
-
-
-SC.mixin(SC.View,
-  /** @scope SC.View */ {
-
-  /**
-    This child layout plugin automatically positions the view's child views in a
-    horizontal stack and optionally adjusts the view's width to fit. It does this
-    by checking the width of each child view and positioning the following child
-    views accordingly. Afterwards, by default, any time that a child view's
-    width or visibility changes, the view will use this plugin to re-adjust all
-    following child views' positions and potentially its own width appropriately.
-
-    This allows you to stack absolutely positioned views that dynamically change
-    their width and/or visibility without having to resort to using browser
-    flow layout.
-
-    For example,
-
-        MyApp.MyView = SC.View.extend({
-
-          // Child views will be stacked in order horizontally.
-          childViewLayout: SC.View.HORIZONTAL_STACK,
-
-          // The order of child views is important!
-          childViews: ['sectionA', 'sectionB', 'sectionC'],
-
-          // The view will resize itself to fit its children.
-          // i.e. We don't need to specify layout.width, this is automatic.
-          // The actual layout will become { left: 10, bottom: 20, top: 20, width: 270 } initially.
-          layout: { left: 10, bottom: 20, top: 20 },
-
-          sectionA: SC.View.design({
-
-            // We don't need to specify layout.left, this is automatic.
-            // The actual layout will become { left: 0, bottom: 0, top: 0, width: 100 } initially.
-            layout: { width: 100 }
-
-          }),
-
-          sectionB: SC.View.design({
-
-            // We don't need to specify layout.left, this is automatic.
-            // The actual layout will become { border: 1, left: 100, bottom: 0, top: 0, width: 50 } initially.
-            layout: { border: 1, width: 50 }
-
-          }),
-
-          sectionC: SC.View.design({
-
-            // We don't need to specify layout.left, this is automatic.
-            // The actual layout will become { left: 150, bottom: 10, top: 10, width: 120 } initially.
-            layout: { right: 10, top: 10, width: 120 }
-
-          })
-
-        });
-
-    ## Modify the default behavior with `childViewLayoutOptions`
-
-    To modify the plugin behavior for all child view layouts, you can set the
-    following child view layout options in `childViewLayoutOptions` on the view:
-
-      - paddingBefore - Adds padding before the first child view.  Default: 0
-      - paddingAfter - Adds padding after the last child view.  Default: 0
-      - spacing - Adds spacing between each child view.  Default: 0
-      - resizeToFit - Whether to resize the view to fit the child views (requires that each child view has a layout width).  Default: true
-
-    For example,
-
-        MyApp.MyView = SC.View.extend({
-
-          // Child views will be stacked in order horizontally.
-          childViewLayout: SC.View.HORIZONTAL_STACK,
-
-          // Change the behavior of the HORIZONTAL_STACK plugin
-          childViewLayoutOptions: {
-            paddingBefore: 10,
-            paddingAfter: 20,
-            spacing: 5
-          },
-
-          // The order of child views is important!
-          childViews: ['sectionA', 'sectionB', 'sectionC'],
-
-          // The view will resize itself to fit its children. The actual layout will become { left: 10, bottom: 20, top: 20, width: 310 }
-          layout: { left: 10, bottom: 20, top: 20 }, // Don't need to specify layout.width, this is automatic.
-
-          sectionA: SC.View.design({
-
-            // Actual layout will become { left: 10, bottom: 0, top: 0, width: 100 }
-            layout: { width: 100 } // Don't need to specify layout.left, this is automatic.
-
-          }),
-
-          sectionB: SC.View.design({
-
-            // Actual layout will become { border: 1, left: 115, bottom: 0, top: 0, width: 50 }
-            layout: { border: 1, width: 50 } // Don't need to specify layout.left, this is automatic.
-
-          }),
-
-          sectionC: SC.View.design({
-
-            // Actual layout will become { left: 170, top: 10, bottom: 10, width: 120 }
-            layout: { top: 10, bottom: 10, width: 120 } // Don't need to specify layout.left, this is automatic.
-
-          })
-
-        });
-
-    If `resizeToFit` is set to `false`, the view will not adjust itself to fit
-    its child views.  This means that when `resizeToFit` is false, the view should
-    specify its width component in its layout. A direct effect of this is the
-    possibility for the child views to automatically expand or shrink in order to
-    fill the empty, unclaimed space of the view.
-
-    This available space is shared between all children that don't specify a fixed width
-    such that their final width is calculated proportionally to the value of the
-    property `fillRatio`.
-
-    For simplicity, when none of the children specifies `fillRatio`,
-    you can ignore the last child view's layout width and the last child view
-    will stretch to fill the parent view.
-
-    For example,
-
-        MyApp.MyView = SC.View.extend({
-
-          // Child views will be stacked in order horizontally.
-          childViewLayout: SC.View.HORIZONTAL_STACK,
-
-          // Change the behavior of the HORIZONTAL_STACK plugin
-          childViewLayoutOptions: {
-            paddingBefore: 10,
-            paddingAfter: 20,
-            spacing: 5,
-            resizeToFit: false // Setting this to false, so that the child views stretch/contract to fit the parent's size.
-          },
-
-          // The order of child views is important!
-          childViews: ['sectionA', 'sectionB', 'sectionC'],
-
-          // The parent view will not resize itself to fit its contents, so we specify the width.
-          layout: { left: 10, bottom: 20, top: 20, width: 500 },
-
-          sectionA: SC.View.design({
-
-            // We don't need to specify layout.left, this is automatic. This child will not stretch, its width is set.
-            // Actual layout will become { left: 10, bottom: 0, top: 0, width: 100 }
-            layout: { width: 100 }
-
-          }),
-
-          sectionB: SC.View.design({
-
-            // The unclaimed space so far is 500 - 10 - 100 - 5 - 5 - 20, or 360px. This space will be shared between
-            // the two last sections, because we won't specity a width on them.
-            // This view will get 1/3 of the available space, because the other flexibile view has a ratio of 2.
-            fillRatio: 1,
-
-            // This section will take 1/3 * 360px = 120px.
-            // Actual layout will become { border: 1, left: 115, bottom: 0, top: 0, right: 265 }, in other words, width == 120
-            // We don't need to specify layout.left, layout.right or layout.width, this is automatic.
-            layout: { border: 1 }
-
-          }),
-
-          sectionC: SC.View.design({
-
-            // This view will get 2/3 of the available space, because the other flexibile view has a ratio of 1.
-            fillRatio: 2,
-
-            // This section will take 2/3 * 360px = 240px.
-            // Actual layout will become { left: 240, top: 10, bottom: 10, right: 20 }, in other words, width == 240
-            // We don't need to specify layout.left, layout.right or layout.width, this is automatic.
-            layout: { top: 10, bottom: 10 }
-
-          })
-
-        });
-
-    ## Modify specific child view layouts
-
-    To adjust the child layout on a granular level per child view, you can
-    also set the following properties on each child view:
-
-      - marginBefore - Specify the minimum spacing above the child view.
-      - marginAfter - Specify the minimum spacing below the child view.
-      - useAbsoluteLayout - Don't include this child view in automatic layout, use absolute positioning based on the child view's `layout` property.
-      - useStaticLayout - Don't include this child view in automatic layout.  This child view uses relative positioning and is not eligible for automatic layout.
-      - isVisible - Non-visible child views are not included in the stack.
-      - fillRatio - When the parent view is configured with a fixed dimension, children not specifying a width but specifying fillRatio will be resized to fill the unclaimed space proportionally to this ratio.
-
-      For example,
-
-        MyApp.MyView = SC.View.extend({
-
-          // Child views will be stacked in order horizontally.
-          childViewLayout: SC.View.HORIZONTAL_STACK,
-
-          // Actual layout will become { left: 10, right: 10, top: 20, width: 570 }
-          layout: { left: 10, right: 10, top: 20 },
-
-          // Keep the child views ordered!
-          childViews: ['sectionA', 'float', 'sectionB', 'sectionC'],
-
-          sectionA: SC.View.design({
-            // Actual layout will become { left: 0, right: 50, top: 0, width: 100 }
-            layout: { right: 50, width: 100 },
-            // The following child view will be at least 50px further right.
-            marginAfter: 50
-          }),
-
-          float: SC.View.design({
-            // This view will not be included in automatic layout and will not effect the stack.
-            layout: { top: 5, right: 5, height: 50, width: 50 },
-            useAbsoluteLayout: true
-          }),
-
-          sectionB: SC.View.design({
-            // Actual layout will become { left: 1500, right: 0, top: 0, width: 120 }
-            layout: { width: 120 }
-          }),
-
-          sectionC: SC.View.design({
-            // Actual layout will become { left: 470, bottom: 0, top: 0, width: 100 }
-            layout: { width: 100 },
-            // This child view will be at least 200px to the right of the previous.
-            marginBefore: 200
-          })
-
-        });
-
-    ### A Note About Spacing
-
-    Note that the spacing attribute in `childViewLayoutOptions` becomes the
-    _minimum margin between child views, without explicitly overriding it from
-    both sides using `marginAfter` and `marginBefore`_.  For example, if `spacing`
-    is 25, setting `marginAfter` to 10 on a child view will not result in the
-    next child view being 10px to the right of it, unless the next child view also
-    specified `marginBefore` as 10.
-
-    What this means is that it takes less configuration if you set `spacing` to
-    be the _smallest margin you wish to exist between child views_ and then use
-    the overrides to grow the margin if necessary.  For example, if `spacing`
-    is 5, setting `marginAfter` to 10 on a child view will result in the next
-    child view being 10px to the right of it, without having to also specify
-    `marginBefore` on that next child view.
-
-    @extends SC.ChildViewLayoutProtocol
-    @since Version 1.10
-  */
-  HORIZONTAL_STACK: {
-
-    /** @private Properties to observe on child views that affect the overall child view layout. */
-    childLayoutProperties: ['marginBefore', 'marginAfter', 'isVisible'],
-
-    /** @private When resizeToFit is false, then we need to know when the view's frame changes. */
-    layoutDependsOnSize: function (view) {
-      var options = view.get('childViewLayoutOptions');
-
-      if (options) {
-        return SC.none(options.resizeToFit) ? false : !options.resizeToFit;
-      } else {
-        return false;
-      }
-    },
-
-    /** @private */
-    layoutChildViews: function (view) {
-      var childViews = view.get('childViews'),
-        options = view.get('childViewLayoutOptions') || {},
-        resizeToFit = SC.none(options.resizeToFit) ? true : options.resizeToFit,
-        lastMargin = 0, // Used to avoid adding spacing to the final margin.
-        marginAfter = options.paddingBefore || 0,
-        paddingAfter = options.paddingAfter || 0,
-        leftPosition = 0,
-        provisionedSpace = 0,
-        autoFillAvailableSpace = 0,
-        totalAvailableSpace = 0,
-        totalFillAvailableSpaceRatio = 0,
-        spacing = options.spacing || 0,
-        childView,
-        fillRatio,
-        layout,
-        marginBefore,
-        i, len;
-
-      // if the view is not configured to resize to fit content, then we give a chance to the children to fill the available space
-      // we make a 1st pass to check the conditions, to evaluate the available space and the proportions between children
-      if (!resizeToFit) {
-
-        totalAvailableSpace = view.get('frame').width;
-
-        // if the view is not configured to resize and it doesn't have yet a width, it doesn't make sense to layout children
-        if (!totalAvailableSpace) {
-          return;
-        }
-
-        for (i = 0, len = childViews.get('length'); i < len; i++) {
-          childView = childViews.objectAt(i);
-
-          // Ignore child views with useAbsoluteLayout true, useStaticLayout true or that are not visible.
-          if (!childView.get('isVisible') ||
-            childView.get('useAbsoluteLayout') ||
-            childView.get('useStaticLayout')) {
-            continue;
-          }
-
-          layout = childView.get('layout');
-
-          // Determine the left margin.
-          marginBefore = childView.get('marginBefore') || 0;
-          provisionedSpace += Math.max(marginAfter, marginBefore);
-
-          // if the width is not set, let's check if is possible to resize the view
-          if (SC.none(layout.width)) {
-            fillRatio = childView.get('fillRatio');
-
-            if (!SC.none(fillRatio)) {
-              totalFillAvailableSpaceRatio += fillRatio;
-            } else {
-              // if none of the child views has fillRatio defined, allow the last one to stretch and fill the available space.
-              if (i == len - 1 && totalFillAvailableSpaceRatio === 0) {
-                totalFillAvailableSpaceRatio = 1;
-              }
-              //@if(debug)
-              // Add some developer support.
-              else {
-                // even if we don't have a width set, as last instance we accept the presence of minWidth
-                if (SC.none(layout.minWidth))
-                {
-                  SC.warn('Developer Warning: The SC.View.HORIZONTAL_STACK plugin requires that each childView layout contains at least a width or has a configured fillRatio. The layout may also optionally contain top and bottom, top and height, bottom and height or centerY and height.  The childView %@ has an invalid layout/fillRatio: %@'.fmt(childView, SC.stringFromLayout(layout)));
-                  return;
-                }
-              }
-              //@endif
-            }
-          } else {
-            provisionedSpace += childView.getPath('borderFrame.width');
-          }
-
-          // Determine the right margin.
-          lastMargin = childView.get('marginAfter') || 0;
-          marginAfter = lastMargin || spacing;
-        }
-
-        // consider the end padding when calculating the provisionedSpace
-        if (provisionedSpace !== 0 || totalFillAvailableSpaceRatio !== 0) {
-          provisionedSpace += Math.max(lastMargin, paddingAfter);
-        }
-
-        autoFillAvailableSpace = Math.max(0, totalAvailableSpace - provisionedSpace);
-      }
-
-      // reset the references for the effective layout
-      lastMargin = 0;
-      marginAfter = options.paddingBefore || 0;
-      paddingAfter = options.paddingAfter || 0;
-
-      for (i = 0, len = childViews.get('length'); i < len; i++) {
-        var width,
-          adjustLeft,
-          adjustRight;
-
-        childView = childViews.objectAt(i);
-
-        // Ignore child views with useAbsoluteLayout true, useStaticLayout true or that are not visible.
-        if (!childView.get('isVisible') ||
-          childView.get('useAbsoluteLayout') ||
-          childView.get('useStaticLayout')) {
-          continue;
-        }
-
-        layout = childView.get('layout');
-
-        //@if(debug)
-        // Add some developer support. The case of !resizeToFit was already checked above
-        if (resizeToFit && SC.none(layout.width) && SC.none(layout.minWidth)) {
-          SC.warn('Developer Warning: The SC.View.HORIZONTAL_STACK plugin, when configured with resizeToFit, requires that each childView layout contains at least a width/minWidth and optionally also top and bottom, top and height, bottom and height or centerY and height.  The childView %@ has an invalid layout: %@'.fmt(childView, SC.stringFromLayout(layout)));
-          return;
-        }
-        //@endif
-
-        // Determine the left margin.
-        marginBefore = childView.get('marginBefore') || 0;
-        leftPosition += Math.max(marginAfter, marginBefore);
-
-        // Try to avoid useless adjustments left or right or left then right.
-        // The required adjustments will be merged into a single call
-        adjustLeft = layout.left !== leftPosition;
-
-        childView.beginPropertyChanges();
-        if (!resizeToFit && !layout.width) {
-          var rightPosition;
-
-          fillRatio = childView.get('fillRatio');
-
-          // if the last child doesn't define fillRatio, default it to 1 as above during the 1st pass
-          if (i == len - 1 && SC.none(fillRatio)) {
-            fillRatio = 1;
-          }
-
-          // we should get here only in two cases: 1. child defines fillRatio, 2. child defines a minWidth
-          // if both defined, we prefer to handle fillRatio, the other case being handled below by the normal adjustment to left
-          if (!SC.none(fillRatio)) {
-            var currentAvailableSpaceRatio = (fillRatio / totalFillAvailableSpaceRatio);
-
-            // calculate the width according to fillRatio and totalFillAvailableSpaceRatio
-            // but set the "right" position so any subsequent layout is not considering the width as fixed
-            width = Math.ceil(autoFillAvailableSpace * currentAvailableSpaceRatio);
-
-            // INCOMPLETE: We need to flag this view as constrained and re-compute all the auto-fill amounts
-            // Constrain the width to the maximum width allowed.
-            // var maxWidth = layout.maxWidth;
-            // if (!SC.none(maxWidth)) {
-            //   // Constrain the width according to maxWidth. Which frees up additional available space for further child views.
-            //   if (width > maxWidth) {
-            //     width = maxWidth;
-            //   }
-            // }
-
-            // Determine the right position. If the position overflows (i.e. goes negative) because of rounding up, stop at 0.
-            rightPosition = Math.max(0, totalAvailableSpace - leftPosition - width);
-            adjustRight = layout.right !== rightPosition;
-
-            if (adjustRight) {
-              childView.adjust('right', rightPosition);
-            }
-          }
-        }
-
-        if (adjustLeft) {
-          childView.adjust('left', leftPosition);
-        }
-        childView.endPropertyChanges();
-
-        leftPosition += childView.getPath('borderFrame.width');
-
-        // Determine the right margin.
-        lastMargin = childView.get('marginAfter') || 0;
-        marginAfter = lastMargin || spacing;
-      }
-
-      // If the current size is 0 (all children are hidden), it doesn't make sense to add the padding
-      if (leftPosition !== 0) {
-        leftPosition += Math.max(lastMargin, paddingAfter);
-      }
-
-      // Adjust our frame to fit as well, this ensures that scrolling works.
-      if (resizeToFit && view.getPath('layout.width') !== leftPosition) {
-        view.adjust('width', leftPosition);
-      }
-    }
-
-  }
-
-});