sproutcore 1.7.1.beta → 1.8.0

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

@@ -142,8 +142,8 @@ SC.SliderView = SC.View.extend(SC.Control,
     if (!this.get('isEnabled')) return YES;
     var min = this.get('minimum'),
         max = this.get('maximum'),
-        newVal = this.get('value')+((evt.wheelDeltaX+evt.wheelDeltaY)*0.01),
         step = this.get('step'),
+        newVal = this.get('value')+((evt.wheelDeltaX+evt.wheelDeltaY)*step),
         value = Math.round(newVal / step) * step ;
     if (newVal< min) this.setIfChanged('value', min);
     else if (newVal> max) this.setIfChanged('value', max);
@@ -216,7 +216,6 @@ SC.SliderView = SC.View.extend(SC.Control,
   }.property('isEnabled'),
   
   keyDown: function(evt) {
-
      // handle tab key
      if (evt.which === 9 || evt.keyCode === 9) {
        var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
@@ -224,38 +223,43 @@ SC.SliderView = SC.View.extend(SC.Control,
        else evt.allowDefault(); 
        return YES ; // handled
      }
-     
-     if (evt.which >= 37 && evt.which <= 40){
+     if (evt.which >= 33 && evt.which <= 40){
        var min = this.get('minimum'),max=this.get('maximum'),
           step = this.get('step'),
-          size = max-min, val=0, calculateStep;
+          size = max-min, val=0, calculateStep, current=this.get('value');
      
-       if (evt.which === 37 || evt.which === 38 ){
+       if (evt.which === 37 || evt.which === 38 || evt.which === 34 ){
          if(step === 0){
            if(size<100){
-             val = this.get('value')-1;
+             val = current-1;
            }else{
              calculateStep = Math.abs(size/100);
-             if(calculateStep<2) calculateStep =2;
-             val = this.get('value')-Math.abs(size/100);
+             if(calculateStep<2) calculateStep = 2;
+             val = current-calculateStep;
            }
          }else{
-           val = this.get('value')-step;
+           val = current-step;
          }
        }
-       if (evt.which === 39 || evt.which === 40 ){
+       if (evt.which === 39 || evt.which === 40 || evt.which === 33 ){
            if(step === 0){
               if(size<100){
-                val = this.get('value') + 2;
+                val = current + 2;
               }else{
                 calculateStep = Math.abs(size/100);
                 if(calculateStep<2) calculateStep =2;
-                val = this.get('value')+calculateStep;
+                val = current+calculateStep;
               }
             }else{
-              val = this.get('value')+step;
+              val = current+step;
             }       
        }
+       if (evt.which === 36){
+         val=max;
+       }
+       if (evt.which === 35){
+          val=min;
+       }
        if(val>=min && val<=max) this.set('value', val);
      }else{
        evt.allowDefault();
@@ -264,14 +268,10 @@ SC.SliderView = SC.View.extend(SC.Control,
      return YES; 
    },
 
-  contentPropertyDidChange: function(target, key) {
-    var content = this.get('content');
-    this.beginPropertyChanges()
-      .updatePropertyFromContent('value', key, 'contentValueKey', content)
-      .updatePropertyFromContent('minimum', key, 'contentMinimumKey', content)
-      .updatePropertyFromContent('maximum', key, 'contentMaximumKey', content)
-      .updatePropertyFromContent('isIndeterminate', key, 'contentIsIndeterminateKey', content)
-    .endPropertyChanges();
-  }  
-  
+   contentKeys: {
+     'contentValueKey': 'value',
+     'contentMinimumKey': 'minimum',
+     'contentMaximumKey': 'maximum',
+     'contentIsIndeterminateKey': 'isIndeterminate'
+   }
 });

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

@@ -13,54 +13,54 @@ SC.RESIZE_BOTTOM_RIGHT = 'resize-bottom-right';
 
 /**
   @class
-  
+
   A split view is used to show views that the user can resize or collapse.
   To use a split view you need to set a topLeftView, a bottomRightView and,
   optionally, a splitDividerView.  You can also set various other properties
   to control the minimum and maximum thickness allowed for the flexible views.
-  
+
   ## Example
-  
+
       SC.SplitView.design({
-      
+
         // the left view...
         topLeftView: SC.View.design({
           // view contents
         }),
-      
+
         // the right view
         bottomRightView: SC.View.design({
           // view contents
         })
-      
+
       })
-  
+
   When the user clicks and drags on a split divider view, it will
   automatically resize the views immediately before and after the split
   divider view. You can constrain the resizing allowed by the split view
   either by setting a minThickness and maxThickness property on the views
   themselves or by implementing the method splitViewConstrainThickness on
   a delegate object.
-  
+
   In addition to resizing views, users can also collapse views by double
   clicking on a split divider view.  When a view is collapsed, it's isVisible
   property is set to NO and its space it removed from the view.  Double
   clicking on a divider again will restore a collapsed view.  A user can also
   start to drag the divider to show the collapsed view.
-  
-  You can programmatically control collapsing behavior using various 
-  properties on either the split view or its child views, and/or by 
+
+  You can programmatically control collapsing behavior using various
+  properties on either the split view or its child views, and/or by
   implementing the method splitViewCanCollapse on a delegate object.
-  
+
   Finally, SplitViews can layout their child views either horizontally or
   vertically.  To choose the direction of layout set the layoutDirection
   property on the view (or the :direction option with the view helper).
   This property should be set when the view is created. Changing it
   dynamically will have an unknown effect.
-  
+
   In addition, the top/left and bottom/right child views can have these
   properties:
-  
+
   @extends SC.View
   @since SproutCore 1.0
   @author Charles Jolley
@@ -69,52 +69,52 @@ SC.RESIZE_BOTTOM_RIGHT = 'resize-bottom-right';
 */
 SC.SplitView = SC.View.extend(
 /** @scope SC.SplitView.prototype */ {
-  
+
   classNames: ['sc-split-view'],
-  
+
   displayProperties: ['layoutDirection'],
-  
+
   /**
     delegate for controlling split view behavior.
   */
   delegate: null,
-  
+
   /**
     Direction of layout.  Must be SC.LAYOUT_HORIZONTAL or SC.LAYOUT_VERTICAL.
-    
+
     @type String
     @default SC.LAYOUT_HORIZONTAL
   */
   layoutDirection: SC.LAYOUT_HORIZONTAL,
-  
+
   /**
     Set to NO to disable collapsing for all views.
-    
+
     @type Boolean
     @default YES
   */
   canCollapseViews: YES,
-  
+
   /*
-    Configure which view(s) you want to autoresize when this split view's 
+    Configure which view(s) you want to autoresize when this split view's
     layout changes.  Possible options are:
-    
+
     | SC.RESIZE_BOTTOM_RIGHT | (default) resizes bottomRightView |
     | SC.RESIZE_TOP_LEFT | resized topLeftView |
-    
+
     @type String
     @default SC.RESIZE_BOTTOM_RIGHT
   */
   autoresizeBehavior: SC.RESIZE_BOTTOM_RIGHT,
-  
+
   /**
     Specifies how much space the fixed view should use when the view is setup.
-    A number less than one will be treated as a percentage, while a number 
+    A number less than one will be treated as a percentage, while a number
     greater than one will be treated as a pixel width.
-    
-    The thickness will be applied to the opposite view defined by 
+
+    The thickness will be applied to the opposite view defined by
     autoresizeBehavior.
-    
+
     @type Number
     @default 0.5
   */
@@ -159,18 +159,18 @@ SC.SplitView = SC.View.extend(
     @default null
   */
   dividerThickness: null,
- 
+
   /**
     Yes, we're a split view.
-    
+
     @type Boolean
     @default YES
   */
   isSplitView: YES,
-  
+
   /**
     The view to use for the top left
-    
+
     @type SC.View
     @default SC.View
   */
@@ -178,23 +178,23 @@ SC.SplitView = SC.View.extend(
 
   /**
     The view to use for the divider
-    
+
     @type SC.View
     @default SC.SplitDividerView
   */
   dividerView: SC.SplitDividerView,
-  
+
   /**
     The view to use for the bottom right
-    
+
     @type SC.View
     @default SC.View
   */
   bottomRightView: SC.View,
-  
+
   /**
     The current thickness for the topLeftView
-    
+
     @type Number
     @isReadOnly
   */
@@ -205,7 +205,7 @@ SC.SplitView = SC.View.extend(
 
   /**
     The current thickness for the bottomRightView
-    
+
     @type Number
     @isReadOnly
   */
@@ -213,28 +213,28 @@ SC.SplitView = SC.View.extend(
     var view = this.get('bottomRightView');
     return view ? this.thicknessForView(view) : 0;
   }.property('bottomRightView').cacheable(),
-  
+
   /**
     The cursor thumb views should use for themselves
-    
+
     @type SC.Cursor
     @default null
   */
   thumbViewCursor: null,
-  
+
   /**
     Used by split divider to decide if the view can be collapsed.
-    
+
     @type Boolean
     @isReadOnly
   */
   canCollapseView: function(view) {
     return this.invokeDelegateMethod(this.delegate, 'splitViewCanCollapse', this, view);
   },
-  
+
   /**
     Returns the thickness for a given view.
-    
+
     @param {SC.View} view the view to get.
     @returns the view with the width.
   */
@@ -243,11 +243,11 @@ SC.SplitView = SC.View.extend(
         ret = view.get('frame');
     return (direction === SC.LAYOUT_HORIZONTAL) ? ret.width : ret.height;
   },
-  
+
   /** @private
     Creates the topLeftView/dividerView/bottomRightView and adds them to the
     childViews array
-    
+
     @returns SC.View the SplitDivider view (this)
   */
   createChildViews: function() {
@@ -255,7 +255,7 @@ SC.SplitView = SC.View.extend(
         views = ['topLeftView', 'dividerView', 'bottomRightView'],
         l = views.length,
         view, i;
-    
+
     for (i=0; i<l; ++i) {
       if (view = this.get(views[i])) {
         view = this[views[i]] = this.createChildView(view, {
@@ -265,14 +265,14 @@ SC.SplitView = SC.View.extend(
         childViews.push(view);
       }
     }
-    
+
     this.set('childViews', childViews);
     return this;
   },
-  
+
   /** @private
     Layout the views.
-    
+
     This method needs to be called anytime you change the view thicknesses
     to make sure they are arranged properly.  This will set up the views so
     that they can resize appropriately.
@@ -289,19 +289,19 @@ SC.SplitView = SC.View.extend(
         splitViewThickness = (direction === SC.LAYOUT_HORIZONTAL) ? frame.width : frame.height,
         bottomRightThickness = splitViewThickness - dividerThickness - topLeftThickness,
         layout, isCollapsed;
-    
+
     dividerThickness = (!SC.none(dividerThickness)) ? dividerThickness : 7;
-    
+
     // top/left view
     isCollapsed = topLeftView.get('isCollapsed') || NO;
     topLeftView.setIfChanged('isVisible', !isCollapsed);
     layout = SC.clone(topLeftView.get('layout'));
-    
+
     if (direction === SC.LAYOUT_HORIZONTAL) {
       layout.top = 0;
       layout.left = 0;
       layout.bottom = 0;
-      
+
       switch (autoresizeBehavior) {
         case SC.RESIZE_BOTH:
           throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -319,7 +319,7 @@ SC.SplitView = SC.View.extend(
       layout.top = 0;
       layout.left = 0;
       layout.right = 0;
-      
+
       switch (autoresizeBehavior) {
         case SC.RESIZE_BOTH:
           throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -335,17 +335,17 @@ SC.SplitView = SC.View.extend(
       }
     }
     topLeftView.set('layout', layout);
-    
+
     // split divider view
     if (dividerView) {
       layout = SC.clone(dividerView.get('layout'));
-      
+
       if (direction === SC.LAYOUT_HORIZONTAL) {
         layout.width = dividerThickness;
         layout.top = 0;
         layout.bottom = 0;
         delete layout.height;
-        
+
         switch (autoresizeBehavior) {
           case SC.RESIZE_BOTH:
             throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -372,7 +372,7 @@ SC.SplitView = SC.View.extend(
         layout.left = 0;
         layout.right = 0;
         delete layout.width;
-        
+
         switch (autoresizeBehavior) {
           case SC.RESIZE_BOTH:
             throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -397,17 +397,17 @@ SC.SplitView = SC.View.extend(
       }
       dividerView.set('layout', layout);
     }
-    
+
     // bottom/right view
     isCollapsed = bottomRightView.get('isCollapsed') || NO;
     bottomRightView.setIfChanged('isVisible', !isCollapsed);
     layout = SC.clone(bottomRightView.get('layout'));
-    
+
     if (direction === SC.LAYOUT_HORIZONTAL) {
       layout.top = 0;
       layout.bottom = 0;
       layout.right = 0;
-      
+
       switch (autoresizeBehavior) {
         case SC.RESIZE_BOTH:
           throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -424,7 +424,7 @@ SC.SplitView = SC.View.extend(
       layout.left = 0;
       layout.right = 0;
       layout.bottom = 0;
-      
+
       switch (autoresizeBehavior) {
         case SC.RESIZE_BOTH:
           throw "SC.RESIZE_BOTH is currently unsupported.";
@@ -439,16 +439,16 @@ SC.SplitView = SC.View.extend(
       }
     }
     bottomRightView.set('layout', layout);
-    
+
     this
       .notifyPropertyChange('topLeftThickness')
       .notifyPropertyChange('bottomRightThickness');
   },
-  
+
   /** @private */
   renderLayout: function(context, firstTime) {
     if (firstTime || this._recalculateDivider) {
-      
+
       var layoutDirection = this.get('layoutDirection'),
           frame = this.get('frame'),
           elem = this.$(),
@@ -456,39 +456,39 @@ SC.SplitView = SC.View.extend(
           autoResizeBehavior = this.get('autoresizeBehavior'),
           dividerThickness = this.get('dividerThickness'),
           splitViewThickness;
-      
+
       if (!this.get('thumbViewCursor')) {
         this.set('thumbViewCursor', SC.Cursor.create());
       }
-      
+
       dividerThickness = !SC.none(dividerThickness) ? dividerThickness : 7;
-      
-      // Turn a flag on to recalculate the spliting if the desired thickness
+
+      // Turn a flag on to recalculate the splitting if the desired thickness
       // is a percentage
       if (this._recalculateDivider === undefined && desiredThickness < 1) {
         this._recalculateDivider = YES;
       } else if (this._recalculateDivider) {
         this._recalculateDivider = NO;
       }
-      
+
       if (elem[0]) {
         splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? elem[0].offsetWidth : elem[0].offsetHeight;
       } else {
         splitViewThickness = (layoutDirection === SC.LAYOUT_HORIZONTAL) ? frame.width : frame.height;
       }
-      
+
       // if default thickness is < 1, convert from percentage to absolute
       if (SC.none(desiredThickness) || (desiredThickness > 0 && desiredThickness < 1)) {
         desiredThickness = Math.floor((splitViewThickness - (dividerThickness)) * (desiredThickness || 0.5));
       }
-      
+
       if (autoResizeBehavior === SC.RESIZE_BOTTOM_RIGHT) {
         this._desiredTopLeftThickness = desiredThickness;
       } else {
         this._desiredTopLeftThickness = splitViewThickness - dividerThickness - desiredThickness ;
       }
-      
-      // make sure we don't exceed our min and max values, and that collapse 
+
+      // make sure we don't exceed our min and max values, and that collapse
       // settings are respected
       // cached values are required by _updateTopLeftThickness() below...
       this._topLeftView = this.get('topLeftView');
@@ -497,46 +497,46 @@ SC.SplitView = SC.View.extend(
       this._bottomRightThickness = this.thicknessForView(this.get('bottomRightView'));
       this._dividerThickness = this.get('dividerThickness');
       this._layoutDirection = this.get('layoutDirection');
-      
+
       // this handles min-max settings and collapse parameters
       this._updateTopLeftThickness(0);
-      
+
       // update the cursor used by thumb views
       this._setCursorStyle();
-      
+
       // actually set layout for our child views
       this.updateChildLayout();
     }
-    
+
     sc_super();
   },
-  
+
   /** @private */
   render: function(context, firstTime) {
     sc_super();
-    
+
     if (this._inLiveResize) this._setCursorStyle();
-    
+
     if (this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) context.addClass('sc-horizontal');
     else context.addClass('sc-vertical');
   },
-  
+
   /** @private
     Update the split view's layout based on mouse movement.
-    
+
     Call this method in the mouseDown: method of your thumb view. The split view
-    will begin tracking the mouse and will update its own layout to reflect the movement 
+    will begin tracking the mouse and will update its own layout to reflect the movement
     of the mouse. As a result, the position of your thumb view will also be updated.
-    
+
     @returns {Boolean}
   */
   mouseDownInThumbView: function(evt, thumbView) {
     var responder = this.getPath('pane.rootResponder');
     if (!responder) return NO; // nothing to do
-      
+
     // we're not the source view of the mouseDown:, so we need to capture events manually to receive them
     responder.dragDidStart(this);
-    
+
     // cache for later
     this._mouseDownX = evt.pageX;
     this._mouseDownY = evt.pageY;
@@ -547,20 +547,20 @@ SC.SplitView = SC.View.extend(
     this._bottomRightThickness = this.thicknessForView(this.get('bottomRightView'));
     this._dividerThickness = this.get('dividerThickness');
     this._layoutDirection = this.get('layoutDirection');
-    
+
     this.beginLiveResize();
     this._inLiveResize = YES;
-    
+
     return YES;
   },
-  
+
   /** @private */
   mouseDragged: function(evt) {
     var offset = (this._layoutDirection === SC.LAYOUT_HORIZONTAL) ? evt.pageX - this._mouseDownX : evt.pageY - this._mouseDownY ;
     this._updateTopLeftThickness(offset);
     return YES;
   },
-  
+
   /** @private */
   mouseUp: function(evt) {
     if (this._inLiveResize === YES) {
@@ -569,38 +569,32 @@ SC.SplitView = SC.View.extend(
     	this.endLiveResize();
     	return YES;
     }
-    
-    var cursor = this.get('thumbViewCursor'), 
-        cloneCursor = SC.clone(cursor),
-        dV= this.get('dividerView');
-    cursor.set('cursorStyle', SC.SYSTEM_CURSOR);
-    dV.set('cursor', cloneCursor);
-    this.set('cursor', cursor);
-    
+
+    this._setCursorStyle();
     return NO;
   },
-  
+
   /** @private */
   touchesDragged: function(evt){
     return this.mouseDragged(evt);
   },
-  
+
   /** @private */
   touchEnd: function(evt){
     return this.mouseUp(evt);
   },
-  
+
   /** @private */
   doubleClickInThumbView: function(evt, thumbView) {
     var view = this._topLeftView,
         isCollapsed = view.get('isCollapsed') || NO;
-    
+
     if (!isCollapsed && !this.canCollapseView(view)) {
       view = this._bottomRightView;
       isCollapsed = view.get('isCollapsed') || NO;
       if (!isCollapsed && !this.canCollapseView(view)) return NO;
     }
-    
+
     if (!isCollapsed) {
       // remember thickness in it's uncollapsed state
       this._uncollapsedThickness = this.thicknessForView(view);
@@ -611,7 +605,7 @@ SC.SplitView = SC.View.extend(
       } else {
         this._updateBottomRightThickness(this.bottomRightThickness()*-1);
       }
-      
+
       // if however the splitview decided not to collapse, clear:
       if (!view.get("isCollapsed")) {
         this._uncollapsedThickness = null;
@@ -628,13 +622,13 @@ SC.SplitView = SC.View.extend(
     this._setCursorStyle();
     return true;
   },
-  
+
   /** @private */
   _updateTopLeftThickness: function(offset) {
     var topLeftView = this._topLeftView,
         bottomRightView = this._bottomRightView,
         // the current thickness, not the original thickness
-        topLeftViewThickness = this.thicknessForView(topLeftView), 
+        topLeftViewThickness = this.thicknessForView(topLeftView),
         bottomRightViewThickness = this.thicknessForView(bottomRightView),
         minAvailable = this._dividerThickness,
         maxAvailable = 0,
@@ -646,17 +640,17 @@ SC.SplitView = SC.View.extend(
         max = this.get('topLeftMaxThickness'),
         min = this.get('topLeftMinThickness'),
         bottomRightThickness, tlCollapseAtThickness, brCollapseAtThickness;
-    
+
     if (!topLeftView.get("isCollapsed")) {
       maxAvailable += topLeftViewThickness;
     }
     if (!bottomRightView.get("isCollapsed")) {
       maxAvailable += bottomRightViewThickness;
     }
-    
+
     if (!SC.none(max)) thickness = Math.min(max, thickness);
     if (!SC.none(min)) thickness = Math.max(min, thickness);
-    
+
     // constrain to thickness set on bottom/right
     max = this.get('bottomRightMaxThickness');
     min = this.get('bottomRightMinThickness');
@@ -668,22 +662,22 @@ SC.SplitView = SC.View.extend(
       bottomRightThickness = Math.max(min, bottomRightThickness);
     }
     thickness = maxAvailable - bottomRightThickness;
-    
+
     // constrain to thickness determined by delegate.
-    thickness = this.invokeDelegateMethod(this.delegate, 
+    thickness = this.invokeDelegateMethod(this.delegate,
       'splitViewConstrainThickness', this, topLeftView, thickness);
-    
+
     // cannot be more than what's available
     thickness = Math.min(thickness, maxAvailable);
-    
+
     // cannot be less than zero
     thickness = Math.max(0, thickness);
-    
+
     tlCollapseAtThickness = topLeftView.get('collapseAtThickness');
     if (!tlCollapseAtThickness) tlCollapseAtThickness = 0;
     brCollapseAtThickness = bottomRightView.get('collapseAtThickness');
     brCollapseAtThickness = SC.none(brCollapseAtThickness) ? maxAvailable : (maxAvailable - brCollapseAtThickness);
-    
+
     if ((proposedThickness <= tlCollapseAtThickness) && this.canCollapseView(topLeftView)) {
       // want to collapse top/left, check if this doesn't violate the max thickness of bottom/right
       max = bottomRightView.get('maxThickness');
@@ -699,21 +693,21 @@ SC.SplitView = SC.View.extend(
         thickness = maxAvailable;
       }
     }
-    
+
     // now apply constrained value
     if (thickness != this.thicknessForView(topLeftView)) {
       this._desiredTopLeftThickness = thickness;
-      
+
       // un-collapse if needed.
       topLeftView.set('isCollapsed', thickness === 0);
       bottomRightView.set('isCollapsed', thickness >= maxAvailable);
-      
+
       this.updateChildLayout(); // updates child layouts
       this.displayDidChange(); // updates cursor
     }
   },
-  
-  
+
+
   /** @private */
   _updateBottomRightThickness: function(offset) {
     var topLeftView = this._topLeftView ,
@@ -730,13 +724,13 @@ SC.SplitView = SC.View.extend(
         max = this.get('topLeftMaxThickness'),
         min = this.get('topLeftMinThickness'),
         bottomRightThickness, tlCollapseAtThickness, brCollapseAtThickness;
-    
+
     if (!topLeftView.get("isCollapsed")) maxAvailable += topLeftViewThickness;
     if (!bottomRightView.get("isCollapsed")) maxAvailable += bottomRightViewThickness;
-    
+
     if (!SC.none(max)) thickness = Math.min(max, thickness);
     if (!SC.none(min)) thickness = Math.max(min, thickness);
-    
+
     // constrain to thickness set on bottom/right
     max = this.get('bottomRightMaxThickness');
     min = this.get('bottomRightMinThickness');
@@ -744,21 +738,21 @@ SC.SplitView = SC.View.extend(
     if (!SC.none(max)) bottomRightThickness = Math.min(max, bottomRightThickness);
     if (!SC.none(min)) bottomRightThickness = Math.max(min, bottomRightThickness);
     thickness = maxAvailable - bottomRightThickness;
-    
+
     // constrain to thickness determined by delegate.
     thickness = this.invokeDelegateMethod(this.delegate, 'splitViewConstrainThickness', this, topLeftView, thickness);
-    
+
     // cannot be more than what's available
     thickness = Math.min(thickness, maxAvailable);
-    
+
     // cannot be less than zero
     thickness = Math.max(0, thickness);
-    
+
     tlCollapseAtThickness = topLeftView.get('collapseAtThickness');
     if (!tlCollapseAtThickness) tlCollapseAtThickness = 0;
     brCollapseAtThickness = bottomRightView.get('collapseAtThickness');
     brCollapseAtThickness = SC.none(brCollapseAtThickness) ? maxAvailable : (maxAvailable - brCollapseAtThickness);
-    
+
     if ((proposedThickness <= tlCollapseAtThickness) && this.canCollapseView(topLeftView)) {
       // want to collapse top/left, check if this doesn't violate the max thickness of bottom/right
       max = bottomRightView.get('maxThickness');
@@ -774,64 +768,64 @@ SC.SplitView = SC.View.extend(
         thickness = maxAvailable;
       }
     }
-    
+
     // now apply constrained value
     if (thickness != this.thicknessForView(topLeftView)) {
       this._desiredTopLeftThickness = thickness;
-      
+
       // un-collapse if needed.
       topLeftView.set('isCollapsed', thickness === 0);
       bottomRightView.set('isCollapsed', thickness >= maxAvailable);
-      
+
       this.updateChildLayout(); // updates child layouts
       this.displayDidChange(); // updates cursor
     }
   },
-  
-  /** 
+
+  /**
     This observes 'layoutDirection' to update the cursor style immediately
     after the value of the layoutDirection of Split view is changed
 
-    @private 
+    @private
   */
   _setCursorStyle: function() {
     var topLeftView = this._topLeftView,
         bottomRightView = this._bottomRightView,
         thumbViewCursor = this.get('thumbViewCursor'),
-        // updates the cursor of the thumb view that called 
+        // updates the cursor of the thumb view that called
         // mouseDownInThumbView() to reflect the status of the drag
         tlThickness = this.thicknessForView(topLeftView),
         brThickness = this.thicknessForView(bottomRightView),
         dV = this.get('dividerView');
     this._layoutDirection = this.get('layoutDirection');
-    if (topLeftView.get('isCollapsed') || 
-        tlThickness === this.get("topLeftMinThickness") || 
+    if (topLeftView.get('isCollapsed') ||
+        tlThickness === this.get("topLeftMinThickness") ||
         brThickness == this.get("bottomRightMaxThickness")) {
       thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "e-resize" : "s-resize");
-    } else if (bottomRightView.get('isCollapsed') || 
-               tlThickness === this.get("topLeftMaxThickness") || 
+    } else if (bottomRightView.get('isCollapsed') ||
+               tlThickness === this.get("topLeftMaxThickness") ||
                brThickness == this.get("bottomRightMinThickness")) {
       thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "w-resize" : "n-resize");
     } else {
-      if(SC.browser.msie) {
+      if(SC.browser.isIE) {
         thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "e-resize" : "n-resize");
       }
       else {
         thumbViewCursor.set('cursorStyle', this._layoutDirection === SC.LAYOUT_HORIZONTAL ? "ew-resize" : "ns-resize");
       }
     }
-    
+
     dV.set('cursor', thumbViewCursor);
     if( this._inLiveResize) this.set('cursor', thumbViewCursor);
   }.observes('layoutDirection'),
-  
+
   /**
     (DELEGATE) Control whether a view can be collapsed.
-    
-    The default implemention returns NO if the split view property
+
+    The default implementation returns NO if the split view property
     canCollapseViews is set to NO or when the given view has
     property canCollapse set to NO, otherwise it returns YES.
-    
+
     @param {SC.SplitView} splitView the split view
     @param {SC.View} view the view we want to collapse.
     @returns {Boolean} YES to allow collapse.
@@ -841,14 +835,14 @@ SC.SplitView = SC.View.extend(
     if (view.get('canCollapse') === NO) return NO;
     return YES;
   },
-  
+
   /**
     (DELEGATE) Constrain a views allowed thickness.
-    
+
     The default implementation allows any thickness.  The view will
     automatically constrain the view to not allow views to overflow the
     visible area.
-    
+
     @param {SC.SplitView} splitView the split view
     @param {SC.View} view the view in question
     @param {Number} proposedThickness the proposed thickness.
@@ -857,11 +851,11 @@ SC.SplitView = SC.View.extend(
   splitViewConstrainThickness: function(splitView, view, proposedThickness) {
     return proposedThickness;
   },
-  
+
   /* Force to rendering once the pane is attached */
   /** @private */
   _forceSplitCalculation: function(){
-    this.updateLayout(); 
+    this.updateLayout();
   }.observes('*pane.isPaneAttached'),
 
   /** @private