layout: add panelBox and trayBox

Have LayoutManager automatically deal with sizing and positioning
boxes for the panel and messageTray relative to the monitors.

Also, now that LayoutManager knows exactly where and how tall the
panel and tray are, have it manage the pointer barriers as well.

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

js/ui/layout.js

@@ -15,6 +15,8 @@ const Tweener = imports.ui.tweener;
 
 const HOT_CORNER_ACTIVATION_TIMEOUT = 0.5;
 
+const STARTUP_ANIMATION_TIME = 0.2;
+
 function LayoutManager() {
     this._init.apply(this, arguments);
 }
@@ -26,12 +28,26 @@ LayoutManager.prototype = {
         this.primaryMonitor = null;
         this.primaryIndex = -1;
         this._hotCorners = [];
-
+        this._leftPanelBarrier = 0;
-        global.screen.connect('monitors-changed', Lang.bind(this, this._monitorsChanged));
+        this._rightPanelBarrier = 0;
-        this._updateMonitors();
+        this._trayBarrier = 0;
 
         this._chrome = new Chrome(this);
-        this._updateHotCorners();
+
+        this.panelBox = new St.BoxLayout({ name: 'panelBox',
+                                           vertical: true });
+        this.addChrome(this.panelBox, { affectsStruts: true });
+        this.panelBox.connect('allocation-changed',
+                              Lang.bind(this, this._updatePanelBarriers));
+
+        this.trayBox = new St.BoxLayout({ name: 'trayBox' }); 
+        this.trayBox.connect('allocation-changed',
+                             Lang.bind(this, this._updateTrayBarrier));
+        this.addChrome(this.trayBox, { visibleInFullscreen: true });
+
+        global.screen.connect('monitors-changed',
+                              Lang.bind(this, this._monitorsChanged));
+        this._monitorsChanged();
     },
 
     // This is called by Main after everything else is constructed;
