layout: Add different groups in the LayoutManager for discrete UI components

This helps take cruft out of the uiGroup, and ensures that components remain
stacked properly on top of each other. In the future, we'll use this group
to ensure that grabs are ordered properly, as well.

js/gdm/loginDialog.js

@@ -274,7 +274,7 @@ const SessionMenuButton = new Lang.Class({
         this.actor = new St.Bin({ child: this._button });
 
         this._menu = new PopupMenu.PopupMenu(this._button, 0, St.Side.TOP);
-        Main.uiGroup.add_actor(this._menu.actor);
+        Main.layoutManager.menuGroup.add_actor(this._menu.actor);
         this._menu.actor.hide();
 
         this._menu.connect('open-state-changed',

js/ui/appDisplay.js

@@ -1525,7 +1525,7 @@ const AppIconMenu = new Lang.Class({
         }));
         source.actor.connect('destroy', Lang.bind(this, function () { this.actor.destroy(); }));
 
-        Main.uiGroup.add_actor(this.actor);
+        Main.layoutManager.menuGroup.add_actor(this.actor);
     },
 
     _redisplay: function() {

js/ui/backgroundMenu.js

@@ -22,7 +22,7 @@ const BackgroundMenu = new Lang.Class({
 
         this.actor.add_style_class_name('background-menu');
 
-        layoutManager.uiGroup.add_actor(this.actor);
+        layoutManager.menuGroup.add_actor(this.actor);
         this.actor.hide();
     }
 });

js/ui/layout.js

@@ -219,6 +219,18 @@ const LayoutManager = new Lang.Class({
         this.addChrome(this.keyboardBox);
         this._keyboardHeightNotifyId = 0;
 
+        this.menuGroup = new St.Widget();
+        this.uiGroup.add_actor(this.menuGroup);
+
+        this.osdGroup = new St.Widget();
+        this.uiGroup.add_actor(this.osdGroup);
+
+        this.switcherPopupGroup = new St.Widget();
+        this.uiGroup.add_actor(this.switcherPopupGroup);
+
+        this.dialogGroup = new St.Widget();
+        this.uiGroup.add_actor(this.dialogGroup);
+
         // A dummy actor that tracks the mouse or text cursor, based on the
         // position set in setDummyCursorPosition.
         this.dummyCursor = new St.Widget({ width: 0, height: 0 });

js/ui/messageTray.js

@@ -1611,7 +1611,7 @@ const MessageTrayMenu = new Lang.Class({
         this._accountManager.prepare_async(null, Lang.bind(this, this._onIMPresenceChanged));
 
         this.actor.hide();
-        Main.layoutManager.addChrome(this.actor);
+        Main.layoutManager.menuGroup.add_child(this.actor);
 
         this._busyItem = new PopupMenu.PopupSwitchMenuItem(_("Notifications"));
         this._busyItem.connect('toggled', Lang.bind(this, this._updatePresence));

js/ui/modalDialog.js

@@ -41,7 +41,7 @@ const ModalDialog = new Lang.Class({
     _init: function(params) {
         params = Params.parse(params, { shellReactive: false,
                                         styleClass: null,
-                                        parentActor: Main.uiGroup,
+                                        parentActor: Main.layoutManager.dialogGroup,
                                         keybindingMode: Shell.KeyBindingMode.SYSTEM_MODAL,
                                         shouldFadeIn: true,
                                         destroyOnClose: true });

js/ui/osdWindow.js

@@ -110,7 +110,7 @@ const OsdWindow = new Lang.Class({
                                    Lang.bind(this, this._monitorsChanged));
         this._monitorsChanged();
 
-        Main.uiGroup.add_child(this.actor);
+        Main.layoutManager.osdGroup.add_child(this.actor);
     },
 
     setIcon: function(icon) {

js/ui/panelMenu.js

@@ -130,7 +130,7 @@ const Button = new Lang.Class({
             this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateChanged));
             this.menu.actor.connect('key-press-event', Lang.bind(this, this._onMenuKeyPress));
 
-            Main.uiGroup.add_actor(this.menu.actor);
+            Main.layoutManager.menuGroup.add_actor(this.menu.actor);
             this.menu.actor.hide();
         }
     },

js/ui/screenshot.js

@@ -146,7 +146,7 @@ const SelectArea = new Lang.Class({
                                       reactive: true,
                                       x: 0,
                                       y: 0 });
-        Main.uiGroup.add_actor(this._group);
+        Main.layoutManager.osdGroup.add_actor(this._group);
 
         this._group.connect('button-press-event',
                             Lang.bind(this, this._onButtonPress));
@@ -259,7 +259,7 @@ const Flashspot = new Lang.Class({
     Extends: Lightbox.Lightbox,
 
     _init: function(area) {
-        this.parent(Main.uiGroup, { inhibitEvents: true,
+        this.parent(Main.layoutManager.osdGroup, { inhibitEvents: true,
                                                    width: area.width,
                                                    height: area.height });
 

js/ui/shellEntry.js

@@ -36,7 +36,7 @@ const EntryMenu = new Lang.Class({
 
         this._passwordItem = null;
 
-        Main.uiGroup.add_actor(this.actor);
+        Main.layoutManager.menuGroup.add_actor(this.actor);
         this.actor.hide();
     },
 

js/ui/switcherPopup.js

@@ -54,7 +54,7 @@ const SwitcherPopup = new Lang.Class({
         this.actor.connect('allocate', Lang.bind(this, this._allocate));
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
 
-        Main.uiGroup.add_actor(this.actor);
+        Main.layoutManager.switcherPopupGroup.add_child(this.actor);
 
         this._haveModal = false;
         this._modifierMask = 0;

js/ui/workspaceSwitcherPopup.js

@@ -25,7 +25,7 @@ const WorkspaceSwitcherPopup = new Lang.Class({
                                      width: global.screen_width,
                                      height: global.screen_height,
                                      style_class: 'workspace-switcher-group' });
-        Main.uiGroup.add_actor(this.actor);
+        Main.layoutManager.osdGroup.add_child(this.actor);
 
         this._container = new St.BoxLayout({ style_class: 'workspace-switcher-container' });
         this._list = new Shell.GenericContainer({ style_class: 'workspace-switcher' });