GWL: add notification badges to panel icons and remove "Show window count numbers" config option.

Remove 'notifications' extension role as it only allows for one extension.

Increase max notifications per source from 10 to 20.

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,8 @@ 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 MessageTray = imports.ui.messageTray;
 const {AppletSettings} = imports.ui.settings;
 const {SignalManager} = imports.misc.signalManager;
 const {throttle, unref, trySpawnCommandLine} = imports.misc.util;
@@ -161,6 +163,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 element deletion
+                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 +311,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 +428,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},
@@ -357,6 +477,7 @@ class GroupedWindowListApplet extends Applet.Applet {
         }
         this.bindAppKeys();
         this.state.set({appletReady: true});
+        MessageTray.extensionsHandlingNotifications++;
     }
 
     _updateState(initialUpdate) {
@@ -424,6 +545,7 @@ class GroupedWindowListApplet extends Applet.Applet {
         });
         this.settings.finalize();
         unref(this, RESERVE_KEYS);
+        MessageTray.extensionsHandlingNotifications--;
     }
 
     on_panel_icon_size_changed(iconSize) {
@@ -584,12 +706,6 @@ class GroupedWindowListApplet extends Applet.Applet {
         });
     }
 
-    updateWindowNumberState() {
-        this.workspaces.forEach(
-            workspace => workspace.calcAllWindowNumbers()
-        );
-    }
-
     updateAttentionState(display, window) {
         this.workspaces.forEach(
             workspace => workspace.updateAttentionState(display, window)