workspaceThumbnail: Drop the _background hack

The _background hack was added because the old way the zooming animation
worked, it set the allocation of the workspaces view and thumbnails box
to the final position and used animations to smoothly animate.

During the 3.6 cycle when we added the new search view, Cosimo changed the
way the zoom animation works so that rather than set the final allocation
and animate, we actually do adjust the allocation of the workspaces view
and thumbnails box.

So, as the hack is no longer necessary, we can drop it.

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

data/theme/gnome-shell.css

@@ -693,7 +693,9 @@ StScrollBar StButton#vhandle:active {
     padding-bottom: 32px;
 }
 
-.workspace-thumbnails-background {
+.workspace-thumbnails {
+    spacing: 11px;
+    visible-width: 32px; /* Amount visible before hovering */
     border: 1px solid rgba(128, 128, 128, 0.4);
     border-right: 0px;
     border-radius: 9px 0px 0px 9px;
@@ -701,18 +703,13 @@ StScrollBar StButton#vhandle:active {
     padding: 11px 7px 11px 11px;
 }
 
-.workspace-thumbnails-background:rtl {
+.workspace-thumbnails:rtl {
     border-right: 1px;
     border-left: 0px;
     border-radius: 0px 9px 9px 0px;
     padding: 11px 11px 11px 7px;
 }
 
-.workspace-thumbnails {
-    spacing: 11px;
-    visible-width: 32px; /* Amount visible before hovering */
-}
-
 .workspace-thumbnail-indicator {
     border: 4px solid rgba(255,255,255,0.7);
     border-radius: 4px;

js/ui/workspaceThumbnail.js

@@ -536,20 +536,6 @@ const ThumbnailsBox = new Lang.Class({
         this.actor.connect('allocate', Lang.bind(this, this._allocate));
         this.actor._delegate = this;
 
-        // When we animate the scale, we don't animate the requested size of the thumbnails, rather
-        // we ask for our final size and then animate within that size. This slightly simplifies the
-        // interaction with the main workspace windows (instead of constantly reallocating them
-        // to a new size, they get a new size once, then use the standard window animation code
-        // allocate the windows to their new positions), however it causes problems for drawing
-        // the background and border wrapped around the thumbnail as we animate - we can't just pack
-        // the container into a box and set style properties on the box since that box would wrap
-        // around the final size not the animating size. So instead we fake the background with
-        // an actor underneath the content and adjust the allocation of our children to leave space
-        // for the border and padding of the background actor.
-        this._background = new St.Bin({ style_class: 'workspace-thumbnails-background' });
-
-        this.actor.add_actor(this._background);
-
         let indicator = new St.Bin({ style_class: 'workspace-thumbnail-indicator' });
 
         // We don't want the indicator to affect drag-and-drop
@@ -1042,9 +1028,6 @@ const ThumbnailsBox = new Lang.Class({
     },
 
     _getPreferredHeight: function(actor, forWidth, alloc) {
-        // See comment about this._background in _init()
-        let themeNode = this._background.get_theme_node();
-
         // Note that for getPreferredWidth/Height we cheat a bit and skip propagating
         // the size request to our children because we know how big they are and know
         // that the actors aren't depending on the virtual functions being called.
@@ -1052,24 +1035,21 @@ const ThumbnailsBox = new Lang.Class({
         if (this._thumbnails.length == 0)
             return;
 
-        let spacing = this.actor.get_theme_node().get_length('spacing');
+        let themeNode = this.actor.get_theme_node();
+
+        let spacing = themeNode.get_length('spacing');
         let nWorkspaces = global.screen.n_workspaces;
         let totalSpacing = (nWorkspaces - 1) * spacing;
 
-        [alloc.min_size, alloc.natural_size] =
+        alloc.min_size = totalSpacing;
-            themeNode.adjust_preferred_height(totalSpacing,
+        alloc.natural_size = totalSpacing + nWorkspaces * this._porthole.height * MAX_THUMBNAIL_SCALE;
-                                              totalSpacing + nWorkspaces * this._porthole.height * MAX_THUMBNAIL_SCALE);
     },
 
     _getPreferredWidth: function(actor, forHeight, alloc) {
-        // See comment about this._background in _init()
-        let themeNode = this._background.get_theme_node();
-
         if (this._thumbnails.length == 0)
             return;
 
-        // We don't animate our preferred width, which is always reported according
+        let themeNode = this.actor.get_theme_node();
-        // to the actual number of current workspaces, we just animate within that
 
         let spacing = this.actor.get_theme_node().get_length('spacing');
         let nWorkspaces = global.screen.n_workspaces;
@@ -1081,28 +1061,26 @@ const ThumbnailsBox = new Lang.Class({
         scale = Math.min(scale, MAX_THUMBNAIL_SCALE);
 
         let width = Math.round(this._porthole.width * scale);
-        [alloc.min_size, alloc.natural_size] =
+        alloc.min_size = width;
-            themeNode.adjust_preferred_width(width, width);
+        alloc.natural_size = width;
     },
 
     _allocate: function(actor, box, flags) {
         let rtl = (Clutter.get_default_text_direction () == Clutter.TextDirection.RTL);
 
-        // See comment about this._background in _init()
-        let themeNode = this._background.get_theme_node();
-        let contentBox = themeNode.get_content_box(box);
-
         if (this._thumbnails.length == 0) // not visible
             return;
 
+        let themeNode = this.actor.get_theme_node();
+
         let portholeWidth = this._porthole.width;
         let portholeHeight = this._porthole.height;
-        let spacing = this.actor.get_theme_node().get_length('spacing');
+        let spacing = themeNode.get_length('spacing');
 
         // Compute the scale we'll need once everything is updated
         let nWorkspaces = global.screen.n_workspaces;
         let totalSpacing = (nWorkspaces - 1) * spacing;
-        let avail = (contentBox.y2 - contentBox.y1) - totalSpacing;
+        let avail = (box.y2 - box.y1) - totalSpacing;
 
         let newScale = (avail / nWorkspaces) / portholeHeight;
         newScale = Math.min(newScale, MAX_THUMBNAIL_SCALE);
@@ -1131,21 +1109,6 @@ const ThumbnailsBox = new Lang.Class({
         else
             slideOffset = thumbnailWidth + themeNode.get_padding(St.Side.RIGHT);
 
-        let childBox = new Clutter.ActorBox();
-
-        // The background is horizontally restricted to correspond to the current thumbnail size
-        // but otherwise covers the entire allocation
-        if (rtl) {
-            childBox.x1 = box.x1;
-            childBox.x2 = box.x2 - ((contentBox.x2 - contentBox.x1) - thumbnailWidth);
-        } else {
-            childBox.x1 = box.x1 + ((contentBox.x2 - contentBox.x1) - thumbnailWidth);
-            childBox.x2 = box.x2;
-        }
-        childBox.y1 = box.y1;
-        childBox.y2 = box.y2;
-        this._background.allocate(childBox, flags);
-
         let indicatorY1 = this._indicatorY;
         let indicatorY2;
         // when not animating, the workspace position overrides this._indicatorY
@@ -1157,7 +1120,7 @@ const ThumbnailsBox = new Lang.Class({
         let indicatorLeftFullBorder = indicatorThemeNode.get_padding(St.Side.LEFT) + indicatorThemeNode.get_border_width(St.Side.LEFT);
         let indicatorRightFullBorder = indicatorThemeNode.get_padding(St.Side.RIGHT) + indicatorThemeNode.get_border_width(St.Side.RIGHT);
 
-        let y = contentBox.y1;
+        let y = box.y1;
 
         if (this._dropPlaceholderPos == -1) {
             Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this, function() {
@@ -1165,6 +1128,8 @@ const ThumbnailsBox = new Lang.Class({
             }));
         }
 
+        let childBox = new Clutter.ActorBox();
+
         for (let i = 0; i < this._thumbnails.length; i++) {
             let thumbnail = this._thumbnails[i];
 
@@ -1173,10 +1138,10 @@ const ThumbnailsBox = new Lang.Class({
 
             let x1, x2;
             if (rtl) {
-                x1 = contentBox.x1 + slideOffset * thumbnail.slidePosition;
+                x1 = box.x1 + slideOffset * thumbnail.slidePosition;
                 x2 = x1 + thumbnailWidth;
             } else {
-                x1 = contentBox.x2 - thumbnailWidth + slideOffset * thumbnail.slidePosition;
+                x1 = box.x2 - thumbnailWidth + slideOffset * thumbnail.slidePosition;
                 x2 = x1 + thumbnailWidth;
             }
 
@@ -1223,11 +1188,11 @@ const ThumbnailsBox = new Lang.Class({
         }
 
         if (rtl) {
-            childBox.x1 = contentBox.x1;
+            childBox.x1 = box.x1;
-            childBox.x2 = contentBox.x1 + thumbnailWidth;
+            childBox.x2 = box.x1 + thumbnailWidth;
         } else {
-            childBox.x1 = contentBox.x2 - thumbnailWidth;
+            childBox.x1 = box.x2 - thumbnailWidth;
-            childBox.x2 = contentBox.x2;
+            childBox.x2 = box.x2;
         }
         childBox.x1 -= indicatorLeftFullBorder;
         childBox.x2 += indicatorRightFullBorder;