sproutcore 1.8.0 → 1.8.1

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

@@ -864,11 +864,30 @@ SC.ScrollView = SC.View.extend({
 
   /** @private */
   mouseWheel: function(evt) {
-    this._scroll_wheelDeltaX += evt.wheelDeltaX;
-    this._scroll_wheelDeltaY += evt.wheelDeltaY;
+    var horizontalScrollOffset = this.get('horizontalScrollOffset'),
+        maximumHorizontalScrollOffset = this.get('maximumHorizontalScrollOffset'),
+        maximumVerticalScrollOffset = this.get('maximumVerticalScrollOffset'),
+        shouldScroll = NO,
+        verticalScrollOffset = this.get('verticalScrollOffset');
+
+    // Only attempt to scroll if we are allowed to scroll in the direction and
+    // have room to scroll in the direction.  Otherwise, ignore the event so
+    // that an outer ScrollView may capture it.
+    shouldScroll = ((this.get('canScrollHorizontal') &&
+        (evt.wheelDeltaX < 0 && horizontalScrollOffset > 0) ||
+        (evt.wheelDeltaX > 0 && horizontalScrollOffset < maximumHorizontalScrollOffset)) ||
+        (this.get('canScrollVertical') &&
+        (evt.wheelDeltaY < 0 && verticalScrollOffset > 0) ||
+        (evt.wheelDeltaY > 0 && verticalScrollOffset < maximumVerticalScrollOffset)));
+
+    if (shouldScroll) {
+      this._scroll_wheelDeltaX += evt.wheelDeltaX;
+      this._scroll_wheelDeltaY += evt.wheelDeltaY;
+
+      this.invokeLater(this._scroll_mouseWheel, 10);
+    }
 
-    this.invokeLater(this._scroll_mouseWheel, 10) ;
-    return this.get('canScrollHorizontal') || this.get('canScrollVertical') ;
+    return shouldScroll;
   },
 
   /** @private */

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

@@ -128,21 +128,19 @@ SC.StaticContentView = SC.View.extend(SC.StaticLayout,
   render: function(context, firstTime) {
     var content = this.get('content');
 
-    if (content) {
-      context.push(content||'');
-    }
+    context.push(content || '');
   },
-  
+
   /** @private */
   touchStart: function(evt){
     evt.allowDefault();
     return YES;
   },
-  
+
   /** @private */
   touchEnd: function(evt){
     evt.allowDefault();
     return YES;
   }
-  
-});
+
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/scroll_view/tests/scroll/integration.js

@@ -1,29 +1,5 @@
 module("SC.ScrollView integration");
 
-test("should work with SC.TemplateView", function() {
-  var pane = SC.MainPane.create({
-    childViews: ['scrollView'],
-
-    scrollView: SC.ScrollView.design({
-      layout: { width: 400, height: 600 },
-
-      contentView: SC.TemplateView.create({
-        template: SC.Handlebars.compile("foo bar baz")
-      })
-    })
-  });
-
-  pane.append();
-  var exceptionThrown = false;
-  try {
-    SC.RunLoop.begin().end();
-  } catch (e) {
-    exceptionThrown = true;
-  }
-  ok(!exceptionThrown, "Does not throw an exception at the end of the run loop.");
-  pane.remove();
-});
-
 test("should work with views that have static layout applied", function() {
   var pane;
   try {
@@ -47,4 +23,3 @@ test("should work with views that have static layout applied", function() {
     if (pane) { pane.remove(); }
   }
 });
-

data/lib/frameworks/sproutcore/frameworks/foundation/resources/text_field.css

@@ -18,67 +18,70 @@
     right: 3px;
     position: absolute;
   }
+
   &.sc-text-field-accessory-view {
-  	z-index: 2;
+    z-index: 2;
   }
   input {
-  	position: absolute;
-  	top: 0px;
-  	left: 0px;
-  	width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
     height: 100%;
-  	display: block;
-  	background: transparent;
-  	vertical-align: middle;
-  	border: none;
-  	outline: none;
-  	-webkit-appearance:none;
+    display: block;
+    background: transparent;
+    vertical-align: middle;
+    border: none;
+    outline: none;
+    -webkit-appearance:none;
   }
 
   textarea {
     position: absolute;
-  	top: 0px;
-  	left: 0px;
-  	width:100%;
-    bottom: 0px;
-  	right: 0px;
-    padding-top: 10px;
-  	display: block;
-  	background: transparent;
-  	vertical-align: middle;
-  	resize: none;
-  	overflow: auto;
-  	border: none;
+    height: 100%;
+    width: 100%;
+    display: block;
+    background: transparent;
+    vertical-align: middle;
+    resize: none;
+    overflow: auto;
+    border: none;
     outline: none;
     -webkit-appearance:none;
   }
+
+  &.text-area .padding {
+    bottom: 1px;
+    top: 2px;
+  }
   
   .sc-hint {
     z-index: 1;
   }  
   
   .sc-hint, .hint {
-  	position: absolute;
-  	top: 3px;
-  	left: 1px;
-  	right: 1px;
-  	bottom: 3px;
-  	padding: 0px;
-  	color: #aaa ;
-  	font-size: 12px;
+    position: absolute;
+    top: 3px;
+    left: 1px;
+    right: 1px;
+    bottom: 3px;
+    padding: 0px;
+    color: #aaa ;
+    font-size: 12px;
+    -webkit-font-smoothing: antialiased;
   }
 
   &.text-area .sc-hint,
   &.text-area .hint {
-  	top: 2px;
-  	left: 3px;
-  	right: 3px;
-  	bottom: 2px;
+    top: 0px;
+    left: 1px;
+    right: 1px;
+    bottom: 2px;
   }
 
   &.focus .sc-hint,
   &.not-empty .sc-hint {
-    display: none ;
+    display: none;
   }
 
   &.sc-hint .field{
@@ -95,7 +98,7 @@
     }
   }
 
-  .mozilla &{
+  .firefox &{
     &.focus {
       outline-color:-moz-mac-focusring;
       outline-offset:-5px;
@@ -106,7 +109,7 @@
       -moz-appearance: textfield;
     }
     textarea.field {
-    	height: 100%;
+      height: 100%;
     }
   }
 
@@ -118,7 +121,7 @@
       border:1px inset;
     }
     textarea.field {
-    	height: 100%;
+      height: 100%;
     }
   }
 }

