BookletLayout: Sync outline with panels via focus instead of scroll

Behaviour is now more natural and matches expectations in both
directions.

* When clicking an item in the sidebar, we still scroll to the
  associated panel and focus its input field.
* When scrolling down and seeing 2 or 3 panels at once (they're
  generally not very tall), we now highlight the one your cursor
  is in, instead of the one that last became visible by scrolling
  or the last one you hovered.
* When scrolling down but leaving your cursor focus elsewhere,
  the sidebar will continue to highlight the panel your cursor
  is in, even if it is now off-screen. This is by design and will
  reflect the focus, and match where text goes when you start
  typing. The sidebar is essentially a bird's eye view to remind
  the user where the cursor is (we don't want to take away focus
  based on just scrolling, and doing it only when scrolling more
  than X pixels from the focussed element seems counter intuitive).

Had to change event binding to use OO.ui.Element in order to
bypass jQuery for the focus event because jQuery has a bug with
binding to the 'focusin' event for elements inside iframes.
Created a simplified version of what jQuery does internally.

- http://jsfiddle.net/sw3hr/
- http://bugs.jquery.com/ticket/14180
- https://github.com/jquery/jquery/commit/1cecf64e5aa4153

Change-Id: I31148a171daee1157d35bd61b7a3c16dcff38c23
Merge "BookletLayout: Sync outline with panels via focus instead of scroll"