From 8e2f4638c617d36086cbba508fa19da2c7e44cac Mon Sep 17 00:00:00 2001
From: Aza Raskin <aza@mozilla.com>
Date: Thu, 29 Apr 2010 00:42:37 -0700
Subject: [PATCH] + Visual cleanup:  + Page names are no longer visible when in
 stacks  + Page names have been prettified when in the stack tray.  + TODO:
 Page names don't seem to come back after a group is turned into a stack, and
 then unstacked.

---
 browser/base/content/tabcandy/app/groups.js   | 22 +++++++++++++---
 browser/base/content/tabcandy/app/tabitems.js | 25 +++++++++++++++----
 .../pinstripe/browser/tabcandy/tabcandy.css   | 10 ++++++++
 3 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/browser/base/content/tabcandy/app/groups.js b/browser/base/content/tabcandy/app/groups.js
index 25fc4003cc8..f696f30e365 100644
--- a/browser/base/content/tabcandy/app/groups.js
+++ b/browser/base/content/tabcandy/app/groups.js
@@ -490,10 +490,15 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
 
     var bb = this.getContentBounds();
     bb.inset(6, 6);
-
+    
     if((bb.width * bb.height) / count > 7000) {
+      this._children.forEach(function(child){
+          child.removeClass("stacked")
+      });
+
       Items.arrange(this._children, bb, options);
       this._isStacked = false;
+      
     } else
       this._stackArrange(bb, options);
   },
@@ -540,6 +545,7 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
         
         child.setBounds(box, !animate);
         child.setRotation(self._randRotate(35, index));
+        child.addClass("stacked");
       }
     });
     
@@ -582,7 +588,7 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
       zIndex: 99998
     }).appendTo("body");
 
-    var w = 240;
+    var w = 180;
     var h = w * (TabItems.tabHeight / TabItems.tabWidth) * 1.1;
     var padding = 20;
     var col = Math.ceil(Math.sqrt(this._children.length));
@@ -605,7 +611,11 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
       height: overlayHeight,
       top: pos.top,
       left: pos.left
-    }, 350, "tabcandyBounce").addClass("overlay");//xxx
+    }, 350, "tabcandyBounce").addClass("overlay");
+
+    this._children.forEach(function(child){
+      child.addClass("stack-trayed");
+    });
 
     var box = new Rect(pos.left, pos.top, overlayWidth, overlayHeight);
     box.inset(8, 8);
@@ -642,7 +652,11 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
       this.expanded.$tray.remove();
       this.expanded.$shield.remove();
       this.expanded = null;
-            
+
+      this._children.forEach(function(child){
+        child.removeClass("stack-trayed");
+      });
+                  
       this.arrange({z: this.getZ() + 1});
     }
   },
diff --git a/browser/base/content/tabcandy/app/tabitems.js b/browser/base/content/tabcandy/app/tabitems.js
index 6e9d8796664..98b470a7bfe 100644
--- a/browser/base/content/tabcandy/app/tabitems.js
+++ b/browser/base/content/tabcandy/app/tabitems.js
@@ -106,12 +106,17 @@ window.TabItem.prototype = $.extend(new Item(), {
     }
 
     if(css.fontSize) {
-      if(css.fontSize < minFontSize)
-        $title.fadeOut();
+      if(css.fontSize < minFontSize )
+        $title.fadeOut().dequeue();
       else
-        $title.fadeIn();
+        $title.fadeIn().dequeue();
     }
 
+    if( $container.hasClass("stacked") ){
+      $title.hide();
+    }
+
+
     if(css.width) {
       if(css.width < 30) {
         $thumb.fadeOut();
@@ -120,7 +125,7 @@ window.TabItem.prototype = $.extend(new Item(), {
         $thumb.fadeIn();
         $close.fadeIn();
       }
-    }
+    }    
 
     this._updateDebugBounds();
   },
@@ -135,6 +140,16 @@ window.TabItem.prototype = $.extend(new Item(), {
     this.tab.close();
   },
   
+  // ----------
+  addClass: function(className) {
+    $(this.container).addClass(className);
+  },
+  
+  // ----------
+  removeClass: function(className) {
+    $(this.container).removeClass(className);
+  },
+  
   // ----------
   addOnClose: function(referenceObject, callback) {
     this.tab.mirror.addOnClose(referenceObject, callback);      
@@ -258,7 +273,7 @@ window.TabItems = {
                   left:   0,
                   width:  orig.width*scale,
                   height: orig.height*scale
-                  }, 200, "easeOutQuad", onZoomDone);
+                  }, 200, "easeInQuad", onZoomDone);
             }
           } else {
             $(this).find("canvas").data("link").tab.raw.pos = $(this).position();
diff --git a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css
index dadf2da9a48..684cd428a8f 100644
--- a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css
+++ b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css
@@ -110,7 +110,17 @@ body {
   overflow: hidden;
 }
 
+.stacked .tab-title{ display: none; }
+.stacked .thumbShadow{display: none;}
+.stacked .thumb{-moz-box-shadow: rgba(0,0,0,.2) 1px 1px 6px;}
 
+.stack-trayed .tab-title{
+  display: block !important;
+	text-shadow: rgba(0,0,0,1) 1px 1px 2px;
+  color: #EEE;
+  font-size: 11px;
+}
+.stack-trayed .thumb{ -moz-box-shadow: none !important;}
 
 /* Tab Group
 ----------------------------------*/