sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/desktop/panes/palette.js

@@ -11,41 +11,41 @@ sc_require('panes/panel');
   Displays a non-modal, default positioned, drag&drop-able palette pane.
 
   The default way to use the palette pane is to simply add it to your page like this:
-  
+
       SC.PalettePane.create({
         layout: { width: 400, height: 200, right: 0, top: 0 },
         contentView: SC.View.extend({
         })
       }).append();
-  
+
   This will cause your palette pane to display.
-  
-  Palette pane is a simple way to provide non-modal messaging that won't 
-  blocks the user's interaction with your application.  Palette panes are 
+
+  Palette pane is a simple way to provide non-modal messaging that won't
+  blocks the user's interaction with your application.  Palette panes are
   useful for showing important detail information with flexible position.
   They provide a better user experience than modal panel.
-  
+
   @extends SC.PanelPane
   @since SproutCore 1.0
 */
 SC.PalettePane = SC.PanelPane.extend(
 /** @scope SC.PalettePane.prototype */ {
-  
+
   /**
     @type Array
     @default ['sc-palette']
     @see SC.View#classNames
   */
   classNames: ['sc-palette'],
-  
+
   /**
     Palettes are not modal by default
-    
+
     @type Boolean
     @default NO
   */
   isModal: NO,
-  
+
   /**
     @type SC.View
     @default SC.ModalPane
@@ -57,7 +57,7 @@ SC.PalettePane = SC.PanelPane.extend(
     @default NO
   */
   isAnchored: NO,
-  
+
   /** @private */
   _mouseOffsetX: null,
 
@@ -82,12 +82,12 @@ SC.PalettePane = SC.PanelPane.extend(
     }
     return YES;
   },
-  
+
   /** @private */
   touchStart: function(evt){
     return this.mouseDown(evt);
   },
-  
+
   /** @private */
   touchesDragged: function(evt){
     return this.mouseDragged(evt);

data/lib/frameworks/sproutcore/frameworks/desktop/panes/panel.js

@@ -9,19 +9,19 @@ sc_require('panes/modal');
 
 /** @class
 
-  Most SproutCore applications need modal panels. The default way to use the 
+  Most SproutCore applications need modal panels. The default way to use the
   panel pane is to simply add it to your page like this:
-  
+
       SC.PanelPane.create({
         layout: { width: 400, height: 200, centerX: 0, centerY: 0 },
         contentView: SC.View.extend({
         })
       }).append();
-  
-  This will cause your panel to display.  The default layout for a Panel 
-  is to cover the entire document window with a semi-opaque background, and to 
+
+  This will cause your panel to display.  The default layout for a Panel
+  is to cover the entire document window with a semi-opaque background, and to
   resize with the window.
-  
+
   @extends SC.Pane
   @author Erich Ocean
   @since SproutCore 1.0
@@ -41,7 +41,7 @@ SC.PanelPane = SC.Pane.extend(
     @see SC.View#classNames
   */
   classNames: ['sc-panel'],
-  
+
   /**
     @type Boolean
     @default YES
@@ -87,7 +87,7 @@ SC.PanelPane = SC.Pane.extend(
     Indicates that a pane is modal and should not allow clicks to pass
     though to panes underneath it. This will usually cause the pane to show
     the modalPane underneath it.
-    
+
     @type Boolean
     @default YES
   */
@@ -100,20 +100,20 @@ SC.PanelPane = SC.Pane.extend(
   modalPane: SC.ModalPane.extend({
     classNames: 'for-sc-panel'
   }),
-  
+
   // ..........................................................
   // CONTENT VIEW
-  // 
-  
+  //
+
   /**
     Set this to the view you want to act as the content within the panel.
-    
+
     @type SC.View
     @default null
   */
   contentView: null,
   contentViewBindingDefault: SC.Binding.single(),
-  
+
   /**
     @param {SC.View} newContent
   */
@@ -132,7 +132,7 @@ SC.PanelPane = SC.Pane.extend(
     }
   },
 
-  
+
   /**
     Invoked whenever the content property changes. This method will simply
     call replaceContent. Override replaceContent to change how the view is
@@ -154,19 +154,19 @@ SC.PanelPane = SC.Pane.extend(
   */
   renderDelegateName: 'panelRenderDelegate',
 
-  // get the modal pane. 
+  // get the modal pane.
   _modalPane: function() {
     var pane = this.get('modalPane');
-    
+
     // instantiate if needed
     if (pane && pane.isClass) {
       pane = pane.create({ owner: this });
-      this.set('modalPane', pane); 
+      this.set('modalPane', pane);
     }
-    
+
     return pane ;
   },
-  
+
   /** @private - whenever showing on screen, deal with modal pane as well */
   appendTo: function(elem) {
     var pane ;
@@ -176,11 +176,11 @@ SC.PanelPane = SC.Pane.extend(
     }
     return sc_super();
   },
-  
+
   /** @private - when removing from screen, deal with modal pane as well. */
   remove: function() {
     var pane, ret = sc_super();
-    
+
     if (this._isShowingModal) {
       this._isShowingModal = NO ;
       if (pane = this._modalPane()) pane.paneDidRemove(this);
@@ -196,7 +196,7 @@ SC.PanelPane = SC.Pane.extend(
 
     sc_super();
   },
-  
+
   /** @private - if isModal state changes, update pane state if needed. */
   _isModalDidChange: function() {
     var pane, isModal = this.get('isModal');
@@ -205,21 +205,43 @@ SC.PanelPane = SC.Pane.extend(
          this._isShowingModal = YES;
          pane.paneWillAppend(this);
        }
-       
+
     } else {
       if (this._isShowingModal && (pane = this._modalPane())) {
         this._isShowingModal = NO ;
-        pane.paneDidRemove(this); 
+        pane.paneDidRemove(this);
       }
     }
   }.observes('isModal'),
-  
-  /** @private - extends SC.Pane's method - make panel keyPane when shown */
-  paneDidAttach: function() {
-    var ret = sc_super();
+
+  /**
+    Called when the pane is shown.  Takes on key pane status.
+  */
+  didShowInDocument: function () {
+   this.becomeKeyPane();
+  },
+
+  /**
+    Called when the pane is attached.  Takes on key pane status.
+  */
+  didAppendToDocument: function () {
     this.becomeKeyPane();
-    return ret ;
+  },
+
+  /**
+    Called when the pane is detached.  Resigns key pane status.
+  */
+  willRemoveFromDocument: function () {
+    this.resignKeyPane();
+  },
+
+  /**
+    Called when the pane is about to be hidden.  Resigns key pane status.
+  */
+  willHideInDocument: function () {
+   this.resignKeyPane();
   },
 
   displayProperties: ['ariaLabel', 'ariaLabelledBy', 'ariaDescribedBy']
+
 });

data/lib/frameworks/sproutcore/frameworks/desktop/panes/picker.js

@@ -12,13 +12,13 @@ sc_require('panes/palette');
   default: initiated just below the anchor.
            shift x, y to optimized picker visibility and make sure top-left corner is always visible.
   menu :   same as default rule +
-           default(1,4,3) or custom offset below the anchor for default location to fine tuned visual alignment +
+           default(1, 4, 3) or custom offset below the anchor for default location to fine tuned visual alignment +
            enforce min left(7px)/right(8px) padding to the window
-  fixed :  default(1,4,3) or custom offset below the anchor for default location to cope with specific anchor and skip fitPositionToScreen
-  pointer :take default [0,1,2,3,2] or custom matrix to choose one of four perfect pointer positions.Ex:
+  fixed :  default(1, 4, 3) or custom offset below the anchor for default location to cope with specific anchor and skip fitPositionToScreen
+  pointer :take default [0, 1, 2, 3, 2] or custom matrix to choose one of four perfect pointer positions.Ex:
            perfect right (0) > perfect left (1) > perfect top (2) > perfect bottom (3)
            fallback to perfect top (2)
-  menu-pointer :take default [3,0,1,2,3] or custom matrix to choose one of four perfect pointer positions.Ex:
+  menu-pointer :take default [3, 0, 1, 2, 3] or custom matrix to choose one of four perfect pointer positions.Ex:
           perfect bottom (3) > perfect right (0) > perfect left (1) > perfect top (2)
           fallback to perfect bottom (3)
 */
@@ -166,35 +166,35 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
         contentView: SC.View.extend({})
       }).popup(anchor);
 
