[FIXED-134][3.0.0] Permission denied to access property 'dom' from non-chrome context

[ThorstenSuckow]

Ext version tested:

• Ext 3.0.0

Adapter used:

• ext

css used:

• only default ext-all.css

Browser versions tested against:

• FF3.5, FF3.5.1 (firebug 1.4.0 installed)

Operating System:

• WinXP Pro

Description:

• When using DataView with properties "overClass" or "trackOver" enabled, the "onMouseOut" method will trigger the "Permission denied to access property 'dom' from a non-chrome context"-error everytime the mouse enters the DataView's related scrollbar, thus preventing the DataView from removing the "overClass" from the previously hovered DataView entry.

Steps to reproduce the problem:

• 1. Create a DataView with "trackOver" enabled
• 2. Make sure there are enough entries so that a scrollbar gets rendered
• 3. Move the mouse pointer over an entry in the DataView
• 4. Move the mouse pointer to the right over the scrollbar

The result that was expected:

• The "overClass" gets removed from the hovered DataView entry

The result that occurs instead:

• The "overClass" does not get removed from the DataView entry

Possible fix:

Override Ext.Element.contains():

    contains : function(el){
        try {
            return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
        } catch(e) {
            return false;
        }
    }

[Condor]

I assume that the isXUL method also works here and is preferred over a try/catch?

ps. I would fix this deeper down the call chain (e.g. in Event.getTarget/getRelatedTarget).

[ThorstenSuckow]

I assume that the isXUL method also works here and is preferred over a try/catch?

I have too look that up... never heard of that before - the try/catch is the quickest fix I thought of.

ps. I would fix this deeper down the call chain (e.g. in Event.getTarget/getRelatedTarget).

phew... well the error gets triggered as soon as the scrollbars (fb logs it as "slider" element) "dom" property gets accessed, which happens in this method. If there could be any check applied beforehand without too much overhead, I'd go for it.

[Condor]

In this case event.getTarget() shouldn't have returned an element, because it is a inaccessible XUL element.
But the same is true for event.getRelatedTarget(), when you move the mouse from the scrollbar to the dataview again.

(isXUL is a private method in ext-base)

[ThorstenSuckow]

(isXUL is a private method in ext-base)

Well that would mean that for FF a call to isXUL would be made whenever getRelatedTarget/getTarget gets called? This could turn out into additional overhead considering all the mouseover/mouseout events in a larger application.

Anyone aware if that issue was filed for FF at their bug-tracker?

[mschwartz]

I can trigger the same error in my app, and here's what I see that can help.

stack looks like:
contains()
within()
onMouseOut()
h

In onMouseOut(e), e.target.children[0].localName == 'HEAD'

I think you could test for that and just return in h() that's within listen() of Evt.EventManager and we won't be seeing the problem for this case anymore.

Something like:

 onMouseOut : function(e){
    if (Ext.isGecko() && e.target.children[0].localName == 'HEAD') {
      return;
    }
    if(this.lastItem){
      if(!e.within(this.lastItem, true, true)){
        Ext.fly(this.lastItem).removeClass(this.overClass);
        this.fireEvent("mouseleave", this, this.indexOf(this.lastItem), this.lastItem, e);
        delete this.lastItem;
      }
    }
},

Not tested.

EDIT: fixed code to Ext.isGecko() instead of Ext.isFirefox()

[temporary]

Btw, same problem with FF 3.5 and Ext 2.2.1 here, too. And the try/catch solve works the same way...

[mschwartz]

Btw, same problem with FF 3.5 and Ext 2.2.1 here, too. And the try/catch solve works the same way...

I'm good with try/catch, but if you use firebug with "stop on all errors" then it will stop every time and you'll constantly be seeing this crop up

[Condor]

No, that doesn't work. The removeCls method would never be called, leaving the item selected.

ps. Does the isXUL method also work for you?

var isXUL = Ext.isGecko ? function(node){
  return Object.prototype.toString.call(node) == '[object XULElement]';
} : function(){};
...
onMouseOut : function(e){
    if(this.lastItem){
      if(isXUL(e.getTarget()) || !e.within(this.lastItem, true, true)){
        Ext.fly(this.lastItem).removeClass(this.overClass);
        this.fireEvent("mouseleave", this, this.indexOf(this.lastItem), this.lastItem, e);
        delete this.lastItem;
      }
    }
},

[mschwartz]

You're right. Here's a fixed version:

 onMouseOut : function(e){
    if(this.lastItem){
      if((Ext.isGecko() && e.target.children[0].localName == 'HEAD')
 || !e.within(this.lastItem, true, true)){
        Ext.fly(this.lastItem).removeClass(this.overClass);
        this.fireEvent("mouseleave", this, this.indexOf(this.lastItem), this.lastItem, e);
        delete this.lastItem;
      }
    }
},