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

[Carlos Soriano <csoriano src gnome org>]

commit f9e3467b70ef647c34cfddbfd253815f99268444
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 11085d3..ea38d12 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -887,12 +887,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 0a9f3c1..51ea7a4 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -334,6 +334,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',
 
@@ -374,9 +410,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 }));