[Lightbox] Use a fade effect to smooth the transition

Add show()/hide() methods to Lightbox, which (optionally) fade the
lightbox. Change all lightboxes to fade in smoothly.

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

js/ui/lightbox.js

@@ -5,12 +5,17 @@ const Lang = imports.lang;
 const Meta = imports.gi.Meta;
 const St = imports.gi.St;
 
+const Params = imports.misc.params;
+const Tweener = imports.ui.tweener;
+
 /**
  * Lightbox:
  * @container: parent Clutter.Container
- * @inhibitEvents: whether to inhibit events for @container
+ * @params: (optional) additional parameters:
- * @width: (optional) shade actor width
+ *           - inhibitEvents: whether to inhibit events for @container
- * @height: (optional) shade actor height
+ *           - width: shade actor width
+ *           - height: shade actor height
+ *           - fadeTime: seconds used to fade in/out
  *
  * Lightbox creates a dark translucent "shade" actor to hide the
  * contents of @container, and allows you to specify particular actors
@@ -24,29 +29,37 @@ const St = imports.gi.St;
  *
  * By default, the shade window will have the height and width of
  * @container and will track any changes in its size. You can override
- * this by passing an explicit width and height
+ * this by passing an explicit width and height in @params.
  */
-function Lightbox(container, inhibitEvents, width, height) {
+function Lightbox(container, params) {
-    this._init(container, inhibitEvents, width, height);
+    this._init(container, params);
 }
 
 Lightbox.prototype = {
-    _init : function(container, inhibitEvents, width, height) {
+    _init : function(container, params) {
+        params = Params.parse(params, { inhibitEvents: false,
+                                        width: null,
+                                        height: null,
+                                        fadeTime: null
+                                      });
+
         this._container = container;
         this._children = container.get_children();
+        this._fadeTime = params.fadeTime;
         this.actor = new St.Bin({ x: 0,
                                   y: 0,
                                   style_class: 'lightbox',
-                                  reactive: inhibitEvents });
+                                  reactive: params.inhibitEvents });
 
         container.add_actor(this.actor);
         this.actor.raise_top();
+        this.actor.hide();
 
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
 
-        if (width && height) {
+        if (params.width && params.height) {
-            this.actor.width = width;
+            this.actor.width = params.width;
-            this.actor.height = height;
+            this.actor.height = params.height;
             this._allocationChangedSignalId = 0;
         } else {
             this.actor.width = container.width;
@@ -92,6 +105,35 @@ Lightbox.prototype = {
         }
     },
 
+    show: function() {
+        if (this._fadeTime) {
+            this.actor.opacity = 0;
+            Tweener.addTween(this.actor,
+                             { opacity: 255,
+                               time: this._fadeTime,
+                               transition: 'easeOutQuad'
+                             });
+        } else {
+            this.actor.opacity = 255;
+        }
+        this.actor.show();
+    },
+
+    hide: function() {
+        if (this._fadeTime) {
+            Tweener.addTween(this.actor,
+                             { opacity: 0,
+                               time: this._fadeTime,
+                               transition: 'easeOutQuad',
+                               onComplete: Lang.bind(this, function() {
+                                   this.actor.hide();
+                               })
+                             });
+        } else {
+            this.actor.hide();
+        }
+    },
+
     _actorRemoved : function(container, child) {
         let index = this._children.indexOf(child);
         if (index != -1) // paranoia

js/ui/overview.js

@@ -375,8 +375,9 @@ Overview.prototype = {
                     return true;
                 }));
                 if (!this._lightbox)
-                    this._lightbox = new Lightbox.Lightbox(this._group, false);
+                    this._lightbox = new Lightbox.Lightbox(this._group,
-                this._lightbox.actor.show();
+                                                           { fadeTime: PANE_FADE_TIME });
+                this._lightbox.show();
                 this._lightbox.highlight(this._paneContainer);
             } else if (pane == this._activeDisplayPane) {
                 this._activeDisplayPane = null;
@@ -386,7 +387,7 @@ Overview.prototype = {
                 }
                 this._transparentBackground.lower_bottom();
                 this._paneContainer.hide();
-                this._lightbox.actor.hide();
+                this._lightbox.hide();
             }
         }));
     },

js/ui/runDialog.js

@@ -14,12 +14,15 @@ const _ = Gettext.gettext;
 
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
+const Tweener = imports.ui.tweener;
 
 const MAX_FILE_DELETED_BEFORE_INVALID = 10;
 
 const HISTORY_KEY = 'run_dialog/history';
 const HISTORY_LIMIT = 512;
 
