Bug 685310 - Make tab bar scroll vertically in tablet mode [r=mfinkle]

mobile/chrome/content/tabs.xml

@@ -162,7 +162,7 @@
 
   <binding id="tablist">
     <content>
-      <xul:scrollbox anonid="tabs-scrollbox" flex="1">
+      <xul:scrollbox anonid="tabs-scrollbox" class="tabs-scrollbox" flex="1">
         <xul:vbox class="tabs-list" anonid="tabs-children" />
       </xul:scrollbox>
       <xul:box class="tabs-list" anonid="tabs-undo"/>
@@ -285,7 +285,7 @@
             // We can't rely on getBoundingClientRect() for this.children height
             // it is not synced (sometimes, especially during resize) with the 
             // style.height rule
-            let columnsCount = Math.ceil(this.children.childNodes.length / Math.floor(parseInt(this.children.style.height) / (firstBox.height + 4)));
+            let columnsCount = Util.isTablet() ? 1 : Math.ceil(this.children.childNodes.length / Math.floor(parseInt(this.children.style.height) / (firstBox.height + 4)));
             if (this._columnsCount != columnsCount && window.innerWidth > 1) { // > 1 to ignore column resizing while the main window is loading
               let width = columnsCount * (COLUMN_MARGIN + firstBox.width);
               this.children.style.width = width + "px";

mobile/themes/core/browser.css

@@ -929,7 +929,7 @@ autocompleteresult.noresults > .autocomplete-item-container {
   -moz-box-align: start;
 }
 
-#tabs > scrollbox {
+#tabs > .tabs-scrollbox {
   max-width: 350px;
 }
 

mobile/themes/core/gingerbread/browser.css

@@ -879,7 +879,7 @@ autocompleteresult.noresults > .autocomplete-item-container {
   -moz-box-align: start;
 }
 
-#tabs > scrollbox {
+#tabs > .tabs-scrollbox {
   max-width: 350px;
 }
 

mobile/themes/core/honeycomb/browser.css

@@ -963,7 +963,7 @@ autocompleteresult.noresults > .autocomplete-item-container {
   -moz-box-align: start;
 }
 
-#tabs > scrollbox {
+#tabs > .tabs-scrollbox {
   max-width: 350px;
 }
 

mobile/themes/core/tablet.css

@@ -35,12 +35,17 @@
   background: #000;
 }
 
-#tabs[tablet="true"] > scrollbox {
+#tabs[tablet="true"] > .tabs-scrollbox {
   max-width: 200px;
+  -moz-box-orient: vertical;
 }
 
 #tabs[tablet="true"] .tabs-list {
-  -moz-column-width: 200px;
+}
+
+#tabs[tablet="true"] .tabs-list {
+  width: 200px;
+  -moz-column-width: auto;
   -moz-padding-end: 0px;
   -moz-padding-start: 0px;
 }