appDisplay: Let icon labels be multiline when hovered

When hovered, remove constraints from the icon labels that
limit the number of lines. Do that inside a saved easing
state so that the allocation can ease the label.

This helps with applications with long titles.

Related: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/363

https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1477

js/ui/appDisplay.js

@@ -1,7 +1,8 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported AppDisplay, AppSearchProvider */
 
-const { Clutter, Gio, GLib, GObject, Graphene, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Graphene, Meta,
+    Pango, Shell, St } = imports.gi;
 const Signals = imports.signals;
 
 const AppFavorites = imports.ui.appFavorites;
@@ -31,6 +32,9 @@ var SCROLL_TIMEOUT_TIME = 150;
 var APP_ICON_SCALE_IN_TIME = 500;
 var APP_ICON_SCALE_IN_DELAY = 700;
 
+var APP_ICON_TITLE_EXPAND_TIME = 250;
+var APP_ICON_TITLE_COLLAPSE_TIME = 150;
+
 const FOLDER_DIALOG_ANIMATION_TIME = 200;
 
 const OVERSHOOT_THRESHOLD = 20;
@@ -1470,6 +1474,7 @@ class AppViewItem extends St.Button {
 
         this._otherIconIsHovering = false;
 
+        this.connect('notify::hover', this._onHover.bind(this));
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
@@ -1486,6 +1491,35 @@ class AppViewItem extends St.Button {
         }
     }
 
+    _onHover() {
+        if (!this.icon.label)
+            return;
+
+        const { label } = this.icon;
+        const { clutterText } = label;
+        const layout = clutterText.get_layout();
+        if (!layout.is_wrapped() && !layout.is_ellipsized())
+            return;
+
+        label.remove_transition('allocation');
+
+        const id = label.connect('notify::allocation', () => {
+            label.restore_easing_state();
+            label.disconnect(id);
+        });
+
+        const { hover } = this;
+        label.save_easing_state();
+        label.set_easing_duration(hover
+            ? APP_ICON_TITLE_EXPAND_TIME
+            : APP_ICON_TITLE_COLLAPSE_TIME);
+        clutterText.set({
+            line_wrap: hover,
+            line_wrap_mode: hover ? Pango.WrapMode.WORD_CHAR : Pango.WrapMode.NONE,
+            ellipsize: hover ? Pango.EllipsizeMode.NONE : Pango.EllipsizeMode.END,
+        });
+    }
+
     _onDragBegin() {
         this._dragging = true;
         this.scaleAndFade();