IAN1 CANDY:
authorIan Gilman <iangilman@gmail.com>
Wed, 17 Mar 2010 17:32:49 -0700
changeset 49748 68c2d4ea3146846fcb6cf326ac75be7184b2b347
parent 49747 5ff958915a58a064c6db2a29adbbdd2b88aa7f02
child 49749 c27e970c5bb9a6031c9c5725d7ff5135db1cdefa
push id15039
push useredward.lee@engineering.uiuc.edu
push dateThu, 12 Aug 2010 19:47:36 +0000
treeherderautoland@5da28c582cc7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
IAN1 CANDY: + Cleaned up the text location when shrunk down + Gave the groups rounded corners on all but the resize corner + Liberal use of overflow:hidden + Removed lasso (for now) + The "site" feature now uses grouping. Each site that has multiple pages gets its own group; the remaining pages are grouped together (unless there's only one remaining page, in which case it's just left alone (though maybe it should get a group too)) GROUPS: + Although the animation is chunky to non-existent, the Groups object now has an arrange() function that breaks the window into equal sections + Fixed a bug where dragging a tab within a group and dropping it again would add it a second time. Related to this bug, found that tabs were being added to the Group._children sometimes as DOM elements and sometimes as jQuery objects. Standardized on DOM objects + The Group class is now available from the Groups object, so outside code can create new groups
browser/base/content/tabcandy/app/groups.js
browser/base/content/tabcandy/core/mirror.js
content/candies/ian1/index.html
content/candies/ian1/js/ui.js
--- a/browser/base/content/tabcandy/app/groups.js
+++ b/browser/base/content/tabcandy/app/groups.js
@@ -49,16 +49,17 @@ Group.prototype = {
         position: "absolute",
         top: boundingBox.top-padding,
         left: boundingBox.left-padding,
         width: boundingBox.width+padding*2,
         height: boundingBox.height+padding*2,
         zIndex: -100,
         opacity: 0,
       })
