sproutcore 1.0.1049.pre.2 → 1.4.0.rc

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

@@ -103,7 +103,7 @@ SC.StaticContentView = SC.View.extend(SC.StaticLayout, {
   /** @private
     If the layer changes, make sure we recalculate the frame.
   */
-  didUpdateLayer: function() {
+  didCreateLayer: function() {
     this.contentLayoutDidChange();
   },
 
@@ -119,5 +119,16 @@ SC.StaticContentView = SC.View.extend(SC.StaticLayout, {
     if (content) {
       context.push(content||'');
     }
+  },
+  
+  touchStart: function(evt){
+    evt.allowDefault();
+    return YES;
+  },
+  
+  touchEnd: function(evt){
+    evt.allowDefault();
+    return YES;
   }
+  
 });

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

@@ -33,7 +33,7 @@ SC.WebView = SC.View.extend(SC.Control, {
     var src = this.get('value');
     if (firstTime) {
       context.push('<iframe src="' + src + 
-      '" style="position: absolute; width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0px;"></iframe>');
+      '" style="position: absolute; width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0p;"></iframe>');
     } else {
       var iframe = this.$('iframe');
       // clear out the previous src, to force a reload

data/lib/frameworks/sproutcore/frameworks/foundation/controllers/object.js

@@ -41,7 +41,7 @@ require('controllers/controller') ;
   setup your bindings so that they will convert the content to a single object 
   like so:
   
-    contentBinding: SC.Binding.Single('MyApp.listController.selection') ;
+    contentBinding: SC.Binding.single('MyApp.listController.selection') ;
 
   This will ensure that your content property is always a single object 
   instead of an array.

data/lib/frameworks/sproutcore/frameworks/foundation/core.js

@@ -38,35 +38,6 @@ SC.DROP_AFTER = 0x04 ;
 */
 SC.DROP_ANY = 0x07 ;
 
-/**
-  Indicates that the content should be aligned to the left.
-*/
-SC.ALIGN_LEFT = 'left';
-
-/**
-  Indicates that the content should be aligned to the right.
-*/
-SC.ALIGN_RIGHT = 'right';
-
-/**
-  Indicates that the content should be aligned to the center.
-*/
-SC.ALIGN_CENTER = 'center';
-
-/**
-  Indicates that the content should be aligned to the top.
-*/
-SC.ALIGN_TOP = 'top';
-
-/**
-  Indicates that the content should be aligned to the middle.
-*/
-SC.ALIGN_MIDDLE = 'middle';
-
-/**
-  Indicates that the content should be aligned to the bottom.
-*/
-SC.ALIGN_BOTTOM = 'bottom';
 
 /**
   This variable is here to make the tab focus behavior work like safari's.
@@ -170,10 +141,8 @@ SC.mixin(Function.prototype, /** @scope Function.prototype */ {
       var args = SC.$A(arguments).slice(2,arguments.length);
       args.unshift(target);
       // f = f.bind.apply(f, args) ;
-      var func = f ;
-      // Use "this" in inner func because it get its scope by 
-      // outer func f (=target). Could replace "this" with target for clarity.
-      f = function() { return func.apply(this, args.slice(1)); } ;
+      var that = this, func = f ;
+      f = function() { return func.apply(that, args.slice(1)); } ;
     }
     return SC.Timer.schedule({ target: target, action: f, interval: interval });
   }    

data/lib/frameworks/sproutcore/frameworks/foundation/ext/run_loop.js

@@ -154,7 +154,7 @@ SC.RunLoop = SC.RunLoop.extend(
   _timeoutDidFire: function() {
     var rl = SC.RunLoop.currentRunLoop;
     rl._timeout = rl._timeoutAt = null ; // cleanup
-    SC.RunLoop.begin().end();  // begin/end runloop to trigger timers.
+    SC.run();  // begin/end runloop to trigger timers.
   }
   
 });

data/lib/frameworks/sproutcore/frameworks/foundation/license.js

@@ -16,4 +16,15 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 Sources of Intellectual Property Included in the YUI Library
 Where not otherwise indicated, all YUI content is authored by Yahoo! engineers and consists of Yahoo!-owned intellectual property. YUI is issued by Yahoo! under the BSD license above. In some specific instances, YUI will incorporate work done by developers outside of Yahoo! with their express permission.
 
+*/
+
+/*! @license
+  jQuery 1.2.6 - New Wave Javascript
+
+  Copyright (c) 2008 John Resig (jquery.com)
+  Dual licensed under the MIT (MIT-LICENSE.txt)
+  and GPL (GPL-LICENSE.txt) licenses.
+  
+  $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
+  $Rev: 5685 $
 */

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/button.js

@@ -193,18 +193,10 @@ SC.Button = {
       elem = this.$('label');  
       if ( (htmlNode = elem[0])){
         if(needsTitle) { 
-          if(this.get('needsEllipsis')){
-            elem.addClass('ellipsis');
-            if(this._ImageTitleCached !== imgTitle) {
-              this._ImageTitleCached = imgTitle; // Update the cache
-              htmlNode.innerHTML = imgTitle;
-            }
-          }else{
-            elem.removeClass('ellipsis');
-            if(this._ImageTitleCached !== imgTitle) {
-              this._ImageTitleCached = imgTitle; // Update the cache
-              htmlNode.innerHTML = imgTitle;
-            }
+          elem.setClass('ellipsis', this.get('needsEllipsis'));
+          if(this._ImageTitleCached !== imgTitle) {
+            this._ImageTitleCached = imgTitle; // Update the cache
+            htmlNode.innerHTML = imgTitle;
           } 
         }
         else { htmlNode.innerHTML = ''; } 
@@ -257,6 +249,8 @@ SC.Button = {
     @returns {Boolean}  YES if handled, NO otherwise
   */
   performKeyEquivalent: function(keystring, evt) {
+    //If this is not visible
+    if (!this.get('isVisibleInWindow')) return NO;
 
     if (!this.get('isEnabled')) return NO;
     var equiv = this.get('keyEquivalent');

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/content_display.js

@@ -42,7 +42,14 @@ SC.ContentDisplay = {
     @property {Array}
   */
   contentDisplayProperties: [],
-  
+
+  /** @private
+    Setup observers on the content object when initializing the mixin.
+  */
+  initMixin: function() {
+    this._display_contentDidChange();
+  },
+
   /** @private */
   _display_contentDidChange: function(target, key, value) {
     // handle changes to the content...
@@ -71,9 +78,7 @@ SC.ContentDisplay = {
         }
       }
 
-      // notify everyone that everything is different now.
-      this.allPropertiesDidChange() ;
-      this.endPropertyChanges() ;
+      this.displayDidChange();
     }
   }.observes('content', 'contentDisplayProperties'),
   

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/control.js

@@ -14,29 +14,6 @@ sc_require('mixins/string');
 */
 SC.MIXED_STATE = '__MIXED__' ;
 
-/**
-  Option for controls to automatically calculate their size (default on controls
-  converted to the newerer, betterer, renderer method).
-  
-  Note: if your control does not have a 'height' set, this will give a warning
-  that it impacts performance. If you want to damn the performance, full speed
-  ahead, use SC.CALCULATED_CONTROL_SIZE.
-*/
-SC.AUTO_CONTROL_SIZE = '__AUTO__';
-
-/**
-  Option for controls to automatically calculate their size, even if the control
-  has no height specified.
-*/
-SC.CALCULATED_CONTROL_SIZE = '__CALCULATED__';
-
-/** 
-  Option for HUGE control size.
-  
-  @property {String}
-*/
-SC.JUMBO_CONTROL_SIZE = 'sc-jumbo-size' ;
-
 /** 
   Option for HUGE control size.
   
@@ -344,12 +321,6 @@ SC.Control = {
     The control size.  This will set a CSS style on the element that can be 
     used by the current theme to vary the appearance of the control.
     
-    Some controls will default to SC.AUTO_CONTROL_SIZE, which will allow you
-    to simply size the control, and the most appropriate control size will
-    automatically be picked; be warned, though, that if you don't specify
-    a height, performance will be impacted as it must be calculated; if you do
-    this, a warning will be issued. If you don't care, use SC.CALCULATED_CONTROL_SIZE.
-    
     @property {String}
   */
   controlSize: SC.REGULAR_CONTROL_SIZE,
@@ -372,60 +343,7 @@ SC.Control = {
     names.mixed = sel === SC.MIXED_STATE;
     names.sel = sel && (sel !== SC.MIXED_STATE) ;
     names.active = this.get('isActive') ;
-    
-    var controlSize = this.get("controlSize");
-    if (controlSize === SC.AUTO_CONTROL_SIZE || controlSize === SC.CALCULATED_CONTROL_SIZE) {
-      controlSize = SC.REGULAR_CONTROL_SIZE;
-    }
-    context.setClass(names).addClass(controlSize);
-    
-    // if the control implements the $input() helper, then fixup the input
-    // tags
-    if (!firstTime && this.$input) {
-      var inps = this.$input();
-      if(inps.attr('type')!=="radio"){
-        this.$input().attr('disabled', disabled);
-      }
-    }
-  },
-  
-  updateRendererMixin: function(r) {
-    r.attr({
-      isSelected: this.get('isSelected'),
-      isEnabled: this.get('isEnabled'),
-      isActive: this.get('isActive')
-    });
-    
-    // we have to figure out if we are passing control size through, or our layout.
-    var controlSize = this.get('controlSize');
-    if (controlSize === SC.AUTO_CONTROL_SIZE || controlSize === SC.CALCULATED_CONTROL_SIZE) {
-      // get the layout
-      controlSize = this.get("layout");
-      
-      // determine if we have height
-      if (SC.none(controlSize.height)) {
-        // throw a performance warning
-        if (this.get("controlSize") !== SC.CALCULATED_CONTROL_SIZE) {
-          SC.Logger.warn(
-            "PERFORMANCE WARNING!!! When your control lacks a height, but is set to automatically " + 
-            "calculate what theme control size to use, it can impact performance. To hide this warning, " +
-            "set controlSize on this control to SC.CALCULATED_CONTROL_SIZE, or if you know the control size, " +
-            "set controlSize to the numeric or string control size."
-          );
-        }
-        
-        var frame = SC.clone(this.get("frame"));
-        if (frame) {
-          controlSize.width = frame.width;
-          controlSize.height = frame.height;
-        }
-      }
-      
-      // okay, we've preprocessed all we need.
-    }
-    
-    // set control size
-    r.attr('controlSize', controlSize);
+    context.setClass(names).addClass(this.get('controlSize'));
   },
   
   /** @private

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/inline_text_field.js

@@ -95,7 +95,8 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     instance.
 
     @params options {Hash} hash of options for editing
-    @returns {Boolean} YES if editor began editing, NO if it failed.
+    @returns {SC.InlineTextFieldView|Boolean} this if editor began editing, 
+      NO if it failed.
   */
   beginEditing: function(options) {
 
@@ -110,7 +111,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     var layout={}, pane, delLayout, paneElem, del;
 
     del = this._delegate = options.delegate ;
-    this.set('delegate', this._delegate);
+    this.set('delegate', del);
     
     // continue only if the delegate allows it
     if (!this.invokeDelegateMethod(del, 'inlineEditorShouldBeginEditing', this)) {
@@ -128,7 +129,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     this._optIsCollection = options.isCollection;
     this._exampleElement = options.exampleElement ;
 
-    if (!this._optframe || !this._delegate) {
+    if (!this._optframe || !del) {
       throw "At least frame and delegate options are required for inline editor";
     }
     
@@ -148,7 +149,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     
     // add to window.
     
-    pane = this._delegate.pane();
+    pane = del.get('pane');
 
     layout.height = this._optframe.height;
     layout.width=this._optframe.width;
@@ -177,8 +178,6 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
    
     pane.appendChild(this);
     
-    del = this._delegate ;
-
     this._className = this.getDelegateProperty(del,"inlineEditorClassName");
     if(this._className && !this.hasClassName(this._className)) {
       this.setClassName(this._className,true);
@@ -197,6 +196,8 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     this.invokeLast(function() {
       this.invokeDelegateMethod(del, 'inlineEditorDidBeginEditing', this);
     });
+    
+    return this;
   },
   
   

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/selection_support.js

@@ -229,7 +229,9 @@ SC.SelectionSupport = {
     var selectionSet = this.get('selection');
     var allowsEmptySelection = this.get('allowsEmptySelection');
     var indexSet; // Selection index set for arranged objects
-    //
+
+    // If we don't have any selection, there's nothing to update
+    if (!selectionSet) return this;
     // Remove any selection set objects that are no longer in the content
     indexSet = selectionSet.indexSetForSource(arrangedObjects);
     if ((indexSet && (indexSet.get('length') !== selectionSet.get('length'))) || (!indexSet && (selectionSet.get('length') > 0))) { // then the selection content has changed
@@ -238,7 +240,7 @@ SC.SelectionSupport = {
     }
     
     // Reselect an object if required (if content length > 0)
-    if ((selectionSet.get('length') === 0) && (arrangedObjects.get('length') > 0) && !allowsEmptySelection) {
+    if ((selectionSet.get('length') === 0) && arrangedObjects && (arrangedObjects.get('length') > 0) && !allowsEmptySelection) {
       this.selectObject(this.get('firstSelectableObject'), NO);
     }
 

data/lib/frameworks/sproutcore/frameworks/foundation/panes/main.js

@@ -29,8 +29,9 @@ require('panes/pane');
   @since SproutCore 1.0
 */
 SC.MainPane = SC.Pane.extend({
+
   /** @private */
-  layout: { left:0, right:0, top:0, bottom:0 },
+  layout: { top: 0, left: 0, bottom: 0, right: 0, minHeight:200, minWidth:200 },
   
   /** @private - extends SC.Pane's method */
   paneDidAttach: function() {

data/lib/frameworks/sproutcore/frameworks/foundation/panes/pane.js

@@ -94,8 +94,6 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
   */
   page: null,
   
-  baseTheme : "sc-base",
-  
   // .......................................................
   // ROOT RESPONDER SUPPORT
   //
@@ -124,8 +122,10 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
   computeParentDimensions: function(frame) {
     if(this.get('designer') && SC.suppressMain) return sc_super();
     
-    var wframe = this.get('currentWindowSize');
-    var wDim = {x: 0, y: 0, width: 1000, height: 1000};
+    var wframe = this.get('currentWindowSize'),
+        wDim = {x: 0, y: 0, width: 1000, height: 1000},
+        layout = this.get('layout');
+
     if (wframe){
       wDim.width = wframe.width;
       wDim.height = wframe.height;
@@ -140,18 +140,42 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
     }
     // If all else fails then we need to Calculate it from the window size and DOM
     else {
+      var size, body, docElement;
+      if(!this._bod || !this._docElement){
+        body = document.body;
+        docElement = document.documentElement;
+        this._body=body;
+        this._docElement=docElement;
+      }else{
+        body = this._body;
+        docElement = this._docElement;
+      }
+      
       if (window.innerHeight) {
         wDim.width = window.innerWidth;
         wDim.height = window.innerHeight;
-      } else if (document.documentElement && document.documentElement.clientHeight) {
-        wDim.width = document.documentElement.clientWidth;
-        wDim.height = document.documentElement.clientHeight; 
-      } else if (document.body) {
-        wDim.width = document.body.clientWidth;
-        wDim.height = document.body.clientHeight;
+      } else if (docElement && docElement.clientHeight) {
+        wDim.width = docElement.clientWidth;
+        wDim.height = docElement.clientHeight; 
+      } else if (body) {
+        wDim.width = body.clientWidth;
+        wDim.height = body.clientHeight;
       }
       this.windowSizeDidChange(null, wDim);
-    }    
+    }
+
+
+    // If there is a minWidth or minHeight set on the pane, take that
+    // into account when calculating dimensions.
+  
+    if (layout.minHeight || layout.minWidth) {
+      if (layout.minHeight) {
+        wDim.height = Math.max(wDim.height, layout.minHeight);
+      }
+      if (layout.minWidth) {
+        wDim.width = Math.max(wDim.width, layout.minWidth);
+      }
+    }
     return wDim;
   },
     
@@ -184,43 +208,22 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
   /**
     Attempts to send the event down the responder chain for this pane.  If you 
     pass a target, this method will begin with the target and work up the 
-    responder chain.  Otherwise, it will begin with the current firstResponder 
+    responder chain.  Otherwise, it will begin with the current rr 
     and walk up the chain looking for any responder that implements a handler 
     for the passed method and returns YES when executed.
-    
+
     @param {String} action
     @param {SC.Event} evt
     @param {Object} target
     @returns {Object} object that handled the event
   */
   sendEvent: function(action, evt, target) {
-    var handler;
+    var handler ;
     
     // walk up the responder chain looking for a method to handle the event
     if (!target) target = this.get('firstResponder') ;
-    while(target) {
-      if (action === 'touchStart') {
-        // first, we must check that the target is not already touch responder
-        // if it is, we don't want to have "found" it; that kind of recursion is sure to
-        // cause really severe, and even worse, really odd bugs.
-        if (evt.touchResponder === target) {
-          target = null;
-          break;
-        }
-        
-        // now, only pass along if the target does not already have any touches, or is
-        // capable of accepting multitouch.
-        if (!target.get("hasTouch") || target.get("acceptsMultitouch")) {
-          if (target.tryToPerform("touchStart", evt)) break;
-        }
-      } else if (action === 'touchEnd' && !target.get("acceptsMultitouch")) {
-        if (!target.get("hasTouch")) {
-          if (target.tryToPerform("touchEnd", evt)) break;
-        }
-      } else {
-        if (target.tryToPerform(action, evt)) break;
-      }
-      
+    while(target && !target.tryToPerform(action, evt)) {
+
       // even if someone tries to fill in the nextResponder on the pane, stop
       // searching when we hit the pane.
       target = (target === this) ? null : target.get('nextResponder') ;
@@ -233,83 +236,16 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
       }
 
       if (!target) target = null;
-      target = target.tryToPerform(action, evt) ? target : null ;
+      else target = target.tryToPerform(action, evt) ? target : null ;
     }
-        
-    return evt.mouseHandler || target ;
-  },
-
-  /**
-    Attempts to send a touch event down the responder chain for this pane. If
-    you pass a target, this method will begin with the target and work up the
-    responder chain. Otherwise, it will begin with the current firstResponder
-    and walk up the chain looking for any responder that implements a handler
-    for the passed method and returns YES or SC.MIXED_STATE when executed.
-
-    This method differs from the sendEvent method by supporting views that
-    return SC.MIXED_STATE. In that case, the event will continue to bubble up
-    the chain until the end is reached or another view returns YES.
 
-    @param {String} action
-    @param {SC.Event} evt
-    @param {Object} target
-    @returns {Array} views an array of views that handled the event
-  */
-  sendTouchEvent: function(action, evt, target) {
-    var handler, response, exclusive = NO, ret = [] ;
-
-    // walk up the responder chain looking for a method to handle the event
-    if (!target) target = this.get('firstResponder') ;
-    while (target) {
-      if (target.respondsTo(action)) {
-        switch (target[action](evt)) {
-          case SC.MIXED_STATE:
-            // The view is interested in events but doesn't want exclusive
-            // control, so keep it in a list of interested views
-            ret.push(target);
-            break;
-          case YES:
-            // The view wants to respond to this event, so we'll stop looking
-            // and give it exclusive control
-            ret = [target];
-            target = null;
-            exclusive = YES;
-            continue;
-        }
-      }
-
-      // even if someone tries to fill in the nextResponder on the pane, stop
-      // searching when we hit the pane.
-      target = (target === this) ? null : target.get('nextResponder') ;
+    // if we don't have a default responder or no responders in the responder
+    // chain handled the event, see if the pane itself implements the event
+    else if (!target && !(target = this.get('defaultResponder'))) {
+      target = this.tryToPerform(action, evt) ? this : null ;
     }
 
-    // if no handler was found in the responder chain, try the default
-    if (!exclusive && (target = this.get('defaultResponder'))) {
-      if (typeof target === SC.T_STRING) {
-        target = SC.objectForPropertyPath(target);
-      }
-
-      if (target) {
-        // Make sure we merge the return arrays instead of clobbering
-        // our earlier results
-        if (target.isResponderContext) {
-          ret = ret.concat(target.sendTouchAction(action, this, evt));
-        } else {
-          if (target.respondsTo(action)) response = target[action](evt);
-
-          switch (response) {
-            case SC.MIXED_STATE:
-              ret.push(target);
-              break;
-            case YES:
-              ret = [target];
-          }
-        }
-      }
-    }
-
-    target = null;
-    return ret ;
+    return evt.mouseHandler || target ;
   },
 
   performKeyEquivalent: function(keystring, evt) {
@@ -444,7 +380,35 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
     if (view) view.didBecomeFirstResponder(view);
     return this ;
   },
-  
+
+  /** @private
+    If the user presses the tab key and the pane does not have a first
+    responder, try to give it to the next eligible responder.
+
+    If the keyDown event reaches the pane, we can assume that no responders in
+    the responder chain, nor the default responder, handled the event.
+  */
+  keyDown: function(evt) {
+    var nextValidKeyView;
+
+    // Handle tab key presses if we don't have a first responder already
+    if (evt.which === 9 && !this.get('firstResponder')) {
+      // Cycle forwards by default, backwards if the shift key is held
+      if (evt.shiftKey) {
+        nextValidKeyView = this.get('previousValidKeyView');
+      } else {
+        nextValidKeyView = this.get('nextValidKeyView');
+      }
+
+      if (nextValidKeyView) {
+        this.makeFirstResponder(nextValidKeyView);
+        return YES;
+      }
+    }
+
+    return NO;
+  },
+
   /** @private method forwards status changes in a generic way. */
   _forwardKeyChange: function(shouldForward, methodName, pane, isKey) {
     var keyView, responder, newKeyView;
@@ -600,7 +564,6 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
     if (!this.get('isPaneAttached')) return this ; // nothing to do
     
     // remove layer...
-    this.set('isVisibleInWindow', NO);
     var dom = this.get('layer') ;
     if (dom && dom.parentNode) dom.parentNode.removeChild(dom) ;
     dom = null ;
@@ -619,6 +582,7 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
     
     // clean up some of my own properties
     this.set('isPaneAttached', NO) ;
+    this.parentViewDidChange();
     return this ;
   },
   
@@ -778,13 +742,14 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
     if (this.get("hasTouchIntercept") && SC.platform.touch) {
       this.set("usingTouchIntercept", YES);
       var div = document.createElement("div");
-      div.style.position = "absolute";
-      div.style.left = "0px";
-      div.style.top = "0px";
-      div.style.right = "0px";
-      div.style.bottom = "0px";
-      div.style.webkitTransform = "translateZ(0px)";
-      div.style.zIndex = this.get("zIndex") + this.get("touchZ");
+      var divStyle = div.style;
+      divStyle.position = "absolute";
+      divStyle.left = "0px";
+      divStyle.top = "0px";
+      divStyle.right = "0px";
+      divStyle.bottom = "0px";
+      divStyle.webkitTransform = "translateZ(0px)";
+      divStyle.zIndex = this.get("zIndex") + this.get("touchZ");
       div.className = "touch-intercept";
       div.id = "touch-intercept-" + SC.guidFor(this);
       this._touchIntercept = div;
@@ -817,12 +782,12 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
   recomputeIsVisibleInWindow: function() {
     if (this.get('designer') && SC.suppressMain) return sc_super();
     var previous = this.get('isVisibleInWindow'),
-        current  = this.get('isVisible');
+        current  = this.get('isVisible') && this.get("isPaneAttached");
 
     // If our visibility has changed, then set the new value and notify our
     // child views to update their value.
     if (previous !== current) {
-      this.set('isVisibleInWindow', current) ;
+      this.set('isVisibleInWindow', current);
       
       var childViews = this.get('childViews'), len = childViews.length, idx;
       for(idx=0;idx<len;idx++) {
@@ -830,33 +795,32 @@ SC.Pane = SC.View.extend(SC.ResponderContext,
       }
 
 
-      // We'll also kick off some necessary work when the visibility changes.
-      // This more appropriately belongs in a 'isVisibleInWindow' observer or
-      // some such helper method because this work is not strictly related to
-      // computing the visibility, but view performance is critical, so
-      // avoiding the extra observer is worthwhile.
+      // For historical reasons, we'll also layout the child views if
+      // necessary.
       if (current) {
-        // If we just became visible, update layer + layout if needed...
-        this.displayDidChange();
-
-        if (this.get('childViewsNeedLayout')) {
-          this.invokeOnce(this.layoutChildViewsIfNeeded);
-        }
+        if (this.get('childViewsNeedLayout')) this.invokeOnce(this.layoutChildViewsIfNeeded);
       }
       else {
-        // We need to set some internal state to indicate that we went from
-        // visible to invisible.
-        //
-        // (Typically, invisible views are not updated for performance
-        // reasons, but if we went from visible to invisible, we need to
-        // update once.)
-        this._forceLayerUpdateDueToVisibilityChange = YES;
-        this.displayDidChange();
-
-        // Also, if we were previously 'firstResponder', resign it.
-        if (this.get('isFirstResponder')) this.resignFirstResponder();
+        // Also, if we were previously visible and were the key pane, resign
+        // it.  This more appropriately belongs in a 'isVisibleInWindow'
+        // observer or some such helper method because this work is not
+        // strictly related to computing the visibility, but view performance
+        // is critical, so avoiding the extra observer is worthwhile.
+        if (this.get('isKeyPane')) this.resignKeyPane();
       }
     }
+
+    // If we're in this function, then that means one of our ancestor views
+    // changed, or changed its 'isVisibleInWindow' value.  That means that if
+    // we are out of sync with the layer, then we need to update our state
+    // now.
+    //
+    // For example, say we're isVisible=NO, but we have not yet added the
+    // 'hidden' class to the layer because of the "don't update the layer if
+    // we're not visible in the window" check.  If any of our parent views
+    // became visible, our layer would incorrectly be shown!
+    this.updateLayerIfNeeded(YES);
+
     return this;
   },