sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/desktop/views/list_item.js

@@ -356,6 +356,9 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     button.
   */
   mouseDown: function (evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which && evt.which !== 1) return false;
+
     // if content is not editable, then always let collection view handle the
     // event.
     if (!this.get('contentIsEditable')) return NO;
@@ -556,6 +559,16 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /** @private */
   _removeRightIconActiveState: function () {
     this.$('img.right-icon').removeClass('active');
+
+    var pane = this.get('pane'),
+        del = this.displayDelegate,
+        target = this.getDelegateProperty('rightIconTarget', del),
+        action = this.getDelegateProperty('rightIconAction', del);
+
+    if (action && pane) {
+       pane.rootResponder.sendAction(action, target, this, pane);
+    }
+
   },
 
   /** @private

data/lib/frameworks/sproutcore/frameworks/desktop/views/menu_item.js

@@ -4,16 +4,15 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-
-sc_require('views/button');
 sc_require('views/separator');
 
+
 /**
   @class
 
   An SC.MenuItemView is created for every item in a menu.
 
-  @extends SC.ButtonView
+  @extends SC.View
   @since SproutCore 1.0
 */
 SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
@@ -31,8 +30,7 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
     @default ['title', 'isEnabled', 'isSeparator', 'isChecked']
     @see SC.View#displayProperties
   */
-  displayProperties: ['title', 'isEnabled', 'isSeparator', 'isChecked'],
-
+  displayProperties: ['title', 'toolTip', 'isEnabled', 'icon', 'isSeparator', 'shortcut', 'isChecked'],
 
   /**
     The WAI-ARIA role for menu items.
@@ -83,50 +81,97 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
   content: null,
 
   /**
-    YES if this menu item represents a separator, NO otherwise.
+    The title from the content property.
 
-    @field
-    @type Boolean
-    @observes content
+    @type String
   */
