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

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

commit c33be29f5689256f46c70e088c065f5c013096f4
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Jan 20 20:18:39 2021 +0100

    workspace-indicator: Add tooltips to workspace thumbnails
    
    When showing previews instead of the menu, the workspace names from
    our preferences 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/workspace-indicator/extension.js | 42 +++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
---
diff --git a/extensions/workspace-indicator/extension.js b/extensions/workspace-indicator/extension.js
index 76b35df..ad4e59b 100644
--- a/extensions/workspace-indicator/extension.js
+++ b/extensions/workspace-indicator/extension.js
@@ -15,6 +15,9 @@ const _ = Gettext.gettext;
 const WORKSPACE_SCHEMA = 'org.gnome.desktop.wm.preferences';
 const WORKSPACE_KEY = 'workspace-names';
 
+const TOOLTIP_OFFSET = 6;
+const TOOLTIP_ANIMATION_TIME = 150;
+
 let WindowPreview = GObject.registerClass(
 class WindowPreview extends St.Button {
     _init(window) {
@@ -113,7 +116,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
@@ -198,7 +208,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 thumbHeight = this.allocation.get_height();
+            const tipWidth = this._tooltip.width;
+            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 + thumbHeight + 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);