+const DIALOG_FADE_TIME = 0.2;
+
 function CommandCompleter() {
     this._init();
 }
@@ -215,13 +218,14 @@ RunDialog.prototype = {
                                           x: 0, y: 0 });
         Main.uiGroup.add_actor(this._group);
 
-        let lightbox = new Lightbox.Lightbox(this._group, true);
+        this._lightbox = new Lightbox.Lightbox(this._group,
+                                               { inhibitEvents: true });
 
         this._box = new St.Bin({ x_align: St.Align.MIDDLE,
                                  y_align: St.Align.MIDDLE });
 
         this._group.add_actor(this._box);
-        lightbox.highlight(this._box);
+        this._lightbox.highlight(this._box);
 
         let dialogBox = new St.BoxLayout({ style_class: 'run-dialog', vertical: true });
 
@@ -413,7 +417,14 @@ RunDialog.prototype = {
         this._box.set_size(monitor.width, monitor.height);
 
         this._isOpen = true;
+        this._lightbox.show();
+        this._group.opacity = 0;
         this._group.show();
+        Tweener.addTween(this._group,
+                         { opacity: 255,
+                           time: DIALOG_FADE_TIME,
+                           transition: 'easeOutQuad'
+                         });
 
         global.stage.set_key_focus(this._entryText);
     },
@@ -423,14 +434,20 @@ RunDialog.prototype = {
             return;
 
         this._isOpen = false;
-
-        this._errorBox.hide();
         this._commandError = false;
 
-        this._group.hide();
-        this._entryText.set_text('');
-
         Main.popModal(this._group);
+
+        Tweener.addTween(this._group,
+                         { opacity: 0,
+                           time: DIALOG_FADE_TIME,
+                           transition: 'easeOutQuad',
+                           onComplete: Lang.bind(this, function() {
+                               this._errorBox.hide();
+                               this._group.hide();
+                               this._entryText.set_text('');
+                           })
+                         });
     }
 };
 Signals.addSignalMethods(RunDialog.prototype);

js/ui/workspace.js

@@ -28,7 +28,7 @@ FRAME_COLOR.from_pixel(0xffffffff);
 
 const SCROLL_SCALE_AMOUNT = 100 / 5;
 
-const ZOOM_OVERLAY_FADE_TIME = 0.15;
+const LIGHTBOX_FADE_TIME = 0.2;
 
 const DRAGGING_WINDOW_OPACITY = 100;
 
@@ -217,7 +217,10 @@ WindowClone.prototype = {
         this._zooming = true;
         this.emit('zoom-start');
 
-        this._zoomLightbox = new Lightbox.Lightbox(global.stage, false);
+        if (!this._zoomLightbox)
+            this._zoomLightbox = new Lightbox.Lightbox(global.stage,
+                                                       { fadeTime: LIGHTBOX_FADE_TIME });
+        this._zoomLightbox.show();
 
         this._zoomLocalOrig  = new ScaledPoint(this.actor.x, this.actor.y, this.actor.scale_x, this.actor.scale_y);
         this._zoomGlobalOrig = new ScaledPoint();
@@ -256,7 +259,7 @@ WindowClone.prototype = {
         [this.actor.x, this.actor.y]             = this._zoomLocalOrig.getPosition();
         [this.actor.scale_x, this.actor.scale_y] = this._zoomLocalOrig.getScale();
 
-        this._zoomLightbox.destroy();
+        this._zoomLightbox.hide();
 
         this._zoomLocalPosition  = undefined;
         this._zoomLocalScale     = undefined;
@@ -264,7 +267,6 @@ WindowClone.prototype = {
         this._zoomGlobalScale    = undefined;
         this._zoomTargetPosition = undefined;
         this._zoomStep           = undefined;
-        this._zoomLightbox       = undefined;
     },
 
     _onButtonRelease : function (actor, event) {
@@ -714,15 +716,17 @@ Workspace.prototype = {
      * This function also resets the highlighted window state.
      */
     setLightboxMode: function (showLightbox) {
-        if (showLightbox) {
+        if (!this._lightbox)
-            this._lightbox = new Lightbox.Lightbox(this.actor, false);
+            this._lightbox = new Lightbox.Lightbox(this.actor,
-        } else {
+                                                   { fadeTime: LIGHTBOX_FADE_TIME });
-            this._lightbox.destroy();
+
-            this._lightbox = null;
+        if (showLightbox)
-        }
+            this._lightbox.show();
-        if (this._frame) {
+        else
+            this._lightbox.hide();
+
+        if (this._frame)
             this._frame.set_opacity(showLightbox ? 150 : 255);
-        }
     },
 
     /**