Change charm search to use HTML5 placeholder

Change charm search to use HTML5 placeholder

CSS does not allow you to specify a selector for a dynamic empty (or not empty) field value.  The two approaches around it I found are JS and required/:valid.  I chose required/:valid because it required no JS and seemed simpler.  However, this required a CSS workaround: bootstrap wants to highlight focused invalid fields with a red glow.  I changed this to have the usual blue glow in the case of this one field.

https://code.launchpad.net/~gary/juju-gui/placeholder/+merge/131788

(do not edit description out of merge proposal)

[gary.poster, 2012-10-28 16:42:42]

Please take a look.

[bac, 2012-11-01 09:47:56]

Nice change Gary both in effect and implementation.  Thanks.  I hope it can land
very soon.

https://codereview.appspot.com/6816046/diff/1/app/index.html
File app/index.html (right):

https://codereview.appspot.com/6816046/diff/1/app/index.html#newcode57
app/index.html:57: required="required" placeholder="Search for a charm" />
Nice improvement!  I was afraid we were going to have to wait for DOM ready
events to re-enable the field in order to solve this problem.  Glad you figured
out the True solution.

https://codereview.appspot.com/6816046/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6816046/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:103: box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(82, 168, 236, 0.6);
This line should be wrapped.

[benjamin.saller, 2012-11-01 11:02:25]

Well played. I didn't remember that exists, but it does raise the question of
browser support again. IE 10 is supposed to handle placeholder for example but
previous version don't according to the google, still, +1

[gary.poster, 2012-11-01 11:11:19]

Thank you both, Ben and Brad.

https://codereview.appspot.com/6816046/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6816046/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:103: box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(82, 168, 236, 0.6);
On 2012/11/01 09:47:56, bac wrote:
> This line should be wrapped.

Yes, thanks, did this one and line 86 above while I was at it.

[gary.poster, 2012-11-01 11:13:53]

*** Submitted:

Change charm search to use HTML5 placeholder

CSS does not allow you to specify a selector for a dynamic empty (or not empty)
field value.  The two approaches around it I found are JS and required/:valid. 
I chose required/:valid because it required no JS and seemed simpler.  However,
this required a CSS workaround: bootstrap wants to highlight focused invalid
fields with a red glow.  I changed this to have the usual blue glow in the case
of this one field.

R=bac, benjamin.saller
CC=
https://codereview.appspot.com/6816046