Improve the inline editor size matching and increase the animation speed.

Review Request #3540 — Created Nov. 19, 2012 and submitted

Improve the inline editor size matching and increase the animation speed.

The multi-line inline editors weren't exactly the correct width of the
<pre> it was representing. This is due to how width calculations work in
elements with padding, which is a particular problem with textareas.
However, the "box-sizing: border-box" CSS rule can fix those
calculations on any browser we care about (even as far back as Firefox
1.0, IE8, Safari 3, and Chrome 1).

Now inlineEditor will put the textarea into the proper box sizing mode
and calculate widths from that, making the width align properly.

For the height, we were using height() and not outerHeight(), giving us
some wrong values and causing a little bit of a jump. outerHeight()
makes it match up seamlessly.

The buttons fade out when closing the editor, and fade in when opening.
This is nicer than them just disappearing.

Single-line editors didn't properly calculate the space they needed, and
could cause the parent size to change. We now factor in margins and set
the width using outerWidth() instead of width().

And finally, to make it feel smoother, the animation speed has increased
by 150ms. It's also customizable now, so callers can always specify
different speeds (and we don't have magic values).
Tested with all the multi-line inlineEditors I found in the product.
  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to master (f894b09)