+ Continued cleanup of zoom code.

+ Tabs now have the correct style inside of groups.

browser/base/content/tabcandy/app/groups.js

@@ -297,9 +297,10 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
 
     item.addOnClose(this, function() {
       self.remove($el);
-    });      
+    });
     
-    $el.data("group", this);
+    $el.data("group", this)
+       .addClass("tabInGroup");
     
     if(typeof(item.setResizable) == 'function')
       item.setResizable(false);

browser/base/content/tabcandy/app/tabitems.js

@@ -102,35 +102,41 @@ window.TabItems = {
           if(!$(this).data('isDragging')) {
 
             // ZOOM! 
-            var [w,h,z] = [$(this).width(), $(this).height(), $(this).css("zIndex")];
-            var origPos = $(this).position();
-            var zIndex = $(this).css("zIndex");
-            var scale = window.innerWidth/w;
-            var big = 99999;
+            var orig = {
+              width: $(this).width(),
+              height:  $(this).height(),
+              pos: $(this).position()
+            }
+
+            var scale = window.innerWidth/orig.width;
             
             var tab = Tabs.tab(this);
             var mirror = tab.mirror;
-            //mirror.forceCanvasSize(w * scale/3, h * scale);
             
             var overflow = $("body").css("overflow");
             $("body").css("overflow", "hidden");
             
             function onZoomDone(){
               $(this).find("canvas").data("link").tab.focus();
-              $(this)
-                .css({top: origPos.top, left: origPos.left, width:w, height:h, zIndex:z});  
+              $(this).css({
+                top:   orig.pos.top,
+                left:  orig.pos.left,
+                width: orig.width,
+                height:orig.height,
+                })
+                .removeClass("front");  
               Navbar.show();    
               $("body").css("overflow", overflow);              
             }
   
             $(this)
-              .css("zIndex",big)
+              .addClass("front")
               .animate({
-                top: -10,
-                left: 0,
+                top:    -10,
+                left:   0,
                 easing: "easein",
-                width:w*scale,
-                height:h*scale
+                width:  orig.width*scale,
+                height: orig.height*scale
                 }, 200, onZoomDone);
             
           } else {

browser/themes/pinstripe/browser/tabcandy/tabcandy.css

@@ -34,7 +34,6 @@ body {
 		inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
 }
 
-
 .tab canvas {
 	border: 1px solid rgba(0,0,0,0.2);
 	width: 100%;
@@ -99,11 +98,10 @@ body {
 
 .tab-title {
 	position: absolute;
-	bottom: -20px;
+	top: 100%;
 	text-align: center;
 	text-shadow: rgba(255,255,255,1) 0 1px;
 	width: 94.5%;
-	height:2em;
 }
 
 
@@ -111,20 +109,13 @@ body {
 /* Tab Group
 ----------------------------------*/
 
-.group .tab {
-	position: relative;
-	float: left; 
-	margin: 10px;
-	width: 160px;
-	padding: 4px 6px 6px 4px;
-	border: 1px solid rgba(230,230,230,0);
-	background-color: rgba(245,245,245,0);
-	-moz-border-radius: 0.4em;
+.tabInGroup {
+  border: none;
 	-moz-box-shadow: 
 		inset rgba(255, 255, 255, 0) 0 2px 0px,
 		inset rgba(255, 255, 255, 0) 0 -2px 0px,
 		inset rgba(255, 255, 255, 0) 2px 0px 0px,
-		inset rgba(255, 255, 255, 0) -2px 0px 0px;
+		inset rgba(255, 255, 255, 0) -2px 0px 0px !important;
 }
 
 .group {
@@ -145,6 +136,7 @@ body {
 .group .expander {
 }
 
+
 /*
 .group {
   cursor: move;
@@ -169,8 +161,8 @@ body {
 }
 
 .willGroup{
-  border: 1px inset rgba(255,0,0,1);
-  -moz-box-shadow: 0px 0px 10px rgba(255,0,0,1);
+  border: 1px inset rgba(150,0,0,.5);
+  -moz-box-shadow: 0px 0px 10px rgba(150,0,0,1);
 }
 
 .titlebar{
@@ -203,5 +195,9 @@ input.name{
 .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
 .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
 
+/* Utils
+----------------------------------*/
 
-
+.front{
+  z-index: 999999 !important;
+}