From d99bd10a8ad609cd0e7f443e33d203aa12f8b564 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Mon, 1 Apr 2019 14:02:58 +0700
Subject: [PATCH 01/10] Adjust for banner height

---
 .../com/keyman/android/SystemKeyboard.java    |  3 +-
 .../com/tavultesoft/kmapro/MainActivity.java  |  8 +++-
 .../KMEA/app/src/main/assets/keyboard.html    | 30 +++++++++++++-
 .../tavultesoft/kmea/KMKeyboardJSHandler.java |  8 ++++
 .../java/com/tavultesoft/kmea/KMManager.java  | 17 +++++---
 .../KMEA/app/src/main/res/values/dimens.xml   |  1 +
 android/KMEA/build.sh                         | 12 +++---
 web/package-lock.json                         | 41 ++++++++++++++-----
 web/source/kmwembedded.ts                     | 14 ++++++-
 web/source/kmwnative.ts                       | 11 +++++
 web/source/osk/banner.ts                      | 10 +++--
 web/source/osk/bannerManager.ts               | 20 +++++++--
 web/source/osk/oskManager.ts                  | 21 +++++++++-
 web/source/osk/visualKeyboard.ts              |  8 ++--
 web/source/resources/osk/kmwosk.css           |  2 +-
 15 files changed, 166 insertions(+), 40 deletions(-)

diff --git a/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java b/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java
index b82072d959..228fcd0527 100644
--- a/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java
+++ b/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java
@@ -155,8 +155,9 @@ public class SystemKeyboard extends InputMethodService implements OnKeyboardEven
     if (inputView != null)
       inputViewHeight = inputView.getHeight();
 
+    int bannerHeight = KMManager.getBannerHeight(this);
     int kbHeight = KMManager.getKeyboardHeight(this);
-    outInsets.contentTopInsets = inputViewHeight - kbHeight;
+    outInsets.contentTopInsets = inputViewHeight - bannerHeight - kbHeight;
     outInsets.touchableInsets = InputMethodService.Insets.TOUCHABLE_INSETS_REGION;
     outInsets.touchableRegion.set(0, outInsets.contentTopInsets, size.x, size.y);
   }
diff --git a/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java b/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java
index 2071569fe6..47c295774f 100644
--- a/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java
+++ b/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java
@@ -420,9 +420,12 @@ public class MainActivity extends AppCompatActivity implements OnKeyboardEventLi
   }
 
   private void resizeTextView(boolean isKeyboardVisible) {
+    int bannerHeight = 0;
     int keyboardHeight = 0;
-    if (isKeyboardVisible)
+    if (isKeyboardVisible) {
+      bannerHeight = KMManager.getBannerHeight(this);
       keyboardHeight = KMManager.getKeyboardHeight(this);
+    }
 
     TypedValue outValue = new TypedValue();
     getTheme().resolveAttribute(android.R.attr.actionBarSize, outValue, true);
@@ -437,7 +440,8 @@ public class MainActivity extends AppCompatActivity implements OnKeyboardEventLi
     Point size = new Point(0, 0);
     getWindowManager().getDefaultDisplay().getSize(size);
     int screenHeight = size.y;
-    textView.setHeight(screenHeight - statusBarHeight - actionBarHeight - keyboardHeight);
+    Log.d(TAG, "Main resizeTextView bannerHeight: " + bannerHeight);
+    textView.setHeight(screenHeight - statusBarHeight - actionBarHeight - bannerHeight - keyboardHeight);
   }
 
   private void showInfo() {
diff --git a/android/KMEA/app/src/main/assets/keyboard.html b/android/KMEA/app/src/main/assets/keyboard.html
index cfcdb5aced..adf0382ec1 100644
--- a/android/KMEA/app/src/main/assets/keyboard.html
+++ b/android/KMEA/app/src/main/assets/keyboard.html
@@ -10,6 +10,7 @@
   <script src="keyman.js"></script>
   <script type="text/javascript">
     var device = window.jsInterface.getDeviceType();
+    var bannerHeight = window.jsInterface.getBannerHeight();
     var oskHeight = window.jsInterface.getKeyboardHeight();
     var oskWidth = 0;
     window.addEventListener('load', init, false);
@@ -18,18 +19,28 @@
       //document.body.style.backgroundColor="transparent";
       //window.console.log('Device type = '+device);
       //window.console.log('Keyboard height = '+oskHeight);
-      var kmw=window['keyman'];
+      var kmw=com.keyman.singleton; //window['keyman'];
       kmw.init({'app':device,'fonts':'packages/'});
       kmw['util']['setOption']('attachType','manual');
       kmw['oninserttext'] = insertText;
       kmw['showKeyboardList'] = showMenu;
       kmw['hideKeyboard'] = hideKeyboard;
+      kmw['getBannerHeight'] = getBannerHeight;
       kmw['getOskHeight'] = getOskHeight;
       kmw['getOskWidth'] = getOskWidth;
       kmw['beepKeyboard'] = beepKeyboard;
       var ta = document.getElementById('ta');
       kmw['setActiveElement'](ta);
 
+      kmw.osk.banner.setOptions({
+        'persistentBanner': true,
+        'enablePredictions': true
+      });
+
+      // TODO: Delete this. Useful for rough exploratory testing of suggestion banner
+      setBanner();
+      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'a'}, {displayAs: 'b'}, {displayAs: 'c'}]);
+
       ta.readOnly = false;
 
       kmw.addEventListener('keyboardloaded', setIsChiral);
@@ -42,6 +53,11 @@
       }
       var kmw=window['keyman'];
       kmw['correctOSKTextSize']();
+      window.console.log('Embedded done with correctOSKTextSize');
+    }
+
+    function getBannerHeight() {
+      return bannerHeight;
     }
 
     function setOskWidth(w) {
@@ -51,6 +67,7 @@
     }
 
     function getOskHeight() {
+      window.console.log('Embedded getOskHeight: '+oskHeight);
       return oskHeight;
     }
 
@@ -124,6 +141,11 @@
     function insertText(dn, s) {
       //window.console.log('insertText('+ dn +', ' + s +');');
       window.jsInterface.insertText(dn, s);
+
+      setBanner();
+
+      var kmw=com.keyman.singleton;
+      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'a'}, {displayAs: 'b'}, {displayAs: 'c'}]);
     }
 
     function registerModel(model) {
@@ -207,6 +229,12 @@
       window.location.hash = 'hideKeyboard' + fragmentToggle;
     }
 
