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

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit 86ee6ae2341c06ab320dc179d8e238a19d031435
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.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=744680

 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 c50331f..df23782 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 9189a0b..1698a85 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 092ca23..7a72401 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));
@@ -178,8 +102,6 @@ const Button = new Lang.Class({
     },
 
     destroy: function() {
-        this.actor._delegate = null;
-
         if (this.menu)
             this.menu.destroy();
         this.actor.destroy();