Bug 591147 Let TabItem spacing used in Items.arrange be specified via CSS [r+a=dietrich]
authorMichael Yoshitaka Erlewine <mitcho@mitcho.com>
Wed, 08 Sep 2010 19:44:16 -0400
changeset 52240 0a52a1cfd394cc27fe6c66ad5dc9c31cf49d8473
parent 52239 858cb102190c4167630007e3e5e53617e5dcbd9c
child 52241 d2c04c661081965a7a309d29b84968232c274271
push id15577
push userddahl@mozilla.com
push dateThu, 09 Sep 2010 00:10:12 +0000
treeherdermozilla-central@d2c04c661081 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs591147
milestone2.0b6pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 591147 Let TabItem spacing used in Items.arrange be specified via CSS [r+a=dietrich]
browser/base/content/tabview/groupitems.js
browser/base/content/tabview/items.js
browser/themes/gnomestripe/browser/tabview/tabview.css
browser/themes/pinstripe/browser/tabview/tabview.css
browser/themes/winstripe/browser/tabview/tabview.css
--- a/browser/base/content/tabview/groupitems.js
+++ b/browser/base/content/tabview/groupitems.js
@@ -778,17 +778,17 @@ GroupItem.prototype = Utils.extend(new I
   //
   // Parameters:
   //   options - passed to <Items.arrange> or <_stackArrange>
   arrange: function GroupItem_arrange(options) {
     if (this.expanded) {
       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;
       if (!this.shouldStack(count)) {
         var animate;
         if (!options || typeof options.animate == 'undefined')
           animate = true;
         else
--- a/browser/base/content/tabview/items.js
+++ b/browser/base/content/tabview/items.js
@@ -910,40 +910,43 @@ let Items = {
       rects = [];
 
     var tabAspect = TabItems.tabHeight / TabItems.tabWidth;
     var count = options.count || (items ? items.length : 0);
     if (!count)
       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;
     var tabHeight;
     var totalHeight;
 
     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();
 
     while (rows > 1 && totalHeight > bounds.height) {
       columns++;
       figure();
     }
 
     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;
     }
 
     var box = new Rect(bounds.left, bounds.top, tabWidth, tabHeight);
     var row = 0;
     var column = 0;
     var immediately;
 
--- a/browser/themes/gnomestripe/browser/tabview/tabview.css
+++ b/browser/themes/gnomestripe/browser/tabview/tabview.css
@@ -19,16 +19,17 @@ body {
 
 .tab {
   padding: 4px 6px 6px 4px;
   border: 1px solid rgba(230,230,230,1);
   background-color: rgba(245,245,245,1);
   -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,
 .cached-thumb {
   border: 1px solid rgba(0,0,0,0.2);
 }
 
 .thumb-shadow {
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -19,16 +19,17 @@ body {
 
 .tab {
   padding: 4px 6px 6px 4px;
   border: 1px solid rgba(230,230,230,1);
   background-color: rgba(245,245,245,1);
   -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,
 .cached-thumb {
   border: 1px solid rgba(0,0,0,0.2);
 }
 
 .thumb-shadow {
--- a/browser/themes/winstripe/browser/tabview/tabview.css
+++ b/browser/themes/winstripe/browser/tabview/tabview.css
@@ -19,16 +19,17 @@ body {
 
 .tab {
   padding: 4px 6px 6px 4px;
   border: 1px solid rgba(230,230,230,1);
   background-color: rgba(245,245,245,1);
   -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,
 .cached-thumb {
   border: 1px solid rgba(0,0,0,0.2);
 }
 
 .thumb-shadow {