keyboard: Add Suggestions object/actor

This will display completion suggestions, that when clicked will get the
text inserted into the current IM focus.

data/theme/gnome-shell-high-contrast.css

@@ -1503,6 +1503,11 @@ StScrollBar {
     border-width: 0; }
 
 /* On-screen Keyboard */
+.word-suggestions {
+  font-size: 14pt;
+  spacing: 12px;
+  min-height: 20pt; }
+
 #keyboard {
   background-color: rgba(46, 52, 54, 0.7); }
 

data/theme/gnome-shell-sass

@@ -1 +1 @@
-Subproject commit 08973e0e16de468bc7a1cc1085f2e17153b74609
+Subproject commit 043f03aca1684d9eca5df4aac43646c8f379f174

data/theme/gnome-shell.css

@@ -1503,6 +1503,11 @@ StScrollBar {
     border-width: 0; }
 
 /* On-screen Keyboard */
+.word-suggestions {
+  font-size: 14pt;
+  spacing: 12px;
+  min-height: 20pt; }
+
 #keyboard {
   background-color: rgba(46, 52, 54, 0.7); }
 

js/ui/keyboard.js

@@ -49,6 +49,27 @@ const defaultKeysPost = [
       [{ label: '🌐', width: 1.5 }, { label: '⌨', width: 1.5, action: 'hide' }] ],
 ];
 
+var Suggestions = new Lang.Class({
+    Name: 'Suggestions',
+
+    _init: function() {
+        this.actor = new St.BoxLayout({ style_class: 'word-suggestions',
+                                        vertical: false });
+        this.actor.show();
+    },
+
+    add: function(word, callback) {
+        let button = new St.Button({ label: word });
+        button.connect('clicked', callback);
+        this.actor.add(button);
+    },
+
+    clear: function() {
+        this.actor.remove_all_children();
+    },
+});
+Signals.addSignalMethods(Suggestions.prototype);
+
 var Key = new Lang.Class({
     Name: 'Key',
 
@@ -250,6 +271,7 @@ var Keyboard = new Lang.Class({
         this._a11yApplicationsSettings = new Gio.Settings({ schema_id: A11Y_APPLICATIONS_SCHEMA });
         this._a11yApplicationsSettings.connect('changed', Lang.bind(this, this._syncEnabled));
         this._lastDeviceId = null;
+        this._suggestions = null;
 
         Meta.get_backend().connect('last-device-changed', Lang.bind(this,
             function (backend, deviceId) {
@@ -421,6 +443,14 @@ var Keyboard = new Lang.Class({
         this._groups = {};
         this._current_page = null;
 
+        this._suggestions = new Suggestions();
+        this._suggestions.connect('suggestion-clicked', Lang.bind(this, function(suggestions, str) {
+            this._keyboardController.commitString(str);
+        }));
+        this.actor.add(this._suggestions.actor,
+                       { x_align: St.Align.MIDDLE,
+                         x_fill: false });
+
         this._addKeys();
 
         // Keyboard models are defined in LTR, we must override
@@ -676,7 +706,7 @@ var Keyboard = new Lang.Class({
         let keyHeight = Math.floor((maxHeight - allVerticalSpacing - 2 * padding) / numOfVertSlots);
 
         let keySize = Math.min(keyWidth, keyHeight);
-        this.actor.height = keySize * numOfVertSlots + allVerticalSpacing + 2 * padding;
+        layout.height = keySize * numOfVertSlots + allVerticalSpacing + 2 * padding;
 
         let rows = this._current_page.get_children();
         for (let i = 0; i < rows.length; ++i) {
@@ -831,6 +861,18 @@ var Keyboard = new Lang.Class({
         this._capturedPress = false;
     },
 
+    resetSuggestions: function() {
+        if (this._suggestions)
+            this._suggestions.clear();
+    },
+
+    addSuggestion: function(text, callback) {
+        if (!this._suggestions)
+            return;
+        this._suggestions.add(text, callback);
+        this._suggestions.actor.show();
+    },
+
     _moveTemporarily: function () {
         let currentWindow = global.screen.get_display().focus_window;
         let rect = currentWindow.get_frame_rect();