[gnome-shell/gbsneto/multiline-on-hover: 3/4] appDisplay: Let icon labels be multiline when hovered

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit a216fd1b3f60300f02ae862f4afd12c59048493a
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Oct 21 14:33:23 2020 -0300

    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 | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 56b4a58714..8fd7f27bfb 100644
--- a/js/ui/appDisplay.js
+++ b/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;
@@ -1469,11 +1473,18 @@ class AppViewItem extends St.Button {
         }
 
         this._otherIconIsHovering = false;
+        this._savedLabelEasingState = false;
 
+        this.connect('notify::hover', this._onHover.bind(this));
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
     _onDestroy() {
+        if (this._savedLabelEasingState) {
+            this.icon.label.restore_easing_state();
+            this._savedLabelEasingState = false;
+        }
+
         if (this._dragMonitor) {
             DND.removeDragMonitor(this._dragMonitor);
             this._dragMonitor = null;
@@ -1486,6 +1497,31 @@ class AppViewItem extends St.Button {
         }
     }
 
+    _onHover() {
+        if (!this.icon.label)
+            return;
+
+        const { clutterText } = this.icon.label;
+        const layout = clutterText.get_layout();
+        if (!this._savedLabelEasingState && !layout.is_ellipsized())
+            return;
+
+        if (!this._savedLabelEasingState) {
+            this.icon.label.save_easing_state();
+            this._savedLabelEasingState = true;
+        }
+
+        const { hover } = this;
+        this.icon.label.set_easing_duration(hover
+            ? APP_ICON_TITLE_EXPAND_TIME
+            : APP_ICON_TITLE_COLLAPSE_TIME);
+        this.icon.label.clutter_text.set({
+            line_wrap: hover,
+            wrap_mode: hover ? Pango.WrapMode.WORD : Pango.WrapMode.NONE,
+            ellipsize: hover ? Pango.EllipsizeMode.NONE : Pango.EllipsizeMode.END,
+        });
+    }
+
     _onDragBegin() {
         this._dragging = true;
         this.scaleAndFade();