From 29d287ce5744e63c341446c321bff0747ec89c10 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Mon, 23 Oct 2023 16:01:13 +0700
Subject: [PATCH 01/11] feat(web): start of configurable key-hint
 implementation

---
 .../src/keyboards/activeLayout.ts             | 17 ++++++++++++++++
 .../osk/src/keyboard-layout/oskBaseKey.ts     | 20 +++++++++++++------
 web/src/resources/osk/kmwosk.css              |  4 +---
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index 87c25640fd..c23b5b2ae8 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -74,6 +74,7 @@ export class ActiveKeyBase {
   /** WARNING - DO NOT USE DIRECTLY outside of @keymanapp/keyboard-processor! */
   id: TouchLayout.TouchLayoutKeyId;
   text: string;
+  hint?: string;
 
   // These are fine.
   width?: number;
@@ -347,10 +348,26 @@ export class ActiveKeyBase {
     aKey.displayLayer = displayLayer;
     aKey.layer = aKey.layer || displayLayer;
 
+    aKey.hint = aKey.hint || ActiveKeyBase.determineHint(aKey, layout.defaultHint);
+
     // Compute the key's base KeyEvent properties for use in future event generation
     aKey.constructBaseKeyEvent(keyboard, layout, displayLayer);
   }
 
+  private static determineHint(spec: ActiveKey, defaultHint: TouchLayout.TouchLayoutDefaultHint): string {
+    switch(defaultHint) {
+      case 'none':
+        return '';
+      case 'dot':
+      default:
+        if(spec.sk) {
+          return '\u2022';
+        } else {
+          return '';
+        }
+    }
+  }
+
   private constructBaseKeyEvent(keyboard: Keyboard, layout: ActiveLayout, displayLayer: string) {
     // Get key name and keyboard shift state (needed only for default layouts and physical keyboard handling)
     // Note - virtual keys should be treated case-insensitive, so we force uppercasing here.
diff --git a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
index 5f2c091c2c..34c7b5ea03 100644
--- a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
+++ b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
@@ -81,12 +81,6 @@ export default class OSKBaseKey extends OSKKey {
         bsk[bsn].layer = btn.key.layer
       }
     }
-
-    // If a subkey array is defined, add an icon
-    var skIcon = document.createElement('div');
-    skIcon.className='kmw-key-popup-icon';
-    //kDiv.appendChild(skIcon);
-    btn.appendChild(skIcon);
   }
 
   construct(vkbd: VisualKeyboard): HTMLDivElement {
@@ -120,6 +114,20 @@ export default class OSKBaseKey extends OSKKey {
       btn['subKeys']=null;
     }
 
+    // If a subkey array is defined, add an icon
+    var skIcon = document.createElement('div');
+
+    // Ensure that we use the keyboard's text font for hints.
+    skIcon.className='kmw-key-popup-icon keymanweb-font';
+    if(this.spec.hint == '\u2022') {
+      // The original, pre-17.0 longpress dot-hint used bold-face styling.
+      skIcon.style.fontWeight='bold';
+    }
+    skIcon.textContent = this.spec.hint;
+
+    //kDiv.appendChild(skIcon);
+    btn.appendChild(skIcon);
+
     // Add text to button and button to placeholder div
     kDiv.appendChild(btn);
 
diff --git a/web/src/resources/osk/kmwosk.css b/web/src/resources/osk/kmwosk.css
index 029a0f7466..6ae3cf558a 100644
--- a/web/src/resources/osk/kmwosk.css
+++ b/web/src/resources/osk/kmwosk.css
@@ -271,10 +271,8 @@
 .desktop .kmw-key-label{position:absolute;left:2px;top:2px;font:0.5em Arial;color:#888;background-color:transparent;}
 
 /* Popup icon style (and content)*/
-.kmw-key-popup-icon:before{content:'\2022';}
-
 .kmw-key-popup-icon{position:absolute;display:block;visibility:visible;right:4%;top:1%;/*width:8px;height:8px;*/
-      font:bold 0.5em Arial;color:#aaa;}
+      font:0.5em Arial;color:#aaa}
 /*.phone .kmw-key-popup-icon{right:6%;top:-2px;width:8px;height:8px;text-align:right;}
 .desktop .kmw-key-popup-icon{right:4%;top:0;width:8px;height:8px;} */
 

From 879651f5d3e870fd90f5b92c95b09695d9078089 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Mon, 23 Oct 2023 16:15:43 +0700
Subject: [PATCH 02/11] feat(web): proper determineHint implementation

---
 .../src/keyboards/activeLayout.ts             | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index c23b5b2ae8..44436031c3 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -56,7 +56,9 @@ const KeyTypesOfKeyMap = {
   default: 'boolean'
 } as const;
 
-const KeyTypesOfFlickList = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'] as const;
+// Keep in this specific order: it's the ordering of priority for default hint selection when
+// based on available hints.  (i.e., `layout.defaultHint == 'flick'`)
+const KeyTypesOfFlickList = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'] as const;
 
 export class ActiveKeyBase {
   static readonly DEFAULT_PAD=15;          // Padding to left of key, in virtual units
@@ -348,16 +350,53 @@ export class ActiveKeyBase {
     aKey.displayLayer = displayLayer;
     aKey.layer = aKey.layer || displayLayer;
 
-    aKey.hint = aKey.hint || ActiveKeyBase.determineHint(aKey, layout.defaultHint);
+    aKey.hint = ActiveKeyBase.determineHint(aKey, layout.defaultHint);
 
     // Compute the key's base KeyEvent properties for use in future event generation
     aKey.constructBaseKeyEvent(keyboard, layout, displayLayer);
   }
 
   private static determineHint(spec: ActiveKey, defaultHint: TouchLayout.TouchLayoutDefaultHint): string {
+    // If a hint was directly specified, don't override it.
+    if(spec.hint) {
+      return spec.hint;
+    }
+
+    // Is more compact than writing 8 separate cases.
+    if(defaultHint.includes('flick-')) {
+      // 6 = length of 'flick-'
+      if(!spec.flick) {
+        return '';
+      }
+
+      const dir = defaultHint.substring(6);
+
+      return spec.flick[dir]?.text ?? '';
+    }
+
     switch(defaultHint) {
       case 'none':
         return '';
+      case 'multitap':
+        if(!spec.multitap) {
+          return '';
+        }
+        return spec.multitap[0].text;
+      case 'flick':
+        if(!spec.flick) {
+          return '';
+        }
+        for(const key of KeyTypesOfFlickList) {
+          if(spec.flick[key]) {
+            return spec.flick[key].text;
+          }
+        }
+        return '';
+      case 'longpress':
+        if(!spec.sk) {
+          return '';
+        }
+        return spec.sk[0].text;
       case 'dot':
       default:
         if(spec.sk) {

From dd6efa9e59840e27f54fd4c155b41cd29f60c643 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Mon, 23 Oct 2023 16:20:38 +0700
Subject: [PATCH 03/11] fix(web): defaultHint is optional; must null-guard

---
 common/web/keyboard-processor/src/keyboards/activeLayout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index 44436031c3..c4c5776f55 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -363,7 +363,7 @@ export class ActiveKeyBase {
     }
 
     // Is more compact than writing 8 separate cases.
-    if(defaultHint.includes('flick-')) {
+    if(defaultHint?.includes('flick-')) {
       // 6 = length of 'flick-'
       if(!spec.flick) {
         return '';

From 66f3c4d202af42e2d5731d85f5e1f58531bb0518 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Mon, 23 Oct 2023 16:37:22 +0700
Subject: [PATCH 04/11] fix(web): proper sourcing for hint font style

---
 common/web/keyboard-processor/src/keyboards/activeLayout.ts | 3 +++
 web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts        | 2 +-
 web/src/resources/osk/kmwosk.css                            | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index c4c5776f55..8924468b11 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -78,6 +78,9 @@ export class ActiveKeyBase {
   text: string;
   hint?: string;
 
+  font?: string;
+  fontsize?: string;
+
   // These are fine.
   width?: number;
   pad?: number;
diff --git a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
index 34c7b5ea03..548556268d 100644
--- a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
+++ b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
@@ -118,7 +118,7 @@ export default class OSKBaseKey extends OSKKey {
     var skIcon = document.createElement('div');
 
     // Ensure that we use the keyboard's text font for hints.
-    skIcon.className='kmw-key-popup-icon keymanweb-font';
+    skIcon.className='kmw-key-popup-icon kmw-key-text';
     if(this.spec.hint == '\u2022') {
       // The original, pre-17.0 longpress dot-hint used bold-face styling.
       skIcon.style.fontWeight='bold';
diff --git a/web/src/resources/osk/kmwosk.css b/web/src/resources/osk/kmwosk.css
index 6ae3cf558a..47476c832c 100644
--- a/web/src/resources/osk/kmwosk.css
+++ b/web/src/resources/osk/kmwosk.css
@@ -272,7 +272,7 @@
 
 /* Popup icon style (and content)*/
 .kmw-key-popup-icon{position:absolute;display:block;visibility:visible;right:4%;top:1%;/*width:8px;height:8px;*/
-      font:0.5em Arial;color:#aaa}
+      font-size:0.5em;color:#aaa; line-height:initial}
 /*.phone .kmw-key-popup-icon{right:6%;top:-2px;width:8px;height:8px;text-align:right;}
 .desktop .kmw-key-popup-icon{right:4%;top:0;width:8px;height:8px;} */
 

From 5eddecd6e7e699f0458b72e5e735392729ce7df5 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Tue, 24 Oct 2023 08:07:21 +0700
Subject: [PATCH 05/11] change(web): ActiveKeyBase.hintSrc

---
 .../src/keyboards/activeLayout.ts             | 39 ++++++++++--------
 .../osk/src/keyboard-layout/oskBaseKey.ts     | 40 ++++++++++++++-----
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index 8924468b11..26a37c61e1 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -77,6 +77,7 @@ export class ActiveKeyBase {
   id: TouchLayout.TouchLayoutKeyId;
   text: string;
   hint?: string;
+  hintSrc?: TouchLayout.TouchLayoutSubKey | TouchLayout.TouchLayoutKey;
 
   font?: string;
   fontsize?: string;
@@ -353,60 +354,66 @@ export class ActiveKeyBase {
     aKey.displayLayer = displayLayer;
     aKey.layer = aKey.layer || displayLayer;
 
-    aKey.hint = ActiveKeyBase.determineHint(aKey, layout.defaultHint);
+    ActiveKeyBase.determineHint(aKey, layout.defaultHint);
 
     // Compute the key's base KeyEvent properties for use in future event generation
     aKey.constructBaseKeyEvent(keyboard, layout, displayLayer);
   }
 
-  private static determineHint(spec: ActiveKey, defaultHint: TouchLayout.TouchLayoutDefaultHint): string {
+  private static determineHint(spec: ActiveKey, defaultHint: TouchLayout.TouchLayoutDefaultHint): void {
     // If a hint was directly specified, don't override it.
     if(spec.hint) {
-      return spec.hint;
+      spec.hintSrc = spec;
+      return;
     }
 
     // Is more compact than writing 8 separate cases.
     if(defaultHint?.includes('flick-')) {
       // 6 = length of 'flick-'
       if(!spec.flick) {
-        return '';
+        return;
       }
 
       const dir = defaultHint.substring(6);
 
-      return spec.flick[dir]?.text ?? '';
+      if(spec.flick[dir]?.text) {
+        spec.hintSrc = spec.flick[dir];
+        return;
+      }
     }
 
     switch(defaultHint) {
       case 'none':
-        return '';
+        return;
       case 'multitap':
         if(!spec.multitap) {
-          return '';
+          return;
         }
-        return spec.multitap[0].text;
+        spec.hintSrc = spec.multitap[0];
       case 'flick':
         if(!spec.flick) {
-          return '';
+          return;
         }
         for(const key of KeyTypesOfFlickList) {
           if(spec.flick[key]) {
-            return spec.flick[key].text;
+            spec.hintSrc = spec.flick[key];
+            return;
           }
         }
-        return '';
+        return;
       case 'longpress':
         if(!spec.sk) {
-          return '';
+          return;
         }
-        return spec.sk[0].text;
+        spec.hintSrc = spec.sk[0];
+        return;
       case 'dot':
       default:
         if(spec.sk) {
-          return '\u2022';
-        } else {
-          return '';
+          spec.hint = '\u2022';
+          spec.hintSrc = spec;
         }
+        return;
     }
   }
 
diff --git a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
index 548556268d..5b02e15c50 100644
--- a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
+++ b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
@@ -115,17 +115,7 @@ export default class OSKBaseKey extends OSKKey {
     }
 
     // If a subkey array is defined, add an icon
-    var skIcon = document.createElement('div');
-
-    // Ensure that we use the keyboard's text font for hints.
-    skIcon.className='kmw-key-popup-icon kmw-key-text';
-    if(this.spec.hint == '\u2022') {
-      // The original, pre-17.0 longpress dot-hint used bold-face styling.
-      skIcon.style.fontWeight='bold';
-    }
-    skIcon.textContent = this.spec.hint;
-
-    //kDiv.appendChild(skIcon);
+    const skIcon = this.generateHint();
     btn.appendChild(skIcon);
 
     // Add text to button and button to placeholder div
@@ -135,6 +125,34 @@ export default class OSKBaseKey extends OSKKey {
     return this.square = kDiv;
   }
 
+  public generateHint(): HTMLDivElement {
+    // If a hint is defined, add an icon
+    const skIcon = document.createElement('div');
+    // Ensure that we use the keyboard's text font for hints.
+    skIcon.className='kmw-key-popup-icon';
+
+    const hintSpec = this.spec.hintSrc;
+    if(!hintSpec) {
+      return skIcon;
+    }
+
+    if(hintSpec.text == '\u2022') {
+      // The original, pre-17.0 longpress dot-hint used bold-face styling.
+      skIcon.style.fontWeight='bold';
+    }
+
+    if(hintSpec.font) {
+      skIcon.style.fontFamily = hintSpec.font;
+    } else {
+      skIcon.classList.add('kmw-key-text');
+    }
+    // If the base key itself is the source of the hint text, we use `hint` directly.
+    // Otherwise, we present the source subkey's key cap as the hint.
+    skIcon.textContent = hintSpec == this.spec ? this.spec.hint : hintSpec.text;
+
+    return skIcon;
+  }
+
   public refreshLayout(vkbd: VisualKeyboard) {
     let key = this.spec as ActiveKey;
     this.square.style.width = vkbd.layoutWidth.scaledBy(key.proportionalWidth).styleString;

From 14dfdad6514f7d140b3f8d5d7879176072bdd409 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Tue, 24 Oct 2023 08:38:44 +0700
Subject: [PATCH 06/11] fix(web): right, custom fontsize

---
 web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
index 5b02e15c50..7d951e53a9 100644
--- a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
+++ b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
@@ -5,6 +5,7 @@ import OSKKey from './oskKey.js';
 import { KeyData, KeyElement, link } from '../keyElement.js';
 import OSKRow from './oskRow.js';
 import VisualKeyboard from '../visualKeyboard.js';
+import { ParsedLengthStyle } from '../lengthStyle.js';
 
 
 export default class OSKBaseKey extends OSKKey {
@@ -146,6 +147,15 @@ export default class OSKBaseKey extends OSKKey {
     } else {
       skIcon.classList.add('kmw-key-text');
     }
+
+    if(hintSpec.fontsize) {
+      const parsed = new ParsedLengthStyle(hintSpec.fontsize);
+      // From kmwosk.css: .kmw-key-popup-icon { font-size: 0.5em }
+      // The spec says to overwrite that, but we still want half-size compared to the text
+      // as a key-cap.
+      skIcon.style.fontSize = parsed.scaledBy(0.5).styleString;
+    }
+
     // If the base key itself is the source of the hint text, we use `hint` directly.
     // Otherwise, we present the source subkey's key cap as the hint.
     skIcon.textContent = hintSpec == this.spec ? this.spec.hint : hintSpec.text;

From 14ebf9aff2165a050f61a80b7721de969ffa4c12 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Tue, 24 Oct 2023 08:40:59 +0700
Subject: [PATCH 07/11] fix(web): niche case for bold-font styling

---
 web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
index 7d951e53a9..9c1fb1a019 100644
--- a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
+++ b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
@@ -137,11 +137,6 @@ export default class OSKBaseKey extends OSKKey {
       return skIcon;
     }
 
-    if(hintSpec.text == '\u2022') {
-      // The original, pre-17.0 longpress dot-hint used bold-face styling.
-      skIcon.style.fontWeight='bold';
-    }
-
     if(hintSpec.font) {
       skIcon.style.fontFamily = hintSpec.font;
     } else {
@@ -158,7 +153,12 @@ export default class OSKBaseKey extends OSKKey {
 
     // If the base key itself is the source of the hint text, we use `hint` directly.
     // Otherwise, we present the source subkey's key cap as the hint.
-    skIcon.textContent = hintSpec == this.spec ? this.spec.hint : hintSpec.text;
+    const text = hintSpec == this.spec ? this.spec.hint : hintSpec.text;
+    if(text == '\u2022') {
+      // The original, pre-17.0 longpress dot-hint used bold-face styling.
+      skIcon.style.fontWeight='bold';
+    }
+    skIcon.textContent = text;
 
     return skIcon;
   }

From fca5e6d91dc217208a69bcaa757eee18eacbc31e Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Tue, 24 Oct 2023 08:42:17 +0700
Subject: [PATCH 08/11] fix(web): position of determineHint return statement

---
 common/web/keyboard-processor/src/keyboards/activeLayout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index 26a37c61e1..89860d6328 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -378,8 +378,8 @@ export class ActiveKeyBase {
 
       if(spec.flick[dir]?.text) {
         spec.hintSrc = spec.flick[dir];
-        return;
       }
+      return;
     }
 
     switch(defaultHint) {

From 2836a16650fbee2960bab1057375fa937b44a720 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Tue, 24 Oct 2023 08:44:38 +0700
Subject: [PATCH 09/11] fix(web): prevent switch-case fallthrough

---
 .../src/keyboards/activeLayout.ts             | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/common/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
index 89860d6328..7875999a80 100644
--- a/common/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -369,16 +369,15 @@ export class ActiveKeyBase {
 
     // Is more compact than writing 8 separate cases.
     if(defaultHint?.includes('flick-')) {
-      // 6 = length of 'flick-'
-      if(!spec.flick) {
-        return;
+      if(spec.flick) {
+        // 6 = length of 'flick-'
+        const dir = defaultHint.substring(6);
+
+        if(spec.flick[dir]?.text) {
+          spec.hintSrc = spec.flick[dir];
+        }
       }
 
-      const dir = defaultHint.substring(6);
-
-      if(spec.flick[dir]?.text) {
-        spec.hintSrc = spec.flick[dir];
-      }
       return;
     }
 
@@ -386,26 +385,24 @@ export class ActiveKeyBase {
       case 'none':
         return;
       case 'multitap':
-        if(!spec.multitap) {
-          return;
+        if(spec.multitap) {
+          spec.hintSrc = spec.multitap[0];
         }
-        spec.hintSrc = spec.multitap[0];
+        return;
       case 'flick':
-        if(!spec.flick) {
-          return;
-        }
-        for(const key of KeyTypesOfFlickList) {
-          if(spec.flick[key]) {
-            spec.hintSrc = spec.flick[key];
-            return;
+        if(spec.flick) {
+          for(const key of KeyTypesOfFlickList) {
+            if(spec.flick[key]) {
+              spec.hintSrc = spec.flick[key];
+              return;
+            }
           }
         }
         return;
       case 'longpress':
-        if(!spec.sk) {
-          return;
+        if(spec.sk) {
+          spec.hintSrc = spec.sk[0];
         }
-        spec.hintSrc = spec.sk[0];
         return;
       case 'dot':
       default:

From b070c10b347ecdb7b9dad527001c15ffa27f986f Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Tue, 31 Oct 2023 16:09:19 +0700
Subject: [PATCH 10/11] fix(web): CSS styling for tablet key-hints

---
 web/src/resources/osk/kmwosk.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/resources/osk/kmwosk.css b/web/src/resources/osk/kmwosk.css
index 47476c832c..b668b35a70 100644
--- a/web/src/resources/osk/kmwosk.css
+++ b/web/src/resources/osk/kmwosk.css
@@ -196,7 +196,7 @@
 .tablet .kmw-key {border-radius:8px;overflow:visible;border:solid 2px #999999;box-shadow: 0px -1px 1px 0px rgba(0,0,0,1) inset;}
 
 .tablet .kmw-key-label{position:absolute;left:7%;top:2%;font:0.5em Arial;color:#aaa;background-color:transparent;z-index:10000;}
-.tablet .kmw-key-text{position:relative;left:0;top:0;-webkit-user-select:none;}
+.tablet .kmw-key-text{-webkit-user-select:none;}
 
 .tablet.ios .kmw-key-layer-group {background-color: #cfd3d9}
 .tablet.ios .kmw-key {border: none; border-bottom: solid 1px #8a8d90; box-shadow:none; border-radius: 5px;}
@@ -273,6 +273,7 @@
 /* Popup icon style (and content)*/
 .kmw-key-popup-icon{position:absolute;display:block;visibility:visible;right:4%;top:1%;/*width:8px;height:8px;*/
       font-size:0.5em;color:#aaa; line-height:initial}
+
 /*.phone .kmw-key-popup-icon{right:6%;top:-2px;width:8px;height:8px;text-align:right;}
 .desktop .kmw-key-popup-icon{right:4%;top:0;width:8px;height:8px;} */
 

From 5a2cfb89c0d6a95625771e78cedc2baf3129d198 Mon Sep 17 00:00:00 2001
From: Joshua Horton <joshua_horton@sil.org>
Date: Mon, 6 Nov 2023 08:27:22 +0700
Subject: [PATCH 11/11] chore(web): Apply suggestions from code review

Co-authored-by: Marc Durdin <marc@durdin.net>
---
 web/src/resources/osk/kmwosk.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/resources/osk/kmwosk.css b/web/src/resources/osk/kmwosk.css
index b668b35a70..9177f0b272 100644
--- a/web/src/resources/osk/kmwosk.css
+++ b/web/src/resources/osk/kmwosk.css
@@ -196,7 +196,9 @@
 .tablet .kmw-key {border-radius:8px;overflow:visible;border:solid 2px #999999;box-shadow: 0px -1px 1px 0px rgba(0,0,0,1) inset;}
 
 .tablet .kmw-key-label{position:absolute;left:7%;top:2%;font:0.5em Arial;color:#aaa;background-color:transparent;z-index:10000;}
-.tablet .kmw-key-text{-webkit-user-select:none;}
+.tablet .kmw-key-text {
+  -webkit-user-select:none;
+}
 
 .tablet.ios .kmw-key-layer-group {background-color: #cfd3d9}
 .tablet.ios .kmw-key {border: none; border-bottom: solid 1px #8a8d90; box-shadow:none; border-radius: 5px;}