Cleaned up the interaction around naming a group.

+ Animation on changing the default name
+ Appropriate color changes
+ Only show the input box on hover

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

@@ -94,29 +94,36 @@ window.Group = function(listOfEls, options) {
   var titleUnfocus = function() {
     if(!self.getTitle()) {
       self.$title
-        .css({
-          fontStyle: 'italic',
-          backgroundImage: 'url(img/edit.png)',
-          paddingLeft: 15
-        })
-        .val('group name');
+        .addClass("defaultName")
+        .val(self.defaultName);
+    } else {
+      self.$title.css({"background":"none"})
+        .animate({"paddingLeft":1, "easing":"linear"}, 340);
     }
   };
   
+  var handleKeyPress = function(e){
+    if( e.which == 13 ) { // return
+      self.$title.blur()
+        .addClass("transparentBorder")
+        .one("mouseout", function(){
+          self.$title.removeClass("transparentBorder");
+        });
+    }
+  }
+  
   this.$title = $('.name', this.$titlebar)
     .css({backgroundRepeat: 'no-repeat'})
     .blur(titleUnfocus)
     .focus(function() {
+      self.$title.select();
       if(!self.getTitle()) {
         self.$title
-          .css({
-            fontStyle: 'normal',
-            backgroundImage: '',
-            paddingLeft: 0
-          })
+          .removeClass("defaultName")
           .val('');
       }
-    });
+    })
+    .keydown(handleKeyPress);
   
   titleUnfocus();
 
@@ -160,11 +167,14 @@ window.Group = function(listOfEls, options) {
 };
 
 // ----------
-window.Group.prototype = $.extend(new Item(), new Subscribable(), {  
+window.Group.prototype = $.extend(new Item(), new Subscribable(), {
+  // ----------
+  defaultName: "name this group...",
+  
   // ----------  
   getTitle: function() {
     var value = (this.$title ? this.$title.val() : '');
-    return (value == 'group name' ? '' : value);
+    return (value == this.defaultName ? '' : value);
   },
 
   // ----------  

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

@@ -161,10 +161,34 @@ body {
 
 input.name{
   background: transparent;
-  border: 1px solid #ddd;
+  border: 1px solid transparent;
   color: #999;
   margin: 3px 0px 0px 3px;
   padding: 1px;
+  background-image: url(../img/edit-light.png);  
+  padding-left: 20px;
+}
+
+input.name:hover{
+  border: 1px solid #ddd;
+}
+
+input.name:focus{
+  color: #555;
+}
+
+input.defaultName{
+  font-style: italic !important;
+  background-image-opacity: .1;
+  color: transparent;
+}
+
+input.defaultName:hover{
+  color: #CCC;
+}
+
+.transparentBorder{
+  border: 1px solid transparent !important;  
 }
 
 /* Resizable