overview: Move dash to a separate layer

We generally want view content centered, in particular where the
view itself is symmetrical. So move the dash to a separate layer
and use a placeholder to account for its size when showing the
window picker, which is the only view where it doesn't make sense
to center the content.

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

js/ui/overview.js

@@ -129,9 +129,13 @@ const Overview = new Lang.Class({
                                             vertical: true });
         this._overview._delegate = this;
 
+        this._groupStack = new St.Widget({ layout_manager: new Clutter.BinLayout(),
+                                           x_expand: true, y_expand: true });
         this._group = new St.BoxLayout({ name: 'overview-group',
                                          reactive: true,
+                                         x_expand: true, y_expand: true,
                                          clip_to_allocation: true });
+        this._groupStack.add_actor(this._group);
 
         this._backgroundGroup = new Meta.BackgroundGroup();
         global.overlay_group.add_child(this._backgroundGroup);
@@ -289,15 +293,20 @@ const Overview = new Lang.Class({
                                                               this._thumbnailsBox,
                                                               this._viewSelector);
 
+        this._controls.dashActor.x_align = Clutter.ActorAlign.START;
+        this._controls.dashActor.y_expand = true;
+
+        // Put the dash in a separate layer to allow content to be centered
+        this._groupStack.add_actor(this._controls.dashActor);
+
         // Pack all the actors into the group
-        this._group.add_actor(this._controls.dashActor);
+        this._group.add_actor(this._controls.dashSpacer);
         this._group.add(this._viewSelector.actor, { x_fill: true,
                                                     expand: true });
         this._group.add_actor(this._controls.thumbnailsActor);
 
         // Add our same-line elements after the search entry
-        this._overview.add(this._group, { y_fill: true,
+        this._overview.add(this._groupStack, { y_fill: true, expand: true });
-                                          expand: true });
 
         // TODO - recalculate everything when desktop size changes
         this.dashIconSize = this._dash.iconSize;

js/ui/overviewControls.js

@@ -329,12 +329,52 @@ const DashSlider = new Lang.Class({
     }
 });
 
+const DashSpacer = new Lang.Class({
+    Name: 'DashSpacer',
+    Extends: St.Widget,
+
+    _init: function(params) {
+        this.parent(params);
+
+        this._bindConstraint = null;
+    },
+
+    setDashActor: function(dashActor) {
+        if (this._bindConstraint) {
+            this.remove_constraint(this._bindConstraint);
+            this._bindConstraint = null;
+        }
+
+        if (dashActor) {
+            this._bindConstraint = new Clutter.BindConstraint({ source: dashActor,
+                                                                coordinate: Clutter.BindCoordinate.SIZE });
+            this.add_constraint(this._bindConstraint);
+        }
+    },
+
+    vfunc_get_preferred_width: function(forHeight) {
+        let box = this.get_allocation_box();
+        let minWidth = this.parent(forHeight)[0];
+        let natWidth = box.x2 - box.x1;
+        return [minWidth, natWidth];
+    },
+
+    vfunc_get_preferred_height: function(forWidth) {
+        let box = this.get_allocation_box();
+        let minHeight = this.parent(forWidth)[0];
+        let natHeight = box.y2 - box.y1;
+        return [minHeight, natHeight];
+    }
+});
+
 const ControlsManager = new Lang.Class({
     Name: 'ControlsManager',
 
     _init: function(dash, thumbnails, viewSelector) {
         this._dashSlider = new DashSlider(dash);
         this.dashActor = this._dashSlider.actor;
+        this.dashSpacer = new DashSpacer();
+        this.dashSpacer.setDashActor(this.dashActor);
 
         this._thumbnailsSlider = new ThumbnailsSlider(thumbnails);
         this.thumbnailsActor = this._thumbnailsSlider.actor;
@@ -343,6 +383,7 @@ const ControlsManager = new Lang.Class({
         this._viewSelector.connect('page-changed', Lang.bind(this, this._setVisibility));
         this._viewSelector.connect('page-empty', Lang.bind(this, this._onPageEmpty));
 
+        Main.overview.connect('showing', Lang.bind(this, this._updateSpacerVisibility));
         Main.overview.connect('item-drag-begin', Lang.bind(this,
             function() {
                 let activePage = this._viewSelector.getActivePage();
@@ -384,8 +425,18 @@ const ControlsManager = new Lang.Class({
             this._thumbnailsSlider.slideOut();
     },
 
+    _updateSpacerVisibility: function() {
+        if (Main.overview.animationInProgress && !Main.overview.visibleTarget)
+            return;
+
+        let activePage = this._viewSelector.getActivePage();
+        this.dashSpacer.visible = (activePage == ViewSelector.ViewPage.WINDOWS);
+    },
+
     _onPageEmpty: function() {
         this._dashSlider.pageEmpty();
         this._thumbnailsSlider.pageEmpty();
+
+        this._updateSpacerVisibility();
     }
 });