[gnome-shell-extensions] window-list: Add tooltips to workspace thumbnails

[Marge Bot <marge-bot src gnome org>]

commit 3c3c1f702d05e46b033c77836ad8d486b4b532ef
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Jan 20 20:29:01 2021 +0100

    window-list: Add tooltips to workspace thumbnails
    
    When showing previews instead of the menu, the workspace names
    don't appear anywhere. Some users care strongly about those, so
    expose them as tooltip on hover.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/merge_requests/155>

 extensions/window-list/workspaceIndicator.js | 42 ++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
---
diff --git a/extensions/window-list/workspaceIndicator.js b/extensions/window-list/workspaceIndicator.js
index 37d1ff0..7314dfc 100644
--- a/extensions/window-list/workspaceIndicator.js
+++ b/extensions/window-list/workspaceIndicator.js
@@ -9,6 +9,9 @@ const PopupMenu = imports.ui.popupMenu;
 const Gettext = imports.gettext.domain('gnome-shell-extensions');
 const _ = Gettext.gettext;
 
+const TOOLTIP_OFFSET = 6;
+const TOOLTIP_ANIMATION_TIME = 150;
+
 let WindowPreview = GObject.registerClass(
 class WindowPreview extends St.Button {
     _init(window) {
@@ -107,7 +110,14 @@ class WorkspaceThumbnail extends St.Button {
             }),
         });
 
+        this._tooltip = new St.Label({
+            style_class: 'dash-label',
+            visible: false,
+        });
+        Main.uiGroup.add_child(this._tooltip);
+
         this.connect('destroy', this._onDestroy.bind(this));
+        this.connect('notify::hover', this._syncTooltip.bind(this));
 
         this._index = index;
         this._delegate = this; // needed for DND
@@ -192,7 +202,39 @@ class WorkspaceThumbnail extends St.Button {
             ws.activate(global.get_current_time());
     }
 
+    _syncTooltip() {
+        if (this.hover) {
+            this._tooltip.set({
+                text: Meta.prefs_get_workspace_name(this._index),
+                visible: true,
+                opacity: 0,
+            });
+
+            const [stageX, stageY] = this.get_transformed_position();
+            const thumbWidth = this.allocation.get_width();
+            const tipWidth = this._tooltip.width;
+            const tipHeight = this._tooltip.height;
+            const xOffset = Math.floor((thumbWidth - tipWidth) / 2);
+            const monitor = Main.layoutManager.findMonitorForActor(this);
+            const x = Math.clamp(
+                stageX + xOffset,
+                monitor.x,
+                monitor.x + monitor.width - tipWidth);
+            const y = stageY - tipHeight - TOOLTIP_OFFSET;
+            this._tooltip.set_position(x, y);
+        }
+
+        this._tooltip.ease({
+            opacity: this.hover ? 255 : 0,
+            duration: TOOLTIP_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: () => (this._tooltip.visible = this.hover),
+        });
+    }
+
     _onDestroy() {
+        this._tooltip.destroy();
+
         this._workspace.disconnect(this._windowAddedId);
         this._workspace.disconnect(this._windowRemovedId);
         global.display.disconnect(this._restackedId);