+      .data("group", this)
       .appendTo("body")
       .animate({opacity:1.0}).dequeue();
     
     var resizer = $("<div class='resizer'/>")
       .css({
         position: "absolute",
         width: 16, height: 16,
         bottom: 0, right: 0,
@@ -73,17 +74,19 @@ Group.prototype = {
     var els = this._children;
     this._children = [];
     for(var i in els){
       this.add( els[i] );
     }
   },
   
   add: function(el){
-    this._children.push( el );
+    if($.inArray(el, this._children) == -1)
+      this._children.push( el );
+
     $(el).droppable("disable");
     
     this._updateGroup();
     this.arrange();
   },
   
   remove: function(el){
     $(el).data("toRemove", true);
@@ -166,17 +169,17 @@ Group.prototype = {
         $dragged.addClass("willGroup");
       },
       out: function(){
         $dragged.data("group").remove($dragged);
         $dragged.removeClass("willGroup");
       },
       drop: function(e){
         $dragged.removeClass("willGroup");
-        self.add( $dragged )
+        self.add( $dragged.get(0) )
       },
       accept: ".tab",
     });
     
     $(container).resizable({
       handles: "se",
       aspectRatio: true,
       stop: function(){
@@ -187,16 +190,18 @@ Group.prototype = {
     }
 }
 
 var zIndex = 100;
 var $dragged = null;
 var timeout = null;
 
 window.Groups = {
+  Group: Group, 
+  
   dragOptions: {
     start:function(){
       $dragged = $(this);
       $dragged.data('isDragging', true);
     },
     stop: function(){
       $dragged.data('isDragging', false);
       $(this).css({zIndex: zIndex});
@@ -234,33 +239,61 @@ window.Groups = {
         }, 100);
         
         setTimeout( function(){
           var group = $(target).data("group");
           if( group == null ){
             var group = new Group();
             group.create( [target, dragged] );            
           } else {
-            group.add( dragged )
+            group.add( dragged.get(0) )
           }
           
         }, 100);
         
         
       }, 10 );
       
       
     },
     over: function(e){
       $dragged.addClass("willGroup");
       $dragged.data("topDropZIndex", 0);    
     },
     out: function(){      
       $dragged.removeClass("willGroup");
     }
+  }, 
+  
+  arrange: function() {
+    var $groups = $('.group');
+    var count = $groups.length;
+    var columns = Math.ceil(Math.sqrt(count));
+    var rows = ((columns * columns) - count >= columns ? columns - 1 : columns); 
+    var padding = 12;
+    var startX = padding;
+    var startY = 100;
+    var totalWidth = window.innerWidth - startX;
+    var totalHeight = window.innerHeight - startY;
+    var w = (totalWidth / columns) - padding;
+    var h = (totalHeight / rows) - padding;
+    var x = startX;
+    var y = startY;
+    
+    $groups.each(function(i) {
+      $(this).css({left: x, top: y, width: w, height: h});
+      
+      $(this).data('group').arrange();
+      
+      x += w + padding;
+      if(i % columns == columns - 1) {
+        x = startX;
+        y += h + padding;
+      }
+    });
   }  
 };
 
 function scaleTab( el, factor ){  
   var $el = $(el);
 
   $el.animate({
     width: $el.width()*factor,
--- a/browser/base/content/tabcandy/core/mirror.js
+++ b/browser/base/content/tabcandy/core/mirror.js
@@ -161,18 +161,16 @@ TabMirror.prototype = {
           if(tab.url != mirror.url) {
             mirror.url = tab.url;
             mirror.triggerPaint();
           }
           
           var w = $canvas.width();
           var h = $canvas.height();
           if(w != $canvas.attr('width') || h != $canvas.attr('height')) {
-            Utils.log(w, $canvas.attr('width'), h, $canvas.attr('height'));
-            
             $canvas.attr('width', w);
             $canvas.attr('height', h);
             mirror.triggerPaint();
           }
 
           if(mirror.needsPaint) {
             mirror.tabCanvas.paint();
             
--- a/content/candies/ian1/index.html
+++ b/content/candies/ian1/index.html
@@ -17,16 +17,17 @@
     position: absolute;
     display: block;
     float:left;
     margin: 0px;
     padding: 0;
     background-color: rgba(255,255,255,.8);
     width: 160px;
     height: 137px;
+    overflow: hidden;
   }
     
   .fav{
     position: absolute;
     width: 16px;
     height: 16px;
     background-color: rgba(255,255,255,.8);
     -moz-border-radius: 0 0 5px 0;  
@@ -46,17 +47,17 @@
   }
   
   .thumb-selected {
     -moz-box-shadow: 1px 1px 10px rgba(0,0,0,1);
   }
   
   .name{
   	position: absolute;
-  	top: 123px;
+  	bottom: 0px;
     font-size: 12px;
     color: #888;
     display:block;
     width:160px;
     white-space: nowrap;
     overflow: hidden;
   }
   
@@ -114,19 +115,32 @@
     border: 1px solid #DDD;
     -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
     line-height: 100px;
     text-align: center;
     cursor: pointer;
   }
     
   .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);
+    -moz-border-radius: 6px 6px 0px 6px;        
+    overflow: hidden;
   }    
+   
+  /* 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>
   
 <body>
   <div id="nav">
     <div class="search">
@@ -146,18 +160,20 @@
   <script type="text/javascript;version=1.8" src="../../js/core/utils.js"></script>  
   <script type="text/javascript;version=1.8">
   	Utils.log('it begins');
 /*     Utils.testLogging(); */
   </script>
   <script type="text/javascript;version=1.8" src="../../js/core/tabs.js"></script>
   <script type="text/javascript;version=1.8" src="../../js/core/mirror.js"></script>
   <script type="text/javascript;version=1.8" src="js/ui.js"></script>  
+<!--
   <script type="text/javascript;version=1.8" src="../../js/shared/jquery.lasso.js"></script>
   <script type="text/javascript;version=1.8" src="js/jquery.select.js"></script>  
+-->
   
   <script type="text/javascript;version=1.8" src="../zoomgroups/js/groups.js"></script>
 
   <!-- BEGIN Switch Control -->
   <script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>  
   <script type="text/javascript;version=1.8">
     Switch.insert('#nav', '');
   </script>
--- a/content/candies/ian1/js/ui.js
+++ b/content/candies/ian1/js/ui.js
@@ -277,45 +277,51 @@ var stack = new ArrangeClass("Stack", fu
 //----------------------------------------------------------
 var site = new ArrangeClass("Site", function() {
   var startX = 30;
   var startY = 100;
   var x = startX;
   var y = startY;
   var x2; 
   var y2;
-  var positions = [];
+  var groups = [];
   $(".tab:visible").each(function(i) {
     $el = $(this);
     var tab = Tabs.tab(this);
+    
+    var group = $el.data('group');
+    if(group)
+      group.remove(this);
+      
     var url = tab.url; 
     var domain = url.split('/')[2]; 
     var domainParts = domain.split('.');
     var mainDomain = domainParts[domainParts.length - 2];
-    if(positions[mainDomain]) {
-      x2 = positions[mainDomain].x;
-      y2 = positions[mainDomain].y;
-    } else {
-      x2 = x;
-      y2 = y;
-      
-      x += $el.width() + 30;
-      if( x > window.innerWidth - ($el.width() + startX)){ // includes allowance for the box shadow
-        x = startX;
-        y += $el.height() + 30;
-      }
+    if(groups[mainDomain]) 
+      groups[mainDomain].push(this);
+    else 
+      groups[mainDomain] = [this];
+  });
   
-      positions[mainDomain] = { 'x': x2, 'y': y2 };
-    }
-        
-    TabMirror.pausePainting();
-    $el.animate({'top': y2, 'left': x2, '-moz-transform': 'rotate(40deg)'}, 500, null, function() {
-      TabMirror.resumePainting();
-    });
-  });
+  var leftovers = [];
+  for(key in groups) {
+    var set = groups[key];
+    if(set.length > 1) {
+      group = new Groups.Group();
+      group.create(set);            
+    } else
+      leftovers.push(set[0]);
+  }
+  
+  if(leftovers.length > 1) {
+    group = new Groups.Group();
+    group.create(leftovers);            
+  }
+  
+  Groups.arrange();
 });
 
 //----------------------------------------------------------
 var Arrange = {
   initialized: false,
   
   init: function(){
     this.initialized = true;