[gnome-shell/wip/sass: 28/50] panelMenu: Use a normal St.Bin to allow styling

[Jakub Steiner <jimmac src gnome org>]

commit 5a82771ed2aa0e818f8a66db44350f555fa98753
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Oct 28 10:56:46 2014 +0100

    panelMenu: Use a normal St.Bin to allow styling
    
    Currently we don't add some style to ButtonBox like padding etc, we add
    it programatically taking into account minimum padding and natural
    padding. The thing is that with natural padding it works as expected
    even for low resolutions.
    
    As a design request, we need to style from css, and since the current
    ButtonBox class doesn't add any worth functionality, change that and use
    a simple St.Bin that allow normal styling.

 data/theme/_common.scss    |    3 +-
 data/theme/gnome-shell.css |    3 +-
 js/ui/panel.js             |   15 ++-----
 js/ui/panelMenu.js         |   90 +++-----------------------------------------
 4 files changed, 12 insertions(+), 99 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index f42aee5..5bacd0b 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -265,8 +265,7 @@ StScrollBar {
   }
 
   .panel-button {
-    -natural-hpadding: 12px;
-    -minimum-hpadding: 6px;
+    padding: 0px 12px;
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 9e5116f..f5e530e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1201,8 +1201,7 @@ StScrollBar {
       -panel-corner-background-color: transparent;
       -panel-corner-border-color: transparent; }
   #panel .panel-button {
-    -natural-hpadding: 12px;
-    -minimum-hpadding: 6px;
+    padding: 0px 12px;
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms; }
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 87930aa..9871b49 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -820,7 +820,7 @@ const AggregateMenu = new Lang.Class({
         this.menu.actor.add_style_class_name('aggregate-menu');
 
         this._indicators = new St.BoxLayout({ style_class: 'panel-status-indicators-box' });
-        this.actor.add_child(this._indicators);
+        this.actor.add_actor(this._indicators);
 
         if (Config.HAVE_NETWORKMANAGER) {
             this._network = new imports.ui.status.network.NMApplet();
@@ -1106,7 +1106,7 @@ const Panel = new Lang.Class({
                 continue;
             if (indicator.menu)
                 indicator.menu.close();
-            indicator.container.hide();
+            indicator.actor.hide();
         }
     },
 
@@ -1138,21 +1138,14 @@ const Panel = new Lang.Class({
     },
 
     _addToPanelBox: function(role, indicator, position, box) {
-        let container = indicator.container;
-        container.show();
-
-        let parent = container.get_parent();
-        if (parent)
-            parent.remove_actor(container);
-
-        box.insert_child_at_index(container, position);
+        indicator.actor.show();
+        box.insert_child_at_index(indicator.actor, position);
         if (indicator.menu)
             this.menuManager.addMenu(indicator.menu);
         this.statusArea[role] = indicator;
         let destroyId = indicator.connect('destroy', Lang.bind(this, function(emitter) {
             delete this.statusArea[role];
             emitter.disconnect(destroyId);
-            container.destroy();
         }));
     },
 
diff --git a/js/ui/panelMenu.js b/js/ui/panelMenu.js
index 29acd29..9571a67 100644
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -13,92 +13,16 @@ const Main = imports.ui.main;
 const Params = imports.misc.params;
 const PopupMenu = imports.ui.popupMenu;
 
-const ButtonBox = new Lang.Class({
-    Name: 'ButtonBox',
-
-    _init: function(params) {
-        params = Params.parse(params, { style_class: 'panel-button' }, true);
-        this.actor = new Shell.GenericContainer(params);
-        this.actor._delegate = this;
-
-        this.container = new St.Bin({ y_fill: true,
-                                      x_fill: true,
-                                      child: this.actor });
-
-        this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
-        this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
-        this.actor.connect('allocate', Lang.bind(this, this._allocate));
-
-        this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
-        this._minHPadding = this._natHPadding = 0.0;
-    },
-
-    _onStyleChanged: function(actor) {
-        let themeNode = actor.get_theme_node();
-
-        this._minHPadding = themeNode.get_length('-minimum-hpadding');
-        this._natHPadding = themeNode.get_length('-natural-hpadding');
-    },
-
-    _getPreferredWidth: function(actor, forHeight, alloc) {
-        let child = actor.get_first_child();
-
-        if (child) {
-            [alloc.min_size, alloc.natural_size] = child.get_preferred_width(-1);
-        } else {
-            alloc.min_size = alloc.natural_size = 0;
-        }
-
-        alloc.min_size += 2 * this._minHPadding;
-        alloc.natural_size += 2 * this._natHPadding;
-    },
-
-    _getPreferredHeight: function(actor, forWidth, alloc) {
-        let child = actor.get_first_child();
-
-        if (child) {
-            [alloc.min_size, alloc.natural_size] = child.get_preferred_height(-1);
-        } else {
-            alloc.min_size = alloc.natural_size = 0;
-        }
-    },
-
-    _allocate: function(actor, box, flags) {
-        let child = actor.get_first_child();
-        if (!child)
-            return;
-
-        let [minWidth, natWidth] = child.get_preferred_width(-1);
-
-        let availWidth = box.x2 - box.x1;
-        let availHeight = box.y2 - box.y1;
-
-        let childBox = new Clutter.ActorBox();
-        if (natWidth + 2 * this._natHPadding <= availWidth) {
-            childBox.x1 = this._natHPadding;
-            childBox.x2 = availWidth - this._natHPadding;
-        } else {
-            childBox.x1 = this._minHPadding;
-            childBox.x2 = availWidth - this._minHPadding;
-        }
-
-        childBox.y1 = 0;
-        childBox.y2 = availHeight;
-
-        child.allocate(childBox, flags);
-    },
-});
-
 const Button = new Lang.Class({
     Name: 'PanelMenuButton',
-    Extends: ButtonBox,
 
     _init: function(menuAlignment, nameText, dontCreateMenu) {
-        this.parent({ reactive: true,
-                      can_focus: true,
-                      track_hover: true,
-                      accessible_name: nameText ? nameText : "",
-                      accessible_role: Atk.Role.MENU });
+        this.actor = new St.Bin({ style_class: 'panel-button',
+                                  reactive: true,
+                                  can_focus: true,
+                                  track_hover: true,
+                                  accessible_name: nameText ? nameText : "",
+                                  accessible_role: Atk.Role.MENU });
 
         this.actor.connect('event', Lang.bind(this, this._onEvent));
         this.actor.connect('notify::visible', Lang.bind(this, this._onVisibilityChanged));
@@ -177,8 +101,6 @@ const Button = new Lang.Class({
     },
 
     destroy: function() {
-        this.actor._delegate = null;
-
         if (this.menu)
             this.menu.destroy();
         this.actor.destroy();