[gnome-shell] AppSwitcher: Use CSS instead of the hardcoded POPUP_LIST_SPACING constant

[Adel Gadllah <agadllah src gnome org>]

commit 5ff609ed49261074c639c64b9770432eb1db1a77
Author: Adel Gadllah <adel gadllah gmail com>
Date:   Fri Mar 26 17:47:12 2010 +0100

    AppSwitcher: Use CSS instead of the hardcoded POPUP_LIST_SPACING constant
    
    The POPUP_LIST_SPACING constant was used for the AltTabPopup.actor's padding,
    AltTabPopup.actor's spacing and SwitcherList._list's spacing.
    
    Switch to CSS and remove the constant.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=613195

 data/theme/gnome-shell.css |    9 ++++++
 js/ui/altTab.js            |   61 ++++++++++++++++++++++++++++---------------
 2 files changed, 49 insertions(+), 21 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6d1a5d1..bad3292 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -727,6 +727,11 @@ StTooltip {
 }
 
 /* App Switcher */
+#altTabPopup {
+    padding: 8px;
+    spacing: 16px;
+}
+
 .switcher-list {
     background: rgba(0,0,0,0.8);
     border: 1px solid rgba(128,128,128,0.40);
@@ -737,6 +742,10 @@ StTooltip {
     color: white;
 }
 
+.switcher-list-item-container {
+    spacing: 8px;
+}
+
 .thumbnail-scroll-gradient-left {
     background-gradient-direction: horizontal;
     background-gradient-start: rgba(51, 51, 51, 1.0);
diff --git a/js/ui/altTab.js b/js/ui/altTab.js
index 664f78d..fb31b9a 100644
--- a/js/ui/altTab.js
+++ b/js/ui/altTab.js
@@ -22,7 +22,6 @@ const TRANSPARENT_COLOR = new Clutter.Color();
 TRANSPARENT_COLOR.from_pixel(0x00000000);
 
 const POPUP_APPICON_SIZE = 96;
-const POPUP_LIST_SPACING = 8;
 const POPUP_SCROLL_TIME = 0.10; // seconds
 
 const DISABLE_HOVER_TIMEOUT = 500; // milliseconds
@@ -43,7 +42,8 @@ function AltTabPopup() {
 
 AltTabPopup.prototype = {
     _init : function() {
-        this.actor = new Shell.GenericContainer({ reactive: true });
+        this.actor = new Shell.GenericContainer({ name: 'altTabPopup',
+                                                    reactive: true });
 
         this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
         this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
@@ -79,12 +79,18 @@ AltTabPopup.prototype = {
         let childBox = new Clutter.ActorBox();
         let focus = global.get_focus_monitor();
 
+        let leftPadding = this.actor.get_theme_node().get_padding(St.Side.LEFT);
+        let rightPadding = this.actor.get_theme_node().get_padding(St.Side.RIGHT);
+        let bottomPadding = this.actor.get_theme_node().get_padding(St.Side.BOTTOM);
+        let vPadding = this.actor.get_theme_node().get_vertical_padding();
+        let hPadding = leftPadding + rightPadding;
+
         // Allocate the appSwitcher
         // We select a size based on an icon size that does not overflow the screen
-        let [childMinHeight, childNaturalHeight] = this._appSwitcher.actor.get_preferred_height(focus.width - POPUP_LIST_SPACING * 2);
+        let [childMinHeight, childNaturalHeight] = this._appSwitcher.actor.get_preferred_height(focus.width - hPadding);
         let [childMinWidth, childNaturalWidth] = this._appSwitcher.actor.get_preferred_width(childNaturalHeight);
-        childBox.x1 = Math.max(focus.x + POPUP_LIST_SPACING, focus.x + Math.floor((focus.width - childNaturalWidth) / 2));
-        childBox.x2 = Math.min(childBox.x1 + focus.width - POPUP_LIST_SPACING * 2, childBox.x1 + childNaturalWidth);
+        childBox.x1 = Math.max(focus.x + leftPadding, focus.x + Math.floor((focus.width - childNaturalWidth) / 2));
+        childBox.x2 = Math.min(childBox.x1 + focus.width - hPadding, childBox.x1 + childNaturalWidth);
         childBox.y1 = focus.y + Math.floor((focus.height - childNaturalHeight) / 2);
         childBox.y2 = childBox.y1 + childNaturalHeight;
         this._appSwitcher.actor.allocate(childBox, flags);
@@ -97,17 +103,21 @@ AltTabPopup.prototype = {
             let [posX, posY] = icon.get_transformed_position();
             let thumbnailCenter = posX + icon.width / 2;
             let [childMinWidth, childNaturalWidth] = this._thumbnails.actor.get_preferred_width(-1);
-            childBox.x1 = Math.max(focus.x + POPUP_LIST_SPACING, Math.floor(thumbnailCenter - childNaturalWidth / 2));
-            if (childBox.x1 + childNaturalWidth > focus.x + focus.width - POPUP_LIST_SPACING * 2) {
-                let offset = childBox.x1 + childNaturalWidth - focus.width + POPUP_LIST_SPACING * 2;
-                childBox.x1 = Math.max(POPUP_LIST_SPACING, childBox.x1 - offset - POPUP_LIST_SPACING * 2);
+            childBox.x1 = Math.max(focus.x + leftPadding, Math.floor(thumbnailCenter - childNaturalWidth / 2));
+            if (childBox.x1 + childNaturalWidth > focus.x + focus.width - hPadding) {
+                let offset = childBox.x1 + childNaturalWidth - focus.width + hPadding;
+                childBox.x1 = Math.max(focus.x + leftPadding, childBox.x1 - offset - hPadding);
             }
 
+            let [found, spacing] = this.actor.get_theme_node().get_length('spacing', false);
+            if (!found)
+                spacing = 0;
+
             childBox.x2 = childBox.x1 +  childNaturalWidth;
-            if (childBox.x2 > focus.x + focus.width - POPUP_LIST_SPACING)
-                childBox.x2 = focus.x + focus.width - POPUP_LIST_SPACING;
-            childBox.y1 = this._appSwitcher.actor.allocation.y2 + POPUP_LIST_SPACING * 2;
-            this._thumbnails.addClones(focus.height - POPUP_LIST_SPACING - childBox.y1);
+            if (childBox.x2 > focus.x + focus.width - rightPadding)
+                childBox.x2 = focus.x + focus.width - rightPadding;
+            childBox.y1 = this._appSwitcher.actor.allocation.y2 + spacing;
+            this._thumbnails.addClones(focus.height - bottomPadding - childBox.y1);
             let [childMinHeight, childNaturalHeight] = this._thumbnails.actor.get_preferred_height(-1);
             childBox.y2 = childBox.y1 + childNaturalHeight;
             this._thumbnails.actor.allocate(childBox, flags);
@@ -445,8 +455,12 @@ SwitcherList.prototype = {
 
         // Here we use a GenericContainer so that we can force all the
         // children except the separator to have the same width.
-        this._list = new Shell.GenericContainer();
-        this._list.spacing = POPUP_LIST_SPACING;
+        this._list = new Shell.GenericContainer({ style_class: 'switcher-list-item-container' });
+        this._list.spacing = 0;
+        this._list.connect('style-changed', Lang.bind(this, function() {
+                                                        let [found, spacing] = this._list.get_theme_node().get_length('spacing', false);
+                                                        this._list.spacing = (found) ? spacing : 0;
+                                                     }));
 
         this._list.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
         this._list.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
@@ -548,7 +562,8 @@ SwitcherList.prototype = {
     _scrollToRight : function() {
         let monitor = global.get_focus_monitor();
         let padding = this.actor.get_theme_node().get_horizontal_padding();
-        let x = this._items[this._highlighted].allocation.x2 - monitor.width + padding + POPUP_LIST_SPACING * 2;
+        let parentPadding = this.actor.get_parent().get_theme_node().get_horizontal_padding();
+        let x = this._items[this._highlighted].allocation.x2 - monitor.width + padding + parentPadding;
         this._leftGradient.show();
         Tweener.addTween(this._list, { anchor_x: x,
                                         time: POPUP_SCROLL_TIME,
@@ -641,11 +656,14 @@ SwitcherList.prototype = {
         let childBox = new Clutter.ActorBox();
 
         let focus = global.get_focus_monitor();
-        if (this.actor.allocation.x2 == focus.width - POPUP_LIST_SPACING) {
+        let parentRightPadding = this.actor.get_parent().get_theme_node().get_padding(St.Side.RIGHT);
+        if (this.actor.allocation.x2 == focus.x + focus.width - parentRightPadding) {
             if (this._squareItems)
                 childWidth = childHeight;
-            else
-                childWidth = children[0].get_preferred_width(childHeight)[0];
+            else {
+                let [childMin, childNat] = children[0].get_preferred_width(childHeight);
+                childWidth = childMin;
+            }
         }
 
         for (let i = 0; i < children.length; i++) {
@@ -691,7 +709,7 @@ SwitcherList.prototype = {
             let arrowWidth = Math.floor(leftPadding / 3);
             let arrowHeight = arrowWidth * 2;
             this._leftArrow.set_size(arrowWidth, arrowHeight);
-            this._leftArrow.set_position(POPUP_LIST_SPACING, this.actor.height / 2 - arrowWidth);
+            this._leftArrow.set_position(leftPadding / 2, this.actor.height / 2 - arrowWidth);
 
             arrowWidth = Math.floor(rightPadding / 3);
             arrowHeight = arrowWidth * 2;
@@ -794,7 +812,8 @@ AppSwitcher.prototype = {
 
         // We just assume the whole screen here due to weirdness happing with the passed width
         let focus = global.get_focus_monitor();
-        let availWidth = focus.width - POPUP_LIST_SPACING * 2 - this.actor.get_theme_node().get_horizontal_padding();
+        let parentPadding = this.actor.get_parent().get_theme_node().get_horizontal_padding();
+        let availWidth = focus.width - parentPadding - this.actor.get_theme_node().get_horizontal_padding();
         let height = 0;
 
         for(let i =  0; i < iconSizes.length; i++) {