Show similar window labels in both Wayland and X11 sessions

.github/workflows/main.yml

@@ -23,7 +23,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y meson libadwaita-1-dev libgranite-7-dev libswitchboard-3-dev valac
+        apt install -y meson libadwaita-1-dev libgranite-7-dev libpantheon-wayland-1-dev libswitchboard-3-dev valac
     - name: Build
       env:
         DESTDIR: out

data/Display.css

@@ -169,3 +169,13 @@ scale.warmth:dir(rtl) trough {
             @ORANGE_500
         );
 }
+
+.monitor-label {
+    border-radius: 9px;
+    font-weight: 600;
+}
+
+.monitor-label label {
+    margin: 1em;
+    text-shadow: 0 1px 1px alpha(white, 0.1);
+}

src/Widgets/DisplaysOverlay.vala

@@ -201,40 +201,72 @@ public class Display.DisplaysOverlay : Gtk.Box {
         change_active_displays_sensitivity ();
         calculate_ratio ();
         scanning = false;
+
+        show_windows ();
     }
 
-    public void show_windows () requires (gala_dbus != null) {
-        if (monitor_manager.is_mirrored) {
+    private MonitorLabel[] monitor_labels = {};
+    public void show_windows () {
+        if (monitor_manager.is_mirrored || scanning) {
             return;
         }
 
-        MonitorLabelInfo[] label_infos = {};
-
-        foreach (unowned var widget in display_widgets) {
-            if (widget.virtual_monitor.is_active) {
-                label_infos += MonitorLabelInfo () {
-                    monitor = label_infos.length,
-                    label = widget.virtual_monitor.get_display_name (),
-                    background_color = widget.bg_color,
-                    text_color = widget.text_color,
-                    x = widget.virtual_monitor.current_x,
-                    y = widget.virtual_monitor.current_y
-                };
+        var display = Gdk.Display.get_default ();
+        if (display is Gdk.X11.Display) {
+            if (gala_dbus == null) {
+                return;
+            }
+            MonitorLabelInfo[] label_infos = {};
+            foreach (unowned var widget in display_widgets) {
+                if (widget.virtual_monitor.is_active) {
+                    label_infos += MonitorLabelInfo () {
+                        monitor = label_infos.length,
+                        label = widget.virtual_monitor.get_display_name (),
+                        background_color = widget.bg_color,
+                        text_color = widget.text_color,
+                        x = widget.virtual_monitor.current_x,
+                        y = widget.virtual_monitor.current_y
+                    };
+                }
+            }
+            try {
+                gala_dbus.show_monitor_labels (label_infos);
+            } catch (Error e) {
+                warning ("Couldn't show monitor labels: %s", e.message);
+            }
+        } else {
+            hide_windows (); // Ensure existing labels destroyed
+            foreach (unowned var widget in display_widgets) {
+                if (widget.virtual_monitor.is_active) {
+                    var monitor_label = new MonitorLabel (
+                        monitor_labels.length, widget.virtual_monitor.get_display_name (),
+                        widget.bg_color, widget.text_color
+                    );
+                    monitor_label.present ();
+                    monitor_labels += monitor_label;
+                }
             }
-        }
-
-        try {
-            gala_dbus.show_monitor_labels (label_infos);
-        } catch (Error e) {
-            warning ("Couldn't show monitor labels: %s", e.message);
         }
     }
 
-    public void hide_windows () requires (gala_dbus != null) {
-        try {
-            gala_dbus.hide_monitor_labels ();
-        } catch (Error e) {
-            warning ("Couldn't hide monitor labels: %s", e.message);
+    public void hide_windows () {
+        var display = Gdk.Display.get_default ();
+        if (display is Gdk.X11.Display) {
+            if (gala_dbus == null) {
+                return;
+            }
+
+            try {
+                gala_dbus.hide_monitor_labels ();
+            } catch (Error e) {
+                warning ("Couldn't hide monitor labels: %s", e.message);
+            }
+        } else {
+            foreach (var monitor_label in monitor_labels) {
+                monitor_label.destroy ();
+            }
+
+            monitor_labels = {};
         }
     }
 

src/Widgets/MonitorLabel.vala

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2025 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: LGPL-3.0-or-later
+ */
+
+public class Display.MonitorLabel : Gtk.Window, PantheonWayland.ExtendedBehavior {
+    private const int SPACING = 12;
+    private const string COLORED_STYLE_CSS = """
+    .label-%d {
+        background-color: alpha(%s, 0.8);
+        color: %s;
+    }
+    """;
+
+    public int index { get; construct; }
+    public string label { get; construct; }
+    public string bg_color { get; construct; }
+    public string text_color { get; construct; }
+
+    public MonitorLabel (int index, string label, string bg_color, string text_color) {
+        Object (
+            index: index,
+            label: label,
+            bg_color: bg_color,
+            text_color: text_color
+        );
+    }
+
+    construct {
+        child = new Gtk.Label (label);
+
+        decorated = false;
+        resizable = false;
+        deletable = false;
+        can_focus = false;
+        titlebar = new Gtk.Grid () { visible = false };
+
+        var provider = new Gtk.CssProvider ();
+        try {
+            // Provide appearance similar to classic session
+            provider.load_from_string (COLORED_STYLE_CSS.printf (index, bg_color, text_color));
+            add_css_class ("label-%d".printf (index));
+            add_css_class ("monitor-label");
+
+            Gtk.StyleContext.add_provider_for_display (
+                Gdk.Display.get_default (),
+                provider,
+                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+            );
+        } catch (Error e) {
+            warning ("Failed to load CSS: %s", e.message);
+        }
+
+        child.realize.connect (on_realize);
+    }
+
+    private void on_realize () requires (!(Gdk.Display.get_default () is Gdk.X11.Display )) {
+        if (!(this is PantheonWayland.ExtendedBehavior)) {
+            return;
+        }
+
+        connect_to_shell ();
+        ((PantheonWayland.ExtendedBehavior)(this)).make_monitor_label (index);
+    }
+}

src/meson.build

@@ -15,6 +15,7 @@ plug_files = files(
     'Views' / 'FiltersView.vala',
     'Widgets/DisplayWidget.vala',
     'Widgets/DisplaysOverlay.vala',
+    'Widgets/MonitorLabel.vala'
 )
 
 switchboard_dep = dependency('switchboard-3')
@@ -31,7 +32,9 @@ shared_module(
         dependency('gobject-2.0'),
         dependency('granite-7', version: '>=7.7.0'),
         dependency('gtk4'),
+        dependency('gtk4-x11'),
         dependency('libadwaita-1'),
+        dependency('pantheon-wayland-1'),
         meson.get_compiler('vala').find_library('posix'),
         switchboard_dep
     ],