userWidget.js: Fix updating the image when the user avatar changes.

Having the user's avatar picture set as a background-image is nice
because it allows us to round the image or add a border easily via
themes, but when the user chooses a new image, it's not so easy
to force the image to be updated, even though the StTextureCache
notices the change and drops it from its own cache.

This is mainly an issue when selecting a custom image from a user
directory or a photo - AccountsService copies these to /var/lib/
AccountsService/icons/<user>. So, the file may change but the
path does not, which keeps Cinnamon from updating it.

Monitor the texture cache and recreate the avatar image entirely
when it changes instead - this forces an entirely new actor and
theme context for it, and gets the proper updated image.

Author: mtwebster

js/ui/userWidget.js

@@ -14,86 +14,101 @@ const Params = imports.misc.params;
 var AVATAR_ICON_SIZE = 64;
 
 var Avatar = GObject.registerClass(
-class Avatar extends St.Bin {
+class Avatar extends Clutter.Actor {
     _init(user, params) {
         let themeContext = St.ThemeContext.get_for_stage(global.stage);
         params = Params.parse(params, {
             styleClass: 'user-icon',
             reactive: true,
-            track_hover: true,
             iconSize: AVATAR_ICON_SIZE,
         });
 
         super._init({
-            style_class: params.styleClass,
+            layout_manager: new Clutter.BinLayout(),
             reactive: params.reactive,
             width: params.iconSize * themeContext.scaleFactor,
             height: params.iconSize * themeContext.scaleFactor,
         });
 
-        this.connect('notify::hover', this._onHoverChanged.bind(this));
-
-        this.set_important(true);
+        this._styleClass = params.styleClass;
         this._iconSize = params.iconSize;
         this._user = user;
+        this._iconFile = null;
+        this._child = null;
 
-        this.bind_property('reactive', this, 'track-hover',
-            GObject.BindingFlags.SYNC_CREATE);
         this.bind_property('reactive', this, 'can-focus',
             GObject.BindingFlags.SYNC_CREATE);
 
         // Monitor the scaling factor to make sure we recreate the avatar when needed.
         this._scaleFactorChangeId =
             themeContext.connect('notify::scale-factor', this.update.bind(this));
 
+        // Monitor for changes to the icon file on disk
+        this._textureCache = St.TextureCache.get_default();
+        this._textureFileChangedId =
+            this._textureCache.connect('texture-file-changed', this._onTextureFileChanged.bind(this));
+
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
     _onHoverChanged() {
-        if (this.hover) {
-            if (this.child) {
-                this.child.add_style_class_name('highlighted');
-            }
-            else {
+        if (!this._child)
+            return;
+
+        if (this._child.hover) {
+            if (this._iconFile) {
                 let effect = new Clutter.BrightnessContrastEffect();
                 effect.set_brightness(0.2);
                 effect.set_contrast(0.3);
-                this.add_effect(effect);
+                this._child.add_effect(effect);
+            } else {
+                this._child.add_style_class_name('highlighted');
             }
-            this.add_accessible_state(Atk.StateType.FOCUSED);
+            this._child.add_accessible_state(Atk.StateType.FOCUSED);
         } else {
-            if (this.child) {
-                this.child.remove_style_class_name('highlighted');
+            if (this._iconFile) {
+                this._child.clear_effects();
+            } else {
+                this._child.remove_style_class_name('highlighted');
             }
-            else {
-                this.clear_effects();
-            }
-            this.remove_accessible_state(Atk.StateType.FOCUSED);
+            this._child.remove_accessible_state(Atk.StateType.FOCUSED);
         }
     }
 
-    vfunc_style_changed() {
-        super.vfunc_style_changed();
-
-        let node = this.get_theme_node();
+    _onStyleChanged() {
+        let node = this._child.get_theme_node();
         let [found, iconSize] = node.lookup_length('icon-size', false);
 
         if (!found)
             return;
 
         let themeContext = St.ThemeContext.get_for_stage(global.stage);
 
-        // node.lookup_length() returns a scaled value, but we
-        // need unscaled
-        this._iconSize = iconSize / themeContext.scaleFactor;
-        this.update();
+        // node.lookup_length() returns a scaled value, but we need unscaled
+        let newIconSize = iconSize / themeContext.scaleFactor;
+
+        if (newIconSize !== this._iconSize) {
+            this._iconSize = newIconSize;
+            this.update();
+        }
     }
 
     _onDestroy() {
         if (this._scaleFactorChangeId) {
             let themeContext = St.ThemeContext.get_for_stage(global.stage);
             themeContext.disconnect(this._scaleFactorChangeId);
-            delete this._scaleFactorChangeId;
+            this._scaleFactorChangeId = 0;
+        }
+
+        if (this._textureFileChangedId) {
+            this._textureCache.disconnect(this._textureFileChangedId);
+            this._textureFileChangedId = 0;
+        }
+    }
+
+    _onTextureFileChanged(cache, file) {
+        if (this._iconFile && file.get_path() === this._iconFile) {
+            this.update();
         }
     }
 
@@ -114,24 +129,49 @@ class Avatar extends St.Bin {
                 iconFile = null;
         }
 
+        this._iconFile = iconFile;
+
         let { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
         this.set_size(
             this._iconSize * scaleFactor,
             this._iconSize * scaleFactor);
 
+        // Remove old child
+        if (this._child) {
+            this._child.destroy();
+            this._child = null;
+        }
+
+        let size = this._iconSize * scaleFactor;
+
         if (iconFile) {
-            this.child = null;
-            this.add_style_class_name('user-avatar');
-            this.style = `
-                background-image: url("${iconFile}");
-                background-size: cover;`;
+            this._child = new St.Bin({
+                style_class: `${this._styleClass} user-avatar`,
+                reactive: this.reactive,
+                track_hover: this.reactive,
+                width: size,
+                height: size,
+                style: `background-image: url("${iconFile}"); background-size: cover;`,
+            });
         } else {
-            this.style = null;
-            this.child = new St.Icon({
-                icon_name: 'xsi-avatar-default-symbolic',
-                icon_size: this._iconSize,
+            this._child = new St.Bin({
+                style_class: this._styleClass,
+                reactive: this.reactive,
+                track_hover: this.reactive,
+                width: size,
+                height: size,
+                child: new St.Icon({
+                    icon_name: 'xsi-avatar-default-symbolic',
+                    icon_size: this._iconSize,
+                }),
             });
         }
+
+        this._child.set_important(true);
+        this._child.connect('notify::hover', this._onHoverChanged.bind(this));
+        this._child.connect('style-changed', this._onStyleChanged.bind(this));
+
+        this.add_child(this._child);
     }
 });
 
@@ -155,7 +195,7 @@ class UserWidget extends St.BoxLayout {
 
         this._avatar = new Avatar(user);
         this._avatar.x_align = Clutter.ActorAlign.CENTER;
-        this.add(this._avatar, { x_fill: false });
+        this.add_child(this._avatar);
 
         this._label = new St.Label({ style_class: 'user-widget-label' });
         this._label.y_align = Clutter.ActorAlign.CENTER;