sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -10,15 +10,19 @@ sc_require('panes/panel');
 /** @class
   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:
+  The simplest way to use the palette pane is to define it in an SC.Page like this:
 
-      SC.PalettePane.create({
-        layout: { width: 400, height: 200, right: 0, top: 0 },
-        contentView: SC.View.extend({
+        myPalettePane: 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.
+  Then get it from your page and append like this:
+
+        MyApp.myPage.get('myPalettePane').append();
+
+  This will cause your palette pane to instantiate lazily and 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
@@ -26,9 +30,10 @@ sc_require('panes/panel');
   They provide a better user experience than modal panel.
 
   @extends SC.PanelPane
+  @extends SC.DraggablePaneSupport
   @since SproutCore 1.0
 */
-SC.PalettePane = SC.PanelPane.extend(
+SC.PalettePane = SC.PanelPane.extend(SC.DraggablePaneSupport,
 /** @scope SC.PalettePane.prototype */ {
 
   /**
@@ -50,47 +55,6 @@ SC.PalettePane = SC.PanelPane.extend(
     @type SC.View
     @default SC.ModalPane
   */
-  modalPane: SC.ModalPane,
-  
-  /**
-    @type Boolean
-    @default NO
-  */
-  isAnchored: NO,
-
-  /** @private */
-  _mouseOffsetX: null,
-
-  /** @private */
-  _mouseOffsetY: null,
-
-  /** @private
-    Drag & drop palette to new position.
-  */
-  mouseDown: function(evt) {
-    var f=this.get('frame');
-    this._mouseOffsetX = f ? (f.x - evt.pageX) : 0;
-    this._mouseOffsetY = f ? (f.y - evt.pageY) : 0;
-    return YES;
-  },
-
-  /** @private */
-  mouseDragged: function(evt) {
-    if(!this.isAnchored) {
-      this.set('layout', { width: this.layout.width, height: this.layout.height, left: this._mouseOffsetX + evt.pageX, top: this._mouseOffsetY + evt.pageY });
-      this.updateLayout();
-    }
-    return YES;
-  },
-
-  /** @private */
-  touchStart: function(evt){
-    return this.mouseDown(evt);
-  },
-
-  /** @private */
-  touchesDragged: function(evt){
-    return this.mouseDragged(evt);
-  }
 
+  modalPane: SC.ModalPane
 });

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

@@ -51,14 +51,6 @@ SC.PICKER_POINTER = 'pointer';
 */
 SC.PICKER_MENU_POINTER = 'menu-pointer';
 
-/**
-  Pointer layout for perfect right/left/top/bottom.
-
-  @constant
-  @static
-*/
-SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom"];
-
 /**
   @class
 
@@ -95,10 +87,10 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
   When `preferType` is unspecified, `SC.PICKER_MENU` or `SC.PICKER_FIXED`, then
   the `preferMatrix` array describes the offset that is used to position the
   pane below the anchor. The offset is described by an array of three values,
-  defaulting to `[1, 4, 3]`. The first value controls the x offset and the second
-  value the y offset. The third value can be `0` (right) or `3` (bottom),
+  defaulting to `[1, 4, SC.POSITION_BOTTOM]`. The first value controls the x offset and the second
+  value the y offset. The third value can be `SC.POSITION_RIGHT` (0) or `SC.POSITION_BOTTOM` (3),
   controlling whether the origin of the pane is further offset by the width
-  (in the case of 0) or the height (in the case of 3) of the anchor.
+  (in the case of SC.POSITION_RIGHT) or the height (in the case of SC.POSITION_BOTTOM) of the anchor.
 
   ### Position-based
 
@@ -109,14 +101,27 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
   `SC.PickerPane` should display on when there isn't enough space around any
   of the preferred sides.
 
-  Anchor sides are defined by their index in `SC.POINTER_LAYOUT`, where right
-  is `0`, left is `1`, top is `2`, and bottom is `3`.
+  The sides may be one of:
+
+  * SC.POSITION_RIGHT (i.e. 0) - to the right of the anchor
+  * SC.POSITION_LEFT (i.e. 1)- to the left of the anchor
+  * SC.POSITION_TOP (i.e. 2) - above the anchor
+  * SC.POSITION_BOTTOM (i.e. 3) - below the anchor
+
+  For example, the `preferMatrix` of,
 
-  For example, the `preferMatrix` of `[3, 0, 1, 2, 2]` says: "Display below the
-  anchor (3); if there isn't enough space then display to the right of the anchor (0).
+      [SC.POSITION_BOTTOM, SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_TOP],
+
+  indicates: Display below the anchor (SC.POSITION_BOTTOM); if there isn't enough
+  space then display to the right of the anchor (SC.POSITION_RIGHT).
   If there isn't enough space either below or to the right of the anchor, then appear
-  to the left (1), unless there is also no space on the left, in which case display
-  above the anchor (2)."
+  to the left (SC.POSITION_LEFT), unless there is also no space on the left, in which case display
+  above the anchor (SC.POSITION_TOP).
+
+  Note: The position constants are simply the integers 0 to 3, so a short form
+  of the example above would read,
+
+      [3, 0, 1, 2, 2]
 
   ## Position Rules
 
@@ -131,30 +136,29 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
 
   ### `SC.PICKER_MENU`
 
-  Positioning is offset-based, with `preferMatrix` defaulting to `[1, 4, 3]`.
+  Positioning is offset-based, with `preferMatrix` defaulting to `[1, 4, SC.POSITION_BOTTOM]`.
   Furthermore, a minimum left and right padding to window, of 7px and 8px, respectively,
   is enforced.
 
 
   ### `SC.PICKER_FIXED`
 
-  Positioning is offset-based, with `preferMatrix` defaulting to `[1, 4, 3]` and
+  Positioning is offset-based, with `preferMatrix` defaulting to `[1, 4, SC.POSITION_BOTTOM]` and
   skipping `fitPositionToScreen`.
 
 
   ### `SC.PICKER_POINTER`
 
-  Positioning is position-based, with `preferMatrix` defaulting to `[0, 1, 2, 3, 2]`,
+  Positioning is position-based, with `preferMatrix` defaulting to `[SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_BOTTOM, SC.POSITION_TOP]` or `[0, 1, 2, 3, 2]` for short,
   i.e. right > left > top > bottom; fallback to top.
 
 
   ### `SC.PICKER_MENU_POINTER`
 
-  Positioning is position-based, with `preferMatrix` defaulting to `[3, 0, 1, 2, 3]`,
+  Positioning is position-based, with `preferMatrix` defaulting to `[SC.POSITION_BOTTOM, SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_BOTTOM]` or `[3, 0, 1, 2, 3]` for short,
   i.e. bottom, right, left, top; fallback to bottom.
 
 
-
   ## Examples
 
   Examples for applying popular customized picker position rules:
@@ -166,60 +170,60 @@ 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, SC.POSITION_BOTTOM]`:
 
       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, SC.POSITION_RIGHT]`:
 
       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, SC.POSITION_RIGHT]);
 
-  ### fixed below the anchor with default `preferMatrix` of `[1, 4, 3]`:
+  ### fixed below the anchor with default `preferMatrix` of `[1, 4, SC.POSITION_BOTTOM]`:
 
       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, SC.POSITION_RIGHT]`:
 
       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, SC.POSITION_RIGHT]);
 
-  ### pointer with default `preferMatrix` of `[0, 1, 2, 3, 2]`:
+  ### pointer with default `preferMatrix` of `[SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_BOTTOM, SC.POSITION_TOP]` or `[0, 1, 2, 3, 2]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
       }).popup(anchor, SC.PICKER_POINTER);
 
-  Positioning: right (0) > left (1) > top (2) > bottom (3). Fallback to top (2).
+  Positioning: SC.POSITION_RIGHT (0) > SC.POSITION_LEFT (1) > SC.POSITION_TOP (2) > SC.POSITION_BOTTOM (3). Fallback to SC.POSITION_TOP (2).
 
-  ### pointer with custom `preferMatrix` of `[3, 0, 1, 2, 2]`:
+  ### pointer with custom `preferMatrix` of `[SC.POSITION_BOTTOM, SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_TOP]` or `[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]);
 
-  Positioning: bottom (3) > right (0) > left (1) > top (2). Fallback to top (2).
+  Positioning: SC.POSITION_BOTTOM (3) > SC.POSITION_RIGHT (0) > SC.POSITION_LEFT (1) > SC.POSITION_TOP (2). Fallback to SC.POSITION_TOP (2).
 
-  ### menu-pointer with default `preferMatrix` of `[3, 0, 1, 2, 3]`:
+  ### menu-pointer with default `preferMatrix` of `[SC.POSITION_BOTTOM, SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_BOTTOM]` or `[3, 0, 1, 2, 3]`:
 
       SC.PickerPane.create({
         layout: { width: 400, height: 200 },
         contentView: SC.View.extend({})
       }).popup(anchor, SC.PICKER_MENU_POINTER);
 
-  Positioning: bottom (3) > right (0) > left (1) > top (2). Fallback to bottom (3).
+  Positioning: SC.POSITION_BOTTOM (3) > SC.POSITION_RIGHT (0) > SC.POSITION_LEFT (1) > SC.POSITION_TOP (2). Fallback to SC.POSITION_BOTTOM (3).
 
   @extends SC.PalettePane
   @since SproutCore 1.0
@@ -227,6 +231,11 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
 SC.PickerPane = SC.PalettePane.extend(
 /** @scope SC.PickerPane.prototype */ {
 
+  //@if(debug)
+  /** @private Debug-mode only flag for ensuring that the pane is appended via `popup`. */
+  _sc_didUsePopup: false,
+  //@endif
+
   /**
     @type Array
     @default ['sc-picker']
@@ -246,6 +255,12 @@ SC.PickerPane = SC.PalettePane.extend(
   */
   isModal: YES,
 
+  /**
+    @private
+    TODO: Remove SC.POINTER_LAYOUT backward compatibility.
+  */
+  _sc_pointerLayout: SC.POINTER_LAYOUT || ['perfectRight', 'perfectLeft', 'perfectTop', 'perfectBottom'],
+
   /** @private
     @type String
     @default 'perfectRight'
@@ -265,37 +280,48 @@ SC.PickerPane = SC.PalettePane.extend(
   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.
+    When calling `popup`, you pass a view or element to anchor the pane. This
+    property returns the anchor element. (If you've anchored to a view, this
+    is its layer.) You can use this to properly position your view.
 
     @type HTMLElement
     @default null
   */
   anchorElement: function (key, value) {
-    var anchorView;
-
+    // Getter
     if (value === undefined) {
-      // Getting the value.
-      anchorView = this._anchorView;
-      return anchorView ? anchorView.get('layer') : this._anchorHTMLElement;
-    } else {
-      // Setting the value.
+      if (this._anchorView) return this._anchorView.get('layer');
+      else return this._anchorHTMLElement;
+    }
+    // Setter
+    else {
+      // Strip jQuery objects. (We do this first in case an empty one is passed in.)
+      if (value && value.isCoreQuery) value = value[0];
+
+      // Throw an error if a null or empty value is set. You're not allowed to go anchorless.
+      // (TODO: why can't we go anchorless? positionPane happily centers an unmoored pane.)
       if (!value) {
         throw "You must set 'anchorElement' to either a view or a DOM element";
       }
-      else if (value.isView) {
+
+      // Clean up any previous anchor elements.
+      this._removeScrollObservers();
+
+      if (value.isView) {
+        this._setupScrollObservers(value);
         this._anchorView        = value;
         this._anchorHTMLElement = null;
+        return value.get('layer');
       }
       else {
+        // TODO: We could setupScrollObservers on passed elements too, but it would
+        // be a bit more complicated.
         this._anchorView        = null;
         this._anchorHTMLElement = value;
+        return value;
       }
-
-      return value;
     }
-  }.property('layer').cacheable(),
+  }.property().cacheable(),
 
   /** @private
     anchor rect calculated by computeAnchorRect from init popup
@@ -306,7 +332,34 @@ SC.PickerPane = SC.PalettePane.extend(
   anchorCached: null,
 
   /**
-    popular customized picker position rule
+    The type of picker pane.
+
+    Picker panes can behave and appear in slightly differing ways
+    depending on the value of `preferType`. By default, with no `preferType`
+    specified, the pane will appear directly below the anchor element with
+    its left side aligned to the anchor's left side.
+
+    However, if you wish to position the pane by a specified offset to the
+    right or below the anchor using the values of `preferMatrix` as an offset
+    configuration, you can set `preferType` to one of `SC.PICKER_MENU` or
+    `SC.PICKER_FIXED`. These two picker types both use the `preferMatrix` to
+    adjust the position of the pane below or to the right of the anchor.
+
+    The difference is that `SC.PICKER_MENU` also uses the `windowPadding`
+    value to ensure that the pane doesn't go outside the bounds of the visible
+    window.
+
+    If you wish to position the pane on whichever side it will best fit and include
+    a pointer, then you can use one of `SC.PICKER_POINTER` or `SC.PICKER_MENU_POINTER`
+    for `preferType`. With this setting the pane will use the values of
+    `preferMatrix` to indicate the preferred side of the anchor for the picker
+    to appear.
+
+    The difference between these two is that `SC.PICKER_MENU_POINTER` prefers
+    to position below the anchor by default and `SC.PICKER_POINTER` prefers to
+    position to the right of the anchor by default. As well, the `SC.PICKER_MENU_POINTER`
+    type will resize itself if its height extends outside the visible window
+    (which is useful for long menus that can scroll).
 
     @type String
     @default null
@@ -314,18 +367,80 @@ SC.PickerPane = SC.PalettePane.extend(
   preferType: null,
 
   /**
-    default/custom offset or position pref matrix for specific preferType
+    The configuration value for the current type of picker pane.
 
-    @type String
+    This dual-purpose property controls the positioning of the pane depending
+    on what the value of `preferType` is.
+
+    ## Offset based use of `preferMatrix`
+
+    For `preferType` of `SC.PICKER_MENU` or `SC.PICKER_FIXED`, `preferMatrix`
+    determines the x and y offset of the pane from either the right or bottom
+    side of the anchor. In this case, the `preferMatrix` should be an array of,
+
+        [*x offset*, *y offset*, *offset position*]
+
+    For example, to position the pane 10px directly below the anchor, we would
+    use,
+
+        preferMatrix: [0, 10, SC.POSITION_BOTTOM]
+
+    To position the pane 10px down and 5px right of the anchor's right side,
+    we would use,
+
+        preferMatrix: [5, 10, SC.POSITION_RIGHT]
+
+    ## Position based use of `preferMatrix`
+
+    For `preferType` of `SC.PICKER_POINTER` or `SC.PICKER_MENU_POINTER`, `preferMatrix`
+    determines the side of the anchor to appear on in order of preference.
+    In this case, the `preferMatrix` should be an array of,
+
+        [*preferred side*, *2nd preferred side*, *3rd preferred side*, *4th preferred side*, *fallback side if none fit*]
+
+    Note that if the pane can't fit within the window bounds (including `windowPadding`)
+    on any of the sides, then the last side is used as a fallback.
+
+    @type Array
+    @default preferType == SC.PICKER_MENU || preferType == SC.PICKER_FIXED ? [1, 4, SC.POSITION_BOTTOM] (i.e. [1, 4, 3])
+    @default preferType == SC.PICKER_POINTER ? [SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_BOTTOM, SC.POSITION_TOP] (i.e. [0, 1, 2, 3, 2])
+    @default preferType == SC.PICKER_MENU_POINTER ? [SC.POSITION_BOTTOM, SC.POSITION_RIGHT, SC.POSITION_LEFT, SC.POSITION_TOP, SC.POSITION_BOTTOM] (i.e. [3, 0, 1, 2, 3])
     @default null
   */
   preferMatrix: null,
 
   /**
-    default/custom offset of pointer for picker-pointer or pointer-menu
+    The offset of the pane from its target when positioned with `preferType` of
+    `SC.PICKER_POINTER` or `SC.PICKER_MENU_POINTER`.
+
+    When using `SC.PICKER_POINTER` or `SC.PICKER_MENU_POINTER` as the `preferType`,
+    the pane will include a pointer element (ex. a small triangle on the side of
+    the pane). This also means that the pane will be offset by an additional
+    distance in order to make space for the pointer. The offset distance of each
+    side is specified by `pointerOffset`.
+
+    Therefore, if you are using a custom picker pane style or you would just
+    like to change the default offsets, you should specify your own value like
+    so:
+
+        pointerOffset: [*right offset*, *left offset*, *top offset*, *bottom offset*]
+
+    For example,
+
+        // If the pane is to the right of the target, offset 15px further right for a left-side pointer.
+        // If the pane is to the left of the target, offset -15px further left for a right-side pointer.
+        // If the pane is above the target, offset -30px up for a bottom pointer.
+        // If the pane is below the target, offset 20px down for a top pointer.
+        pointerOffset: [15, -15, -30, 20]
 
     @type Array
-    @default null
+    @default preferType == SC.PICKER_POINTER ? SC.PickerPane.PICKER_POINTER_OFFSET (i.e. [9, -9, -18, 18])
+    @default preferType == SC.PICKER_MENU_POINTER && controlSize == SC.TINY_CONTROL_SIZE ? SC.PickerPane.TINY_PICKER_MENU_POINTER_OFFSET (i.e [9, -9, -18, 18])
+    @default preferType == SC.PICKER_MENU_POINTER && controlSize == SC.SMALL_CONTROL_SIZE ? SC.PickerPane.SMALL_PICKER_MENU_POINTER_OFFSET (i.e [9, -9, -8, 8])
+    @default preferType == SC.PICKER_MENU_POINTER && controlSize == SC.REGULAR_CONTROL_SIZE ? SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET (i.e [9, -9, -12, 12])
+    @default preferType == SC.PICKER_MENU_POINTER && controlSize == SC.LARGE_CONTROL_SIZE ? SC.PickerPane.LARGE_PICKER_MENU_POINTER_OFFSET (i.e [9, -9, -16, 16])
+    @default preferType == SC.PICKER_MENU_POINTER && controlSize == SC.HUGE_CONTROL_SIZE ? SC.PickerPane.HUGE_PICKER_MENU_POINTER_OFFSET (i.e [9, -9, -18, 18])
+    @default preferType == SC.PICKER_MENU_POINTER ? SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET (i.e [9, -9, -12, 12])
   */
   pointerOffset: null,
 
@@ -405,9 +520,28 @@ SC.PickerPane = SC.PalettePane.extend(
   */
   windowPadding: null,
 
-  /* @private Observe the frame for changes so that we can reposition if necessary. */
-  borderFrameDidChange: function () {
+  //@if(debug)
+  // Provide some developer support. People have occasionally been misled by calling `append`
+  // on PickerPanes, which fails to position the pane properly. Hopefully, we can give
+  // them a clue to speed up finding the problem.
+  /** @private SC.Pane */
+  append: function () {
+    if (!this._sc_didUsePopup) {
+      SC.warn("Developer Warning: You should not use .append() with SC.PickerPane. Instead use .popup() and pass in an anchor view or element.");
+    }
+
+    this._sc_didUsePopup = false;
+
+    return sc_super();
+  },
+  //@endif
+
+  /* @private If the pane changes size, reposition as necessary. */
+  viewDidResize: function () {
     this.positionPane(true);
+
+    // Don't forget to call the superclass method.
+    sc_super();
   },
 
   /**
@@ -420,15 +554,8 @@ SC.PickerPane = SC.PalettePane.extend(
     @returns {SC.PickerPane} receiver
   */
   popup: function (anchorViewOrElement, preferType, preferMatrix, pointerOffset) {
-    if (anchorViewOrElement) {
-      if (anchorViewOrElement.isView) {
-        this._anchorView = anchorViewOrElement;
-        this._setupScrollObservers(anchorViewOrElement);
-      } else {
-        this._anchorHTMLElement = anchorViewOrElement;
-      }
-    }
     this.beginPropertyChanges();
+    this.setIfChanged('anchorElement', anchorViewOrElement);
     if (preferType) { this.set('preferType', preferType); }
     if (preferMatrix) { this.set('preferMatrix', preferMatrix); }
     if (pointerOffset) { this.set('pointerOffset', pointerOffset); }
@@ -436,8 +563,10 @@ SC.PickerPane = SC.PalettePane.extend(
     this.positionPane();
     this._hideOverflow();
 
-    // Start observing the frame for changes.
-    this.addObserver('borderFrame', this.borderFrameDidChange);
+    //@if(debug)
+    // A debug-mode only flag to indicate that the popup method was called (see override of append).
+    this._sc_didUsePopup = true;
+    //@endif
 
     return this.append();
   },
@@ -449,74 +578,73 @@ SC.PickerPane = SC.PalettePane.extend(
     fallback to center.
   */
   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'),
+    var frame = this.get('borderFrame'),
+      preferType = this.get('preferType'),
       preferMatrix = this.get('preferMatrix'),
-      layout       = this.get('layout'),
-      origin;
+      origin, adjustHash,
+      anchor, anchorCached, anchorElement;
 
     // 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.
+    anchorCached = this.get('anchorCached');
+    anchorElement = this.get('anchorElement');
+    if (useAnchorCached && anchorCached) {
+      anchor = anchorCached;
+    } else if (anchorElement) {
+      anchor = this.computeAnchorRect(anchorElement);
+      this.set('anchorCached', anchor);
+    } // else no anchor to use
 
     if (anchor) {
-      if (!useAnchorCached) {
-        anchor = this.computeAnchorRect(anchor);
-        this.set('anchorCached', anchor);
-      }
-
       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;
+      // Adjust the origin for offset based positioning.
+      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]);
+          preferMatrix = this.get('preferMatrix');
         }
-      } else {
+
+        // fine-tuned visual alignment from preferMatrix
+        origin.x += ((preferMatrix[2] === 0) ? origin.width : 0) + preferMatrix[0];
+        origin.y += ((preferMatrix[2] === 3) ? origin.height : 0) + preferMatrix[1];
+        break;
+      default:
         origin.y += origin.height;
+        break;
       }
 
       // 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);
+      frame.halfWidth = parseInt(frame.originalWidth * 0.5, 0);
+      frame.halfHeight = parseInt(frame.originalHeight * 0.5, 0);
+
+      frame = this.fitPositionToScreen(origin, frame, anchor);
+      adjustHash = {
+        left: frame.x,
+        top: frame.y,
+        width: frame.width,
+        height: frame.height
+      };
 
-      origin = this.fitPositionToScreen(origin, frame, anchor);
-      this.adjust({
-        width: origin.width,
-        height: origin.height,
-        left: origin.x,
-        top: origin.y
-      });
+      // Adjust.
+      this.adjust(adjustHash);
+    }
     // if no anchor view has been set for some reason, just center.
-    } else {
+    else {
       this.adjust({
-        width: layout.width,
-        height: layout.height,
         centerX: 0,
         centerY: 0
       });
     }
-    this.updateLayout();
 
     return this;
   },
@@ -570,11 +698,11 @@ SC.PickerPane = SC.PalettePane.extend(
   },
 
   /** @private
-    This method will dispatch to the right re-position rule according to preferType
+    This method will dispatch to the correct re-position rule according to preferType
   */
-  fitPositionToScreen: function (preferredPosition, picker, anchor) {
-    var wsize = SC.RootResponder.responder.computeWindowSize(),
-        wret = { x: 0, y: 0, width: wsize.width, height: wsize.height };
+  fitPositionToScreen: function (preferredPosition, frame, anchorFrame) {
+    var windowSize = SC.RootResponder.responder.computeWindowSize(),
+        windowFrame = { x: 0, y: 0, width: windowSize.width, height: windowSize.height };
 
     // if window size is smaller than the minimum size of app, use minimum size.
     var mainPane = SC.RootResponder.responder.mainPane;
@@ -582,32 +710,33 @@ SC.PickerPane = SC.PalettePane.extend(
       var minWidth = mainPane.layout.minWidth,
           minHeight = mainPane.layout.minHeight;
 
-      if (minWidth && wret.width < minWidth) {
-        wret.width = mainPane.layout.minWidth;
+      if (minWidth && windowFrame.width < minWidth) {
+        windowFrame.width = mainPane.layout.minWidth;
       }
 
-      if (minHeight && wret.height < minHeight) {
-        wret.height = mainPane.layout.minHeight;
+      if (minHeight && windowFrame.height < minHeight) {
+        windowFrame.height = mainPane.layout.minHeight;
       }
     }
 
-    picker.x = preferredPosition.x;
-    picker.y = preferredPosition.y;
+    frame.x = preferredPosition.x;
+    frame.y = preferredPosition.y;
 
-    if (this.preferType) {
-      switch (this.preferType) {
+    var preferType = this.get('preferType');
+    if (preferType) {
+      switch (preferType) {
       case SC.PICKER_MENU:
         // apply menu re-position rule
-        picker = this.fitPositionToScreenMenu(wret, picker, this.get('isSubMenu'));
+        frame = this.fitPositionToScreenMenu(windowFrame, frame, this.get('isSubMenu'));
         break;
       case SC.PICKER_MENU_POINTER:
-        this.setupPointer(anchor);
-        picker = this.fitPositionToScreenMenuPointer(wret, picker, anchor);
+        this.setupPointer(anchorFrame);
+        frame = this.fitPositionToScreenMenuPointer(windowFrame, frame, anchorFrame);
         break;
       case SC.PICKER_POINTER:
         // apply pointer re-position rule
-        this.setupPointer(anchor);
-        picker = this.fitPositionToScreenPointer(wret, picker, anchor);
+        this.setupPointer(anchorFrame);
+        frame = this.fitPositionToScreenPointer(windowFrame, frame, anchorFrame);
         break;
       case SC.PICKER_FIXED:
         // skip fitPositionToScreen
@@ -617,52 +746,53 @@ SC.PickerPane = SC.PalettePane.extend(
       }
     } else {
       // apply default re-position rule
-      picker = this.fitPositionToScreenDefault(wret, picker, anchor);
+      frame = this.fitPositionToScreenDefault(windowFrame, frame, anchorFrame);
     }
-    // this.displayDidChange();
-    return picker;
+
+    return frame;
   },
 
   /** @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) {
-    var mx;
+  fitPositionToScreenDefault: function (windowFrame, frame, anchorFrame) {
+    var maximum;
 
     // 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) {
-      mx = Math.max(SC.maxX(a), f.width);
-      f.x = Math.min(mx, w.width) - f.width;
+    if (SC.maxX(frame) > windowFrame.width) {
+      maximum = Math.max(SC.maxX(anchorFrame), frame.width);
+      frame.x = Math.min(maximum, windowFrame.width) - frame.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));
-      if (SC.maxX(f) > w.width) {
-        f.x = Math.max(0, w.width - f.width);
+    if (SC.minX(frame) < 0) {
+      frame.x = SC.minX(Math.max(anchorFrame, 0));
+      if (SC.maxX(frame) > windowFrame.width) {
+        frame.x = Math.max(0, windowFrame.width - frame.width);
       }
     }
 
     // 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);
-      if (mx > w.height) {
-        f.y = Math.max(0, w.height - f.height);
-      } else { f.y = mx; }
+    if (SC.maxY(frame) > windowFrame.height) {
+      maximum = Math.max((anchorFrame.y - frame.height), 0);
+      if (maximum > windowFrame.height) {
+        frame.y = Math.max(0, windowFrame.height - frame.height);
+      } else { frame.y = maximum; }
     }
 
-    // if Top edge is off screen, try to anchor to bottom of anchor. If that
+    // 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);
+    if (SC.minY(frame) < 0) {
+      maximum = Math.min(SC.maxY(anchorFrame), (windowFrame.height - anchorFrame.height));
+      frame.y = Math.max(maximum, 0);
     }
-    return f;
+
+    return frame;
   },
 
   /** @private
@@ -674,44 +804,48 @@ 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, frame, subMenu) {
+    var windowPadding = this.get('windowPadding');
+
     // Set up init location for submenu
     if (subMenu) {
-      paneFrame.x -= this.get('submenuOffsetX');
-      paneFrame.y -= Math.floor(this.get('menuHeightPadding') / 2);
+      frame.x -= this.get('submenuOffsetX');
+      frame.y -= Math.floor(this.get('menuHeightPadding') / 2);
+    }
+
+    // Make sure we are at least the window padding from the left edge of the screen to start.
+    if (frame.x < windowPadding) {
+      frame.x = windowPadding;
     }
 
-    // If the right edge of the pane is within 20 pixels of the right edge
+    // If the right edge of the pane is within the window padding of the right edge
     // of the window, we need to reposition it.
-    if ((paneFrame.x + paneFrame.width) > (windowFrame.width - 20)) {
+    if ((frame.x + frame.width + windowPadding) > windowFrame.width) {
       if (subMenu) {
         // Submenus should be re-anchored to the left of the parent menu
-        paneFrame.x = paneFrame.x - (paneFrame.width * 2);
+        frame.x = frame.x - (frame.width * 2);
       } else {
-        // Otherwise, just position the pane 20 pixels from the right edge
-        paneFrame.x = windowFrame.width - paneFrame.width - 20;
+        // Otherwise, just shift the pane windowPadding pixels from the right edge
+        frame.x = windowFrame.width - frame.width - windowPadding;
       }
     }
 
-    // Make sure we are at least 7 pixels from the left edge of the screen.
-    if (paneFrame.x < 7) { paneFrame.x = 7; }
+    // Make sure we are at least the window padding from the top edge of the screen to start.
+    if (frame.y < windowPadding) {
+      frame.y = windowPadding;
+    }
 
-    if (paneFrame.y < 7) {
-      paneFrame.height += paneFrame.y;
-      paneFrame.y = 7;
+    // If the height of the menu is bigger than the window height, shift it upward.
+    if (frame.y + frame.height + windowPadding > windowFrame.height) {
+      frame.y = Math.max(windowPadding, windowFrame.height - frame.height - windowPadding);
     }
 
-    // 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) {
-        paneFrame.y = SC.MenuPane.VERTICAL_OFFSET;
-        paneFrame.height = windowFrame.height - (SC.MenuPane.VERTICAL_OFFSET * 2);
-      } else {
-        paneFrame.y += (windowFrame.height - (paneFrame.height + paneFrame.y + 35));
-      }
+    // If the height of the menu is still bigger than the window height, resize it.
+    if (frame.y + frame.height + windowPadding > windowFrame.height) {
+      frame.height = windowFrame.height - (2 * windowPadding);
     }
 
-    return paneFrame;
+    return frame;
   },
 
   /** @private
@@ -723,25 +857,25 @@ SC.PickerPane = SC.PalettePane.extend(
 
     @returns {Rect}
   */
-  fitPositionToScreenMenuPointer: function (w, f, a) {
-    f = this.fitPositionToScreenPointer(w, f, a);
+  fitPositionToScreenMenuPointer: function (windowFrame, frame, anchorFrame) {
+    frame = this.fitPositionToScreenPointer(windowFrame, frame, anchorFrame);
 
     // 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 (frame.height + frame.y + 35 >= windowFrame.height) {
+      frame.height = windowFrame.height - frame.y - (SC.MenuPane.VERTICAL_OFFSET * 2);
     }
 
-    return f;
+    return frame;
   },
 
   /** @private
     re-position rule for triangle pointer picker.
   */
-  fitPositionToScreenPointer: function (w, f, a) {
+  fitPositionToScreenPointer: function (windowFrame, frame, anchorFrame) {
     var curType,
         deltas,
-        matrix = this.preferMatrix,
-        offset = this.pointerOffset,
+        matrix = this.get('preferMatrix'),
+        offset = this.get('pointerOffset'),
         topLefts, botRights,
         windowPadding = this.get('windowPadding');
 
@@ -749,37 +883,37 @@ SC.PickerPane = SC.PalettePane.extend(
     // 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],
+      [anchorFrame.x + anchorFrame.width + offset[0], anchorFrame.y + anchorFrame.halfHeight - frame.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],
+      [anchorFrame.x - frame.originalWidth + offset[1], anchorFrame.y + anchorFrame.halfHeight - frame.halfHeight],
 
       // Top left [x, y] if positioned evenly above the anchor
-      [a.x + a.halfWidth - f.halfWidth, a.y - f.height + offset[2]],
+      [anchorFrame.x + anchorFrame.halfWidth - frame.halfWidth, anchorFrame.y - frame.originalHeight + offset[2]],
 
       // Top left [x, y] if positioned evenly below the anchor
-      [a.x + a.halfWidth - f.halfWidth, a.y + a.height + offset[3]]
+      [anchorFrame.x + anchorFrame.halfWidth - frame.halfWidth, anchorFrame.y + anchorFrame.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],
+      [anchorFrame.x + anchorFrame.width + frame.width + offset[0], anchorFrame.y + anchorFrame.halfHeight + frame.halfHeight],
 
       // Bottom right [x, y] if positioned evenly to the left of the anchor
-      [a.x + offset[1], a.y + a.halfHeight + f.halfHeight],
+      [anchorFrame.x + offset[1], anchorFrame.y + anchorFrame.halfHeight + frame.halfHeight],
 
       // Bottom right [x, y] if positioned evenly above the anchor
-      [a.x + a.halfWidth + f.halfWidth, a.y + offset[2]],
+      [anchorFrame.x + anchorFrame.halfWidth + frame.halfWidth, anchorFrame.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]]
+      [anchorFrame.x + anchorFrame.halfWidth + frame.halfWidth, anchorFrame.y + anchorFrame.height + frame.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++) {
+    for (var i = 0, pointerLen = this._sc_pointerLayout.length; i < pointerLen; i++) {
       // The current preferred side.
       curType = matrix[i];
 
@@ -793,8 +927,8 @@ SC.PickerPane = SC.PalettePane.extend(
       // option for positioning.
       deltas = {
         top: topLefts[curType][1] - windowPadding,
-        right: w.width - windowPadding - botRights[curType][0],
-        bottom: w.height - windowPadding - botRights[curType][1],
+        right: windowFrame.width - windowPadding - botRights[curType][0],
+        bottom: windowFrame.height - windowPadding - botRights[curType][1],
         left: topLefts[curType][0] - windowPadding
       };
 
@@ -810,12 +944,12 @@ SC.PickerPane = SC.PalettePane.extend(
           deltas.bottom >= 0 &&
           deltas.left >= 0) {
 
-        f.x = topLefts[curType][0];
-        f.y = topLefts[curType][1];
+        frame.x = topLefts[curType][0];
+        frame.y = topLefts[curType][1];
 
         this.set('pointerPosX', 0);
         this.set('pointerPosY', 0);
-        this.set('pointerPos', SC.POINTER_LAYOUT[curType]);
+        this.set('pointerPos', this._sc_pointerLayout[curType]);
 
         break;
 
@@ -826,17 +960,17 @@ SC.PickerPane = SC.PalettePane.extend(
       } 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.
+                 deltas.top + frame.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;
+        frame.x = topLefts[curType][0];
+        frame.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]);
+        this.set('pointerPos', this._sc_pointerLayout[curType]);
         break;
 
       // If we prefer right or left and can fit right or left respectively, but
@@ -846,17 +980,17 @@ SC.PickerPane = SC.PalettePane.extend(
       } 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.
+                 deltas.bottom + frame.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;
+        frame.x = topLefts[curType][0];
+        frame.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]);
+        this.set('pointerPos', this._sc_pointerLayout[curType]);
         break;
 
       // If we prefer top or bottom and can fit top or bottom respectively, but
@@ -867,17 +1001,17 @@ SC.PickerPane = SC.PalettePane.extend(
       } 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.
+                 deltas.right + frame.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];
+        frame.x = topLefts[curType][0] + deltas.right;
+        frame.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]);
+        this.set('pointerPos', this._sc_pointerLayout[curType]);
         break;
 
       // If we prefer top or bottom and can fit top or bottom respectively, but
@@ -888,17 +1022,17 @@ SC.PickerPane = SC.PalettePane.extend(
       } 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.
+                 deltas.left + frame.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];
+        frame.x = topLefts[curType][0] - deltas.left;
+        frame.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]);
+        this.set('pointerPos', this._sc_pointerLayout[curType]);
         break;
       }
 
@@ -908,17 +1042,16 @@ SC.PickerPane = SC.PalettePane.extend(
     // 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;
+        frame.x = anchorFrame.x + anchorFrame.halfWidth;
+        frame.y = anchorFrame.y + anchorFrame.halfHeight - frame.halfHeight;
 
-        this.set('pointerPos', SC.POINTER_LAYOUT[0] + ' fallback');
-        this.set('pointerPosY', f.halfHeight - 40);
+        this.set('pointerPos', this._sc_pointerLayout[0] + ' fallback');
+        this.set('pointerPosY', frame.halfHeight - 40);
       } else {
-        f.x = topLefts[matrix[4]][0];
-        f.y = topLefts[matrix[4]][1];
+        frame.x = topLefts[matrix[4]][0];
+        frame.y = topLefts[matrix[4]][1];
 
-        this.set('pointerPos', SC.POINTER_LAYOUT[matrix[4]]);
+        this.set('pointerPos', this._sc_pointerLayout[matrix[4]]);
         this.set('pointerPosY', 0);
       }
 
@@ -927,7 +1060,7 @@ SC.PickerPane = SC.PalettePane.extend(
 
     this.invokeLast(this._adjustPointerPosition);
 
-    return f;
+    return frame;
   },
 
   /** @private Measure the pointer element and adjust it by the determined offset. */
@@ -958,12 +1091,12 @@ SC.PickerPane = SC.PalettePane.extend(
     and size if not provided explicitly.
   */
   setupPointer: function (a) {
-    var pointerOffset = this.pointerOffset,
-        K             = SC.PickerPane;
+    var pointerOffset = this.get('pointerOffset'),
+        K = SC.PickerPane;
 
-    // set up pointerOffset according to type and size if not provided explicitly
+    // Set windowPadding and pointerOffset (SC.PICKER_MENU_POINTER only).
     if (!pointerOffset || pointerOffset.length !== 4) {
-      if (this.get('preferType') == SC.PICKER_MENU_POINTER) {
+      if (this.get('preferType') === SC.PICKER_MENU || 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);
@@ -1003,22 +1136,14 @@ SC.PickerPane = SC.PalettePane.extend(
                       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
     // custom matrix not provided explicitly
-    if (!this.preferMatrix || this.preferMatrix.length !== 5) {
+    var preferMatrix = this.get('preferMatrix');
+    if (!preferMatrix || 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)
@@ -1083,7 +1208,11 @@ SC.PickerPane = SC.PalettePane.extend(
   windowSizeDidChange: function (oldSize, newSize) {
     sc_super();
 
-    if (this.repositionOnWindowResize) { this.positionPane(); }
+    if (this.repositionOnWindowResize) {
+      // Do this in the next run loop. This ensures that positionPane is only called once even if scroll view
+      // offsets are changing at the same time as the window is resizing (see _scrollOffsetDidChange below).
+      this.invokeNext(this.positionPane);
+    }
   },
 
   remove: function () {
@@ -1092,9 +1221,6 @@ SC.PickerPane = SC.PalettePane.extend(
     }
     this._removeScrollObservers();
 
-    // Stop observing the frame for changes.
-    this.removeObserver('borderFrame', this.borderFrameDidChange);
-
     return sc_super();
   },
 
@@ -1144,109 +1270,144 @@ SC.PickerPane = SC.PalettePane.extend(
   _setupScrollObservers: function (anchorView) {
     var scrollView = this._getScrollViewOfView(anchorView);
     if (scrollView) {
+      scrollView.addObserver('canScrollHorizontal', this, this._scrollCanScrollHorizontalDidChange);
+      scrollView.addObserver('canScrollVertical', this, this._scrollCanScrollVerticalDidChange);
+
+      // Fire the observers once to initialize them.
+      this._scrollCanScrollHorizontalDidChange(scrollView);
+      this._scrollCanScrollVerticalDidChange(scrollView);
+
+      this._scrollView = scrollView;
+    }
+  },
+
+  /** @private Modify horizontalScrollOffset observer. */
+  _scrollCanScrollHorizontalDidChange: function (scrollView) {
+    if (scrollView.get('canScrollHorizontal')) {
       scrollView.addObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
+    } else {
+      scrollView.removeObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
+    }
+  },
+
+  /** @private Modify verticalScrollOffset observer. */
+  _scrollCanScrollVerticalDidChange: function (scrollView) {
+    if (scrollView.get('canScrollVertical')) {
       scrollView.addObserver('verticalScrollOffset', this, this._scrollOffsetDidChange);
-      this._scrollView = scrollView;
+    } else {
+      scrollView.removeObserver('verticalScrollOffset', this, this._scrollOffsetDidChange);
     }
   },
 
-  /** @private
-    Teardown observers setup in _setupScrollObservers.
-  */
+  /** @private Teardown observers setup in _setupScrollObservers. */
   _removeScrollObservers: function () {
     var scrollView = this._scrollView;
     if (scrollView) {
+      scrollView.removeObserver('canScrollHorizontal', this, this._scrollCanScrollHorizontalDidChange);
+      scrollView.removeObserver('canScrollVertical', this, this._scrollCanScrollVerticalDidChange);
       scrollView.removeObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
       scrollView.removeObserver('verticalScrollOffset', this, this._scrollOffsetDidChange);
     }
   },
 
-  /** @private
-    Reposition pane whenever scroll offsets change.
-  */
+  /** @private Reposition pane whenever scroll offsets change. */
   _scrollOffsetDidChange: function () {
-    this.positionPane();
+    // Filter the observer firing. We don't want to reposition multiple times if both horizontal and vertical
+    // scroll offsets are updating.
+    // Note: do this *after* the current run loop finishes. This allows the scroll view to scroll to
+    // actually move so that the anchor's position is correct before we reposition.
+    this.invokeNext(this.positionPane);
+  },
+
+  /** @private SC.Object */
+  init: function () {
+    sc_super();
+
+    // Set defaults that can only be configured on initialization.
+    if (!this.windowPadding) { this.windowPadding = SC.PickerPane.WINDOW_PADDING; }
+  },
+
+  /** @private SC.Object */
+  destroy: function () {
+    this._scrollView = null;
+    this._anchorView = null;
+    this._anchorHTMLElement = null;
+    return sc_super();
   }
 });
 
-/**
-  Default metrics for the different control sizes.
-*/
 
-/** @static */
-SC.PickerPane.WINDOW_PADDING = 20;
+/** Class methods. */
+SC.PickerPane.mixin( /** @scope SC.PickerPane */ {
 
-/** @static */
-SC.PickerPane.TINY_MENU_WINDOW_PADDING = 12;
+  //---------------------------------------------------------------------------
+  // Constants
+  //
 
-/** @static */
-SC.PickerPane.SMALL_MENU_WINDOW_PADDING = 11;
+  /** @static */
+  WINDOW_PADDING: 20,
 
-/** @static */
-SC.PickerPane.REGULAR_MENU_WINDOW_PADDING = 12;
+  /** @static */
+  TINY_MENU_WINDOW_PADDING: 12,
 
-/** @static */
-SC.PickerPane.LARGE_MENU_WINDOW_PADDING = 17;
+  /** @static */
+  SMALL_MENU_WINDOW_PADDING: 11,
 
-/** @static */
-SC.PickerPane.HUGE_MENU_WINDOW_PADDING = 12;
+  /** @static */
+  REGULAR_MENU_WINDOW_PADDING: 12,
 
-/** @deprecated Version 1.10.  Use SC.PickerPane.WINDOW_PADDING.
-  @static
-*/
-SC.PickerPane.PICKER_EXTRA_RIGHT_OFFSET = 20;
+  /** @static */
+  LARGE_MENU_WINDOW_PADDING: 17,
 
-/** @deprecated Version 1.10.  Use SC.PickerPane.TINY_MENU_WINDOW_PADDING.
-  @static
-*/
-SC.PickerPane.TINY_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
+  /** @static */
+  HUGE_MENU_WINDOW_PADDING: 12,
 
-/** @deprecated Version 1.10.  Use SC.PickerPane.SMALL_MENU_WINDOW_PADDING.
-  @static
-*/
-SC.PickerPane.SMALL_PICKER_MENU_EXTRA_RIGHT_OFFSET = 11;
+  /** @static */
+  PICKER_POINTER_OFFSET: [9, -9, -18, 18],
 
-/** @deprecated Version 1.10.  Use SC.PickerPane.REGULAR_MENU_WINDOW_PADDING.
-  @static
-*/
-SC.PickerPane.REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
+  /** @static */
+  TINY_PICKER_MENU_POINTER_OFFSET: [9, -9, -18, 18],
 
-/** @deprecated Version 1.10.  Use SC.PickerPane.LARGE_MENU_WINDOW_PADDING.
-  @static
-*/
-SC.PickerPane.LARGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 17;
+  /** @static */
+  SMALL_PICKER_MENU_POINTER_OFFSET: [9, -9, -8, 8],
 
-/** @deprecated Version 1.10.  Use SC.PickerPane.HUGE_MENU_WINDOW_PADDING.
-  @static
-*/
-SC.PickerPane.HUGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
+  /** @static */
+  REGULAR_PICKER_MENU_POINTER_OFFSET: [9, -9, -12, 12],
 
-/**
-  @static
-*/
-SC.PickerPane.PICKER_POINTER_OFFSET = [9, -9, -18, 18];
+  /** @static */
+  LARGE_PICKER_MENU_POINTER_OFFSET: [9, -9, -16, 16],
 
-/**
-  @static
-*/
-SC.PickerPane.TINY_PICKER_MENU_POINTER_OFFSET = [9, -9, -18, 18];
+  /** @static */
+  HUGE_PICKER_MENU_POINTER_OFFSET: [9, -9, -18, 18],
 
-/**
-  @static
-*/
-SC.PickerPane.SMALL_PICKER_MENU_POINTER_OFFSET = [9, -9, -8, 8];
+  /** @deprecated Version 1.10.  Use SC.PickerPane.WINDOW_PADDING.
+    @static
+  */
+  PICKER_EXTRA_RIGHT_OFFSET: 20,
 
-/**
-  @static
-*/
-SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET = [9, -9, -12, 12];
+  /** @deprecated Version 1.10.  Use SC.PickerPane.TINY_MENU_WINDOW_PADDING.
+    @static
+  */
+  TINY_PICKER_MENU_EXTRA_RIGHT_OFFSET: 12,
 
-/**
-  @static
-*/
-SC.PickerPane.LARGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -16, 16];
+  /** @deprecated Version 1.10.  Use SC.PickerPane.SMALL_MENU_WINDOW_PADDING.
+    @static
+  */
+  SMALL_PICKER_MENU_EXTRA_RIGHT_OFFSET: 11,
 
-/**
-  @static
-*/
-SC.PickerPane.HUGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -18, 18];
+  /** @deprecated Version 1.10.  Use SC.PickerPane.REGULAR_MENU_WINDOW_PADDING.
+    @static
+  */
+  REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET: 12,
+
+  /** @deprecated Version 1.10.  Use SC.PickerPane.LARGE_MENU_WINDOW_PADDING.
+    @static
+  */
+  LARGE_PICKER_MENU_EXTRA_RIGHT_OFFSET: 17,
+
+  /** @deprecated Version 1.10.  Use SC.PickerPane.HUGE_MENU_WINDOW_PADDING.
+    @static
+  */
+  HUGE_PICKER_MENU_EXTRA_RIGHT_OFFSET: 12
+
+});