+ You can now drag a group by its title. If you click on the title instead, it selects the whole title (which, it turns out, it was doing anyway) and allows you to edit it.

+ Reenabled the ability to exit title editing by clicking in empty space

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

@@ -72,6 +72,7 @@ window.Group = function(listOfEls, options) {
   
   $container
     .css({zIndex: -100})
+    .data('isDragging', false)
     .appendTo("body")
     .dequeue();
     
@@ -92,9 +93,14 @@ window.Group = function(listOfEls, options) {
     .hide();
 
   // ___ Titlebar
-  var html = "<div class='titlebar'><input class='name' value='"
+  var html =
-      + (options.title || "")
+    "<div class='titlebar'>" + 
-      + "'/><div class='close'></div></div>";
+      "<div class='title-container'>" +
+        "<input class='name' value='" + (options.title || "") + "'/>" + 
+        "<div class='title-shield' />" + 
+      "</div>" + 
+      "<div class='close' />" + 
+    "</div>";
        
   this.$titlebar = $(html)        
     .appendTo($container);
@@ -108,7 +114,12 @@ window.Group = function(listOfEls, options) {
   });
   
   // ___ Title 
+  this.$titleContainer = $('.title-container', this.$titlebar);
+  this.$title = $('.name', this.$titlebar);
+  this.$titleShield = $('.title-shield', this.$titlebar);
+  
   var titleUnfocus = function() {
+    self.$titleShield.show();
     if(!self.getTitle()) {
       self.$title
         .addClass("defaultName")
@@ -130,7 +141,7 @@ window.Group = function(listOfEls, options) {
       self.adjustTitleSize();
   }
   
-  this.$title = $('.name', this.$titlebar)
+  this.$title
     .css({backgroundRepeat: 'no-repeat'})
     .blur(titleUnfocus)
     .focus(function() {
@@ -151,7 +162,24 @@ window.Group = function(listOfEls, options) {
   
   if(this.locked.title)
     this.$title.addClass('name-locked');
-
+  else {
+    this.$titleShield
+      .mousedown(function(e) {
+        self.lastMouseDownTarget = (Utils.isRightClick(e) ? null : e.target);
+      })
+      .mouseup(function(e) { 
+        var same = (e.target == self.lastMouseDownTarget);
+        self.lastMouseDownTarget = null;
+        if(!same)
+          return;
+        
+        if(!$container.data('isDragging')) {        
+          self.$titleShield.hide();
+          self.$title.get(0).focus();
+        }
+      });
+  }
+    
   // ___ Content
   this.$content = $('<div class="group-content"/>')
     .css({
@@ -227,9 +255,9 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
   adjustTitleSize: function() {
     Utils.assert('bounds needs to have been set', this.bounds);
     var w = Math.min(this.bounds.width - 35, Math.max(150, this.getTitle().length * 6));
-    this.$title.css({
+    var css = {width: w};
-      width: w
+    this.$title.css(css);
-    });
+    this.$titleShield.css(css);
   },
   
   // ----------  
@@ -755,12 +783,6 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
           drag.info = null;
         }
       });
-      
-/*
-      this.$title.mousedown(function() {
-        Utils.log('wtf');
-      });
-*/
     }
     
     $(container).droppable({

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

@@ -225,7 +225,7 @@ window.Page = {
   
   // ----------  
   createGroupOnDrag: function(e){
-    e.preventDefault();
+/*     e.preventDefault(); */
     const minSize = 60;
     
     var startPos = {x:e.clientX, y:e.clientY}

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

@@ -252,6 +252,20 @@ input.defaultName:hover{
   color: #CCC;
 }
 
+.title-container {
+}
+
+.title-shield {
+  position:absolute; 
+  margin: 3px 0px 0px 3px;
+  padding: 1px;
+  left:0; 
+  top:0; 
+  width:100%; 
+  height:100%; 
+  z-index:10; 
+}
+
 .transparentBorder{
   border: 1px solid transparent !important;  
 }