[gnome-shell] appDisplay: Give more horizontal space to control buttons

[Carlos Soriano <csoriano src gnome org>]

commit e30d18febee3d411d869988d5ba9230565e3753e
Author: Carlos Soriano <csoriano src gnome org>
Date:   Fri May 24 12:03:00 2013 +0200

    appDisplay: Give more horizontal space to control buttons
    
    Before, the text of those buttons were truncated when the text exceeded
    the fixed width we had in the CSS.
    Now, we give more horizontal space to the control buttons to match
    the maximum text length of all buttons.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=696307

 data/theme/gnome-shell.css |    3 +--
 js/ui/appDisplay.js        |   42 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 25852cc..bcf4bfb 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -891,12 +891,11 @@ StScrollBar StButton#vhandle:active {
 }
 
 .app-view-controls {
-    width: 250px;
     padding-bottom: 32px;
 }
 
 .app-view-control {
-    padding: 4px 16px;
+    padding: 4px 32px;
 }
 
 .search-display > StBoxLayout,
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8cba94e..144419c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -336,6 +336,42 @@ const Views = {
     ALL: 1
 };
 
+const ControlsBoxLayout = Lang.Class({
+    Name: 'ControlsBoxLayout',
+    Extends: Clutter.BoxLayout,
+
+    /**
+     * Override the BoxLayout behavior to use the maximum preferred width of all
+     * buttons for each child
+     */
+    vfunc_get_preferred_width: function(container, forHeight) {
+        let maxMinWidth = 0;
+        let maxNaturalWidth = 0;
+        for (let child = container.get_first_child();
+             child;
+             child = child.get_next_sibling()) {
+             let [minWidth, natWidth] = child.get_preferred_width(forHeight);
+             maxMinWidth = Math.max(maxMinWidth, minWidth);
+             maxNaturalWidth = Math.max(maxNaturalWidth, natWidth);
+        }
+        let childrenCount = container.get_n_children();
+        let totalSpacing = this.spacing * (childrenCount - 1);
+        return [maxMinWidth * childrenCount + totalSpacing,
+                maxNaturalWidth * childrenCount + totalSpacing];
+    },
+
+    vfunc_set_container: function(container) {
+        if(this._styleChangedId) {
+            this._container.disconnect(this._styleChangedId);
+            this._styleChangedId = 0;
+        }
+        if(container != null)
+            this._styleChangedId = container.connect('style-changed', Lang.bind(this,
+                    function() { this.spacing = this._container.get_theme_node().get_length('spacing'); }));
+        this._container = container;
+    }
+});
+
 const AppDisplay = new Lang.Class({
     Name: 'AppDisplay',
 
@@ -379,9 +415,9 @@ const AppDisplay = new Lang.Class({
                                           x_expand: true, y_expand: true });
         this.actor.add(this._viewStack, { expand: true });
 
-        let layout = new Clutter.BoxLayout({ homogeneous: true });
-        this._controls = new St.Widget({ style_class: 'app-view-controls',
-                                         layout_manager: layout });
+        let layout = new ControlsBoxLayout({ homogeneous: true });
+        this._controls = new St.Widget({ style_class: 'app-view-controls' });
+        this._controls.set_layout_manager(layout);
         this.actor.add(new St.Bin({ child: this._controls }));