notification: Limit max height and enable vscroll

Disable vfade, looks a bit bad with the default Mint-Y theme in the notification component.

Author: anaximeno

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

@@ -19,7 +19,10 @@ $notification_width: 34em;
   &-body { spacing: $base_padding; }
   &-actions { spacing: $base_padding * 2; }
 
-  &-scrollview {}
+  &-scrollview {
+    max-height: $notification_width * 0.75;
+    min-height: $notification_width * 0.25;
+  }
 
   StEntry {}
 }

files/usr/share/cinnamon/applets/notifications@cinnamon.org/applet.js

@@ -118,6 +118,14 @@ class CinnamonNotificationsApplet extends Applet.TextIconApplet {
             this.menu.passEvents = false;
         }));
 
+        let adjustment = this.scrollview.vscroll.adjustment;
+        adjustment.connect('changed', () => {
+            let needsScroll = adjustment.upper > adjustment.page_size;
+            for (let i = 0; i < this.notifications.length; i++) {
+                this.notifications[i].setMouseScrolling(!needsScroll);
+            }
+        });
+
         // Alternative tray icons.
         this._crit_icon = new St.Icon({icon_name: 'critical-notif', icon_type: St.IconType.SYMBOLIC, reactive: true, track_hover: true, style_class: 'system-status-icon' });
         this._alt_crit_icon = new St.Icon({icon_name: 'alt-critical-notif', icon_type: St.IconType.SYMBOLIC, reactive: true, track_hover: true, style_class: 'system-status-icon' });

js/ui/messageTray.js

@@ -392,32 +392,20 @@ var Notification = class Notification {
     _setBodyArea(text, allowMarkup) {
         if (text) {
             if (!this._scrollArea) {
-                /* FIXME: vscroll should be enabled
-                 * -vfade covers too much for this size of scrollable
-                 * -scrollview min-height is broken inside tray with a scrollview
-                 *
-                 * TODO: when scrollable:
-                 *
-                 * applet connects to this signal to enable captured-event passthru so you can grab the scrollbar:
-                 * let vscroll = this._scrollArea.get_vscroll_bar();
-                 * vscroll.connect('scroll-start', () => { this.emit('scrolling-changed', true) });
-                 * vscroll.connect('scroll-stop', () => { this.emit('scrolling-changed', false) });
-                 *
-                 * `enable_mouse_scrolling` makes it difficult to scroll when there are many notifications
-                 * in the tray because most of the area is these smaller scrollviews which capture the event.
-                 * ideally, this should only be disabled when the notification is in the tray and there are
-                 * many notifications.
-                 */
                 this._scrollArea = new St.ScrollView({
                     name: 'notification-scrollview',
-                    vscrollbar_policy: St.PolicyType.NEVER,
+                    vscrollbar_policy: St.PolicyType.AUTOMATIC,
                     hscrollbar_policy: St.PolicyType.NEVER,
-                    enable_mouse_scrolling: false/*,
-                                                       style_class: 'vfade'*/ });
+                    enable_mouse_scrolling: true,
+                    //style_class: 'vfade' // Looks a bit bad with some themes
+                });
 
                 this._table.add(this._scrollArea, {
                     row: 1,
-                    col: 2
+                    col: 2,
+                    y_expand: false,
+                    y_fill: false,
+                    y_align: St.Align.START
                 });
 
                 let content = new St.BoxLayout({
@@ -463,6 +451,12 @@ var Notification = class Notification {
             adjustment.value = adjustment.upper;
     }
 
+    setMouseScrolling(enabled) {
+        if (this._scrollArea) {
+            this._scrollArea.enable_mouse_scrolling = enabled;
+        }
+    }
+
     _updateLayout() {
         if (this._imageBin || this._scrollArea || this._actionArea) {
             this._table.add_style_class_name('multi-line-notification');
@@ -504,7 +498,8 @@ var Notification = class Notification {
             x_expand: false,
             y_expand: false,
             x_fill: false,
-            y_fill: false
+            y_fill: false,
+            y_align: St.Align.START
         });
         this._updateLayout();
     }