From 3c3c1f702d05e46b033c77836ad8d486b4b532ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Wed, 20 Jan 2021 20:29:01 +0100
Subject: [PATCH] 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 37d1ff08..7314dfc7 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);