[gnome-shell-extensions/wip/rstrode/heads-up-display: 55/62] window-list: Add tooltips to workspace thumbnails

[Ray Strode <halfline src gnome org>]

commit 8c533a5e9f26d1a3762f6ac16cbc13143f4e6b54
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.

 extensions/window-list/workspaceIndicator.js | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
---
diff --git a/extensions/window-list/workspaceIndicator.js b/extensions/window-list/workspaceIndicator.js
index e2a067b..2df88af 100644
--- a/extensions/window-list/workspaceIndicator.js
+++ b/extensions/window-list/workspaceIndicator.js
@@ -5,10 +5,14 @@ const DND = imports.ui.dnd;
 const Main = imports.ui.main;
 const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
+const Tweener = imports.ui.tweener;
 
 const Gettext = imports.gettext.domain('gnome-shell-extensions');
 const _ = Gettext.gettext;
 
+const TOOLTIP_OFFSET = 6;
+const TOOLTIP_ANIMATION_TIME = 150;
+
 let WindowPreview = GObject.registerClass({
     GTypeName: 'WindowListWindowPreview'
 }, class WindowPreview extends St.Button {
@@ -111,7 +115,14 @@ let WorkspaceThumbnail = GObject.registerClass({
             y_fill: true
         });
 
+        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 +209,36 @@ let WorkspaceThumbnail = GObject.registerClass({
             ws.activate(global.get_current_time());
     }
 
+    _syncTooltip() {
+        if (this.hover) {
+            this._tooltip.text = Meta.prefs_get_workspace_name(this._index);
+            this._tooltip.opacity = 0;
+            this._tooltip.show();
+
+            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.min(
+                Math.max(stageX + xOffset, monitor.x),
+                monitor.x + monitor.width - tipWidth);
+            const y = stageY - tipHeight - TOOLTIP_OFFSET;
+            this._tooltip.set_position(x, y);
+        }
+
+        Tweener.addTween(this._tooltip, {
+            opacity: this.hover ? 255 : 0,
+            time: TOOLTIP_ANIMATION_TIME * 1000,
+            transition: 'easeOutQuad',
+            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);