-  ### menu below the anchor with default `preferMatrix` of `[1,4,3]`:
+  ### menu below the anchor with default `preferMatrix` of `[1, 4, 3]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
       }).popup(anchor, SC.PICKER_MENU);
 
-  ### menu on the right side of anchor with custom `preferMatrix` of `[2,6,0]`:
+  ### menu on the right side of anchor with custom `preferMatrix` of `[2, 6, 0]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
-      }).popup(anchor, SC.PICKER_MENU, [2,6,0]);
+      }).popup(anchor, SC.PICKER_MENU, [2, 6, 0]);
 
-  ### fixed below the anchor with default `preferMatrix` of `[1,4,3]`:
+  ### fixed below the anchor with default `preferMatrix` of `[1, 4, 3]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
       }).popup(anchor, SC.PICKER_FIXED);
 
-  ### fixed on the right side of anchor with `preferMatrix` of `[-22,-17,0]`:
+  ### fixed on the right side of anchor with `preferMatrix` of `[-22,-17, 0]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
-      }).popup(anchor, SC.PICKER_FIXED, [-22,-17,0]);
+      }).popup(anchor, SC.PICKER_FIXED, [-22,-17, 0]);
 
-  ### pointer with default `preferMatrix` of `[0,1,2,3,2]`:
+  ### pointer with default `preferMatrix` of `[0, 1, 2, 3, 2]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
@@ -203,16 +203,16 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
 
   Positioning: right (0) > left (1) > top (2) > bottom (3). Fallback to top (2).
 
-  ### pointer with custom `preferMatrix` of `[3,0,1,2,2]`:
+  ### pointer with custom `preferMatrix` of `[3, 0, 1, 2, 2]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
-      }).popup(anchor, SC.PICKER_POINTER, [3,0,1,2,2]);
+      }).popup(anchor, SC.PICKER_POINTER, [3, 0, 1, 2, 2]);
 
   Positioning: bottom (3) > right (0) > left (1) > top (2). Fallback to top (2).
 
