code-dot-org/code-dot-org — pull request #235 by cpirich (2014-10-22 20:07:12+00:00)
Title: attachEventHandler, JS step viewing

Three big things going on here:
(1) implemented a new 'attachEventHandler' API in webapp - this allows the student to create event handlers for things like button clicks. Right now, it is really generic and you pass in the DOM event name (e.g. 'click') and the DOM element id as parameters.
(2) solved a tricky problem involving the JS interpreter and native/interpreted interop. I already had interpreted-> native function calls working. (1) above required that I figure out a solution for native-> interpreted callbacks. Dave gave me the idea of building a mini-runtime in the interpreted world which can actually invoke the interpreted callbacks. I had to build some more sophisticated marshaling to implement a native function that could return an interpreted function pointer with optional arguments.
(3) Since (2) above required that we move to running the interpreter one step at a time inside the onTick() loop, I added some code to highlight the Javascript code that is currently executing - for now, this only works in the ace editor when Javascript is showing (not for droplet/ice blocks). There are some helper functions added that help translate between code byte offsets (start, end) and ace editor ranges (start.row, start.col, end.row, end.col).