messageTray: Move notification banners to the top

The new design has banners appear from underneath the panel, so move
them to the top and clip them to the work area.

https://bugzilla.gnome.org/show_bug.cgi?id=744850

js/ui/layout.js

@@ -238,8 +238,9 @@ const LayoutManager = new Lang.Class({
                               Lang.bind(this, this._panelBoxChanged));
 
         this.trayBox = new St.Widget({ name: 'trayBox',
+                                       clip_to_allocation: true,
                                        layout_manager: new Clutter.BinLayout() }); 
-        this.addChrome(this.trayBox);
+        this.addChrome(this.trayBox, { affectsInputRegion: false });
 
         this.modalDialogGroup = new St.Widget({ name: 'modalDialogGroup',
                                                 layout_manager: new Clutter.BinLayout() });
@@ -284,6 +285,9 @@ const LayoutManager = new Lang.Class({
     init: function() {
         Main.sessionMode.connect('updated', Lang.bind(this, this._sessionUpdated));
 
+        let trayConstraint = new MonitorConstraint({ primary: true, work_area: true });
+        this.trayBox.add_constraint(trayConstraint);
+
         this._loadBackground();
     },
 
@@ -453,10 +457,6 @@ const LayoutManager = new Lang.Class({
         this.panelBox.set_size(this.primaryMonitor.width, -1);
 
         this.keyboardIndex = this.primaryIndex;
-
-        this.trayBox.set_position(this.bottomMonitor.x,
-                                  this.bottomMonitor.y + this.bottomMonitor.height);
-        this.trayBox.set_size(this.bottomMonitor.width, -1);
     },
 
     _panelBoxChanged: function() {