+    function setBanner() {
+      var kmw = window['keyman'];
+      kmw.osk.banner.setBanner('suggestion', bannerHeight);
+      window.console.log('Embedded setBanner to ' + bannerHeight);
+    }
+
     function showHelpBubble() {
       fragmentToggle = (fragmentToggle + 1) % 100;
       var kmw = window['keyman'];
diff --git a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java
index d766105f9f..07a1280e61 100644
--- a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java
+++ b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java
@@ -25,6 +25,14 @@ public abstract class KMKeyboardJSHandler {
     return context.getResources().getString(R.string.device_type);
   }
 
+  // This annotation is required in Jelly Bean and later:
+  @JavascriptInterface
+  public int getBannerHeight() {
+    int bannerHeight = context.getResources().getDimensionPixelSize(R.dimen.banner_height);
+    //bannerHeight -= bannerHeight % 20;
+    return bannerHeight;
+  }
+
   // This annotation is required in Jelly Bean and later:
   @JavascriptInterface
   public int getKeyboardHeight() {
diff --git a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
index 6b1bb0c7e5..2d89d7dd7c 100644
--- a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
+++ b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
@@ -236,8 +236,9 @@ public final class KMManager {
 
   private static void initInAppKeyboard(Context appContext) {
     if (InAppKeyboard == null) {
-      int kbHeight = appContext.getResources().getDimensionPixelSize(R.dimen.keyboard_height);
-      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, kbHeight);
+      int bannerHeight = getBannerHeight(appContext);
+      int kbHeight = getKeyboardHeight(appContext);
+      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
       params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
       InAppKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_INAPP);
       InAppKeyboard.setLayoutParams(params);
@@ -251,8 +252,9 @@ public final class KMManager {
 
   private static void initSystemKeyboard(Context appContext) {
     if (SystemKeyboard == null) {
-      int kbHeight = appContext.getResources().getDimensionPixelSize(R.dimen.keyboard_height);
-      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, kbHeight);
+      int bannerHeight = getBannerHeight(appContext);
+      int kbHeight = getKeyboardHeight(appContext);
+      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
       params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
       SystemKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_SYSTEM);
       SystemKeyboard.setLayoutParams(params);
@@ -668,8 +670,9 @@ public final class KMManager {
       return false;
     }
 
-    // Use single quotes in JSONobject for javascript call
+    // Escape single quotes, and then convert double quotes to single quotes for javascript call
     String model = String.valueOf(modelObj);
+    model = model.replaceAll("\'", "\\\\'"); // Double-escaped-backslash b/c regex.
     model = model.replaceAll("\"", "'");
 
     if (InAppKeyboard != null && InAppKeyboardLoaded && !InAppKeyboardShouldIgnoreTextChange) {
@@ -939,6 +942,10 @@ public final class KMManager {
     KMKeyboard.removeOnKeyboardEventListener(listener);
   }
 
+  public static int getBannerHeight(Context context) {
+    return (int) context.getResources().getDimension(R.dimen.banner_height);
+  }
+
   public static int getKeyboardHeight(Context context) {
     return (int) context.getResources().getDimension(R.dimen.keyboard_height);
   }
diff --git a/android/KMEA/app/src/main/res/values/dimens.xml b/android/KMEA/app/src/main/res/values/dimens.xml
index 7dfbd8a441..f148bdeaf0 100644
--- a/android/KMEA/app/src/main/res/values/dimens.xml
+++ b/android/KMEA/app/src/main/res/values/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Default or Portrait (Phone) -->
 <resources>
+    <dimen name="banner_height">60dp</dimen>
     <dimen name="keyboard_height">205dp</dimen>
     <dimen name="key_width">34.25dp</dimen>
     <dimen name="key_height">49.25dp</dimen>
diff --git a/android/KMEA/build.sh b/android/KMEA/build.sh
index d96446519e..7eac03ebcf 100755
--- a/android/KMEA/build.sh
+++ b/android/KMEA/build.sh
@@ -99,12 +99,12 @@ if [ "$DO_BUILD" = true ]; then
 fi
 if [ "$DO_COPY" = true ]; then
     echo "Copying KMW artifacts"
-    cp $KMW_ROOT/release/embedded/resources/osk/ajax-loader.gif $KMEA_ASSETS/ajax-loader.gif
-    cp $KMW_ROOT/release/embedded/keyman.js $KMEA_ASSETS/keyman.js
-    cp $KMW_ROOT/release/embedded/resources/osk/kmwosk.css $KMEA_ASSETS/kmwosk.css
-    cp $KMW_ROOT/release/embedded/resources/osk/keymanweb-osk.eot $KMEA_ASSETS/keymanweb-osk.eot
-    cp $KMW_ROOT/release/embedded/resources/osk/keymanweb-osk.ttf $KMEA_ASSETS/keymanweb-osk.ttf
-    cp $KMW_ROOT/release/embedded/resources/osk/keymanweb-osk.woff $KMEA_ASSETS/keymanweb-osk.woff
+    cp $KMW_ROOT/release/unminified/embedded/resources/osk/ajax-loader.gif $KMEA_ASSETS/ajax-loader.gif
+    cp $KMW_ROOT/release/unminified/embedded/keyman.js $KMEA_ASSETS/keyman.js
+    cp $KMW_ROOT/release/unminified/embedded/resources/osk/kmwosk.css $KMEA_ASSETS/kmwosk.css
+    cp $KMW_ROOT/release/unminified/embedded/resources/osk/keymanweb-osk.eot $KMEA_ASSETS/keymanweb-osk.eot
+    cp $KMW_ROOT/release/unminified/embedded/resources/osk/keymanweb-osk.ttf $KMEA_ASSETS/keymanweb-osk.ttf
+    cp $KMW_ROOT/release/unminified/embedded/resources/osk/keymanweb-osk.woff $KMEA_ASSETS/keymanweb-osk.woff
     if [ $? -ne 0 ]; then
         die "ERROR: copying artifacts failed"
     fi
diff --git a/web/package-lock.json b/web/package-lock.json
index d268683e86..70240f8bf1 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1274,7 +1274,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1295,12 +1296,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1315,17 +1318,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1442,7 +1448,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1454,6 +1461,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1468,6 +1476,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1475,12 +1484,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1499,6 +1510,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1579,7 +1591,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1591,6 +1604,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1676,7 +1690,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1712,6 +1727,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1731,6 +1747,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1774,12 +1791,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/web/source/kmwembedded.ts b/web/source/kmwembedded.ts
index 3e98bd613c..be6b9d2f1d 100644
--- a/web/source/kmwembedded.ts
+++ b/web/source/kmwembedded.ts
@@ -118,9 +118,11 @@ namespace com.keyman.osk {
     let util = keyman.util;
     let device = util.device;
 
+    console.log("adjustHeights: 0");
     if(!_Box || !this.kbdDiv || !this.kbdDiv.firstChild || !this.kbdDiv.firstChild.firstChild.childNodes) {
       return false;
     }
+    console.log("adjustHeights: 1");
 
     var layers=this.kbdDiv.firstChild.childNodes,
         nRows=layers[0].childNodes.length,
@@ -130,10 +132,12 @@ namespace com.keyman.osk {
     if(device.OS == 'Android' && 'devicePixelRatio' in window) {
       rowHeight = rowHeight/window.devicePixelRatio;
     }
+    let bannerHeight : number = oskManager.getBannerHeight();
     let oskHeight : number = nRows*rowHeight;
+    console.log("adjustHeight: oskHeight " + oskHeight);
 
     var b: HTMLElement = _Box, bs=b.style;
-    bs.height=bs.maxHeight=(oskHeight+3)+'px';
+    bs.height=bs.maxHeight=(bannerHeight+oskHeight+3)+'px';
     b = <HTMLElement> b.childNodes.item(1).firstChild;
     bs=b.style;
     bs.height=bs.maxHeight=(oskHeight+3)+'px';
@@ -146,6 +150,8 @@ namespace com.keyman.osk {
       nRows=layers[nLayer].childNodes.length;
       (<HTMLElement> layers[nLayer]).style.height=(oskManager.getKeyboardHeight()+3)+'px';
 
+      console.log("adjustHeights: layersp[].style.height = " + (<HTMLElement> layers[nLayer]).style.height);
+
       for(nRow=0; nRow<nRows; nRow++) {
         rs=(<HTMLElement> layers[nLayer].childNodes[nRow]).style;
         rs.bottom=(nRows-nRow-1)*rowHeight+'px';
@@ -172,6 +178,7 @@ namespace com.keyman.osk {
       }
     }
 
+    console.log("adjustHeights returns true");
     return true;
   };
 }
@@ -346,9 +353,12 @@ namespace com.keyman.text {
    * correctOSKTextSize handles rotation event -- currently rebuilds keyboard and adjusts font sizes
    */
   keymanweb['correctOSKTextSize']=function() {
+    console.log('correctOSKTextSize start');
     if(osk.vkbd.adjustHeights()) {
+      console.log('correctOSKTextSize - osk.Load');
       osk._Load();
     }
+    console.log('correctOSKTextSize done');
   };
 
   /**
@@ -358,7 +368,7 @@ namespace com.keyman.text {
    */
   keymanweb['registerModel']=function(model: com.keyman.text.prediction.ModelSpec) {
     keymanweb.modelManager.register(model);
-  }
+  };
 
   /**
    * Function called by iOS when a device-implemented keyboard popup is displayed or hidden
diff --git a/web/source/kmwnative.ts b/web/source/kmwnative.ts
index 9e4406a773..01c81d6ac1 100644
--- a/web/source/kmwnative.ts
+++ b/web/source/kmwnative.ts
@@ -651,6 +651,17 @@ if(!window['keyman']['initialized']) {
       rotationManager.init();
     }
 
+    /**
+     * Test code to set suggestion banner
+     * TODO: Remove from production
+     */
+    keymanweb['setBanner']=function() {
+      let keyman = com.keyman.singleton;
+      let osk = keyman.osk;
+      osk.banner.setBanner('suggestion');
+      osk.banner.setSuggestions();
+    };
+
     /**
      * Possible way to detect the start of a rotation and hide the OSK before it is adjusted in size
      * 
diff --git a/web/source/osk/banner.ts b/web/source/osk/banner.ts
index 2bd3dad353..3b18b59638 100644
--- a/web/source/osk/banner.ts
+++ b/web/source/osk/banner.ts
@@ -58,7 +58,7 @@ namespace com.keyman.osk {
       let util = keymanweb.util;
 
       let d = util._CreateElement('div');
-      d.id = "keymanweb_banner_bar";
+      d.id = "kmw-banner-bar";
       d.className = "kmw-banner-bar";
       this.div = d;
 
@@ -223,6 +223,8 @@ namespace com.keyman.osk {
 
       // Finalize the suggestion text
       var d=util._CreateElement('div'), ds=d.style;
+      let suggestionIndex: String = spec.id.substr(-1);
+      d.id = 'kmw-suggestion-text-' + suggestionIndex;
       d.className = 'kmw-suggestion-text';
       d.innerHTML = suggestionText;
       t.appendChild(d);
@@ -234,14 +236,15 @@ namespace com.keyman.osk {
   /**
    * Function     SuggestionBanner
    * Scope        Public
+   * @param {number} height - If provided, the height of the banner in pixels
    * Description  Display lexical model suggestions in the banner
    */
   export class SuggestionBanner extends Banner {
     public static SUGGESTION_LIMIT: number = 3;
     private suggestionList : BannerSuggestion[];
 
-    constructor() {
-      super(SuggestionBanner.DEFAULT_HEIGHT);
+    constructor(height?: number) {
+      super(height);
       this.suggestionList = new Array();
       for (var i=0; i<SuggestionBanner.SUGGESTION_LIMIT; i++) {
         let s = new BannerSuggestionSpec('kmw-suggestion-' + i, 'en', '', 33, ' ');
@@ -289,6 +292,7 @@ namespace com.keyman.osk {
         this.getDiv().replaceChild(suggestion.generateSuggestionText(), 
           this.getDiv().childNodes.item(i));
       });
+      console.log("updateSuggestions done");
     }.bind(this);
   }
 }
diff --git a/web/source/osk/bannerManager.ts b/web/source/osk/bannerManager.ts
index f674ab4a0b..fdc58771ff 100644
--- a/web/source/osk/bannerManager.ts
+++ b/web/source/osk/bannerManager.ts
@@ -173,8 +173,9 @@ namespace com.keyman.osk {
      * 
      * @param type `'blank' | 'image' | 'suggestion'` - A plain-text string 
      *        representing the type of `Banner` to set active.
+     * @param height - Optional banner height in pixels.
      */
-    public setBanner(type: BannerType) {
+    public setBanner(type: BannerType, height?: number) {
       switch(type) {
         case 'blank':
           this._setBanner(new BlankBanner());
@@ -183,17 +184,28 @@ namespace com.keyman.osk {
           this._setBanner(new ImageBanner(this.imagePath, ImageBanner.DEFAULT_HEIGHT));
           break;
         case 'suggestion':
-          this._setBanner(new SuggestionBanner());
+          this._setBanner(new SuggestionBanner(height));
           let keyman = com.keyman.singleton;
           let banner = this.activeBanner as SuggestionBanner;
           keyman.modelManager['addEventListener']('invalidatesuggestions', banner.invalidateSuggestions);
           keyman.modelManager['addEventListener']('suggestionsready', banner.updateSuggestions);
+          console.log('setBanner(SuggestionBanner)');
           break;
         default:
           throw new Error("Invalid type specified for the banner!");
       }
     }
 
+    // TODO: test code not to keep in production
+    public setSuggestions() {
+      let s:Array<Suggestion> = Array(SuggestionBanner.BLANK_SUGGESTION(), SuggestionBanner.BLANK_SUGGESTION(), SuggestionBanner.BLANK_SUGGESTION());
+      s[0].displayAs = 'choco';
+      s[1].displayAs = 'taco';
+      s[2].displayAs = 'last';
+      let suggestionBanner = this.activeBanner as SuggestionBanner;
+      suggestionBanner.updateSuggestions(s);
+    }
+
     /**
      * Handles `ModelManager`'s `'modelchange'` events, 
      * allowing logic to automatically hot-swap `Banner`s as needed.
@@ -207,11 +219,13 @@ namespace com.keyman.osk {
       // ModelManager will never have an active model 
       // when predictions are disabled.
       if(keyman.modelManager.activeModel) {
+        console.log('selectBanner suggestion');
         this.setBanner('suggestion');
       } else if(this.alwaysShows) {
         this.setBanner('image');
       } else {
-        this.setBanner('blank');
+        console.log('selectBanner blank');
+        this.setBanner('blank');        
       }
     }
 
diff --git a/web/source/osk/oskManager.ts b/web/source/osk/oskManager.ts
index 04a8fef16b..cc90a52f29 100644
--- a/web/source/osk/oskManager.ts
+++ b/web/source/osk/oskManager.ts
@@ -1107,9 +1107,11 @@ namespace com.keyman.osk {
       let util = com.keyman.singleton.util;
       var p: OSKRect = {};
 
+      console.log('getRect');
       if(this.vkbd) {
         p['left'] = p.left = dom.Utils.getAbsoluteX(this.vkbd.kbdDiv);
         p['top']  = p.top  = dom.Utils.getAbsoluteY(this.vkbd.kbdDiv);
+        console.log('vkbd top: ' + p.top);
         p['width']  = p.width  = dom.Utils.getAbsoluteX(this.vkbd.kbdHelpDiv) -
           dom.Utils.getAbsoluteX(this.vkbd.kbdDiv) + this.vkbd.kbdHelpDiv.offsetWidth;
         p['height'] = p.height = dom.Utils.getAbsoluteY(this.vkbd.kbdHelpDiv) -
@@ -1117,6 +1119,7 @@ namespace com.keyman.osk {
       } else {
         p['left'] = p.left = dom.Utils.getAbsoluteX(this._Box);
         p['top']  = p.top  = dom.Utils.getAbsoluteY(this._Box);
+        console.log('other top: ' + p.top);
         p['width']  = p.width  = dom.Utils.getAbsoluteX(this._Box) + this._Box.offsetWidth;
         p['height'] = p.height = dom.Utils.getAbsoluteY(this._Box) + this._Box.offsetHeight;
       }
@@ -1135,6 +1138,7 @@ namespace com.keyman.osk {
         return;
       }
 
+      console.log('setRect start');
       var b = this._Box, bs = b.style;
       if('left' in p) {
         bs.left=(p['left']-dom.Utils.getAbsoluteX(b)+b.offsetLeft)+'px';
@@ -1263,15 +1267,19 @@ namespace com.keyman.osk {
       let keymanweb = com.keyman.singleton;
       let device = keymanweb.util.device;
 
+      console.log('_Show start');
       // Do not try to display OSK if undefined, or no active element
       if(this._Box == null || keymanweb.domManager.getActiveElement() == null) {
         return;
       }
 
+      console.log('_Show 1');
+
       // Never display the OSK for desktop browsers unless KMW element is focused, and a keyboard selected
       if((!device.touchable) && (keymanweb.keyboardManager.activeKeyboard == null || !this._Enabled)) {
         return;
       }
+      console.log('_Show 2');
 
       var Ls = this._Box.style;
 
@@ -1280,6 +1288,8 @@ namespace com.keyman.osk {
         Ls.visibility='hidden';
       }
 
+      console.log('_Show 3');
+
       if(device.touchable) {
         /* In case it's still '0' from a hide() operation.
          * Happens when _Show is called before the transitionend events are processed,
@@ -1288,6 +1298,7 @@ namespace com.keyman.osk {
          * (Opacity is only modified when device.touchable = true, though a couple of extra
          * conditions may apply.)
          */
+        console.log('_Show 4');
         Ls.opacity='1';
       }
 
@@ -1295,6 +1306,7 @@ namespace com.keyman.osk {
       // The following code will always be executed except for externally created OSK such as EuroLatin
       if(this.vkbd && this.vkbd.ddOSK) {
         // Enable the currently active keyboard layer and update the default nextLayer member
+        console.log('_Show 5');
         this.vkbd.show();
 
         // Extra style changes and overrides for touch-mode.
@@ -1303,7 +1315,9 @@ namespace com.keyman.osk {
           Ls.left=Ls.bottom='0px';
           let vkbdHeight = (<HTMLElement> this.vkbd.kbdDiv.firstChild).style.height;
           vkbdHeight = vkbdHeight.substr(0, vkbdHeight.indexOf('px'));
-          Ls.height=Ls.maxHeight= (parseInt(vkbdHeight, 10) + this.getBannerHeight()) + 'px';
+          Ls.height=Ls.maxHeight= (this.getBannerHeight() + parseInt(vkbdHeight, 10)) + 'px';
+          console.log('_Show 6 maxHeight = ' + Ls.maxHeight);
+
           Ls.border='none';
           Ls.borderTop='1px solid gray';
 
@@ -1312,6 +1326,7 @@ namespace com.keyman.osk {
         }
       }
 
+      console.log('_Show 7');
       //TODO: may need to return here for touch devices??
       Ls.display='block'; //Ls.visibility='visible';
 
@@ -1319,6 +1334,7 @@ namespace com.keyman.osk {
         this.vkbd.showLanguage();
       }
 
+      console.log('_Show 8');
       if(device.formFactor == 'desktop') {
         Ls.position='absolute'; Ls.display='block'; //Ls.visibility='visible';
         Ls.left='0px';
@@ -1360,6 +1376,8 @@ namespace com.keyman.osk {
 
       // If OSK still hidden, make visible only after all calculation finished
       if(Ls.visibility == 'hidden') {
+        console.log('_Show 9');
+
         window.setTimeout(function(){
           this._Box.style.visibility='visible';
         }.bind(this), 0);
@@ -1372,6 +1390,7 @@ namespace com.keyman.osk {
         Lpos['y']=this._Box.offsetTop;
         Lpos['userLocated']=this.userPositioned;
         this.doShow(Lpos);
+        console.log('_Show 10');
       }
     }
 
diff --git a/web/source/osk/visualKeyboard.ts b/web/source/osk/visualKeyboard.ts
index a9257d0e71..599a6abdb7 100644
--- a/web/source/osk/visualKeyboard.ts
+++ b/web/source/osk/visualKeyboard.ts
@@ -638,7 +638,7 @@ namespace com.keyman.osk {
       let bannerHeight = oskManager.banner.height;
       let rowsPercent = 100;
 
-      var lDiv=util._CreateElement('div'), ls=lDiv.style, actualHeight=0;
+      var lDiv=util._CreateElement('div'), ls=lDiv.style, totalHeight=0;
 
       // Set OSK box default style
       lDiv.className='kmw-key-layer-group';
@@ -647,9 +647,9 @@ namespace com.keyman.osk {
       switch(formFactor) {
         case 'phone':
         case 'tablet':
-          actualHeight=oskManager.getHeight();
-          ls.height=actualHeight+'px';
-          rowsPercent = Math.round(100*oskManager.getKeyboardHeight()/actualHeight );
+          totalHeight=oskManager.getHeight();
+          ls.height=totalHeight+'px';
+          rowsPercent = Math.round(100*oskManager.getKeyboardHeight()/totalHeight );
           break;
       }
 
diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index 5bc8a176e5..708fe5c881 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -65,7 +65,7 @@
 .phone.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #bbb;}
 .phone.android .kmw-spacebar-caption {color: #aaa;}
 
-.phone.android .kmw-banner-bar {background-color: #222; height: 40px; width: 100%;}
+.phone.android .kmw-banner-bar {background-color: #222; height: 100%; width: 100%;}
 .phone.android .kmw-banner-bar span {background-color: #333; display:inline-block; vertical-align: middle;}
 .phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; text-align: center;}
 

From f8697640c566fcb1a56fa20ef4733cdea6851a2c Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Tue, 2 Apr 2019 14:52:37 +0700
Subject: [PATCH 02/10] Change text styling

---
 android/KMEA/build.sh               | 12 ++++++------
 web/source/resources/osk/kmwosk.css |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/android/KMEA/build.sh b/android/KMEA/build.sh
index 7eac03ebcf..d96446519e 100755
--- a/android/KMEA/build.sh
+++ b/android/KMEA/build.sh
@@ -99,12 +99,12 @@ if [ "$DO_BUILD" = true ]; then
 fi
 if [ "$DO_COPY" = true ]; then
     echo "Copying KMW artifacts"
-    cp $KMW_ROOT/release/unminified/embedded/resources/osk/ajax-loader.gif $KMEA_ASSETS/ajax-loader.gif
-    cp $KMW_ROOT/release/unminified/embedded/keyman.js $KMEA_ASSETS/keyman.js
-    cp $KMW_ROOT/release/unminified/embedded/resources/osk/kmwosk.css $KMEA_ASSETS/kmwosk.css
-    cp $KMW_ROOT/release/unminified/embedded/resources/osk/keymanweb-osk.eot $KMEA_ASSETS/keymanweb-osk.eot
-    cp $KMW_ROOT/release/unminified/embedded/resources/osk/keymanweb-osk.ttf $KMEA_ASSETS/keymanweb-osk.ttf
-    cp $KMW_ROOT/release/unminified/embedded/resources/osk/keymanweb-osk.woff $KMEA_ASSETS/keymanweb-osk.woff
+    cp $KMW_ROOT/release/embedded/resources/osk/ajax-loader.gif $KMEA_ASSETS/ajax-loader.gif
+    cp $KMW_ROOT/release/embedded/keyman.js $KMEA_ASSETS/keyman.js
+    cp $KMW_ROOT/release/embedded/resources/osk/kmwosk.css $KMEA_ASSETS/kmwosk.css
+    cp $KMW_ROOT/release/embedded/resources/osk/keymanweb-osk.eot $KMEA_ASSETS/keymanweb-osk.eot
+    cp $KMW_ROOT/release/embedded/resources/osk/keymanweb-osk.ttf $KMEA_ASSETS/keymanweb-osk.ttf
+    cp $KMW_ROOT/release/embedded/resources/osk/keymanweb-osk.woff $KMEA_ASSETS/keymanweb-osk.woff
     if [ $? -ne 0 ]; then
         die "ERROR: copying artifacts failed"
     fi
diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index 708fe5c881..2dc3bac95a 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -67,7 +67,7 @@
 
 .phone.android .kmw-banner-bar {background-color: #222; height: 100%; width: 100%;}
 .phone.android .kmw-banner-bar span {background-color: #333; display:inline-block; vertical-align: middle;}
-.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; text-align: center;}
+.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; position: relative; text-align: center;}
 
 .tablet.kmw-osk-frame{position:fixed;left:0;bottom:0;width:100%;height:144px;overflow-y:visible;
         background-color:rgba(0,0,0,0.8);-webkit-user-select:none;}
@@ -114,7 +114,7 @@
 
 .tablet.android .kmw-banner-bar {background-color: #b4b4b8; height: 40px; width: 100%;}
 .tablet.android .kmw-banner-bar span {background-color: #b4b4b8; display:inline-block; vertical-align: middle;}
-.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; text-align: center;}
+.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; position: relative; text-align: center;}
 
 /* Vertical centering of text labels on keys */ 
 .kmw-key {text-align:center; white-space:nowrap;}

From df0af522f05ef5bdf9c954cedddcd31efdbb57c0 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Tue, 2 Apr 2019 17:09:37 +0700
Subject: [PATCH 03/10] Cheat styling to get suggestions to appear

---
 web/source/osk/banner.ts            | 10 +++++++---
 web/source/resources/osk/kmwosk.css |  7 ++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/source/osk/banner.ts b/web/source/osk/banner.ts
index 3b18b59638..41263cfc77 100644
--- a/web/source/osk/banner.ts
+++ b/web/source/osk/banner.ts
@@ -209,11 +209,13 @@ namespace com.keyman.osk {
 
       let device = util.device;
       let oskManager = com.keyman.singleton.osk;
+      let width: number;
       if (device.formFactor != 'desktop') {
-        ts.width = Math.floor(oskManager.getWidth() / SuggestionBanner.SUGGESTION_LIMIT) + 'px';
+        width = Math.floor(oskManager.getWidth() / SuggestionBanner.SUGGESTION_LIMIT);
       } else {
-        ts.width = Math.floor(oskManager.getWidthFromCookie() / SuggestionBanner.SUGGESTION_LIMIT) + 'px';
+        width = Math.floor(oskManager.getWidthFromCookie() / SuggestionBanner.SUGGESTION_LIMIT);
       }
+      ts.width = width + 'px';
 
       let keyboardManager = (<KeymanBase>window['keyman']).keyboardManager;
       if(keyboardManager.isRTL()) {
@@ -223,10 +225,12 @@ namespace com.keyman.osk {
 
       // Finalize the suggestion text
       var d=util._CreateElement('div'), ds=d.style;
-      let suggestionIndex: String = spec.id.substr(-1);
+      let suggestionIndex: string = spec.id.substr(-1);
       d.id = 'kmw-suggestion-text-' + suggestionIndex;
       d.className = 'kmw-suggestion-text';
       d.innerHTML = suggestionText;
+      //ds.left = (parseInt(suggestionIndex, 10) * width) + 'px';
+      ds.top = oskManager.getBannerHeight() - 48 + 'px';
       t.appendChild(d);
 
       return t;
diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index 2dc3bac95a..91f5936bf8 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -65,9 +65,10 @@
 .phone.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #bbb;}
 .phone.android .kmw-spacebar-caption {color: #aaa;}
 
-.phone.android .kmw-banner-bar {background-color: #222; height: 100%; width: 100%;}
-.phone.android .kmw-banner-bar span {background-color: #333; display:inline-block; vertical-align: middle;}
-.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; position: relative; text-align: center;}
+.phone.android .kmw-banner-bar {background-color: #222; display: inline-block; height: 100%; width: 100%;}
+.phone.android .kmw-banner-bar span {background-color: #333; display:inline-block; text-align: center}
+.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle}
 
 .tablet.kmw-osk-frame{position:fixed;left:0;bottom:0;width:100%;height:144px;overflow-y:visible;
         background-color:rgba(0,0,0,0.8);-webkit-user-select:none;}

From 759a7b1783f93f7ad6eb03189c792cb8cce526d5 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Tue, 2 Apr 2019 23:06:23 +0700
Subject: [PATCH 04/10] Add tablet styling

---
 web/source/resources/osk/kmwosk.css | 34 ++++++++++++++++-------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index 91f5936bf8..162af69bf6 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -49,9 +49,10 @@
 .phone.ios .kmw-key.kmw-key-special-on {color:#000;background-color:#fdfdfe;}
 .phone.ios .kmw-key.kmw-key-touched {background-color:#88f;}
 
-.phone.ios .kmw-banner-bar {background-color: #cfd3d9; height: 40px; width: 100%;}
-.phone.ios .kmw-banner-bar span {background-color: #cfd3d9; display:inline-block; vertical-align: middle;}
-.phone.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; text-align: center;}
+.phone.ios .kmw-banner-bar {background-color: #cfd3d9; display: inline-block; height: 100%; width: 100%;}
+.phone.ios .kmw-banner-bar span {background-color: #cfd3d9; display:inline-block; text-align: center;}
+.phone.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle;}
 
 .phone.android .kmw-key-layer-group {background-color: #333;}  
 .phone.android .kmw-key {border: none; border-bottom: solid 1px #8a8d90; box-shadow:none; border-radius: 3px;}
@@ -66,9 +67,9 @@
 .phone.android .kmw-spacebar-caption {color: #aaa;}
 
 .phone.android .kmw-banner-bar {background-color: #222; display: inline-block; height: 100%; width: 100%;}
-.phone.android .kmw-banner-bar span {background-color: #333; display:inline-block; text-align: center}
-.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; display: inline; height: 100%;
-        line-height: normal; position: relative; vertical-align: middle}
+.phone.android .kmw-banner-bar span {background-color: #333; display:inline-block; text-align: center;}
+.phone.android .kmw-suggestion-text {color:#fff; background-color: #222; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle;}
 
 .tablet.kmw-osk-frame{position:fixed;left:0;bottom:0;width:100%;height:144px;overflow-y:visible;
         background-color:rgba(0,0,0,0.8);-webkit-user-select:none;}
@@ -95,9 +96,10 @@
 .tablet.ios .kmw-key.kmw-key-special-on {color:#000;background-color:#fdfdfe;}
 .tablet.ios .kmw-key.kmw-key-touched {background-color:#88f;}
 
-.tablet.ios .kmw-banner-bar {background-color: #cfd3d9}
-.tablet.ios .kmw-banner-bar span {background-color: #cfd3d9; display:inline-block; vertical-align:middle;}
-.tablet.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; text-align: center;}
+.tablet.ios .kmw-banner-bar {background-color: #cfd3d9; display: inline-block; height: 100%; width: 100%}
+.tablet.ios .kmw-banner-bar span {background-color: #cfd3d9; display: inline-block; text-align: center;}
+.tablet.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle;}
 
 .tablet .kmw-key-row {-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 
@@ -113,9 +115,10 @@
 .tablet.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #777;}
 .tablet.android .kmw-spacebar-caption {color: #888;}         
 
-.tablet.android .kmw-banner-bar {background-color: #b4b4b8; height: 40px; width: 100%;}
-.tablet.android .kmw-banner-bar span {background-color: #b4b4b8; display:inline-block; vertical-align: middle;}
-.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; position: relative; text-align: center;}
+.tablet.android .kmw-banner-bar {background-color: #b4b4b8; display: inline-block; height: 100%; width: 100%;}
+.tablet.android .kmw-banner-bar span {background-color: #b4b4b8; display:inline-block; text-align: center;}
+.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle;}
 
 /* Vertical centering of text labels on keys */ 
 .kmw-key {text-align:center; white-space:nowrap;}
@@ -157,9 +160,10 @@
 .kmw-footer-caption{color:#fff;font:0.7em Arial;margin:0 0 0 4px;}
 
 
-.kmw-banner-bar{height:40px; width:100%; margin:0; background-color:darkorange;}
-.kmw-banner-bar span {background-color: orange; display:inline-block; vertical-align: middle;}
-.kmw-suggestion-text{color:#ffff; background-color: orange; text-align: center;}
+.kmw-banner-bar{background-color:darkorange; display: inline-block; height:100%; width:100%; margin:0; }
+.kmw-banner-bar span {background-color: orange; display:inline-block; text-align: center;}
+.kmw-suggestion-text{color:#fff; background-color: orange; display: inline; height: 100%;
+          line-height: normal; position: relative; vertical-align: middle;}
 
 
 .kmw-footer-resize{cursor:se-resize;position:absolute;right:2px;bottom:2px;width:16px;height:16px;overflow:hidden;

From 0487e6356ac79ef0eec31ff96e0a5b6987391867 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Tue, 2 Apr 2019 23:32:56 +0700
Subject: [PATCH 05/10] Add banner dimensions for other Android devices

---
 android/KMEA/app/src/main/assets/keyboard.html         | 10 +++++-----
 android/KMEA/app/src/main/res/values-land/dimens.xml   |  1 +
 .../app/src/main/res/values-sw600dp-land/dimens.xml    |  1 +
 .../app/src/main/res/values-sw720dp-land/dimens.xml    |  1 +
 .../KMEA/app/src/main/res/values-sw720dp/dimens.xml    |  1 +
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/android/KMEA/app/src/main/assets/keyboard.html b/android/KMEA/app/src/main/assets/keyboard.html
index adf0382ec1..171b28abac 100644
--- a/android/KMEA/app/src/main/assets/keyboard.html
+++ b/android/KMEA/app/src/main/assets/keyboard.html
@@ -19,7 +19,7 @@
       //document.body.style.backgroundColor="transparent";
       //window.console.log('Device type = '+device);
       //window.console.log('Keyboard height = '+oskHeight);
-      var kmw=com.keyman.singleton; //window['keyman'];
+      var kmw=com.keyman.singleton;
       kmw.init({'app':device,'fonts':'packages/'});
       kmw['util']['setOption']('attachType','manual');
       kmw['oninserttext'] = insertText;
@@ -32,14 +32,13 @@
       var ta = document.getElementById('ta');
       kmw['setActiveElement'](ta);
 
+      // TODO: Remove for production. For testing integration of suggestion banner
       kmw.osk.banner.setOptions({
         'persistentBanner': true,
         'enablePredictions': true
       });
-
-      // TODO: Delete this. Useful for rough exploratory testing of suggestion banner
       setBanner();
-      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'a'}, {displayAs: 'b'}, {displayAs: 'c'}]);
+      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'alpha'}, {displayAs: 'bravo'}, {displayAs: 'charlie'}]);
 
       ta.readOnly = false;
 
@@ -144,8 +143,9 @@
 
       setBanner();
 
+      // TODO: Remove for production: Testing
       var kmw=com.keyman.singleton;
-      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'a'}, {displayAs: 'b'}, {displayAs: 'c'}]);
+      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'insertAlpha'}, {displayAs: 'insertBeta'}, {displayAs: 'insertCharlie'}]);
     }
 
     function registerModel(model) {
diff --git a/android/KMEA/app/src/main/res/values-land/dimens.xml b/android/KMEA/app/src/main/res/values-land/dimens.xml
index 5d20b97e5b..69aa65c705 100644
--- a/android/KMEA/app/src/main/res/values-land/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-land/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Landscape (Phone) -->
 <resources>
+    <dimen name="banner_height">60dp</dimen>
     <dimen name="keyboard_height">205dp</dimen>
     <dimen name="key_width">49.25dp</dimen>
     <dimen name="key_height">49.25dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml b/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml
index 0d9efd3708..286042ffec 100644
--- a/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Landscape (Tablet 7") -->
 <resources>
+    <dimen name="banner_height">80dp</dimen>
     <dimen name="keyboard_height">305dp</dimen>
     <dimen name="key_width">73.5dp</dimen>
     <dimen name="key_height">58.5dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml b/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml
index d716766e31..228d15cd86 100644
--- a/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Landscape (Tablet 10") -->
 <resources>
+    <dimen name="banner_height">90dp</dimen>
     <dimen name="keyboard_height">405dp</dimen>
     <dimen name="key_width">98.5dp</dimen>
     <dimen name="key_height">98.5dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml b/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml
index 912f74b809..1f74b2462e 100644
--- a/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Default or Portrait (Tablet 10") -->
 <resources>
+    <dimen name="banner_height">90dp</dimen>
     <dimen name="keyboard_height">405dp</dimen>
     <dimen name="key_width">68.5dp</dimen>
     <dimen name="key_height">98.5dp</dimen>

From 9dc935be30b1acac5720f6607a1831b994ccd55f Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Tue, 2 Apr 2019 23:43:18 +0700
Subject: [PATCH 06/10] Cleanup comments

---
 .../KMEA/app/src/main/assets/keyboard.html    |  3 +-
 common/predictive-text/package-lock.json      | 41 +++++--------------
 web/package-lock.json                         | 14 ++-----
 web/source/kmwembedded.ts                     |  9 ----
 web/source/osk/banner.ts                      |  2 +-
 web/source/osk/bannerManager.ts               |  5 +--
 web/source/osk/oskManager.ts                  | 19 ---------
 7 files changed, 17 insertions(+), 76 deletions(-)

diff --git a/android/KMEA/app/src/main/assets/keyboard.html b/android/KMEA/app/src/main/assets/keyboard.html
index 171b28abac..4b932ba0cd 100644
--- a/android/KMEA/app/src/main/assets/keyboard.html
+++ b/android/KMEA/app/src/main/assets/keyboard.html
@@ -141,9 +141,8 @@
       //window.console.log('insertText('+ dn +', ' + s +');');
       window.jsInterface.insertText(dn, s);
 
-      setBanner();
-
       // TODO: Remove for production: Testing
+      setBanner();
       var kmw=com.keyman.singleton;
       kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'insertAlpha'}, {displayAs: 'insertBeta'}, {displayAs: 'insertCharlie'}]);
     }
diff --git a/common/predictive-text/package-lock.json b/common/predictive-text/package-lock.json
index 4c369f1ec9..49a9963a70 100644
--- a/common/predictive-text/package-lock.json
+++ b/common/predictive-text/package-lock.json
@@ -1177,8 +1177,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1199,14 +1198,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1221,20 +1218,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1351,8 +1345,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1364,7 +1357,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1379,7 +1371,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1387,14 +1378,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1413,7 +1402,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1494,8 +1482,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1507,7 +1494,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1593,8 +1579,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1630,7 +1615,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1650,7 +1634,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1694,14 +1677,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/web/package-lock.json b/web/package-lock.json
index 70240f8bf1..e2111cc269 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1330,8 +1330,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1448,8 +1447,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1476,7 +1474,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1491,7 +1488,6 @@
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1510,7 +1506,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1604,7 +1599,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1690,8 +1684,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1727,7 +1720,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/web/source/kmwembedded.ts b/web/source/kmwembedded.ts
index be6b9d2f1d..35079c9b31 100644
--- a/web/source/kmwembedded.ts
+++ b/web/source/kmwembedded.ts
@@ -118,11 +118,9 @@ namespace com.keyman.osk {
     let util = keyman.util;
     let device = util.device;
 
-    console.log("adjustHeights: 0");
     if(!_Box || !this.kbdDiv || !this.kbdDiv.firstChild || !this.kbdDiv.firstChild.firstChild.childNodes) {
       return false;
     }
-    console.log("adjustHeights: 1");
 
     var layers=this.kbdDiv.firstChild.childNodes,
         nRows=layers[0].childNodes.length,
@@ -134,7 +132,6 @@ namespace com.keyman.osk {
     }
     let bannerHeight : number = oskManager.getBannerHeight();
     let oskHeight : number = nRows*rowHeight;
-    console.log("adjustHeight: oskHeight " + oskHeight);
 
     var b: HTMLElement = _Box, bs=b.style;
     bs.height=bs.maxHeight=(bannerHeight+oskHeight+3)+'px';
@@ -150,8 +147,6 @@ namespace com.keyman.osk {
       nRows=layers[nLayer].childNodes.length;
       (<HTMLElement> layers[nLayer]).style.height=(oskManager.getKeyboardHeight()+3)+'px';
 
-      console.log("adjustHeights: layersp[].style.height = " + (<HTMLElement> layers[nLayer]).style.height);
-
       for(nRow=0; nRow<nRows; nRow++) {
         rs=(<HTMLElement> layers[nLayer].childNodes[nRow]).style;
         rs.bottom=(nRows-nRow-1)*rowHeight+'px';
@@ -178,7 +173,6 @@ namespace com.keyman.osk {
       }
     }
 
-    console.log("adjustHeights returns true");
     return true;
   };
 }
@@ -353,12 +347,9 @@ namespace com.keyman.text {
    * correctOSKTextSize handles rotation event -- currently rebuilds keyboard and adjusts font sizes
    */
   keymanweb['correctOSKTextSize']=function() {
-    console.log('correctOSKTextSize start');
     if(osk.vkbd.adjustHeights()) {
-      console.log('correctOSKTextSize - osk.Load');
       osk._Load();
     }
-    console.log('correctOSKTextSize done');
   };
 
   /**
diff --git a/web/source/osk/banner.ts b/web/source/osk/banner.ts
index 41263cfc77..fb66d593ba 100644
--- a/web/source/osk/banner.ts
+++ b/web/source/osk/banner.ts
@@ -229,7 +229,7 @@ namespace com.keyman.osk {
       d.id = 'kmw-suggestion-text-' + suggestionIndex;
       d.className = 'kmw-suggestion-text';
       d.innerHTML = suggestionText;
-      //ds.left = (parseInt(suggestionIndex, 10) * width) + 'px';
+      // TODO: Investigate the factor of "48"
       ds.top = oskManager.getBannerHeight() - 48 + 'px';
       t.appendChild(d);
 
diff --git a/web/source/osk/bannerManager.ts b/web/source/osk/bannerManager.ts
index fdc58771ff..bc48e3e9fa 100644
--- a/web/source/osk/bannerManager.ts
+++ b/web/source/osk/bannerManager.ts
@@ -189,7 +189,6 @@ namespace com.keyman.osk {
           let banner = this.activeBanner as SuggestionBanner;
           keyman.modelManager['addEventListener']('invalidatesuggestions', banner.invalidateSuggestions);
           keyman.modelManager['addEventListener']('suggestionsready', banner.updateSuggestions);
-          console.log('setBanner(SuggestionBanner)');
           break;
         default:
           throw new Error("Invalid type specified for the banner!");
@@ -219,13 +218,11 @@ namespace com.keyman.osk {
       // ModelManager will never have an active model 
       // when predictions are disabled.
       if(keyman.modelManager.activeModel) {
-        console.log('selectBanner suggestion');
         this.setBanner('suggestion');
       } else if(this.alwaysShows) {
         this.setBanner('image');
       } else {
-        console.log('selectBanner blank');
-        this.setBanner('blank');        
+        this.setBanner('blank');
       }
     }
 
diff --git a/web/source/osk/oskManager.ts b/web/source/osk/oskManager.ts
index cc90a52f29..62e620d848 100644
--- a/web/source/osk/oskManager.ts
+++ b/web/source/osk/oskManager.ts
@@ -1107,11 +1107,9 @@ namespace com.keyman.osk {
       let util = com.keyman.singleton.util;
       var p: OSKRect = {};
 
-      console.log('getRect');
       if(this.vkbd) {
         p['left'] = p.left = dom.Utils.getAbsoluteX(this.vkbd.kbdDiv);
         p['top']  = p.top  = dom.Utils.getAbsoluteY(this.vkbd.kbdDiv);
-        console.log('vkbd top: ' + p.top);
         p['width']  = p.width  = dom.Utils.getAbsoluteX(this.vkbd.kbdHelpDiv) -
           dom.Utils.getAbsoluteX(this.vkbd.kbdDiv) + this.vkbd.kbdHelpDiv.offsetWidth;
         p['height'] = p.height = dom.Utils.getAbsoluteY(this.vkbd.kbdHelpDiv) -
@@ -1119,7 +1117,6 @@ namespace com.keyman.osk {
       } else {
         p['left'] = p.left = dom.Utils.getAbsoluteX(this._Box);
         p['top']  = p.top  = dom.Utils.getAbsoluteY(this._Box);
-        console.log('other top: ' + p.top);
         p['width']  = p.width  = dom.Utils.getAbsoluteX(this._Box) + this._Box.offsetWidth;
         p['height'] = p.height = dom.Utils.getAbsoluteY(this._Box) + this._Box.offsetHeight;
       }
@@ -1138,7 +1135,6 @@ namespace com.keyman.osk {
         return;
       }
 
-      console.log('setRect start');
       var b = this._Box, bs = b.style;
       if('left' in p) {
         bs.left=(p['left']-dom.Utils.getAbsoluteX(b)+b.offsetLeft)+'px';
@@ -1267,19 +1263,15 @@ namespace com.keyman.osk {
       let keymanweb = com.keyman.singleton;
       let device = keymanweb.util.device;
 
-      console.log('_Show start');
       // Do not try to display OSK if undefined, or no active element
       if(this._Box == null || keymanweb.domManager.getActiveElement() == null) {
         return;
       }
 
-      console.log('_Show 1');
-
       // Never display the OSK for desktop browsers unless KMW element is focused, and a keyboard selected
       if((!device.touchable) && (keymanweb.keyboardManager.activeKeyboard == null || !this._Enabled)) {
         return;
       }
-      console.log('_Show 2');
 
       var Ls = this._Box.style;
 
@@ -1288,8 +1280,6 @@ namespace com.keyman.osk {
         Ls.visibility='hidden';
       }
 
-      console.log('_Show 3');
-
       if(device.touchable) {
         /* In case it's still '0' from a hide() operation.
          * Happens when _Show is called before the transitionend events are processed,
@@ -1298,7 +1288,6 @@ namespace com.keyman.osk {
          * (Opacity is only modified when device.touchable = true, though a couple of extra
          * conditions may apply.)
          */
-        console.log('_Show 4');
         Ls.opacity='1';
       }
 
@@ -1306,7 +1295,6 @@ namespace com.keyman.osk {
       // The following code will always be executed except for externally created OSK such as EuroLatin
       if(this.vkbd && this.vkbd.ddOSK) {
         // Enable the currently active keyboard layer and update the default nextLayer member
-        console.log('_Show 5');
         this.vkbd.show();
 
         // Extra style changes and overrides for touch-mode.
@@ -1316,8 +1304,6 @@ namespace com.keyman.osk {
           let vkbdHeight = (<HTMLElement> this.vkbd.kbdDiv.firstChild).style.height;
           vkbdHeight = vkbdHeight.substr(0, vkbdHeight.indexOf('px'));
           Ls.height=Ls.maxHeight= (this.getBannerHeight() + parseInt(vkbdHeight, 10)) + 'px';
-          console.log('_Show 6 maxHeight = ' + Ls.maxHeight);
-
           Ls.border='none';
           Ls.borderTop='1px solid gray';
 
@@ -1326,7 +1312,6 @@ namespace com.keyman.osk {
         }
       }
 
-      console.log('_Show 7');
       //TODO: may need to return here for touch devices??
       Ls.display='block'; //Ls.visibility='visible';
 
@@ -1334,7 +1319,6 @@ namespace com.keyman.osk {
         this.vkbd.showLanguage();
       }
 
-      console.log('_Show 8');
       if(device.formFactor == 'desktop') {
         Ls.position='absolute'; Ls.display='block'; //Ls.visibility='visible';
         Ls.left='0px';
@@ -1376,8 +1360,6 @@ namespace com.keyman.osk {
 
       // If OSK still hidden, make visible only after all calculation finished
       if(Ls.visibility == 'hidden') {
-        console.log('_Show 9');
-
         window.setTimeout(function(){
           this._Box.style.visibility='visible';
         }.bind(this), 0);
@@ -1390,7 +1372,6 @@ namespace com.keyman.osk {
         Lpos['y']=this._Box.offsetTop;
         Lpos['userLocated']=this.userPositioned;
         this.doShow(Lpos);
-        console.log('_Show 10');
       }
     }
 

From 3f6dfcfdb6b29be2fc91aed75190f62e92453ff3 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Wed, 3 Apr 2019 00:15:45 +0700
Subject: [PATCH 07/10] Revert package lock files for npm v 6.9.0

---
 common/predictive-text/package-lock.json | 41 +++++++++++++++++-------
 web/package-lock.json                    | 14 ++++++--
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/common/predictive-text/package-lock.json b/common/predictive-text/package-lock.json
index 49a9963a70..4c369f1ec9 100644
--- a/common/predictive-text/package-lock.json
+++ b/common/predictive-text/package-lock.json
@@ -1177,7 +1177,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1198,12 +1199,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1218,17 +1221,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1345,7 +1351,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1357,6 +1364,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1371,6 +1379,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1378,12 +1387,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1402,6 +1413,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1482,7 +1494,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1494,6 +1507,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1579,7 +1593,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1615,6 +1630,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1634,6 +1650,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1677,12 +1694,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/web/package-lock.json b/web/package-lock.json
index e2111cc269..70240f8bf1 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1330,7 +1330,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1447,7 +1448,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1474,6 +1476,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1488,6 +1491,7 @@
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1506,6 +1510,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1599,6 +1604,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1684,7 +1690,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1720,6 +1727,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

From a729902ee1f16f1b41a371a061e642ac03f4fba6 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Wed, 3 Apr 2019 10:58:17 +0700
Subject: [PATCH 08/10] Fix display on KMW desktop

---
 web/source/resources/osk/kmwosk.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index c197c08d94..f926d97196 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -158,10 +158,9 @@
 .kmw-title-bar-actions{position: absolute; cursor: default; right:2px; top:0; width: 33px; height: 13px;}
 .kmw-footer-caption{color:#fff;font:0.7em Arial;margin:0 0 0 4px;}
 
-.kmw-banner-bar{height:40px; width:100%; margin:0; background-color:darkorange;}
-.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; vertical-align: middle;}
-.kmw-suggestion-text{color:#fff; background-color: orange; display: inline; height: 100%;
-        line-height:normal; position: relative; vertical-align: middle;}
+.kmw-banner-bar{height:100%; width:100%; margin:0; background-color:darkorange; display: inline-block;}
+.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; text-align: center; height: 85%; border-radius: 5px;}
+.kmw-suggestion-text{color:#fff; background-color: orange; line-height: normal; position: relative; vertical-align: middle;}
 
 .kmw-footer-resize{cursor:se-resize;position:absolute;right:2px;bottom:2px;width:16px;height:16px;overflow:hidden;
           font-family:SpecialOSK;color:white;}

From ea998309af94f23072889f95df710222a9e1dcdc Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Thu, 4 Apr 2019 13:44:55 +0700
Subject: [PATCH 09/10] Add ability for app to toggle between 'blank' and
 'suggestion' banner

---
 .../KMEA/app/src/main/assets/keyboard.html    | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/android/KMEA/app/src/main/assets/keyboard.html b/android/KMEA/app/src/main/assets/keyboard.html
index 4b932ba0cd..156439c9aa 100644
--- a/android/KMEA/app/src/main/assets/keyboard.html
+++ b/android/KMEA/app/src/main/assets/keyboard.html
@@ -32,14 +32,8 @@
       var ta = document.getElementById('ta');
       kmw['setActiveElement'](ta);
 
-      // TODO: Remove for production. For testing integration of suggestion banner
-      kmw.osk.banner.setOptions({
-        'persistentBanner': true,
-        'enablePredictions': true
-      });
-      setBanner();
-      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'alpha'}, {displayAs: 'bravo'}, {displayAs: 'charlie'}]);
-
+      // TODO: Init as 'blank'
+      setBanner('suggestion');
       ta.readOnly = false;
 
       kmw.addEventListener('keyboardloaded', setIsChiral);
@@ -142,9 +136,13 @@
       window.jsInterface.insertText(dn, s);
 
       // TODO: Remove for production: Testing
-      setBanner();
       var kmw=com.keyman.singleton;
-      kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'insertAlpha'}, {displayAs: 'insertBeta'}, {displayAs: 'insertCharlie'}]);
+      if (s == 'b') {
+        setBanner('blank');
+      } else if (s == 's') {
+        setBanner('suggestion');
+        kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'insertAlpha'}, {displayAs: 'insertBeta'}, {displayAs: 'insertCharlie'}]);
+      }
     }
 
     function registerModel(model) {
@@ -228,10 +226,26 @@
       window.location.hash = 'hideKeyboard' + fragmentToggle;
     }
 
-    function setBanner() {
-      var kmw = window['keyman'];
-      kmw.osk.banner.setBanner('suggestion', bannerHeight);
-      window.console.log('Embedded setBanner to ' + bannerHeight);
+    function setBanner(bannerType) {
+      var kmw = com.keyman.singleton;
+      var banner = kmw.osk.banner;
+      if (bannerType == 'blank') {
+        banner.setOptions({
+          'persistentBanner': false,
+          'enablePredictions': false
+        });
+        banner.setBanner('blank');
+      } else if (bannerType == 'suggestion') {
+        banner.setOptions({
+          'persistentBanner': true,
+          'enablePredictions': true
+        });
+        banner.setBanner('suggestion', bannerHeight);
+
+        // TODO: Remove for production. For testing integration of suggestion banner
+        window.console.log('Embedded setBanner to ' + bannerHeight);
+        kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'alpha'}, {displayAs: 'bravo'}, {displayAs: 'charlie'}]);
+      }
     }
 
     function showHelpBubble() {

From 11f76b648f5eb62639db4b14f70b4b55b37a08d8 Mon Sep 17 00:00:00 2001
From: Darcy Wong <darcy_wong@sil.org>
Date: Thu, 4 Apr 2019 16:06:05 +0700
Subject: [PATCH 10/10] Update KMManager to resize Keyman when banner changes

---
 .../KMEA/app/src/main/assets/keyboard.html    |  3 +--
 .../java/com/tavultesoft/kmea/KMManager.java  | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/android/KMEA/app/src/main/assets/keyboard.html b/android/KMEA/app/src/main/assets/keyboard.html
index 156439c9aa..c5a61db4fb 100644
--- a/android/KMEA/app/src/main/assets/keyboard.html
+++ b/android/KMEA/app/src/main/assets/keyboard.html
@@ -32,8 +32,7 @@
       var ta = document.getElementById('ta');
       kmw['setActiveElement'](ta);
 
-      // TODO: Init as 'blank'
-      setBanner('suggestion');
+      setBanner('blank');
       ta.readOnly = false;
 
       kmw.addEventListener('keyboardloaded', setIsChiral);
diff --git a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
index 2d89d7dd7c..6b371a44c7 100644
--- a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
+++ b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
@@ -104,6 +104,7 @@ public final class KMManager {
   protected static boolean SystemKeyboardShouldIgnoreSelectionChange = false;
   protected static KMKeyboard InAppKeyboard = null;
   protected static KMKeyboard SystemKeyboard = null;
+  protected static String currentBanner = "blank";
 
   // Keyman public keys
   public static final String KMKey_ID = "id";
@@ -234,13 +235,18 @@ public final class KMManager {
     return false;
   }
 
+  private static RelativeLayout.LayoutParams getKeyboardLayoutParams() {
+    int bannerHeight = currentBanner.equals("suggestion") ? getBannerHeight(appContext) : 0;
+    int kbHeight = getKeyboardHeight(appContext);
+    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
+    params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
+   return params;
+  }
+
   private static void initInAppKeyboard(Context appContext) {
     if (InAppKeyboard == null) {
-      int bannerHeight = getBannerHeight(appContext);
-      int kbHeight = getKeyboardHeight(appContext);
-      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
-      params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
       InAppKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_INAPP);
+      RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
       InAppKeyboard.setLayoutParams(params);
       InAppKeyboard.setVerticalScrollBarEnabled(false);
       InAppKeyboard.setHorizontalScrollBarEnabled(false);
@@ -252,11 +258,8 @@ public final class KMManager {
 
   private static void initSystemKeyboard(Context appContext) {
     if (SystemKeyboard == null) {
-      int bannerHeight = getBannerHeight(appContext);
-      int kbHeight = getKeyboardHeight(appContext);
-      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
-      params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
       SystemKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_SYSTEM);
+      RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
       SystemKeyboard.setLayoutParams(params);
       SystemKeyboard.setVerticalScrollBarEnabled(false);
       SystemKeyboard.setHorizontalScrollBarEnabled(false);
@@ -675,10 +678,14 @@ public final class KMManager {
     model = model.replaceAll("\'", "\\\\'"); // Double-escaped-backslash b/c regex.
     model = model.replaceAll("\"", "'");
 
+    currentBanner = "suggestion";
+    RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
     if (InAppKeyboard != null && InAppKeyboardLoaded && !InAppKeyboardShouldIgnoreTextChange) {
+      InAppKeyboard.setLayoutParams(params);
       InAppKeyboard.loadUrl(String.format("javascript:registerModel(%s)", model));
     }
     if (SystemKeyboard != null && SystemKeyboardLoaded && !SystemKeyboardShouldIgnoreTextChange) {
+      SystemKeyboard.setLayoutParams(params);
       SystemKeyboard.loadUrl(String.format("javascript:registerModel(%s)", model));
     }
     return true;