-  isSeparator: function () {
-    return this.getContentProperty('itemSeparatorKey') === YES;
-  }.property('content').cacheable(),
+  title: function () {
+    var ret = this.getContentProperty('itemTitleKey'),
+        localize = this.getPath('parentMenu.localize');
+
+    if (localize && ret) ret = SC.String.loc(ret);
+
+    return ret || '';
+  }.property().cacheable(),
+
+  /**
+    The value from the content property.
+
+    @type String
+  */
+  value: function () {
+    return this.getContentProperty('itemValueKey');
+  }.property().cacheable(),
 
   /**
-    @field
+    The tooltip from the content property.
+
+    @type String
+  */
+  toolTip: function () {
+    var ret = this.getContentProperty('itemToolTipKey'),
+        localize = this.getPath('parentMenu.localize');
+
+    if (localize && ret) ret = SC.String.loc(ret);
+
+    return ret || '';
+  }.property().cacheable(),
+
+  /**
+    Whether the item is enabled or not.
+
     @type Boolean
-    @observes content.isEnabled
   */
   isEnabled: function () {
     return this.getContentProperty('itemIsEnabledKey') !== NO &&
            this.getContentProperty('itemSeparatorKey') !== YES;
-  }.property('content.isEnabled').cacheable(),
+  }.property().cacheable(),
+
+  /**
+    The icon from the content property.
+
+    @type String
+  */
+  icon: function () {
+    return this.getContentProperty('itemIconKey');
+  }.property().cacheable(),
+
+  /**
+    YES if this menu item represents a separator, NO otherwise.
+
+    @type Boolean
+  */
+  isSeparator: function () {
+    return this.getContentProperty('itemSeparatorKey') === YES;
+  }.property().cacheable(),
+
+  /**
+    The shortcut from the content property.
+
+    @type String
+  */
+  shortcut: function () {
+    return this.getContentProperty('itemShortCutKey');
+  }.property().cacheable(),
 
   /**
     YES if the menu item should include a check next to it.
 
     @type Boolean
-    @property
   */
   isChecked: function () {
     return this.getContentProperty('itemCheckboxKey');
-  }.property(),
+  }.property().cacheable(),
 
   /**
     This menu item's submenu, if it exists.
 
-    @field
-    @type SC.MenuView
-    @observes content
+    @type SC.MenuPane
   */
   subMenu: function () {
-    var content = this.get('content'), menuItems, parentMenu;
-
-    if (!content) return null;
+    var parentMenu = this.get('parentMenu'),
+        menuItems = this.getContentProperty('itemSubMenuKey');
 
-    parentMenu = this.get('parentMenu');
-    menuItems = content.get(parentMenu.itemSubMenuKey);
     if (menuItems) {
       if (SC.kindOf(menuItems, SC.MenuPane)) {
         menuItems.set('isModal', NO);
@@ -134,7 +179,16 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
         menuItems.set('parentMenu', parentMenu);
         return menuItems;
       } else {
-        return SC.MenuPane.create({
+        var subMenu = this._subMenu;
+        if (subMenu) {
+          if (subMenu.get('isAttached')) {
+            this.invokeLast('showSubMenu');
+          }
+          subMenu.remove();
+          subMenu.destroy();
+        }
+
+        subMenu = this._subMenu = SC.MenuPane.create({
           layout: { width: 200 },
           items: menuItems,
           isModal: NO,
@@ -143,27 +197,48 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
           controlSize: parentMenu.get('controlSize'),
           exampleView: parentMenu.get('exampleView')
         });
+        return subMenu;
       }
     }
 
     return null;
-  }.property('content').cacheable(),
+  }.property().cacheable(),
 
   /**
     @type Boolean
     @default NO
-    @observes subMenu
   */
   hasSubMenu: function () {
     return !!this.get('subMenu');
   }.property('subMenu').cacheable(),
 
+  /** @private */
+  getContentProperty: function (property) {
+    var content = this.get('content'),
+        menu = this.get('parentMenu');
+
+    if (content && menu) {
+      return content.get(menu.get(property));
+    }
+  },
+
   /** @private */
   init: function () {
     sc_super();
     this.contentDidChange();
   },
 
+  /** @private */
+  destroy: function () {
+    sc_super();
+
+    var subMenu = this._subMenu;
+    if (subMenu) {
+      subMenu.destroy();
+      this._subMenu = null;
+    }
+  },
+
   /** SC.MenuItemView is not able to update itself in place at this time. */
   // TODO: add update: support.
   isReusable: false,
@@ -182,7 +257,8 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
         val,
         menu = this.get('parentMenu'),
         itemWidth = this.get('itemWidth') || menu.layout.width,
-        itemHeight = this.get('itemHeight') || SC.DEFAULT_MENU_ITEM_HEIGHT;
+        itemHeight = this.get('itemHeight') || SC.DEFAULT_MENU_ITEM_HEIGHT,
+        escapeHTML = this.get('escapeHTML');
 
     this.set('itemWidth', itemWidth);
     this.set('itemHeight', itemHeight);
@@ -203,7 +279,7 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
       context.push('<span class="separator"></span>');
       context.addClass('disabled');
     } else {
-      val = content.get(menu.itemIconKey);
+      val = this.get('icon');
       if (val) {
         this.renderImage(context, val);
         context.addClass('has-icon');
@@ -213,6 +289,13 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
       if (SC.typeOf(val) !== SC.T_STRING) val = val.toString();
       this.renderLabel(context, val);
 
+      val = this.get('toolTip');
+      if (SC.typeOf(val) !== SC.T_STRING) val = val.toString();
+      if (escapeHTML) {
+        val = SC.RenderContext.escapeHTML(val);
+      }
+      context.setAttr('title', val);
+
       if (this.get('isChecked')) {
         context.push('<div class="checkbox"></div>');
       }
@@ -221,7 +304,7 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
         this.renderBranch(context);
       }
 
-      val = this.getContentProperty('itemShortCutKey');
+      val = this.get('shortcut');
       if (val) {
         this.renderShortcut(context, val);
       }
@@ -298,7 +381,7 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
   */
   showSubMenu: function () {
     var subMenu = this.get('subMenu');
-    if (subMenu) {
+    if (subMenu && !subMenu.get('isAttached')) {
       subMenu.set('mouseHasEntered', NO);
       subMenu.popup(this, [0, 0, 0]);
     }
@@ -306,33 +389,6 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
     this._subMenuTimer = null;
   },
 
-  /**
-    The title from the content property.
-
-    @field
-    @type String
-    @observes content.title
-  */
-  title: function () {
-    var ret = this.getContentProperty('itemTitleKey'),
-        localize = this.getPath('parentMenu.localize');
-
-    if (localize && ret) ret = SC.String.loc(ret);
-
-    return ret || '';
-  }.property('content.title').cacheable(),
-
-  /** @private */
-  getContentProperty: function (property) {
-    var content = this.get('content'),
-        menu = this.get('parentMenu');
-
-    if (content) {
-      return content.get(menu.get(property));
-    }
-  },
-
-
   //..........................................
   // Mouse Events Handling
   //
@@ -454,7 +510,8 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
 
   /** @private*/
   mouseDown: function (evt) {
-    return YES;
+    // Accept primary clicks only.
+    return evt.which === 1;
   },
 
   /** @private */
@@ -730,8 +787,13 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
                      this mapping.
 */
 SC.MenuItemView._contentPropertyToMenuItemPropertyMapping = {
-  itemTitleKey:     'title',
+  itemTitleKey: 'title',
+  itemValueKey: 'value',
+  itemToolTipKey: 'toolTip',
   itemIsEnabledKey: 'isEnabled',
+  itemIconKey: 'icon',
   itemSeparatorKey: 'isSeparator',
-  itemSubMenuKey:   'subMenu'
+  itemShortCutKey: 'shortcut',
+  itemCheckboxKey: 'isChecked',
+  itemSubMenuKey: 'subMenu'
 };

data/lib/frameworks/sproutcore/frameworks/desktop/views/menu_scroll.js

@@ -4,283 +4,7 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-
-sc_require('views/scroll');
-
-/** @class
-
-  Implements a complete scroller view for menus.  This class implements the
-  arrows displayed in a menu to scroll.
-
-  The main difference with SC.ScrollerView is that there is only vertical
-  scrollers. Value Syncing between SC.MenuScrollView and SC.MenuScrollerView
-  is done using valueBinding.
-
-  @extends SC.ScrollerView
-  @since SproutCore 1.0
-*/
-SC.MenuScrollerView = SC.ScrollerView.extend(
-/** @scope SC.MenuScrollerView.prototype */ {
-
-  /**
-    @type Array
-    @default ['sc-menu-scroller-view']
-    @see SC.View#classNames
-  */
-  classNames: ['sc-menu-scroller-view'],
-
-  // ..........................................................
-  // PROPERTIES
-  //
-
-  /**
-    Used to set the scrolling direction of the scroller.
-
-    @type Boolean
-    @default NO
-  */
-  scrollDown: NO,
-
-  /**
-    The scroller offset value.  This value will adjust between the minimum
-    and maximum values that you set. Default is 0.
-
-    @field
-    @type Number
-    @observes maximum
-  */
-  value: function (key, val) {
-    if (val !== undefined) {
-      // Don't enforce the maximum now, because the scroll view could change
-      // height and we want our content to stay put when it does.
-      this._value = val;
-    } else {
-      var value = this._value || 0; // default value is at top/left
-      return Math.min(value, this.get('maximum'));
-    }
-  }.property('maximum').cacheable(),
-
-  /**
-    The maximum offset value for the scroller.  This will be used to calculate
-    the internal height/width of the scroller itself. It is not necessarily
-    the same as the height of a scroll view's content view.
-
-    When set less than the height of the scroller, the scroller is disabled.
-
-    @type Number
-    @default 0
-  */
-  maximum: 0,
-
-  /**
-    YES if enable scrollbar, NO to disable it.  Scrollbars will automatically
-    disable if the maximum scroll width does not exceed their capacity.
-
-    @type Boolean
-    @default YES
-  */
-  isEnabled: YES,
-
-  /**
-    Determine the layout direction.  Determines whether the scrollbar should
-    appear horizontal or vertical.  This must be set when the view is created.
-    Changing this once the view has been created will have no effect. Possible
-    values:
-
-      - SC.LAYOUT_VERTICAL
-      - SC.LAYOUT_HORIZONTAL
-
-    @type String
-    @default SC.LAYOUT_VERTICAL
-  */
-  layoutDirection: SC.LAYOUT_VERTICAL,
-
-  /**
-     Amount to scroll one vertical line.
-
-     @type Number
-     @default 20
-  */
-  verticalLineScroll: 20,
-
-  /**
-    This function overrides the default function in SC.Scroller as
-    menus only have vertical scrolling.
-
-    @field
-    @type String
-    @default 'verticalScrollOffset'
-  */
-  ownerScrollValueKey: function () {
-    return 'verticalScrollOffset';
-  }.property('layoutDirection').cacheable(),
-
-
-  // ..........................................................
-  // INTERNAL SUPPORT
-  //
-
-  /** @private */
-  init: function () {
-    // Set the scrollerThickness based on controlSize
-    switch (this.get('controlSize')) {
-    case SC.TINY_CONTROL_SIZE:
-      this.set('scrollerThickness', SC.MenuScrollerView.TINY_SCROLLER_THICKNESS);
-      break;
-    case SC.SMALL_CONTROL_SIZE:
-      this.set('scrollerThickness', SC.MenuScrollerView.SMALL_SCROLLER_THICKNESS);
-      break;
-    case SC.REGULAR_CONTROL_SIZE:
-      this.set('scrollerThickness', SC.MenuScrollerView.REGULAR_SCROLLER_THICKNESS);
-      break;
-    case SC.LARGE_CONTROL_SIZE:
-      this.set('scrollerThickness', SC.MenuScrollerView.LARGE_SCROLLER_THICKNESS);
-      break;
-    case SC.HUGE_CONTROL_SIZE:
-      this.set('scrollerThickness', SC.MenuScrollerView.HUGE_SCROLLER_THICKNESS);
-      break;
-    }
-
-    return sc_super();
-  },
-
-  /** @private */
-  render: function (context, firstTime) {
-    context.addClass('sc-vertical');
-    context.addClass(this.get('controlSize'));
-    if (firstTime) {
-      var direction = this.get('scrollDown') ? 'arrowDown' : 'arrowUp';
-      context.push('<span class="scrollArrow ' + direction + '">&nbsp;</span>');
-    }
-  },
-
-  /** @private */
-  willDestroyLayer: function () {
-    var callback = this._sc_scroller_scrollDidChange;
-    SC.Event.remove(this.$(), 'scroll', this, callback);
-  },
-
-  /** @private */
-  mouseEntered: function (evt) {
-    this.set('isMouseOver', YES);
-    this._invokeScrollOnMouseOver();
-  },
-
-  /** @private */
-  mouseExited: function (evt) {
-    this.set('isMouseOver', NO);
-  },
-
-  /**
-    This function overrides the default function in SC.Scroller.
-    SC.MenuScroller and SC.MenuScroll use valueBinding so this function is
-    not necessary.
-  */
-  _sc_scroller_valueDidChange: function () {}.observes('value'),
-
-
-  /** @private */
-  _sc_scroller_armScrollTimer: function () {
-    if (!this._sc_scrollTimer) {
-      SC.run(function () {
-        var method = this._sc_scroller_scrollDidChange;
-        this._sc_scrollTimer = this.invokeLater(method, 50);
-      });
-    }
-  },
-
-  /** @private */
-  _sc_scroller_scrollDidChange: function () {
-    var now = Date.now(),
-        last = this._sc_lastScroll,
-        layer = this.get('layer'),
-        scroll = 0;
-
-    if (last && (now - last) < 50) return this._sc_scroller_armScrollTimer();
-    this._sc_scrollTimer = null;
-    this._sc_lastScroll = now;
-
-    SC.run(function () {
-      if (!this.get('isEnabledInPane')) return; // nothing to do.
-
-      this._sc_scrollValue = scroll = layer.scrollTop;
-      this.set('value', scroll); // will now enforce minimum and maximum
-    });
-  },
-
-
-  /** @private
-    Scroll the menu if it is is an up or down arrow. This is called by
-    the function that simulates mouseOver.
-  */
-  _scrollMenu: function () {
-    var val = this.get('value'), newval;
-    if (this.get('scrollDown')) {
-      newval = val + this.verticalLineScroll;
-      if (newval <= this.get('maximum')) {
-        this.set('value', newval);
-      }
-    } else {
-      newval = val - this.verticalLineScroll;
-      if (newval >= 0) {
-        this.set('value', newval);
-      } else if (val <= this.verticalLineScroll && val > 0) {
-        this.set('value', 0);
-      }
-    }
-
-    return YES;
-  },
-
-  /** @private
-
-    We use this function to simulate mouseOver. It checks for the flag
-    isMouseOver which is turned on when mouseEntered is called and turned off
-    when mouseExited is called.
-  */
-  _invokeScrollOnMouseOver: function () {
-    this._scrollMenu();
-    if (this.get('isMouseOver')) {
-      this.invokeLater(this._invokeScrollOnMouseOver, 50);
-    }
-  }
-
-});
-
-/**
-  @static
-  @type Number
-  @default 18
-*/
-SC.MenuScrollerView.REGULAR_SCROLLER_THICKNESS = 18;
-
-/**
-  @static
-  @type Number
-  @default 10
-*/
-SC.MenuScrollerView.TINY_SCROLLER_THICKNESS    = 10;
-
-/**
-  @static
-  @type Number
-  @default 14
-*/
-SC.MenuScrollerView.SMALL_SCROLLER_THICKNESS   = 14;
-
-/**
-  @static
-  @type Number
-  @default 23
-*/
-SC.MenuScrollerView.LARGE_SCROLLER_THICKNESS   = 23;
-
-/**
-  @static
-  @type Number
-  @default 26
-*/
-SC.MenuScrollerView.HUGE_SCROLLER_THICKNESS    = 26;
+sc_require('views/scroll_view');
 
 
 /** @class
@@ -298,390 +22,245 @@ SC.MenuScrollerView.HUGE_SCROLLER_THICKNESS    = 26;
 SC.MenuScrollView = SC.ScrollView.extend(
 /** @scope SC.MenuScrollView.prototype */{
 
-  /**
-    @type Array
-    @default ['sc-menu-scroll-view']
-    @see SC.View#classNames
-  */
-  classNames: ['sc-menu-scroll-view'],
-
-
-  // ..........................................................
-  // PROPERTIES
-  //
-
-
-  /**
-    The maximum horizontal scroll offset allowed given the current contentView
-    size and the size of the scroll view.  If horizontal scrolling is
-    disabled, this will always return 0.
-
-    @type Number
-    @default 0
-  */
-  maximumHorizontalScrollOffset: 0,
-
-
-  // ..........................................................
-  // SCROLLERS
+  // ---------------------------------------------------------------------------------------------
+  // Properties
   //
 
   /**
-    YES if the view should maintain a horizontal scroller.   This property
-    must be set when the view is created.
-
-    @type Boolean
-    @default NO
-  */
-  hasHorizontalScroller: NO,
-
-  /**
-    The horizontal scroller view class. This will be replaced with a view
-    instance when the ScrollView is created unless hasHorizontalScroller is
-    NO.
+    The bottom scroller view class. This will be replaced with a view instance when the
+    MenuScrollView is created unless hasVerticalScroller is false.
 
     @type SC.View
     @default SC.MenuScrollerView
   */
-  horizontalScrollerView: SC.MenuScrollerView,
+  bottomScrollerView: SC.MenuScrollerView,
 
   /**
-    YES if the horizontal scroller should be visible.  You can change this
-    property value anytime to show or hide the horizontal scroller.  If you
-    do not want to use a horizontal scroller at all, you should instead set
-    hasHorizontalScroller to NO to avoid creating a scroller view in the
-    first place.
+    Returns true if the view has both a vertical scroller and the scroller is visible.
 
+    @field
     @type Boolean
-    @default NO
+    @readonly
+    @see SC.ScrollView
   */
-  isHorizontalScrollerVisible: NO,
-
-  /**
-    Returns YES if the view both has a horizontal scroller, the scroller is
-    visible.
+  canScrollVertical: function () {
+    return !!(this.get('hasVerticalScroller') && // This property isn't bindable.
+      this.get('bottomScrollerView') && // This property isn't bindable.
+      this.get('topScrollerView') && // This property isn't bindable.
+      this.get('isVerticalScrollerVisible'));
+  }.property('isVerticalScrollerVisible').cacheable(),
 
-    @type Boolean
-    @default NO
+  /** SC.View.prototype
+    @type Array
+    @default ['sc-menu-scroll-view']
+    @see SC.View#classNames
   */
-  canScrollHorizontal: NO,
+  classNames: ['sc-menu-scroll-view'],
 
   /**
-    If YES, the horizontal scroller will autohide if the contentView is
-    smaller than the visible area.  You must set hasHorizontalScroller to YES
-    for this property to have any effect.
+    Control Size for Menu content: change verticalLineScroll
 
-    @type Boolean
-    @default NO
+    @type String
+    @default SC.REGULAR_CONTROL_SIZE
+    @see SC.Control
   */
-  autohidesHorizontalScroller: NO,
+  controlSize: SC.REGULAR_CONTROL_SIZE,
 
   /**
-    YES if the view should maintain a vertical scroller.   This property must
-    be set when the view is created.
+    YES if the view should maintain a horizontal scroller. This property must be set when the view
+    is created.
 
     @type Boolean
-    @default YES
+    @default false
+    @see SC.ScrollView
   */
-  hasVerticalScroller: YES,
+  hasHorizontalScroller: false,
 
   /**
-    The vertical scroller view class. This will be replaced with a view
-    instance when the ScrollView is created unless hasVerticalScroller is NO.
+    The top scroller view class. This will be replaced with a view instance when the MenuScrollView
+    is created unless hasVerticalScroller is false.
 
     @type SC.View
     @default SC.MenuScrollerView
   */
-  verticalScrollerView: SC.MenuScrollerView,
-  verticalScrollerView2: SC.MenuScrollerView,
-
-  /**
-    YES if the vertical scroller should be visible.  For SC.MenuScroll the
-    vertical scroller is always there we just hide the arrows to scroll.
-
-    @type Boolean
-    @default YES
-  */
-  isVerticalScrollerVisible: YES,
-
-  /**
-    @type Boolean
-    @default YES
-  */
-  canScrollVertical: YES,
-
-  /**
-    If YES, the vertical scroller will autohide if the contentView is
-    smaller than the visible area.  You must set hasVerticalScroller to YES
-    for this property to have any effect.
-
-    @type Boolean
-    @default YES
-  */
-  autohidesVerticalScroller: YES,
-
-  /**
-    Use this property to set the 'bottom' offset of your vertical scroller,
-    to make room for a thumb view or other accessory view. Default is 0.
-
-    @type Number
-    @default 0
-  */
-  verticalScrollerBottom: 0,
-
+  topScrollerView: SC.MenuScrollerView,
 
-  // ..........................................................
-  // CUSTOM VIEWS
+  // ---------------------------------------------------------------------------------------------
+  // Methods
   //
 
-  /**
-    Control Size for Menu content: change verticalLineScroll
-
-    @type String
-    @default SC.REGULAR_CONTROL_SIZE
-  */
-  controlSize: SC.REGULAR_CONTROL_SIZE,
-
-  /**
-    The container view that will contain your main content view.  You can
-    replace this property with your own custom subclass if you prefer.
-
-    @type SC.ContainerView
-    @default SC.ContainerView
-  */
-  containerView: SC.ContainerView,
-
-  // ..........................................................
-  // METHODS
-  //
+  /** @private @see SC.ScrollView. Check frame changes for size changes. */
+  _sc_contentViewFrameDidChange: function () {
+    sc_super();
 
-  /**
-    @param {SC.View} view
-  */
-  scrollToVisible: function (view) {
-    // if no view is passed, do default
-    if (arguments.length === 0) return sc_super();
+    // Unlike a normal SC.ScrollView, the visibility of the top & bottom scrollers changes as the
+    // scrolling commences. For example, once the user scrolls a tiny bit, we need to show the
+    // top scroller.
+    this._sc_repositionScrollers();
+  },
 
-    var contentView = this.get('contentView');
-    if (!contentView) return NO; // nothing to do if no contentView.
+  /** @private @see SC.ScrollView. When the content view's size changes, we need to update our scroll offset properties. */
+  _sc_contentViewSizeDidChangeUnfiltered: function () {
+    var hasVerticalScroller = this.get('hasVerticalScroller'),
+        // UNUSED. minimumVerticalScrollOffset = this.get('minimumVerticalScrollOffset'),
+        maximumVerticalScrollOffset = this.get('maximumVerticalScrollOffset');
 
-    // get the frame for the view - should work even for views with static
-    // layout, assuming it has been added to the screen.
-    var vf = view.get('frame');
-    if (!vf) return NO; // nothing to do
+    if (hasVerticalScroller) {
+      var bottomScrollerView = this.get('bottomScrollerView'),
+          topScrollerView = this.get('topScrollerView');
 
-    // convert view's frame to an offset from the contentView origin.  This
-    // will become the new scroll offset after some adjustment.
-    vf = contentView.convertFrameFromView(vf, view.get('parentView'));
+      topScrollerView.set('maximum', maximumVerticalScrollOffset);
+      bottomScrollerView.set('maximum', maximumVerticalScrollOffset);
 
-    var vscroll2 = this.get('verticalScrollerView2');
-    if (vscroll2 && vscroll2.get('isVisible')) {
-      vf.height += vscroll2.get('frame').height;
-    }
+      // Update if the visibility of the scrollers has changed now.
+      var containerHeight = this._sc_containerHeight,
+          contentHeight = this._sc_contentHeight;
 
-    var vscroll = this.get('verticalScrollerView');
-    if (vscroll && vscroll.get('isVisible')) {
-      vf.top -= vscroll.get('frame').height;
+      if (this.get('autohidesVerticalScroller')) {
+        this.setIfChanged('isVerticalScrollerVisible', contentHeight > containerHeight);
+      }
     }
-
-    return this.scrollToRect(vf);
   },
 
-  /** @private
-    Adjusts the layout for the various internal views.  This method is called
-    once when the scroll view is first configured and then anytime a scroller
-    is shown or hidden.  You can call this method yourself as well to retile.
-
-    You may also want to override this method to handle layout for any
-    additional controls you have added to the view.
-  */
-  tile: function () {
-    // get vertical scroller/determine if we should have a scroller
-    var hasScroller, vscroll, vscroll2, hasVertical, clip, clipLayout, viewportHeight;
-    hasScroller = this.get('hasVerticalScroller');
-    vscroll = hasScroller ? this.get('verticalScrollerView') : null;
-    vscroll2 = hasScroller ? this.get('verticalScrollerView2') : null;
-    hasVertical = vscroll && this.get('isVerticalScrollerVisible');
-
-    // get the containerView
-    clip = this.get('containerView');
-    clipLayout = { left: 0, top: 0 };
-
-    if (hasVertical) {
-      viewportHeight = 0;
-      var scrollerThickness = vscroll.get('scrollerThickness') || vscroll2.get('scrollerThickness');
-      var view   = this.get('contentView'),
-            f      = (view) ? view.get('frame') : null,
-            height = (f) ? f.height : 0,
-            elem = this.containerView.$()[0],
-            verticalOffset = this.get('verticalScrollOffset'),
-            topArrowInvisible = { height: 0, top: 0, right: 0, left: 0 },
-            topArrowVisible = { height: scrollerThickness, top: 0, right: 0, left: 0 },
-            bottomArrowVisible = { height: scrollerThickness, bottom: 0, right: 0, left: 0 },
-            bottomArrowInvisible = { height: 0, bottom: 0, right: 0, left: 0 };
-
-      if (elem) viewportHeight = elem.offsetHeight;
-
-      if (verticalOffset === 0) {
-        clipLayout.top = 0;
-        clipLayout.bottom = scrollerThickness;
-        vscroll.set('layout', topArrowInvisible);
-        vscroll2.set('layout', bottomArrowVisible);
-      } else if (verticalOffset >= (height - viewportHeight - scrollerThickness)) {
-        clipLayout.top = scrollerThickness;
-        clipLayout.bottom = 0;
-        vscroll.set('layout', topArrowVisible);
-        vscroll2.set('layout', bottomArrowInvisible);
-      } else {
-        clipLayout.top = scrollerThickness;
-        clipLayout.bottom = scrollerThickness;
-        vscroll.set('layout', topArrowVisible);
-        vscroll2.set('layout', bottomArrowVisible);
+  /** @private @see SC.ScrollView. Re-position the scrollers and content depending on the need to scroll or not. */
+  _sc_repositionScrollersUnfiltered: function () {
+    var hasScroller = this.get('hasVerticalScroller'),
+        containerView = this.get('containerView');
+
+    if (hasScroller && this.get('autohidesVerticalScroller')) {
+      var bottomScrollerView = this.get('bottomScrollerView'),
+          bottomScrollerThickness = bottomScrollerView.get('scrollerThickness'),
+          maximumVerticalScrollOffset = this.get('maximumVerticalScrollOffset'),
+          topScrollerView = this.get('topScrollerView'),
+          topScrollerThickness = topScrollerView.get('scrollerThickness'),
+          verticalOffset = this.get('verticalScrollOffset'),
+          isBottomScrollerVisible = bottomScrollerView.get('isVisible'),
+          isTopScrollerVisible = topScrollerView.get('isVisible');
+
+      // This asymetric update moves the container view out of the way of the scrollers (essentially
+      // so that the scroller views can be transparent). What's important is that as the container
+      // view is adjusted, the vertical scroll offset is adjusted properly so that the content view
+      // position doesn't jump around.
+      if (isTopScrollerVisible) {
+        if (verticalOffset <= topScrollerThickness) {
+          topScrollerView.set('isVisible', false);
+          containerView.adjust('top', 0);
+          this.decrementProperty('verticalScrollOffset', topScrollerThickness);
+        }
+      } else if (verticalOffset > 0) {
+        topScrollerView.set('isVisible', true);
+        containerView.adjust('top', topScrollerThickness);
+        this.incrementProperty('verticalScrollOffset', topScrollerThickness);
       }
-    }
 
-    if (vscroll) {
-      vscroll.set('isVisible', hasVertical);
-      vscroll2.set('isVisible', hasVertical);
+      if (isBottomScrollerVisible) {
+        if (verticalOffset >= maximumVerticalScrollOffset - bottomScrollerThickness) {
+          bottomScrollerView.set('isVisible', false);
+          containerView.adjust('bottom', 0);
+          this.incrementProperty('verticalScrollOffset', bottomScrollerThickness);
+        }
+      } else if (verticalOffset < maximumVerticalScrollOffset) {
+        bottomScrollerView.set('isVisible', true);
+        containerView.adjust('bottom', bottomScrollerThickness);
+        this.decrementProperty('verticalScrollOffset', bottomScrollerThickness);
+      }
     }
-
-    clip.set('layout', clipLayout);
   },
 
-  /** @private
-    Called whenever a scroller visibility changes.  Calls the tile() method.
-  */
-  scrollerVisibilityDidChange: function () {
-    this.tile();
-  }.observes('isVerticalScrollerVisible', 'isHorizontalScrollerVisible', 'verticalScrollOffset'),
-
-
-  // ..........................................................
-  // INTERNAL SUPPORT
-  //
-
   /** @private
     Instantiate scrollers & container views as needed.  Replace their classes
     in the regular properties.
   */
   createChildViews: function () {
-    var childViews = [], view, view2, controlSize = this.get('controlSize');
-
-    // create the containerView.  We must always have a container view.
-    // also, setup the contentView as the child of the containerView...
-    if (SC.none(view = this.containerView)) view = SC.ContainerView;
-
-    childViews.push(this.containerView = this.createChildView(view, {
-      contentView: this.contentView
-    }));
-
-    // and replace our own contentView...
-    this.contentView = this.containerView.get('contentView');
-
-    // create a vertical scroller
-    if ((view = this.verticalScrollerView) && (view2 = this.verticalScrollerView2)) {
-      if (this.get('hasVerticalScroller')) {
-        view = this.verticalScrollerView = this.createChildView(view, {
-          layout: {top: 0, left: 0, right: 0},
-          controlSize: controlSize,
-          valueBinding: '*owner.verticalScrollOffset'
-        });
-        childViews.push(view);
-        view2 = this.verticalScrollerView2 = this.createChildView(view2, {
-          scrollDown: YES,
-          layout: { bottom: 0, left: 0, right: 0 },
-          controlSize: controlSize,
-          valueBinding: '*owner.verticalScrollOffset'
-        });
-        childViews.push(view2);
-      } else {
-        this.verticalScrollerView = null;
-        this.verticalScrollerView2 = null;
-      }
+    var childViews = [],
+      autohidesVerticalScroller = this.get('autohidesVerticalScroller');
+
+    // Set up the container view.
+    var containerView = this.get('containerView');
+
+    //@if(debug)
+    // Provide some debug-mode only developer support to prevent problems.
+    if (!containerView) {
+      throw new Error("Developer Error: SC.ScrollView must have a containerView class set before it is instantiated.");
     }
+    //@endif
 
-    // set childViews array.
-    this.childViews = childViews;
+    containerView = this.containerView = this.createChildView(containerView, {
+      contentView: this.contentView // Initialize the view with the currently set container view.
+    });
+    this.contentView = containerView.get('contentView'); // Replace our content view with the instantiated version.
+    childViews.push(containerView);
+
+    // Set up the scrollers.
+    if (!this.get('hasVerticalScroller')) {
+      // Remove the class entirely.
+      this.topScrollerView = null;
+      this.bottomScrollerView = null;
+    } else {
+      var controlSize = this.get('controlSize'),
+          topScrollerView = this.get('topScrollerView');
 
-    this.contentViewFrameDidChange(); // setup initial display...
-    this.tile(); // set up initial tiling
-  },
+      // Use a default scroller view.
+      /* jshint eqnull:true */
+      if (topScrollerView == null) {
+        topScrollerView = SC.MenuScrollerView;
+      }
 
-  /** @private */
-  init: function () {
-    sc_super();
+      // Replace the class property with an instance.
+      topScrollerView = this.topScrollerView = this.createChildView(topScrollerView, {
+        controlSize: controlSize,
+        scrollDown: false,
+        isVisible: !autohidesVerticalScroller,
 
-    // start observing initial content view.  The content view's frame has
-    // already been setup in prepareDisplay so we don't need to call
-    // viewFrameDidChange...
-    this._scroll_contentView = this.get('contentView');
-    var contentView = this._scroll_contentView;
+        value: this.get('verticalScrollOffset'),
+        valueBinding: '.owner.verticalScrollOffset', // Bind the value of the scroller to our vertical offset.
+        minimum: this.get('minimumVerticalScrollOffset'),
+        maximum: this.get('maximumVerticalScrollOffset')
+      });
 
-    if (contentView) {
-      contentView.addObserver('frame', this, this.contentViewFrameDidChange);
-    }
+      var topScrollerThickness = topScrollerView.get('scrollerThickness');
+      topScrollerView.adjust('height', topScrollerThickness);
 
-    if (this.get('isVisibleInWindow')) this._scsv_registerAutoscroll();
-  },
+      // Add the scroller view to the child views array.
+      childViews.push(topScrollerView);
 
-  /** @private Registers/deregisters view with SC.Drag for autoscrolling */
-  _scsv_registerAutoscroll: function () {
-    if (this.get('isVisibleInWindow')) SC.Drag.addScrollableView(this);
-    else SC.Drag.removeScrollableView(this);
-  }.observes('isVisibleInWindow'),
 
-  /** @private
-    Invoked whenever the contentView's frame changes.  This will update the
-    scroller maximum and optionally update the scroller visibility if the
-    size of the contentView changes.  We don't care about the origin since
-    that is tracked separately from the offset values.
-  */
-  contentViewFrameDidChange: function () {
-    var view   = this.get('contentView'), view2,
-        f      = (view) ? view.get('frame') : null,
-        width  = (f) ? f.width : 0,
-        height = (f) ? f.height : 0,
-        dim    = this.get('frame'),
-        viewportHeight, elem;
-
-    // cache out scroll settings...
-    //if ((width === this._scroll_contentWidth) && (height === this._scroll_contentHeight)) return;
-    this._scroll_contentWidth = width;
-    this._scroll_contentHeight = height;
-
-    if (this.get('hasVerticalScroller') && (view = this.get('verticalScrollerView')) && (view2 = this.get('verticalScrollerView2'))) {
-      height -= 1; // accurately account for our layout
-      // decide if it should be visible or not
-      if (this.get('autohidesVerticalScroller')) {
-        this.set('isVerticalScrollerVisible', height > dim.height);
+      var bottomScrollerView = this.get('bottomScrollerView');
+
+      // Use a default scroller view.
+      /* jshint eqnull:true */
+      if (bottomScrollerView == null) {
+        bottomScrollerView = SC.MenuScrollerView;
       }
-      height -= this.get('verticalScrollerBottom');
-      viewportHeight = 0;
-      elem = this.containerView.$()[0];
-      if (elem) viewportHeight = elem.offsetHeight;
-      height = height - viewportHeight;
-      view.setIfChanged('maximum', height);
-      view2.setIfChanged('maximum', height);
-    }
-  },
 
-  /** @private
-    Whenever the horizontal scroll offset changes, update the scrollers and
-    edit the location of the contentView.
-  */
-  _scroll_horizontalScrollOffsetDidChange: function () {},
+      // Replace the class property with an instance.
+      bottomScrollerView = this.bottomScrollerView = this.createChildView(bottomScrollerView, {
+        controlSize: controlSize,
+        scrollDown: true,
+        isVisible: !autohidesVerticalScroller,
+        layout: { bottom: 0 },
+
+        value: this.get('verticalScrollOffset'),
+        valueBinding: '.owner.verticalScrollOffset', // Bind the value of the scroller to our vertical offset.
+        minimum: this.get('minimumVerticalScrollOffset'),
+        maximum: this.get('maximumVerticalScrollOffset')
+      });
 
-  /** @private
-    Whenever the vertical scroll offset changes, update the scrollers and
-    edit the location of the contentView.
-  */
-  _scroll_verticalScrollOffsetDidChange: function () {
-    var offset = this.get('verticalScrollOffset');
+      var bottomScrollerThickness = bottomScrollerView.get('scrollerThickness');
+      bottomScrollerView.adjust('height', bottomScrollerThickness);
 
-    // update the offset for the contentView...
-    var contentView = this.get('contentView');
-    if (contentView) contentView.$().css('top', (0 - offset) + "px");
+      // Add the scroller view to the child views array.
+      childViews.push(bottomScrollerView);
 
-  }.observes('verticalScrollOffset')
+      // If the scrollers aren't initially hidden, adjust the container.
+      if (!autohidesVerticalScroller) {
+        containerView.adjust('top', topScrollerThickness);
+        containerView.adjust('bottom', bottomScrollerThickness);
+      }
+    }
+
+    // Set the childViews array.
+    this.childViews = childViews;
+  }
 
 });