diff --git a/browser/base/content/tabcandy/app/groups.js b/browser/base/content/tabcandy/app/groups.js index 8e46b2f7682..bdb27a771f2 100644 --- a/browser/base/content/tabcandy/app/groups.js +++ b/browser/base/content/tabcandy/app/groups.js @@ -33,6 +33,7 @@ window.Group = function(listOfEls, options) { this._children = []; // an array of Items this._container = null; this._padding = 30; + this.defaultSize = new Point(TabItems.tabWidth * 1.5, TabItems.tabHeight * 1.5); var self = this; @@ -110,7 +111,7 @@ window.Group = function(listOfEls, options) { }; // ---------- -window.Group.prototype = $.extend(new Item(), { +window.Group.prototype = $.extend(new Item(), new Subscribable(), { // ---------- _getBoundingBox: function(els) { var el; @@ -158,7 +159,14 @@ window.Group.prototype = $.extend(new Item(), { // ---------- setBounds: function(rect, immediately) { this.setPosition(rect.left, rect.top, immediately); - this.setSize(rect.width, rect.height, immediately); + this.setSize(rect.width, rect.height, immediately, {dontArrange: true}); + + var $titlebar = $('.titlebar', this._container); + var titleHeight = $titlebar.height(); + var box = new Rect(rect); + box.top += titleHeight; + box.height -= titleHeight; + this.arrange({animate: !immediately, bounds: box}); }, // ---------- @@ -176,11 +184,14 @@ window.Group.prototype = $.extend(new Item(), { if(immediately) $(this._container).css(options); else - $(this._container).animate(options); + $(this._container).animate(options).dequeue(); }, // ---------- - setSize: function(width, height, immediately) { + setSize: function(width, height, immediately, options) { + if(typeof(options) == 'undefined') + options = {}; + var $titlebar = $('.titlebar', this._container); var titleHeight = $titlebar.height(); @@ -190,11 +201,18 @@ window.Group.prototype = $.extend(new Item(), { $(this._container).css(containerOptions); $titlebar.css(titleOptions); } else { - $(this._container).animate(containerOptions); - $titlebar.animate(titleOptions); + $(this._container).animate(containerOptions).dequeue(); + $titlebar.animate(titleOptions).dequeue(); + } + + if(!options.dontArrange) { + //TODO sort out the bounds and titlebar stuff for real + var box = this.getBounds(); + box.width = width; + box.top += titleHeight; + box.height = height - titleHeight; + this.arrange({animate: !immediately, bounds: box}); } - - this.arrange({animate: !immediately}); }, // ---------- @@ -203,16 +221,8 @@ window.Group.prototype = $.extend(new Item(), { $.each(toClose, function(index, child) { child.close(); }); - }, - - // ---------- - addOnClose: function(referenceObject, callback) { - Utils.error('Group.addOnClose not implemented'); - }, - - // ---------- - removeOnClose: function(referenceObject) { - Utils.error('Group.removeOnClose not implemented'); + + this._sendOnClose(); }, // ---------- @@ -299,7 +309,7 @@ window.Group.prototype = $.extend(new Item(), { this._children.splice(index, 1); $el.data("group", null); - scaleTab( $el, 160/$el.width()); + item.setSize(item.defaultSize.x, item.defaultSize.y); $el.droppable("enable"); item.removeOnClose(this); @@ -323,13 +333,18 @@ window.Group.prototype = $.extend(new Item(), { }, // ---------- - arrange: function(options){ - if( options && options.animate == false ) animate = false; - else animate = true; + arrange: function(options) { + if( options && options.animate == false ) + animate = false; + else + animate = true; + + if(typeof(options) == 'undefined') + options = {}; /*if( this._children.length < 2 ) return;*/ if( this._rectToBe ) var bb = this._rectToBe; - else var bb = this._getContainerBox(); + else var bb = (options.bounds ? options.bounds : this._getContainerBox()); var count = this._children.length; var bbAspect = bb.width/bb.height; @@ -367,14 +382,12 @@ window.Group.prototype = $.extend(new Item(), { var x = pad; var y=pad; var numInCol = 0; for each(var item in this._children){ - var sizeOptions = {width:tabW, height:tabH, top:y+bb.top, left:x+bb.left}; - - if( animate ) $(item.getContainer()).animate(sizeOptions).dequeue(); - else $(item.getContainer()).css(sizeOptions).dequeue(); + item.setBounds(new Rect(x + bb.left, y + bb.top, tabW, tabH), !animate); x += tabW + pad; numInCol += 1; - if( numInCol >= best.numCols ) [x, numInCol, y] = [pad, 0, y+tabH+pad]; + if( numInCol >= best.numCols ) + [x, numInCol, y] = [pad, 0, y+tabH+pad]; } }, @@ -384,6 +397,7 @@ window.Group.prototype = $.extend(new Item(), { $(container).draggable({ start: function(){ + $dragged = $(this); $(container).data("origPosition", $(container).position()); $.each(self._children, function(index, child) { child.dragData = {startBounds: child.getBounds()}; @@ -398,10 +412,17 @@ window.Group.prototype = $.extend(new Item(), { child.dragData.startBounds.top + dY, true); }); + +/* $(this).css({zIndex: zIndex}); */ +/* zIndex += 1; */ }, stop: function() { - self.pushAway(); - } + if(!$dragged.hasClass('willGroup') && !$dragged.data('group')) + Items.item(this).pushAway(); + + $dragged = null; + }, +/* zIndex: 999 */ }); $(container).droppable({ @@ -418,7 +439,7 @@ window.Group.prototype = $.extend(new Item(), { $dragged.removeClass("willGroup"); self.add( $dragged, {left:event.pageX, top:event.pageY} ) }, - accept: ".tab", + accept: ".tab, .group", }); $(container).resizable({ @@ -567,20 +588,8 @@ window.Groups = { }; // ########## -function scaleTab( el, factor ){ - var $el = $(el); - - $el.animate({ - width: $el.width()*factor, - height: $el.height()*factor, - fontSize: parseInt($el.css("fontSize"))*factor, - },250).dequeue(); -} - - $(".tab").data('isDragging', false) .draggable(window.Groups.dragOptions) .droppable(window.Groups.dropOptions); - })(); \ No newline at end of file diff --git a/browser/base/content/tabcandy/app/items.js b/browser/base/content/tabcandy/app/items.js index 57c7ccb7699..003edf71ca0 100644 --- a/browser/base/content/tabcandy/app/items.js +++ b/browser/base/content/tabcandy/app/items.js @@ -9,7 +9,10 @@ // addOnClose: function(referenceObject, callback) // removeOnClose: function(referenceObject) // -// In addition, it must have a property, isAnItem, set to true. +// In addition, it must have these properties: +// isAnItem, set to true (set by Item) +// defaultSize, a Point +// // Its container must also have a jQuery data named 'item' that points to the item. window.Item = function() { @@ -94,14 +97,10 @@ window.Items = { getTopLevelItems: function() { var items = []; - $('.tab').each(function() { + $('.tab, .group').each(function() { $this = $(this); if(!$this.data('group')) - items.push($this.data('tabItem')); - }); - - $('.group').each(function() { - items.push($(this).data('group')); + items.push($this.data('item')); }); return items; diff --git a/browser/base/content/tabcandy/app/tabitems.js b/browser/base/content/tabcandy/app/tabitems.js index fb709ddcad8..3cc42634b93 100644 --- a/browser/base/content/tabcandy/app/tabitems.js +++ b/browser/base/content/tabcandy/app/tabitems.js @@ -3,6 +3,8 @@ window.TabItem = function(container, tab) { this.container = container; this.tab = tab; + this.defaultSize = new Point(TabItems.tabWidth, TabItems.tabHeight); + $(this.container).data('item', this); }; @@ -19,32 +21,22 @@ window.TabItem.prototype = $.extend(new Item(), { // ---------- setBounds: function(rect, immediately) { - this.setPosition(rect.left, rect.top, immediately); - this.setSize(rect.width, rect.height, immediately); + var css = $.extend(this._getSizeCSS(rect.width, rect.height), { + left: rect.left, + top: rect.top, + }); + + this._change(css, immediately); }, // ---------- setPosition: function(left, top, immediately) { - if(immediately) - $(this.container).css({left: left, top: top}); - else { - TabMirror.pausePainting(); - $(this.container).animate({left: left, top: top}, {complete: function() { - TabMirror.resumePainting(); - }}); - } + this._change({left: left, top: top}, immediately); }, // ---------- setSize: function(width, height, immediately) { - if(immediately) - $(this.container).css({width: width, height: height}); - else { - TabMirror.pausePainting(); - $(this.container).animate({width: width, height: height}, {complete: function() { - TabMirror.resumePainting(); - }}); - } + this._change(this._getSizeCSS(width, height), immediately); }, // ---------- @@ -60,17 +52,45 @@ window.TabItem.prototype = $.extend(new Item(), { // ---------- removeOnClose: function(referenceObject) { this.tab.mirror.removeOnClose(referenceObject); + }, + + // ---------- + _getSizeCSS: function(width, height) { + var scale = width / TabItems.tabWidth; + + return { + width: width, + height: height, + fontSize: TabItems.fontSize * scale + }; + }, + + // ---------- + _change: function(css, immediately) { + if(immediately) + $(this.container).css(css); + else { + TabMirror.pausePainting(); + $(this.container).animate(css, {complete: function() { + TabMirror.resumePainting(); + }}).dequeue(); + } } }); // ########## window.TabItems = { + tabWidth: 160, + tabHeight: 137, + fontSize: 9, + init: function() { var self = this; function mod($div){ Utils.log('mod'); if(window.Groups) { + $div.data('isDragging', false); $div.draggable(window.Groups.dragOptions); $div.droppable(window.Groups.dropOptions); } diff --git a/browser/base/content/tabcandy/app/ui.js b/browser/base/content/tabcandy/app/ui.js index a2cda59a675..70d107029d0 100644 --- a/browser/base/content/tabcandy/app/ui.js +++ b/browser/base/content/tabcandy/app/ui.js @@ -21,10 +21,8 @@ var Tabbar = { // ########## window.Page = { startX: 30, - startY: 70, - tabWidth: 160, - tabHeight: 137, - + startY: 70, + init: function() { Utils.homeTab.raw.maxWidth = 60; Utils.homeTab.raw.minWidth = 60; @@ -181,7 +179,7 @@ var grid = new ArrangeClass("Grid", function(value) { if(typeof(value) == 'boolean') immediately = value; - var box = new Rect(Page.startX, Page.startY, Page.tabWidth, Page.tabHeight); + var box = new Rect(Page.startX, Page.startY, TabItems.tabWidth, TabItems.tabHeight); $(".tab:visible").each(function(i){ var item = Items.item(this); item.setBounds(box, immediately); diff --git a/browser/base/content/tabcandy/core/mirror.js b/browser/base/content/tabcandy/core/mirror.js index 412a2176b2e..bfe2bb112d7 100644 --- a/browser/base/content/tabcandy/core/mirror.js +++ b/browser/base/content/tabcandy/core/mirror.js @@ -104,7 +104,7 @@ TabCanvas.prototype = { } } -// ---------- +// ########## function Mirror(tab, manager) { this.tab = tab; this.manager = manager; @@ -124,7 +124,6 @@ function Mirror(tab, manager) { this.favEl = $('.fav', div).get(0); this.nameEl = $('.name', div).get(0); this.canvasEl = $('.thumb', div).get(0); - this.onCloseSubscribers = []; var doc = this.tab.contentDocument; if( !_isIframe(doc) ) { @@ -134,52 +133,29 @@ function Mirror(tab, manager) { } } -Mirror.prototype.triggerPaint = function() { - var date = new Date(); - this.needsPaint = date.getTime(); -}; - -Mirror.prototype.forceCanvasSize = function(w, h) { - this.canvasSizeForced = true; - var $canvas = $(this.canvasEl); - $canvas.attr('width', w); - $canvas.attr('height', h); - this.tabCanvas.paint(); -}; - -Mirror.prototype.unforceCanvasSize = function() { - this.canvasSizeForced = false; -}; - -Mirror.prototype.addOnClose = function(referenceElement, callback) { - var existing = jQuery.grep(this.onCloseSubscribers, function(element) { - return element.referenceElement == referenceElement; - }); +Mirror.prototype = $.extend(new Subscribable(), { + // ---------- + triggerPaint: function() { + var date = new Date(); + this.needsPaint = date.getTime(); + }, - if(existing.size) { - Utils.assert('should only ever be one', existing.size == 1); - existing[0].callback = callback; - } else { - this.onCloseSubscribers.push({ - referenceElement: referenceElement, - callback: callback - }); + // ---------- + forceCanvasSize: function(w, h) { + this.canvasSizeForced = true; + var $canvas = $(this.canvasEl); + $canvas.attr('width', w); + $canvas.attr('height', h); + this.tabCanvas.paint(); + }, + + // ---------- + unforceCanvasSize: function() { + this.canvasSizeForced = false; } -}; +}); -Mirror.prototype.removeOnClose = function(referenceElement) { - this.onCloseSubscribers = jQuery.grep(this.onCloseSubscribers, function(element) { - return element.referenceElement == referenceElement; - }, true); -}; - -Mirror.prototype._sendOnClose = function() { - jQuery.each(this.onCloseSubscribers, function(index, object) { - object.callback(this); - }); -}; - -// ---------- +// ########## var TabMirror = function( ){ this.init() } TabMirror.prototype = { init: function(){ diff --git a/browser/base/content/tabcandy/core/utils.js b/browser/base/content/tabcandy/core/utils.js index 37873261408..2eab9dc86db 100644 --- a/browser/base/content/tabcandy/core/utils.js +++ b/browser/base/content/tabcandy/core/utils.js @@ -116,6 +116,45 @@ window.Rect.prototype = { } }; +// ########## +// TODO generalize for any number of events +window.Subscribable = function() { + this.onCloseSubscribers = []; +}; + +window.Subscribable.prototype = { + // ---------- + addOnClose: function(referenceElement, callback) { + var existing = jQuery.grep(this.onCloseSubscribers, function(element) { + return element.referenceElement == referenceElement; + }); + + if(existing.size) { + Utils.assert('should only ever be one', existing.size == 1); + existing[0].callback = callback; + } else { + this.onCloseSubscribers.push({ + referenceElement: referenceElement, + callback: callback + }); + } + }, + + // ---------- + removeOnClose: function(referenceElement) { + this.onCloseSubscribers = jQuery.grep(this.onCloseSubscribers, function(element) { + return element.referenceElement == referenceElement; + }, true); + }, + + // ---------- + _sendOnClose: function() { + jQuery.each(this.onCloseSubscribers, function(index, object) { + object.callback(this); + }); + } +}; + // ########## var Utils = { // ___ Windows and Tabs diff --git a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css index a37edbf365a..2ba1ff8fb9e 100644 --- a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css +++ b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css @@ -3,6 +3,7 @@ } .willGroup{ + border: 1px inset rgba(255,0,0,1); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,1); } @@ -30,7 +31,7 @@ input.name{ /* Resizable ----------------------------------*/ .resizer{ - background-image: url(chrome://tabcandy/content/img/shared/resizer.png); + background-image: url(../img/resizer.png); } .ui-resizable { position: relative;} diff --git a/content/candies/revision-a/index.html b/content/candies/revision-a/index.html index 5fe3f2a5a13..a538af8618a 100644 --- a/content/candies/revision-a/index.html +++ b/content/candies/revision-a/index.html @@ -15,6 +15,7 @@ } .tab{ + font-size: 9px; position: absolute; display: block; float:left; @@ -49,7 +50,6 @@ } .name{ - font-size: 9px; display:block; width:160px; white-space: nowrap;