[gnome-shell] layout: Show important actors above top_window_group

[Florian Müllner <fmuellner src gnome org>]

commit 2bd80579eddba9804871ce6c8de742bdf9b1d800
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Fri May 3 23:39:11 2019 +0200

    layout: Show important actors above top_window_group
    
    The top_window_group is used for windows like popup menus, which should
    appear above shell chrome like the panel.
    
    Since we want important actors such as the screen keyboard or modal
    dialogs to be shown above those windows, add their actors after adding
    global.top_window_group to this.uiGroup and provide a new function
    addTopChrome() to add important chrome above the top_window_group.
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/917
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/358

 js/ui/layout.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)
---
diff --git a/js/ui/layout.js b/js/ui/layout.js
index 30e750dc5..b98827a3c 100644
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -216,10 +216,17 @@ var LayoutManager = GObject.registerClass({
         this.uiGroup = new UiActor({ name: 'uiGroup' });
         this.uiGroup.set_flags(Clutter.ActorFlags.NO_LAYOUT);
 
+        global.stage.add_child(this.uiGroup);
+
         global.stage.remove_actor(global.window_group);
         this.uiGroup.add_actor(global.window_group);
 
-        global.stage.add_child(this.uiGroup);
+        // Using addChrome() to add actors to uiGroup will position actors
+        // underneath the top_window_group.
+        // To insert actors at the top of uiGroup, we use addTopChrome() or
+        // add the actor directly using uiGroup.add_actor().
+        global.stage.remove_actor(global.top_window_group);
+        this.uiGroup.add_actor(global.top_window_group);
 
         this.overviewGroup = new St.Widget({ name: 'overviewGroup',
                                              visible: false,
@@ -231,7 +238,7 @@ var LayoutManager = GObject.registerClass({
                                                  clip_to_allocation: true,
                                                  layout_manager: new Clutter.BinLayout(),
                                                });
-        this.addChrome(this.screenShieldGroup);
+        this.addTopChrome(this.screenShieldGroup);
 
         this.panelBox = new St.BoxLayout({ name: 'panelBox',
                                            vertical: true });
@@ -247,7 +254,7 @@ var LayoutManager = GObject.registerClass({
         this.keyboardBox = new St.BoxLayout({ name: 'keyboardBox',
                                               reactive: true,
                                               track_hover: true });
-        this.addChrome(this.keyboardBox);
+        this.addTopChrome(this.keyboardBox);
         this._keyboardHeightNotifyId = 0;
 
         // A dummy actor that tracks the mouse or text cursor, based on the
@@ -255,9 +262,6 @@ var LayoutManager = GObject.registerClass({
         this.dummyCursor = new St.Widget({ width: 0, height: 0, opacity: 0 });
         this.uiGroup.add_actor(this.dummyCursor);
 
-        global.stage.remove_actor(global.top_window_group);
-        this.uiGroup.add_actor(global.top_window_group);
-
         let feedbackGroup = Meta.get_feedback_group_for_display(global.display);
         global.stage.remove_actor(feedbackGroup);
         this.uiGroup.add_actor(feedbackGroup);
@@ -802,6 +806,16 @@ var LayoutManager = GObject.registerClass({
         this._trackActor(actor, params);
     }
 
+    // addTopChrome:
+    // @actor: an actor to add to the chrome
+    // @params: (optional) additional params
+    //
+    // Like addChrome(), but adds @actor above all windows, including popups.
+    addTopChrome(actor, params) {
+        this.uiGroup.add_actor(actor);
+        this._trackActor(actor, params);
+    }
+
     // trackChrome:
     // @actor: a descendant of the chrome to begin tracking
     // @params: parameters describing how to track @actor