windowManager: add animations for fullscreen and unfullscreen

We use the newly introduced feature from Mutter to hook up our own
fullscreen and unfullscreen animations.
To give the illusion of a transition as smooth as possible, we create a
snapshot of the current contents of the actor before its state is
changed, and crossfade between the two states while the size changes.

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

NEWS

@@ -1,29 +1,3 @@
-3.18.1
-======
-* Fix screen freezes when a notification is pushed [Carlos; #755425]
-* Fix overzealous ellipsization in system status menu [Adel, Florian; #708472]
-* Hide app menu when disabled by setting [Florian; #745919]
-* Fix lightbox effect when animations are disabled [Rui; #755827]
-* Do not mark hotplug notifications as critical [Florian; #657923]
-* Fix icons getting cut off in dash [Florian; #745649]
-* Animate fullscreen/unfullscreen operations [Cosimo; #707248]
-* Misc. bug fixes [Florian, Owen; #748919, #674799, #754581]
-
-Contributors:
-  Emmanuele Bassi, Michael Catanzaro, Cosimo Cecchi, Matthias Clasen,
-  Adel Gadllah, Carlos Garnacho, Ekaterina Gerasimova, Rui Matos,
-  Florian Müllner, Owen W. Taylor
-
-Translations:
-  Марко Костић [sr], Милош Поповић [sr@latin], Khaled Hosny [ar],
-  Trần Ngọc Quân [vi], Petr Kovar [cs], Alexandre Franke [fr],
-  Fran Dieguez [gl], Anders Jonsson [sv], Piotr Drąg [pl], Dušan Kazik [sk],
-  Milo Casagrande [it], Changwoo Ryu [ko], Stas Solovey [ru],
-  Rafael Fontenelle [pt_BR], Tom Tryfonidis [el], Aurimas Černius [lt],
-  Seán de Búrca [ga], Christian Kirbach [de], Jiri Grönroos [fi],
-  Pedro Albuquerque [pt], Baurzhan Muftakhidinov [kk], Daniel Mustieles [es],
-  Marek Černocký [cs], Ask Hjorth Larsen [da], Inaki Larranaga Murgoitio [eu]
-
 3.18.0
 ======
 

configure.ac

@@ -1,5 +1,5 @@
 AC_PREREQ(2.63)
-AC_INIT([gnome-shell],[3.18.1],[https://bugzilla.gnome.org/enter_bug.cgi?product=gnome-shell],[gnome-shell])
+AC_INIT([gnome-shell],[3.18.0],[https://bugzilla.gnome.org/enter_bug.cgi?product=gnome-shell],[gnome-shell])
 AX_IS_RELEASE([git-directory])
 
 AC_CONFIG_HEADERS([config.h])
@@ -77,7 +77,7 @@ AC_MSG_RESULT($enable_systemd)
 CLUTTER_MIN_VERSION=1.21.5
 GOBJECT_INTROSPECTION_MIN_VERSION=1.45.4
 GJS_MIN_VERSION=1.39.0
-MUTTER_MIN_VERSION=3.18.1
+MUTTER_MIN_VERSION=3.18.0
 GTK_MIN_VERSION=3.15.0
 GIO_MIN_VERSION=2.45.3
 LIBECAL_MIN_VERSION=3.5.3

data/theme/gnome-shell-high-contrast.css

@@ -408,9 +408,9 @@ StScrollBar {
   spacing-rows: 15px;
   spacing-columns: 1em; }
 
-/* Popovers/Menus */
+/* Popvers/Menus */
 .popup-menu {
-  min-width: 15em; }
+  min-width: 200px; }
   .popup-menu .popup-sub-menu {
     background-color: black;
     box-shadow: inset 0 -1px 0px #0d0d0d; }
@@ -752,7 +752,7 @@ StScrollBar {
 
 /* Message list */
 .message-list {
-  width: 31.5em; }
+  width: 420px; }
 
 .message-list-sections {
   spacing: 1.5em; }
@@ -823,7 +823,8 @@ StScrollBar {
     color: transparent; }
 
 .aggregate-menu {
-  min-width: 21em; }
+  min-width: 280px;
+  max-width: 400px; }
   .aggregate-menu .popup-menu-icon {
     padding: 0 4px; }
 

data/theme/gnome-shell.css

@@ -408,9 +408,9 @@ StScrollBar {
   spacing-rows: 15px;
   spacing-columns: 1em; }
 
-/* Popovers/Menus */
+/* Popvers/Menus */
 .popup-menu {
-  min-width: 15em; }
+  min-width: 200px; }
   .popup-menu .popup-sub-menu {
     background-color: #343a3a;
     box-shadow: inset 0 -1px 0px #282c2c; }
@@ -752,7 +752,7 @@ StScrollBar {
 
 /* Message list */
 .message-list {
-  width: 31.5em; }
+  width: 420px; }
 
 .message-list-sections {
   spacing: 1.5em; }
@@ -823,7 +823,8 @@ StScrollBar {
     color: transparent; }
 
 .aggregate-menu {
-  min-width: 21em; }
+  min-width: 280px;
+  max-width: 400px; }
   .aggregate-menu .popup-menu-icon {
     padding: 0 4px; }
 

js/gdm/batch.js

@@ -16,34 +16,6 @@
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 
-/*
- * In order for transformation animations to look good, they need to be
- * incremental and have some order to them (e.g., fade out hidden items,
- * then shrink to close the void left over). Chaining animations in this way can
- * be error-prone and wordy using just Tweener callbacks.
- *
- * The classes in this file help with this:
- *
- * - Task.  encapsulates schedulable work to be run in a specific scope.
- *
- * - ConsecutiveBatch.  runs a series of tasks in order and completes
- *                      when the last in the series finishes.
- *
- * - ConcurrentBatch.  runs a set of tasks at the same time and completes
- *                     when the last to finish completes.
- *
- * - Hold.  prevents a batch from completing the pending task until
- *          the hold is released.
- *
- * The tasks associated with a batch are specified in a list at batch
- * construction time as either task objects or plain functions.
- * Batches are task objects, themselves, so they can be nested.
- *
- * These classes aren't specific to GDM, but were found to be unintuitive and so
- * are not used elsewhere. These APIs may ultimately get dropped entirely and
- * replaced by something else.
- */
-
 const Lang = imports.lang;
 const Signals = imports.signals;
 

js/ui/dash.js

@@ -644,14 +644,15 @@ const Dash = new Lang.Class({
         let firstIcon = firstButton._delegate.icon;
 
         let minHeight, natHeight;
-        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
 
         // Enforce the current icon size during the size request
-        firstIcon.icon.ensure_style();
-        let [currentWidth, currentHeight] = firstIcon.icon.get_size();
-        firstIcon.icon.set_size(this.iconSize * scaleFactor, this.iconSize * scaleFactor);
+        firstIcon.setIconSize(this.iconSize);
         [minHeight, natHeight] = firstButton.get_preferred_height(-1);
-        firstIcon.icon.set_size(currentWidth, currentHeight);
+
+        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
+        let iconSizes = baseIconSizes.map(function(s) {
+            return s * scaleFactor;
+        });
 
         // Subtract icon padding and box spacing from the available height
         availHeight -= iconChildren.length * (natHeight - this.iconSize * scaleFactor) +
@@ -659,10 +660,6 @@ const Dash = new Lang.Class({
 
         let availSize = availHeight / iconChildren.length;
 
-        let iconSizes = baseIconSizes.map(function(s) {
-            return s * scaleFactor;
-        });
-
         let newIconSize = baseIconSizes[0];
         for (let i = 0; i < iconSizes.length; i++) {
             if (iconSizes[i] < availSize)

js/ui/panel.js

@@ -652,39 +652,6 @@ const PanelCorner = new Lang.Class({
     }
 });
 
-const AggregateLayout = new Lang.Class({
-    Name: 'AggregateLayout',
-    Extends: Clutter.BoxLayout,
-
-    _init: function(params) {
-        if (!params)
-            params = {};
-        params['orientation'] = Clutter.Orientation.VERTICAL;
-        this.parent(params);
-
-        this._sizeChildren = [];
-    },
-
-    addSizeChild: function(actor) {
-        this._sizeChildren.push(actor);
-        this.layout_changed();
-    },
-
-    vfunc_get_preferred_width: function(container, forHeight) {
-        let themeNode = container.get_theme_node();
-        let minWidth = themeNode.get_min_width();
-        let natWidth = minWidth;
-
-        for (let i = 0; i < this._sizeChildren.length; i++) {
-            let child = this._sizeChildren[i];
-            let [childMin, childNat] = child.get_preferred_width(forHeight);
-            minWidth = Math.max(minWidth, childMin);
-            natWidth = Math.max(minWidth, childNat);
-        }
-        return [minWidth, natWidth];
-    }
-});
-
 const AggregateMenu = new Lang.Class({
     Name: 'AggregateMenu',
     Extends: PanelMenu.Button,
@@ -693,9 +660,6 @@ const AggregateMenu = new Lang.Class({
         this.parent(0.0, C_("System menu in the top bar", "System"), false);
         this.menu.actor.add_style_class_name('aggregate-menu');
 
-        let menuLayout = new AggregateLayout();
-        this.menu.box.set_layout_manager(menuLayout);
-
         this._indicators = new St.BoxLayout({ style_class: 'panel-status-indicators-box' });
         this.actor.add_child(this._indicators);
 
@@ -744,11 +708,6 @@ const AggregateMenu = new Lang.Class({
         this.menu.addMenuItem(this._rfkill.menu);
         this.menu.addMenuItem(this._power.menu);
         this.menu.addMenuItem(this._system.menu);
-
-        menuLayout.addSizeChild(this._location.menu.actor);
-        menuLayout.addSizeChild(this._rfkill.menu.actor);
-        menuLayout.addSizeChild(this._power.menu.actor);
-        menuLayout.addSizeChild(this._system.menu.actor);
     },
 });
 

js/ui/windowManager.js

@@ -677,7 +677,6 @@ const WindowManager = new Lang.Class({
         this._minimizing = [];
         this._unminimizing = [];
         this._mapping = [];
-        this._resizing = [];
         this._destroying = [];
         this._movingWindow = null;
 
@@ -1235,25 +1234,6 @@ const WindowManager = new Lang.Class({
     },
 
     _fullscreenWindow: function(shellwm, actor, oldFrameRect, oldBufferRect) {
-        actor.translation_x = oldFrameRect.x;
-        actor.translation_y = oldFrameRect.y;
-        this._fullscreenAnimation(shellwm, actor, oldFrameRect);
-    },
-
-    _unfullscreenWindow: function(shellwm, actor, oldFrameRect, oldBufferRect) {
-        let targetRect = actor.meta_window.get_frame_rect();
-        actor.translation_x = -targetRect.x;
-        actor.translation_y = -targetRect.y;
-        this._fullscreenAnimation(shellwm, actor, oldFrameRect);
-    },
-
-    _fullscreenAnimation: function(shellwm, actor, oldFrameRect) {
-        this._resizing.push(actor);
-
-        // Position a clone of the window on top of the old position,
-        // while actor updates are frozen.
-        // Note that the MetaWindow has up to date sizing information for
-        // the new geometry already.
         let targetRect = actor.meta_window.get_frame_rect();
         let actorContent = Shell.util_get_content_for_window_actor(actor, oldFrameRect);
         let actorClone = new St.Widget({ content: actorContent });
@@ -1267,55 +1247,93 @@ const WindowManager = new Lang.Class({
         let scaleX = targetRect.width / oldFrameRect.width;
         let scaleY = targetRect.height / oldFrameRect.height;
 
-        // Now scale and fade out the clone
         Tweener.addTween(actorClone,
                          { x: targetRect.x,
                            y: targetRect.y,
-                           scale_x: scaleX,
-                           scale_y: scaleY,
+                           scaleX: scaleX,
+                           scaleY: scaleY,
                            opacity: 0,
                            time: WINDOW_ANIMATION_TIME,
-                           transition: 'easeOutQuad'
-                         });
-
-        // Now set scale the actor to size it as the clone.
-        // Note that the caller of this function already set a translation
-        // on the actor.
-        actor.scale_x = 1 / scaleX;
-        actor.scale_y = 1 / scaleY;
-
-        // Scale it to its actual new size
-        Tweener.addTween(actor,
-                         { scale_x: 1.0,
-                           scale_y: 1.0,
-                           translation_x: 0,
-                           translation_y: 0,
-                           time: WINDOW_ANIMATION_TIME,
                            transition: 'easeOutQuad',
                            onComplete: this._sizeChangeWindowDone,
                            onCompleteScope: this,
                            onCompleteParams: [shellwm, actor]
                          });
 
-        // Now unfreeze actor updates, to get it to the new size.
-        // It's important that we don't wait until the animation is completed to
-        // do this, otherwise our scale will be applied to the old texture size.
+        actor.translation_x = actor.x;
+        actor.translation_y = actor.y;
+        actor.scaleX = 1 / scaleX;
+        actor.scaleY = 1 / scaleY;
+
+        Tweener.addTween(actor,
+                         { scaleX: 1.0,
+                           scaleY: 1.0,
+                           translation_x: 0,
+                           translation_y: 0,
+                           time: WINDOW_ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+
+        shellwm.completed_size_change(actor);
+    },
+
+    _unfullscreenWindow: function(shellwm, actor, oldFrameRect, oldBufferRect) {
+        let targetRect = actor.meta_window.get_frame_rect();
+        let actorContent = Shell.util_get_content_for_window_actor(actor, oldFrameRect);
+        let actorClone = new St.Widget({ content: actorContent });
+        actorClone.set_offscreen_redirect(Clutter.OffscreenRedirect.ALWAYS);
+        actorClone.set_position(oldFrameRect.x, oldFrameRect.y);
+        actorClone.set_size(oldFrameRect.width, oldFrameRect.height);
+        Main.uiGroup.add_actor(actorClone);
+
+        actor.__unfullscreenClone = actorClone;
+
+        let scaleX = targetRect.width / oldFrameRect.width;
+        let scaleY = targetRect.height / oldFrameRect.height;
+
+        Tweener.addTween(actorClone,
+                         { x: targetRect.x,
+                           y: targetRect.y,
+                           scaleX: scaleX,
+                           scaleY: scaleY,
+                           opacity: 0,
+                           time: WINDOW_ANIMATION_TIME,
+                           transition: 'easeOutQuad',
+                           onComplete: this._sizeChangeWindowDone,
+                           onCompleteScope: this,
+                           onCompleteParams: [shellwm, actor]
+                         });
+
+        actor.translation_x = -actor.x;
+        actor.translation_y = -actor.y;
+        actor.scaleX = 1 / scaleX;
+        actor.scaleY = 1 / scaleY;
+
+        Tweener.addTween(actor,
+                         { scaleX: 1.0,
+                           scaleY: 1.0,
+                           translation_x: 0,
+                           translation_y: 0,
+                           time: WINDOW_ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+
         shellwm.completed_size_change(actor);
     },
 
     _sizeChangeWindowDone: function(shellwm, actor) {
-        if (this._removeEffect(this._resizing, actor)) {
-            Tweener.removeTweens(actor);
-            actor.scale_x = 1.0;
-            actor.scale_y = 1.0;
-            actor.translation_x = 0;
-            actor.translation_y = 0;
+        Tweener.removeTweens(actor);
 
-            let actorClone = actor.__fullscreenClone;
-            if (actorClone) {
-                actorClone.destroy();
-                delete actor.__fullscreenClone;
-            }
+        let actorClone = actor.__fullscreenClone;
+        if (actorClone) {
+            actorClone.destroy();
+            delete actor.__fullscreenClone;
+        }
+
+        actorClone = actor.__unfullscreenClone;
+        if (actorClone) {
+            actorClone.destroy();
+            delete actor.__unfullscreenClone;
         }
     },
 

src/st/st-box-layout.c

@@ -562,24 +562,6 @@ layout_notify (GObject    *object,
     g_object_notify (self, prop_name);
 }
 
-static void
-on_layout_manager_notify (GObject    *object,
-                          GParamSpec *pspec,
-                          gpointer    user_data)
-{
-  ClutterActor *actor = CLUTTER_ACTOR (object);
-  ClutterLayoutManager *layout = clutter_actor_get_layout_manager (actor);
-
-  g_warn_if_fail (CLUTTER_IS_BOX_LAYOUT (layout));
-
-  if (layout == NULL)
-    return;
-
-  g_signal_connect_swapped (layout, "layout-changed",
-                            G_CALLBACK (clutter_actor_queue_relayout), actor);
-  g_signal_connect (layout, "notify", G_CALLBACK (layout_notify), object);
-}
-
 static void
 st_box_layout_class_init (StBoxLayoutClass *klass)
 {
@@ -632,11 +614,14 @@ st_box_layout_class_init (StBoxLayoutClass *klass)
 static void
 st_box_layout_init (StBoxLayout *self)
 {
-  self->priv = BOX_LAYOUT_PRIVATE (self);
+  ClutterLayoutManager *layout;
 
-  g_signal_connect (self, "notify::layout-manager",
-                    G_CALLBACK (on_layout_manager_notify), NULL);
-  clutter_actor_set_layout_manager (CLUTTER_ACTOR (self), clutter_box_layout_new ());
+  self->priv = BOX_LAYOUT_PRIVATE (self);
+  layout = clutter_box_layout_new ();
+  g_signal_connect_swapped (layout, "layout-changed",
+                            G_CALLBACK (clutter_actor_queue_relayout), self);
+  g_signal_connect (layout, "notify", G_CALLBACK (layout_notify), self);
+  clutter_actor_set_layout_manager (CLUTTER_ACTOR (self), layout);
 }
 
 /**