Installing the Spector.js add-on in Firefox will cause the shader editor to stop working

[cx20]

I tried installing Spector.js add-on in Firefox.
https://addons.mozilla.org/en-US/firefox/addon/spector-js/
However, Spector.js works but Firefox's shader editor does not work.
Disabling Spector.js add-on will cause the shader editor to work.

OS / Browser : Windows 10 + Firefox 53.0.3 + Spector.js v0.1.2

[sebavan]

Thank you for reporting, I will see how i could fix it ? probably preventing the use of both at the same time.

[cx20]

Perhaps, these two tools (Spector.js and shader editor) may not be available at the same time.
I tried using the bundled version of Spector.js and shader editor but it seems that similar problems occur.

case1):

1. Please access sample page with Firefox.
2. Click the record button of Spector.js.
   
   Spector.js works correctly.
   

case2):

1. Please access sample page with Firefox.
2. Display development tools with [Ctrl] + [Shift] + [I].
3. Click [Shader Editor] - [Reload] Button
   
   The shader editor works correctly.
   
4. Next, click the record button of Spector.js.
   
   An error is displayed and Spector.js does not function properly.

Error: Permission denied to access property "apply"

The following contents are displayed on the console.

Error: Permission denied to access property "apply"
スタックトレース:
n</t.prototype.getSpy/<@https://spectorcdn.babylonjs.com/spector.bundle.js:1:96297
s.prototype.setMatrix@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:5:6386
t.prototype.setMatrix@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:15:31484
i.prototype.bindOnlyWorldMatrix@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:25:12629
i.prototype.bind@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:25:12745
r.prototype.render@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:13:16663
t.prototype.render@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:14:5920
t.renderUnsorted@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:11:3798
t.prototype.render@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:11:2712
t.prototype.render@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:10:31753
i.prototype._renderForCamera@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:12:8993
i.prototype._processSubCameras@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:12:10256
i.prototype.render@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:12:14500
@http://jsrun.it/cx20/G9YP:213:5
s.prototype._renderLoop@https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js:4:24554
t</e.prototype.getCallback/<@https://spectorcdn.babylonjs.com/spector.bundle.js:1:88861
 Array [  ]  spector.bundle.js:1:17116

[sebavan]

interesting indeed thx for the investigation. I really need to improve the overall compatibility with other extensions as well.

[sebavan]

@cx20 I am still trying to figure the best approach concerning this issue.

[sebavan]

I created a ticket on the Mozilla tracker as I am not sure this should happen (at least definitely not when the script is embedded in the page):

https://bugzilla.mozilla.org/show_bug.cgi?id=1372471

[DiThi]

As a workaround, you could avoid call/apply by storing the original functions in the same object. I usually do something like this:

gl._uniform4fv = gl.uniform4fv;
gl.uniform4fv = function(loc, v){
    if(isNaN(v[0])) debugger;
    return this._uniform4fv(loc, v);
}

but of course iterating through all functions, sometimes even using new Function(...) so it doesn't have to resolve the symbol on every call.

[sebavan]

Let me give it a try :-)

[sebavan]

It seems it could work but the main issue is I would have to remap all the calls manually which sounds pretty error prone. Do you have any other workarounds @DiThi ?

[DiThi]

@sebavan I think functions happily accept extra undefined arguments. Try just wrapping all functions before spector wraps them:

for(var key in gl){
    var f = gl[key];
    if(typeof f === 'function' && !/^_orig_/.test(key)){
        gl['_orig_'+key] = gl['_orig_'+key] || f;
        gl[key] = new Function('a','b','c','d','e','f','g','h','i',
            'if(i!==void 0) return this._orig_'+key+'(a,b,c,d,e,f,g,h,i);'+
            'if(h!==void 0) return this._orig_'+key+'(a,b,c,d,e,f,g,h);'+
            'if(g!==void 0) return this._orig_'+key+'(a,b,c,d,e,f,g);'+
            'if(f!==void 0) return this._orig_'+key+'(a,b,c,d,e,f);'+
            'if(e!==void 0) return this._orig_'+key+'(a,b,c,d,e);'+
            'if(d!==void 0) return this._orig_'+key+'(a,b,c,d);'+
            'if(c!==void 0) return this._orig_'+key+'(a,b,c);'+
            'if(b!==void 0) return this._orig_'+key+'(a,b);'+
            'if(a!==void 0) return this._orig_'+key+'(a);'+
            'return this._orig_'+key+'();'
            );
    }
}

edit: Oops, it's not working, let me update it
edit 2: Fixed.
edit 3: Can probably skip a few cases where no API calls have N number of arguments.

[sebavan]

Yup, should not answer before sleeping ;-) I ll try it tonight, Thx.

[sebavan]

@DiThi It seems I ll be able to fix it with your workaround. Just out of curiosity, any idea or pointers to why it works this way and not by relying on apply call or bind ?

I ll push the fix soon, still some cleanup and testing required.

[DiThi]

@sebavan My guess is that functions created in a privileged context forbid access to web contexts to anything but the most basic usage of these functions, to avoid sandbox escapes.

[sebavan]

@DiThi thanks for the explanation.