messageList: Directly take an GioIcon as image for a message

There is pretty much no value gained by allowing to use any actor to display
an image, so just don't allow it since it simplifies the code and CSS.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3173>

data/theme/gnome-shell-sass/widgets/_message-list.scss

@@ -127,17 +127,16 @@
     margin-top: 0;
     spacing: $base_padding;
 
-    // icon container
+    // icon of the message
-    .message-icon-bin {
+    .message-icon {
-      &:ltr { padding-right:$base_padding;}
+      &:ltr { margin-right:$base_padding;}
-      &:rtl { padding-left:$base_padding;}
+      &:rtl { margin-left:$base_padding;}
 
       // icon size and color
-      > StIcon {
       icon-size: $base_icon_size * 3; // 48px
       -st-icon-style: symbolic;
 
-        .message-themed-icon {
+      &.message-themed-icon {
         border-radius: $forced_circular_radius; // is circular
         background-color: transparentize($fg_color, 0.8);
         icon-size: $base_icon_size;
@@ -145,7 +144,6 @@
         min-height: $base_icon_size * 3;
       }
     }
-    }
 
     // If the header isn't displayed we need more top margin
     &:first-child {
@@ -203,18 +201,13 @@
   & StIcon { icon-size: $base_icon_size; }
 }
 
+.media-message {
   // album-art
-.media-message-cover-icon {
+  .message-icon {
-  icon-size: $base_icon_size * 3 !important; // 48px
+    border-radius: $base_border_radius !important;
-  border-radius: $base_border_radius;
 
-  // when there is no artwork
+    &.message-themed-icon {
-  &.fallback {
-    color: darken($fg_color, 17%);
-    background-color: $bg_color;
-    border: 1px solid transparent;
-    border-radius: $base_border_radius;
       icon-size: $large_icon_size !important; // 32px
-    padding: ($base_padding * 2 + 2); // 16px
+    }
   }
 }

js/ui/calendar.js

@@ -774,7 +774,7 @@ class NotificationMessage extends MessageList.Message {
         this.notification = notification;
         this.datetime = notification.datetime;
 
-        this.setIcon(this._getIcon());
+        this.setIcon(notification.gicon);
 
         this.connect('close', () => {
             this._closed = true;
@@ -798,20 +798,9 @@ class NotificationMessage extends MessageList.Message {
         });
     }
 
-    _getIcon() {
-        const {gicon} = this.notification;
-        if (gicon) {
-            const styleClass =
-                gicon instanceof Gio.ThemedIcon ? 'message-themed-icon' : '';
-            return new St.Icon({gicon, styleClass});
-        } else {
-            return null;
-        }
-    }
-
     _onUpdated(n, _clear) {
         this.datetime = n.datetime;
-        this.setIcon(this._getIcon());
+        this.setIcon(n.gicon);
         this.setTitle(n.title);
         this.setBody(n.body);
         this.setUseBodyMarkup(n.useBodyMarkup);

js/ui/messageList.js

@@ -475,13 +475,13 @@ export const Message = GObject.registerClass({
         });
         vbox.add_child(this._actionBin);
 
-        this._iconBin = new St.Bin({
+        this._icon = new St.Icon({
-            style_class: 'message-icon-bin',
+            style_class: 'message-icon',
             y_expand: true,
             y_align: Clutter.ActorAlign.START,
             visible: false,
         });
-        hbox.add_child(this._iconBin);
+        hbox.add_child(this._icon);
 
         const contentBox = new St.BoxLayout({
             style_class: 'message-content',
@@ -523,9 +523,15 @@ export const Message = GObject.registerClass({
         this.emit('close');
     }
 
-    setIcon(actor) {
+    setIcon(icon) {
-        this._iconBin.child = actor;
+        this._icon.gicon = icon;
-        this._iconBin.visible = actor != null;
+
+        if (icon instanceof Gio.ThemedIcon)
+            this._icon.add_style_class_name('message-themed-icon');
+        else
+            this._icon.remove_style_class_name('message-themed-icon');
+
+        this._icon.visible = !!icon;
     }
 
     get datetime() {

js/ui/mpris.js

@@ -1,7 +1,6 @@
 import Gio from 'gi://Gio';
 import GObject from 'gi://GObject';
 import Shell from 'gi://Shell';
-import St from 'gi://St';
 import * as Signals from '../misc/signals.js';
 
 import * as Main from './main.js';
@@ -24,12 +23,10 @@ export const MediaMessage = GObject.registerClass(
 class MediaMessage extends MessageList.Message {
     _init(player) {
         super._init(player.source, '', '');
+        this.add_style_class_name('media-message');
 
         this._player = player;
 
-        this._icon = new St.Icon({style_class: 'media-message-cover-icon'});
-        this.setIcon(this._icon);
-
         this._prevButton = this.addMediaControl('media-skip-backward-symbolic',
             () => {
                 this._player.previous();
@@ -65,12 +62,10 @@ class MediaMessage extends MessageList.Message {
         this.setBody(this._player.trackArtists.join(', '));
 
         if (this._player.trackCoverUrl) {
-            let file = Gio.File.new_for_uri(this._player.trackCoverUrl);
+            const file = Gio.File.new_for_uri(this._player.trackCoverUrl);
-            this._icon.gicon = new Gio.FileIcon({file});
+            this.setIcon(new Gio.FileIcon({file}));
-            this._icon.remove_style_class_name('fallback');
         } else {
-            this._icon.icon_name = 'audio-x-generic-symbolic';
+            this.setIcon(new Gio.ThemedIcon({name: 'audio-x-generic-symbolic'}));
-            this._icon.add_style_class_name('fallback');
         }
 
         let isPlaying = this._player.status === 'Playing';