[gnome-shell/wip/paging-release: 53/85] testing allocation issues with visual glitchs

[Carlos Soriano <csoriano src gnome org>]

commit cb91e21d3ffc6baa63cdc8954016b4c0d2cfaed0
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Wed Jul 17 21:28:16 2013 +0200

    testing allocation issues with visual glitchs
    
    yeah....Shell.GenericContainer works fine for skipping painting
    actors...

 data/theme/gnome-shell.css |    2 +-
 js/ui/appDisplay.js        |  126 ++++++++++++++++++--------------------------
 2 files changed, 52 insertions(+), 76 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index a7f5d2c..6447186 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -900,7 +900,7 @@ StScrollBar StButton#vhandle:active {
 
 .search-display > StBoxLayout,
 .all-apps,
-.frequent-apps {
+.frequent-apps > StBoxLayout {
     /* horizontal padding to make sure scrollbars or dash don't overlap content */
     padding: 8px 88px;
 }
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8a2b21e..3212d2e 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -582,8 +582,7 @@ const PaginationIconIndicator = new Lang.Class({
         this.actor = new St.Button({ style_class: 'show-apps',
                                      button_mask: St.ButtonMask.ONE || St.ButtonMask.TWO,
                                      toggle_mode: true,
-                                     can_focus: true
-                                     });
+                                     can_focus: true });
         this._icon = new St.Icon({ icon_name: 'process-stop-symbolic',
                                    icon_size: 32,
                                    style_class: 'show-apps-icon',
@@ -592,7 +591,7 @@ const PaginationIconIndicator = new Lang.Class({
         this.actor.set_child(this._icon);
         this.actor._delegate = this;
         this._parent = parent;
-        this._index = index;
+        this.actor._index = index;
     },
 
     _createIcon: function(size) {
@@ -603,8 +602,8 @@ const PaginationIconIndicator = new Lang.Class({
         return this._icon;
     },
 
-    _onClicked: function(actor, button) {
-        this._parent.goToPage(this._index); 
+    _onClicked: function(actor, button) {        
+        this._parent.goToPage(this.actor._index); 
         return false;
     },
 
@@ -613,80 +612,76 @@ const PaginationIconIndicator = new Lang.Class({
     }
 });
 
-const PaginationIndicator = new Lang.Class({
-    Name:'PaginationIndicator',
+const PaginationIndicatorActor = new Lang.Class({
+    Name: 'PaginationIndicatorActor',
+    Extends: St.Widget,
+
     
-    _init: function(params){
-        this.actor = new Shell.GenericContainer({x_expand:true, y_expand:true,  style_class: 
'pages-indicator'});
-        this._layout = new Clutter.BoxLayout(params);
-        this.actor.set_layout_manager(this._layout);
-        this._spacing = 0;
+});
+
+const IndicatorLayout = new Lang.Class({
+    Name:'IndicatorLayout',
+    
+    _init: function(params) {
+        params['y_expand'] = true;
+        this.actor = new Shell.GenericContainer(params);
         this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
         this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
-        //this.actor.connect('allocate', Lang.bind(this, this._allocate));
-        this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
+        this.actor.connect('allocate', Lang.bind(this, this._allocate));
+        this.actor.connect('style-changed', Lang.bind(this, this._styleChanged));
+        this._spacing = 0;
     },
     
-    _getPreferredHeight: function(forWidth) {
+    _getPreferredHeight: function(actor, forWidth, alloc) {
         let [minHeight, natHeight] = this.actor.get_children()[0].get_preferred_height(forWidth);
         if(this._nPages) {
-            minHeight = (this._nPages - 1)  * this._spacing  - this._spacing + this._nPages * minHeight;
-            natHeight = (this._nPages - 1)  * this._spacing  - this._spacing + this._nPages * natHeight;
+            let natHeightPerChild = natHeight + this._spacing;
+            let totalUsedHeight =  this._nPages * natHeightPerChild - this._spacing;
+            let minHeightPerChild = minHeight + this._spacing;
+            minHeight = this._nPages * minHeightPerChild - this._spacing;
+            natHeight = this._nPages * natHeightPerChild - this._spacing;
         } else
             minHeight = natHeight = 0;
-        global.log("Height " + minHeight);
-        global.log("spacing " + this._spacing);
-        return [minHeight, natHeight];
+        alloc.min_size = minHeight;
+        alloc.natural_size = natHeight;
     },
     
-    _getPreferredWidth: function(forHeight) {
+    _getPreferredWidth: function(actor, forHeight, alloc) {
         let [minWidth, natWidth] = this.actor.get_children()[0].get_preferred_width(forHeight);
-        let totalWidth = natWidth + this._spacing * 2;
-        global.log("Nat width " + totalWidth);
-        return [totalWidth, totalWidth];
+        let totalWidth = natWidth + this._spacing;
+        alloc.min_size = totalWidth;
+        alloc.natural_size = totalWidth;
     },
 
-    /*_allocate: function(actor, box, flags) {
+    _allocate: function(actor, box, flags) {
         let children = this.actor.get_children();
-        
         for(let i in children)
             this.actor.set_skip_paint(children[i], true);
-        
-        if(this._nPages < 1)
+        if(children.length < 1)
             return;
-        
         let availHeight = box.y2 - box.y1;
         let availWidth = box.x2 - box.x1;
-        global.log("availHeight " + availHeight);
-        global.log("availWidth " + availWidth);
-        global.log("availWidth box" + [box.x2,box.x1] );
         let [minHeight, natHeight] = children[0].get_preferred_height(availWidth);
-        let totalUsedHeight = this._nPages  * this._spacing * 2  - this._spacing + this._nPages * natHeight;
-        let heightPerChild = totalUsedHeight / this._nPages;
+        let heightPerChild = natHeight + this._spacing;
+        let totalUsedHeight =  this._nPages * heightPerChild - this._spacing;
+        
         let [minWidth, natWidth] = children[0].get_preferred_width(natHeight);
         let widthPerChild = natWidth + this._spacing * 2;
         let firstPosition = [this._spacing, availHeight / 2 - totalUsedHeight / 2];
-
         for(let i = 0; i < this._nPages; i++) {
             let childBox = new Clutter.ActorBox();
             childBox.x1 = 0;
             childBox.x2 = availWidth;
             childBox.y1 = firstPosition[1] + i * heightPerChild;
             childBox.y2 = childBox.y1 + heightPerChild;
-            global.log("Child " + [children[i], i]);
             children[i].allocate(childBox, flags);
             this.actor.set_skip_paint(children[i], false);
         }
-    },*/
-    
-    _onStyleChanged: function() {
-        let themeNode = this.actor.get_theme_node();
-        this._spacing = themeNode.get_length('spacing');
-        this.actor.queue_relayout();
     },
-    
-    addItem: function(item) {
-        this.actor.add_child(item);
+   
+    _styleChanged: function() {
+        this._spacing = this.actor.get_theme_node().get_length('spacing');
+        this.actor.queue_relayout();
     }
 
     /*vfunc_set_container: function(container) {
@@ -708,24 +703,26 @@ const AllView = new Lang.Class({
         let paginationScrollViewParams = {style_class: 'all-apps'};
         this._paginationView = new PaginationScrollView(this, paginationScrollViewParams);
 
-        this._paginationIndicator = new PaginationIndicator({
-                                                               vertical: true});
+        this._paginationIndicatorLayout = new IndicatorLayout({style_class: 'pages-indicator'});
+        this._paginationIndicatorLayout._nPages = 0;
+        this._paginationIndicator = new IndicatorLayout({style_class: 'pages-indicator'});
         this._paginationIndicator._nPages = 0;
+        //this._paginationIndicator.set_layout_manager(this._paginationIndicatorLayout);
         let layout = new Clutter.BinLayout();
         this.actor = new St.Widget({ layout_manager: layout, 
                                      x_expand:true, y_expand:true });
         //FIXME Clutter align proerpties
         layout.add(this._paginationView, 2,2);
         if(Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
-            layout.add(this._paginationIndicator.actor, 3,3);
+            layout.add(this._paginationIndicator.actor, 2,2);
         else
-            layout.add(this._paginationIndicator.actor, 3,3);
+            layout.add(this._paginationIndicator.actor, 3,2);
         for(let i = 0; i < MAX_APPS_PAGES; i++) {
             let indicatorIcon = new PaginationIconIndicator(this, i);
             if(i == 0) {
                 indicatorIcon.setChecked(true);
             }
-            this._paginationIndicator.addItem(indicatorIcon.actor);
+            this._paginationIndicator.actor.add_actor(indicatorIcon.actor);
         }
 
         this._paginationView._pages._grid.connect('n-pages-changed', Lang.bind(this, this._updatedNPages));
@@ -733,17 +730,9 @@ const AllView = new Lang.Class({
     
     _updatedNPages: function(iconGrid, nPages) {
         // We don't need a relayout because we already done it at iconGrid
-        // when pages are calculated (and then the signal is emitted before that)
-        let indicators = this._paginationIndicator.actor.get_children();
-        for(let i in indicators) {
-            this._paginationIndicator.actor.set_skip_paint(indicators[i], true);
-        }
+        // when pages are calculated (and then the signal is emitted before that)");
+        this._paginationIndicatorLayout._nPages = nPages;
         this._paginationIndicator._nPages = nPages;
-        if(nPages > 1) {
-            for(let i = 0; i < nPages; i++) {
-                this._paginationIndicator.actor.set_skip_paint(indicators[i], false);
-            }
-        }
         this._paginationView.invalidatePagination = true;
     },
     
@@ -836,15 +825,9 @@ const FrequentView = new Lang.Class({
         box.x2 = width;
         box.y1 = 0;
         box.y2 = height;
-        global.log("Width " + width);
-        global.log("HEight " + height);
         box = this.actor.get_theme_node().get_content_box(box);
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
-        global.log("availWidth " + availWidth);
-        global.log("availHeight " + availHeight);
-        let padding = this.actor.get_theme_node().get_length('padding');
-        global.log("Padding " + padding);
         //FIXME
         let spacing = this._grid.maxSpacingForWidthHeight(availWidth, availHeight, MIN_COLUMNS, MIN_ROWS, 
true);
         this._grid.top_padding = spacing;
@@ -1063,16 +1046,9 @@ const AppDisplay = new Lang.Class({
     },
     
     _onUpdatedDisplaySize: function(actor, width, height) {
-        let box = new Clutter.ActorBox();
-        box.x1 = 0;
-        box.x2 = width;
-        box.y1 = 0;
-        box.y2 = height;
-        box = this._viewStack.get_theme_node().get_content_box(box);
-        let availWidth = box.x2 - box.x1;
-        let availHeight = box.y2 - box.y1;
+        //FIXME
         for (let i = 0; i < this._views.length; i++) {
-            this._views[i].view.onUpdatedDisplaySize(availWidth, availHeight);
+            this._views[i].view.onUpdatedDisplaySize(width, height);
         }
     }
 });