Toolbar Search: Drop down instead of expanding

[georgestephanis]

Stop sliding the entire menu bar contents needlessly, when it would be simpler (and possibly better for accessibility -- less needless movement on the screen) to just drop down a field the way the search field works in twentyfourteen.

This also makes the search more usable on a cluttered adminbar that's already prone to wrapping onto a second line.

Patch is not intended as the final version -- final version would use admin-bar.js to attach the onfocus and onfocusout events -- this is just intended as a proof of concept for UX testing.

[melchoyce]

George asked me to give this patch a quick look-over for UI/UX stuff.

Overall, it looks good. The menu feels a little slow to appear, but I understand that it's acting the same way as the user dropdown, so maybe that's something we look at separately another time. Otherwise, I'd bump up the padding a bit to match the top/left padding in the user menu: ​https://cloudup.com/cYdSlwdvHN6 (I think it's an extra 6px)

I'd also increase the width of the search bar to accommodate at least another 5 characters — right now it fits around 22 characters comfortable, when ideally we should allow for around 27 characters. (​http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/)

I definitely like this better than the slide-out — it feels a lot less alarming.

[melchoyce]

@georgestephanis Any interest in working on this again?

[georgestephanis]

Sure, I'll take a swing at it some evening this week.

[sabernhardt]

This might be easier (perhaps even without script) if the search icon is moved from the form element to a span within the label tag:

<label for="adminbar-search">
	<span class="ab-icon" aria-hidden="true"></span>
	<span class="screen-reader-text">Search</span>
</label>
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />