Bug 685310 - Make tab bar scroll vertically in tablet mode [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Thu, 08 Sep 2011 12:13:12 -0700
changeset 76750 9a3688f9cc24d4aca622f91cb0747fcb8c69bd02
parent 76749 6b2bda929c54a060edf52bc3c18a1a39b9a0a4d0
child 76751 65ce309835c9ff0f68bcbeaf86c001b2f86e44da
push id1806
push usermbrubeck@mozilla.com
push dateThu, 08 Sep 2011 19:14:25 +0000
treeherdermozilla-inbound@9c44e6575534 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs685310
milestone9.0a1
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 685310 - Make tab bar scroll vertically in tablet mode [r=mfinkle]
mobile/chrome/content/tabs.xml
mobile/themes/core/browser.css
mobile/themes/core/gingerbread/browser.css
mobile/themes/core/honeycomb/browser.css
mobile/themes/core/tablet.css
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@@ -157,17 +157,17 @@
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <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"/>
     </content>
     <implementation>
       <field name="children">document.getAnonymousElementByAttribute(this, "anonid", "tabs-children");</field>
       <field name="_scrollbox">document.getAnonymousElementByAttribute(this, "anonid", "tabs-scrollbox");</field>
       <field name="_tabsUndo">document.getAnonymousElementByAttribute(this, "anonid", "tabs-undo");</field>
@@ -280,17 +280,17 @@
             // XXX we can do better than using a constant
             const COLUMN_MARGIN = 20;
             let firstBox = this.children.firstChild.getBoundingClientRect();
             let lastBox = this.children.lastChild.getBoundingClientRect();
 
             // 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";
 
               // Clamp the sidebar width so it won't overflow the window. Only clamp
               // the scrollbox. The children need to be the full width.
               if (width > window.innerWidth - firstBox.width)
                 width = window.innerWidth - firstBox.width;
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -924,17 +924,17 @@ autocompleteresult.noresults > .autocomp
   -moz-border-end: @border_width_large@ solid #262629;
   background: #5e6166;
 }
 
 #tabs:-moz-locale-dir(rtl) {
   -moz-box-align: start;
 }
 
-#tabs > scrollbox {
+#tabs > .tabs-scrollbox {
   max-width: 350px;
 }
 
 #tabs .tabs-list {
   display: block;
   -moz-column-width: 121px;
   -moz-column-gap: 0;
   -moz-user-focus: ignore;
--- a/mobile/themes/core/gingerbread/browser.css
+++ b/mobile/themes/core/gingerbread/browser.css
@@ -874,17 +874,17 @@ autocompleteresult.noresults > .autocomp
   -moz-border-end: @border_width_large@ solid #262629;
   background: @color_background_default@;
 }
 
 #tabs:-moz-locale-dir(rtl) {
   -moz-box-align: start;
 }
 
-#tabs > scrollbox {
+#tabs > .tabs-scrollbox {
   max-width: 350px;
 }
 
 #tabs .tabs-list {
   display: block;
   -moz-column-width: 121px;
   -moz-column-gap: 0;
   -moz-user-focus: ignore;
--- a/mobile/themes/core/honeycomb/browser.css
+++ b/mobile/themes/core/honeycomb/browser.css
@@ -958,17 +958,17 @@ autocompleteresult.noresults > .autocomp
   -moz-border-end: @border_width_large@ solid #262629;
   background: @color_toolbar_background@;
 }
 
 #tabs:-moz-locale-dir(rtl) {
   -moz-box-align: start;
 }
 
-#tabs > scrollbox {
+#tabs > .tabs-scrollbox {
   max-width: 350px;
 }
 
 #tabs .tabs-list {
   display: block;
   -moz-column-width: 121px;
   -moz-column-gap: 0;
   -moz-user-focus: ignore;
--- a/mobile/themes/core/tablet.css
+++ b/mobile/themes/core/tablet.css
@@ -30,22 +30,27 @@
   visibility: collapse;
 }
 
 #tabs-container[tablet="true"] {
   -moz-border-end: 0px;
   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;
 }
 
 documenttab[tablet="true"] {
   width: 200px;
   padding: @padding_xxnormal@;
   -moz-margin-start: 0px;