baseIcon: Stop using Shell.GenericContainer

Pretty much like the previous patches, this extends St.Bin. The
most interesting aspect of this patch is that most of the sizing
routines of the icons is now delegated to the actors and layout
managers, removing quite a bunch of code.

The 'spacing' theme property is now redirected to StBoxLayout's
spacing property. Also adjust the Dash code to stop forcing a
potentially invalid width in the first icon too.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/153

js/ui/appDisplay.js

@@ -1267,7 +1267,7 @@ var FolderIcon = new Lang.Class({
         this._popupInvalidated = false;
 
         this.icon = new IconGrid.BaseIcon('', { createIcon: this._createIcon.bind(this), setSizeManually: true });
-        this.actor.set_child(this.icon.actor);
+        this.actor.set_child(this.icon);
         this.actor.label_actor = this.icon.label;
 
         this.view = new FolderView();
@@ -1615,7 +1615,7 @@ var AppIcon = new Lang.Class({
         iconParams['createIcon'] = this._createIcon.bind(this);
         iconParams['setSizeManually'] = true;
         this.icon = new IconGrid.BaseIcon(app.get_name(), iconParams);
-        this._iconContainer.add_child(this.icon.actor);
+        this._iconContainer.add_child(this.icon);
 
         this.actor.label_actor = this.icon.label;
 

js/ui/dash.js

@@ -247,7 +247,7 @@ var ShowAppsIcon = new Lang.Class({
                                            { setSizeManually: true,
                                              showLabel: false,
                                              createIcon: this._createIcon.bind(this) });
-        this.toggleButton.add_actor(this.icon.actor);
+        this.toggleButton.add_actor(this.icon);
         this.toggleButton._delegate = this;
 
         this.setChild(this.toggleButton);
@@ -643,10 +643,10 @@ var Dash = new Lang.Class({
 
         // Enforce the current icon size during the size request
         firstIcon.icon.ensure_style();
-        let [currentWidth, currentHeight] = firstIcon.icon.get_size();
+        let [, currentHeight] = firstIcon.icon.get_size();
-        firstIcon.icon.set_size(this.iconSize * scaleFactor, this.iconSize * scaleFactor);
+        firstIcon.icon.set_height(this.iconSize * scaleFactor);
         [minHeight, natHeight] = firstButton.get_preferred_height(-1);
-        firstIcon.icon.set_size(currentWidth, currentHeight);
+        firstIcon.icon.set_height(currentHeight);
 
         // Subtract icon padding and box spacing from the available height
         availHeight -= iconChildren.length * (natHeight - this.iconSize * scaleFactor) +

js/ui/iconGrid.js

@@ -36,6 +36,7 @@ var APPICON_ANIMATION_OUT_TIME = 0.25;
 
 var BaseIcon = new Lang.Class({
     Name: 'BaseIcon',
+    Extends: St.Bin,
 
     _init(label, params) {
         params = Params.parse(params, { createIcon: null,
@@ -46,32 +47,26 @@ var BaseIcon = new Lang.Class({
         if (params.showLabel)
             styleClass += ' overview-icon-with-label';
 
-        this.actor = new St.Bin({ style_class: styleClass,
+        this.parent({ style_class: styleClass,
                       x_fill: true,
                       y_fill: true });
-        this.actor._delegate = this;
-        this.actor.connect('style-changed', this._onStyleChanged.bind(this));
-        this.actor.connect('destroy', this._onDestroy.bind(this));
 
-        this._spacing = 0;
+        this.actor = this;
 
-        let box = new Shell.GenericContainer();
+        this.connect('destroy', this._onDestroy.bind(this));
-        box.connect('allocate', this._allocate.bind(this));
+
-        box.connect('get-preferred-width',
+        this._box = new St.BoxLayout({ vertical: true });
-                    this._getPreferredWidth.bind(this));
+        this.set_child(this._box);
-        box.connect('get-preferred-height',
-                    this._getPreferredHeight.bind(this));
-        this.actor.set_child(box);
 
         this.iconSize = ICON_SIZE;
         this._iconBin = new St.Bin({ x_align: St.Align.MIDDLE,
                                      y_align: St.Align.MIDDLE });
 
-        box.add_actor(this._iconBin);
+        this._box.add_actor(this._iconBin);
 
         if (params.showLabel) {
             this.label = new St.Label({ text: label });
-            box.add_actor(this.label);
+            this._box.add_actor(this.label);
         } else {
             this.label = null;
         }
@@ -86,54 +81,9 @@ var BaseIcon = new Lang.Class({
         this._iconThemeChangedId = cache.connect('icon-theme-changed', this._onIconThemeChanged.bind(this));
     },
 
-    _allocate(actor, box, flags) {
+    vfunc_get_preferred_width(forHeight) {
-        let availWidth = box.x2 - box.x1;
+        // Return the actual height to keep the squared aspect
-        let availHeight = box.y2 - box.y1;
+        return this.get_preferred_height(-1);
-
-        let iconSize = availHeight;
-
-        let [iconMinHeight, iconNatHeight] = this._iconBin.get_preferred_height(-1);
-        let [iconMinWidth, iconNatWidth] = this._iconBin.get_preferred_width(-1);
-        let preferredHeight = iconNatHeight;
-
-        let childBox = new Clutter.ActorBox();
-
-        if (this.label) {
-            let [labelMinHeight, labelNatHeight] = this.label.get_preferred_height(-1);
-            preferredHeight += this._spacing + labelNatHeight;
-
-            let labelHeight = availHeight >= preferredHeight ? labelNatHeight
-                                                             : labelMinHeight;
-            iconSize -= this._spacing + labelHeight;
-
-            childBox.x1 = 0;
-            childBox.x2 = availWidth;
-            childBox.y1 = iconSize + this._spacing;
-            childBox.y2 = childBox.y1 + labelHeight;
-            this.label.allocate(childBox, flags);
-        }
-
-        childBox.x1 = Math.floor((availWidth - iconNatWidth) / 2);
-        childBox.y1 = Math.floor((iconSize - iconNatHeight) / 2);
-        childBox.x2 = childBox.x1 + iconNatWidth;
-        childBox.y2 = childBox.y1 + iconNatHeight;
-        this._iconBin.allocate(childBox, flags);
-    },
-
-    _getPreferredWidth(actor, forHeight, alloc) {
-        this._getPreferredHeight(actor, -1, alloc);
-    },
-
-    _getPreferredHeight(actor, forWidth, alloc) {
-        let [iconMinHeight, iconNatHeight] = this._iconBin.get_preferred_height(forWidth);
-        alloc.min_size = iconMinHeight;
-        alloc.natural_size = iconNatHeight;
-
-        if (this.label) {
-            let [labelMinHeight, labelNatHeight] = this.label.get_preferred_height(forWidth);
-            alloc.min_size += this._spacing + labelMinHeight;
-            alloc.natural_size += this._spacing + labelNatHeight;
-        }
     },
 
     // This can be overridden by a subclass, or by the createIcon
@@ -161,9 +111,8 @@ var BaseIcon = new Lang.Class({
         this._iconBin.child = this.icon;
     },
 
-    _onStyleChanged() {
+    vfunc_style_changed() {
-        let node = this.actor.get_theme_node();
+        let node = this.get_theme_node();
-        this._spacing = node.get_length('spacing');
 
         let size;
         if (this._setSizeManually) {
@@ -195,7 +144,7 @@ var BaseIcon = new Lang.Class({
         // Animate only the child instead of the entire actor, so the
         // styles like hover and running are not applied while
         // animating.
-        zoomOutActor(this.actor.child);
+        zoomOutActor(this.child);
     }
 });
 

js/ui/search.js

@@ -147,7 +147,7 @@ var GridSearchResult = new Lang.Class({
 
         this.icon = new IconGrid.BaseIcon(this.metaInfo['name'],
                                           { createIcon: this.metaInfo['createIcon'] });
-        let content = new St.Bin({ child: this.icon.actor });
+        let content = new St.Bin({ child: this.icon });
         this.actor.set_child(content);
         this.actor.label_actor = this.icon.label;
     }