+ merge

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

@@ -462,6 +462,11 @@ window.Group.prototype = iQ.extend(new Item(), new Subscribable(), {
       return;
     }
     
+    
+    rect.width = Math.max( 110, rect.width );
+    rect.height = Math.max( 125, rect.height);
+
+    
     var titleHeight = this.$titlebar.height();
     
     // ___ Determine what has changed

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

@@ -306,45 +306,60 @@ window.TabItem.prototype = iQ.extend(new Item(), {
       }
   
               
-      // TODO: This code is functional, but should probably be rewritten to
+      // Usage      
-      // break DRY less. I'm not really sure the best way to do that in
+      // slide({60:0, 70:1}, 66);
-      // this case, though. I've leave it for a man with four hands. -- Aza
+      // @60- return 0; at @70+ return 1; @65 return 0.5
+      function slider(bounds, val){
+        var keys = [];
+        for(var key in bounds){ keys.push(key); bounds[key] = parseFloat(bounds[key]); };
+        keys.sort(function(a,b){return a-b});
+        var min = keys[0], max = keys[1];
+        
+        function slide(value){
+          if( value >= max ) return bounds[max];
+          if( value <= min ) return bounds[min];
+          var rise = bounds[max] - bounds[min];
+          var run = max-min;
+          var value = rise * (value-min)/run;
+          if( value >= bounds[max] ) return bounds[max];
+          if( value <= bounds[min] ) return bounds[min];
+          return value;
+        }
+        
+        if( val == undefined ) return slide;
+        else return slide(val);
+      };
+
       if(css.width && !this.inStack()) {
         $fav.css({top:4,left:4});
-        if(css.width < 70) {
-          $fav.addClass("lessVisible");
         
-          var opacity = (css.width-60)/10;
+        var opacity = slider({70:1, 60:0}, css.width);
-          if( opacity > 0 ){
         $close.show().css({opacity:opacity});
-           $fav.css({backgroundColor:"rgba(245,245,245," + opacity + ")"}) 
+        if( opacity <= .1 ) $close.hide()
-          }
-        else $close.hide();
 
-        }
+        var pad = slider({70:6, 60:1}, css.width);
-        else {
+        $fav.css({
-          $fav.removeClass("lessVisible").css({backgroundColor:"rgba(245,245,245,1)"});
+         "padding-left": pad + "px",
-          $close.show();
+         "padding-right": pad + 2 + "px",
-        }
+         "padding-top": pad + "px",
+         "padding-bottom": pad + "px",
+         "border-color": "rgba(0,0,0,"+ slider({70:.2, 60:.1}, css.width) +")",
+        });
       } 
       
       if(css.width && this.inStack()){
-        if(css.width < 90) {
+        $fav.css({top:0, left:0});
-          $fav.addClass("lessVisible");
+        var opacity = slider({90:1, 70:0}, css.width);
         
-          var opacity = (css.width-80)/10;
+        var pad = slider({90:6, 70:1}, css.width);
-          if( opacity > 0 ){
+        $fav.css({
-           $fav.css({backgroundColor:"rgba(245,245,245," + opacity + ")"}) 
+         "padding-left": pad + "px",
-          }
+         "padding-right": pad + 2 + "px",
-
+         "padding-top": pad + "px",
-        } else {
+         "padding-bottom": pad + "px",
-          $fav.removeClass("lessVisible").css({
+         "border-color": "rgba(0,0,0,"+ slider({90:.2, 70:.1}, css.width) +")",
-            backgroundColor:"rgba(245,245,245,1)",
-            top: 0,
-            left: 0
         });
       }   
-      }   
 
       this._hasBeenDrawn = true;
     }

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

@@ -72,6 +72,8 @@ body {
 	left: 4px;
 	border-right: 1px solid rgba(0,0,0,0.2);
 	border-bottom: 1px solid rgba(0,0,0,0.2);
+  height: 17;
+  width: 17;
 }
 
 .favicon img {
@@ -80,12 +82,6 @@ body {
 	height: 16px;
 }
 
-.lessVisible {
-  background-color: rgba(245,245,245, .2);
-  -moz-box-shadow: none;
-  border: none;
-}
-
 
 .close {
 	position: absolute;