Auto-expand quick draft textarea

[lessbloat]

Within the quick draft description field, we should auto-expand the height of the textarea once content get's past the default 3 lines. Same for when you paste some text in.

[lessbloat]

26053.diff​ is a first stab at this. Tested in MAC Chrome, FF, and WIN Chrome, FF, IE8.

[seanchayes]

Hey,

Minor changes suggested in modified patch 26053.1

1. Removed a spurious comma.
2. Set a minimum height on the content area (see image before the minimum height was set). Typing the title then pressing "Tab" placed the insertion point in #content but the height was adjusted to make it a little too small for typing. If you start typing the height auto-adjusts but it does look a little odd.

Before setting height:

After setting height:

[helen]

Should probably define a sane max height (apologies if I missed it in skimming the patch). Looks like there's also some trailing whitespace and spaces instead of tabs in the patch that could use some fixing up.

[lessbloat]

26053.2.diff​:

• Refresh of 26053.1.diff
• Removed min-heigh from being set in JS, and placed it in CSS
• Adds max-height to CSS
• Adds height check to make sure editor never exceeds height of window-100px (100px allows the save draft button to still be seen).
• Adds scrollbar in when max height is met.

Tested on MAC Chrome, FF, Safari & WIN Chrome, FF, IE8

[helen]

26053.3.diff​ simplifies the JS a bit, avoids triggering any height changes where possible, and adds a very quick animation to the grow/shrink effect. Also lints clean.

I played with scrollHeight a bit, the way DFW handles it, but it was calculating the height to be about half a line too short. Might have been me not accounting for something - if we can do it that way, and are fine with IE8+ support only, it might be better than doing the div clone thing.

One other thing - it doesn't recalculate a max height at any point after initial load. It did not bother me to have the textarea be short after resizing taller, and it felt really wrong to have it shrink when typing after resizing shorter.

[markjaquith]

26053.6.diff​ changes the following from @helen's .4 version:

• Sets some additional CSS properties on the clone element to deal with long lines of text without spaces.
• Messes with overflow-y on the editor element to make sure scrollbars never show when we're doing dynamic resizing.
• Cleans up .css() indenting.
• Gets rid of the animation. The animation causes multiline pastes to make the content jump.
• Gets rid of the buffer line at the bottom. Not needed. We can instantly resize, even on multiline pastes.
• Kills the resize handle that some browsers add, since we are handling it ourselves.
• Runs the clone as display: none (Potentially faster? Saw someone advocate this. Didn't seem to hurt).

[helen]

Tried to do this just using scrollHeight, but scrollHeight doesn't get smaller when you remove text, and workarounds to reset it meant resizing it multiple times. The only thing I have is to make that overflow-y auto instead, and if we turn off this field with no-JS (see #26376), then we should do the resize: none in CSS.

[helen]

In 26564:

Auto-resize the Quick Draft textarea. props lessbloat, markjaquith, helen. fixes #26053.