Use St.Icon for named icons

Switch from St.TextureCache.load_named_icon() to using St.Icon for named
icons. Along with the advantage of getting colorization right for symbolic
icons, this allows moving some icon sizes into the CSS.

In the CSS, the system status icon size is changed to be 1em (=16px for the
default font size), at the request of the artists. See bug 613448.

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

data/theme/gnome-shell.css

@@ -153,6 +153,10 @@ StTooltip {
     -slider-handle-radius: 0.5em;
 }
 
+.popup-menu-icon {
+    icon-size: 1em;
+}
+
 /* Switches (to be used in menus) */
 .toggle-switch {
     width: 4.5em;
@@ -240,6 +244,10 @@ StTooltip {
     spacing: 8px;
 }
 
+.system-status-icon {
+    icon-size: 1em;
+}
+
 /* Overview */
 
 .overview {
@@ -916,6 +924,10 @@ StTooltip {
     background:  rgba(128,128,128,0.7);
 }
 
+.notification-icon-button > StIcon {
+    icon-size: 36px;
+}
+
 .chat-received {
     background-gradient-direction: horizontal;
     background-gradient-start: rgba(255, 255, 255, 0.2);

js/ui/lookingGlass.js

@@ -678,9 +678,8 @@ LookingGlass.prototype = {
 
         let toolbar = new St.BoxLayout({ name: 'Toolbar' });
         this.actor.add_actor(toolbar);
-        let inspectIcon = St.TextureCache.get_default().load_icon_name('gtk-color-picker',
+        let inspectIcon = new St.Icon({ icon_name: 'gtk-color-picker',
-                                                                       St.IconType.SYMBOLIC,
+                                        icon_size: 24 });
-                                                                       24);
         toolbar.add_actor(inspectIcon);
         inspectIcon.reactive = true;
         inspectIcon.connect('button-press-event', Lang.bind(this, function () {

js/ui/messageTray.js

@@ -22,8 +22,6 @@ const SUMMARY_TIMEOUT = 1;
 const HIDE_TIMEOUT = 0.2;
 const LONGER_HIDE_TIMEOUT = 0.6;
 
-const BUTTON_ICON_SIZE = 36;
-
 const MAX_SOURCE_TITLE_WIDTH = 180;
 
 // We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD
@@ -349,7 +347,7 @@ Notification.prototype = {
 
         if (this._useActionIcons && Gtk.IconTheme.get_default().has_icon(id)) {
             button.add_style_class_name('notification-icon-button');
-            button.child = St.TextureCache.get_default().load_icon_name(id, St.IconType.SYMBOLIC, BUTTON_ICON_SIZE);
+            button.child = new St.Icon({ icon_name: id });
         } else {
             button.add_style_class_name('notification-button');
             button.label = label;

js/ui/notificationDaemon.js

@@ -150,7 +150,9 @@ NotificationDaemon.prototype = {
                 let uri = GLib.filename_to_uri(icon, null);
                 return textureCache.load_uri_async(uri, size, size);
             } else
-                return textureCache.load_icon_name(icon, St.IconType.FULLCOLOR, size);
+                return new St.Icon({ icon_name: icon,
+                                     icon_type: St.IconType.FULLCOLOR,
+                                     icon_size: size });
         } else if (hints.icon_data) {
             let [width, height, rowStride, hasAlpha,
                  bitsPerSample, nChannels, data] = hints.icon_data;
@@ -167,7 +169,9 @@ NotificationDaemon.prototype = {
                     stockIcon = 'gtk-dialog-error';
                     break;
             }
-            return textureCache.load_icon_name(stockIcon, St.IconType.FULLCOLOR, size);
+            return new St.Icon({ icon_name: stockIcon,
+                                 icon_type: St.IconType.FULLCOLOR,
+                                 icon_size: size });
         }
     },
 

js/ui/panelMenu.js

@@ -81,7 +81,8 @@ SystemStatusButton.prototype = {
         this._iconName = iconName;
         if (this._iconActor)
             this._iconActor.destroy();
-        this._iconActor = St.TextureCache.get_default().load_icon_name(this._iconName, St.IconType.SYMBOLIC, 24);
+        this._iconActor = new St.Icon({ icon_name: this._iconName,
+                                        style_class: 'system-status-icon' });
         this.actor.set_child(this._iconActor);
     },
 

js/ui/placeDisplay.js

@@ -158,7 +158,9 @@ PlacesManager.prototype = {
 
         this._connect = new PlaceInfo('special:connect', _("Connect to..."),
             function (size) {
-                return St.TextureCache.get_default().load_icon_name('applications-internet', St.IconType.FULLCOLOR, size);
+                return new St.Icon({ icon_name: 'applications-internet',
+                                     icon_type: St.IconType.FULLCOLOR,
+                                     icon_size: size });
             },
             function () {
                 new Shell.Process({ args: ['nautilus-connect-server'] }).run();
@@ -432,7 +434,9 @@ DashPlaceDisplayItem.prototype = {
         box.add(text, { expand: true, x_fill: true });
 
         if (info.isRemovable()) {
-            let removeIcon = St.TextureCache.get_default().load_icon_name ('media-eject', St.IconType.FULLCOLOR, PLACES_ICON_SIZE);
+            let removeIcon = new St.Icon({ icon_name: 'media-eject',
+                                           icon_type: St.IconType.FULLCOLOR,
+                                           icon_size: PLACES_ICON_SIZE });
             let removeIconBox = new St.Clickable({ child: removeIcon,
                                                    reactive: true });
             box.add(removeIconBox);

js/ui/popupMenu.js

@@ -566,22 +566,16 @@ PopupImageMenuItem.prototype = {
     _init: function (text, iconName) {
         PopupBaseMenuItem.prototype._init.call(this);
 
-        this._size = 16;
-
         this.label = new St.Label({ text: text });
         this.addActor(this.label);
-        this._imageBin = new St.Bin({ width: this._size, height: this._size });
+        this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
-        this.addActor(this._imageBin);
+        this.addActor(this._icon);
 
         this.setIcon(iconName);
     },
 
     setIcon: function(name) {
-        if (this._imageBin.child)
+        this._icon.icon_name = name;
-            this._imageBin.child.destroy();
-
-        let img = St.TextureCache.get_default().load_icon_name(name, St.IconType.SYMBOLIC, this._size);
-        this._imageBin.set_child(img);
     }
 };
 

js/ui/statusMenu.js

@@ -43,10 +43,10 @@ StatusMenuButton.prototype = {
         box.add(this._iconBox, { y_align: St.Align.MIDDLE, y_fill: false });
 
         let textureCache = St.TextureCache.get_default();
-        this._availableIcon = textureCache.load_icon_name('user-available', St.IconType.SYMBOLIC, 16);
+        this._availableIcon = new St.Icon({ icon_name: 'user-available', style_class: 'popup-menu-icon' });
-        this._busyIcon = textureCache.load_icon_name('user-busy', St.IconType.SYMBOLIC, 16);
+        this._busyIcon = new St.Icon({ icon_name: 'user-busy', style_class: 'popup-menu-icon' });
-        this._invisibleIcon = textureCache.load_icon_name('user-invisible', St.IconType.SYMBOLIC, 16);
+        this._invisibleIcon = new St.Icon({ icon_name: 'user-invisible', style_class: 'popup-menu-icon' });
-        this._idleIcon = textureCache.load_icon_name('user-idle', St.IconType.SYMBOLIC, 16);
+        this._idleIcon = new St.Icon({ icon_name: 'user-idle', style_class: 'popup-menu-icon' });
 
         this._presence.connect('StatusChanged', Lang.bind(this, this._updatePresenceIcon));
         this._presence.getStatus(Lang.bind(this, this._updatePresenceIcon));

js/ui/telepathyClient.js

@@ -347,7 +347,9 @@ ContactManager.prototype = {
             let uri = GLib.filename_to_uri(file, null);
             iconBox.child = textureCache.load_uri_async(uri, iconBox._size, iconBox._size);
         } else {
-            iconBox.child = textureCache.load_icon_name('stock_person', St.IconType.FULLCOLOR, iconBox._size);
+            iconBox.child = St.Icon({ icon_name: 'stock_person',
+                                      icon_type: St.IconType.FULLCOLOR,
+                                      icon_size: iconBox._size });
         }
     },