[gnome-shell/wip/carlosg/osk-updates: 1/17] keyboard: Separate aspect and behavior of OSK keys

[Carlos Garnacho <carlosg src gnome org>]

commit f32403cb840193649564afa4c414b23ac45f1b88
Author: Carlos Garnacho <carlosg gnome org>
Date:   Thu Apr 14 14:46:03 2022 +0200

    keyboard: Separate aspect and behavior of OSK keys
    
    Add distinct properties for label/icon, and commit string/keyval
    actions. This makes keys figure less things on their own, allows
    disociating aspect and behavior (e.g. label '↲' and keyval 0x13),
    and makes the fallbacks clearer (keyval and label resorting to
    commit string).

 js/ui/keyboard.js | 93 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 65 insertions(+), 28 deletions(-)
---
diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index 032f4c80b8..0d4862ad4e 100644
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -10,6 +10,7 @@ const IBusManager = imports.misc.ibusManager;
 const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
 const PageIndicators = imports.ui.pageIndicators;
+const Params = imports.misc.params;
 const PopupMenu = imports.ui.popupMenu;
 
 var KEYBOARD_ANIMATION_TIME = 150;
@@ -295,11 +296,17 @@ var Key = GObject.registerClass({
         'released': { param_types: [GObject.TYPE_UINT, GObject.TYPE_STRING] },
     },
 }, class Key extends St.BoxLayout {
-    _init(key, extendedKeys, icon = null) {
+    _init(params, extendedKeys) {
+        params = Params.parse(params, {
+            label: null,
+            icon_name: null,
+            commit_string: null,
+            keyval: 0,
+        });
         super._init({ style_class: 'key-container' });
 
-        this.key = key || "";
-        this.keyButton = this._makeKey(this.key, icon);
+        this._keyval = parseInt(params.keyval, 16);
+        this.keyButton = this._makeKey(params.commit_string, params.label, params.icon_name);
 
         /* Add the key in a container, so keys can be padded without losing
          * logical proportions between those.
@@ -307,7 +314,7 @@ var Key = GObject.registerClass({
         this.add_child(this.keyButton);
         this.connect('destroy', this._onDestroy.bind(this));
 
-        this._extendedKeys = extendedKeys;
+        this._extendedKeys = extendedKeys || [];
         this._extendedKeyboard = null;
         this._pressTimeoutId = 0;
         this._capturedPress = false;
@@ -341,17 +348,17 @@ var Key = GObject.registerClass({
     }
 
     _getKeyval(key) {
-        let unicode = key.length ? key.charCodeAt(0) : undefined;
+        let unicode = key?.length ? key.charCodeAt(0) : undefined;
         return Clutter.unicode_to_keysym(unicode);
     }
 
-    _press(key) {
+    _press(button, commitString) {
         this.emit('activated');
 
-        if (this._extendedKeys.length === 0)
-            this.emit('pressed', this._getKeyval(key), key);
+        let keyval;
 
-        if (key == this.key) {
+        if (button === this.keyButton) {
+            keyval = this._keyval;
             this._pressTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
                 KEY_LONG_PRESS_TIME,
                 () => {
@@ -370,18 +377,30 @@ var Key = GObject.registerClass({
                     return GLib.SOURCE_REMOVE;
                 });
         }
+
+        if (!keyval)
+            keyval = this._getKeyval(commitString);
+
+        if (this._extendedKeys.length === 0)
+            this.emit('pressed', keyval, commitString);
     }
 
-    _release(key) {
+    _release(button, commitString) {
         if (this._pressTimeoutId != 0) {
             GLib.source_remove(this._pressTimeoutId);
             this._pressTimeoutId = 0;
         }
 
+        let keyval;
+        if (button === this.keyButton)
+            keyval = this._keyval;
+        if (!keyval && commitString)
+            keyval = this._getKeyval(commitString);
+
         if (this._extendedKeys.length > 0)
-            this.emit('pressed', this._getKeyval(key), key);
+            this.emit('pressed', keyval, commitString);
 
-        this.emit('released', this._getKeyval(key), key);
+        this.emit('released', keyval, commitString);
         this._hideSubkeys();
     }
 
@@ -431,29 +450,31 @@ var Key = GObject.registerClass({
         this._capturedPress = false;
     }
 
-    _makeKey(key, icon) {
+    _makeKey(commitString, label, icon) {
         let button = new St.Button({
             style_class: 'keyboard-key',
             x_expand: true,
         });
 
         if (icon) {
-            let child = new St.Icon({ icon_name: icon });
+            const child = new St.Icon({ icon_name: icon });
             button.set_child(child);
             this._icon = child;
-        } else {
-            let label = GLib.markup_escape_text(key, -1);
+        } else if (label) {
             button.set_label(label);
+        } else if (commitString) {
+            const str = GLib.markup_escape_text(commitString, -1);
+            button.set_label(str);
         }
 
         button.keyWidth = 1;
         button.connect('button-press-event', () => {
-            this._press(key);
+            this._press(button, commitString);
             button.add_style_pseudo_class('active');
             return Clutter.EVENT_STOP;
         });
         button.connect('button-release-event', () => {
-            this._release(key);
+            this._release(button, commitString);
             button.remove_style_pseudo_class('active');
             return Clutter.EVENT_STOP;
         });
@@ -473,12 +494,12 @@ var Key = GObject.registerClass({
             if (!this._touchPressSlot &&
                 event.type() == Clutter.EventType.TOUCH_BEGIN) {
                 this._touchPressSlot = slot;
-                this._press(key);
+                this._press(button, commitString);
                 button.add_style_pseudo_class('active');
             } else if (event.type() === Clutter.EventType.TOUCH_END) {
                 if (!this._touchPressSlot ||
                     this._touchPressSlot === slot) {
-                    this._release(key);
+                    this._release(button, commitString);
                     button.remove_style_pseudo_class('active');
                 }
 
@@ -892,7 +913,7 @@ var EmojiPager = GObject.registerClass({
 
         for (let i = 0; i < page.pageKeys.length; i++) {
             let modelKey = page.pageKeys[i];
-            let key = new Key(modelKey.label, modelKey.variants);
+            let key = new Key({ commit_string: modelKey.label }, modelKey.variants);
 
             key.keyButton.set_button_mask(0);
 
@@ -1087,7 +1108,7 @@ var EmojiSelection = GObject.registerClass({
 
         row.appendRow();
 
-        key = new Key('ABC', []);
+        key = new Key({ label: 'ABC' }, []);
         key.keyButton.add_style_class_name('default-key');
         key.connect('released', () => this.emit('toggle'));
         row.appendKey(key, 1.5);
@@ -1095,14 +1116,14 @@ var EmojiSelection = GObject.registerClass({
         for (let i = 0; i < this._sections.length; i++) {
             let section = this._sections[i];
 
-            key = new Key(section.label, []);
+            key = new Key({ label: section.label }, []);
             key.connect('released', () => this._emojiPager.setCurrentSection(section, 0));
             row.appendKey(key);
 
             section.button = key;
         }
 
-        key = new Key(null, [], 'go-down-symbolic');
+        key = new Key({ icon_name: 'go-down-symbolic' });
         key.keyButton.add_style_class_name('default-key');
         key.keyButton.add_style_class_name('hide-key');
         key.connect('released', () => {
@@ -1164,7 +1185,10 @@ var Keypad = GObject.registerClass({
 
         for (let i = 0; i < keys.length; i++) {
             let cur = keys[i];
-            let key = new Key(cur.label || "", [], cur.icon);
+            let key = new Key({
+                label: cur.label,
+                icon_name: cur.icon,
+            });
 
             if (keys[i].extraClassName)
                 key.keyButton.add_style_class_name(cur.extraClassName);
@@ -1505,9 +1529,16 @@ var Keyboard = GObject.registerClass({
 
     _addRowKeys(keys, layout) {
         for (let i = 0; i < keys.length; ++i) {
-            let key = keys[i];
+            const key = keys[i];
             let strings = key.strings;
-            let button = new Key(strings.shift(), strings);
+            const commitString = strings?.shift();
+
+            let button = new Key({
+                commit_string: commitString,
+                label: key.label,
+                icon_name: key.iconName,
+                keyval: key.keyval,
+            }, strings);
 
             if (key.width !== null)
                 button.setWidth(key.width);
@@ -1532,6 +1563,9 @@ var Keyboard = GObject.registerClass({
                     this._setActiveLayer(0);
             });
 
+            if (key.action || key.keyval)
+                button.keyButton.add_style_class_name('default-key');
+
             layout.appendKey(button, button.keyButton.keyWidth);
         }
     }
@@ -1558,7 +1592,10 @@ var Keyboard = GObject.registerClass({
             if (!this._emojiKeyVisible && action == 'emoji')
                 continue;
 
-            extraButton = new Key(key.label || '', [], icon);
+            extraButton = new Key({
+                label: key.label,
+                icon_name: icon,
+            });
 
             extraButton.keyButton.add_style_class_name('default-key');
             if (key.extraClassName != null)