From 98e3c972d29e4b4261bfd833264614ca9f361611 Mon Sep 17 00:00:00 2001
From: Aza Raskin <aza@mozilla.com>
Date: Fri, 25 Jun 2010 15:15:51 -0700
Subject: [PATCH 1/2] + Cleaned up the code which changes the styling of a
 tabitems fav icon.  - The bite still exist, it just gets smaller.

---
 browser/base/content/tabcandy/app/tabitems.js | 83 +++++++++++--------
 .../pinstripe/browser/tabcandy/tabcandy.css   | 10 +--
 2 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/browser/base/content/tabcandy/app/tabitems.js b/browser/base/content/tabcandy/app/tabitems.js
index 0450b0b3d31e..9b5dfce7f52a 100644
--- a/browser/base/content/tabcandy/app/tabitems.js
+++ b/browser/base/content/tabcandy/app/tabitems.js
@@ -306,45 +306,60 @@ window.TabItem.prototype = iQ.extend(new Item(), {
           $title.fadeIn();//.dequeue();
       }
   
-  
-      // TODO: This code is functional, but should probably be rewritten to
-      // break DRY less. I'm not really sure the best way to do that in
-      // this case, though. I've leave it for a man with four hands. -- Aza
+              
+      // Usage      
+      // slide({60:0, 70:1}, 66);
+      // @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;
-          if( opacity > 0 ){
-           $close.show().css({opacity:opacity});
-           $fav.css({backgroundColor:"rgba(245,245,245," + opacity + ")"}) 
-          }
-        else $close.hide();
-          
-        }
-        else {
-          $fav.removeClass("lessVisible").css({backgroundColor:"rgba(245,245,245,1)"});
-          $close.show();
-        }
+        
+        var opacity = slider({70:1, 60:0}, css.width);
+        $close.show().css({opacity:opacity});
+        if( opacity <= .1 ) $close.hide()
+
+        var pad = slider({70:6, 60:1}, css.width);
+        $fav.css({
+         "padding-left": pad + "px",
+         "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.addClass("lessVisible");
-          
-          var opacity = (css.width-80)/10;
-          if( opacity > 0 ){
-           $fav.css({backgroundColor:"rgba(245,245,245," + opacity + ")"}) 
-          }
-
-        } else {
-          $fav.removeClass("lessVisible").css({
-            backgroundColor:"rgba(245,245,245,1)",
-            top: 0,
-            left: 0
-          });          
-        }    
+        $fav.css({top:0, left:0});
+        var opacity = slider({90:1, 70:0}, css.width);
+        
+        var pad = slider({90:6, 70:1}, css.width);
+        $fav.css({
+         "padding-left": pad + "px",
+         "padding-right": pad + 2 + "px",
+         "padding-top": pad + "px",
+         "padding-bottom": pad + "px",
+         "border-color": "rgba(0,0,0,"+ slider({90:.2, 70:.1}, css.width) +")",
+        });
       }   
 
       this._hasBeenDrawn = true;
diff --git a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css
index e7619b429dc4..b9018e92532b 100644
--- a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css
+++ b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css
@@ -71,7 +71,9 @@ body {
 	top: 4px;
 	left: 4px;
 	border-right: 1px solid rgba(0,0,0,0.2);
-	border-bottom: 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;

From 4381ad18ee402d39bc5bac95c058746fb47f9551 Mon Sep 17 00:00:00 2001
From: Aza Raskin <aza@mozilla.com>
Date: Fri, 25 Jun 2010 15:47:34 -0700
Subject: [PATCH 2/2] + Added a minimum size for groups.

---
 browser/base/content/tabcandy/app/groups.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/browser/base/content/tabcandy/app/groups.js b/browser/base/content/tabcandy/app/groups.js
index 72a9b62b1a3f..8ff666c55377 100644
--- a/browser/base/content/tabcandy/app/groups.js
+++ b/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