GWL: add notification badges to panel icons

and remove "Show window count numbers" config option.

Author: fredcw

data/theme/cinnamon-sass/_colors.scss

@@ -18,6 +18,8 @@ $destructive_color: #ff7b63;
 $warning_color: #f8e45c;
 $warning_bg_color: #cd9309;
 
+$notification_badge_bg_color: #ef2591;
+
 $accent_color: #78aeed;
 $accent_bg_color: #3584e4;
 

data/theme/cinnamon-sass/widgets/_windowlist.scss

@@ -73,14 +73,24 @@
 
   &-button-label { padding-left: 4px;}
 
-  &-number-label {
-    font-size: 0.8em;
+  &-windows-badge {
+    border-radius: 9999px;
+    color: $fg_color;
+    background-color: $accent_bg_color;
+  }
+
+  &-windows-badge-label {
     z-index: 99;
   }
 
-  &-badge {
+  &-notifications-badge {
     border-radius: 9999px;
-    background-color: $bg_color;
+    color: $fg_color;
+    background-color: $notification_badge_bg_color;
+  }
+
+  &-notifications-badge-label {
+    z-index: 99;
   }
 }
 

files/usr/share/cinnamon/applets/[email protected]/appGroup.js

@@ -119,31 +119,50 @@ class AppGroup {
         });
         this.actor.add_child(this.progressOverlay);
 
-        // Create the app button icon, number label, and text label for titleDisplay
+        // Create the app button icon, window count and notification badges, and text label for titleDisplay
         this.iconBox = new Cinnamon.Slicer({name: 'appMenuIcon'});
         this.actor.add_child(this.iconBox);
         this.setActorAttributes(null, params.metaWindow);
 
