From aad71dc63a8d7df991602802fb4fd36000bdf654 Mon Sep 17 00:00:00 2001
From: Michael Yoshitaka Erlewine <mitcho@mitcho.com>
Date: Mon, 6 Sep 2010 10:42:41 -0400
Subject: [PATCH] Bug 591147 Let TabItem spacing used in Items.arrange be
 specified via CSS [r+a=dietrich]

---
 browser/base/content/tabview/groupitems.js          |  2 +-
 browser/base/content/tabview/items.js               | 13 ++++++++-----
 .../themes/gnomestripe/browser/tabview/tabview.css  |  1 +
 .../themes/pinstripe/browser/tabview/tabview.css    |  1 +
 .../themes/winstripe/browser/tabview/tabview.css    |  1 +
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/browser/base/content/tabview/groupitems.js b/browser/base/content/tabview/groupitems.js
index 25171e75df0b..68f50f2c39ad 100644
--- a/browser/base/content/tabview/groupitems.js
+++ b/browser/base/content/tabview/groupitems.js
@@ -777,7 +777,7 @@ window.GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
       this.topChild = null;
       var box = new Rect(this.expanded.bounds);
       box.inset(8, 8);
-      Items.arrange(this._children, box, Utils.extend({}, options, {padding: 8, z: 99999}));
+      Items.arrange(this._children, box, Utils.extend({}, options, {z: 99999}));
     } else {
       var bb = this.getContentBounds();
       var count = this._children.length;
diff --git a/browser/base/content/tabview/items.js b/browser/base/content/tabview/items.js
index d77083315684..5f99d98fc32f 100644
--- a/browser/base/content/tabview/items.js
+++ b/browser/base/content/tabview/items.js
@@ -915,7 +915,11 @@ window.Items = {
       return rects;
 
     var columns = 1;
-    var padding = options.padding || 0;
+    // We'll assume for the time being that all the items have the same styling
+    // and that the margin is the same width around.
+    var itemMargin = items && items.length ?
+                       parseInt(iQ(items[0].container).css('margin-left')) : 0;
+    var padding = itemMargin * 2;
     var yScale = 1.1; // to allow for titles
     var rows;
     var tabWidth;
@@ -924,9 +928,9 @@ window.Items = {
 
     function figure() {
       rows = Math.ceil(count / columns);
-      tabWidth = (bounds.width - (padding * (columns - 1))) / columns;
+      tabWidth = (bounds.width - (padding * columns)) / columns;
       tabHeight = tabWidth * tabAspect;
-      totalHeight = (tabHeight * yScale * rows) + (padding * (rows - 1));
+      totalHeight = (tabHeight * yScale * rows) + (padding * rows);
     }
 
     figure();
@@ -937,8 +941,7 @@ window.Items = {
     }
 
     if (rows == 1) {
-      var maxWidth = Math.max(TabItems.tabWidth, bounds.width / 2);
-      tabWidth = Math.min(Math.min(maxWidth, bounds.width / count), bounds.height / tabAspect);
+      tabWidth = Math.min(tabWidth, (bounds.height - 2 * itemMargin) / tabAspect);
       tabHeight = tabWidth * tabAspect;
     }
 
diff --git a/browser/themes/gnomestripe/browser/tabview/tabview.css b/browser/themes/gnomestripe/browser/tabview/tabview.css
index 1b1f5646efaa..06daf034cc99 100644
--- a/browser/themes/gnomestripe/browser/tabview/tabview.css
+++ b/browser/themes/gnomestripe/browser/tabview/tabview.css
@@ -24,6 +24,7 @@ body {
   -moz-border-radius: 0.4em;
   -moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
   cursor: pointer;
+  margin: 4px;
 }
 
 .tab canvas,
diff --git a/browser/themes/pinstripe/browser/tabview/tabview.css b/browser/themes/pinstripe/browser/tabview/tabview.css
index b02b626ac6d4..c093548472d5 100644
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -24,6 +24,7 @@ body {
   -moz-border-radius: 0.4em;
   -moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
   cursor: pointer;
+  margin: 4px;
 }
 
 .tab canvas,
diff --git a/browser/themes/winstripe/browser/tabview/tabview.css b/browser/themes/winstripe/browser/tabview/tabview.css
index 66e23a08ae10..1684f0da0d76 100644
--- a/browser/themes/winstripe/browser/tabview/tabview.css
+++ b/browser/themes/winstripe/browser/tabview/tabview.css
@@ -24,6 +24,7 @@ body {
   -moz-border-radius: 0.4em;
   -moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
   cursor: pointer;
+  margin: 4px;
 }
 
 .tab canvas,