data/lib/frameworks/sproutcore/frameworks/foundation/system/image_queue.js

@@ -241,6 +241,11 @@ SC.imageQueue = SC.Object.create(/** @scope SC.imageQueue.prototype */ {
         url: url, status: this.IMAGE_WAITING, callbacks: [], retainCount: 0, image: img
       };
       img.entry = entry ; // provide a link back to the image
+    } else if (entry && entry.image === null) {
+    	// Ensure that if we retrieve an entry that it has an associated Image,
+    	// since failed/aborted images will have had their image property nulled.
+    	entry.image = new Image();
+    	entry.image.entry = entry;
     }
     return entry ;
   },

data/lib/frameworks/sproutcore/frameworks/foundation/tests/system/image_queue.js

@@ -0,0 +1,84 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+// ========================================================================
+// SC.imageQueue Test for queue stalling (https://github.com/sproutcore/sproutcore/pull/716)
+// ========================================================================
+/*globals module test ok isObj equals expects */
+
+module("Image Queue", {
+    setup: function() {
+		this.guardTimeout = 10000;
+		this.firstGoodImageURL = sc_static('images/sproutcore.png');
+		this.secondGoodImageURL = sc_static('images/sproutcore-logo.png');
+		this.badImageURL = "http://www.sproutcore.com/images/foobar.png";
+	}
+});
+
+test("Ensure queue is in known state.", function() {
+	SC.imageQueue._images = {};
+	SC.imageQueue._loading = [] ;
+	SC.imageQueue._foregroundQueue = [];
+	SC.imageQueue._backgroundQueue = [];
+	SC.imageQueue.set('isLoading', NO);
+	
+    equals(SC.imageQueue.activeRequests, 0, "There should be no active requests");
+});
+
+test("Attempt to load a non-existent image.", function() {
+	SC.imageQueue.loadImage(this.badImageURL, {action: function(imageUrl, imageOrError) {
+	    // verify request loaded OK
+	    ok(SC.typeOf(imageOrError) === "error", "Image retrieval should fail with error.");
+	    // resume executing tests
+	    start();
+	  }}, 'action', NO);	
+
+  	stop(this.guardTimeout);
+});
+
+test("Load a valid image successfully.", function() {
+	SC.imageQueue.loadImage(this.firstGoodImageURL, {action: function(imageUrl, imageOrError) {
+	    // verify request loaded OK
+	    ok(SC.typeOf(imageOrError) !== "error", "Image should be retrieved successfully.");
+	    // resume executing tests
+	    start();
+	  }}, 'action', NO);	
+	  
+    stop(this.guardTimeout);
+});
+
+test("Attempt to reload previous non-existent image.", function() {
+	SC.imageQueue.loadImage(this.badImageURL, {action: function(imageUrl, imageOrError) {
+	    // verify request loaded OK
+	    ok(SC.typeOf(imageOrError) === "error", "Image retrieval should fail with error.");
+	    // resume executing tests
+	    start();
+	  }}, 'action', NO);	
+
+  	stop(this.guardTimeout);
+});
+
+test("Reload previous valid image (now cached) successfully.", function() {
+	SC.imageQueue.loadImage(this.firstGoodImageURL, {action: function(imageUrl, imageOrError) {
+	    // verify request loaded OK
+	    ok(SC.typeOf(imageOrError) !== "error", "Image should be retrieved successfully.");
+	    // resume executing tests
+	    start();
+	  }}, 'action', NO);	
+
+  	stop(this.guardTimeout);
+});
+
+test("Load a second non-cached image successfully.", function() {
+	SC.imageQueue.loadImage(this.secondGoodImageURL, {action: function(imageUrl, imageOrError) {
+	    // verify request loaded OK
+	    ok(SC.typeOf(imageOrError) !== "error", "Image should be retrieved successfully.");
+	    // resume executing tests
+	    start();
+	  }}, 'action', NO);	
+
+  	stop(this.guardTimeout);
+});

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

