sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -9,23 +9,21 @@
 
 (function() {
   var pane = SC.ControlTestPane.design()
-    .add("horizontal", SC.SplitView, { 
+    .add("horizontal", SC.SplitView, {
 	  layout: { right: 20, bottom: 20, width: 100, height: 23 },
       layoutDirection: SC.LAYOUT_HORIZONTAL,canCollapseViews: NO
     })
-  
-    .add("vertical", SC.SplitView, { 
+
+    .add("vertical", SC.SplitView, {
       layoutDirection: SC.LAYOUT_VERTICAL,canCollapseViews: NO
     })
-  	.add("collapsable", SC.SplitView, { 
+  	.add("collapsable", SC.SplitView, {
       layoutDirection: SC.LAYOUT_HORIZONTAL,canCollapseViews: YES
     });
-      
-  pane.show(); // add a test to show the test pane
 
   // ..........................................................
   // TEST VIEWS
-  // 
+  //
   module('SC.SplitView ui', {
     setup: function(){
       htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
@@ -53,7 +51,7 @@
     ok(!view.$().hasClass('vertical'), 'should not be have vertical class');
 	equals(view.get('layoutDirection'),SC.LAYOUT_HORIZONTAL);
 	equals(view.get('canCollapseViews'),YES,"the view should be collapsable");
-  });		
+  });
  })();
 
 

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/stacked/ui_comments.js

@@ -7,12 +7,12 @@
 
 /* Test SC.StackedView with a Comments example. */
 
-var CommentView = SC.View.extend(SC.StaticLayout, SC.Control, {
-  
+var CommentView = SC.View.extend(SC.Control, {
+
   useStaticLayout: YES,
-  
+
   content: null,
-  
+
   classNames: 'comment-view',
 
   contentKeys: {
@@ -30,17 +30,17 @@ var CommentView = SC.View.extend(SC.StaticLayout, SC.Control, {
   contentPropertyDidChange: function(target, key) {
 
     // update everything!
-    if (key === '*') {      
+    if (key === '*') {
       this.updateFromLabel().updateCommentLabel();
     } else if (key === 'from' || key === 'date') {
       this.updateFromLabel();
     } else if (key === 'comment') {
       this.updateCommentLabel();
     }
-    
+
     if (this.owner && this.owner.updateHeight) this.owner.updateHeight();
   },
-  
+
   updateFromLabel: function() {
     var content = this.get('content'),
         from    = content ? content.get('from') : 'Anonymous',
@@ -49,7 +49,7 @@ var CommentView = SC.View.extend(SC.StaticLayout, SC.Control, {
     this.fromLabel.set('value', str);
     return this ;
   },
-  
+
   updateCommentLabel: function() {
     var content = this.get('content'),
         comment = content ? content.get('comment') : '(No Comment)';
@@ -58,16 +58,16 @@ var CommentView = SC.View.extend(SC.StaticLayout, SC.Control, {
 
   // ..........................................................
   // BASE VIEWS
-  // 
+  //
 
   childViews: 'fromLabel commentLabel editButton replyButton'.w(),
-  
+
   fromLabel: SC.LabelView.extend({
     tagName: "label",
     layout: { left: 0, top: 0, right: 0, height: 18 }
   }),
-  
-  commentLabel: SC.LabelView.extend(SC.StaticLayout, {
+
+  commentLabel: SC.LabelView.extend({
     useStaticLayout: YES,
     tagName: "p"
   }),
@@ -83,33 +83,33 @@ var CommentView = SC.View.extend(SC.StaticLayout, SC.Control, {
     titleMinWidth: 0,
     layout: { bottom: 4, right: 4, height: 21, width: 50 }
   })
-  
+
 });
 
 var content = [
-  SC.Object.create({ 
-    from: "Joe", 
-    date: "Today", 
+  SC.Object.create({
+    from: "Joe",
+    date: "Today",
     comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
   }),
-  SC.Object.create({ 
-    from: "Joe", 
-    date: "Today", 
+  SC.Object.create({
+    from: "Joe",
+    date: "Today",
     comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
   }),
-  SC.Object.create({ 
-    from: "Joe", 
-    date: "Today", 
+  SC.Object.create({
+    from: "Joe",
+    date: "Today",
     comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
   }),
-  SC.Object.create({ 
-    from: "Joe", 
-    date: "Today", 
+  SC.Object.create({
+    from: "Joe",
+    date: "Today",
     comment: "I think this new class is a great idea!  I've always wanted less control but more flexibility."
   }),
-  SC.Object.create({ 
-    from: "Jane", 
-    date: "Yesterday", 
+  SC.Object.create({
+    from: "Jane",
+    date: "Yesterday",
     comment: "If only you would rewrite this in Flash.  Then I could get really excited about it.  I like it when Adobe controls my destiny."
   })
 ];
@@ -126,13 +126,10 @@ var pane = SC.ControlTestPane.design()
     content: content,
     exampleView: CommentView
   });
-  
-pane.show(); // add a test to show the test pane
-window.pane = pane ;
 
 // ..........................................................
 // BASIC TESTS
-// 
+//
 module("Basic Tests", {
   setup: function(){
     htmlbody(["<style>",
@@ -152,20 +149,20 @@ module("Basic Tests", {
 test("removing an item should delete childView and adjust height", function() {
   var view = pane.view('basic'),
       item = content[0];
-      
+
   equals(view.getPath('childViews.length'), content.length, 'precond - should have child views equal to current content');
   var oldHeight = view.get('frame').height; // save height.
-  
+
   SC.run(function() { content.removeAt(0); }); // remove first item
 
 
   equals(view.getPath('childViews.length'), content.length, 'view should remove childView for removed content items');
-  var newHeight = view.get('frame').height; 
+  var newHeight = view.get('frame').height;
   ok(newHeight < oldHeight, 'view height should adjust to reflect new content. (old height: %@ current height: %@)'.fmt(oldHeight, newHeight));
-  
+
   // restore old content
   SC.run(function() { content.insertAt(0, item); });
-  
+
 });
 
 window.content = content ;
@@ -173,15 +170,15 @@ window.content = content ;
 test("inserting an item should add childView and adjust height", function() {
   var view = pane.view('basic'),
       item = extra; // we will insert another one
-      
+
   equals(view.getPath('childViews.length'), content.length, 'precond - should have child views equal to current content');
   var oldHeight = view.get('frame').height; // save height.
-  
+
   SC.run(function() { content.pushObject(item); }); // add another item
 
 
   equals(view.getPath('childViews.length'), content.length, 'view should add childView for added content item');
-  var newHeight = view.get('frame').height; 
+  var newHeight = view.get('frame').height;
   ok(newHeight > oldHeight, 'view height should adjust to reflect new content. (old height: %@ current height: %@)'.fmt(oldHeight, newHeight));
 
   // restore
@@ -192,9 +189,9 @@ test("inserting an item should add childView and adjust height", function() {
 test("editing an item should automatically adjust the height", function() {
   var view = pane.view('basic'),
       item = content[0],
-      childView = view.childViews[0], 
+      childView = view.childViews[0],
       old = item.get('comment');
-  
+
   ok(childView, 'stacked view should have child view');
   equals(childView.get('content'), item, 'first childView should own first content item');
 
@@ -202,26 +199,26 @@ test("editing an item should automatically adjust the height", function() {
 
   // change comment
   SC.run(function() { item.set('comment', 'This is a new comment'); });
-  
+
   // should have updated UI and adjusted height of collection
   equals(childView.$().find('p').text(), 'This is a new comment', 'Item view should now contain comment');
-  
+
   var newHeight = view.get('frame').height;
   ok(newHeight < height, 'view height should adjust to reflect new content. (old height: %@ current height: %@)'.fmt(height, newHeight));
 
   // restore
   SC.run(function() { item.set('comment', old); });
-  
+
   newHeight = view.get('frame').height;
   equals(newHeight, height, 'view height should restore to old height when content is edited again. (old height: %@ current height: %@)'.fmt(height, newHeight));
-  
+
 });
 
 // ..........................................................
 // SPECIAL CASES
-// 
+//
 
-// tests specific bug where a series of many edits strung together would 
+// tests specific bug where a series of many edits strung together would
 // cause the height to get out of sync.
 test("adding, removing then editing items should still keep height the same", function() {
 
@@ -229,18 +226,18 @@ test("adding, removing then editing items should still keep height the same", fu
       item = content[0],
       old  = item.get('comment'),
       height = view.get('frame').height; // save old height
-      
+
   SC.run(function() { content.removeAt(0); });
   SC.run(function() { content.insertAt(0, item); });
   SC.run(function() { content.pushObject(extra); });
   SC.run(function() { content.popObject(); });
-  
+
   SC.run(function() { item.set('comment', 'Short comment'); });
   SC.run(function() { item.set('comment', old); });
-  
+
   var newHeight = view.get('frame').height;
   equals(newHeight, height, 'view height should restore to old height when content is edited again. (old height: %@ current height: %@)'.fmt(height, newHeight));
-  
+
 });
 
 

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

@@ -59,8 +59,6 @@
       layout: { left:12, height: 200, right:12, top:12}
     });
 
-  pane.show(); // add a test to show the test pane
-
   // ..........................................................
   // TEST VIEWS
   //
@@ -82,13 +80,13 @@
    });
 
 
-   test("Check that the tabView has the right classes set", function() {
+  test("Check that the tabView has the right classes set", function() {
      var view = pane.view('tabView1');
      var viewElem = view.$(),
          segmentedView;
-     
+
      segmentedView = view.get('segmentedView');
-     
+
      ok(viewElem.hasClass('sc-view'), 'tabView1.hasClass(sc-view) should be YES');
      ok(viewElem.hasClass('sc-tab-view'), 'tabView1.hasClass(sc-tab-view) should be YES');
      ok(view.$('.sc-segmented-view').length, 'tabView1 should contain a segmented view');
@@ -105,7 +103,26 @@
      segmentedView = view.get('segmentedView');
      ok(view.$('.sc-segmented-view').hasClass('sc-regular-size'), 'tabView3 should contain a segmented view with sc-regular-size class');
      equals(undefined, segmentedView.get('controlSize'), "tabView3's segmentedView's controlSize");
-   });
+  });
+
+  /**
+    There was a regression where the segmented view no longer appeared above the
+    container view, because a default z-index property was applied to all
+    segmented views.  Instead, we simply need to ensure that the DOM order is
+    correct for the TabView.
+  */
+  test("Check the DOM position of the segmented view and container", function () {
+    var view = pane.view('tabView1');
+    var viewElem = view.$(),
+      containerElem,
+      segmentedElem;
+
+    segmentedElem = view.get('segmentedView').get('layer');
+    containerElem = view.get('containerView').get('layer');
+
+    equals(viewElem.children()[0], containerElem, "The first child layer of the tab view layer should be the container view layer.");
+    equals(viewElem.children()[1], segmentedElem, "The second child layer of the tab view layer should be the segmented view layer.");
+  });
 
 
 })();

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

@@ -14,10 +14,8 @@ var pane;
   pane = SC.ControlTestPane.design()
 
   .add("aria-role_ToolbarView", SC.ToolbarView, {
-    
-  });
 
-  pane.show();
+  });
 
   module('SC.ToolbarView UI', pane.standardSetup());
 
@@ -26,4 +24,4 @@ var pane;
 
     equals(viewElem.attr('role'), 'toolbar', "toolbar view has correct role set");
   });
-})();
+})();

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

@@ -38,11 +38,10 @@
     }
   });
 
-  pane.show(); // add a test to show the test pane
   // ..........................................................
   // TEST VIEWS
-  // 
-  module('SC.WebView UI');
+  //
+  module('SC.WebView UI', pane.standardSetup());
 
   test("attributes tests",
   function() {
@@ -93,8 +92,8 @@
   function() {
     var view = pane.view('don\'t auto resize');
     equals(view.get('shouldAutoResize'), NO, 'should have auto resize flag as false');
-    
-    /** set the src a bit late so that the following onload event get's hooked 
+
+    /** set the src a bit late so that the following onload event get's hooked
     up before it actually loads
     */
     SC.RunLoop.begin();

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

@@ -17,7 +17,7 @@ SC.TOGGLE_BEHAVIOR = 'toggle';
   @constant
   @type String
 */
-SC.PUSH_BEHAVIOR =   'push';
+SC.PUSH_BEHAVIOR = 'push';
 
 /**
   @static
@@ -61,15 +61,15 @@ SC.ButtonView = SC.View.extend(SC.Control,
 /** @scope SC.ButtonView.prototype */ {
 
   /**
-    Tied to the isEnabled state
+    Tied to the isEnabledInPane state
 
     @type Boolean
     @default YES
   */
   acceptsFirstResponder: function() {
-    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabled'); }
+    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabledInPane'); }
     return NO;
-  }.property('isEnabled'),
+  }.property('isEnabledInPane'),
 
   /**
     @type Array
@@ -78,6 +78,21 @@ SC.ButtonView = SC.View.extend(SC.Control,
   */
   classNames: ['sc-button-view'],
 
+  /**
+    Whether the title and toolTip will be escaped to avoid HTML injection attacks
+    or not.
+
+    You should only disable this option if you are sure you are displaying
+    non-user generated text.
+
+    Note: this is not an observed display property.  If you change it after
+    rendering, you should call `displayDidChange` on the view to update the layer.
+
+    @type Boolean
+    @default true
+   */
+  escapeHTML: true,
+
   /**
     The theme to apply to the button. By default, a subtheme with the name of
     'square' is created for backwards-compatibility.
@@ -166,8 +181,6 @@ SC.ButtonView = SC.View.extend(SC.Control,
   */
   title: "",
 
-  tooltip: "",
-
   /**
     If set, the title property will be updated automatically
     from the content using the key you specify.
@@ -201,6 +214,9 @@ SC.ButtonView = SC.View.extend(SC.Control,
     fit inside of the visible area. This feature is not available on all
     browsers.
 
+    Note: this is not an observed display property.  If you change it after
+    rendering, you should call `displayDidChange` on the view to update the layer.
+
     @type Boolean
     @default YES
   */
@@ -386,7 +402,7 @@ SC.ButtonView = SC.View.extend(SC.Control,
   */
   triggerActionAfterDelay: function(evt) {
     // If this button is disabled, we have nothing to do
-    if (!this.get('isEnabled')) return NO;
+    if (!this.get('isEnabledInPane')) return NO;
 
     // Set active state of the button so it appears highlighted
     this.set('isActive', YES);
@@ -448,25 +464,17 @@ SC.ButtonView = SC.View.extend(SC.Control,
   */
   ariaRole: 'button',
 
-  // display properties that should automatically cause a refresh.
-  // isCancel and isDefault also cause a refresh but this is implemented as
-  // a separate observer (see below)
-
   /**
     The following properties affect how `SC.ButtonView` is rendered, and will
     cause the view to be rerendered if they change.
 
+    Note: 'value', 'isDefault', 'isCancel' are also display properties, but are
+    observed separately.
+
     @type Array
-    @default [
-      'icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel',
-      'escapeHTML', 'needsEllipsis', 'tooltip', 'supportFocusRing'
-    ]
+    @default ['icon', 'displayTitle', 'displayToolTip', 'supportFocusRing', 'buttonBehavior']
   */
-  displayProperties: [
-    'icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel',
-    'escapeHTML', 'needsEllipsis', 'tooltip', 'supportFocusRing',
-    'buttonBehavior'
-  ],
+  displayProperties: ['icon', 'displayTitle', 'displayToolTip', 'supportFocusRing', 'buttonBehavior'],
 
   /**
     The name of the render delegate in the theme that should be used to
@@ -480,16 +488,11 @@ SC.ButtonView = SC.View.extend(SC.Control,
   */
   renderDelegateName: 'buttonRenderDelegate',
 
-   contentKeys: {
-     'contentValueKey': 'value',
-     'contentTitleKey': 'title',
-     'contentIconKey': 'icon'
-   },
-
-  /** @private - when title changes, dirty display. */
-  _button_displayObserver: function() {
-    this.displayDidChange();
-  }.observes('title', 'icon', 'value'),
+  contentKeys: {
+    'contentValueKey': 'value',
+    'contentTitleKey': 'title',
+    'contentIconKey': 'icon'
+  },
 
   /**
     Handle a key equivalent if set.  Trigger the default action for the
@@ -503,7 +506,7 @@ SC.ButtonView = SC.View.extend(SC.Control,
     //If this is not visible
     if (!this.get('isVisibleInWindow')) return NO;
 
-    if (!this.get('isEnabled')) return NO;
+    if (!this.get('isEnabledInPane')) return NO;
     var equiv = this.get('keyEquivalent');
 
     // button has defined a keyEquivalent and it matches!
@@ -572,6 +575,9 @@ SC.ButtonView = SC.View.extend(SC.Control,
     var value = this.get('value'),
         state = this.computeIsSelectedForValue(value);
     this.set('isSelected', state) ; // set new state...
+
+    // value acts as a display property
+    this.displayDidChange();
   }.observes('value'),
 
   /** @private
@@ -621,6 +627,9 @@ SC.ButtonView = SC.View.extend(SC.Control,
       // Restore the default key equivalent
       this.set('keyEquivalent', this._defaultKeyEquivalent);
     }
+
+    // isDefault and isCancel act as display properties
+    this.displayDidChange();
   }.observes('isDefault', 'isCancel'),
 
   /** @private
@@ -629,7 +638,7 @@ SC.ButtonView = SC.View.extend(SC.Control,
   mouseDown: function(evt) {
     var buttonBehavior = this.get('buttonBehavior');
 
-    if (!this.get('isEnabled')) return YES ; // handled event, but do nothing
+    if (!this.get('isEnabledInPane')) return YES ; // handled event, but do nothing
     this.set('isActive', YES);
     this._isMouseDown = YES;
 
@@ -667,12 +676,12 @@ SC.ButtonView = SC.View.extend(SC.Control,
     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
+    if (this._isMouseDown) this.set('isActive', NO); // track independently in case isEnabledInPane has changed
     this._isMouseDown = false;
 
     if (this.get('buttonBehavior') !== SC.HOLD_BEHAVIOR) {
       var inside = this.$().within(evt.target);
-      if (inside && this.get('isEnabled')) this._action(evt) ;
+      if (inside && this.get('isEnabledInPane')) this._action(evt) ;
     }
 
     return YES ;
@@ -682,7 +691,7 @@ SC.ButtonView = SC.View.extend(SC.Control,
   touchStart: function(touch){
     var buttonBehavior = this.get('buttonBehavior');
 
-    if (!this.get('isEnabled')) return YES ; // handled event, but do nothing
+    if (!this.get('isEnabledInPane')) return YES ; // handled event, but do nothing
     this.set('isActive', YES);
 
     if (buttonBehavior === SC.HOLD_BEHAVIOR) {
@@ -715,10 +724,10 @@ SC.ButtonView = SC.View.extend(SC.Control,
   /** @private */
   touchEnd: function(touch){
     this._touch_exited = NO;
-    this.set('isActive', NO); // track independently in case isEnabled has changed
+    this.set('isActive', NO); // track independently in case isEnabledInPane has changed
 
     if (this.get('buttonBehavior') !== SC.HOLD_BEHAVIOR) {
-      if (this.touchIsInBoundary(touch) && this.get('isEnabled')) {
+      if (this.touchIsInBoundary(touch) && this.get('isEnabledInPane')) {
         this._action();
       }
     }
@@ -730,7 +739,7 @@ SC.ButtonView = SC.View.extend(SC.Control,
   /** @private */
   keyDown: function(evt) {
     // handle tab key
-     if(!this.get('isEnabled')) return YES;
+     if(!this.get('isEnabledInPane')) return YES;
     if (evt.which === 9 || evt.keyCode === 9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if(view) view.becomeFirstResponder();