(part 3) when scratching an itch becomes a stupid timesink

This is part 3 of a post about how adding a keyboard short-cut for the equation editor in google docs turned in to a week long mission into foreign lands such as google closure, chrome extension API, XPCwrappers and even a bit of C++ 

So today's task;

Clicking the "Insert equation" menu item, or the "New Equation..." button in the toolbar cause google docs to run some Javascript which eventually initiates the equation editor widget in the document, in-line at the caret location.
So the task is to find the event that the browser is generating, and google docs is catching, and create one of those events programmatically.



Here chrome's slightly more simplistic and "professional" Javascript debugger has the edge over firebug. While firebug is a great tool, it is sometimes (always?) a mash-up of various functions that are rather brutal in nature. In terms of specificity for event debugging, for firebug and the eventbug plugin, more is definitely less.

Also, and more importantly, google docs is adding event handlers to a hidden frame with baseURI "about:blank" which doesn't appear in the firebug html tab, so it was not obvious how to enable firebug/eventbug to trap the events hitting this "hidden frame". Presumably its possible to retrieve a reference to the hidden frame by iterating the window object, but neither the documentElement or the window.frames array contained references to this event target, so it was pretty confusing and burned a few more hours before I switched to using chrome exclusively for the task.


So pretty quickly I found the event handler for the menu item, and the element that was the source of the event. However after hours (days?) of messing I couldn't get the event to trigger to insert the equation.

Debugging from both the "mousedown" event and following through to the inserting, and starting by trapping the DOM mutation associated with the insert equation and working back indicated that google docs was using the "mousedown" event. But no matter what I tried it was not triggering the same set of actions.


So I was convinced that I was sending an event, from the same source node, that was being handled by the same event Handler, with the same parameter values, and was the same in every respect, how did these google b*****ds know that it was a fake event. (haha, sorry google people, thanks for the free blog, lovely free google products, don't shut me down, sorry very sorry etc...)

I almost cried.

At some point it occurred to me that my event wasn't very realistic because I wasn't also sending the "mouseup" event, so when I added one of those it worked like a charm.

Retrospectively, I suspect much of this event handling functionality is available for the perusal of any idiot like me in the closure source code and docs, so rather than waste a day of fucking idiotic poking the event handler with a stick, I should have taken the opportunity to learn something about the closure library, which looks pretty cool.



Any way, now I had a Javascript function, which inserted an equation widget at the caret. It should be easy to bind a keystroke to the call, or so I thought, onwards to part 4...