-        this.badge = new St.BoxLayout({
-            style_class: 'grouped-window-list-badge',
+        this.windowsBadge = new St.BoxLayout({
+            style_class: 'grouped-window-list-windows-badge',
             important: true,
+            x_align: St.Align.MIDDLE,
+            y_align: St.Align.MIDDLE,
+            show_on_set_parent: false,
+        });
+        this.windowsBadgeLabel = new St.Label({
+            style_class: 'grouped-window-list-windows-badge-label',
+            important: true,
+            text: ''
+        });
+        this.windowsBadgeLabel.clutter_text.ellipsize = false;
+        this.windowsBadge.add(this.windowsBadgeLabel, {
             x_align: St.Align.START,
+            y_align: St.Align.START,
+        });
+        this.actor.add_child(this.windowsBadge);
+        this.windowsBadge.set_text_direction(St.TextDirection.LTR);
+
+        this.notificationsBadge = new St.BoxLayout({
+            style_class: 'grouped-window-list-notifications-badge',
+            important: true,
+            x_align: St.Align.MIDDLE,
             y_align: St.Align.MIDDLE,
             show_on_set_parent: false,
         });
-        this.numberLabel = new St.Label({
-            style_class: 'grouped-window-list-number-label',
+        this.notificationsBadgeLabel = new St.Label({
+            style_class: 'grouped-window-list-notifications-badge-label',
             important: true,
-            text: '',
-            anchor_x: -3 * global.ui_scale,
+            text: ''
         });
-        this.numberLabel.clutter_text.ellipsize = false;
-        this.badge.add(this.numberLabel, {
+        this.notificationsBadgeLabel.clutter_text.ellipsize = false;
+        this.notificationsBadge.add(this.notificationsBadgeLabel, {
             x_align: St.Align.START,
             y_align: St.Align.START,
         });
-        this.actor.add_child(this.badge);
-        this.badge.set_text_direction(St.TextDirection.LTR);
+        this.actor.add_child(this.notificationsBadge);
+        this.notificationsBadge.set_text_direction(St.TextDirection.LTR);
 
         this.label = new St.Label({
             style_class: 'grouped-window-list-button-label',
@@ -172,6 +191,7 @@ class AppGroup {
         this.calcWindowNumber();
         this.on_orientation_changed(true);
         this.handleFavorite();
+        this.state.notifications.addAppGroup(this);
     }
 
     initThumbnailMenu() {
@@ -394,15 +414,23 @@ class AppGroup {
 
         this.iconBox.allocate(childBox, flags);
 
-        // Set badge position
-        const windowCountFactor = this.groupState.windowCount > 9 ? 1.5 : 2;
-        const badgeOffset = 2 * global.ui_scale;
-        childBox.x1 = childBox.x1 - badgeOffset;
-        childBox.x2 = childBox.x1 + (this.numberLabel.width * windowCountFactor);
-        childBox.y1 = Math.max(childBox.y1 - badgeOffset, 0);
-        childBox.y2 = childBox.y1 + this.badge.get_preferred_height(childBox.get_width())[1];
+        this.updateBadgesTextSize();
 
-        this.badge.allocate(childBox, flags);
+        // Set windows badge position
+        childBox.x1 = box.x1;
+        childBox.x2 = childBox.x1 + this.windowsBadgeLabel.width;
+        childBox.y1 = box.y2 - this.windowsBadge.get_preferred_height(childBox.get_width())[1];
+        childBox.y2 = box.y2;
+
+        this.windowsBadge.allocate(childBox, flags);
+
+        // Set notifications badge position
+        childBox.x2 = this.iconBox.x + this.iconBox.width;
+        childBox.x1 = childBox.x2 - this.notificationsBadgeLabel.width;
+        childBox.y1 = box.y1;
+        childBox.y2 = childBox.y1 + this.notificationsBadge.get_preferred_height(childBox.get_width())[1];
+
+        this.notificationsBadge.allocate(childBox, flags);
 
         // Set label position
         if (this.drawLabel) {
@@ -450,6 +478,14 @@ class AppGroup {
         if (this.progressOverlay.visible) this.allocateProgress(childBox, flags);
     }
 
+    updateBadgesTextSize() {
+        const badgeTextSize = Math.round(this.iconBox.width / 2.5 / global.ui_scale);
+        const badgePadding = Math.round(badgeTextSize / 4);
+        const sizeStyle = `font-size: ${badgeTextSize}px; padding-left: ${badgePadding}px; padding-right: ${badgePadding}px;`;
+        this.windowsBadgeLabel.set_style(sizeStyle);
+        this.notificationsBadgeLabel.set_style(sizeStyle);
+    }
+
     showLabel(animate = false) {
         if (this.labelVisiblePref
             || !this.label
@@ -676,8 +712,8 @@ class AppGroup {
     }
 
     showOrderLabel(number) {
-        this.numberLabel.text = (number + 1).toString();
-        this.badge.show();
+        this.windowsBadgeLabel.text = (number + 1).toString();
+        this.windowsBadge.show();
     }
 
     launchNewInstance(offload=false) {
@@ -917,6 +953,7 @@ class AppGroup {
             this.setIcon(metaWindow)
 
             this.calcWindowNumber();
+            this.state.notifications.updateNotificationsBadge(this);
             this.onFocusChange();
         }
         set({
@@ -1074,20 +1111,16 @@ class AppGroup {
     calcWindowNumber() {
         if (this.groupState.willUnmount) return;
 
-        const windowCount = this.groupState.metaWindows ? this.groupState.metaWindows.length : 0;
-        this.numberLabel.text = windowCount.toString();
-
-        this.groupState.set({windowCount});
-
-        if (this.state.settings.numDisplay) {
-            if (windowCount <= 1) {
-                this.badge.hide();
-            } else {
-                this.badge.show();
+        this.groupState.set({windowCount: this.groupState.metaWindows ? this.groupState.metaWindows.length : 0});
+        this.updateWindowsBadge();
+    }
 
-            }
+    updateWindowsBadge(){
+        if (this.groupState.windowCount > 1) {
+            this.windowsBadgeLabel.text = this.groupState.windowCount.toString();
+            this.windowsBadge.show();
         } else {
-            this.badge.hide();
+            this.windowsBadge.hide();
         }
     }
 

files/usr/share/cinnamon/applets/[email protected]/applet.js

@@ -9,6 +9,7 @@ const Applet = imports.ui.applet;
 const Cinnamon = imports.gi.Cinnamon;
 const Main = imports.ui.main;
 const DND = imports.ui.dnd;
+const NotificationDestroyedReason = imports.ui.messageTray.NotificationDestroyedReason;
 const {AppletSettings} = imports.ui.settings;
 const {SignalManager} = imports.misc.signalManager;
 const {throttle, unref, trySpawnCommandLine} = imports.misc.util;
@@ -161,6 +162,124 @@ class PinnedFavs {
     }
 }
 
+class Notifications {
+    // As an app can have multiple appgroups (multiple windows, different workspaces, multiple instances), all
+    // appGroups with the same appId should always display the same number of notifications.
+    constructor() {
+        this._appGroupList = []; //stores all appGroups from all workspaces
+        Main.messageTray.connect('notify-applet-update', (mtray, notification) => this._notificationReceived(mtray, notification));
+    }
+
+    _notificationReceived(mtray, notification) {
+        const guessFlatpakAppIdFromDesktopEntryHint = (desktopEntry) => {
+            let tryAppId = desktopEntry + '.desktop:flatpak';
+            if (this._appGroupList.some(appGroup => appGroup.groupState.appId === tryAppId)) {
+                return tryAppId;
+            }            
+            const exceptions = {
+                "vivaldi-stable": "com.vivaldi.Vivaldi",
+                "brave-browser": "com.brave.Browser",
+                "google-chrome": "com.google.Chrome",
+                "microsoft-edge": "com.microsoft.Edge",
+                "opera": "com.opera.Opera"
+            };
+            if (exceptions[desktopEntry]) {
+                tryAppId = exceptions[desktopEntry] + '.desktop:flatpak';
+                if (this._appGroupList.some(appGroup => appGroup.groupState.appId === tryAppId)) {
+                    return tryAppId;
+                }
+            }
+        };
+
+        let appId = notification.source.app?.get_id();
+        if (!appId) {
+            appId = guessFlatpakAppIdFromDesktopEntryHint(notification.desktopEntry);
+        }
+        if (!appId) {
+            global.logError('GWL: Failed to find appId for notification with desktopEntry hint: ' 
+                + notification.desktopEntry);
+            return;
+        }
+
+        // Add notification to all appgroups with appId
+        let notificationAdded = false;
+        this._appGroupList.forEach(appGroup => {
+            if (!appGroup.groupState || appGroup.groupState.willUnmount) return;
+            if (appId === appGroup.groupState.appId) {
+                appGroup.notifications.push(notification);
+                notificationAdded = true;
+                this.updateNotificationsBadge(appGroup);
+            }
+        });
+        if (notificationAdded) {
+            notification.appId = appId;
+            notification.connect('destroy',  () => this._removeNotification(notification));
+        }
+    }
+
+    _removeNotification(notification) {
+        this._appGroupList.forEach(appGroup => {
+            if (!appGroup.groupState || appGroup.groupState.willUnmount) return;
+            if (notification.appId === appGroup.groupState.appId) {
+                const index = appGroup.notifications.indexOf(notification);
+                if (index > -1) {
+                    appGroup.notifications.splice(index, 1)
+                    this.updateNotificationsBadge(appGroup);
+                }
+            }
+        });
+    }
+
+    // Called when an app is focused to remove all notifications from all instances of an app (with given appId)
+    removeAllNotifications(appId) {  
+        this._appGroupList.forEach(appGroup => {
+            if (!appGroup.groupState || appGroup.groupState.willUnmount) return;
+            if (appId === appGroup.groupState.appId) {
+                // iterate backwards due to in place array modification
+                for (let i = appGroup.notifications.length - 1; i >= 0; i--) {
+                    if (appGroup.notifications[i] && !appGroup.notifications[i]._destroyed) {
+                        appGroup.notifications[i].destroy(NotificationDestroyedReason.DISMISSED);
+                    }
+                }
+                appGroup.notifications = [];
+                this.updateNotificationsBadge(appGroup);
+            }
+        });
+    }
+
+    updateNotificationsBadge(appGroup) {
+        if (appGroup.notifications.length > 0) {
+            appGroup.notificationsBadgeLabel.text = appGroup.notifications.length.toString();
+            appGroup.notificationsBadge.show();
+        } else {
+            appGroup.notificationsBadge.hide();
+        }
+    }
+
+    // Called from AppGroup constructor so that we always have a list of all appgroups from all workspaces.
+    addAppGroup(newAppGroup) {
+        newAppGroup.notifications = [];
+
+        //Copy notifications from any existing appGroup with the same appId.
+        this._appGroupList.some(appGroup => {
+            if (!appGroup.groupState || appGroup.groupState.willUnmount) return false;
+            if (appGroup.groupState.appId === newAppGroup.groupState.appId) {
+                newAppGroup.notifications = appGroup.notifications.slice(); //shallow copy
+                return true;
+            }
+        })
+
+        this._appGroupList.push(newAppGroup);
+
+        //remove old deleted appgroups
+        this._appGroupList = this._appGroupList.filter(appGroup =>
+            appGroup !== null &&
+            appGroup !== undefined &&
+            appGroup.groupState &&
+            !appGroup.groupState.willUnmount);
+    }
+}
+
 class GroupedWindowListApplet extends Applet.Applet {
     constructor(metadata, orientation, panel_height, instance_id) {
         super(orientation, panel_height, instance_id);
@@ -191,6 +310,7 @@ class GroupedWindowListApplet extends Applet.Applet {
             appletReady: false,
             willUnmount: false,
             settings: {},
+            notifications: new Notifications(),
             homeDir: GLib.get_home_dir(),
             lastOverlayPreview: null,
             lastCycled: -1,
@@ -307,7 +427,6 @@ class GroupedWindowListApplet extends Applet.Applet {
             {key: 'super-num-hotkeys', value: 'SuperNumHotkeys', cb: this.bindAppKeys},
             {key: 'title-display', value: 'titleDisplay', cb: this.updateTitleDisplay},
             {key: 'launcher-animation-effect', value: 'launcherAnimationEffect', cb: null},
-            {key: 'number-display', value: 'numDisplay', cb: this.updateWindowNumberState},
             {key: 'enable-app-button-dragging', value: 'enableDragging', cb: this.draggableSettingChanged},
             {key: 'thumbnail-scroll-behavior', value: 'thumbnailScrollBehavior', cb: null},
             {key: 'show-thumbnails', value: 'showThumbs', cb: this.updateVerticalThumbnailState},
@@ -584,12 +703,6 @@ class GroupedWindowListApplet extends Applet.Applet {
         });
     }
 
-    updateWindowNumberState() {
-        this.workspaces.forEach(
-            workspace => workspace.calcAllWindowNumbers()
-        );
-    }
-
     updateAttentionState(display, window) {
         this.workspaces.forEach(
             workspace => workspace.updateAttentionState(display, window)

files/usr/share/cinnamon/applets/[email protected]/metadata.json

@@ -1,6 +1,6 @@
 {
     "name": "Grouped window list",
-    "role": "panellauncher, windowattentionhandler",
+    "role": "panellauncher, windowattentionhandler, notifications",
     "uuid": "[email protected]",
     "description": "Main Cinnamon window list with app grouping",
     "icon": "cs-windows",

files/usr/share/cinnamon/applets/[email protected]/settings-schema.json

@@ -50,7 +50,6 @@
       "keys": [
         "title-display",
         "launcher-animation-effect",
-        "number-display",
         "enable-app-button-dragging"
       ]
     },
@@ -184,11 +183,6 @@
       "Scale": 3
     }
   },
-  "number-display": {
-    "type": "checkbox",
-    "default": true,
-    "description": "Show window count numbers"
-  },
   "enable-app-button-dragging": {
     "type": "checkbox",
     "default": true,