Style the extensions virtual keyboard

This patch brings the virtual keyboard up to the proposed v1 styling.

This also changes the layout of some keys to bring the keyboard closer to the v1 spec.

BUG=248525, 248226
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=207834

[SteveT, 2013-06-20 19:08:48]

Over to you, Biao. Please take a look.

Expect at least one more patchset removing the special characters, since they
don't work yet.

[bryeung, 2013-06-20 19:10:49]

Don't take the special characters out!  I'm about to fix them... ;-)

Bryan

On Thu, Jun 20, 2013 at 3:08 PM,  <stevet@chromium.org> wrote:
> Reviewers: bshe,
>
> Message:
> Over to you, Biao. Please take a look.
>
> Expect at least one more patchset removing the special characters, since
> they
> don't work yet.
>
> Description:
> This patch brings the virtual keyboard up to the proposed v1 styling.
>
> This also changes the layout of some keys to bring the keyboard closer to
> the v1
> spec.
>
> BUG=248525,248226
>
> Please review this at https://codereview.chromium.org/16959020/
>
> SVN Base: http://git.chromium.org/chromium/src.git@biaospatch
>
> Affected files:
>   M ui/keyboard/resources/constants.js
>   M ui/keyboard/resources/elements/kb-key.html
>   M ui/keyboard/resources/elements/kb-row.html
>   M ui/keyboard/resources/index.html
>   M ui/keyboard/resources/keysets.html
>   M ui/keyboard/resources/main.css
>
>

[bshe, 2013-06-20 19:41:50]

It looks good. Just have some small nits and questions.

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/elem...
File ui/keyboard/resources/elements/kb-key.html (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/elem...
ui/keyboard/resources/elements/kb-key.html:30: padding-right: 14px;
Not sure why do we need padding here. It should already center aligned
(inherited from kb-row)? I worry this may look bad when keyboard scale (with
absolute pixel value).

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/keys...
File ui/keyboard/resources/keysets.html (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/keys...
ui/keyboard/resources/keysets.html:111:
<kb-key>&#163</kb-key><kb-key>&#162</kb-key><kb-key>&#8364</kb-key><kb-key>&#8482</kb-key>
Not sure if the current representation of special character works well with
bryeung's patch here:
https://chromiumcodereview.appspot.com/16972006/

It looks like bryeung use "&#xUUUU" to specify special characters.
bryeung, could you comment on this?

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/main...
File ui/keyboard/resources/main.css (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/main...
ui/keyboard/resources/main.css:57: -webkit-box-flex: 1.3 !important;
value of .tab and .backspace may also need to change. It seems you increased the
total flex value of second and third row by 0.6 if I understand correctly?

[SteveT, 2013-06-20 20:58:33]

Over to you.

Bryan - PTAL at Biao's question inline. Do you think it's OK for me to commit
this patch with the special characters before you land yours with the fix? They
cause some error messages to log, but don't actually crash or cause problems for
the keyboard.

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/elem...
File ui/keyboard/resources/elements/kb-key.html (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/elem...
ui/keyboard/resources/elements/kb-key.html:30: padding-right: 14px;
Centred text will remain the same. This padding ensures that text aligned on the
left or right will have some padding to keep it looking good within the key
bounds.

Yes, it's true that scaling the keys does not scale this padding well, but 14px
looks fine at most large-screen resolutions, so I think this is OK until we
discuss how to fix the bigger issue of flex-box padding.

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/main...
File ui/keyboard/resources/main.css (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/main...
ui/keyboard/resources/main.css:57: -webkit-box-flex: 1.3 !important;
Nope, this is intentional. We actually want to keep the tab and backspace keys
slightly smaller than the new elongated shift and return keys. This is for
aesthetics, mostly, but we might change this in the future if it doesn't
function well.

Thanks for catching that, though.

[bryeung, 2013-06-20 21:01:57]

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/keys...
File ui/keyboard/resources/keysets.html (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/keys...
ui/keyboard/resources/keysets.html:111:
<kb-key>&#163</kb-key><kb-key>&#162</kb-key><kb-key>&#8364</kb-key><kb-key>&#8482</kb-key>
On 2013/06/20 19:41:51, bshe wrote:
> Not sure if the current representation of special character works well with
> bryeung's patch here:
> https://chromiumcodereview.appspot.com/16972006/
> 
> It looks like bryeung use "&#xUUUU" to specify special characters.
> bryeung, could you comment on this?

Yes, please use the style from that CL.  Thanks!

[bshe, 2013-06-20 21:02:11]

lgtm

[SteveT, 2013-06-20 21:28:59]

Cool. All done. Will CQ.

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/keys...
File ui/keyboard/resources/keysets.html (right):

https://codereview.chromium.org/16959020/diff/5001/ui/keyboard/resources/keys...
ui/keyboard/resources/keysets.html:111:
<kb-key>&#163</kb-key><kb-key>&#162</kb-key><kb-key>&#8364</kb-key><kb-key>&#8482</kb-key>
On 2013/06/20 21:01:57, bryeung wrote:
> On 2013/06/20 19:41:51, bshe wrote:
> > Not sure if the current representation of special character works well with
> > bryeung's patch here:
> > https://chromiumcodereview.appspot.com/16972006/
> > 
> > It looks like bryeung use "&#xUUUU" to specify special characters.
> > bryeung, could you comment on this?
> 
> Yes, please use the style from that CL.  Thanks!

Done.

[commit-bot: I haz the power, 2013-06-20 21:29:52]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/stevet@chromium.org/16959020/15001

[commit-bot: I haz the power, 2013-06-20 21:49:34]

Retried try job too often on chromium_presubmit for step(s) presubmit
http://build.chromium.org/p/tryserver.chromium/buildstatus?builder=chromium_p...

[SteveT, 2013-06-21 01:32:56]

Oh yeah, Bryan - could you OWNERS approve this if it looks good to you? Remember
that I'm still short a rebase on your patch (which I will be doing first thing
tomorrow after your patch lands).

[bryeung, 2013-06-21 03:59:23]

lgtm

[commit-bot: I haz the power, 2013-06-21 12:28:21]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/stevet@chromium.org/16959020/28001

[SteveT, 2013-06-21 12:28:29]

Okay. Rebased and tested. This is ready to go in. CQing.

[commit-bot: I haz the power, 2013-06-21 15:48:43]

Change committed as 207834