Overview: dim the background with the dim-factor property

Doing this rather than overdrawing a black rectangle saves us
(pixels in screen) * 8 bytes of memory bandwidth for every frame we draw going
into the overview.

It also allows us to dim the background on non-primary monitors making the
overall overview appearance consistent across all monitors.

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

data/theme/gnome-shell.css

@@ -396,7 +396,6 @@ StTooltip StLabel {
 
 #overview {
     spacing: 12px;
-    background-color: rgba(0,0,0,0.6);
 }
 
 .window-caption {

js/ui/overview.js

@@ -603,6 +603,12 @@ Overview.prototype = {
                            onCompleteScope: this
                          });
 
+        Tweener.addTween(this._background,
+                         { dim_factor: 0.4,
+                           time: ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+
         this._coverPane.raise_top();
         this._coverPane.show();
         this.emit('showing');
@@ -733,6 +739,12 @@ Overview.prototype = {
                            onCompleteScope: this
                          });
 
+        Tweener.addTween(this._background,
+                         { dim_factor: 1.0,
+                           time: ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+
         this._coverPane.raise_top();
         this._coverPane.show();
         this.emit('hiding');