<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Source links in Event Listeners panel are missing for bound functions"
href="https://bugs.webkit.org/show_bug.cgi?id=146886#c3">Comment # 3</a>
on <a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Source links in Event Listeners panel are missing for bound functions"
href="https://bugs.webkit.org/show_bug.cgi?id=146886">bug 146886</a>
from <span class="vcard"><a class="email" href="mailto:joepeck@webkit.org" title="Joseph Pecoraro <joepeck@webkit.org>"> <span class="fn">Joseph Pecoraro</span></a>
</span></b>
<pre>After discussion with Devin, I think what we really want is for getFunctionDetails to provide the complete chain of bound functions. For instance a bound function's target function may itself be a bound function.
You could imagine a chain like this:
1 function addArguments() {
2 var sum = 0;
3 for (var x of arguments) { sum += x; }
4 return sum;
5 }
6 var foo = addArguments.bind(null, 1);
7 var bar = foo.bind(null, 2);
Where logging `bar` has a chain like this:
JSBoundFunction (name=bound bound addArguments, location=script.js:7, boundThis=null, boundArguments=[1], scope=...)
JSBoundFunction (name=bound addArguments, location=script.js:6, boundThis=null, boundArguments=[2], scope=...)
JSFunction (name=addArguments, location=script.js:1, scope=...)
The frontend should probably get a list of function details about each of these functions in the chain and decide how to display that information. You could think of this as a call stack for the creation of this function and each of its pieces.
Note this chain is always one directional, it cannot be cyclic.
-----
The same data can be useful for backtraces which include bound functions.
For example this test:
<script>
function foo() { bar.bind(null)(); }
function bar() { ({}).x.x; }
foo();
</script>
Currently Produces:
[Error] TypeError: undefined is not an object (evaluating '({}).x.x')
bar (test.html:2)
bar
foo (test.html:1)
(anonymous function) (test.html:3)
There are a couple things wrong with this. It should produce:
[Error] TypeError: undefined is not an object (evaluating '({}).x.x')
bar (test.html:2)
bound bar (test.html:1)
foo (test.html:1)
(global code) (test.html:3)
Note the "bound bar" being the location of the .bind() invocation. It seems JavaScriptCore is not stashing the location this function was created.
-----
So I think in fixing this we should consider consistent displaying of Functions given that any function may be bound and have a chain of origin.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>