messageTray: Add notification close button inside notification

And remove the old close button outside it.

data/theme/gnome-shell.css

@@ -1540,6 +1540,11 @@ StScrollBar StButton#vhandle:active {
     spacing: 8px;
 }
 
+.notification-close-button {
+    padding: 8px;
+    border-radius: 4px;
+}
+
 .notification-action-area {
     padding: 8px;
 }
@@ -1555,7 +1560,8 @@ StScrollBar StButton#vhandle:active {
 }
 
 .notification-main-button:hover,
-.notification-button:hover {
+.notification-button:hover,
+.notification-close-button:hover {
     background: rgba(100,100,100,0.9);
 }
 

js/ui/messageTray.js

@@ -493,12 +493,12 @@ const Notification = new Lang.Class({
         //      ,. this._iconBin         ,. this._titleLabel
         //      |        ,-- this._second|ryIconBin
         // .----|--------|---------------|-----------.
-        // | .----. | .----.-----------------------. |
+        // | .----. | .----.-------------------. | X |
-        // | |    | | |    |                       |--- this._titleBox
+        // | |    | | |    |                   |-|----- this._titleBox
-        // | '....' | '....'.......................' |
+        // | '....' | '....'...................' |   |
-        // |        |                                |- this._hbox
+        // |        |                            |   |- this._hbox
-        // |        |        this._bodyBin           |-.
+        // |        |        this._bodyBin       |   |-.
-        // |________|________________________________| |- this.actor
+        // |________|____________________________|___| |- this.actor
         // | this._actionArea                        |-'
         // |_________________________________________|
         // | this._buttonBox                         |
@@ -516,7 +516,7 @@ const Notification = new Lang.Class({
         this._mainButton.connect('clicked', Lang.bind(this, this._onClicked));
         this.actor.add_child(this._mainButton);
 
-        // Separates the icon and title/body
+        // Separates the icon, title/body and close button
         this._hbox = new St.BoxLayout({ style_class: 'notification-main-content' });
         this._mainButton.child = this._hbox;
 
@@ -525,8 +525,17 @@ const Notification = new Lang.Class({
 
         this._titleBodyBox = new St.BoxLayout({ style_class: 'notification-title-body-box',
                                                 vertical: true });
+        this._titleBodyBox.set_x_expand(true);
         this._hbox.add_child(this._titleBodyBox);
 
+        this._closeButton = new St.Button({ style_class: 'notification-close-button',
+                                            can_focus: true });
+        this._closeButton.set_y_align(Clutter.ActorAlign.START);
+        this._closeButton.set_y_expand(true);
+        this._closeButton.child = new St.Icon({ icon_name: 'window-close-symbolic', icon_size: 16 });
+        this._closeButton.connect('clicked', Lang.bind(this, this._onCloseClicked));
+        this._hbox.add_child(this._closeButton);
+
         this._titleBox = new St.BoxLayout({ style_class: 'notification-title-box',
                                             x_expand: true, x_align: Clutter.ActorAlign.START });
         this._secondaryIconBin = new St.Bin();
@@ -803,7 +812,6 @@ const Notification = new Lang.Class({
     expand: function(animate) {
         this.expanded = true;
         this._sync();
-        this.emit('expanded');
     },
 
     collapseCompleted: function() {
@@ -820,6 +828,10 @@ const Notification = new Lang.Class({
         this.destroy();
     },
 
+    _onCloseClicked: function() {
+        this.destroy();
+    },
+
     _onDestroy: function() {
         if (this._destroyed)
             return;
@@ -1522,11 +1534,6 @@ const MessageTray = new Lang.Class({
         this._clickedSummaryItemMouseButton = -1;
         this._clickedSummaryItemAllocationChangedId = 0;
 
-        this._closeButton = Util.makeCloseButton();
-        this._closeButton.hide();
-        this._closeButton.connect('clicked', Lang.bind(this, this._closeNotification));
-        this._notificationWidget.add_actor(this._closeButton);
-
         this._userActiveWhileNotificationShown = false;
 
         this.idleMonitor = Meta.IdleMonitor.get_core();
@@ -1557,7 +1564,6 @@ const MessageTray = new Lang.Class({
         this._keyboardVisible = false;
         this._notificationState = State.HIDDEN;
         this._notificationTimeoutId = 0;
-        this._notificationExpandedId = 0;
         this._summaryBoxPointerState = State.HIDDEN;
         this._summaryBoxPointerTimeoutId = 0;
         this._desktopCloneState = State.HIDDEN;
@@ -1581,7 +1587,6 @@ const MessageTray = new Lang.Class({
         Main.layoutManager.trayBox.add_actor(this._notificationWidget);
         Main.layoutManager.trackChrome(this.actor);
         Main.layoutManager.trackChrome(this._notificationWidget);
-        Main.layoutManager.trackChrome(this._closeButton);
 
         global.screen.connect('in-fullscreen-changed', Lang.bind(this, this._updateState));
         Main.layoutManager.connect('hot-corners-changed', Lang.bind(this, this._hotCornersChanged));
@@ -1733,14 +1738,6 @@ const MessageTray = new Lang.Class({
         this._updateState();
     },
 
-    _closeNotification: function() {
-        if (this._notificationState == State.SHOWN) {
-            this._closeButton.hide();
-            this._notification.emit('done-displaying');
-            this._notification.destroy();
-        }
-    },
-
     contains: function(source) {
         return this._sources.has(source);
     },
@@ -2397,10 +2394,6 @@ const MessageTray = new Lang.Class({
     _hideNotification: function(animate) {
         this._notificationFocusGrabber.ungrabFocus();
 
-        if (this._notificationExpandedId) {
-            this._notification.disconnect(this._notificationExpandedId);
-            this._notificationExpandedId = 0;
-        }
         if (this._notificationClickedId) {
             this._notification.disconnect(this._notificationClickedId);
             this._notificationClickedId = 0;
@@ -2436,7 +2429,6 @@ const MessageTray = new Lang.Class({
         if (notification.isTransient)
             notification.destroy(NotificationDestroyedReason.EXPIRED);
 
-        this._closeButton.hide();
         this._pointerInNotification = false;
         this._notificationRemoved = false;
         this._notificationBin.child = null;
@@ -2451,10 +2443,6 @@ const MessageTray = new Lang.Class({
     },
 
     _expandNotification: function(autoExpanding) {
-        if (!this._notificationExpandedId)
-            this._notificationExpandedId =
-                this._notification.connect('expanded',
-                                           Lang.bind(this, this._onNotificationExpanded));
         // Don't animate changes in notifications that are auto-expanding.
         this._notification.expand(!autoExpanding);
 
@@ -2463,10 +2451,6 @@ const MessageTray = new Lang.Class({
             this._ensureNotificationFocused();
     },
 
-    _onNotificationExpanded: function() {
-        this._closeButton.show();
-    },
-
     _ensureNotificationFocused: function() {
         this._notificationFocusGrabber.grabFocus();
     },