sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -88,7 +88,7 @@ test("basic", function() {
   ok(view.$('.sc-outer-tail'), 'should have sc-outer-tail class');
   ok(view.$('.sc-inner-head'), 'should have sc-inner-head class');
   ok(view.$('.sc-inner-tail'), 'should have sc-inner-tail class');
-  equals(view.$('.sc-inner').css("width"), "25%", 'width should be 25%');
+  equals(view.$('.sc-inner')[0].style.width, "25%", 'width should be 25%');
   
   // browsers compute the width after % adjustment differently.  just be close
   var v = (SC.browser.msie || SC.browser.mozilla) ? 63 : 62;
@@ -102,7 +102,7 @@ test("disabled", function() {
   
   ok(view.$().hasClass('disabled'), 'should have disabled class');
   ok(view.$('.sc-inner'), 'should have sc-inner class');
-  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner')[0].style.width, "0%", 'width should be 0%');
   equals(view.$('.sc-inner').width(), 0, 'pixel width ');
   
 });
@@ -113,7 +113,7 @@ test("basic value 0", function() {
   
   ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
   ok(view.$('.sc-inner'), 'should have sc-inner class');
-  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner')[0].style.width, "0%", 'width should be 0%');
   equals(view.$('.sc-inner').width(), 0, 'pixel width ');
   
 });
@@ -124,7 +124,7 @@ test("basic value 100", function() {
   
   ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
   ok(view.$('.sc-inner'), 'should have sc-inner class');
-  equals(view.$('.sc-inner').css("width"), "100%", 'width should be 100%');
+  equals(view.$('.sc-inner')[0].style.width, "100%", 'width should be 100%');
   equals(view.$('.sc-inner').width(), 250, 'pixel width ');
   
 });
@@ -135,7 +135,7 @@ test("basic max 50", function() {
   
   ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
   ok(view.$('.sc-inner'), 'should have sc-inner class');
-  equals(view.$('.sc-inner').css("width"), "50%", 'width should be 50%');
+  equals(view.$('.sc-inner')[0].style.width, "50%", 'width should be 50%');
   equals(view.$('.sc-inner').width(), 125, 'pixel width ');
   
 });
@@ -151,7 +151,7 @@ test("changing value from empty -> value", function() {
   SC.RunLoop.begin();
   view.set('value', 50);
   SC.RunLoop.end();
-  equals(view.$('.sc-inner').css("width"), "50%", 'width should be 50%');
+  equals(view.$('.sc-inner')[0].style.width, "50%", 'width should be 50%');
   
   var assertions = function(){
     equals(view.$('.sc-inner').width(), 125, 'pixel width ');
@@ -169,7 +169,7 @@ test("changing value from full -> empty", function() {
   SC.RunLoop.begin();
   view.set('value', 0);
   SC.RunLoop.end();
-  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner')[0].style.width, "0%", 'width should be 0%');
   var assertions = function(){
     equals(view.$('.sc-inner').width(), 0, 'pixel width ');
     start();
@@ -192,7 +192,7 @@ test("changing value from full -> negative number", function() {
   SC.RunLoop.begin();
   view.set('value', -10);
   SC.RunLoop.end();
-  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner')[0].style.width, "0%", 'width should be 0%');
   var assertions = function(){
     equals(view.$('.sc-inner').width(), 0, 'pixel width ');
     start();
@@ -212,7 +212,7 @@ test("changing value to over maximum", function() {
   SC.RunLoop.begin();
   view.set('value', 110);
   SC.RunLoop.end();
-  equals(view.$('.sc-inner').css("width"), "100%", 'width should be 100%');
+  equals(view.$('.sc-inner')[0].style.width, "100%", 'width should be 100%');
   var assertions = function(){
     equals(view.$('.sc-inner').width(), 250, 'pixel width ');
     start();
@@ -232,7 +232,7 @@ test("changing value to a string", function() {
   SC.RunLoop.begin();
   view.set('value', 'aString');
   SC.RunLoop.end();
-  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner')[0].style.width, "0%", 'width should be 0%');
   var assertions = function(){
     equals(view.$('.sc-inner').width(), 0, 'pixel width ');
     start();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/segmented/methods.js

@@ -32,12 +32,32 @@ module("SC.SegmentedView", {
     
     view = pane.childViews[0];
     
+    var boundingRect = function(segment){
+      var r;
+      if (segment.getBoundingClientRect) {
+        r = segment.getBoundingClientRect();
+      }else{
+        r = {};
+        var ret   = SC.viewportOffset(segment); // get x & y
+        var cq = SC.$(segment);
+        r.top = ret.y;
+        r.left = ret.x;
+        r.bottom = ret.y + cq.outerHeight();
+        r.right = ret.x + cq.outerWidth();
+      }
+      
+      return r;
+    };
+    
+    
     elem = view.get('layer').childNodes[0];
-    rect1 = elem.getBoundingClientRect();
+    rect1 = boundingRect(elem);
     elem = view.get('layer').childNodes[1];
-    rect2 = elem.getBoundingClientRect();
+    rect2 = boundingRect(elem);
     elem = view.get('layer').childNodes[2];
-    rect3 = elem.getBoundingClientRect();
+    rect3 = boundingRect(elem);
+    
+    
   }, 
   
   teardown: function() {
@@ -53,15 +73,15 @@ test("Check that properties are mapped correctly", function() {
     SC.RunLoop.end();
     equals(view.get('value'), "Item2", "the second item should be selected.");
     var items=view.displayItems();
-    equals(items[0][0], "Item1", 'Computed properties should match');
-    equals(items[0][1], "Item1", 'Computed properties should match');
-    equals(items[0][2], true, 'Computed properties should match');
-    equals(items[0][3], iconURL, 'Computed properties should match');
-    equals(items[0][4], null, 'Computed properties should match');
-    equals(items[0][5], null, 'Computed properties should match');
-    equals(items[0][6], 0, 'Computed properties should match');
+    equals(items[0].title, "Item1", 'Computed properties should match');
+    equals(items[0].value, "Item1", 'Computed properties should match');
+    equals(items[0].isEnabled, true, 'Computed properties should match');
+    equals(items[0].icon, iconURL, 'Computed properties should match');
+    equals(items[0].width, null, 'Computed properties should match');
+    equals(items[0].toolTip, null, 'Computed properties should match');
+    equals(items[0].index, 0, 'Computed properties should match');
     
-    var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { pageX: rect1.left + 1, pageY: rect1.top + 1 });
+    var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left + 1, clientY: rect1.top + 1 });
     view.mouseDown(firstItemEvent);
     equals(view._isMouseDown, YES, 'mousedown');
     equals(view.get('activeIndex'), 0, '');
@@ -78,7 +98,7 @@ test("Check that properties are mapped correctly", function() {
    
    // Test Mouse Down
    // it now gets the item by the position, so we have to pass a position
-   var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { pageX: rect1.left + 1, pageY: rect1.top + 1 });
+   var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left + 1, clientY: rect1.top + 1 });
    view.mouseDown(firstItemEvent);
    
    equals(view._isMouseDown, YES, 'Mouse down flag on mousedown should be ');
@@ -93,7 +113,7 @@ test("Check that properties are mapped correctly", function() {
    
    // Test third item
    elem = view.get('layer').childNodes[2];
-   var thirdItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { pageX: rect3.left + 1, pageY: rect3.top + 1 });
+   var thirdItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect3.left + 1, client: rect3.top + 1 });
    
    // mouse down and move
    view.mouseDown(thirdItemEvent);
@@ -102,13 +122,13 @@ test("Check that properties are mapped correctly", function() {
    equals(view.get('activeIndex'), 2, 'The active item is the third segment.');
    
    // try moving mouse while mouse down
-   var secondItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { pageX: rect2.left + 1, pageY: rect2.top + 1 });
+   var secondItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect2.left + 1, clientY: rect2.top + 1 });
    view.mouseMoved(secondItemEvent);
    equals(view._isMouseDown, YES, 'Mouse down flag on mousemoved should be ');
    equals(view.get('activeIndex'), 1, 'The active item should have changed to the second segment.');
    
    // and check that mouse out cancels.
-   var noItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { pageX: rect1.left - 5, pageY: rect1.top - 5 });
+   var noItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left - 5, clientY: rect1.top - 5 });
 
    view.mouseExited(noItemEvent);
    equals(view._isMouseDown, YES, 'Mouse down flag on mouseout should still be ');

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/segmented/ui.js

@@ -110,6 +110,51 @@ var pane;
       allowsEmptySelection: YES,
       allowsMultipleSelection: YES,
       layout: { height: 25 }
+    })
+    .add("3_items,leftAligned", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      align: SC.ALIGN_LEFT,
+      layout: { height: 25 }
+    })
+    .add("3_items,rightAligned", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      align: SC.ALIGN_RIGHT,
+      layout: { height: 25 }
+    })
+    .add("3_items,widths", SC.SegmentedView, { 
+      items: [
+      { value: "A", width: 70 },
+      { value: "B", width: 70 },
+      { value: "C", width: 70 }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemWidthKey: 'width',
+      layout: { height: 25 }
+    })
+    .add("5_items,widths,overflow", SC.SegmentedView, { 
+      items: [
+      { value: "A", width: 70 },
+      { value: "B", width: 70 },
+      { value: "C", width: 70 },
+      { value: "D", width: 70 },
+      { value: "E", width: 70 }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemWidthKey: 'width',
+      layout: { height: 25 }
+    })
+    .add("5_items,1_sel,widths,overflow", SC.SegmentedView, { 
+      items: [
+      { value: "A", width: 70 },
+      { value: "B", width: 70 },
+      { value: "C", width: 70 },
+      { value: "D", width: 70 },
+      { value: "E", width: 70 }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemWidthKey: 'width',
+      value: "D",
+      layout: { height: 25 }
     });
     
   pane.show(); // add a test to show the test pane
@@ -133,6 +178,8 @@ var pane;
     ok(pane.view('3_items,2_sel,multipleSel').get('isVisibleInWindow'), '3_items,2_sel,multipleSel.isVisibleInWindow should be YES');
     ok(pane.view('3_items,1_sel,emptySel,multiSel').get('isVisibleInWindow'), '3_items,1_sel,emptySel,multiSel.isVisibleInWindow should be YES');
     ok(pane.view('3_items,2_sel,emptySel,multiSel').get('isVisibleInWindow'), '3_items,2_sel,emptySel,multiSel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,leftAligned').get('isVisibleInWindow'), '3_items,leftAligned.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,rightAligned').get('isVisibleInWindow'), '3_items,rightAligned.isVisibleInWindow should be YES');
   });
   
   
@@ -223,4 +270,119 @@ var pane;
     ok((segments[1].title=="this is title2's tip"), 'second segment has expected tool tip assigned.');
   });
   
+  test("Check the alignment styles for align property.", function() {
+    equals(pane.view("3_empty").$().css('text-align'), 'center', 'default align property should text-align the segmented-view to the center');
+    equals(pane.view("3_items,leftAligned").$().css('text-align'), 'left', 'setting align: SC.ALIGN_LEFT should text-align the segmented-view to the left');
+    equals(pane.view("3_items,rightAligned").$().css('text-align'), 'right', 'setting align: SC.ALIGN_LEFT should text-align the segmented-view to the left');
+  });
+  
+  test("Check that changing title re-renders the segments (for hash or object items only).", function() {
+    var sv = pane.view("3_items,widths");
+    var segments=sv.$('a');
+    var defaults = ['A', 'B', 'C'];
+    for (var i=0, len=segments.length; i < len; i++){
+      var segEl=segments[i];
+      var label=$(segEl).find('label')[0];
+      equals(label.innerHTML, defaults[i], 'there should be "' + defaults[i] + '" in the segment\'s label');
+    }
+    
+    // change the title of the second item
+    var items = sv.get('items');
+    items[1].set('value', 'Item 2');
+    
+    // allow for a render to happen
+    SC.RunLoop.begin().end();
+    
+    segEl=segments[1];
+    label=$(segEl).find('label')[0];
+    equals(label.innerHTML, "Item 2", 'there should be "Item 2" text in the second segment');
+  });
+  
+  test("Check that changing width re-renders the segments (for hash or object items only).", function() {
+    var sv = pane.view("3_items,widths");
+    var segments=sv.$('a');
+    for (var i=0, len=segments.length; i < len; i++){
+      var segEl=segments[i];
+      var width=$(segEl).css('width');
+      equals(width, "70px", 'the segment style width should be "70px"');
+    }
+    
+    // change the width of the second item
+    var items = sv.get('items');
+    items[1].set('width', 100);
+    
+    // allow for a render to happen
+    SC.RunLoop.begin().end();
+    
+    segEl=segments[1];
+    width=$(segEl).css('width');
+    equals(width, "100px", 'the second segment style width should be "100px"');
+  });
+  
+  test("Check that overflow adds an overflow segment on view.", function() {
+    var sv = pane.view("5_items,widths,overflow");
+    var lastIsOverflow = function(sv) {
+      SC.RunLoop.begin().end(); // allow for a render to happen
+    
+      var segments=sv.$('a');
+      var overflowEl = segments[segments.length - 1];
+      ok($(overflowEl).hasClass('sc-overflow-segment'), 'overflow segment should have .sc-overflow-segment class');
+      var overflowLabelEl = $(overflowEl).find('label')[0];
+      equals(overflowLabelEl.innerHTML, "»", 'there should be "»" text in the overflow segment');
+    };
+    
+    var lastIsSegment = function(sv, text) {
+      SC.RunLoop.begin().end(); // allow for a render to happen
+    
+      var segments=sv.$('a');
+      var lastEl = segments[segments.length - 1];
+      ok(!$(lastEl).hasClass('sc-overflow-segment'), 'last segment should not have .sc-overflow-segment class');
+      var lastLabelEl = $(lastEl).find('label')[0];
+      equals(lastLabelEl.innerHTML, text, 'there should be "' + text + '" text in the last segment');
+    };
+    
+    // the last item should be an overflow segment (ie. has .sc-overflow-segment class and text "»")
+    lastIsOverflow(sv);
+    
+    // check that the overflowed items are stored
+    var overflowItems = sv.overflowItems;
+    equals(overflowItems.length, 2, "there should be 2 overflowed items");
+    
+    // 1. remove the last two items (the last item should no longer be an overflow segment)
+    var items = sv.get('items');
+    items.removeAt(items.length - 1);
+    items.removeAt(items.length - 1);
+    lastIsSegment(sv, "C");
+    
+    // 2. add an item (the last item should be an overflow segment again)
+    items.pushObject({value: 'X', width: 100});
+    lastIsOverflow(sv);
+    
+    // 3. shrink the items (the last item should no longer be an overflow segment)
+    items.invoke('set', 'width', 50);
+    lastIsSegment(sv, "X");
+    
+    // 4. grow the items (the last item should be an overflow segment again)
+    items.invoke('set', 'width', 100);
+    lastIsOverflow(sv);
+    
+    // 5. shrink the items, but then shrink the segmented view 
+    items.invoke('set', 'width', 50);
+    lastIsSegment(sv, "X");
+    sv.set('layout', {left: 75, right: 75, top: 0, height: 25});
+    sv.updateLayer();
+    SC.RunLoop.begin().end(); // allow for a render to happen (update layout)
+    sv.notifyPropertyChange('frame');
+    SC.RunLoop.begin().end(); // allow for a render to happen (measure the segments)
+    lastIsOverflow(sv);
+  });
+  
+  test("Check that the overflow segment is selected when overflowed items are selected.", function() {
+    var sv = pane.view("5_items,1_sel,widths,overflow");
+    var segments=sv.$('a');
+    
+    // the overflow item should be selected (because an overflowed item is selected)
+    var overflowEl = segments[segments.length - 1];
+    ok($(overflowEl).hasClass('sel'), 'overflow segment should have .sel class');
+  });
 })();

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

@@ -5,149 +5,134 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*jslint evil:true */
-
 /** @class
 
-  Implements a push-button-style button.  This class is used to implement 
+  Implements a push-button-style button.  This class is used to implement
   both standard push buttons and tab-style controls.  See also SC.CheckboxView
-  and SC.RadioView which are implemented as field views, but can also be 
+  and SC.RadioView which are implemented as field views, but can also be
   treated as buttons.
-  
-  By default, a button uses the SC.Control mixin which will apply CSS 
+
+  By default, a button uses the SC.Control mixin which will apply CSS
   classnames when the state of the button changes:
     - active     when button is active
     - sel        when button is toggled to a selected state
-  
+
   @extends SC.View
   @extends SC.Control
   @extends SC.Button
-  @since SproutCore 1.0  
+  @since SproutCore 1.0
 */
-SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
+SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
 /** @scope SC.ButtonView.prototype */ {
-  
-  /**
-    What type of element this view is represented as
-    
-    @property {String}
-  */
-  tagName: 'div',
 
   /**
-    Class names that will be applied to this view
-    
+    The HTML representation of SC.ButtonView contains the 'sc-button-view'
+    class.
+
     @property {Array}
   */
   classNames: ['sc-button-view'],
-  
+
   /**
-    optionally set this to the theme you want this button to have.  
-    
-    This is used to determine the type of button this is.  You generally 
-    should set a class name on the HTML with the same value to allow CSS 
-    styling.
-    
-    The default SproutCore theme supports "regular", "capsule", "checkbox", 
-    and "radio"
-    
+    The theme to apply to the button. By default, a subtheme with the name of
+    'square' is created for backwards-compatibility.
+
     @property {String}
   */
-  theme: 'square',
-  
+  themeName: 'square',
+
   /**
-    Optionally set the behavioral mode of this button.  
-  
+    The behavioral mode of this button.
+
     Possible values are:
-    - *SC.PUSH_BEHAVIOR* Pressing the button will trigger an action tied to the 
+    - *SC.PUSH_BEHAVIOR* Pressing the button will trigger an action tied to the
       button. Does not change the value of the button.
-    - *SC.TOGGLE_BEHAVIOR* Pressing the button will invert the current value of 
+    - *SC.TOGGLE_BEHAVIOR* Pressing the button will invert the current value of
       the button. If the button has a mixed value, it will be set to true.
-    - *SC.TOGGLE_ON_BEHAVIOR* Pressing the button will set the current state to 
+    - *SC.TOGGLE_ON_BEHAVIOR* Pressing the button will set the current state to
       true no matter the previous value.
-    - *SC.TOGGLE_OFF_BEHAVIOR* Pressing the button will set the current state to 
+    - *SC.TOGGLE_OFF_BEHAVIOR* Pressing the button will set the current state to
       false no matter the previous value.
-      
+    - *SC.HOLD_BEHAVIOR* Pressing the button will cause the action to repeat at a
+      regular interval specifed by 'holdInterval'
+
     @property {String}
   */
   buttonBehavior: SC.PUSH_BEHAVIOR,
 
   /*
-    If buttonBehavior is SC.HOLD_BEHAVIOR, this specifies, in miliseconds, how 
-    often to trigger the action. Ignored for other behaviors.
-    
+    If buttonBehavior is SC.HOLD_BEHAVIOR, this specifies, in milliseconds,
+    how often to trigger the action. Ignored for other behaviors.
+
     @property {Number}
   */
   holdInterval: 100,
 
   /**
     If YES, then this button will be triggered when you hit return.
-    
+
     This is the same as setting the keyEquivalent to 'return'.  This will also
     apply the "def" classname to the button.
-    
+
     @property {Boolean}
   */
   isDefault: NO,
   isDefaultBindingDefault: SC.Binding.oneWay().bool(),
-  
+
   /**
     If YES, then this button will be triggered when you hit escape.
     This is the same as setting the keyEquivalent to 'escape'.
-    
+
     @property {Boolean}
-  */  
+  */
   isCancel: NO,
   isCancelBindingDefault: SC.Binding.oneWay().bool(),
 
   /**
-    The button href value.  This can be used to create localized button href 
-    values.  Setting an empty or null href will set it to javascript:;
-    
-    @property {String}
-  */
-  href: '',
+    The name of the action you want triggered when the button is pressed.
 
-  /**
-    The name of the action you want triggered when the button is pressed.  
-    
     This property is used in conjunction with the target property to execute
-    a method when a regular button is pressed.  These properties are not 
+    a method when a regular button is pressed.  These properties are not
     relevant when the button is used in toggle mode.
-    
+
     If you do not set a target, then pressing a button will cause the
     responder chain to search for a view that implements the action you name
     here.  If you set a target, then the button will try to call the method
     on the target itself.
-    
-    For legacy support, you can also set the action property to a function.  
+
+    For legacy support, you can also set the action property to a function.
     Doing so will cause the function itself to be called when the button is
-    clicked.  It is generally better to use the target/action approach and 
+    clicked.  It is generally better to use the target/action approach and
     to implement your code in a controller of some type.
-    
+
     @property {String}
   */
   action: null,
-  
+
   /**
     The target object to invoke the action on when the button is pressed.
-    
+
     If you set this target, the action will be called on the target object
     directly when the button is clicked.  If you leave this property set to
-    null, then the button will search the responder chain for a view that 
+    null, then the button will search the responder chain for a view that
     implements the action when the button is pressed instead.
-    
+
     @property {Object}
   */
   target: null,
-  
-  /** 
+
+  /**
     If YES, use a focus ring.
     
+    TODO: When is this property ever changed? Is this redundant with
+    render delegates since it can now be turned on on a theme-by-theme
+    basis? --TD
+
     @property {Boolean}
   */
   supportFocusRing: NO,
-  
+
+  // TODO: What the hell is this? --TD
   _labelMinWidthIE7: 0,
 
   /**
@@ -162,7 +147,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     @param {Event} evt
     @returns {Boolean} success/failure of the request
   */
-  triggerAction: function(evt) {
+  triggerActionAfterDelay: function(evt) {
     // If this button is disabled, we have nothing to do
     if (!this.get('isEnabled')) return NO;
 
@@ -172,167 +157,125 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     // Invoke the actual action method after a small delay to give the user a
     // chance to see the highlight. This is especially important if the button
     // closes a pane, for example.
-    this.invokeLater('_triggerActionAfterDelay', 200, evt);
+    this.invokeLater('triggerAction', 200, evt);
     return YES;
   },
 
   /** @private
-    Called by triggerAction after a delay; this method actually
+    Called by triggerActionAfterDelay; this method actually
     performs the action and restores the button's state.
 
     @param {Event} evt
   */
-  _triggerActionAfterDelay: function(evt) {
+  triggerAction: function(evt) {
     this._action(evt, YES);
     this.didTriggerAction();
     this.set('isActive', NO);
   },
 
   /**
-    This method is called anytime the button's action is triggered.  You can 
-    implement this method in your own subclass to perform any cleanup needed 
+    Callback called anytime the button's action is triggered.  You can
+    implement this method in your own subclass to perform any cleanup needed
     after an action is performed.
-    
-    @property {function}
   */
   didTriggerAction: function() {},
 
   /**
     The minimum width the button title should consume.  This property is used
-    when generating the HTML styling for the title itself.  The default 
+    when generating the HTML styling for the title itself.  The default
     width of 80 usually provides a nice looking style, but you can set it to 0
     if you want to disable minimum title width.
-    
+
     Note that the title width does not exactly match the width of the button
     itself.  Extra padding added by the theme can impact the final total
     size.
     
+    TODO: Why is this not set by the theme? --TD
+
     @property {Number}
   */
   titleMinWidth: 80,
-  
+
   // ................................................................
   // INTERNAL SUPPORT
 
   /** @private - save keyEquivalent for later use */
   init: function() {
     sc_super();
-    
-    //cache the key equivalent
-    if(this.get("keyEquivalent")) this._defaultKeyEquivalent = this.get("keyEquivalent"); 
+
+    var keyEquivalent = this.get('keyEquivalent');
+    // Cache the key equivalent. The key equivalent is saved so that if,
+    // for example, isDefault is changed from YES to NO, the old key
+    // equivalent can be restored.
+    if (keyEquivalent) {
+      this._defaultKeyEquivalent = keyEquivalent;
+    }
   },
 
-  _TEMPORARY_CLASS_HASH: {},
-  
+  /**
+    The WAI-ARIA role of the button.
+  */
+  ariaRole: 'button',
+
   // display properties that should automatically cause a refresh.
-  // isCancel and isDefault also cause a refresh but this is implemented as 
+  // isCancel and isDefault also cause a refresh but this is implemented as
   // a separate observer (see below)
-  displayProperties: ['href', 'icon', 'title', 'value', 'toolTip'],
-  
-  
-  /**
-    This property is used to call the right render style for the button.
-    * This might be a future way to start implementing the render method
-    as part of the theme
-  */ 
-  
-  renderStyle: 'renderDefault', //SUPPORTED DEFAULT, IMAGE
-
-  render: function(context, firstTime) {
-    // add href attr if tagName is anchor...
-    var href, toolTip, classes, theme;
-    if (this.get('tagName') === 'a') {
-      href = this.get('href');
-      if (!href || (href.length === 0)) href = "javascript:;";
-      context.attr('href', href);
-    }
 
-    // If there is a toolTip set, grab it and localize if necessary.
-    toolTip = this.get('toolTip') ;
-    if (SC.typeOf(toolTip) === SC.T_STRING) {
-      if (this.get('localize')) toolTip = toolTip.loc() ;
-      context.attr('title', toolTip) ;
-      context.attr('alt', toolTip) ;
-    }
-    
-    // add some standard attributes & classes.
-    classes = this._TEMPORARY_CLASS_HASH;
-    classes.def = this.get('isDefault');
-    classes.cancel = this.get('isCancel');
-    classes.icon = !!this.get('icon');
-    context.attr('role', 'button').setClass(classes);
-    theme = this.get('theme');
-    if (theme && !context.hasClass(theme)) context.addClass(theme);
+  /** @private
+    The following properties affect how SC.ButtonView is rendered, and will
+    cause the view to be rerendered if they change.
     
-    // render inner html 
-    this[this.get('renderStyle')](context, firstTime);
-  },
-   
-   
+    @property {Array}
+  */
+  displayProperties: [
+    'icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel', 
+    'escapeHTML', 'needsEllipsis', 'hint', 'titleMinWidth', 'supportFocusRing'
+  ],
+
   /**
-    Render the button with the default render style.
+    The name of the render delegate in the theme that should be used to
+    render the button.
+    
+    In this case, the 'button' property will be retrieved from the theme and
+    set to the render delegate of this view.
+    
+    @property {String}
   */
-  renderDefault: function(context, firstTime){
-    if(firstTime) {
-      context = context.push("<span class='sc-button-inner' style = 'min-width:"
-        ,this.get('titleMinWidth'),
-        "px'>");
+  renderDelegateName: 'buttonRenderDelegate',
+
+  /** @private
+    Used to store the keyboard equivalent.
     
-      this.renderTitle(context, firstTime) ; // from button mixin
-      context.push("</span>") ;
+    Setting the isDefault property to YES, for example, will cause the
+    keyEquivalent property to 'return'. This cached value is used to restore
+    the keyEquivalent property if isDefault is set back to NO.
     
-      if(this.get('supportFocusRing')) {
-        context.push('<div class="focus-ring">',
-                      '<div class="focus-left"></div>',
-                      '<div class="focus-middle"></div>',
-                      '<div class="focus-right"></div></div>');
-      }
-    }
-    else {
-      this.renderTitle(context, firstTime) ;
-    }
-  },
-  
-  /**
-    Render the button with the image render style. To set image 
-    set the icon property with the classname that has the style with the image
+    @property {String}
   */
-  renderImage: function(context, firstTime){
-    var icon = this.get('icon');
-    context.addClass('no-min-width');
-    if(icon) context.push("<div class='img "+icon+"'></div>");
-    else context.push("<div class='img'></div>");
-  },
-  
-  /** @private {String} used to store a previously defined key equiv */
   _defaultKeyEquivalent: null,
-  
+
   /** @private
-    Whenever the isDefault or isCancel property changes, update the display and change the keyEquivalent.
-  */  
+
+    Whenever the isDefault or isCancel property changes, re-render and change
+    the keyEquivalent property so that we respond to the return or escape key.
+  */
   _isDefaultOrCancelDidChange: function() {
-    var isDef = !!this.get('isDefault'),
-        isCancel = !isDef && this.get('isCancel') ;
-    
-    if(this.didChangeFor('defaultCancelChanged','isDefault','isCancel')) {
-      this.displayDidChange() ; // make sure to update the UI
-      if (isDef) {
-        this.set('keyEquivalent', 'return'); // change the key equivalent
-      } else if (isCancel) {
-        this.setIfChanged('keyEquivalent', 'escape') ;
-      } else {
-        //restore the default key equivalent
-        this.set("keyEquivalent",this._defaultKeyEquivalent);
-      }
+    var isDefault = !!this.get('isDefault'),
+        isCancel = !isDefault && this.get('isCancel') ;
+
+    if (isDefault) {
+      this.set('keyEquivalent', 'return'); // change the key equivalent
+    } else if (isCancel) {
+      this.set('keyEquivalent', 'escape') ;
+    } else {
+      // Restore the default key equivalent
+      this.set('keyEquivalent', this._defaultKeyEquivalent);
     }
-      
   }.observes('isDefault', 'isCancel'),
-    
-  isMouseDown: false, 
 
-  /** @private 
+  /** @private
     On mouse down, set active only if enabled.
-  */    
+  */
   mouseDown: function(evt) {
     var buttonBehavior = this.get('buttonBehavior');
 
@@ -346,7 +289,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       this._isFocused = YES ;
       this.becomeFirstResponder();
       if (this.get('isVisibleInWindow')) {
-        this.$()[0].focus();
+        this.get('layer').focus();
       }
     }
 
@@ -365,7 +308,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
 
   /** @private
     If mouse was down and we renter the button area, set the active state again.
-  */  
+  */
   mouseEntered: function(evt) {
     if (this._isMouseDown) {
       this.set('isActive', YES);
@@ -375,19 +318,19 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
 
   /** @private
     ON mouse up, trigger the action only if we are enabled and the mouse was released inside of the view.
-  */  
+  */
   mouseUp: function(evt) {
     if (this._isMouseDown) this.set('isActive', NO); // track independently in case isEnabled has changed
     this._isMouseDown = false;
 
     if (this.get('buttonBehavior') !== SC.HOLD_BEHAVIOR) {
-      var inside = this.$().within(evt.target) ;
+      var inside = this.$().within(evt.target);
       if (inside && this.get('isEnabled')) this._action(evt) ;
     }
 
     return YES ;
   },
-  
+
   touchStart: function(touch){
     var buttonBehavior = this.get('buttonBehavior');
 
@@ -409,7 +352,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
 
     return YES;
   },
-  
+
   touchesDragged: function(evt, touches) {
     if (!this.touchIsInBoundary(evt)) {
       if (!this._touch_exited) this.set('isActive', NO);
@@ -418,42 +361,44 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       if (this._touch_exited) this.set('isActive', YES);
       this._touch_exited = NO;
     }
-    
+
     evt.preventDefault();
     return YES;
   },
-  
+
   touchEnd: function(touch){
     this._touch_exited = NO;
     this.set('isActive', NO); // track independently in case isEnabled has changed
 
     if (this.get('buttonBehavior') !== SC.HOLD_BEHAVIOR) {
-      if (this.touchIsInBoundary(touch)) this._action();
+      if (this.touchIsInBoundary(touch) && this.get('isEnabled')) {
+        this._action();
+      }
     }
-    
+
     touch.preventDefault();
     return YES ;
   },
-  
-  
+
+
   /** @private */
   keyDown: function(evt) {
     // handle tab key
-    if (evt.which === 9) {
+    if (evt.which === 9 || evt.keyCode === 9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if(view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
-    }    
+    }
     if (evt.which === 13) {
-      this.triggerAction(evt);
+      this.triggerActionAfterDelay(evt);
       return YES ; // handled
     }
-    return NO; 
+    return NO;
   },
 
   /** @private  Perform an action based on the behavior of the button.
-  
+
    - toggle behavior: switch to on/off state
    - on behavior: turn on.
    - off behavior: turn off.
@@ -461,7 +406,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
   */
   _action: function(evt, skipHoldRepeat) {
     switch(this.get('buttonBehavior')) {
-      
+
     // When toggling, try to invert like values. i.e. 1 => 0, etc.
     case SC.TOGGLE_BEHAVIOR:
       var sel = this.get('isSelected') ;
@@ -471,12 +416,12 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
         this.set('value', this.get('toggleOnValue')) ;
       }
       break ;
-      
+
     // set value to on.  change 0 => 1.
     case SC.TOGGLE_ON_BEHAVIOR:
       this.set('value', this.get('toggleOnValue')) ;
       break ;
-      
+
     // set the value to false. change 1 => 0
     case SC.TOGGLE_OFF_BEHAVIOR:
       this.set('value', this.get('toggleOffValue')) ;
@@ -498,7 +443,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     var action = this.get('action'),
         target = this.get('target') || null,
         rootResponder = this.getPath('pane.rootResponder');
-
+    
     if (action) {
       if (this._hasLegacyActionHandler()) {
         // old school... V
@@ -506,7 +451,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       } else {
         if (rootResponder) {
           // newer action method + optional target syntax...
-          rootResponder.sendAction(action, target, this, this.get('pane'));
+          rootResponder.sendAction(action, target, this, this.get('pane'), null, this);
         }
       }
     }
@@ -525,7 +470,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       }
     }
   },
-  
+
   /** @private */
   _hasLegacyActionHandler: function()
   {
@@ -539,7 +484,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
   _triggerLegacyActionHandler: function( evt )
   {
     if (!this._hasLegacyActionHandler()) return false;
-    
+
     var action = this.get('action');
     if (SC.typeOf(action) === SC.T_FUNCTION) this.action(evt);
     if (SC.typeOf(action) === SC.T_STRING) {
@@ -547,29 +492,28 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       this.action(evt);
     }
   },
-  
+
   /** tied to the isEnabled state */
   acceptsFirstResponder: function() {
     if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
     else return NO;
   }.property('isEnabled'),
-  
+
   willBecomeKeyResponderFrom: function(keyView) {
     // focus the text field.
     if (!this._isFocused) {
       this._isFocused = YES ;
       this.becomeFirstResponder();
       if (this.get('isVisibleInWindow')) {
-        var elem=this.$()[0];
-        if (elem) elem.focus();
+        this.$().focus();
       }
     }
   },
-  
+
   willLoseKeyResponderTo: function(responder) {
     if (this._isFocused) this._isFocused = NO ;
   },
-  
+
   didAppendToDocument: function() {
     if(parseInt(SC.browser.msie, 0)===7 && this.get('useStaticLayout')){
       var layout = this.get('layout'),
@@ -585,7 +529,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
         if(!paddingLeft && isNaN(paddingLeft)) paddingLeft = 0;
         if(!marginRight && isNaN(marginRight)) marginRight = 0;
         if(!marginLeft && isNaN(marginLeft)) marginLeft = 0;
-        
+
         this._labelMinWidthIE7 = w-(paddingRight + paddingLeft)-(marginRight + marginLeft);
         label.css('minWidth', this._labelMinWidthIE7+'px');
       }else{
@@ -593,7 +537,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       }
     }
   }
-  
+
 }) ;
 
 // ..........................................................
@@ -617,3 +561,4 @@ SC.ButtonView.CLICK_AND_HOLD_DELAY = SC.browser.msie ? 600 : 300;
 
 SC.REGULAR_BUTTON_HEIGHT=24;
 
+SC.ButtonView.hasGivenDeprecationWarning = NO;