Keypress event bubbling up from embedded browser

Question

I have a Firefox extension that adds a button to the toolbar (navbar to be exact). When the button is pressed, a XUL <panel> (which is a child element of the button) is opened with an <iframe> embedded in it. An HTML document is loaded into the panel to display the contents of the popup.

If the HTML contains an input field, I would not expect keypress events in that field to bubble up the DOM. However, they do bubble up to the <panel> that contains the embedded iframe and thereforth up to the toolbar button. Any idea why the panel gets the events even though they should be captured and processed by the HTML elements in the embedded browser?

You didn't happen to forget type="content", did you? Note that input fields handle keypress events by merely calling preventDefault(), they don't stop event propagation. — Wladimir Palant
Well the type of the iframe is chrome in this case, since we need the HTML document to have elevated privileges. Are you saying that the propagation behavior is different in this case? — Matthew Gertner
Anyway, based on what you said, perhaps the behavior I am observing is normal and my solution (which is to catch and stop propagation of keypress events at the <panel> level) is correct. — Matthew Gertner
Yes, type="content" is exactly what stops events from being propagated from the frame to the container document. Note that it has nothing to do with privileges, the document loaded into the frame can have elevated privileges regardless. Also: yes, stopping propagation of the events at a higher level is the usual solution. — Wladimir Palant
Okay cool. If you had posted an answer I would have accepted it. :-P — Matthew Gertner

Wladimir Palant Wladimir Palant · Accepted Answer · 2013-05-11T10:00:54

You need to use type="content" on your <iframe> tag for the events to stop at the frame boundary - that's one of the security mechanisms protecting browser's chrome from content pages. It also prevents JavaScript code in the frame from accessing the browser's chrome via window.parent and changing its location for example. Note that the frame can still have chrome privileges regardless of that - just like you can load a chrome:// URL into a browser tab and it will work correctly.

The obvious alternative (for trusted frame content only) is to call event.stopPropagation() in an event handler attached to the <iframe> tag. Note that default widgets (input fields included) don't do that when they handle events, they rather call event.preventDefault(). This makes sure that higher-level widgets will normally ignore the event, your own code can still handle it however.

Keypress event bubbling up from embedded browser

1 Answers