* Groups are now resizable!

* Added a stop-gap measure for scaling tabs better. (Ian has a better, automatic solution?)
* Ported changes over to the original candy
** TODO: the .arrange() method doesn't work all that well in the original candy

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

@@ -55,7 +55,15 @@ Group.prototype = {
         opacity: 0,
       })
       .appendTo("body")
-      .animate({opacity:1.0});
+      .animate({opacity:1.0}).dequeue();
+    
+    var resizer = $("<div class='resizer'/>")
+      .css({
+        position: "absolute",
+        width: 16, height: 16,
+        bottom: 0, right: 0,
+      }).appendTo(container);
+
 
     this._container = container;
     
@@ -82,7 +90,7 @@ Group.prototype = {
     this._children = this._children.filter(function(child){
       if( $(child).data("toRemove") == true ){
         $(child).data("group", null);
-        $(child).animate({width:160, height:120}, 250);
+        scaleTab( $(child), 160/$(child).width());
         $(child).droppable("enable");        
         return false;
       }
@@ -110,23 +118,16 @@ Group.prototype = {
     var bb = this._getContainerBox();
     var tab;
 
-    // TODO: This is an hacky heuristic. Should probably fix this.
+    // TODO: This is an hacky heuristic. Fix this layout algorithm.
     var pad = 10;
     var w = parseInt(Math.sqrt(((bb.height+pad) * (bb.width+pad))/(this._children.length+4)));
     var h = w * (2/3);
 
     var x=pad;
     var y=pad;
-    for([,tab] in Iterator(this._children)){
-      // This is for actual tabs. Need a better solution.
-      // One that doesn't require special casing to find the linked info.
-      // If I just animate the tab, the rest should happen automatically!
-      if( $("canvas", tab)[0] != null ){
-        $("canvas", tab).data('link').animate({height:h}, 250);
-      }
-            
+    for([,tab] in Iterator(this._children)){      
+      scaleTab( $(tab), w/$(tab).width());
       $(tab).animate({
-        height:h, width: w,
         top:y+bb.top, left:x+bb.left,
       }, 250);
       
@@ -173,9 +174,16 @@ Group.prototype = {
         self.add( $dragged )
       },
       accept: ".tab",
-      
     });
     
+    $(container).resizable({
+      handles: "se",
+      aspectRatio: true,
+      stop: function(){
+        self.arrange();
+      } 
+    })
+    
     }
 }
 
@@ -251,6 +259,24 @@ window.Groups = {
   }  
 };
 
+function scaleTab( el, factor ){  
+  var $el = $(el);
+
+  // This is for actual tabs. Need a better solution.
+  // One that doesn't require special casing to find the linked info.
+  // If I just animate the tab element, the rest should happen automatically!
+  if( $("canvas", el)[0] != null ){
+    $("canvas", el).data('link').animate({height:$el.height()*factor}, 250);
+  }
+
+  $el.animate({
+    width: $el.width()*factor,
+    height: $el.height()*factor,
+    fontSize: parseInt($el.css("fontSize"))*factor,
+  },250).dequeue();
+}
+
+
 $(".tab").data('isDragging', false)
   .draggable(window.Groups.dragOptions)
   .droppable(window.Groups.dropOptions);

browser/base/content/tabcandy/core/mirror.js

@@ -78,6 +78,8 @@ TabCanvas.prototype = {
   },
   
   animate: function(options, duration){
+    // TODO: This doesn't seem to scale the rest of the interface elements at the same
+    // width, leaving unfortunately long trails.
 /*
     if(this.tab.contentWindow == null || this.tab.contentWindow.location.protocol != 'chrome:')
       Utils.log('on animate', this.tab.contentWindow.location.href);

content/candies/original/index.html

@@ -107,10 +107,21 @@
   }
   
   .group{
+    background-color: white;
     cursor: move;
-    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.2);
+    -moz-box-shadow: inset 2px 2px 12px rgba(0,0,0,.15);        
   }    
-  
+   
+  /* Resizable
+  ----------------------------------*/
+  .resizer{
+    background-image: url(../zoomgroups/gfx/resizer.png);
+  }
+  .ui-resizable { position: relative;}
+  .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
+  .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; }
+    
   </style>
   
 </head>

content/candies/zoomgroups/index.html

@@ -22,11 +22,21 @@
       }
       
       .group{
+        background-color: white;
         cursor: move;
-        -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.2);        
+        -moz-box-shadow: inset 2px 2px 12px rgba(0,0,0,.15);        
       }    
 
 
+      /* Resizable
+      ----------------------------------*/
+      .resizer{
+        background-image: url(gfx/resizer.png);
+      }
+      .ui-resizable { position: relative;}
+      .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
+      .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; }
       
     </style>
   </head>
@@ -42,11 +52,11 @@
       <div class="tab">G</div>
       <div class="tab">H</div>
       <div class="tab">I</div>
-      <div class="tab">j</div>
+      <!--<div class="tab">j</div>
       <div class="tab">k</div>
       <div class="tab">m</div>
       <div class="tab">n</div>      
-      <div class="tab">z</div>
+      <div class="tab">z</div>-->
     </div>
   <script>
     function randInt(num){