959049 - [keyboard refactor] support landscape mode

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Keyboard, defect)

Description

[David Flanagan [:djf]]

The current system keyboard reduces the height of each of the keyboard rows in landscape mode.  The new keyboard needs to do this as well, because it currently hardly allows enough room for content when it is displayed in landscape.

Comment 1

[David Flanagan [:djf]]

Attachment: link to patch on github

Tim,

This patch is mostly CSS, but also has some related JavaScript changes, including one that resizes cached page layouts on demand rather than resizing them all on every orientation change.

If you don't have time to review please forward to Jan.

Casey: do we have an actual visual spec for landscape mode of the keyboard?  Could you take a look at the demo keyboard with this patch applied?  (Note though that I want to just go ahead and land this if it gets r+, and do visual fixes in a followup.)

Comment 2

[David Flanagan [:djf]]

Tim: this is an overnight airplane patch. Hopefully it doesn't show, but you've been warned :-)

Comment 3

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 8365623 [details] [review]
link to patch on github

It looks like you are simply copying the approach of the current keyboard (having a basic CSS and overwrite/manually calculate some of the values in JS). A better approach would be either have the layout entirely controlled by JS, or CSS, but I will take anything is that is not worse than we have right now.

Comment 4

[David Flanagan [:djf]]

You're right. This is just copying the current approach.  I would prefer to do it all with media queries and have a complete layout for each form factor and orientation.  But as far as I know we don't have a complete visual design for anything other than portait mode on a phone.  So I'm going with the existing hack for landscape.

When I did this patch I was on a plane and couldn't remember the name of the new 'vh' CSS unit.  I thought it was 'hx' and that it was unsupported in Gecko. But now that I look it up and see it is vh, I think it is supported. If it works, I'll use that to replace the JS that sets the rem height differently in landscape and portait mode.

Comment 5

[David Flanagan [:djf]]

I've updated the pull request as described above. We still use JS for positioning the alternative characters menu, but JS no longer needs to know anything about how the CSS file defines rems.

Comment 6

[David Flanagan [:djf]]

Landed to master: https://github.com/mozilla-b2g/gaia/commit/cfeb5bf7e7665e4be412d1f774bd46fadeff3c93

Comment 7

[David Flanagan [:djf]]

Backed out my patch because it introduced lint: https://github.com/mozilla-b2g/gaia/commit/a346ccfe3ebde118edd27a73fdc96804f032775b

Comment 8

[David Flanagan [:djf]]

Relanded with lint fixed: https://github.com/mozilla-b2g/gaia/commit/d512930951c026bb0c6910f8f272cd79d797e8f7