Merge pull request #15892 from davidflanagan/bug959049v2

Merge pull request #15702 from davidflanagan/bug959049

test_apps/demo-keyboard/js/keyboard.js

@@ -158,9 +158,9 @@ function sendKey(keycode) {
 function resizeWindow() {
   window.resizeTo(window.innerWidth, keyboardContainer.clientHeight);
 
-  layout.forEachPageView(function(pageview) {
-    pageview.resize();
-  });
+  // We only resize the currently displayed page view. Other page views
+  // are resized as needed when they're retrieved from the cache.
+  currentPageView.resize();
 }
 
 var englishLayout = {

test_apps/demo-keyboard/js/layout.js

@@ -114,8 +114,6 @@ KeyboardLayout.prototype.getPageView = function(container, pagename, variant) {
   if (!pagename)
     pagename = Object.keys(this.pages)[0];
 
-  console.log('getPageView', pagename, variant);
-
   if (!(pagename in this.pages)) {
     throw Error('unknown page: ', pagename);
   }
@@ -128,17 +126,19 @@ KeyboardLayout.prototype.getPageView = function(container, pagename, variant) {
     page = this.pages[pagename].variants[variant];
   }
 
-  console.log('getPageView', cachekey);
-
   var pageview = this.pageViewCache[cachekey];
 
   if (!pageview) {
-    console.log('creating new page view');
     pageview = new KeyboardPageView(page);
     this.pageViewCache[cachekey] = pageview;
     pageview.resize();
     container.appendChild(pageview.element);
   }
+  else {
+    // Resize in case the orientation has changed since we were last displayed.
+    // If the page view is already the right size this call is a no-op.
+    pageview.resize();
+  }
 
   return pageview;
 };

test_apps/demo-keyboard/js/pageview.js

@@ -1,10 +1,6 @@
 (function(exports) {
   'use strict';
 
-  // This is the left or right offset of the alternative character menu
-  // If the styles change in keyboard.css, this may also need to change.
-  const ALTMENUOFFSET = 12;
-
   // Look up the HTML templates we'll use for building the keyboard page
   var templates = {
     page: document.getElementById('keyboard-page-template'),
@@ -87,6 +83,16 @@
 
   // Compute the sizes of all the keys and lay them out
   KeyboardPageView.prototype.resize = function resize() {
+    // If we are already laid out at the current window size, then
+    // we don't need to be resized again
+    if (this.windowWidth === window.innerWidth &&
+        this.windowHeight === window.innerHeight)
+      return;
+
+    // Remember the new size.
+    this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
+
     var page = this.page;
     var view = this;
 
@@ -187,6 +193,7 @@
   };
 
   KeyboardPageView.prototype.showAlternatives = function(keyname) {
+    var altrow = this.alternativesMenu;
     var page = this.page;
     var key = page.keys[keyname];
     var keyelt = this.keyelts[keyname];
@@ -200,8 +207,10 @@
       return;
     }
 
+    var numalternatives = key.alternatives.length;
+
     // Populate the element with the alternatives
-    for (var i = 0; i < key.alternatives.length; i++) {
+    for (var i = 0; i < numalternatives; i++) {
       var altkeyname = key.alternatives[i];
       var altkey = page.keys[altkeyname];
       if (!altkey) {
@@ -218,38 +227,63 @@
       while (innermost.firstElementChild)
         innermost = innermost.firstElementChild;
       innermost.textContent = altkey.keycap;
-      this.alternativesMenu.appendChild(altelt);
+      altrow.appendChild(altelt);
     }
 
-    // Now set the position of the alternatives row
-    var altrow = this.alternativesMenu;
+    // Now set the position of the alternatives row. In order to do this
+    // we need to know the width of the first alternative in the row, so
+    // we need to make the row visible in order to measure its kids and
+    // then position it.
+
+    // Make the alternatives visible
+    altrow.hidden = false;
+    keyelt.classList.add('altshown');
+
+    // Figure out how wide the first alternative is and get some other
+    // information we need to compute the position.
+    var firstwidth = altrow.firstElementChild.clientWidth;
     var keyrect = this.getKeyRect(keyname);
     var keyOnLeft = ((keyrect.left + keyrect.right) < window.innerWidth);
+
+    // Position the bottom of the menu above the top of the key
     altrow.style.bottom = (window.innerHeight - keyrect.top) + 'px';
+
+    // If the alternatives menu runs left to right, position the menu
+    // so that the right edge of the first alternative lines up with
+    // the right edge of the key it is an alternative for.
+    // If the menu runs right to left, then position the menu so that the
+    // left edge of the first key lines up with the left edge of the
+    // key that it is an alternative for.
+    // In either case, however, if there is only one alternative in the
+    // menu, just center it over the key.
+    var x;
     if (keyOnLeft) { // key is on left so alternatives run to the right
-      altrow.style.left = Math.max(0, keyrect.left - ALTMENUOFFSET) + 'px';
-      altrow.style.right = 'auto';
       altrow.dir = 'ltr';  // left to right
+      altrow.style.right = 'auto';
+      if (numalternatives === 1)
+        x = (keyrect.left + keyrect.right) / 2 - firstwidth / 2;
+      else
+        x = keyrect.right - firstwidth;
+      altrow.style.left = Math.max(x, 0) + 'px';
     }
     else {           // key is on right so alternatives run to the left
-      altrow.style.left = 'auto';
-      altrow.style.right = Math.max(0, window.innerWidth - keyrect.right -
-                                    ALTMENUOFFSET) + 'px';
       altrow.dir = 'rtl';  // right to left
+      altrow.style.left = 'auto';
+      if (numalternatives === 1)
+        x = (keyrect.left + keyrect.right) / 2 + firstwidth / 2;
+      else
+        x = keyrect.left + firstwidth;
+      altrow.style.right = Math.max(window.innerWidth - x, 0) + 'px';
     }
 
-    // And make it visible
-    keyelt.classList.add('altshown');
-    altrow.hidden = false;
-
     // And record the size and position of the menu and each of its keys
     // for use by the KeyboardTouchHandler module. But increase the height
     // of the boxes so that they extend from the top of the alternative menu
     // to the bottom of the key from which they popped up. This way the user
     // will be able to slide her finger to the right or left to select
     // alternatives without covering up the alternatives.
     this.alternativesShowing = true;
-    var box = this.alternativesMenu.getBoundingClientRect();
+    var box = altrow.getBoundingClientRect();
     this.alternativesMenuBox = {
       left: box.left,
       right: box.right,
@@ -259,7 +293,7 @@
 
     // Now compute a box for each individual alternative
     this.alternativeKeyBoxes = [];
-    var e = this.alternativesMenu.firstElementChild;
+    var e = altrow.firstElementChild;
     while (e) {
       box = e.getBoundingClientRect();
       this.alternativeKeyBoxes.push({

test_apps/demo-keyboard/style/keyboard.css

@@ -9,7 +9,11 @@
 }
 
 html {
-  font-size: 10px;
+  /*
+   * We define the font size so that 1/32nd of the screen width is one rem.
+   * We'll change this in landscape mode to be 1/64th of the screen width
+   */
+  font-size: 3.125vw;
   pointer-events: none;
 }
 
@@ -320,3 +324,74 @@ body {
   margin: 0;
   padding: 0;
 }
+
+/*
+ * We define rems differently in landscape than we do in portrait so that
+ * the keyboard isn't too high in landscape mode. But if we do only that
+ * then the fonts end up too small, so we adjust font sizes and related
+ * properties here so that the fonts in landscape are a little bigger
+ * But still not as big as in portrait mode.
+ * On a 320x480 phone, rems shrink by 3/4ths, but we increase the font size
+ * by roughly 7/6ths, so we end up with fonts that are 21/24th in landscape.
+ */
+@media (orientation:landscape) {
+  html {
+    /*
+     * In landscape mode, we define 1 rem to equal 1/64th of the screen width.
+     * It is not clear if this is a careful design choice or just a convenient
+     * heuristic that works out okay for the form factors we use.
+     */
+    font-size: 1.5625vw;
+  }
+
+  #keyboardContainer {
+    height: 24.1rem; /* 20.4rem keyboard, 3.5rem suggestions 0.2 rem border*/
+  }
+
+  .key {
+    font-size: 2.8rem;
+  }
+
+  .key.specialkey:not([data-name=SPACE]) {
+    font-size: 2.1rem;
+  }
+
+  .key:not(.specialkey).touched::before {
+    top: -7rem;
+    left: calc(50% - 3.5rem);
+    width: 7rem;
+    height: 7rem;
+    font-size: 3.5rem;
+    line-height: 7rem;
+  }
+
+  .altmenu {
+    height: 7rem;
+    border-radius: 3.5rem;
+  }
+
+  .altkey {
+    height: 7rem;
+    min-width: 3.5rem;
+    font-size: 3.5rem;
+    line-height: 7rem;
+  }
+
+  .altkey:first-child, .altkey:last-child {
+      min-width: 4.9rem;
+  }
+
+  .altkey:first-child:last-child {
+      min-width: 7rem;
+  }
+
+  .suggestions {
+    height: 3.5rem;
+  }
+
+  .suggestion {
+    font-size: 2.7rem;
+    line-height: 3.5rem;
+    height: 3.5rem;
+  }
+}