sproutcore 1.6.0.rc.2-x86-mingw32 → 1.6.0.1-x86-mingw32

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

@@ -826,7 +826,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
       .addClass('sc-disclosure-view')
       .addClass('sc-regular-size')
       .addClass(this.get('theme').classNames)
-      .addClass(renderer.get('name'));
+      .addClass(renderer.get('className'));
 
     var source = this._disclosureRenderSource;
     if (!source) {
@@ -863,7 +863,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
       .addClass('sc-checkbox-view')
       .addClass('sc-regular-size')
       .addClass(this.get('theme').classNames)
-      .addClass(renderer.get('name'));
+      .addClass(renderer.get('className'));
 
     var source = this._checkboxRenderSource;
     if (!source) {

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

@@ -103,10 +103,20 @@ SC.MasterDetailView = SC.View.extend(
   }.property().cacheable(),
   
   /**
+    The width of the 'master' side of the master/detail view.
+
     @type Number
     @default 250
   */
   masterWidth: 250,
+
+  /**
+    The width of the divider between the master and detail views.
+
+    @type Number
+    @default From theme, or 1.
+  */
+  dividerWidth: SC.propertyFromRenderDelegate('dividerWidth', 1),
   
   /**
     A property (computed) that says whether the master view is hidden.
@@ -296,7 +306,7 @@ SC.MasterDetailView = SC.View.extend(
       });
       
       // and child, naturally
-      var extra = this.getThemedProperty('dividerWidth', 'MASTER_DETAIL_DIVIDER_WIDTH');
+      var extra = this.get('dividerWidth');
       detail.set("layout", { left: masterWidth + extra, right: 0, top: 0, bottom: 0 });
     } else {
       // remove master if needed

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

@@ -28,10 +28,10 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
 
   /**
     @type Array
-    @default ['title', 'isEnabled', 'isSeparator']
+    @default ['title', 'isEnabled', 'isSeparator', 'isChecked']
     @see SC.View#displayProperties
   */
-  displayProperties: ['title', 'isEnabled', 'isSeparator'],
+  displayProperties: ['title', 'isEnabled', 'isSeparator', 'isChecked'],
 
 
   /**
@@ -103,6 +103,16 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
            this.getContentProperty('itemSeparatorKey') !== YES;
   }.property('content.isEnabled').cacheable(),
 
+  /**
+    YES if the menu item should include a check next to it.
+
+    @type Boolean
+    @property
+  */
+  isChecked: function() {
+    return this.getContentProperty('itemCheckboxKey');
+  }.property(),
+
   /**
     This menu item's submenu, if it exists.
 
@@ -172,10 +182,10 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
     this.set('itemHeight',itemHeight);
 
     //addressing accessibility
-    if(content.get(menu.itemSeparatorKey)){
+    if (this.get('isSeparator')) {
       //assign the role of separator
       context.attr('role', 'separator');
-    } else if (this.getContentProperty('itemCheckboxKey')) {
+    } else if (this.get('isChecked')) {
       //assign the role of menuitemcheckbox
       context.attr('role', 'menuitemcheckbox');
       context.attr('aria-checked', true);
@@ -183,7 +193,7 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
 
     context = context.begin('a').addClass('menu-item');
 
-    if (content.get(menu.itemSeparatorKey)) {
+    if (this.get('isSeparator')) {
       context.push('<span class="separator"></span>');
       context.addClass('disabled');
     } else {
@@ -197,7 +207,7 @@ SC.MenuItemView = SC.View.extend(SC.ContentDisplay,
       if (SC.typeOf(val) !== SC.T_STRING) val = val.toString();
       this.renderLabel(context, val);
 
-      if (this.getContentProperty('itemCheckboxKey')) {
+      if (this.get('isChecked')) {
         context.push('<div class="checkbox"></div>');
       }
 

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

@@ -152,7 +152,6 @@ SC.ProgressView = SC.View.extend(SC.Control,
     
     @deprecated This should now be changed in themes.
     @type Integer
-    @deprecated
   */
   offsetRange: undefined,
 

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

@@ -349,14 +349,15 @@ SC.RadioView = SC.View.extend(SC.Control,
   mouseDown: function(evt) {
     if (!this.get('isEnabled')) return YES;
     
-    var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy');
-    var index = delegate.indexForEvent(proxy, this.$(), evt);
+    var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy'),
+        elem = this.$(),
+        index = delegate.indexForEvent(proxy, elem, evt);
     
     this._activeRadioButton = index;
     
     if (index !== undefined) {
       this.get('displayItems')[index].set('isActive', YES);
-      delegate.updateRadioAtIndex(proxy, this.$(), index);
+      delegate.updateRadioAtIndex(proxy, elem, index);
     }
     
     // even if radiobuttons are not set to get firstResponder, allow default 
@@ -374,22 +375,63 @@ SC.RadioView = SC.View.extend(SC.Control,
     if (!this.get('isEnabled')) return YES;
 
     var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy'),
-        displayItems = this.get('displayItems');
-    var index = delegate.indexForEvent(proxy, this.$(), evt);
+        elem = this.$(),
+        displayItems = this.get('displayItems'),
+        index = delegate.indexForEvent(proxy, elem, evt);
     
     if (this._activeRadioButton !== undefined && index !== this._activeRadioButton) {
       displayItems[this._activeRadioButton].set('isActive', NO);
-      delegate.updateRadioAtIndex(proxy, this.$(), this._activeRadioButton);
+      delegate.updateRadioAtIndex(proxy, elem, this._activeRadioButton);
     }
     
     this._activeRadioButton = undefined;
     
     if (index !== undefined) {
       displayItems[index].set('isActive', NO);
-      delegate.updateRadioAtIndex(proxy, this.$(), index);
+      delegate.updateRadioAtIndex(proxy, elem, index);
       this.set('value', displayItems[index].value);
     }
+    
+    evt.allowDefault();
+    return YES;
   },
+  
+  keyDown: function(evt) {
+    if(!this.get('isEnabled')) return YES;
+    // handle tab key
+    if (evt.which === 9 || evt.keyCode === 9) {
+      var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
+      if(view) view.becomeFirstResponder();
+      else evt.allowDefault();
+      return YES ; // handled
+    }
+    if (evt.which >= 37 && evt.which <= 40){
+      
+      var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy'),
+          elem = this.$(),
+          displayItems = this.get('displayItems'),
+          val = this.get('value');
+      for(var i= 0, iLen = displayItems.length; i<iLen; i++){
+        if(val === displayItems[i].value) break;
+      }
+      
+     
+      if (evt.which === 37 || evt.which === 38 ){
+        if(i<=0) i = displayItems.length-1;
+        else i--;
+      }
+      if (evt.which === 39 || evt.which === 40 ){
+        if(i>=displayItems.length-1) i = 0;
+        else i++;
+      }
+      delegate.updateRadioAtIndex(proxy, elem, i);
+      this.set('value', displayItems[i].value);
+    }
+    evt.allowDefault();
+
+    return NO;
+  },
+  
 
   /** @private */
   touchStart: function(evt) {

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

@@ -16,6 +16,8 @@ sc_require('views/button');
   list of items. The selected item will be displayed on the button.
   User has the option of enabling checkbox for the selected menu item.
 
+  @deprecated Please use SC.SelectView instead
+
   @extends SC.ButtonView
   @version 1.0
   @author Mohammed Ashik
@@ -23,6 +25,13 @@ sc_require('views/button');
 SC.SelectButtonView = SC.ButtonView.extend(
 /** @scope SC.SelectButtonView.prototype */ {
 
+  init: function(){
+    // @if (debug)
+    SC.Logger.warn("SC.SelectButtonView is deprecated. Please use SC.SelectView instead.");
+    // @endif
+    sc_super();
+  },
+
   /**
     @type Boolean
     @default YES

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

@@ -9,11 +9,14 @@
 /**
   @class
 
+  DEPRECATED. Use SelectView instead.
+
   SelectFieldView displays browser-native popup menu.  To use this view,
   you should either bake into the HTML the preset list of options, or 
   you can set the -objects property to an array of items to show.  The
   value is current value of the select.
-  
+
+  @deprecated
   @extends SC.FieldView
   @author Charles Jolley
   @author Mike Ball
@@ -165,7 +168,8 @@ SC.SelectFieldView = SC.FieldView.extend(
 
   /** @private */
   render: function(context, firstTime) {
-    if (this.get('cpDidChange')) {
+    // Only re-render if it's the firstTime or if a change is required
+    if (firstTime || this.get('cpDidChange')) {
       this.set('cpDidChange', NO);
       // get list of objects.
       var nameKey = this.get('nameKey') ;

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

@@ -215,21 +215,6 @@ SC.SliderView = SC.View.extend(SC.Control,
     return NO;
   }.property('isEnabled'),
   
-  willBecomeKeyResponderFrom: function(keyView) {
-    // focus the text field.
-    if (!this._isFocused) {
-      this._isFocused = YES ;
-      this.becomeFirstResponder();
-      if (this.get('isVisibleInWindow')) {
-        this.$().focus();
-      }
-    }
-  },
-  
-  willLoseKeyResponderTo: function(responder) {
-    if (this._isFocused) this._isFocused = NO ;
-  },
-  
   keyDown: function(evt) {
 
      // handle tab key
@@ -240,7 +225,7 @@ SC.SliderView = SC.View.extend(SC.Control,
        return YES ; // handled
      }
      
-     if (evt.which === 37 || evt.which === 38 || evt.which === 39 || evt.which === 40){
+     if (evt.which >= 37 && evt.which <= 40){
        var min = this.get('minimum'),max=this.get('maximum'),
           step = this.get('step'),
           size = max-min, val=0, calculateStep;
@@ -272,17 +257,10 @@ SC.SliderView = SC.View.extend(SC.Control,
             }       
        }
        if(val>=min && val<=max) this.set('value', val);
+     }else{
+       evt.allowDefault();
+       return NO;
      }
-     //handle arrows
-
-     // validate keyDown...
-     // if (this.performValidateKeyDown(evt)) {
-     //    this._isKeyDown = YES ;
-     //    evt.allowDefault(); 
-     //  } else {
-     //    evt.stop();
-     //  }
-     SC.RunLoop.begin().end();
      return YES; 
    },
 

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

@@ -15,14 +15,7 @@
   @extends SC.Control
   @since SproutCore 1.0
 */
-SC.WebView = SC.View.extend(SC.Control,
-/** @scope SC.WebView.prototype */ {
-
-  /**
-    @type Array
-    @default ['sc-web-view']
-    @see SC.View#classNames
-  */
+SC.WebView = SC.View.extend(SC.Control, {/** @scope SC.WebView.prototype */
   classNames: 'sc-web-view',
   
   /**
@@ -44,22 +37,29 @@ SC.WebView = SC.View.extend(SC.Control,
   */
   shouldAutoResize: NO,
 
-  /** @private */
+  /**
+    @param {SC.RenderContext} context
+    @param {Boolean} firstTime
+  */
   render: function(context, firstTime) {
-    var src = this.get('value');
+    var src = this.get('value'), iframe;
+    
     if (firstTime) {
       context.push('<iframe src="' + src + 
       '" style="position: absolute; width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0px;"></iframe>');
-    } else {
-      var iframe = this.$('iframe');
+    } 
+    else if(src!==this._lastSrc) {
+      iframe = this.$('iframe');
       // clear out the previous src, to force a reload
       iframe.attr('src', 'javascript:;');
       iframe.attr('src', src);
     }
+    
+    this._lastSrc = src;
   },
 
-  /** @private
-  Called when the layer gets created. 
+  /**
+    Called when the layer gets created. 
   */
   didCreateLayer: function() {
     var f = this.$('iframe');
@@ -78,20 +78,21 @@ SC.WebView = SC.View.extend(SC.Control,
   */
   iframeDidLoad: function() {
     //fit the iframe to size of the contents.
-    if (this.get('shouldAutoResize') === YES){
+    if (this.get('shouldAutoResize') === YES) {
       var contentWindow;
       var iframeElt = this.$('iframe')[0];
-      if(iframeElt && iframeElt.contentWindow){
+      if(iframeElt && iframeElt.contentWindow) {
         contentWindow = iframeElt.contentWindow;
         if(contentWindow && contentWindow.document && contentWindow.document.documentElement){
           var docElement = contentWindow.document.documentElement;
           // setting the width before the height gives more accurate results.. 
           // atleast for the test iframe content i'm using.
           //TODO: try out document flows other than top to bottom.
-          if (!SC.browser.isIE){
+          if (!SC.browser.isIE) {
             this.$().width(docElement.scrollWidth);
-            this.$().height(docElement.scrollHeight);
-          } else {
+            this.$().height(docElement.scrollHeight);          
+          } 
+          else {
             this.$().width(docElement.scrollWidth + 12);
             this.$().height(docElement.scrollHeight + 5);
           }

data/lib/frameworks/sproutcore/frameworks/experimental/Buildfile

@@ -6,3 +6,5 @@ config :greenhouse,
   :required => [:sproutcore, :designer, :statechart],
   :theme => :ace,
   :css_theme => 'ace.greenhouse'
+
+config :polymorphism, :required => :datastore

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/designers/view_designer.js

@@ -14,21 +14,21 @@ sc_require('views/high_light');
   a view in the UI.  When your app loads in `design.mode`, a peer Designer
   instance is created for every view using the class method Designer or
   `SC.ViewDesigner` if the view class does not define a Designer class.
-  
+
   Whenever you put your app into design mode, all events will be routed first
-  to the peer designer for an object, which will have an opportunity to 
+  to the peer designer for an object, which will have an opportunity to
   prosent a design UI.
 
-  Likewise, the designer palettes provided by the view builder will focus on 
+  Likewise, the designer palettes provided by the view builder will focus on
   the designer instead of the view itself.
-  
+
   ## Designer UI
-  
+
   The basic ViewDesigner class automatically handles the UI interaction for
   layout.  You can also double click on the view to perform a default action.
-  
+
   For views with `isContainerView` set to `YES`, double clicking on the view will
-  automatically "focus" the view.  This allows you to select the view's 
+  automatically "focus" the view.  This allows you to select the view's
   children instead of the view itself.
 
   @extends SC.Object
@@ -39,148 +39,148 @@ SC.ViewDesigner = SC.Object.extend(
 
   /** The view managed by this designer. */
   view: null,
-  
+
   /** The class for the design.  Set when the view is created. */
   viewClass: null,
-  
+
   /** Set to YES if the view is currently selected for editing. */
   designIsSelected: NO,
 
   /** Set to YES if this particular designer should not be enabled. */
   designIsEnabled: YES,
-  
+
   /**
     The current page.  Comes from the view.
-    
+
     @property {SC.Page}
   */
   page: function() {
     var v = this.get('view');
     return (v) ? v.get('page') : null;
   }.property('view').cacheable(),
-  
+
   /**
     The design controller from the page.  Comes from page
-    
+
     @property {SC.PageDesignController}
   */
   designController: function() {
     var p = this.get('page');
-    return (p) ? p.get('designController') : null ;  
+    return (p) ? p.get('designController') : null ;
   }.property('page').cacheable(),
-  
-  /** 
+
+  /**
     If set to NO, the default childView encoding will not run.  You can use
     this option, for example, if your view creates its own childViews.
-    
+
     Alternatively, you can override the `encodeChildViewsDesign()` and
     `encodeChildViewsLoc()` methods.
-    
+
     @property {Boolean}
   */
   encodeChildViews: YES,
-  
+
   concatenatedProperties: ['designProperties', 'localizedProperties', 'excludeProperties'],
 
 
   // ..........................................................
   // SIZE AND POSITIONING SUPPORT
-  // 
-  
+  //
+
   /**
     Set to `NO` to hide horizontal resize handles
   */
   canResizeHorizontal: YES,
-  
+
   /**
     Set to `NO` to resize vertical handles
   */
   canResizeVertical: YES,
-  
+
   /**
     Allows moving.
   */
   canReposition: YES,
-  
+
   /**
     Determines the minimum allowed width
   */
   minWidth: 10,
-  
+
   /**
     Determines the minimum allowed height
   */
   minHeight: 10,
-  
+
   /**
     Determines maximum allowed width.  `null` means no limit
   */
   maxWidth: 100000000,
-  
+
   /**
     Determines maximum allowed height.  `null` means no limit
   */
   maxHeight: 100000000,
-  
+
   /**
     Returns the current layout for the view.  Set this property to update
     the layout.  Direct properties are exposed a well. You will usually want
     to work with those instead.
-    
+
     @property
     @type {Hash}
   */
   layout: function(key, value) {
     var view = this.get('view');
-    if (!view) return null; 
-    
+    if (!view) return null;
+
     if (value !== undefined) view.set('layout', value);
     return view.get('layout');
   }.property('view').cacheable(),
-  
+
   /**
-    The current anchor location.  This determines which of the other dimension 
+    The current anchor location.  This determines which of the other dimension
     metrics are actually used to compute the layout.  The value may be one of:
-    
+
        TOP_LEFT, TOP_CENTER, TOP_RIGHT, TOP_HEIGHT,
        CENTER_LEFT, CENTER_CENTER, CENTER_RIGHT, CENTER_HEIGHT
        BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT, BOTTOM_HEIGHT,
        WIDTH_LEFT, WIDTH_CENTER, WIDTH_RIGHT, WIDTH_HEIGHT,
        null
-  
+
     @property
     @type {Number}
   */
   anchorLocation: function(key, value) {
-    var layout = this.get('layout'), 
+    var layout = this.get('layout'),
         K      = SC.ViewDesigner,
         h, v, frame, view, pview, pframe, ret;
-        
+
     if (!layout) return null;
 
     // update to refelct new anchor locations...
     if (value !== undefined) {
-      
-      ret    = {}; 
+
+      ret    = {};
       view   = this.get('view');
       frame  = view.get('frame');
       pview  = view.get('parentView');
       pframe = pview ? pview.get('frame') : null;
       if (!pframe) pframe = SC.RootResponder.responder.computeWindowSize();
-      
+
       // compute new layout in each direction
       if (value & K.ANCHOR_LEFT) {
         ret.left = frame.x;
         ret.width = frame.width;
-        
+
       } else if (value & K.ANCHOR_RIGHT) {
         ret.right = (pframe.width - SC.maxX(frame));
         ret.width = frame.width;
-        
+
       } else if (value & K.ANCHOR_CENTERX) {
         ret.centerX = Math.round(SC.midX(frame) - (pframe.width/2)) ;
         ret.width = frame.width;
-        
+
       } else if (value & K.ANCHOR_WIDTH) {
         ret.left = frame.x;
         ret.right = (pframe.width - SC.maxX(frame));
@@ -190,15 +190,15 @@ SC.ViewDesigner = SC.Object.extend(
       if (value & K.ANCHOR_TOP) {
         ret.top = frame.y;
         ret.height = frame.height;
-        
+
       } else if (value & K.ANCHOR_BOTTOM) {
         ret.bottom = (pframe.height - SC.maxY(frame));
         ret.height = frame.height;
-        
+
       } else if (value & K.ANCHOR_CENTERY) {
         ret.centerY = Math.round(SC.midY(frame) - (pframe.height/2)) ;
         ret.height = frame.height;
-        
+
       } else if (value & K.ANCHOR_HEIGHT) {
         ret.top = frame.y;
         ret.bottom = (pframe.height - SC.maxY(frame));
@@ -207,13 +207,13 @@ SC.ViewDesigner = SC.Object.extend(
       this.set('layout', ret);
       layout = ret ;
     }
-    
+
     if (!SC.none(layout.left)) {
       h = SC.none(layout.width) ? K.ANCHOR_WIDTH : K.ANCHOR_LEFT;
     } else if (!SC.none(layout.right)) h = K.ANCHOR_RIGHT;
     else if (!SC.none(layout.centerX)) h = K.ANCHOR_CENTERX;
     else h = 0;
-     
+
     if (!SC.none(layout.top)) {
       v = SC.none(layout.height) ? K.ANCHOR_HEIGHT : K.ANCHOR_TOP;
     } else if (!SC.none(layout.bottom)) v = K.ANCHOR_BOTTOM ;
@@ -223,19 +223,19 @@ SC.ViewDesigner = SC.Object.extend(
     return v | h;
   }.property('layout').cacheable(),
 
-  _layoutProperty: function(key, value) {  
+  _layoutProperty: function(key, value) {
     var layout = this.get('layout');
     if (!layout) return null;
-    
+
     if (!SC.none(layout) && (value !== undefined)) {
       layout = SC.copy(layout);
       layout[key] = value;
       this.set('layout', layout);
     }
-    
+
     return layout[key];
   },
-  
+
   /**
     Returns the top offset of the current layout or `null` if not defined
   */
@@ -277,48 +277,48 @@ SC.ViewDesigner = SC.Object.extend(
   layoutLeft: function(key, value) {
     return this._layoutProperty('left', value);
   }.property('layout').cacheable(),
-  
+
   /**
     Returns the right offset of the current layout or `null` if not defined
   */
   layoutRight: function(key, value) {
     return this._layoutProperty('right', value);
   }.property('layout').cacheable(),
-  
+
   /**
     Returns the centerX offset of the current layout or `null` if not defined
   */
   layoutCenterX: function(key, value) {
     return this._layoutProperty('centerX', value);
   }.property('layout').cacheable(),
-  
+
   /**
     Returns the width offset of the current layout or `null` if not defined
   */
   layoutWidth: function(key, value) {
     return this._layoutProperty('width', value);
   }.property('layout').cacheable(),
-  
+
   // ..........................................................
   // GENERIC PROPERTIES
-  // 
+  //
   // Adds support for adding generic properties to a view.  These will
   // overwrite whatever you write out using specifically supported props.
-    
+
   // ..........................................................
   // HANDLE ENCODING OF VIEW DESIGN
-  // 
+  //
 
   /**
     Encodes any simple properties that can just be copied from the view onto
     the coder.  This is used by `encodeDesignProperties()` and
     `encodeLocalizedProperties()`.
   */
-  encodeSimpleProperties: function(props, coder) {    
+  encodeSimpleProperties: function(props, coder) {
     var view = this.get('view'), proto = this.get('viewClass').prototype ;
     props.forEach(function(prop) {
       var val = view[prop] ; // avoid get() since we don't want to exec props
-      
+
       //handle bindings
       if (prop.length > 7 && prop.slice(-7) === "Binding" && val !== undefined){
         coder.js(prop,val.encodeDesign());
@@ -330,34 +330,34 @@ SC.ViewDesigner = SC.Object.extend(
       }
     }, this);
   },
-  
 
-  /** 
+
+  /**
     Array of properties that can be encoded directly.  This is an easy way to
     add support for simple properties that need to be written to the design
-    without added code.  These properties will be encoded by 
+    without added code.  These properties will be encoded by
     `encodeDesignProperties()`.
-    
+
     You can add to this array in your subclasses.
   */
   designProperties: ['layout', 'isVisible', 'isEnabled', 'styleClass'],
-  
-  
+
+
   /*
     Array of properties specifically not displayed in the editable properties
     list
   */
-  
+
   excludeProperties: ['layout', 'childViews'],
-  
-  
+
+
   /*
     Array of properties avaliaible to edit in greenhouse
-    
+
   */
   editableProperties: function(){
 
-    var con = this.get('designAttrs'), 
+    var con = this.get('designAttrs'),
         view = this.get('view'),
         ret = [],
         designProperties = this.get('designProperties'),
@@ -373,13 +373,13 @@ SC.ViewDesigner = SC.Object.extend(
         ret.pushObject(SC.Object.create({value: view[k], key: k, view: view}));
       }
     });
-    
-    return ret; 
+
+    return ret;
   }.property('designProperties').cacheable(),
-  
-  
-  /** 
-    Invoked by a design coder to encode design properties.  The default 
+
+
+  /**
+    Invoked by a design coder to encode design properties.  The default
     implementation invoked `encodeDesignProperties()` and
     `encodeChildViewsDesign()`.  You can override this method with your own
     additional encoding if you like.
@@ -394,22 +394,22 @@ SC.ViewDesigner = SC.Object.extend(
 
   /**
     Encodes the design properties for the view.  These properties are simply
-    copied from the view onto the coder.  As an optimization, the value of 
+    copied from the view onto the coder.  As an optimization, the value of
     each property will be checked against the default value in the class. If
     they match, the property will not be emitted.
   */
   encodeDesignProperties: function(coder) {
     return this.encodeSimpleProperties(this.get('designProperties'), coder);
   },
-  
-  
+
+
   encodeDesignAttributeProperties: function(coder){
     var designProps = this.get('designProperties'),
         designAttrs = this.get('designAttrs'),
         simpleProps = [];
-        
+
     if(designAttrs) designAttrs = designAttrs[0];
-    
+
     for(var attr in designAttrs){
       if(designAttrs.hasOwnProperty(attr) && designProps.indexOf(attr) < 0 && attr !== 'childViews'){
         simpleProps.push(attr);
@@ -417,10 +417,10 @@ SC.ViewDesigner = SC.Object.extend(
     }
     return this.encodeSimpleProperties(simpleProps, coder);
   },
-  
+
   /**
-    Encodes the design for child views.  The default implementation loops 
-    through child views.  If you store your child views elsewhere in your 
+    Encodes the design for child views.  The default implementation loops
+    through child views.  If you store your child views elsewhere in your
     config (for example as named properties), then you may want to override
     this method with your own encoding.
   */
@@ -430,18 +430,18 @@ SC.ViewDesigner = SC.Object.extend(
     if (childViews.length>0) coder.object('childViews', childViews);
   },
 
-  /** 
+  /**
     Array of localized that can be encoded directly.  This is an easy way to
-    add support for simple properties that need to be written to the 
-    localization without added code.  These properties will be encoded by 
+    add support for simple properties that need to be written to the
+    localization without added code.  These properties will be encoded by
     `encodeLocalizedProperties()`.
-    
+
     You can add to this array in your subclasses.
   */
   localizedProperties: [],
-  
-  /** 
-    Invoked by a localization coder to encode design properties.  The default 
+
+  /**
+    Invoked by a localization coder to encode design properties.  The default
     implementation invoked `encodeLocalizedProperties()` and
     `encodeChildViewsLoc()`.  You can override this method with your own
     additional encoding if you like.
@@ -454,18 +454,18 @@ SC.ViewDesigner = SC.Object.extend(
   },
 
   /**
-    Encodes the localized properties for the view.  These properties are 
-    simply copied from the view onto the coder.  As an optimization, the value 
-    of  each property will be checked against the default value in the class. 
+    Encodes the localized properties for the view.  These properties are
+    simply copied from the view onto the coder.  As an optimization, the value
+    of  each property will be checked against the default value in the class.
     If they match, the property will not be emitted.
   */
   encodeLocalizedProperties: function(coder) {
     return this.encodeSimpleProperties(this.get('localizedProperties'),coder);
   },
-  
+
   /**
-    Encodes the design for child views.  The default implementation loops 
-    through child views.  If you store your child views elsewhere in your 
+    Encodes the design for child views.  The default implementation loops
+    through child views.  If you store your child views elsewhere in your
     config (for example as named properties), then you may want to override
     this method with your own encoding.
   */
@@ -476,31 +476,31 @@ SC.ViewDesigner = SC.Object.extend(
   },
 
   /**
-    This method is invoked when the designer is instantiated.  You can use 
+    This method is invoked when the designer is instantiated.  You can use
     this method to reload any state saved in the view.  This method is called
-    before any observers or bindings are setup to give you a chance to 
+    before any observers or bindings are setup to give you a chance to
     configure the initial state of the designer.
   */
   awakeDesign: function() {},
-  
-  
+
+
   /**
     over-ride this method in your designers to customies drop operations
     default just calls appendChild
-    
+
     TODO: Come up with a better name for this method.
   */
   addView: function(view){
     this.view.appendChild(view);
   },
-  
+
   // ..........................................................
   // VIEW RELAYING
-  // 
+  //
   // View property changes relay automatically...
-  
+
   /**
-    Invoked whenever the view changes.  This will observe all property 
+    Invoked whenever the view changes.  This will observe all property
     changes on the new view.
   */
   viewDidChange: function() {
@@ -513,30 +513,30 @@ SC.ViewDesigner = SC.Object.extend(
     if (view) view.addObserver('*', this, func);
     this.viewPropertyDidChange(view, '*', null, null);
   }.observes('view'),
-  
+
   /**
     Invoked whenever a property on the view has changed.  The passed key will
     be '*' when the entire view has changed.  The default implementation here
-    will notify the property as changed on the reciever if the 
-    property value is undefined on the reciever.
-    
-    It will notify all properties changed for '*'.  You may override this 
+    will notify the property as changed on the receiver if the
+    property value is undefined on the receiver.
+
+    It will notify all properties changed for '*'.  You may override this
     method with your own behavior if you like.
   */
-  viewPropertyDidChange: function(view, key) {    
+  viewPropertyDidChange: function(view, key) {
     if (key === '*') this.allPropertiesDidChange();
     else if (this[key] === undefined) this.notifyPropertyChange(key) ;
-    
+
     if ((key === '*') || (key === 'layout')) {
       if (this.get('designIsSelected') && this._handles) {
         this._handles.set('layout', SC.clone(view.get('layout')));
       }
     }
   },
-  
+
   /**
-    The `unknownProperty` handler will pass through to the view by default. 
-    This will often provide you the support you need without needing to 
+    The `unknownProperty` handler will pass through to the view by default.
+    This will often provide you the support you need without needing to
     customize the Designer.  Just make sure you don't define a conflicting
     property name on the designer itself!
   */
@@ -546,47 +546,47 @@ SC.ViewDesigner = SC.Object.extend(
       return value ;
     } else return this.view.get(key);
   },
-  
+
   // ......................................
   // PRIVATE METHODS
   //
-  
+
   init: function() {
-    
+
     // setup design from view state...
     this.awakeDesign();
-    
+
     // setup bindings, etc
     sc_super();
-    
+
     // now add observer for property changes on view to relay change out.
     this.viewDidChange();
-    
+
     // and register with designController, if defined...
     var c= this.get('designController');
     if (c) c.registerDesigner(this) ;
-    
+
   },
 
   destroy: function() {
     sc_super();
-    this.set('view', null); // clears the view observer...  
+    this.set('view', null); // clears the view observer...
   },
-  
+
   designIsSelectedDidChange: function() {
-    if (SC.kindOf(this.view, SC.Pane)) return this ; 
-    
+    if (SC.kindOf(this.view, SC.Pane)) return this ;
+
     var isSel = this.get('designIsSelected');
     var handles = this._handles;
-    
+
     if (isSel) {
-      
+
       if (!handles) {
-        handles = this._handles = SC.SelectionHandlesView.create({ 
-          designer: this 
+        handles = this._handles = SC.SelectionHandlesView.create({
+          designer: this
         });
       }
-      
+
       var parent = this.view.get('parentView');
       if (!handles.get('parentView') !== parent) parent.appendChild(handles);
       handles.set('layout', this.view.get('layout'));
@@ -594,7 +594,7 @@ SC.ViewDesigner = SC.Object.extend(
       if (handles.get('parentView')) handles.removeFromParent();
     }
   }.observes('designIsSelected'),
-  
+
   tryToPerform: function(methodName, arg1, arg2) {
     // only handle event if we are in design mode
     var page = this.view ? this.view.get('page') : null ;
@@ -608,13 +608,13 @@ SC.ViewDesigner = SC.Object.extend(
       return SC.Object.prototype.tryToPerform.apply(this.view, arguments);
     }
   },
-    
+
   // ..........................................................
   // DRAWING SUPPORT
-  // 
+  //
 
   /**
-    Update the layer to add any design-specific marking 
+    Update the layer to add any design-specific marking
   */
   didCreateLayer: function() {},
 
@@ -627,46 +627,46 @@ SC.ViewDesigner = SC.Object.extend(
     Update the layer to add any design-specific marking
   */
   willDestroyLayer: function() {},
-  
+
   // ..........................................................
   // ROOT DESIGNER SUPPORT
-  // 
-  
+  //
+
   parentDesignerIsRoot: function(){
     var dc = this.get('designController'), view = this.get('view');
     return dc.get('rootDesigner') === view.getPath('parentView.designer');
   }.property(),
-  
+
   /**
     set this property to `YES` if you want your designer to become Root
   */
   acceptRootDesigner: NO,
-  
+
   isRootDesigner: NO,
-  
+
   isRootDesignerDidChange: function() {
-    
+
     var isRoot = this.get('isRootDesigner'),
         highLight = this._highLight;
-    
+
     if (isRoot && this.get('designIsEnabled')) {
-      
+
       if (!highLight) {
-        highLight = this._highLight = SC.RootDesignerHighLightView.create({ 
-          designer: this 
+        highLight = this._highLight = SC.RootDesignerHighLightView.create({
+          designer: this
         });
       }
-      
+
       var parent = this.view.get('parentView');
       highLight.set('targetFrame', this.view.get('frame'));
-  
+
       if (!highLight.get('parentView') !== parent) parent.insertBefore(highLight,this.view);
-    } 
+    }
     else if (highLight) {
       if (highLight.get('parentView')) highLight.removeFromParent();
     }
   }.observes('isRootDesigner'),
-  
+
   resignRootDesigner: function(){
     var prevRoot = this.get('prevRootDesigner');
     if(this.get('isRootDesigner') && prevRoot){
@@ -674,7 +674,7 @@ SC.ViewDesigner = SC.Object.extend(
       if(dc) dc.makeRootDesigner(prevRoot);
     }
   },
-  
+
   shouldReleaseRootDesigner: function(evt){
     var frame = this.view.get('frame');
     if(this.get('isRootDesigner') && !SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame)){
@@ -683,13 +683,13 @@ SC.ViewDesigner = SC.Object.extend(
     }
     return NO;
   },
-  
+
   // ..........................................................
   // MOUSE HANDLING
-  // 
-  
+  //
+
   HANDLE_MARGIN: 10,
-  
+
   /**
     Select on `mouseDown`.  If `metaKey` or `shiftKey` is pressed, add to
     selection.  Otherwise just save starting info for dragging
@@ -697,13 +697,13 @@ SC.ViewDesigner = SC.Object.extend(
   mouseDown: function(evt) {
     this.shouldReleaseRootDesigner(evt);
     if (!this.get('designIsEnabled') || !this.get('parentDesignerIsRoot')) return NO ;
-    
+
     // save mouse down info
-    var view = this.get('view'), 
+    var view = this.get('view'),
         info, vert, horiz, repos, frame, pview, margin, canH, canV;
-        
+
     if (!view) return NO; // nothing to do
-    
+
     // save mouse down state for later use
     this._mouseDownInfo = info = {
       layout:   SC.copy(view.get('layout')),
@@ -712,8 +712,8 @@ SC.ViewDesigner = SC.Object.extend(
       metaKey:  evt.metaKey || evt.shiftKey,
       source:   this,
       x: evt.pageX, y: evt.pageY
-    };    
-    info.hanchor = info.vanchor = info.reposition = NO; 
+    };
+    info.hanchor = info.vanchor = info.reposition = NO;
 
     // detect what operations are available.
     repos = this.get('canReposition');
@@ -737,7 +737,7 @@ SC.ViewDesigner = SC.Object.extend(
           vert = "top";
         } else if (Math.abs(info.y - SC.maxY(frame)) <= margin) {
           vert = "bottom";
-        } 
+        }
       }
 
       canH = this.get('canResizeHorizontal');
@@ -745,7 +745,7 @@ SC.ViewDesigner = SC.Object.extend(
 
       // look for corners if can resize in both directions...
       if (canH && canV) {
-        if (!vert || !horiz) vert = horiz = NO ; 
+        if (!vert || !horiz) vert = horiz = NO ;
 
       // if can only resize horizonal - must be in middle vertical
       } else if (canH) {
@@ -764,8 +764,8 @@ SC.ViewDesigner = SC.Object.extend(
     // now save settings...
     if (horiz) info.hanchor = horiz ;
     if (vert) info.vanchor = vert ;
-    if (!horiz && !vert && repos) info.reposition = YES ; 
-    
+    if (!horiz && !vert && repos) info.reposition = YES ;
+
     // if not yet selected, select item immediately.  This way future events
     // will be handled properly
     if (!info.selected) {
@@ -773,8 +773,8 @@ SC.ViewDesigner = SC.Object.extend(
     }
 
     // save initial info on all selected items
-    if (info.reposition) this.get('designController').prepareReposition(info);    
-    
+    if (info.reposition) this.get('designController').prepareReposition(info);
+
     return YES ;
   },
 
@@ -784,14 +784,14 @@ SC.ViewDesigner = SC.Object.extend(
     info[SC.keyFor('layout', SC.guidFor(this))] = layout;
     return this ;
   },
-  
+
   /**
     mouse dragged will resize or reposition depending on the settings from
     mousedown.
   */
   mouseDragged: function(evt) {
     if (!this.get('designIsEnabled') || !this.get('parentDesignerIsRoot')) return NO ;
-    var info = this._mouseDownInfo, 
+    var info = this._mouseDownInfo,
         view = this.get('view'),
         layout, startX, startY;
     //do some binding!!!
@@ -818,11 +818,11 @@ SC.ViewDesigner = SC.Object.extend(
             newLink.end = {x: ep.x, y: ep.y};
             newLink.style = { color: 'green', width: 3 };
             this.setIfChanged('shapes', [newLink]);
-          }    
+          }
         }.observes('startPoint', 'endPoint')
       });
       SC.designPage.get('designMainPane').appendChild(dragLink);
-      
+
       SC.Drag.start({
         event: evt,
         source: this,
@@ -848,16 +848,16 @@ SC.ViewDesigner = SC.Object.extend(
     }
 
   },
-  
+
   // ..........................................................
   // Drag source and drag data source
-  //   
+  //
   dragDataTypes: ['SC.Binding'],
 
-  dragDataForType: function(drag, dataType) { 
-    return dataType === 'SC.Binding' ? this.get('view') : null; 
+  dragDataForType: function(drag, dataType) {
+    return dataType === 'SC.Binding' ? this.get('view') : null;
   },
-  
+
   /**
     On `mouseUp` potentially change selection and cleanup.
   */
@@ -865,15 +865,15 @@ SC.ViewDesigner = SC.Object.extend(
     if (!this.get('designIsEnabled') || !this.get('parentDesignerIsRoot')) return NO ;
 
     var info = this._mouseDownInfo;
-        
+
     // if selected on mouse down and we didn't do any dragging, then deselect.
     if (info.selected && !info.dragged) {
-      
+
       // is the mouse still inside the view?  If not, don't do anything...
       var view = this.get('view'),
-          frame = view ? view.get('frame') : null, 
+          frame = view ? view.get('frame') : null,
           pview = view.get('parentView');
-          
+
       if (frame && pview) frame = pview.convertFrameToView(frame, null);
 
       if (!frame || SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame)) {
@@ -886,19 +886,19 @@ SC.ViewDesigner = SC.Object.extend(
     if(SC._Greenhouse && evt.clickCount === 2){
       var dc = this.get('designController');
       if(this.acceptRootDesigner && dc) {
-        dc.makeRootDesigner(this); 
+        dc.makeRootDesigner(this);
       }
       else{
         //TODO: [MB] decide if this is the functionality I want...
         SC._Greenhouse.sendAction('openInspector', view);
       }
     }
-    
+
     this._mouseDownInfo = null;
-    
+
     return YES ;
   },
-  
+
   /**
     Called by `designerController` to reposition the view
   */
@@ -907,9 +907,9 @@ SC.ViewDesigner = SC.Object.extend(
     this._mouseReposition(evt, info, this.HKEYS, layout);
     this._mouseReposition(evt, info, this.VKEYS, layout);
     this.set('layout', layout);
-    return this; 
+    return this;
   },
-  
+
   HKEYS: {
     evtPoint: "pageX",
     point:    "x",
@@ -933,31 +933,31 @@ SC.ViewDesigner = SC.Object.extend(
     size:     "height",
     anchor:   "vanchor"
   },
-  
+
   /**
     Generic resizer.  Must pass one set of keys: VKEYS, HKEYS
   */
   _mouseResize: function(evt, info, keys, ret) {
-    
+
     var delta  = evt[keys.evtPoint] - info[keys.point],
         layout = info.layout,
         view   = this.get('view'),
         min    = this.get(keys.min),
         max    = this.get(keys.max),
-        
+
         headKey   = keys.head,
         tailKey   = keys.tail,
         centerKey = keys.center,
         sizeKey   = keys.size,
-        
+
         hasHead   = !SC.none(layout[keys.head]),
         hasTail   = !SC.none(layout[keys.tail]),
         hasCenter = !SC.none(layout[keys.center]),
-        hasSize   = !SC.none(layout[keys.size]), 
+        hasSize   = !SC.none(layout[keys.size]),
         w;
 
     if (info[keys.anchor] === headKey) {
-      
+
       // if left aligned, adjust left size and width if set.
       if (hasHead) {
         if (hasSize) {
@@ -965,13 +965,13 @@ SC.ViewDesigner = SC.Object.extend(
           ret[sizeKey] = Math.min(max, Math.max(min, Math.floor(layout[sizeKey] - delta)));
           min = (layout[headKey]+w) - min;
           max = (layout[headKey]+w) - max;
-          
+
           ret[headKey] = Math.max(max, Math.min(min, Math.floor(layout[headKey]+delta)));
-          
+
         } else {
           ret[headKey] = Math.floor(layout[headKey]+delta);
         }
-      
+
       // if right aligned or centered, adjust the width...
       } else if (hasTail || hasCenter) {
         if (hasCenter) delta *= 2;
@@ -981,7 +981,7 @@ SC.ViewDesigner = SC.Object.extend(
       } else ret[headKey] = Math.floor((layout[headKey]||0)+delta);
 
     } else if (info[keys.anchor] === tailKey) {
-      
+
       // reverse above
       if (hasTail) {
 
@@ -990,13 +990,13 @@ SC.ViewDesigner = SC.Object.extend(
           ret[sizeKey] = Math.min(max, Math.max(min, Math.floor(layout[sizeKey] + delta)));
           min = (layout[tailKey]+w)-min;
           max = (layout[tailKey]+w)-max;
-          
+
           ret[tailKey] = Math.max(max, Math.min(min, Math.floor(layout[tailKey]-delta)));
 
         } else {
           ret[tailKey] = Math.floor(layout[tailKey]-delta);
         }
-        
+
       } else {
         if (hasCenter) delta *= 2;
         ret[sizeKey] = Math.max(min, Math.min(max, Math.floor((layout[sizeKey]||0)+delta)));
@@ -1005,81 +1005,81 @@ SC.ViewDesigner = SC.Object.extend(
 
     return this;
   },
-  
+
   _mouseReposition: function(evt, info, keys, ret) {
     var delta  = evt[keys.evtPoint] - info[keys.point],
         layout = info[SC.keyFor('layout', SC.guidFor(this))],
         view   = this.get('view'),
-        
+
         headKey   = keys.head,
         tailKey   = keys.tail,
         centerKey = keys.center,
         sizeKey   = keys.size,
-        
+
         hasHead   = !SC.none(layout[headKey]),
         hasTail   = !SC.none(layout[tailKey]),
         hasCenter = !SC.none(layout[centerKey]),
-        hasSize   = !SC.none(layout[sizeKey]), 
+        hasSize   = !SC.none(layout[sizeKey]),
         w;
 
     // auto-widths can't be repositioned
     if (hasHead && hasTail && !hasSize) return NO ;
-    
+
     // left/top aligned, just adjust top/left location
     if (hasHead) {
       ret[headKey] = layout[headKey]+delta;
-      
+
     // right/bottom aligned, adjust bottom/right location
     } else if (hasTail) {
       ret[tailKey] = layout[tailKey]-delta;
 
     } else if (hasCenter) {
       ret[centerKey] = layout[centerKey]+delta;
-      
+
     } else ret[headKey] = (layout[headKey]||0)+delta;
-    
+
     return YES ;
   },
-  
+
   // ..........................................................
   // Drag data source (for binding lines)
-  //   
+  //
   /**
-    This method must be overridden for drag operations to be allowed. 
+    This method must be overridden for drag operations to be allowed.
     Return a bitwise OR'd mask of the drag operations allowed on the
     specified target.  If you don't care about the target, just return a
     constant value.
-  
+
     @param {SC.View} dropTarget The proposed target of the drop.
     @param {SC.Drag} drag The SC.Drag instance managing this drag.
-  
+
   */
   dragSourceOperationMaskFor: function(drag, dropTarget) {
     return SC.DRAG_LINK;
   },
 
-  /**  
+  /**
     This method is called when the drag begins. You can use this to do any
-    visual highlighting to indicate that the receiver is the source of the 
+    visual highlighting to indicate that the receiver is the source of the
     drag.
-  
+
     @param {SC.Drag} drag The Drag instance managing this drag.
-  
-    @param {Point} loc The point in *window* coordinates where the drag 
-      began.  You can use convertOffsetFromView() to convert this to local 
+
+    @param {Point} loc The point in *window* coordinates where the drag
+      began.  You can use convertOffsetFromView() to convert this to local
       coordinates.
   */
   dragDidBegin: function(drag, loc) {
   },
-  
+
   /**
     This method is called whenever the drag image is moved.  This is
     similar to the `dragUpdated()` method called on drop targets.
 
     @param {SC.Drag} drag The Drag instance managing this drag.
 
-    @param {Point} loc  The point in *window* coordinates where the drag 
-      mouse is.  You can use convertOffsetFromView() to convert this to local 
+    @param {Point} loc  The point in *window* coordinates where the drag
+      mouse is.  You can use convertOffsetFromView() to convert this to local
       coordinates.
   */
   dragDidMove: function(drag, loc) {
@@ -1097,19 +1097,19 @@ SC.ViewDesigner = SC.Object.extend(
       }
     }
   },
-  
-  /**  
+
+  /**
     This method is called when the drag ended. You can use this to do any
     cleanup.  The operation is the actual operation performed on the drag.
-  
+
     @param {SC.Drag} drag The drag instance managing the drag.
-  
-    @param {Point} loc The point in WINDOW coordinates where the drag 
-      ended. 
-  
-    @param {DragOp} op The drag operation that was performed. One of 
+
+    @param {Point} loc The point in WINDOW coordinates where the drag
+      ended.
+
+    @param {DragOp} op The drag operation that was performed. One of
       SC.DRAG_COPY, SC.DRAG_MOVE, SC.DRAG_LINK, or SC.DRAG_NONE.
-  
+
   */
   dragDidEnd: function(drag, loc, op) {
     var dragLink = drag.dragLink;
@@ -1123,7 +1123,7 @@ if (!SC.View.Designer) SC.View.Designer = SC.ViewDesigner ;
 // ..........................................................
 // DESIGN NOTIFICATION METHODS
 //
-// These methods are invoked automatically on the designer class whenever it 
+// These methods are invoked automatically on the designer class whenever it
 // is loaded.
 
 SC.ViewDesigner.mixin({
@@ -1132,12 +1132,12 @@ SC.ViewDesigner.mixin({
   ANCHOR_RIGHT:   0x0002,
   ANCHOR_CENTERX: 0x0004,
   ANCHOR_WIDTH:   0x0010,
-  
+
   ANCHOR_TOP:     0x0100,
   ANCHOR_BOTTOM:  0x0200,
   ANCHOR_CENTERY: 0x0400,
   ANCHOR_HEIGHT:  0x1000,
-  
+
   /**
     Invoked whenever a designed view is loaded.  This will save the design
     attributes for later use by a designer.
@@ -1149,34 +1149,34 @@ SC.ViewDesigner.mixin({
   },
 
   /**
-    Invoked whenever a location is applied to a designed view.  Saves the 
+    Invoked whenever a location is applied to a designed view.  Saves the
     attributes separately for use by the design view.
   */
   didLoadLocalization: function(designedView, attrs) {
     // nothing to do for now.
   },
-  
+
   /**
-    Invoked whenver a view is created.  This will create a peer designer if 
+    Invoked whenver a view is created.  This will create a peer designer if
     needed.
   */
   didCreateView: function(view, attrs) {
     // add designer if page is in design mode
     var page = view.get('page'), design = view.constructor;
-    
+
     if (design.isDesign && page && page.get('needsDesigner')) {
-      
+
       // find the designer class
       var cur = design, origDesign = design;
       while(cur && !cur.Designer) cur = cur.superclass;
       var DesignerClass = (cur) ? cur.Designer : SC.View.Designer;
-      
+
       // next find the first superclass view that is not a design (and a real
-      // class).  This is important to make sure that we can determine the 
+      // class).  This is important to make sure that we can determine the
       // real name of a view's class.
       while (design && design.isDesign) design = design.superclass;
       if (!design) design = SC.View;
-      
+
       view.designer = DesignerClass.create({
         view: view,
         viewClass: design,
@@ -1185,13 +1185,13 @@ SC.ViewDesigner.mixin({
       });
     }
   }
-  
+
 });
 
 
 // ..........................................................
 // FIXUP SC.View
-// 
+//
 
 SC.View.prototype._orig_respondsTo = SC.View.prototype.respondsTo;
 SC.View.prototype._orig_tryToPerform = SC.View.prototype.tryToPerform;
@@ -1218,8 +1218,8 @@ SC.View.prototype.respondsTo = function( methodName ) {
   }
 };
 
-/** 
-  If the view has a designer, give it an opportunity to handle an event 
+/**
+  If the view has a designer, give it an opportunity to handle an event
   before passing it on to the main view.
 */
 /*SC.View.prototype.tryToPerform = function(methodName, arg1, arg2) {
@@ -1240,7 +1240,7 @@ SC.View.prototype.tryToPerform = function(methodName, arg1, arg2) {
 
 
 /*
-  If the view has a designer, also call designers didCreateLayer method to 
+  If the view has a designer, also call designers didCreateLayer method to
   allow drawing.
 */
 SC.View.prototype.createLayer = function() {
@@ -1250,7 +1250,7 @@ SC.View.prototype.createLayer = function() {
 };
 
 /*
-  If the view has a designer, also call the designer's didUpdateLayer method 
+  If the view has a designer, also call the designer's didUpdateLayer method
   to allow drawing.
 */
 SC.View.prototype.updateLayer = function() {