-  ### menu-pointer with default `preferMatrix` of `[3,0,1,2,3]`:
+  ### menu-pointer with default `preferMatrix` of `[3, 0, 1, 2, 3]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
@@ -246,25 +246,25 @@ SC.PickerPane = SC.PalettePane.extend(
   */
   isModal: YES,
 
-  /**
+  /** @private
     @type String
     @default 'perfectRight'
   */
   pointerPos: 'perfectRight',
 
-  /**
+  /** @private
     @type Number
     @default 0
   */
   pointerPosX: 0,
 
-  /**
+  /** @private
     @type Number
     @default 0
   */
   pointerPosY: 0,
 
-  /**
+  /** @private
     This property will be set to the element (or view.get('layer')) that
     triggered your picker to show.  You can use this to properly position your
     picker.
@@ -272,7 +272,30 @@ SC.PickerPane = SC.PalettePane.extend(
     @type HTMLElement
     @default null
   */
-  anchorElement: null,
+  anchorElement: function (key, value) {
+    var anchorView;
+
+    if (value === undefined) {
+      // Getting the value.
+      anchorView = this._anchorView;
+      return anchorView ? anchorView.get('layer') : this._anchorHTMLElement;
+    } else {
+      // Setting the value.
+      if (!value) {
+        throw "You must set 'anchorElement' to either a view or a DOM element";
+      }
+      else if (value.isView) {
+        this._anchorView        = value;
+        this._anchorHTMLElement = null;
+      }
+      else {
+        this._anchorView        = null;
+        this._anchorHTMLElement = value;
+      }
+
+      return value;
+    }
+  }.property('layer').cacheable(),
 
   /** @private
     anchor rect calculated by computeAnchorRect from init popup
@@ -306,13 +329,19 @@ SC.PickerPane = SC.PalettePane.extend(
   */
   pointerOffset: null,
 
-  /**
+  /** @deprecated Version 1.10.  Use windowPadding instead.
     default offset of extra-right pointer for picker-pointer or pointer-menu
 
     @type Number
     @default 0
   */
-  extraRightOffset: 0,
+  extraRightOffset: function () {
+    //@if (debug)
+    SC.warn('SC.PickerPane#extraRightOffset is deprecated.  The pointer will position itself automatically.');
+    //@endif
+
+    return this.get('windowPadding');
+  }.property('windowPadding').cacheable(),
 
   /**
     The target object to invoke the remove action on when the user clicks off the
@@ -357,8 +386,24 @@ SC.PickerPane = SC.PalettePane.extend(
   */
   repositionOnWindowResize: YES,
 
-  _anchorView: null,
-  _anchorHTMLElement: null,
+
+  /** @private
+    Default padding around the window's edge that the pane will not overlap.
+
+    This value is set to the value of SC.PickerPane.WINDOW_PADDING, except when
+    using preferType of SC.PICKER_MENU_POINTER, where it will be set according
+    to the `controlSize` value of the pane to one of:
+
+      SC.PickerPane.TINY_MENU_WINDOW_PADDING
+      SC.PickerPane.SMALL_MENU_WINDOW_PADDING
+      SC.PickerPane.REGULAR_MENU_WINDOW_PADDING
+      SC.PickerPane.LARGE_MENU_WINDOW_PADDING
+      SC.PickerPane.HUGE_MENU_WINDOW_PADDING
+
+    @type Number
+    @default SC.PickerPane.WINDOW_PADDING
+  */
+  windowPadding: null,
 
   /**
     Displays a new picker pane.
@@ -369,8 +414,8 @@ SC.PickerPane = SC.PalettePane.extend(
     @param {Number} [pointerOffset]
     @returns {SC.PickerPane} receiver
   */
-  popup: function(anchorViewOrElement, preferType, preferMatrix, pointerOffset) {
-    if(anchorViewOrElement){
+  popup: function (anchorViewOrElement, preferType, preferMatrix, pointerOffset) {
+    if (anchorViewOrElement) {
       if (anchorViewOrElement.isView) {
         this._anchorView = anchorViewOrElement;
         this._setupScrollObservers(anchorViewOrElement);
@@ -379,9 +424,9 @@ SC.PickerPane = SC.PalettePane.extend(
       }
     }
     this.beginPropertyChanges();
-    if (preferType) this.set('preferType',preferType) ;
-    if (preferMatrix) this.set('preferMatrix',preferMatrix) ;
-    if (pointerOffset) this.set('pointerOffset',pointerOffset) ;
+    if (preferType) { this.set('preferType', preferType); }
+    if (preferMatrix) { this.set('preferMatrix', preferMatrix); }
+    if (pointerOffset) { this.set('pointerOffset', pointerOffset); }
     this.endPropertyChanges();
     this.positionPane();
     this._hideOverflow();
@@ -394,59 +439,80 @@ SC.PickerPane = SC.PalettePane.extend(
     then call fitPositionToScreen to get final position. If anchor is missing,
     fallback to center.
   */
-  positionPane: function(useAnchorCached) {
+  positionPane: function (useAnchorCached) {
     useAnchorCached = useAnchorCached && this.get('anchorCached');
 
     var anchor       = useAnchorCached ? this.get('anchorCached') : this.get('anchorElement'),
+        frame        = this.get('borderFrame'),
         preferType   = this.get('preferType'),
         preferMatrix = this.get('preferMatrix'),
         layout       = this.get('layout'),
         origin;
 
-
     // usually an anchorElement will be passed.  The ideal position is just
     // below the anchor + default or custom offset according to preferType.
     // If that is not possible, fitPositionToScreen will take care of that for
     // other alternative and fallback position.
 
     if (anchor) {
-      if(!useAnchorCached) {
+      if (!useAnchorCached) {
         anchor = this.computeAnchorRect(anchor);
-        this.set('anchorCached', anchor) ;
+        this.set('anchorCached', anchor);
       }
-      if(anchor.x ===0 && anchor.y ===0) return ;
+
+      if (anchor.x === 0 && anchor.y === 0) { return; }
+
       origin = SC.cloneRect(anchor);
 
       if (preferType) {
         switch (preferType) {
-          case SC.PICKER_MENU:
-          case SC.PICKER_FIXED:
-            if(!preferMatrix || preferMatrix.length !== 3) {
-              // default below the anchor with fine-tuned visual alignment
-              // for Menu to appear just below the anchorElement.
-              this.set('preferMatrix', [1, 4, 3]) ;
-            }
-
-            // fine-tuned visual alignment from preferMatrix
-            origin.x += ((this.preferMatrix[2]===0) ? origin.width : 0) + this.preferMatrix[0] ;
-            origin.y += ((this.preferMatrix[2]===3) ? origin.height : 0) + this.preferMatrix[1];
-            break;
-          default:
-            origin.y += origin.height ;
-            break;
+        case SC.PICKER_MENU:
+        case SC.PICKER_FIXED:
+          if (!preferMatrix || preferMatrix.length !== 3) {
+            // default below the anchor with fine-tuned visual alignment
+            // for Menu to appear just below the anchorElement.
+            this.set('preferMatrix', [1, 4, 3]);
+          }
+
+          // fine-tuned visual alignment from preferMatrix
+          origin.x += ((this.preferMatrix[2] === 0) ? origin.width : 0) + this.preferMatrix[0];
+          origin.y += ((this.preferMatrix[2] === 3) ? origin.height : 0) + this.preferMatrix[1];
+          break;
+        default:
+          origin.y += origin.height;
+          break;
         }
       } else {
-        origin.y += origin.height ;
+        origin.y += origin.height;
       }
-      origin = this.fitPositionToScreen(origin, this.get('frame'), anchor) ;
 
-      this.adjust({ width: origin.width, height: origin.height, left: origin.x, top: origin.y });
+      // Since we repeatedly need to know the half-width and half-height of the
+      // frames, add those properties.
+      anchor.halfWidth = parseInt(anchor.width * 0.5, 0);
+      anchor.halfHeight = parseInt(anchor.height * 0.5, 0);
+      frame.halfWidth = parseInt(frame.width * 0.5, 0);
+      frame.halfHeight = parseInt(frame.height * 0.5, 0);
+
+      origin = this.fitPositionToScreen(origin, frame, anchor);
+
+      this.adjust({
+        width: origin.width,
+        height: origin.height,
+        left: origin.x,
+        top: origin.y
+      });
     // if no anchor view has been set for some reason, just center.
     } else {
-      this.adjust({ width: layout.width, height: layout.height, centerX: 0, centerY: 0 });
+      this.adjust({
+        width: layout.width,
+        height: layout.height,
+        centerX: 0,
+        centerY: 0
+      });
     }
     this.updateLayout();
-    return this ;
+
+    return this;
   },
 
   /** @private
@@ -455,7 +521,7 @@ SC.PickerPane = SC.PalettePane.extend(
     up to window bottom only. We do have 'clippingFrame' supported from view.
     But since our anchor can be element, we use this solution for now.
   */
-  computeAnchorRect: function(anchor) {
+  computeAnchorRect: function (anchor) {
     var bounding, ret, cq,
         wsize = SC.RootResponder.responder.computeWindowSize();
     // Some browsers natively implement getBoundingClientRect, so if it's
@@ -470,105 +536,106 @@ SC.PickerPane = SC.PalettePane.extend(
         width:  bounding.width,
         height: bounding.height
       };
-      // If width and height are undefined this means we are in IE or FF<3.5
+      // If width and height are undefined this means we are in IE or FF < 3.5
       // if we did not get the frame dimensions the do the calculations
       // based on an element
-      if(ret.width===undefined || ret.height===undefined){
+      if (ret.width === undefined || ret.height === undefined) {
         cq = SC.$(anchor);
         ret.width = cq.outerWidth();
         ret.height = cq.outerHeight();
       }
-    }
-    else {
+    } else {
       // Only really old versions will have to go through this code path.
       ret   = SC.offset(anchor); // get x & y
       cq    = SC.$(anchor);
       ret.width = cq.outerWidth();
       ret.height = cq.outerHeight();
     }
-    ret.height = (wsize.height-ret.y) < ret.height ? (wsize.height-ret.y) : ret.height;
-    if(!SC.browser.isIE && window.scrollX>0 || window.scrollY>0){
-      ret.x+=window.scrollX;
-      ret.y+=window.scrollY;
-    }else if(SC.browser.isIE && (document.documentElement.scrollTop>0 || document.documentElement.scrollLeft>0)){
-      ret.x+=document.documentElement.scrollLeft;
-      ret.y+=document.documentElement.scrollTop;
+    ret.height = (wsize.height - ret.y) < ret.height ? (wsize.height - ret.y) : ret.height;
+
+    if (!SC.browser.isIE && window.scrollX > 0 || window.scrollY > 0) {
+      ret.x += window.scrollX;
+      ret.y += window.scrollY;
+    } else if (SC.browser.isIE && (document.documentElement.scrollTop > 0 || document.documentElement.scrollLeft > 0)) {
+      ret.x += document.documentElement.scrollLeft;
+      ret.y += document.documentElement.scrollTop;
     }
-    return ret ;
+    return ret;
   },
 
   /** @private
     This method will dispatch to the right re-position rule according to preferType
   */
-  fitPositionToScreen: function(preferredPosition, picker, anchor) {
-    // get window rect.
-    //if(this._prefPosX && this._prefPosY)
-
+  fitPositionToScreen: function (preferredPosition, picker, anchor) {
     var wsize = SC.RootResponder.responder.computeWindowSize(),
-        wret = { x: 0, y: 0, width: wsize.width, height: wsize.height } ;
+        wret = { x: 0, y: 0, width: wsize.width, height: wsize.height };
 
     // if window size is smaller than the minimum size of app, use minimum size.
     var mainPane = SC.RootResponder.responder.mainPane;
     if (mainPane) {
       var minWidth = mainPane.layout.minWidth,
           minHeight = mainPane.layout.minHeight;
+
       if (minWidth && wret.width < minWidth) {
         wret.width = mainPane.layout.minWidth;
       }
+
       if (minHeight && wret.height < minHeight) {
         wret.height = mainPane.layout.minHeight;
       }
     }
 
-    picker.x = preferredPosition.x ; picker.y = preferredPosition.y ;
-
-    if(this.preferType) {
-      switch(this.preferType) {
-        case SC.PICKER_MENU:
-          // apply menu re-position rule
-          picker = this.fitPositionToScreenMenu(wret, picker, this.get('isSubMenu')) ;
-          break;
-        case SC.PICKER_MENU_POINTER:
-          this.setupPointer(anchor);
-          picker = this.fitPositionToScreenMenuPointer(wret, picker, anchor);
-          break;
-        case SC.PICKER_POINTER:
-          // apply pointer re-position rule
-          this.setupPointer(anchor);
-          picker = this.fitPositionToScreenPointer(wret, picker, anchor) ;
-          break;
-
-        case SC.PICKER_FIXED:
-          // skip fitPositionToScreen
-          break;
-        default:
-          break;
+    picker.x = preferredPosition.x;
+    picker.y = preferredPosition.y;
+
+    if (this.preferType) {
+      switch (this.preferType) {
+      case SC.PICKER_MENU:
+        // apply menu re-position rule
+        picker = this.fitPositionToScreenMenu(wret, picker, this.get('isSubMenu'));
+        break;
+      case SC.PICKER_MENU_POINTER:
+        this.setupPointer(anchor);
+        picker = this.fitPositionToScreenMenuPointer(wret, picker, anchor);
+        break;
+      case SC.PICKER_POINTER:
+        // apply pointer re-position rule
+        this.setupPointer(anchor);
+        picker = this.fitPositionToScreenPointer(wret, picker, anchor);
+        break;
+      case SC.PICKER_FIXED:
+        // skip fitPositionToScreen
+        break;
+      default:
+        break;
       }
     } else {
       // apply default re-position rule
-      picker = this.fitPositionToScreenDefault(wret, picker, anchor) ;
+      picker = this.fitPositionToScreenDefault(wret, picker, anchor);
     }
-    this.displayDidChange();
-    return picker ;
+    // this.displayDidChange();
+    return picker;
   },
 
   /** @private
     re-position rule migrated from old SC.OverlayPaneView.
     shift x, y to optimized picker visibility and make sure top-left corner is always visible.
   */
-  fitPositionToScreenDefault: function(w, f, a) {
+  fitPositionToScreenDefault: function (w, f, a) {
+    var mx;
+
     // make sure the right edge fits on the screen.  If not, anchor to
     // right edge of anchor or right edge of window, whichever is closer.
     if (SC.maxX(f) > w.width) {
-      var mx = Math.max(SC.maxX(a), f.width) ;
-      f.x = Math.min(mx, w.width) - f.width ;
+      mx = Math.max(SC.maxX(a), f.width);
+      f.x = Math.min(mx, w.width) - f.width;
     }
 
     // if the left edge is off of the screen, try to position at left edge
     // of anchor.  If that pushes right edge off screen, shift back until
     // right is on screen or left = 0
     if (SC.minX(f) < 0) {
-      f.x = SC.minX(Math.max(a,0)) ;
+      f.x = SC.minX(Math.max(a, 0));
       if (SC.maxX(f) > w.width) {
         f.x = Math.max(0, w.width - f.width);
       }
@@ -577,19 +644,19 @@ SC.PickerPane = SC.PalettePane.extend(
     // make sure bottom edge fits on screen.  If not, try to anchor to top
     // of anchor or bottom edge of screen.
     if (SC.maxY(f) > w.height) {
-      mx = Math.max((a.y - f.height), 0) ;
+      mx = Math.max((a.y - f.height), 0);
       if (mx > w.height) {
-        f.y = Math.max(0, w.height - f.height) ;
-      } else f.y = mx ;
+        f.y = Math.max(0, w.height - f.height);
+      } else { f.y = mx; }
     }
 
     // if Top edge is off screen, try to anchor to bottom of anchor. If that
     // pushes off bottom edge, shift up until it is back on screen or top =0
     if (SC.minY(f) < 0) {
-      mx = Math.min(SC.maxY(a), (w.height - a.height)) ;
-      f.y = Math.max(mx, 0) ;
+      mx = Math.min(SC.maxY(a), (w.height - a.height));
+      f.y = Math.max(mx, 0);
     }
-    return f ;
+    return f;
   },
 
   /** @private
@@ -601,20 +668,19 @@ SC.PickerPane = SC.PalettePane.extend(
     If the menu is a submenu, we also want to reposition the pane to the left
     of the parent menu if it would otherwise exceed the width of the viewport.
   */
-  fitPositionToScreenMenu: function(windowFrame, paneFrame, subMenu) {
-
+  fitPositionToScreenMenu: function (windowFrame, paneFrame, subMenu) {
     // Set up init location for submenu
     if (subMenu) {
       paneFrame.x -= this.get('submenuOffsetX');
-      paneFrame.y -= Math.floor(this.get('menuHeightPadding')/2);
+      paneFrame.y -= Math.floor(this.get('menuHeightPadding') / 2);
     }
 
     // If the right edge of the pane is within 20 pixels of the right edge
     // of the window, we need to reposition it.
-    if( (paneFrame.x + paneFrame.width) > (windowFrame.width-20) ) {
+    if ((paneFrame.x + paneFrame.width) > (windowFrame.width - 20)) {
       if (subMenu) {
         // Submenus should be re-anchored to the left of the parent menu
-        paneFrame.x = paneFrame.x - (paneFrame.width*2);
+        paneFrame.x = paneFrame.x - (paneFrame.width * 2);
       } else {
         // Otherwise, just position the pane 20 pixels from the right edge
         paneFrame.x = windowFrame.width - paneFrame.width - 20;
@@ -622,7 +688,7 @@ SC.PickerPane = SC.PalettePane.extend(
     }
 
     // Make sure we are at least 7 pixels from the left edge of the screen.
-    if( paneFrame.x < 7 ) paneFrame.x = 7;
+    if (paneFrame.x < 7) { paneFrame.x = 7; }
 
     if (paneFrame.y < 7) {
       paneFrame.height += paneFrame.y;
@@ -630,16 +696,16 @@ SC.PickerPane = SC.PalettePane.extend(
     }
 
     // If the height of the menu is bigger than the window height, resize it.
-    if( paneFrame.height+paneFrame.y+35 >= windowFrame.height){
-      if (paneFrame.height+50 >= windowFrame.height) {
+    if (paneFrame.height + paneFrame.y + 35 >= windowFrame.height) {
+      if (paneFrame.height + 50 >= windowFrame.height) {
         paneFrame.y = SC.MenuPane.VERTICAL_OFFSET;
-        paneFrame.height = windowFrame.height - (SC.MenuPane.VERTICAL_OFFSET*2);
+        paneFrame.height = windowFrame.height - (SC.MenuPane.VERTICAL_OFFSET * 2);
       } else {
-        paneFrame.y += (windowFrame.height - (paneFrame.height+paneFrame.y+35));
+        paneFrame.y += (windowFrame.height - (paneFrame.height + paneFrame.y + 35));
       }
     }
 
-    return paneFrame ;
+    return paneFrame;
   },
 
   /** @private
@@ -651,12 +717,12 @@ SC.PickerPane = SC.PalettePane.extend(
 
     @returns {Rect}
   */
-  fitPositionToScreenMenuPointer: function(w, f, a) {
-    f = this.fitPositionToScreenPointer(w,f,a);
+  fitPositionToScreenMenuPointer: function (w, f, a) {
+    f = this.fitPositionToScreenPointer(w, f, a);
 
     // If the height of the menu is bigger than the window height, resize it.
-    if( f.height+f.y+35 >= w.height){
-        f.height = w.height - f.y - (SC.MenuPane.VERTICAL_OFFSET*2) ;
+    if (f.height + f.y + 35 >= w.height) {
+      f.height = w.height - f.y - (SC.MenuPane.VERTICAL_OFFSET * 2);
     }
 
     return f;
@@ -665,98 +731,227 @@ SC.PickerPane = SC.PalettePane.extend(
   /** @private
     re-position rule for triangle pointer picker.
   */
-  fitPositionToScreenPointer: function(w, f, a) {
-    var offset = [this.pointerOffset[0], this.pointerOffset[1],
-                  this.pointerOffset[2], this.pointerOffset[3]];
-
-    // initiate perfect positions matrix
-    // 4 perfect positions: right > left > top > bottom
-    // 2 coordinates: x, y
-    // top-left corner of 4 perfect positioned f  (4x2)
-    var prefP1    =[[a.x+a.width+offset[0],                   a.y+parseInt(a.height/2,0)-40],
-                    [a.x-f.width+offset[1],                   a.y+parseInt(a.height/2,0)-40],
-                    [a.x+parseInt((a.width/2)-(f.width/2),0), a.y-f.height+offset[2]],
-                    [a.x+parseInt((a.width/2)-(f.width/2),0), a.y+a.height+offset[3]]];
-    // bottom-right corner of 4 perfect positioned f  (4x2)
-    var prefP2    =[[a.x+a.width+f.width+offset[0],                   a.y+parseInt(a.height/2,0)+f.height-24],
-                    [a.x+offset[1],                                   a.y+parseInt(a.height/2,0)+f.height-24],
-                    [a.x+parseInt((a.width/2)-(f.width/2),0)+f.width, a.y+offset[2]],
-                    [a.x+parseInt((a.width/2)-(f.width/2),0)+f.width, a.y+a.height+f.height+offset[3]]];
-    // cutoff of 4 perfect positioned f: top, right, bottom, left  (4x4)
-    var cutoffPrefP =[[prefP1[0][1]>0 ? 0 : 0-prefP1[0][1], prefP2[0][0]<w.width ? 0 : prefP2[0][0]-w.width, prefP2[0][1]<w.height ? 0 : prefP2[0][1]-w.height, prefP1[0][0]>0 ? 0 : 0-prefP1[0][0]],
-                      [prefP1[1][1]>0 ? 0 : 0-prefP1[1][1], prefP2[1][0]<w.width ? 0 : prefP2[1][0]-w.width, prefP2[1][1]<w.height ? 0 : prefP2[1][1]-w.height, prefP1[1][0]>0 ? 0 : 0-prefP1[1][0]],
-                      [prefP1[2][1]>0 ? 0 : 0-prefP1[2][1], prefP2[2][0]<w.width ? 0 : prefP2[2][0]-w.width, prefP2[2][1]<w.height ? 0 : prefP2[2][1]-w.height, prefP1[2][0]>0 ? 0 : 0-prefP1[2][0]],
-                      [prefP1[3][1]>0 ? 0 : 0-prefP1[3][1], prefP2[3][0]<w.width ? 0 : prefP2[3][0]-w.width, prefP2[3][1]<w.height ? 0 : prefP2[3][1]-w.height, prefP1[3][0]>0 ? 0 : 0-prefP1[3][0]]];
-
-    var m = this.preferMatrix;
-
-    // initiated with fallback position
-    // Will be used only if the following preferred alternative can not be found
-    if(m[4] === -1) {
-      //f.x = a.x>0 ? a.x+23 : 0; // another alternative align to left
-      f.x = a.x+parseInt(a.width/2,0);
-      f.y = a.y+parseInt(a.height/2,0)-parseInt(f.height/2,0);
-      this.set('pointerPos', SC.POINTER_LAYOUT[0]+' fallback');
-      this.set('pointerPosY', parseInt(f.height/2,0)-40);
-    } else {
-      f.x = prefP1[m[4]][0];
-      f.y = prefP1[m[4]][1];
-      this.set('pointerPos', SC.POINTER_LAYOUT[m[4]]);
-      this.set('pointerPosY', 0);
+  fitPositionToScreenPointer: function (w, f, a) {
+    var curType,
+        deltas,
+        matrix = this.preferMatrix,
+        offset = this.pointerOffset,
+        topLefts, botRights,
+        windowPadding = this.get('windowPadding');
+
+    // Determine the top-left corner of each of the 4 perfectly positioned
+    // frames, while taking the pointer offset into account.
+    topLefts = [
+      // Top left [x, y] if positioned evenly to the right of the anchor
+      [a.x + a.width + offset[0], a.y + a.halfHeight - f.halfHeight],
+
+      // Top left [x, y] if positioned evenly to the left of the anchor
+      [a.x - f.width + offset[1], a.y + a.halfHeight - f.halfHeight],
+
+      // Top left [x, y] if positioned evenly above the anchor
+      [a.x + a.halfWidth - f.halfWidth, a.y - f.height + offset[2]],
+
+      // Top left [x, y] if positioned evenly below the anchor
+      [a.x + a.halfWidth - f.halfWidth, a.y + a.height + offset[3]]
+    ];
+
+    // Determine the bottom-right corner of each of the 4 perfectly positioned
+    // frames, while taking the pointer offset into account.
+    botRights = [
+      // Bottom right [x, y] if positioned evenly to the right of the anchor
+      [a.x + a.width + f.width + offset[0], a.y + a.halfHeight + f.halfHeight],
+
+      // Bottom right [x, y] if positioned evenly to the left of the anchor
+      [a.x + offset[1], a.y + a.halfHeight + f.halfHeight],
+
+      // Bottom right [x, y] if positioned evenly above the anchor
+      [a.x + a.halfWidth + f.halfWidth, a.y + offset[2]],
+
+      // Bottom right [x, y] if positioned evenly below the anchor
+      [a.x + a.halfWidth + f.halfWidth, a.y + a.height + f.height + offset[3]]
+    ];
+
+    // Loop through the preferred matrix, hopefully finding one that will fit
+    // perfectly.
+    for (var i = 0, pointerLen = SC.POINTER_LAYOUT.length; i < pointerLen; i++) {
+      // The current preferred side.
+      curType = matrix[i];
+
+      // Determine if any of the sides of the pane would go beyond the window's
+      // edge for each of the 4 perfectly positioned frames; taking the amount
+      // of windowPadding into account.  This is done by measuring the distance
+      // from each side of the frame to the side of the window.  If the distance
+      // is negative then the edge is overlapping.
+      //
+      // If a perfect position has no overlapping edges, then it is a viable
+      // option for positioning.
+      deltas = {
+        top: topLefts[curType][1] - windowPadding,
+        right: w.width - windowPadding - botRights[curType][0],
+        bottom: w.height - windowPadding - botRights[curType][1],
+        left: topLefts[curType][0] - windowPadding
+      };
+
+      // UNUSED.  It would be nice to get the picker as close as possible.
+      // Cache the fallback deltas.
+      // if (curType === matrix[4]) {
+      //   fallbackDeltas = deltas;
+      // }
+
+      // If no edges overflow, then use this layout.
+      if (deltas.top >= 0 &&
+          deltas.right >= 0 &&
+          deltas.bottom >= 0 &&
+          deltas.left >= 0) {
+
+        f.x = topLefts[curType][0];
+        f.y = topLefts[curType][1];
+
+        this.set('pointerPosX', 0);
+        this.set('pointerPosY', 0);
+        this.set('pointerPos', SC.POINTER_LAYOUT[curType]);
+
+        break;
+
+      // If we prefer right or left and can fit right or left respectively, but
+      // can't fit the top within the window top and padding, then check if by
+      // adjusting the top of the pane down if it would still be beside the
+      // anchor and still above the bottom of the window with padding.
+      } else if (((curType === 0 && deltas.right >= 0) || // Right fits for preferred right
+                 (curType === 1 &&  deltas.left >= 0)) && // or left fits for preferred left,
+                 deltas.top < 0 && // but top doesn't fit,
+                 deltas.top + f.halfHeight >= 0) {  // yet it could.
+
+        // Adjust the pane position by the amount of downward shifting.
+        f.x = topLefts[curType][0];
+        f.y = topLefts[curType][1] - deltas.top;
+
+        // Offset the pointer position by the opposite amount of downward
+        // shifting (minus half the height of the pointer).
+        this.set('pointerPosX', 0);
+        this.set('pointerPosY', deltas.top);
+        this.set('pointerPos', SC.POINTER_LAYOUT[curType]);
+        break;
+
+      // If we prefer right or left and can fit right or left respectively, but
+      // can't fit the bottom within the window bottom and padding, then check
+      // if by adjusting the top of the pane up if it would still be beside the
+      // anchor and still below the top of the window with padding.
+      } else if (((curType === 0 && deltas.right >= 0) || // Right fits for preferred right
+                 (curType === 1 &&  deltas.left >= 0)) && // or left fits for preferred left,
+                 deltas.bottom < 0 && // but bottom doesn't fit,
+                 deltas.bottom + f.halfHeight >= 0) {  // yet it could.
+
+        // Adjust the pane position by the amount of upward shifting.
+        f.x = topLefts[curType][0];
+        f.y = topLefts[curType][1] + deltas.bottom;
+
+        // Offset the pointer position by the opposite amount of upward
+        // shifting (minus half the height of the pointer).
+        this.set('pointerPosX', 0);
+        this.set('pointerPosY', Math.abs(deltas.bottom));
+        this.set('pointerPos', SC.POINTER_LAYOUT[curType]);
+        break;
+
+      // If we prefer top or bottom and can fit top or bottom respectively, but
+      // can't fit the right side within the window right side plus padding,
+      // then check if by adjusting the pane leftwards to fit if it would still
+      // be beside the anchor and still fit within the left side of the window
+      // with padding.
+      } else if (((curType === 2 && deltas.top >= 0) || // Top fits for preferred top
+                 (curType === 3 &&  deltas.bottom >= 0)) && // or bottom fits for preferred bottom,
+                 deltas.right < 0 && // but right doesn't fit,
+                 deltas.right + f.halfWidth >= 0) {  // yet it could.
+
+        // Adjust the pane position by the amount of leftward shifting.
+        f.x = topLefts[curType][0] + deltas.right;
+        f.y = topLefts[curType][1];
+
+        // Offset the pointer position by the opposite amount of leftward
+        // shifting (minus half the width of the pointer).
+        this.set('pointerPosX', Math.abs(deltas.right));
+        this.set('pointerPosY', 0);
+        this.set('pointerPos', SC.POINTER_LAYOUT[curType]);
+        break;
+
+      // If we prefer top or bottom and can fit top or bottom respectively, but
+      // can't fit the left side within the window left side plus padding,
+      // then check if by adjusting the pane rightwards to fit if it would still
+      // be beside the anchor and still fit within the right side of the window
+      // with padding.
+      } else if (((curType === 2 && deltas.top >= 0) || // Top fits for preferred top
+                 (curType === 3 &&  deltas.bottom >= 0)) && // or bottom fits for preferred bottom,
+                 deltas.left < 0 && // but left doesn't fit,
+                 deltas.left + f.halfWidth >= 0) {  // yet it could.
+
+        // Adjust the pane position by the amount of leftward shifting.
+        f.x = topLefts[curType][0] - deltas.left;
+        f.y = topLefts[curType][1];
+
+        // Offset the pointer position by the opposite amount of leftward
+        // shifting (minus half the width of the pointer).
+        this.set('pointerPosX', deltas.left);
+        this.set('pointerPosY', 0);
+        this.set('pointerPos', SC.POINTER_LAYOUT[curType]);
+        break;
+      }
+
     }
-    this.set('pointerPosX', 0);
-
-    for(var i=0, cM, pointerLen=SC.POINTER_LAYOUT.length; i<pointerLen; i++) {
-      cM = m[i];
-      if (cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2]===0 && cutoffPrefP[cM][3]===0) {
-        // alternative i in preferMatrix by priority
-        if (m[4] !== cM) {
-          f.x = prefP1[cM][0] ;
-          f.y = prefP1[cM][1] ;
-          this.set('pointerPosY', 0);
-          this.set('pointerPos', SC.POINTER_LAYOUT[cM]);
-        }
-        i = SC.POINTER_LAYOUT.length;
-      } else if ((cM === 0 || cM === 1) && cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2] < f.height-91 && cutoffPrefP[cM][3]===0) {
-        if (m[4] !== cM) {
-          f.x = prefP1[cM][0] ;
-          this.set('pointerPos', SC.POINTER_LAYOUT[cM]);
-        }
-        f.y = prefP1[cM][1] - cutoffPrefP[cM][2];
-        this.set('pointerPosY', cutoffPrefP[cM][2]);
-        i = SC.POINTER_LAYOUT.length;
-      } else if ((cM === 0 || cM === 1) && cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2] <= f.height-51 && cutoffPrefP[cM][3]===0) {
-        if (m[4] !== cM) {
-          f.x = prefP1[cM][0] ;
-        }
-        f.y = prefP1[cM][1] - (f.height-51) ;
-        this.set('pointerPosY', (f.height-53));
-        this.set('pointerPos', SC.POINTER_LAYOUT[cM]+' extra-low');
-        i = SC.POINTER_LAYOUT.length;
-      } else if ((cM === 2 || cM === 3) && cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]<= parseInt(f.width/2,0)-this.get('extraRightOffset') && cutoffPrefP[cM][2] ===0 && cutoffPrefP[cM][3]===0) {
-        if (m[4] !== cM) {
-          f.y = prefP1[cM][1] ;
-        }
-        f.x = prefP1[cM][0] - (parseInt(f.width/2,0)-this.get('extraRightOffset')) ;
-        this.set('pointerPos', SC.POINTER_LAYOUT[cM]+' extra-right');
-        i = SC.POINTER_LAYOUT.length;
-      } else if ((cM === 2 || cM === 3) && cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2] ===0 && cutoffPrefP[cM][3]<= parseInt(f.width/2,0)-this.get('extraRightOffset')) {
-        if (m[4] !== cM) {
-          f.y = prefP1[cM][1] ;
-        }
-        f.x = prefP1[cM][0] + (parseInt(f.width/2,0)-this.get('extraRightOffset')) ;
-        this.set('pointerPos', SC.POINTER_LAYOUT[cM]+' extra-left');
-        i = SC.POINTER_LAYOUT.length;
+
+    // If no arrangement was found to fit, then use the fall back preferred
+    // type.
+    if (i === pointerLen) {
+      if (matrix[4] === -1) {
+        //f.x = a.x > 0 ? a.x + 23 : 0; // another alternative align to left
+        f.x = a.x + a.halfWidth;
+        f.y = a.y + a.halfHeight - f.halfHeight;
+
+        this.set('pointerPos', SC.POINTER_LAYOUT[0] + ' fallback');
+        this.set('pointerPosY', f.halfHeight - 40);
+      } else {
+        f.x = topLefts[matrix[4]][0];
+        f.y = topLefts[matrix[4]][1];
+
+        this.set('pointerPos', SC.POINTER_LAYOUT[matrix[4]]);
+        this.set('pointerPosY', 0);
       }
+
+      this.set('pointerPosX', 0);
+    }
+
+    this.invokeLast(this._adjustPointerPosition);
+
+    return f;
+  },
+
+  /** @private Measure the pointer element and adjust it by the determined offset. */
+  _adjustPointerPosition: function () {
+    var pointer = this.$('.sc-pointer'),
+      pointerPos = this.get('pointerPos'),
+      marginLeft,
+      marginTop;
+
+    switch (pointerPos) {
+    case 'perfectRight':
+    case 'perfectLeft':
+      marginTop = -Math.round(pointer.outerHeight() / 2);
+      marginTop += this.get('pointerPosY');
+      pointer.attr('style', "margin-top: " + marginTop + "px");
+      break;
+    case 'perfectTop':
+    case 'perfectBottom':
+      marginLeft = -Math.round(pointer.outerWidth() / 2);
+      marginLeft += this.get('pointerPosX');
+      pointer.attr('style', "margin-left: " + marginLeft + "px;");
+      break;
     }
-    return f ;
   },
 
   /** @private
     This method will set up pointerOffset and preferMatrix according to type
     and size if not provided explicitly.
   */
-  setupPointer: function(a) {
+  setupPointer: function (a) {
     var pointerOffset = this.pointerOffset,
         K             = SC.PickerPane;
 
@@ -764,62 +959,76 @@ SC.PickerPane = SC.PalettePane.extend(
     if (!pointerOffset || pointerOffset.length !== 4) {
       if (this.get('preferType') == SC.PICKER_MENU_POINTER) {
         switch (this.get('controlSize')) {
-          case SC.TINY_CONTROL_SIZE:
-            this.set('pointerOffset',    K.TINY_PICKER_MENU_POINTER_OFFSET) ;
-            this.set('extraRightOffset', K.TINY_PICKER_MENU_EXTRA_RIGHT_OFFSET) ;
-            break;
-          case SC.SMALL_CONTROL_SIZE:
-            this.set('pointerOffset',    K.SMALL_PICKER_MENU_POINTER_OFFSET) ;
-            this.set('extraRightOffset', K.SMALL_PICKER_MENU_EXTRA_RIGHT_OFFSET) ;
-            break;
-          case SC.REGULAR_CONTROL_SIZE:
-            this.set('pointerOffset',    K.REGULAR_PICKER_MENU_POINTER_OFFSET) ;
-            this.set('extraRightOffset', K.REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET) ;
-            break;
-          case SC.LARGE_CONTROL_SIZE:
-            this.set('pointerOffset',    K.LARGE_PICKER_MENU_POINTER_OFFSET) ;
-            this.set('extraRightOffset', K.LARGE_PICKER_MENU_EXTRA_RIGHT_OFFSET) ;
-            break;
-          case SC.HUGE_CONTROL_SIZE:
-            this.set('pointerOffset',    K.HUGE_PICKER_MENU_POINTER_OFFSET) ;
-            this.set('extraRightOffset', K.HUGE_PICKER_MENU_EXTRA_RIGHT_OFFSET) ;
-            break;
+        case SC.TINY_CONTROL_SIZE:
+          this.set('pointerOffset', K.TINY_PICKER_MENU_POINTER_OFFSET);
+          this.set('windowPadding', K.TINY_MENU_WINDOW_PADDING);
+          break;
+        case SC.SMALL_CONTROL_SIZE:
+          this.set('pointerOffset', K.SMALL_PICKER_MENU_POINTER_OFFSET);
+          this.set('windowPadding', K.SMALL_MENU_WINDOW_PADDING);
+          break;
+        case SC.REGULAR_CONTROL_SIZE:
+          this.set('pointerOffset', K.REGULAR_PICKER_MENU_POINTER_OFFSET);
+          this.set('windowPadding', K.REGULAR_MENU_WINDOW_PADDING);
+          break;
+        case SC.LARGE_CONTROL_SIZE:
+          this.set('pointerOffset', K.LARGE_PICKER_MENU_POINTER_OFFSET);
+          this.set('windowPadding', K.LARGE_MENU_WINDOW_PADDING);
+          break;
+        case SC.HUGE_CONTROL_SIZE:
+          this.set('pointerOffset', K.HUGE_PICKER_MENU_POINTER_OFFSET);
+          this.set('windowPadding', K.HUGE_MENU_WINDOW_PADDING);
+          break;
+        default:
+          this.set('pointerOffset', K.REGULAR_PICKER_MENU_POINTER_OFFSET);
+          this.set('windowPadding', K.REGULAR_MENU_WINDOW_PADDING);
+          //@if(debug)
+          SC.warn('SC.PickerPane with preferType of SC.PICKER_MENU_POINTER should either define a controlSize or provide a pointerOffset. SC.PickerPane will fall back to default pointerOffset of SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET and default windowPadding of SC.PickerPane.WINDOW_PADDING');
+          //@endif
         }
-      }
-      else {
+      } else {
         var overlapTuningX = (a.width < 16)  ? ((a.width < 4)  ? 9 : 6) : 0,
             overlapTuningY = (a.height < 16) ? ((a.height < 4) ? 9 : 6) : 0,
             offsetKey      = K.PICKER_POINTER_OFFSET;
 
-        var offset = [offsetKey[0]+overlapTuningX,
-                      offsetKey[1]-overlapTuningX,
-                      offsetKey[2]-overlapTuningY,
-                      offsetKey[3]+overlapTuningY];
-        this.set('pointerOffset', offset) ;
-        this.set('extraRightOffset', K.PICKER_EXTRA_RIGHT_OFFSET) ;
+        var offset = [offsetKey[0] + overlapTuningX,
+                      offsetKey[1] - overlapTuningX,
+                      offsetKey[2] - overlapTuningY,
+                      offsetKey[3] + overlapTuningY];
+
+        this.set('pointerOffset', offset);
+        // TODO: What to do about this?
+        if (SC.none(this.get('windowPadding'))) {
+          this.set('windowPadding', K.WINDOW_PADDING);
+        }
+      }
+    } else {
+      // TODO: What to do about this?
+      if (SC.none(this.get('windowPadding'))) {
+        this.set('windowPadding', K.WINDOW_PADDING);
       }
     }
 
     // set up preferMatrix according to type if not provided explicitly:
-    // take default [0,1,2,3,2] for picker, [3,0,1,2,3] for menu picker if
+    // take default [0, 1, 2, 3, 2] for picker, [3, 0, 1, 2, 3] for menu picker if
     // custom matrix not provided explicitly
-    if(!this.preferMatrix || this.preferMatrix.length !== 5) {
+    if (!this.preferMatrix || this.preferMatrix.length !== 5) {
       // menu-picker default re-position rule :
       // perfect bottom (3) > perfect right (0) > perfect left (1) > perfect top (2)
       // fallback to perfect bottom (3)
       // picker default re-position rule :
       // perfect right (0) > perfect left (1) > perfect top (2) > perfect bottom (3)
       // fallback to perfect top (2)
-      this.set('preferMatrix', this.get('preferType') === SC.PICKER_MENU_POINTER ? [3,2,1,0,3] : [0,1,2,3,2]) ;
+      this.set('preferMatrix', this.get('preferType') === SC.PICKER_MENU_POINTER ? [3, 2, 1, 0, 3] : [0, 1, 2, 3, 2]);
     }
   },
 
   /**
     @type Array
-    @default ['preferType','pointerPos','pointerPosY']
+    @default ['pointerPos']
     @see SC.View#displayProperties
   */
-  displayProperties: ['preferType','pointerPos','pointerPosY'],
+  displayProperties: ['pointerPos'],
 
   /**
     @type String
@@ -828,7 +1037,7 @@ SC.PickerPane = SC.PalettePane.extend(
   renderDelegateName: 'pickerRenderDelegate',
 
   /** @private - click away picker. */
-  modalPaneDidClick: function(evt) {
+  modalPaneDidClick: function (evt) {
     var f = this.get('frame'),
         target = this.get('removeTarget') || null,
         action = this.get('removeAction'),
@@ -838,7 +1047,9 @@ SC.PickerPane = SC.PalettePane.extend(
       // We're not in the Pane so we must be in the modal
       if (action) {
         rootResponder.sendAction(action, target, this, this, null, this);
-      } else this.remove();
+      } else {
+        this.remove();
+      }
 
       return YES;
     }
@@ -847,7 +1058,7 @@ SC.PickerPane = SC.PalettePane.extend(
   },
 
   /** @private */
-  mouseDown: function(evt) {
+  mouseDown: function (evt) {
     return this.modalPaneDidClick(evt);
   },
 
@@ -856,61 +1067,38 @@ SC.PickerPane = SC.PalettePane.extend(
     won't be clicked away default is the range of contentView frame.
     Over-write for adjustments. ex: shadow
   */
-  clickInside: function(frame, evt) {
+  clickInside: function (frame, evt) {
     return SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame);
   },
 
   /**
     Invoked by the root responder. Re-position picker whenever the window resizes.
   */
-  windowSizeDidChange: function(oldSize, newSize) {
-    if (this.repositionOnWindowResize) this.positionPane();
+  windowSizeDidChange: function (oldSize, newSize) {
+    sc_super();
+
+    if (this.repositionOnWindowResize) { this.positionPane(); }
   },
 
-  remove: function(){
-    if(this.get('isVisibleInWindow') && this.get('isPaneAttached')) this._withdrawOverflowRequest();
+  remove: function () {
+    if (this.get('isVisibleInWindow') && this.get('isPaneAttached')) {
+      this._withdrawOverflowRequest();
+    }
     this._removeScrollObservers();
     return sc_super();
   },
 
-  /** Figure out what is the anchor element */
-  anchorElement: function(key, value) {
-    var anchorView;
-
-    if (value === undefined) {
-      // Getting the value.
-      anchorView = this._anchorView;
-      return anchorView ? anchorView.get('layer') : this._anchorHTMLElement;
-    }
-    else {
-      // Setting the value.
-      if (!value) {
-        throw "You must set 'anchorElement' to either a view or a DOM element";
-      }
-      else if (value.isView) {
-        this._anchorView        = value;
-        this._anchorHTMLElement = null;
-      }
-      else {
-        this._anchorView        = null;
-        this._anchorHTMLElement = value;
-      }
-    }
-  }.property('layer').cacheable(),
-
-
-
   /** @private
     Internal method to hide the overflow on the body to make sure we don't
     show scrollbars when the picker has shadows, as it's really annoying.
   */
-  _hideOverflow: function(){
-    var body = SC.$(document.body),
-        main = SC.$('.sc-main'),
-        minWidth = parseInt(main.css('minWidth'),0),
-        minHeight = parseInt(main.css('minHeight'),0),
+  _hideOverflow: function () {
+    var main = SC.$('.sc-main'),
+        minWidth = parseInt(main.css('minWidth'), 0),
+        minHeight = parseInt(main.css('minHeight'), 0),
         windowSize = SC.RootResponder.responder.get('currentWindowSize');
-    if(windowSize.width>=minWidth && windowSize.height>=minHeight){
+
+    if (windowSize.width >= minWidth && windowSize.height >= minHeight) {
       SC.bodyOverflowArbitrator.requestHidden(this);
     }
   },
@@ -919,7 +1107,7 @@ SC.PickerPane = SC.PalettePane.extend(
     Internal method to show the overflow on the body to make sure we don't
     show scrollbars when the picker has shadows, as it's really annoying.
   */
-  _withdrawOverflowRequest: function(){
+  _withdrawOverflowRequest: function () {
     SC.bodyOverflowArbitrator.withdrawRequest(this);
   },
 
@@ -927,23 +1115,23 @@ SC.PickerPane = SC.PalettePane.extend(
     Detect if view is inside a scroll view. Do this by traversing parent view
     hierarchy until you hit a scroll view or main pane.
   */
-  _getScrollViewOfView: function(view) {
+  _getScrollViewOfView: function (view) {
     var curLevel = view;
-    while (YES) {
-      if (!curLevel) {
-        return null;
-      }
+    while (curLevel) {
       if (curLevel.isScrollable) {
-        return curLevel;
+        break;
       }
+
       curLevel = curLevel.get('parentView');
     }
+
+    return curLevel;
   },
 
   /** @private
     If anchor view is in a scroll view, setup observers on scroll offsets.
   */
-  _setupScrollObservers: function(anchorView) {
+  _setupScrollObservers: function (anchorView) {
     var scrollView = this._getScrollViewOfView(anchorView);
     if (scrollView) {
       scrollView.addObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
@@ -955,7 +1143,7 @@ SC.PickerPane = SC.PalettePane.extend(
   /** @private
     Teardown observers setup in _setupScrollObservers.
   */
-  _removeScrollObservers: function() {
+  _removeScrollObservers: function () {
     var scrollView = this._scrollView;
     if (scrollView) {
       scrollView.removeObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
@@ -966,7 +1154,7 @@ SC.PickerPane = SC.PalettePane.extend(
   /** @private
     Reposition pane whenever scroll offsets change.
   */
-  _scrollOffsetDidChange: function() {
+  _scrollOffsetDidChange: function () {
     this.positionPane();
   }
 });
@@ -975,62 +1163,80 @@ SC.PickerPane = SC.PalettePane.extend(
   Default metrics for the different control sizes.
 */
 
-/**
+/** @static */
+SC.PickerPane.WINDOW_PADDING = 20;
+
+/** @static */
+SC.PickerPane.TINY_MENU_WINDOW_PADDING = 12;
+
+/** @static */
+SC.PickerPane.SMALL_MENU_WINDOW_PADDING = 11;
+
+/** @static */
+SC.PickerPane.REGULAR_MENU_WINDOW_PADDING = 12;
+
+/** @static */
+SC.PickerPane.LARGE_MENU_WINDOW_PADDING = 17;
+
+/** @static */
+SC.PickerPane.HUGE_MENU_WINDOW_PADDING = 12;
+
+/** @deprecated Version 1.10.  Use SC.PickerPane.WINDOW_PADDING.
   @static
 */
-SC.PickerPane.PICKER_POINTER_OFFSET = [9, -9, -18, 18];
+SC.PickerPane.PICKER_EXTRA_RIGHT_OFFSET = 20;
 
-/**
+/** @deprecated Version 1.10.  Use SC.PickerPane.TINY_MENU_WINDOW_PADDING.
   @static
 */
-SC.PickerPane.PICKER_EXTRA_RIGHT_OFFSET = 20;
+SC.PickerPane.TINY_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
 
-/**
+/** @deprecated Version 1.10.  Use SC.PickerPane.SMALL_MENU_WINDOW_PADDING.
   @static
 */
-SC.PickerPane.TINY_PICKER_MENU_POINTER_OFFSET = [9, -9, -18, 18];
+SC.PickerPane.SMALL_PICKER_MENU_EXTRA_RIGHT_OFFSET = 11;
 
-/**
+/** @deprecated Version 1.10.  Use SC.PickerPane.REGULAR_MENU_WINDOW_PADDING.
   @static
 */
-SC.PickerPane.TINY_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
+SC.PickerPane.REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
 
-/**
+/** @deprecated Version 1.10.  Use SC.PickerPane.LARGE_MENU_WINDOW_PADDING.
   @static
 */
-SC.PickerPane.SMALL_PICKER_MENU_POINTER_OFFSET = [9, -9, -8, 8];
+SC.PickerPane.LARGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 17;
 
-/**
+/** @deprecated Version 1.10.  Use SC.PickerPane.HUGE_MENU_WINDOW_PADDING.
   @static
 */
-SC.PickerPane.SMALL_PICKER_MENU_EXTRA_RIGHT_OFFSET = 11;
+SC.PickerPane.HUGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
 
 /**
   @static
 */
-SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET = [9, -9, -12, 12];
+SC.PickerPane.PICKER_POINTER_OFFSET = [9, -9, -18, 18];
 
 /**
   @static
 */
-SC.PickerPane.REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
+SC.PickerPane.TINY_PICKER_MENU_POINTER_OFFSET = [9, -9, -18, 18];
 
 /**
   @static
 */
-SC.PickerPane.LARGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -16, 16];
+SC.PickerPane.SMALL_PICKER_MENU_POINTER_OFFSET = [9, -9, -8, 8];
 
 /**
   @static
 */
-SC.PickerPane.LARGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 17;
+SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET = [9, -9, -12, 12];
 
 /**
   @static
 */
-SC.PickerPane.HUGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -18, 18];
+SC.PickerPane.LARGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -16, 16];
 
 /**
   @static
 */
-SC.PickerPane.HUGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
+SC.PickerPane.HUGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -18, 18];