[gnome-shell/wip/sassWithSomeFixes: 4/4] panelMenu: Use a normal St.Bin to allow styling

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

commit 3086e22cc037ddeb254d31327df18dbfbd53b469
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 1329456..fa381af 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 b41dc09..9dc0803 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 006eb37..b259c1a 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -814,7 +814,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();
@@ -1100,7 +1100,7 @@ const Panel = new Lang.Class({
                 continue;
             if (indicator.menu)
                 indicator.menu.close();
-            indicator.container.hide();
+            indicator.actor.hide();
         }
     },
 
@@ -1132,21 +1132,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();