GWL: add notification badges

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

GWL: move window count badge from top left to bottom left of panel icon.

Remove 'notifications' extension role as it only allows for one extension. Use extensionsHandlingNotifications variable in messageTray.js for applets to increment/decrement when added/removed from panel instead.

Ensure notificationDaemon can identify source of notifications from flatpak apps.

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,7 @@ const Applet = imports.ui.applet;
 const Cinnamon = imports.gi.Cinnamon;
 const Main = imports.ui.main;
 const DND = imports.ui.dnd;
+const MessageTray = imports.ui.messageTray;
 const {AppletSettings} = imports.ui.settings;
 const {SignalManager} = imports.misc.signalManager;
 const {throttle, unref, trySpawnCommandLine} = imports.misc.util;
@@ -161,6 +162,83 @@ 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) {
+        let appId = notification.source.app?.get_id();
+      
+        if (!appId) {
+            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);
+                }
+            }
+        });
+    }
+
+    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 +269,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 +386,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 +435,7 @@ class GroupedWindowListApplet extends Applet.Applet {
         }
         this.bindAppKeys();
         this.state.set({appletReady: true});
+        MessageTray.extensionsHandlingNotifications++;
     }
 
     _updateState(initialUpdate) {
@@ -424,6 +503,7 @@ class GroupedWindowListApplet extends Applet.Applet {
         });
         this.settings.finalize();
         unref(this, RESERVE_KEYS);
+        MessageTray.extensionsHandlingNotifications--;
     }
 
     on_panel_icon_size_changed(iconSize) {
@@ -584,12 +664,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]/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,

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

@@ -7,6 +7,7 @@ const PopupMenu = imports.ui.popupMenu;
 const St = imports.gi.St;
 const Mainloop = imports.mainloop;
 const Urgency = imports.ui.messageTray.Urgency;
+const MessageTray = imports.ui.messageTray;
 const NotificationDestroyedReason = imports.ui.messageTray.NotificationDestroyedReason;
 const Settings = imports.ui.settings;
 const Gettext = imports.gettext.domain("cinnamon-applets");
@@ -53,6 +54,10 @@ class CinnamonNotificationsApplet extends Applet.TextIconApplet {
     on_applet_removed_from_panel () {
         Main.keybindingManager.removeHotKey("notification-open-" + this.instance_id);
         Main.keybindingManager.removeHotKey("notification-clear-" + this.instance_id);
+        MessageTray.extensionsHandlingNotifications--;
+        if (MessageTray.extensionsHandlingNotifications === 0) {
+            this._clear_all();
+        }
     }
 
     _openMenu() {
@@ -244,6 +249,7 @@ class CinnamonNotificationsApplet extends Applet.TextIconApplet {
 
     on_applet_added_to_panel() {
         this.on_orientation_changed(this._orientation);
+        MessageTray.extensionsHandlingNotifications++;
     }
 
     on_orientation_changed (orientation) {

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

@@ -2,6 +2,5 @@
 "uuid": "[email protected]",
 "name": "Notifications",
 "description": "Click to display and manage system notifications",
-"role": "notifications",
 "icon": "cs-notifications"
 }