@@ -105,6 +105,54 @@ test("isEnabled=YES isEditable=YES should not add disable or readOnly attribute"
   ok(!view.$input().attr('readOnly'), 'should not have readOnly attribute');
 });
 
+test("autoCapitalize=YES should add autocapitalize", function() {
+  SC.RunLoop.begin();
+  view.set('autoCapitalize', YES);
+  view.displayDidChange();
+  SC.RunLoop.end();
+  ok(view.$input().attr('autocapitalize') !== "off", 'should have an autocapitalize attribute');
+});
+
+test("autoCapitalize=NO should add autocapitalize='off'", function() {
+  SC.RunLoop.begin();
+  view.set('autoCapitalize', NO);
+  view.displayDidChange();
+  SC.RunLoop.end();
+  ok(view.$input().attr('autocapitalize') === "off", 'should have an autocapitalize attribute set to "off"');
+});
+
+test("autoCapitalize=null should not add autocapitalize", function() {
+  SC.RunLoop.begin();
+  view.set('autoCapitalize', null);
+  view.displayDidChange();
+  SC.RunLoop.end();
+  ok(!view.$input().attr('autocapitalize'), 'should not have an autocapitalize attribute set');
+});
+
+test("autoCorrect=YES should add autocorrect", function() {
+  SC.RunLoop.begin();
+  view.set('autoCorrect', YES);
+  view.displayDidChange();
+  SC.RunLoop.end();
+  ok(view.$input().attr('autocorrect') !== "off", 'should have an autocorrect attribute');
+});
+
+test("autoCorrect=NO should add autocorrect='off'", function() {
+  SC.RunLoop.begin();
+  view.set('autoCorrect', NO);
+  view.displayDidChange();
+  SC.RunLoop.end();
+  ok(view.$input().attr('autocorrect') === "off", 'should have an autocorrect attribute set to "off"');
+});
+
+test("autoCorrect=null should not add autocorrect", function() {
+  SC.RunLoop.begin();
+  view.set('autoCorrect', null);
+  view.displayDidChange();
+  SC.RunLoop.end();
+  ok(!view.$input().attr('autocorrect'), 'should not have an autocorrect attribute set');
+});
+
 // test("isEnabled=NO should add disabled attr to input", function() {
 //   SC.RunLoop.begin();
 //   view1.set('isEnabled', NO);

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

@@ -19,13 +19,13 @@
   })
 
   .add("password", SC.TextFieldView, {
-    isPassword: YES,
+    type: "password",
     value: "I'm so secret"
   })
 
   .add("password-hint", SC.TextFieldView, {
     hint: "Passwerd",
-    isPassword: YES,
+    type: "password",
     value: "I'm so secret"
   })
 

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

@@ -19,11 +19,19 @@ sc_require('mixins/editable');
   @extends SC.FieldView
   @extends SC.Editable
   @author Charles Jolley
-*/
+ */
 SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
