sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/fade_transition.js

@@ -16,6 +16,9 @@ SC.mixin(SC.View,
   */
   FADE_IN: {
 
+    /* @private */
+    layoutProperties: ['opacity'],
+
     /** @private */
     setup: function (view, options, inPlace) {
       view.adjust({ opacity: inPlace ? view.get('layout').opacity || 0 : 0 });
@@ -43,6 +46,9 @@ SC.mixin(SC.View,
   */
   FADE_OUT: {
 
+    /* @private */
+    layoutProperties: ['opacity'],
+
     /** @private */
     run: function (view, options) {
       view.animate('opacity', 0, {

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/pop_transition.js

@@ -14,6 +14,10 @@ SC.mixin(SC.View,
     @since Version 1.10
   */
   POP_IN: {
+
+    /* @private */
+    layoutProperties: ['scale'],
+
     /** @private */
     setup: function (view, options, inPlace) {
       view.adjust({ scale: inPlace ? view.get('layout').scale || 0 : 0 });
@@ -55,6 +59,9 @@ SC.mixin(SC.View,
   */
   POP_OUT: {
 
+    /* @private */
+    layoutProperties: ['scale'],
+
     /** @private */
     run: function (view, options) {
       var bigScale,

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/scale_transition.js

@@ -15,6 +15,9 @@ SC.mixin(SC.View,
   */
   SCALE_IN: {
 
+    /* @private */
+    layoutProperties: ['scale'],
+
     /** @private */
     setup: function (view, options, inPlace) {
       view.adjust({ scale: inPlace ? view.get('layout').scale || 0 : 0 });
@@ -41,6 +44,9 @@ SC.mixin(SC.View,
   */
   SCALE_OUT: {
 
+    /* @private */
+    layoutProperties: ['scale'],
+
     /** @private */
     run: function (view, options) {
       view.animate('scale', 0, {

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/slide_transition.js

@@ -16,6 +16,8 @@ SC.mixin(SC.View,
   */
   SLIDE_IN: {
 
+    layoutProperties: ['top', 'bottom', 'left', 'right', 'height', 'width', 'centerX', 'centerY'],
+
     /** @private Starts from outside of parent unless inPlace is true. */
     setup: function (view, options, inPlace) {
       var parentView = view.get('parentView'),
@@ -86,6 +88,8 @@ SC.mixin(SC.View,
   */
   SLIDE_OUT: {
 
+    layoutProperties: ['top', 'bottom', 'left', 'right', 'height', 'width', 'centerX', 'centerY'],
+
     /** @private Starts from current position. */
     setup: function (view, options) {
       var viewFrame = view.get('borderFrame'),

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/swap_dissolve_transition.js

@@ -52,7 +52,9 @@ SC.mixin(SC.ContainerView,
           duration: options.duration || 0.4,
           timing: options.timing || 'ease'
         }, function (data) {
-          statechart.exited();
+          if (!data.isCancelled) {
+            statechart.exited();
+          }
         });
       }
     },

data/lib/frameworks/sproutcore/frameworks/foundation/validators/credit_card.js

@@ -8,15 +8,15 @@
 sc_require('validators/validator') ;
 
 /** @class
-  Validate a field value as a credit card number. 
-  
+  Validate a field value as a credit card number.
+
   This validator will perform a basic check to ensure the credit card number
   is mathematically valid.  It will also accept numbers with spaces, dashes
-  or other punctuation.  
-  
+  or other punctuation.
+
   Converted credit card numbers are broken into units of 4.
-  
-  Basic credit card validation courtesy David Leppek 
+
+  Basic credit card validation courtesy David Leppek
   (https://www.azcode.com/Mod10)
 
   @extends SC.Validator
@@ -41,30 +41,30 @@ SC.Validator.CreditCard = SC.Validator.extend(
   objectForFieldValue: function(value, form, field) {
     return value.replace(/[\s-\.\:]/g,'') ;
   },
-  
-  validate: function(form, field) { 
-    return this.checkNumber(field.get('fieldValue')) ; 
+
+  validate: function(form, field) {
+    return this.checkNumber(field.get('fieldValue')) ;
   },
-  
+
   validateError: function(form, field) {
     var label = field.get('errorLabel') || 'Field' ;
     return SC.$error(SC.String.loc("Invalid.CreditCard(%@)", label), label);
   },
-  
-  /** 
-    Allow only numbers, dashes, and spaces 
+
+  /**
+    Allow only numbers, dashes, and spaces
   */
   validateKeyDown: function(form, field, charStr) {
     return !!charStr.match(/[0-9\- ]/);
   },
-  
+
   checkNumber: function(ccNumb) {
-    
+
     if (!ccNumb || ccNumb.length===0) return YES; // do not validate empty
-    
+
     // remove any spaces or dashes
     ccNumb = ccNumb.replace(/[^0-9]/g,'');
-    
+
     var valid = "0123456789";  // Valid digits in a credit card number
     var len = ccNumb.length;  // The length of the submitted cc number
     var iCCN = parseInt(ccNumb,0);  // integer of ccNumb
@@ -82,11 +82,11 @@ SC.Validator.CreditCard = SC.Validator.extend(
       if (valid.indexOf(temp) == "-1"){bNum = false;}
     }
 
-    // if it is NOT a number, you can either alert to the fact, 
+    // if it is NOT a number, you can either alert to the fact,
     // or just pass a failure
     if(!bNum) bResult = false;
 
-    // Determine if it is the proper length 
+    // Determine if it is the proper length
     if((len === 0)&&(bResult)){  // nothing, field is blank AND passed above # check
       bResult = false;
     } else{  // ccNumb is a number and the proper length - let's see if it is a valid card number
@@ -108,7 +108,7 @@ SC.Validator.CreditCard = SC.Validator.extend(
             case 16: calc = 7; break;       //8*2=16 & 1+6 = 7
             case 18: calc = 9; break;       //9*2=18 & 1+8 = 9
             default: calc = calc;           //4*2= 8 &   8 = 8  -same for all lower numbers
-          }                                               
+          }
         iCCN = iCCN / 10;  // subtracts right most digit from ccNum
         iTotal += calc;  // running total of the card number as we loop
       }  // END OF LOOP
@@ -121,5 +121,5 @@ SC.Validator.CreditCard = SC.Validator.extend(
     }
     return bResult; // Return the results
   }
-    
+
 }) ;

data/lib/frameworks/sproutcore/frameworks/foundation/views/container.js

@@ -189,6 +189,22 @@ SC.ContainerView = SC.View.extend(
         this.set('nowShowing', view);
       }
     }
+
+    // Observe for changes to the content view and initialize once.
+    this.addObserver('contentView', this, this._sc_contentViewDidChange);
+    this._sc_contentViewDidChange();
+  },
+
+  /** @private Cancels the active transition. */
+  _sc_cancelTransitions: function () {
+    var contentStatecharts = this._contentStatecharts;
+
+    // Exit all the statecharts immediately. This mutates the array!
+    if (contentStatecharts) {
+      for (var i = contentStatecharts.length - 1; i >= 0; i--) {
+        contentStatecharts[i].doExit(true);
+      }
+    }
   },
 
   /** @private
@@ -223,20 +239,24 @@ SC.ContainerView = SC.View.extend(
     call replaceContent.  Override replaceContent to change how the view is
     swapped out.
   */
-  contentViewDidChange: function () {
-    this.replaceContent(this.get('contentView'));
-  }.observes('contentView'),
+  _sc_contentViewDidChange: function () {
+    var contentView = this.get('contentView');
+
+    // If it's an uninstantiated view, then attempt to instantiate it.
+    if (contentView && contentView.kindOf(SC.CoreView)) {
+      contentView = this.createChildView(contentView);
+    }
+
+    this.replaceContent(contentView);
+  },
 
   /** @private */
   destroy: function () {
-    var contentStatecharts = this._contentStatecharts;
+    // Clean up observers.
+    this.removeObserver('contentView', this, this._sc_contentViewDidChange);
 
-    // Exit all the statecharts immediately. This mutates the array!
-    if (contentStatecharts) {
-      for (var i = contentStatecharts.length - 1; i >= 0; i--) {
-        contentStatecharts[i].doExit(true);
-      }
-    }
+    // Cancel any active transitions.
+    this._sc_cancelTransitions();
 
     // Remove our internal reference to the statecharts.
     this._contentStatecharts = this._currentStatechart = null;
@@ -255,20 +275,34 @@ SC.ContainerView = SC.View.extend(
 
     // If it's a string, try to turn it into the object it references...
     if (SC.typeOf(content) === SC.T_STRING && content.length > 0) {
-      if (content.indexOf('.') > 0) {
-        content = SC.objectForPropertyPath(content);
-      } else {
-        var tempContent = this.getPath(content);
+      var dotspot = content.indexOf('.');
+      // No dot means a local property, either to this view or this view's page.
+      if (dotspot === -1) {
+        var tempContent = this.get(content);
         content = SC.kindOf(tempContent, SC.CoreView) ? tempContent : SC.objectForPropertyPath(content, this.get('page'));
       }
+      // Dot at beginning means local property path.
+      else if (dotspot === 0) {
+        content = this.getPath(content.slice(1));
+      }
+      // Dot after the beginning
+      else {
+        content = SC.objectForPropertyPath(content);
+      }
     }
 
     // If it's an uninstantiated view, then attempt to instantiate it.
     if (content && content.kindOf(SC.CoreView)) {
       content = this.createChildView(content);
-    } else {
+    }
+
+    //@if(debug)
+    // Prevent developers from assigning non-view content to a container.
+    if (content && !SC.kindOf(content, SC.CoreView)) {
+      SC.error("Developer Error: You should not assign non-View content to an SC.ContainerView.");
       content = null;
     }
+    //@endif
 
     // Sets the content.
     this.set('contentView', content);
@@ -351,6 +385,22 @@ SC.ContainerView = SC.View.extend(
 
     // Track the current statechart.
     this._currentStatechart = newStatechart;
+  },
+
+  /** @private SC.Observable.prototype */
+  set: function (key, value) {
+
+    // Changing the transitionSwap in the middle of a transition must cancel the transitions.
+    if (key === 'transitionSwap' && this.get('isTransitioning')) {
+      //@if(debug)
+      SC.warn("Developer Warning: You should not change the value of transitionSwap on %@ while the container view is transitioning. The transition was cancelled.".fmt(this));
+      //@endif
+
+      // Cancel the active transitions.
+      this._sc_cancelTransitions();
+    }
+
+    return sc_super();
   }
 
 });

data/lib/frameworks/sproutcore/frameworks/foundation/views/image.js

@@ -54,10 +54,12 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
 
   displayProperties: ['align', 'scale', 'value', 'displayToolTip'],
 
+  /** @private */
   renderDelegateName: function () {
     return (this.get('useCanvas') ? 'canvasImage' : 'image') + "RenderDelegate";
   }.property('useCanvas').cacheable(),
 
+  /** @private */
   tagName: function () {
     return this.get('useCanvas') ? 'canvas' : 'div';
   }.property('useCanvas').cacheable(),
@@ -145,7 +147,7 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
   */
   useCanvas: function () {
     return SC.platform.supportsCanvas && !this.get('useStaticLayout');
-  }.property('useStaticLayout', 'type').cacheable(),
+  }.property('useStaticLayout').cacheable(),
 
   /**
     If YES, image view will use the SC.imageQueue to control loading.  This
@@ -174,6 +176,7 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
     @type String
   */
   value: null,
+  valueBindingDefault: SC.Binding.oneWay(),
 
   /**
     Recalculate our innerFrame if the outer frame has changed.

data/lib/frameworks/sproutcore/frameworks/foundation/views/label.js

@@ -150,7 +150,7 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
   autoResizeText: function() { return this.get('displayTitle'); }
   .property('displayTitle').cacheable(),
 
-  autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 10),
+  autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', { height: 0, width: 10 }),
 
   /**
     The name of the theme's SC.LabelView render delegate.

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -7,7 +7,6 @@
 
 sc_require('views/field');
 sc_require('system/text_selection');
-sc_require('mixins/static_layout');
 sc_require('mixins/editable');
 
 SC.AUTOCAPITALIZE_NONE = 'none';
@@ -34,10 +33,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     Walk like a duck.
 
     @type Boolean
-    @default YES
+    @default true
     @readOnly
    */
-  isTextField: YES,
+  isTextField: true,
 
   // ..........................................................
   // PROPERTIES
@@ -47,46 +46,37 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     When `applyImmediately` is turned on, every keystroke will set the value
     of the underlying object. Turning it off will only set the value on blur.
 
-    @type String
-    @default YES
+    @type Boolean
+    @default true
    */
-  applyImmediately: YES,
+  applyImmediately: true,
 
   /**
     Flag indicating whether the editor should automatically commit if you click
     outside it.
 
     @type Boolean
-    @default YES
-   */
-  commitOnBlur: YES,
-
-  /** @deprecated
-    If `YES`, the field will hide its text from display.
-    This value is deprecated. Please use `type` instead to `"password"`.
-
-    @type Boolean
-    @default NO
+    @default true
    */
-  isPassword: NO,
+  commitOnBlur: true,
 
   /**
-    If `YES` then allow multi-line input.  This will also change the default
+    If `true` then allow multi-line input.  This will also change the default
     tag type from "input" to "textarea".  Otherwise, pressing return will
     trigger the default insertion handler.
 
     @type Boolean
-    @default NO
+    @default false
    */
-  isTextArea: NO,
+  isTextArea: false,
 
   /**
     Whether the text field is currently focused.
 
     @type Boolean
-    @default NO
+    @default false
    */
-  focused: NO,
+  focused: false,
 
   /**
     The hint to display while the field is not active.
@@ -105,18 +95,18 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   type: 'text',
 
   /**
-    This property will set a tabindex="-1" on your view if set to NO.
+    This property will set a tabindex="-1" on your view if set to false.
 
     This gives us control over the native tabbing behavior. When nextValidKeyView
     reaches the end of the views in the pane views tree, it won't go to a textfield
     that can accept the default tabbing behavior in any other pane. This was a
     problem when you had an alert on top of a mainPane with textfields.
 
-    Modal panes set this to NO on all textfields that don't belong to itself.
+    Modal panes set this to false on all textfields that don't belong to itself.
     @type Boolean
-    @default YES
+    @default true
    */
-  isBrowserFocusable: YES,
+  isBrowserFocusable: true,
 
   /**
     Whether the browser should automatically correct the input.
@@ -125,9 +115,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     the system defaults.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  autoCorrect: YES,
+  autoCorrect: true,
 
   /**
     Specifies the autocapitalization behavior.
@@ -140,8 +130,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
      - `SC.AUTOCAPITALIZE_WORDS` -- Autocapitalize the first letter of each word.
      - `SC.AUTOCAPITALIZE_CHARACTERS` -- Autocapitalize all characters.
 
-    Boolean values are also supported, with YES interpreted as
-    `SC.AUTOCAPITALIZE_NONE` and NO as `SC.AUTOCAPITALIZE_SENTENCES`.
+    Boolean values are also supported, with `true` interpreted as
+    `SC.AUTOCAPITALIZE_NONE` and `false` as `SC.AUTOCAPITALIZE_SENTENCES`.
 
     When `autoCapitalize` is set to `null`, the browser will use
     the system defaults.
@@ -152,70 +142,85 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   autoCapitalize: SC.CAPITALIZE_SENTENCES,
 
   /**
-    Localizes the hint if necessary.
+    Whether the browser should automatically complete the input.
+
+    When `autoComplete` is set to `null`, the browser will use
+    the system defaults.
+
+    @type Boolean
+    @default null
+   */
+  autoComplete: null,
+
+  /**
+    Localizes and escapes the hint if necessary.
 
     @field
     @type String
    */
   formattedHint: function () {
     var hint = this.get('hint');
-    return typeof(hint) === 'string' && this.get('localize') ? SC.String.loc(hint) : hint;
+    hint = typeof(hint) === 'string' && this.get('localize') ? SC.String.loc(hint) : hint;
+
+    // If the hint is appended via an overlay, ensure that the text is escaped in order to avoid XSS attacks.
+    if (this.get('useHintOverlay')) {
+      hint = this.get('escapeHTML') ? SC.RenderContext.escapeHTML(hint) : hint;
+    }
+
+    return hint;
   }.property('hint', 'localize').cacheable(),
 
   /**
-    Whether to show the hint while the field has focus.
-    If `YES`, it will disappear as soon as any character is in the field.
+    Whether to show the hint while the field still has focus.
+
+    While newer versions of Safari, Firefox and Chrome will act this way using the
+    placeholder attribute, other browsers will not. By setting this property
+    to true, we can ensure that the hint will always appear even when the
+    field has focus.
+
+    Note: If `hintOnFocus` is false, this doesn't necessarily mean that the
+    hint will disappear on focus, because some browsers will still not remove
+    the placeholder on focus when empty.
+
+    *Important:* You can not modify this property once the view has been rendered.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  hintOnFocus: YES,
+  hintOnFocus: true,
 
   /**
     Whether the hint should be localized or not.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  localize: YES,
+  localize: true,
 
   /**
-    If `YES` then the text field is currently editing.
+    If `true` then the text field is currently editing.
 
     @type Boolean
-    @default NO
+    @default false
    */
-  isEditing: NO,
+  isEditing: false,
 
   /**
     If you set this property to false the tab key won't trigger its default
     behavior (tabbing to the next field).
 
     @type Boolean
-    @default YES
+    @default true
    */
-  defaultTabbingEnabled: YES,
+  defaultTabbingEnabled: true,
 
   /**
     Enabled context menu for textfields.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  isContextMenuEnabled: YES,
-
-  /**
-    @deprecated Use #applyImmediately instead.
-
-    If true, every change to the text in the text field updates `value`.
-    If false, `value` is only updated when commitEditing() is called (this
-    is called automatically when the text field loses focus), or whenever
-    the return key is pressed while editing the field.
-
-    @type Boolean
-    @default null
-   */
-  continuouslyUpdatesValue: null,
+  isContextMenuEnabled: true,
 
   /**
     If no, will not allow transform or validation errors (SC.Error objects)
@@ -223,9 +228,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     to its previous value.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  allowsErrorAsValue: YES,
+  allowsErrorAsValue: true,
 
   /**
     An optional view instance, or view class reference, which will be visible
@@ -283,9 +288,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  spellCheckEnabled: YES,
+  spellCheckEnabled: true,
 
   /**
     Maximum amount of characters this field will allow.
@@ -299,9 +304,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     Whether to render a border or not.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  shouldRenderBorder: YES,
+  shouldRenderBorder: true,
 
   // ..........................................................
   // SUPPORT FOR AUTOMATIC RESIZING
@@ -310,10 +315,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   /**
     Text fields support auto resizing.
     @type Boolean
-    @default YES
+    @default true
     @see SC.AutoResize#supportsAutoResize
    */
-  supportsAutoResize: YES,
+  supportsAutoResize: true,
 
   /**
     The layer to automatically resize.
@@ -343,37 +348,16 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
    */
   autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 20),
 
-  /** @private
-    Whether to show hint or not.
-   */
-  _hintON: YES,
-
-  init: function () {
-    var val = this.get('value');
-    this._hintON = ((!val || val && val.length === 0) && !this.get('hintOnFocus')) ? YES : NO;
-
-    var continuouslyUpdatesValue = this.get('continouslyUpdatesValue');
-    if (continuouslyUpdatesValue !== null && continuouslyUpdatesValue !== undefined) {
-      this.set('applyImmediately',  continuouslyUpdatesValue);
-
-      // @if (debug)
-      SC.Logger.warn("SC.TextFieldView#continuouslyUpdatesValue is deprecated. Please use #applyImmediately instead.");
-      // @endif
-    }
-
-    return sc_super();
-  },
-
   /**
     This property indicates if the value in the text field can be changed.
-    If set to `NO`, a `readOnly` attribute will be added to the DOM Element.
+    If set to `false`, a `readOnly` attribute will be added to the DOM Element.
 
-    Note if `isEnabledInPane` is `NO` this property will have no effect.
+    Note if `isEnabledInPane` is `false` this property will have no effect.
 
     @type Boolean
-    @default YES
+    @default true
    */
-  isEditable: YES,
+  isEditable: true,
 
   /**
     The current selection of the text field, returned as an SC.TextSelection
@@ -388,6 +372,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
    */
   selection: function (key, value) {
     var element = this.$input()[0],
+        direction = 'none',
         range, start, end;
 
     // Are we being asked to set the value, or return the current value?
@@ -402,12 +387,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         } else {
           // In IE8, input elements don't have hasOwnProperty() defined.
           try {
-            if ('selectionStart' in element) {
+            if (SC.platform.input.selectionStart) {
               start = element.selectionStart;
             }
-            if ('selectionEnd' in element) {
+            if (SC.platform.input.selectionEnd) {
               end = element.selectionEnd;
             }
+            if (SC.platform.input.selectionDirection) {
+              direction = element.selectionDirection;
+            }
           }
           // In Firefox when you ask the selectionStart or End of a hidden
           // input, sometimes it throws a weird error.
@@ -446,7 +434,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
           }
         }
 
-        return SC.TextSelection.create({ start: start, end: end });
+        return SC.TextSelection.create({ start: start, end: end, direction: direction });
       } else {
         return null;
       }
@@ -459,7 +447,18 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
       if (element) {
         if (element.setSelectionRange) {
-          element.setSelectionRange(value.get('start'), value.get('end'));
+          try {
+            element.setSelectionRange(value.get('start'), value.get('end'), value.get('direction'));
+          } catch (e) {
+            // In Firefox & IE when you call setSelectionRange on a hidden input it will throw weird
+            // errors. Adding this to just ignore it.
+            return null;
+          }
+
+          if (!SC.platform.input.selectionDirection) {
+            // Browser doesn't support selectionDirection, set it to 'none' so the wrong value is not cached.
+            value.set('direction', 'none');
+          }
         } else {
           // Support Internet Explorer.
           range = element.createTextRange();
@@ -480,6 +479,29 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     // whenever the field's value changes.
   }.property('fieldValue').cacheable(),
 
+  /**
+    Whether or not the text field view will use an overlaid label for the hint.
+
+    There are two conditions that will result in the text field adding an
+    overlaid label for the hint. The first is when the `hintOnFocus` property is
+    true. This allows the user to focus the text field and still see the hint
+    text while there is no value in the field. Since some browsers clear the
+    placeholder when the field has text, this is a way to ensure the same
+    behavior across all browsers.
+
+    The second is when the browser doesn't support the placeholder attribute
+    (i.e. < IE 10). By using an overlaid label rather than inserting the hint
+    into the input, we are able to show clear text hints over password fields.
+
+    @field
+    @type Boolean
+    @default true
+    @readonly
+  */
+  useHintOverlay: function () {
+    return this.get('hintOnFocus') || !SC.platform.input.placeholder;
+  }.property().cacheable(),
+
   // ..........................................................
   // INTERNAL SUPPORT
   //
@@ -488,7 +510,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   // SC.Control. It is not a display property directly in SC.Control, because the use of it in
   // SC.Control is only applied to input fields, which very few consumers of SC.Control have.
   // TODO: Pull the disabled attribute updating out of SC.Control.
-  displayProperties: ['isBrowserFocusable', 'formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'isEnabledInPane', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
+  displayProperties: ['isBrowserFocusable', 'formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'isEnabledInPane',
+                      'leftAccessoryView', 'rightAccessoryView', 'isTextArea', 'maxLength'],
 
   createChildViews: function () {
     sc_super();
@@ -598,11 +621,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     force the field render to render like the firsttime to avoid writing extra
     code. This can be useful also
    */
-  _forceRenderFirstTime: NO,
+  _forceRenderFirstTime: false,
 
   /** @private */
   _renderFieldLikeFirstTime: function () {
-    this.set('_forceRenderFirstTime', YES);
+    this.set('_forceRenderFirstTime', true);
   }.observes('isTextArea'),
 
   /** @private */
@@ -611,17 +634,17 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     //        here, but currently SC.RenderContext will render sibling
     //        contexts as parent/child.
     var hint = this.get('formattedHint'),
-      hintOnFocus = this.get('hintOnFocus'),
-      hintString = '',
+      hintAttr = '',
       maxLength = this.get('maxLength'),
       isTextArea = this.get('isTextArea'),
       isEnabledInPane = this.get('isEnabledInPane'),
       isEditable = this.get('isEditable'),
       autoCorrect = this.get('autoCorrect'),
       autoCapitalize = this.get('autoCapitalize'),
+      autoComplete = this.get('autoComplete'),
       isBrowserFocusable = this.get('isBrowserFocusable'),
       spellCheckString = '', autocapitalizeString = '', autocorrectString = '',
-      activeStateString = '', browserFocusableString = '',
+      autocompleteString = '', activeStateString = '', browserFocusableString = '',
       name, adjustmentStyle, type, paddingElementStyle,
       fieldClassNames, isOldSafari;
 
@@ -635,7 +658,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
 
     if (firstTime || this._forceRenderFirstTime) {
-      this._forceRenderFirstTime = NO;
+      this._forceRenderFirstTime = false;
       activeStateString = isEnabledInPane ? (isEditable ? '' : ' readonly="readonly"') : ' disabled="disabled"';
       name = this.get('layerId');
 
@@ -653,13 +676,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         }
       }
 
-      if (!isBrowserFocusable) {
-        browserFocusableString = ' tabindex="-1"';
+      if (!SC.none(autoComplete)) {
+        autocompleteString = ' autocomplete=' + (!autoComplete ? '"off"' : '"on"');
       }
 
-        // if hint is on and we don't want it to show on focus, create one
-      if (SC.platform.input.placeholder && !hintOnFocus) {
-        hintString = ' placeholder="' + hint + '"';
+      if (!isBrowserFocusable) {
+        browserFocusableString = ' tabindex="-1"';
       }
 
       if (this.get('shouldRenderBorder')) context.push('<div class="border"></div>');
@@ -676,15 +698,16 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       context.push('<div class="padding" ' + adjustmentStyle + '>');
 
       value = this.get('escapeHTML') ? SC.RenderContext.escapeHTML(value) : value;
-      if (this._hintON && !SC.platform.input.placeholder && (!value || (value && value.length === 0))) {
-        value = hint;
-        context.setClass('sc-hint', YES);
-      }
 
-      if (hintOnFocus) {
-        var hintStr = '<div aria-hidden="true" class="hint ' +
+      // When hintOnFocus is true or the field doesn't support placeholders, ensure that a hint appears by adding an overlay hint element.
+      if (this.get('useHintOverlay')) {
+        var hintOverlay = '<div aria-hidden="true" class="hint ' +
                       (isTextArea ? '':'ellipsis') + '%@">' + hint + '</div>';
-        context.push(hintStr.fmt(value ? ' sc-hidden': ''));
+        context.push(hintOverlay.fmt(value ? ' sc-hidden': ''));
+
+      // Use the input placeholder attribute for the hint.
+      } else {
+        hintAttr = ' placeholder="' + hint + '"';
       }
 
       fieldClassNames = "field";
@@ -692,36 +715,30 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       // Render the input/textarea field itself, and close off the padding.
       if (isTextArea) {
         context.push('<textarea aria-label="' + hint + '" class="' + fieldClassNames + '" aria-multiline="true"' +
-                      '" name="' + name + '"' + activeStateString + hintString +
+                      '" name="' + name + '"' + activeStateString + hintAttr +
                       spellCheckString + autocorrectString + autocapitalizeString +
                       browserFocusableString + ' maxlength="' + maxLength +
                       '">' + value + '</textarea></div>');
       } else {
         type = this.get('type');
-
-        // Internet Explorer won't let us change the type attribute later
-        // so we force it to password if needed now, or if the value is not the hint
-        if (this.get('isPassword')) {
-          // @if (debug)
-          SC.Logger.warn("SC.TextFieldView#isPassword is deprecated. Please set SC.TextFieldView#type to password instead.");
-          // @endif
-
-          type = 'password';
-        }
-
         context.push('<input aria-label="' + hint + '" class="' + fieldClassNames + '" type="' + type +
-                      '" name="' + name + '"' + activeStateString + hintString +
+                      '" name="' + name + '"' + activeStateString + hintAttr +
                       spellCheckString + autocorrectString + autocapitalizeString +
-                      browserFocusableString + ' maxlength="' + maxLength +
+                      autocompleteString + browserFocusableString + ' maxlength="' + maxLength +
                       '" value="' + value + '"' + '/></div>');
       }
     } else {
       var input = this.$input(),
-        element = input[0],
-        val = this.get('value');
+        element = input[0];
 
-      if (hintOnFocus) context.$('.hint')[0].innerHTML = hint;
-      else if (!hintOnFocus) element.placeholder = hint;
+      // Update the hint. If the overlay hint was used, update it.
+      if (this.get('useHintOverlay')) {
+        context.$('.hint')[0].innerHTML = hint;
+      } else {
+        input.attr('placeholder', hint);
+      }
+
+      input.attr('maxLength', maxLength);
 
       // IE8 has problems aligning the input text in the center
       // This is a workaround for centering it.
@@ -729,24 +746,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         input.css('line-height', this.get('frame').height + 'px');
       }
 
-      if (!val || (val && val.length === 0)) {
-        if (this.get('isPassword')) { element.type = 'password'; }
-
-        if (!SC.platform.input.placeholder && this._hintON) {
-          if (!this.get('isFirstResponder')) {
-            // Internet Explorer doesn't allow you to modify the type afterwards
-            // jQuery throws an exception as well, so set attribute directly
-            context.setClass('sc-hint', YES);
-            input.val(hint);
-          } else {
-            // Internet Explorer doesn't allow you to modify the type afterwards
-            // jQuery throws an exception as well, so set attribute directly
-            context.setClass('sc-hint', NO);
-            input.val('');
-          }
-        }
-      }
-
       if (!SC.none(autoCorrect)) {
         input.attr('autocorrect', !autoCorrect ? 'off' : 'on');
       } else {
@@ -763,7 +762,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         input.attr('autocapitalize', null);
       }
 
-      if (!hintOnFocus && SC.platform.input.placeholder) input.attr('placeholder', hint);
+      if (!SC.none(autoComplete)) {
+        input.attr('autoComplete', !autoComplete ? 'off' : 'on');
+      } else {
+        input.attr('autoComplete', null);
+      }
 
       if (isBrowserFocusable) {
         input.removeAttr('tabindex');
@@ -837,7 +840,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   didCreateLayer: function () {
     sc_super();
 
-    if (!SC.platform.input.placeholder) this.invokeLast(this._setInitialPlaceHolderIE);
     // For some strange reason if we add focus/blur events to textarea
     // inmediately they won't work. However if I add them at the end of the
     // runLoop it works fine.
@@ -862,14 +864,14 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   /**
     SC.View view state callback.
 
-    Once the view is appended, fix up the text layout to sc-hints and inputs.
+    Once the view is appended, fix up the text layout to hint and input.
   */
   didAppendToDocument: function () {
     this._fixupTextLayout();
   },
 
   /** @private
-    Apply proper text layout to sc-hints and inputs.
+    Apply proper text layout to hint and input.
    */
   _fixupTextLayout: function () {
     var height = this.get('frame').height;
@@ -879,26 +881,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       this.$input().css('line-height', height + 'px');
     }
 
-    if (this.get('hintOnFocus') && !this.get('isTextArea')) {
+    if (this.get('useHintOverlay') && !this.get('isTextArea')) {
       var hintJQ = this.$('.hint');
 
       hintJQ.css('line-height', hintJQ.outerHeight() + 'px');
     }
   },
 
-  /** @private
-    Set initial placeholder for IE
-   */
-  _setInitialPlaceHolderIE: function () {
-    if (!SC.platform.input.placeholder && this._hintON) {
-      var input = this.$input(),
-          currentValue = input.val();
-      if (!currentValue || (currentValue && currentValue.length === 0)) {
-        input.val(this.get('formattedHint'));
-      }
-    }
-  },
-
   /** @private
     Adds all the textarea events. This functions is called by didCreateLayer
     at different moments depending if it is a textarea or not. Appending
@@ -938,12 +927,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   */
   _textField_fieldDidFocus: function (evt) {
     SC.run(function () {
-      this.set('focused', YES);
+      this.set('focused', true);
       this.fieldDidFocus(evt);
-      var val = this.get('value');
-      if (!SC.platform.input.placeholder && ((!val) || (val && val.length === 0))) {
-        this._hintON = NO;
-      }
     }, this);
   },
 
@@ -952,15 +937,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
    */
   _textField_fieldDidBlur: function (evt) {
     SC.run(function () {
-      this.set('focused', NO);
+      this.set('focused', false);
       // passing the original event here instead that was potentially set from
       // losing the responder on the inline text editor so that we can
       // use it for the delegate to end editing
       this.fieldDidBlur(this._origEvent || evt);
-      var val = this.get('value');
-      if (!SC.platform.input.placeholder && !this.get('hintOnFocus') && ((!val) || (val && val.length === 0))) {
-        this._hintON = YES;
-      }
     }, this);
   },
 
@@ -1004,9 +985,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   _field_fieldValueDidChange: function (evt) {
     if (this.get('focused')) {
       SC.run(function () {
-        this.fieldValueDidChange(NO);
+        this.fieldValueDidChange(false);
       }, this);
     }
+
     this.updateHintOnFocus();
   },
 
@@ -1028,10 +1010,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     Make sure to update visibility of hint if it changes
    */
   updateHintOnFocus: function () {
-    // if there is a value in the field, hide the hint
-    var hintOnFocus = this.get('hintOnFocus');
-    if (!hintOnFocus) return;
+    // Fast path. If we aren't using the hind overlay, do nothing.
+    if (!this.get('useHintOverlay')) return;
 
+    // If there is a value in the field, hide the hint.
     if (this.getFieldValue()) {
       this.$('.hint').addClass('sc-hidden');
     } else {
@@ -1142,7 +1124,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
   /** @private */
   keyDown: function (evt) {
-    return this.interpretKeyEvents(evt) || NO;
+    return this.interpretKeyEvents(evt) || false;
   },
 
   /** @private */
@@ -1155,16 +1137,16 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     if (!SC.platform.input.maxlength && this.get('isTextArea')) {
       var val = this.get('value');
 
-      // This code is nasty. It's thanks gecko .keycode table that has charters like & with the same keycode as up arrow key
+      // This code is nasty. It's thanks to Gecko .keycode table that has characters like '&' with the same keycode as up arrow key
       if (val && ((!SC.browser.isMozilla && which > 47) ||
                   (SC.browser.isMozilla && ((which > 32 && which < 43) || which > 47) && !(keyCode > 36 && keyCode < 41))) &&
           (val.length >= this.get('maxLength'))) {
         maxLengthReached = true;
       }
     }
-    // validate keyDown...
-    // do not validate on touch, as it prevents return.
-    if ((this.performValidateKeyDown(evt) || SC.platform.touch) && !maxLengthReached) {
+
+    // Validate keyDown...
+    if (this.performValidateKeyDown(evt) && !maxLengthReached) {
       evt.allowDefault();
     } else {
       evt.stop();
@@ -1177,7 +1159,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       this._fieldValueDidChangeTimer = this.invokeLater(this.fieldValueDidChange, 10);
     }
 
-    return YES;
+    return true;
   },
 
   /** @private */
@@ -1192,7 +1174,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     var view = this.get('nextValidKeyView');
     if (view) view.becomeFirstResponder();
     else evt.allowDefault();
-    return YES; // handled
+    return true; // handled
   },
 
   /** @private */
@@ -1207,7 +1189,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     var view = this.get('previousValidKeyView');
     if (view) view.becomeFirstResponder();
     else evt.allowDefault();
-    return YES; // handled
+    return true; // handled
   },
 
   /**
@@ -1220,57 +1202,57 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   insertNewline: function (evt) {
     if (this.get('isTextArea') || evt.isIMEInput) {
       evt.allowDefault();
-      return YES; // handled
+      return true; // handled
     }
-    return NO;
+    return false;
   },
 
   /** @private */
   deleteForward: function (evt) {
     evt.allowDefault();
-    return YES;
+    return true;
   },
 
   /** @private */
   deleteBackward: function (evt) {
     evt.allowDefault();
-    return YES;
+    return true;
   },
 
   /** @private */
   moveLeft: function (evt) {
     evt.allowDefault();
-    return YES;
+    return true;
   },
 
   /** @private */
   moveRight: function (evt) {
     evt.allowDefault();
-    return YES;
+    return true;
   },
 
   /** @private */
   selectAll: function (evt) {
     evt.allowDefault();
-    return YES;
+    return true;
   },
 
   /** @private */
   moveUp: function (evt) {
     if (this.get('isTextArea')) {
       evt.allowDefault();
-      return YES;
+      return true;
     }
-    return NO;
+    return false;
   },
 
   /** @private */
   moveDown: function (evt) {
     if (this.get('isTextArea')) {
       evt.allowDefault();
-      return YES;
+      return true;
     }
-    return NO;
+    return false;
   },
 
   keyUp: function (evt) {
@@ -1282,15 +1264,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     // processing.
     this.notifyPropertyChange('selection');
     evt.allowDefault();
-    return YES;
+    return true;
   },
 
   mouseDown: function (evt) {
     if (!this.get('isEnabledInPane')) {
       evt.stop();
-      return YES;
+      return true;
     } else {
-      this._txtFieldMouseDown = YES;
+      this._txtFieldMouseDown = true;
       this.becomeFirstResponder();
 
       return sc_super();
@@ -1298,11 +1280,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   },
 
   mouseUp: function (evt) {
-    this._txtFieldMouseDown = NO;
+    this._txtFieldMouseDown = false;
 
     if (!this.get('isEnabledInPane')) {
       evt.stop();
-      return YES;
+      return true;
     }
 
     // The caret/selection could have moved.  In some browsers, though, the
@@ -1326,8 +1308,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   mouseWheel: function (evt) {
     if (this.get('isTextArea')) {
       evt.allowDefault();
-      return YES;
-    } else return NO;
+      return true;
+    } else return false;
   },
 
   /**
@@ -1335,7 +1317,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     block text selection in all other views.
    */
   selectStart: function (evt) {
-    return YES;
+    return true;
   },
 
   /** @private
@@ -1356,15 +1338,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
    */
   _valueObserver: function () {
     var val = this.get('value'), max;
-    if (val && val.length > 0) {
-      this._hintON = NO;
 
+    if (val && val.length > 0) {
       max = this.get('maxLength');
+
       if (!SC.platform.input.maxlength && val.length > max) {
         this.set('value', val.substr(0, max));
       }
-    } else if (!this.get('hintOnFocus')) {
-      this._hintON = YES;
     }
   }.observes('value')