userWidget: Back to using the theme to load the face image.

This only works properly when the image is set as a background
as part of the theme, as some themes want to frame the image.

Go back to using the original file picker for an image - simple
icons don't really look very nice as avatar pics, and that was
the only reason to involve the xapp icon picker.

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

@@ -21,11 +21,10 @@ class CinnamonUserApplet extends Applet.TextApplet {
         this.setAllowedLayout(Applet.AllowedLayout.BOTH);
 
         this._panel_icon_box = new St.Bin(); // https://developer.gnome.org/st/stable/StBin.htm
-        this._panel_icon_box.set_fill(true, true);
         this._panel_icon_box.set_alignment(St.Align.MIDDLE, St.Align.MIDDLE);
         this.actor.insert_child_at_index(this._panel_icon_box, 0);
 
-        this._panel_icon = null;
+        this._panel_avatar = null;
 
         this._session = new GnomeSession.SessionManager();
         this._screenSaverProxy = new ScreenSaver.ScreenSaverProxy();
@@ -150,8 +149,10 @@ class CinnamonUserApplet extends Applet.TextApplet {
     _updateLabel() {
         if (this.disp_name) {
             this.set_applet_label(this._user.get_real_name());
+            this._layoutBin.show();
         } else {
             this.set_applet_label("");
+            this._layoutBin.hide();
         }
     }
 
@@ -171,22 +172,29 @@ class CinnamonUserApplet extends Applet.TextApplet {
 
     _updatePanelIcon() {
         if (this.display_image) {
-            this._panel_icon_box.show();
-
-            if (this._panel_icon == null) {
-                this._panel_icon = new UserWidget.Avatar(this._user, { iconSize: this.getPanelIconSize() });
-                this._panel_icon_box.set_child(this._panel_icon);
-                this._panel_icon.update();
-                this._panel_icon.show();
-            } else {
-                this._panel_icon.resize(this.getPanelIconSize())
-                this._panel_icon.update();
+            if (this._panel_avatar == null) {
+                this._panel_avatar = new UserWidget.Avatar(this._user, { iconSize: this.getPanelIconSize(St.IconType.FULLCOLOR) });
             }
+            this._panel_icon_box.set_child(this._panel_avatar);
+            this._panel_avatar.update();
+            this._panel_avatar.show();
         } else {
-            this._panel_icon_box.hide();
+            this._panel_icon = new St.Icon({
+                icon_name: 'avatar-default-symbolic',
+                icon_size: this.getPanelIconSize(),
+            });
+            this._panel_icon_box.set_child(this._panel_icon);
         }
     }
 
+    on_panel_height_changed() {
+        this._updatePanelIcon();
+    }
+
+    on_panel_icon_size_changed() {
+        this._updatePanelIcon();
+    }
+
     on_applet_removed_from_panel() {
         this.settings.finalize();
     }

files/usr/share/cinnamon/cinnamon-settings/modules/cs_user.py

@@ -175,11 +175,33 @@ def _on_face_photo_menuitem_activated(self, menuitem):
 
 
     def _on_face_browse_menuitem_activated(self, menuitem):
-        dialog = XApp.IconChooserDialog()
+        dialog = Gtk.FileChooserDialog(None, None, Gtk.FileChooserAction.OPEN, (Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL, Gtk.STOCK_OPEN, Gtk.ResponseType.OK))
+        dialog.set_current_folder(self.accountService.get_home_dir())
+        filter = Gtk.FileFilter()
+        filter.set_name(_("Images"))
+        filter.add_mime_type("image/*")
+        dialog.add_filter(filter)
+
+        box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+        self.frame = Gtk.Frame(visible=False, no_show_all=True)
+        preview = Gtk.Image(visible=True)
+
+        box.pack_start(self.frame, False, False, 0)
+        self.frame.add(preview)
+        dialog.set_preview_widget(box)
+        dialog.set_preview_widget_active(True)
+        dialog.set_use_preview_label(False)
+
+        box.set_margin_end(12)
+        box.set_margin_top(12)
+        box.set_size_request(128, -1)
+
+        dialog.connect("update-preview", self.update_preview_cb, preview)
+
         response = dialog.run()
 
         if response == Gtk.ResponseType.OK:
-            string = dialog.get_icon_string()
+            string = dialog.get_filename()
             print(string)
             if string.startswith("/"):
                 path = string

js/ui/userWidget.js

@@ -7,7 +7,6 @@ const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
 const St = imports.gi.St;
-const Gtk = imports.gi.Gtk;
 
 const Params = imports.misc.params;
 
@@ -75,60 +74,37 @@ class Avatar extends St.Bin {
         this.reactive = sensitive;
     }
 
-    getDefaultIcon() {
-        const icon = new St.Icon({
-            icon_name: "avatar-default-symbolic",
-            icon_size: this._iconSize,
-            icon_type: St.IconType.SYMBOLIC,
-            reactive: true,
-            track_hover: true,
-            style_class: 'user-avatar'
-        });
-
-        return icon;
+    setSize(size) {
+        this._iconSize = size;
+        this.update();
     }
 
     update() {
-        let icon_file = null;
+        let iconFile = null;
         if (this._user) {
-            const icon_file_name = this._user.get_icon_file();
-            const basename = GLib.path_get_basename(icon_file_name);
-
-            try {
-                const maybe_icon_name = basename.substr(0, basename.lastIndexOf("."));
-                const theme = Gtk.IconTheme.get_default();
-                if (theme.has_icon(maybe_icon_name)) {
-                    const icon_type = maybe_icon_name.endsWith("symbolic") ? St.IconType.SYMBOLIC : St.IconType.FULLCOLOR;
-                    this.child = new St.Icon({ icon_name: maybe_icon_name, icon_size: this._iconSize, icon_type: icon_type });
-                    return;
-                }
-            } catch (e) {
-                global.logError(e);
-            }
-
-            const icon_loader_handle = St.TextureCache.get_default().load_image_from_file_async(
-                icon_file_name,
-                this._iconSize, this._iconSize,
-                (cache, handle, actor) => {
-                    if (icon_loader_handle === handle) {
-                        if (actor.get_content() === null) {
-                            this.child = this.getDefaultIcon();
-                        } else {
-                            this.child = actor;
-                        }
-                    }
-                }
-            );
-        } else {
-            this.child = this.getDefaultIcon();
+            iconFile = this._user.get_icon_file();
+            if (iconFile && !GLib.file_test(iconFile, GLib.FileTest.EXISTS))
+                iconFile = null;
         }
-    }
 
-    resize(size) {
-        if (size === this._iconSize)
-            return;
-
-        this._iconSize = size;
+        let { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
+        this.set_size(
+            this._iconSize * scaleFactor,
+            this._iconSize * scaleFactor);
+
+        if (iconFile) {
+            this.child = null;
+            this.add_style_class_name('user-avatar');
+            this.style = `
+                background-image: url("${iconFile}");
+                background-size: cover;`;
+        } else {
+            this.style = null;
+            this.child = new St.Icon({
+                icon_name: 'avatar-default-symbolic',
+                icon_size: this._iconSize,
+            });
+        }
     }
 });