-/** @scope SC.TextFieldView.prototype */ {
+  /** @scope SC.TextFieldView.prototype */ {
 
   classNames: ['sc-text-field-view'],
+
+  /**
+    Walk like a duck.
+
+    @type Boolean
+    @default YES
+    @readOnly
+   */
   isTextField: YES,
 
   // ..........................................................
@@ -31,54 +39,64 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   //
 
   /**
-    When applyImmediately is turned on, every keystroke will set the value
+    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
-  */
+   */
   applyImmediately: YES,
 
-  /*
-  * Flag indicating whether the editor should automatically commit if you click
-  * outside it.
-  *
-  * @type {Boolean}
-  */
+  /**
+    Flag indicating whether the editor should automatically commit if you click
+    outside it.
+
+    @type Boolean
+    @default YES
+   */
   commitOnBlur: YES,
 
-  /**
-    If YES, the field will hide its text from display. The default value is NO.
+  /** @deprecated
+    If `YES`, the field will hide its text from display.
+    This value is deprecated. Please use `type` instead to `"password"`.
 
-    @property
     @type Boolean
-  */
+    @default NO
+   */
   isPassword: NO,
 
   /**
-    If YES then allow multi-line input.  This will also change the default
+    If `YES` 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.
 
-    @property
     @type Boolean
-  */
+    @default NO
+   */
   isTextArea: NO,
 
+  /**
+    Whether the text field is currently focused.
+
+    @type Boolean
+    @default NO
+   */
+  focused: NO,
+
   /**
     The hint to display while the field is not active.
 
-    @property
     @type String
-  */
+    @default ""
+   */
   hint: '',
 
   /**
     The hint to display while the field is not active.
 
-    @property
     @type String
-  */
+    @default "text"
+   */
   type: 'text',
 
   /**
@@ -90,89 +108,107 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     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.
-    @property {Boolean}
-  */
-
+    @type Boolean
+    @default YES
+   */
   isBrowserFocusable: YES,
 
-  autoCorrect: true,
-  autoCapitalize: true,
+  /**
+    Whether the browser should automatically correct the input. 
+
+    When `autoCorrect` is set to `null`, the browser will use
+    the system defaults.
+
+    @type Boolean
+    @default YES
+   */
+  autoCorrect: YES,
+
+  /**
+    Whether the browser should automatically capitalize the input.
 
+    When `autoCapitalize` is set to `null`, the browser will use
+    the system defaults.
 
-  /*
+    @type Boolean
+    @default YES
+   */
+  autoCapitalize: YES,
+
+  /**
     Localizes the hint if necessary.
 
-    @property
+    @field
     @type String
-  */
-  formattedHint: function() {
+   */
+  formattedHint: function () {
     var hint = this.get('hint');
     return typeof(hint) === 'string' && this.get('localize') ? SC.String.loc(hint) : 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 has focus.
+    If `YES`, it will disappear as soon as any character is in the field.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   hintOnFocus: YES,
 
-  /*
+  /**
     Whether the hint should be localized or not.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   localize: YES,
 
   /**
-    If YES then the text field is currently editing.
+    If `YES` then the text field is currently editing.
 
-    @property
     @type Boolean
-  */
+    @default NO
+   */
   isEditing: NO,
 
   /**
     If you set this property to false the tab key won't trigger its default
     behavior (tabbing to the next field).
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   defaultTabbingEnabled: YES,
 
   /**
     Enabled context menu for textfields.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   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
+    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,
 
   /**
     If no, will not allow transform or validation errors (SC.Error objects)
-    to be passed to 'value'.  Upon focus lost, the text field will revert
+    to be passed to `value`.  Upon focus lost, the text field will revert
     to its previous value.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   allowsErrorAsValue: YES,
 
   /**
@@ -195,9 +231,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     amount of left padding used when the accessory view is visible, make the
     accessory view wider, with empty space on the right.
 
-    @property
     @type SC.View
-  */
+    @default null
+   */
   leftAccessoryView: null,
 
   /**
@@ -221,54 +257,82 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     amount of right padding used when the accessory view is visible, make the
     accessory view wider, with empty space on the left.
 
-    @property
     @type SC.View
-  */
+    @default null
+   */
   rightAccessoryView: null,
 
   /**
     This property will enable disable HTML5 spell checking if available on the
-    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it
+    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   spellCheckEnabled: YES,
 
   /**
     Maximum amount of characters this field will allow.
 
-    @property
     @type Number
-  */
+    @default 5096
+   */
   maxLength: 5096,
 
   /**
     Whether to render a border or not.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   shouldRenderBorder: YES,
 
-  //
+  // ..........................................................
   // SUPPORT FOR AUTOMATIC RESIZING
   //
+
+  /**
+    Text fields support auto resizing.
+    @type Boolean
+    @default YES
+    @see SC.AutoResize#supportsAutoResize
+   */
   supportsAutoResize: YES,
-  autoResizeLayer: function() { return this.$input()[0]; }
-  .property('layer').cacheable(),
 
-  autoResizeText: function() { return this.get('value'); }
-  .property('value').cacheable(),
+  /**
+    The layer to automatically resize.
+
+    @type DOMElement
+    @see SC.AutoResize#autoResizeLayer
+   */
+  autoResizeLayer: function () {
+    return this.$input()[0];
+  }.property('layer').cacheable(),
+
+  /**
+    The text to be used when automatically resizing the text field.
 
+    @type String
+    @see SC.AutoResize#autoResizeText
+   */
+  autoResizeText: function () {
+    return this.get('value');
+  }.property('value').cacheable(),
+
+  /**
+    How much padding should be used when automatically resizing.
+    @type Number
+    @default 20
+    @see SC.AutoResize#autoResizePadding
+   */
   autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 20),
 
   /** @private
-    Whether to show hint or not
-  */
+    Whether to show hint or not.
+   */
   _hintON: YES,
 
-  init: function() {
+  init: function () {
     var val = this.get('value');
     this._hintON = ((!val || val && val.length===0) && !this.get('hintOnFocus')) ? YES : NO;
 
@@ -286,13 +350,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   /**
     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 `NO`, a `readOnly` attribute will be added to the DOM Element.
 
-    Note if isEnabled is NO this property will have no effect.
+    Note if `isEnabled` is `NO` this property will have no effect.
 
-    @property
     @type Boolean
-  */
+    @default YES
+   */
   isEditable: YES,
 
   /**
@@ -303,9 +367,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     not the case that a previously-returned SC.TextSelection object will
     simply have its properties mutated.
 
-    @property {SC.TextSelection}
-  */
-  selection: function(key, value) {
+    @field
+    @type SC.TextSelection
+   */
+  selection: function (key, value) {
     var element = this.$input()[0],
         range, start, end;
 
@@ -408,16 +473,16 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   displayProperties: ['isBrowserFocusable','formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
 
-  createChildViews: function() {
+  createChildViews: function () {
     sc_super();
     this.accessoryViewObserver();
   },
 
-  acceptsFirstResponder: function() {
+  acceptsFirstResponder: function () {
     return this.get('isEnabled');
   }.property('isEnabled'),
 
-  accessoryViewObserver: function() {
+  accessoryViewObserver: function () {
     var classNames,
         viewProperties = ['leftAccessoryView', 'rightAccessoryView'],
         len = viewProperties.length , i, viewProperty, previousView,
@@ -476,7 +541,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   }.observes('leftAccessoryView', 'rightAccessoryView'),
 
-  layoutChildViewsIfNeeded: function(isVisible) {
+  layoutChildViewsIfNeeded: function (isVisible) {
     // For the right accessory view, adjust the positioning such that the view
     // is right-justified, unless 'right' is specified.
     if (!isVisible) isVisible = this.get('isVisibleInWindow') ;
@@ -499,7 +564,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     sc_super() ;
   },
 
-  render: function(context, firstTime) {
+  render: function (context, firstTime) {
     sc_super() ;
     var v, accessoryViewWidths, leftAdjustment, rightAdjustment;
 
@@ -530,16 +595,16 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     If isTextArea is changed (this might happen in inlineeditor constantly)
     force the field render to render like the firsttime to avoid writing extra
     code. This can be useful also
-  */
+   */
   _forceRenderFirstTime: NO,
 
   /** @private */
-  _renderFieldLikeFirstTime: function(){
+  _renderFieldLikeFirstTime: function (){
     this.set('_forceRenderFirstTime', YES);
   }.observes('isTextArea'),
 
   /** @private */
-  _renderField: function(context, firstTime, value, leftAdjustment, rightAdjustment) {
+  _renderField: function (context, firstTime, value, leftAdjustment, rightAdjustment) {
     // TODO:  The cleanest thing might be to create a sub- rendering context
     //        here, but currently SC.RenderContext will render sibling
     //        contexts as parent/child.
@@ -567,7 +632,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     context.setClass('oldWebKitFieldPadding', isOldSafari);
 
 
-
     if (firstTime || this._forceRenderFirstTime) {
       this._forceRenderFirstTime = NO;
       activeState = isEnabled ? (isEditable ? '' : 'readonly="readonly"') : 'disabled="disabled"' ;
@@ -575,39 +639,42 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
       spellCheckString = this.get('spellCheckEnabled') ? ' spellcheck="true"' : ' spellcheck="false"';
 
-      if(SC.browser.mobileSafari){
-        autocorrectString = !autoCorrect ? ' autocorrect="off"' : '';
-        autocapitalizeString = !autoCapitalize ? ' autocapitalize="off"' : '';
+      if (autoCorrect != null) {
+        autocorrectString = ' autocorrect=' + (!autoCorrect ? '"off"' : '"true"');
       }
 
-      if(isBrowserFocusable){
+      if (autoCorrect != null) {
+        autocapitalizeString = ' autocapitalize=' + (!autoCapitalize ? '"off"' : '"true"');
+      }
+
+      if (isBrowserFocusable) {
         browserFocusable = 'tabindex="-1"';
       }
         // if hint is on and we don't want it to show on focus, create one
-      if(SC.platform.input.placeholder && !hintOnFocus) {
+      if (SC.platform.input.placeholder && !hintOnFocus) {
         hintString = ' placeholder="' + hint + '"';
       }
 
-      if(this.get('shouldRenderBorder')) context.push('<div class="border"></div>');
+      if (this.get('shouldRenderBorder')) context.push('<div class="border"></div>');
 
       // Render the padding element, with any necessary positioning
       // adjustments to accommodate accessory views.
       adjustmentStyle = '' ;
-      if (leftAdjustment  ||  rightAdjustment) {
+      if (leftAdjustment || rightAdjustment) {
         adjustmentStyle = 'style="' ;
-        if (leftAdjustment)  adjustmentStyle += 'left: '  + leftAdjustment  + '; ' ;
-        if (rightAdjustment) adjustmentStyle += 'right: ' + rightAdjustment + ';' ;
+        if (leftAdjustment)  adjustmentStyle += 'left:'  + leftAdjustment  + ';' ;
+        if (rightAdjustment) adjustmentStyle += 'right:' + rightAdjustment + ';' ;
         adjustmentStyle += '"' ;
       }
       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))) {
+      if (this._hintON && !SC.platform.input.placeholder && (!value || (value && value.length===0))) {
         value = hint;
         context.setClass('sc-hint', YES);
       }
 
-      if(hintOnFocus) {
+      if (hintOnFocus) {
         var hintStr = '<div aria-hidden="true" class="hint '+
                       (isTextArea ? '':'ellipsis')+'%@">'+ hint + '</div>';
         context.push(hintStr.fmt(value ? ' sc-hidden': ''));
@@ -628,7 +695,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
         // 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')) { type = 'password'; }
+        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 + '" '+ activeState + ' value="'+ value + '"' +
@@ -642,8 +715,14 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
           elem = input[0],
           val = this.get('value');
 
-      if(hintOnFocus) this.$('.hint')[0].innerHTML = hint;
-      else if(!hintOnFocus) elem.placeholder = hint;
+      if (hintOnFocus) this.$('.hint')[0].innerHTML = hint;
+      else if (!hintOnFocus) elem.placeholder = hint;
+
+      // IE8 has problems aligning the input text in the center
+      // This is a workaround for centering it.
+      if (SC.browser.name === SC.BROWSER.ie && SC.browser.version <= 8 && !isTextArea) {
+        input.css('line-height', this.get('frame').height + 'px');
+      }
 
       if (!val || (val && val.length === 0)) {
         if (this.get('isPassword')) { elem.type = 'password'; }
@@ -664,16 +743,23 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         }
       }
 
-      if(SC.browser.mobileSafari){
-        input.attr('autoCapitalize', !autoCapitalize ? 'off':'true');
-        input.attr('autoCorrect', !autoCorrect ? 'off':'true');
+      if (autoCorrect != null) {
+        input.attr('autoCorrect', !autoCorrect ? 'off' : 'true');
+      } else {
+        input.attr('autoCorrect', null);
+      }
+
+      if (autoCapitalize != null) {
+        input.attr('autoCapitalize', !autoCapitalize ? 'off' : 'true');
+      } else {
+        input.attr('autoCapitalize', null);
       }
 
       if (!hintOnFocus && SC.platform.input.placeholder) input.attr('placeholder', hint);
 
-      if(isBrowserFocusable){
+      if (isBrowserFocusable) {
         input.removeAttr('tabindex');
-      }else{
+      } else {
         input.attr('tabindex', '-1');
       }
       // Enable/disable the actual input/textarea as appropriate.
@@ -682,7 +768,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         if (!isEnabled) {
           element.disabled = 'true' ;
           element.readOnly = null ;
-        } else if(!isEditable) {
+        } else if (!isEditable) {
           element.disabled = null ;
           element.readOnly = 'true' ;
         } else {
@@ -713,7 +799,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-  _getAccessoryViewWidths: function() {
+  _getAccessoryViewWidths: function () {
     var widths = {},
         accessoryViewPositions = ['left', 'right'],
         numberOfAccessoryViewPositions = accessoryViewPositions.length, i,
@@ -753,13 +839,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // HANDLE NATIVE CONTROL EVENTS
   //
 
-  didCreateLayer: function() {
+  didCreateLayer: function () {
     sc_super();
-    if(!SC.platform.input.placeholder) this.invokeLast(this._setInitialPlaceHolderIE);
+    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.
-    if(this.get('isTextArea')) {
+    if (this.get('isTextArea')) {
       this.invokeLast(this._addTextAreaEvents);
     }
     else {
@@ -776,29 +862,49 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         SC.Event.add(input, 'keypress', this, this._firefox_dispatch_keypress);
       }
     }
+
+    if (this.get('hintOnFocus') ||
+        (SC.browser.name === SC.BROWSER.ie && SC.browser.version <= 8 && !this.get('isTextArea'))) {
+      this.invokeLast(this._fixupTextLayout);
+    }
   },
 
-  /**  @private
+  /** @private
+    Apply proper text layout to sc-hints and inputs.
+   */
+  _fixupTextLayout: function () {
+    var height = this.get('frame').height;
+
+    if (SC.browser.name === SC.BROWSER.ie && SC.browser.version <= 8 &&
+        !this.get('isTextArea')) {
+      this.$input().css('line-height', height + 'px');
+    }
+
+    if (this.get('hintOnFocus') && !this.get('isTextArea')) {
+      this.$('.hint').css('line-height', this.$('.hint').outerHeight() + 'px');
+    }
+  },
+
+  /** @private
     Set initial placeholder for IE
-  */
-  _setInitialPlaceHolderIE: function() {
-    if(!SC.platform.input.placeholder && this._hintON){
+   */
+  _setInitialPlaceHolderIE: function () {
+    if (!SC.platform.input.placeholder && this._hintON) {
       var input = this.$input(),
           currentValue = input.val();
-      if(!currentValue || (currentValue && currentValue.length===0)){
+      if (!currentValue || (currentValue && currentValue.length===0)) {
         input.val(this.get('formattedHint'));
       }
     }
   },
 
-  /**  @private
+  /** @private
     Adds all the textarea events. This functions is called by didCreateLayer
     at different moments depending if it is a textarea or not. Appending
     events to text areas is not reliable unless the element is already added
     to the DOM.
-
-  */
-  _addTextAreaEvents: function() {
+   */
+  _addTextAreaEvents: function () {
     var input = this.$input();
     SC.Event.add(input, 'focus', this, this._textField_fieldDidFocus);
     SC.Event.add(input, 'blur',  this, this._textField_fieldDidBlur);
@@ -811,9 +917,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   /**
     Removes all the events attached to the textfield
-  */
-
-  willDestroyLayer: function() {
+   */
+  willDestroyLayer: function () {
     sc_super();
 
     var input = this.$input();
@@ -824,14 +929,14 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
 
   /** @private
-    This function is called by the event when the textfield gets focus
+     This function is called by the event when the textfield gets focus
   */
-  _textField_fieldDidFocus: function(evt) {
-    SC.run(function() {
+  _textField_fieldDidFocus: function (evt) {
+    SC.run(function () {
       this.set('focused',YES);
       this.fieldDidFocus(evt);
       var val = this.get('value');
-      if(!SC.platform.input.placeholder && ((!val) || (val && val.length===0))) {
+      if (!SC.platform.input.placeholder && ((!val) || (val && val.length===0))) {
         this._hintON = NO;
       }
     }, this);
@@ -839,22 +944,22 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   /** @private
     This function is called by the event when the textfield blurs
-  */
-  _textField_fieldDidBlur: function(evt) {
-    SC.run(function() {
+   */
+  _textField_fieldDidBlur: function (evt) {
+    SC.run(function () {
       this.set('focused',NO);
       // passing the original event here instead that was potentially set from
       // loosing 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))) {
+      if (!SC.platform.input.placeholder && !this.get('hintOnFocus') && ((!val) || (val && val.length===0))) {
         this._hintON = YES;
       }
     }, this);
   },
 
-  fieldDidFocus: function(evt) {
+  fieldDidFocus: function (evt) {
     this.becomeFirstResponder();
 
     this.beginEditing(evt);
@@ -877,10 +982,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-  fieldDidBlur: function(evt) {
+  fieldDidBlur: function (evt) {
     this.resignFirstResponder(evt) ;
 
-    if(this.get('commitOnBlur')) this.commitEditing(evt);
+    if (this.get('commitOnBlur')) this.commitEditing(evt);
 
     // get the pane we hid intercept pane for (if any)
     var touchPane = this._didHideInterceptForPane;
@@ -891,9 +996,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
 
   /** @private */
-  _field_fieldValueDidChange: function(evt) {
-    if(this.get('focused')){
-      SC.run(function() {
+  _field_fieldValueDidChange: function (evt) {
+    if (this.get('focused')){
+      SC.run(function () {
         this.fieldValueDidChange(NO);
       }, this);
     }
@@ -902,13 +1007,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   /** @private
     Make sure to update visibility of hint if it changes
-  */
-  updateHintOnFocus: function() {
+   */
+  updateHintOnFocus: function () {
     // if there is a value in the field, hide the hint
     var hintOnFocus = this.get('hintOnFocus');
-    if(!hintOnFocus) return;
+    if (!hintOnFocus) return;
 
-    if(this.getFieldValue()) {
+    if (this.getFieldValue()) {
       this.$('.hint').addClass('sc-hidden');
     }
     else {
@@ -918,7 +1023,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   /** @private
     Move magic number out so it can be over-written later in inline editor
-  */
+   */
   _topOffsetForFirefoxCursorFix: 3,
 
   /** @private
@@ -928,8 +1033,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     document (only for the input element), although it will be bubbled up in
     other contexts.  Since SproutCore's event dispatching requires the
     document to see the event, we'll manually forward the event along.
-  */
-  _firefox_dispatch_keypress: function(evt) {
+   */
+  _firefox_dispatch_keypress: function (evt) {
     var selection = this.get('selection'),
         value     = this.get('value'),
         valueLen  = value ? value.length : 0,
@@ -944,7 +1049,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
 
   /** @private */
-  _textField_selectionDidChange: function() {
+  _textField_selectionDidChange: function () {
     this.notifyPropertyChange('selection');
   },
 
@@ -957,15 +1062,14 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /** @private
     When we become first responder, focus the text field if needed and
     hide the hint text.
-  */
-  didBecomeKeyResponderFrom: function(keyView) {
-    if(this.get('isVisibleInWindow')) {
+   */
+  didBecomeKeyResponderFrom: function (keyView) {
+    if (this.get('isVisibleInWindow')) {
       var inp = this.$input()[0];
-      try{
-        if(inp) inp.focus();
-      }
-      catch(e){}
-      if(!this._txtFieldMouseDown){
+      try {
+        if (inp) inp.focus();
+      } catch(e){}
+      if (!this._txtFieldMouseDown) {
         this.invokeLast(this._selectRootElement) ;
       }
     }
@@ -974,19 +1078,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /** @private
     In IE, you can't modify functions on DOM elements so we need to wrap the
     call to select() like this.
-  */
-  _selectRootElement: function() {
+   */
+  _selectRootElement: function () {
     var inputElem = this.$input()[0],
         isLion;
     // Make sure input element still exists, as a redraw could have remove it
     // already.
-    if(inputElem){
+    if (inputElem) {
       // Determine if the OS is OS 10.7 "Lion"
       isLion = SC.browser.os === SC.OS.mac &&
           SC.browser.compare(SC.browser.osVersion, '10.7') === 0;
 
-      if(!(SC.browser.name === SC.BROWSER.safari &&
-          isLion && SC.buildLocale==='ko-kr')) {
+      if (!(SC.browser.name === SC.BROWSER.safari &&
+            isLion && SC.buildLocale==='ko-kr')) {
         inputElem.select() ;
       }
     }
@@ -996,8 +1100,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /** @private
     When we lose first responder, blur the text field if needed and show
     the hint text if needed.
-  */
-  didLoseKeyResponderTo: function(keyView) {
+   */
+  didLoseKeyResponderTo: function (keyView) {
     var el = this.$input()[0];
     if (el) el.blur();
     this.invokeLater("scrollToOriginIfNeeded", 100);
@@ -1005,8 +1109,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
   /** @private
     Scrolls to origin if necessary (if the pane's current firstResponder is not a text field).
-  */
-  scrollToOriginIfNeeded: function() {
+   */
+  scrollToOriginIfNeeded: function () {
     var pane = this.get("pane");
     if (!pane) return;
 
@@ -1019,8 +1123,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /**
     Simply allow keyDown & keyUp to pass through to the default web browser
     implementation.
-  */
-  keyDown: function(evt) {
+   */
+  keyDown: function (evt) {
     var which = evt.which,
         keyCode = evt.keyCode,
         maxLengthReached = false,
@@ -1042,13 +1146,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
 
     // maxlength for textareas
-    if(!SC.platform.input.maxlength && this.get('isTextArea')){
+    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
-      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'))) {
+      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;
       }
     }
@@ -1065,7 +1169,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       // There used to be an invokeLater here instead of setTimeout. What we
       // really need is setTimeout.
       var self = this;
-      setTimeout(function() {
+      setTimeout(function () {
         self.fieldValueDidChange();
       }, 10);
     }
@@ -1073,7 +1177,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return YES;
   },
 
-  keyUp: function(evt) {
+  keyUp: function (evt) {
     if (SC.browser.isMozilla &&
         evt.keyCode === SC.Event.KEY_RETURN) { this.fieldValueDidChange(); }
 
@@ -1086,7 +1190,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return YES;
   },
 
-  mouseDown: function(evt) {
+  mouseDown: function (evt) {
     var fieldValue = this.get('fieldValue'); // use 'fieldValue' since we want actual text
     this._txtFieldMouseDown=YES;
     this.becomeFirstResponder();
@@ -1098,7 +1202,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-  mouseUp: function(evt) {
+  mouseUp: function (evt) {
     this._txtFieldMouseDown=NO;
     // The caret/selection could have moved.  In some browsers, though, the
     // element's values won't be updated until after this event is finished
@@ -1112,37 +1216,37 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return sc_super();
   },
 
-  touchStart: function(evt) {
+  touchStart: function (evt) {
     return this.mouseDown(evt);
   },
 
-  touchEnd: function(evt) {
+  touchEnd: function (evt) {
     return this.mouseUp(evt);
   },
 
   /**
     Adds mouse wheel support for textareas.
-  */
-  mouseWheel: function(evt) {
-    if(this.get('isTextArea')) {
+   */
+  mouseWheel: function (evt) {
+    if (this.get('isTextArea')) {
       evt.allowDefault();
       return YES;
     } else return NO;
   },
 
-  /*
+  /**
     Allows text selection in IE. We block the IE only event selectStart to
     block text selection in all other views.
-  */
-  selectStart: function(evt) {
+   */
+  selectStart: function (evt) {
     return YES;
   },
 
   /** @private
     Overridden from SC.FieldView. Provides correct tag name based on the 
-    'isTextArea' property.
+    `isTextArea` property.
    */
-  _inputElementTagName: function() {
+  _inputElementTagName: function () {
     if (this.get('isTextArea')) {
       return 'textarea';
     } else {
@@ -1153,17 +1257,17 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /** @private
     This observer makes sure to hide the hint when a value is entered, or
     show it if it becomes empty.
-  */
-  _valueObserver: function() {
+   */
+  _valueObserver: function () {
     var val = this.get('value'), max;
-    if (val && val.length>0) {
+    if (val && val.length > 0) {
       this._hintON = NO;
 
       max = this.get('maxLength');
       if (!SC.platform.input.maxlength && val.length > max) {
         this.set('value', val.substr(0, max));
       }
-    } else if(!this.get('hintOnFocus')) {
+    } else if (!this.get('hintOnFocus')) {
       this._hintON = YES;
     }
   }.observes('value')