@@ -39,6 +55,8 @@ LayoutManager.prototype = {
     // yet when the LayoutManager was constructed.
     init: function() {
         this._chrome.init();
+
+        this._startupAnimation();
     },
 
     _updateMonitors: function() {
@@ -121,8 +139,56 @@ LayoutManager.prototype = {
         }
     },
 
+    _updateBoxes: function() {
+        this.panelBox.set_position(this.primaryMonitor.x, this.primaryMonitor.y);
+        this.panelBox.set_size(this.primaryMonitor.width, -1);
+
+        this.trayBox.set_position(this.bottomMonitor.x,
+                                  this.bottomMonitor.y + this.bottomMonitor.height);
+        this.trayBox.set_size(this.bottomMonitor.width, -1);
+    },
+
+    _updatePanelBarriers: function() {
+        if (this._leftPanelBarrier)
+            global.destroy_pointer_barrier(this._leftPanelBarrier);
+        if (this._rightPanelBarrier)
+            global.destroy_pointer_barrier(this._rightPanelBarrier);
+
+        if (this.panelBox.height) {
+            let primary = this.primaryMonitor;
+            this._leftPanelBarrier =
+                global.create_pointer_barrier(primary.x, primary.y,
+                                              primary.x, primary.y + this.panelBox.height,
+                                              1 /* BarrierPositiveX */);
+            this._rightPanelBarrier =
+                global.create_pointer_barrier(primary.x + primary.width, primary.y,
+                                              primary.x + primary.width, primary.y + this.panelBox.height,
+                                              4 /* BarrierNegativeX */);
+        } else {
+            this._leftPanelBarrier = 0;
+            this._rightPanelBarrier = 0;
+        }
+    },
+
+    _updateTrayBarrier: function() {
+        let monitor = this.bottomMonitor;
+
+        if (this._trayBarrier)
+            global.destroy_pointer_barrier(this._trayBarrier);
+
+        if (Main.messageTray) {
+            this._trayBarrier =
+                global.create_pointer_barrier(monitor.x + monitor.width, monitor.y + monitor.height - Main.messageTray.actor.height,
+                                              monitor.x + monitor.width, monitor.y + monitor.height,
+                                              4 /* BarrierNegativeX */);
+        } else {
+            this._trayBarrier = 0;
+        }
+    },
+
     _monitorsChanged: function() {
         this._updateMonitors();
+        this._updateBoxes();
         this._updateHotCorners();
 
         this.emit('monitors-changed');
@@ -164,6 +230,15 @@ LayoutManager.prototype = {
         return this.monitors[this.focusIndex];
     },
 
+    _startupAnimation: function() {
+        this.panelBox.anchor_y = this.panelBox.height;
+        Tweener.addTween(this.panelBox,
+                         { anchor_y: 0,
+                           time: STARTUP_ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+    },
+
     // addChrome:
     // @actor: an actor to add to the chrome layer
     // @params: (optional) additional params

js/ui/main.js

@@ -192,8 +192,6 @@ function start() {
     ExtensionSystem.init();
     ExtensionSystem.loadExtensions();
 
-    panel.startupAnimation();
-
     global.display.connect('overlay-key', Lang.bind(overview, overview.toggle));
 
     global.stage.connect('captured-event', _globalKeyPressHandler);

js/ui/messageTray.js

@@ -1329,7 +1329,9 @@ MessageTray.prototype = {
         this._notificationRemoved = false;
         this._reNotifyAfterHideNotification = null;
 
-        Main.layoutManager.addChrome(this.actor, { visibleInFullscreen: true });
+        Main.layoutManager.trayBox.add_actor(this.actor);
+        this.actor.y = -1;
+        Main.layoutManager.trackChrome(this.actor);
         Main.layoutManager.trackChrome(this._notificationBin);
 
         Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._setSizePosition));
@@ -1369,22 +1371,10 @@ MessageTray.prototype = {
 
     _setSizePosition: function() {
         let monitor = Main.layoutManager.bottomMonitor;
-        this.actor.x = monitor.x;
-        this.actor.y = monitor.y + monitor.height - 1;
-        this.actor.width = monitor.width;
         this._notificationBin.x = 0;
         this._notificationBin.width = monitor.width;
         this._summaryBin.x = 0;
         this._summaryBin.width = monitor.width;
-
-        if (this._pointerBarrier)
-            global.destroy_pointer_barrier(this._pointerBarrier);
-        this._pointerBarrier =
-            global.create_pointer_barrier(monitor.x + monitor.width, monitor.y + monitor.height - this.actor.height,
-                                          monitor.x + monitor.width, monitor.y + monitor.height,
-                                          4 /* BarrierNegativeX */);
-
-
     },
 
     contains: function(source) {
@@ -1935,18 +1925,16 @@ MessageTray.prototype = {
     },
 
     _showTray: function() {
-        let monitor = Main.layoutManager.bottomMonitor;
         this._tween(this.actor, '_trayState', State.SHOWN,
-                    { y: monitor.y + monitor.height - this.actor.height,
+                    { y: -this.actor.height,
                       time: ANIMATION_TIME,
                       transition: 'easeOutQuad'
                     });
     },
 
     _hideTray: function() {
-        let monitor = Main.layoutManager.bottomMonitor;
         this._tween(this.actor, '_trayState', State.HIDDEN,
-                    { y: monitor.y + monitor.height - 1,
+                    { y: -1,
                       time: ANIMATION_TIME,
                       transition: 'easeOutQuad'
                     });
@@ -2034,7 +2022,7 @@ MessageTray.prototype = {
 
     _notificationTimeout: function() {
         let [x, y, mods] = global.get_pointer();
-        if (y > this._lastSeenMouseY + 10 && y < this.actor.y) {
+        if (y > this._lastSeenMouseY + 10 && !this.actor.hover) {
             // The mouse is moving towards the notification, so don't
             // hide it yet. (We just create a new timeout (and destroy
             // the old one) each time because the bookkeeping is

js/ui/panel.js

@@ -23,8 +23,6 @@ const Tweener = imports.ui.tweener;
 
 const PANEL_ICON_SIZE = 24;
 
-const STARTUP_ANIMATION_TIME = 0.2;
-
 const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
 const ANIMATED_ICON_UPDATE_TIMEOUT = 100;
@@ -795,8 +793,6 @@ Panel.prototype = {
             this.actor.remove_style_class_name('in-overview');
         }));
 
-        this._leftPointerBarrier = 0;
-        this._rightPointerBarrier = 0;
         this._menus = new PopupMenu.PopupMenuManager(this);
 
         this._leftBox = new St.BoxLayout({ name: 'panelLeft' });
@@ -871,13 +867,9 @@ Panel.prototype = {
         Main.statusIconDispatcher.connect('status-icon-added', Lang.bind(this, this._onTrayIconAdded));
         Main.statusIconDispatcher.connect('status-icon-removed', Lang.bind(this, this._onTrayIconRemoved));
 
-        Main.layoutManager.addChrome(this.actor, { affectsStruts: true });
+        Main.layoutManager.panelBox.add(this.actor);
-
         Main.ctrlAltTabManager.addGroup(this.actor, _("Top Bar"), 'start-here',
                                         { sortGroup: CtrlAltTab.SortGroup.TOP });
-
-        Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._relayout));
-        this._relayout();
     },
 
     _getPreferredWidth: function(actor, forHeight, alloc) {
@@ -994,37 +986,6 @@ Panel.prototype = {
         return indicator;
     },
 
-    startupAnimation: function() {
-        let oldY = this.actor.y;
-        this.actor.y = oldY - this.actor.height;
-        Tweener.addTween(this.actor,
-                         { y: oldY,
-                           time: STARTUP_ANIMATION_TIME,
-                           transition: 'easeOutQuad'
-                         });
-    },
-
-    _relayout: function() {
-        let primary = Main.layoutManager.primaryMonitor;
-
-        this.actor.set_position(primary.x, primary.y);
-        this.actor.set_size(primary.width, -1);
-
-        if (this._leftPointerBarrier)
-            global.destroy_pointer_barrier(this._leftPointerBarrier);
-        if (this._rightPointerBarrier)
-            global.destroy_pointer_barrier(this._rightPointerBarrier);
-
-        this._leftPointerBarrier =
-            global.create_pointer_barrier(primary.x, primary.y,
-                                          primary.x, primary.y + this.actor.height,
-                                          1 /* BarrierPositiveX */);
-        this._rightPointerBarrier =
-            global.create_pointer_barrier(primary.x + primary.width, primary.y,
-                                          primary.x + primary.width, primary.y + this.actor.height,
-                                          4 /* BarrierNegativeX */);
-    },
-
     _onTrayIconAdded: function(o, icon, role) {
         icon.height = PANEL_ICON_SIZE;