Use UserAvatarWidget to display user avatars

Replace duplicate custom code with a common widget.

https://bugzilla.gnome.org/show_bug.cgi?id=683137

data/theme/gnome-shell.css

@@ -1686,6 +1686,7 @@ StButton.popup-menu-item:insensitive {
     border-radius: 5px;
     width: 32px;
     height: 32px;
+    background-size: contain;
 }
 
 .end-session-dialog-shutdown-icon {
@@ -1885,6 +1886,14 @@ StButton.popup-menu-item:insensitive {
     color: #ff0000;
 }
 
+.polkit-dialog-user-icon {
+    border: 2px solid #8b8b8b;
+    border-radius: 5px;
+    background-size: contain;
+    width: 48px;
+    height: 48px;
+}
+
 /* Network Agent Dialog */
 
 .network-dialog-secret-table {

js/gdm/loginDialog.js

@@ -39,6 +39,7 @@ const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
 const Tweener = imports.ui.tweener;
+const UserMenu = imports.ui.userMenu;
 
 const _RESIZE_ANIMATION_TIME = 0.25;
 const _SCROLL_ANIMATION_TIME = 0.5;
@@ -96,8 +97,9 @@ const UserListItem = new Lang.Class({
                                      x_align: St.Align.START,
                                      x_fill: true });
 
-        this._iconBin = new St.Bin();
+        this._userAvatar = new UserMenu.UserAvatarWidget(this.user,
-        layout.add(this._iconBin);
+                                                         { styleClass: 'login-dialog-user-list-item-icon' });
+        layout.add(this._userAvatar.actor);
         let textLayout = new St.BoxLayout({ style_class: 'login-dialog-user-list-item-text-box',
                                             vertical:    true });
         layout.add(textLayout, { expand: true });
@@ -125,55 +127,10 @@ const UserListItem = new Lang.Class({
 
     _onUserChanged: function() {
         this._nameLabel.set_text(this.user.get_real_name());
-        this._updateIcon();
+        this._userAvatar.update();
         this._updateLoggedIn();
     },
 
-    _setIconFromFile: function(iconFile, styleClass) {
-        if (styleClass)
-            this._iconBin.set_style_class_name(styleClass);
-        this._iconBin.set_style(null);
-
-        this._iconBin.child = null;
-        if (iconFile) {
-            this._iconBin.show();
-            // We use background-image instead of, say, St.TextureCache
-            // so the theme writers can add a rounded frame around the image
-            // and so theme writers can pick the icon size.
-            this._iconBin.set_style('background-image: url("' + iconFile + '");' +
-                                    'background-size: contain;');
-        } else {
-            this._iconBin.hide();
-        }
-    },
-
-    _setIconFromName: function(iconName, styleClass) {
-        if (styleClass)
-            this._iconBin.set_style_class_name(styleClass);
-        this._iconBin.set_style(null);
-
-        if (iconName != null) {
-            let icon = new St.Icon();
-            icon.set_icon_name(iconName)
-
-            this._iconBin.child = icon;
-            this._iconBin.show();
-        } else {
-            this._iconBin.child = null;
-            this._iconBin.hide();
-        }
-    },
-
-    _updateIcon: function() {
-        let iconFileName = this.user.get_icon_file();
-        let gicon = null;
-
-        if (GLib.file_test(iconFileName, GLib.FileTest.EXISTS))
-            this._setIconFromFile(iconFileName, 'login-dialog-user-list-item-icon');
-        else
-            this._setIconFromName('avatar-default-symbolic', 'login-dialog-user-list-item-icon');
-    },
-
     syncStyleClasses: function() {
         this._updateLoggedIn();
 

js/ui/endSessionDialog.js

@@ -34,6 +34,7 @@ const GnomeSession = imports.misc.gnomeSession;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
 const Tweener = imports.ui.tweener;
+const UserMenu = imports.ui.userMenu;
 
 let _endSessionDialog = null;
 
@@ -303,40 +304,6 @@ const EndSessionDialog = new Lang.Class({
         this._user.disconnect(this._userChangedId);
     },
 
-    _setIconFromFile: function(iconFile, styleClass) {
-        if (styleClass)
-            this._iconBin.set_style_class_name(styleClass);
-        this._iconBin.set_style(null);
-
-        this._iconBin.child = null;
-        if (iconFile) {
-            this._iconBin.show();
-            this._iconBin.set_style('background-image: url("' + iconFile + '");' +
-                                    'background-size: contain;');
-        } else {
-            this._iconBin.hide();
-        }
-    },
-
-    _setIconFromName: function(iconName, styleClass) {
-        if (styleClass)
-            this._iconBin.set_style_class_name(styleClass);
-        this._iconBin.set_style(null);
-
-        if (iconName != null) {
-            let textureCache = St.TextureCache.get_default();
-            let icon = textureCache.load_icon_name(this._iconBin.get_theme_node(),
-                                                   iconName,
-                                                   _DIALOG_ICON_SIZE);
-
-            this._iconBin.child = icon;
-            this._iconBin.show();
-        } else {
-            this._iconBin.child = null;
-            this._iconBin.hide();
-        }
-    },
-
     _updateDescription: function() {
         if (this.state != ModalDialog.State.OPENING &&
             this.state != ModalDialog.State.OPENED)
@@ -385,16 +352,16 @@ const EndSessionDialog = new Lang.Class({
             return;
 
         let dialogContent = DialogContent[this._type];
-
+        if (dialogContent.iconName) {
-        if (this._user.is_loaded && !dialogContent.iconName) {
+            this._iconBin.child = new St.Icon({ icon_name: dialogContent.iconName,
-            let iconFile = this._user.get_icon_file();
+                                                icon_size: _DIALOG_ICON_SIZE,
-            if (GLib.file_test(iconFile, GLib.FileTest.EXISTS))
+                                                style_class: dialogContent.iconStyleClass });
-                this._setIconFromFile(iconFile, dialogContent.iconStyleClass);
+        } else {
-            else
+            let avatarWidget = new UserMenu.UserAvatarWidget(this._user,
-                this._setIconFromName('avatar-default-symbolic', dialogContent.iconStyleClass);
+                                                             { iconSize: _DIALOG_ICON_SIZE,
-        } else if (dialogContent.iconName) {
+                                                               styleClass: dialogContent.iconStyleClass });
-            this._setIconFromName(dialogContent.iconName,
+            this._iconBin.child = avatarWidget.actor;
-                                  dialogContent.iconStyleClass);
+            avatarWidget.update();
         }
 
         this._updateDescription();

js/ui/polkitAuthenticationAgent.js

@@ -35,6 +35,9 @@ const PolkitAgent = imports.gi.PolkitAgent;
 
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
+const UserMenu = imports.ui.userMenu;
+
+const DIALOG_ICON_SIZE = 48;
 
 const AuthenticationDialog = new Lang.Class({
     Name: 'AuthenticationDialog',
@@ -117,9 +120,11 @@ const AuthenticationDialog = new Lang.Class({
             let userBox = new St.BoxLayout({ style_class: 'polkit-dialog-user-layout',
                                              vertical: false });
             messageBox.add(userBox);
-            this._userIcon = new St.Icon();
+            this._userAvatar = new UserMenu.UserAvatarWidget(this._user,
-            this._userIcon.hide();
+                                                             { iconSize: DIALOG_ICON_SIZE,
-            userBox.add(this._userIcon,
+                                                               styleClass: 'polkit-dialog-user-icon' });
+            this._userAvatar.actor.hide();
+            userBox.add(this._userAvatar.actor,
                         { x_fill:  true,
                           y_fill:  false,
                           x_align: St.Align.END,
@@ -314,18 +319,8 @@ const AuthenticationDialog = new Lang.Class({
 
     _onUserChanged: function() {
         if (this._user.is_loaded) {
-            if (this._userIcon) {
+            this._userAvatar.update();
-                let iconFileName = this._user.get_icon_file();
+            this._userAvatar.actor.show();
-                let iconFile = Gio.file_new_for_path(iconFileName);
-                let icon;
-                if (iconFile.query_exists(null)) {
-                    icon = new Gio.FileIcon({file: iconFile});
-                } else {
-                    icon = new Gio.ThemedIcon({name: 'avatar-default-symbolic'});
-                }
-                this._userIcon.set_gicon (icon);
-                this._userIcon.show();
-            }
         }
     },
 

js/ui/unlockDialog.js

@@ -33,7 +33,7 @@ const UserWidget = new Lang.Class({
         this.actor = new St.BoxLayout({ style_class: 'unlock-dialog-user-name-container',
                                         vertical: false });
 
-        this._avatar = new UserMenu.UserAvatarWidget(user, { reactive: false });
+        this._avatar = new UserMenu.UserAvatarWidget(user);
         this.actor.add(this._avatar.actor,
                        { x_fill: true, y_fill: true });
 

js/ui/userMenu.js

@@ -48,9 +48,12 @@ const UserAvatarWidget = new Lang.Class({
 
     _init: function(user, params) {
         this._user = user;
-        params = Params.parse(params, { reactive: true });
+        params = Params.parse(params, { reactive: false,
+                                        iconSize: DIALOG_ICON_SIZE,
+                                        styleClass: 'status-chooser-user-icon' });
+        this._iconSize = params.iconSize;
 
-        this.actor = new St.Bin({ style_class: 'status-chooser-user-icon',
+        this.actor = new St.Bin({ style_class: params.styleClass,
                                   track_hover: params.reactive,
                                   reactive: params.reactive });
     },
@@ -67,7 +70,7 @@ const UserAvatarWidget = new Lang.Class({
         } else {
             this.actor.style = null;
             this.actor.child = new St.Icon({ icon_name: 'avatar-default-symbolic',
-                                             icon_size: DIALOG_ICON_SIZE });
+                                             icon_size: this._iconSize });
         }
     }
 });
@@ -143,7 +146,7 @@ const IMStatusChooserItem = new Lang.Class({
         this._userManager = AccountsService.UserManager.get_default();
         this._user = this._userManager.get_user(GLib.get_user_name());
 
-        this._avatar = new UserAvatarWidget(this._user);
+        this._avatar = new UserAvatarWidget(this._user, { reactive: true });
         this._iconBin = new St.Button({ child: this._avatar.actor });
         this.addActor(this._iconBin);