Bug 677669 - Always show the tab bar in tablet mode [r=mfinkle]

mobile/chrome/content/browser-ui.js

@@ -186,6 +186,8 @@ var BrowserUI = {
   },
 
   lockToolbar: function lockToolbar() {
+    if (Elements.urlbarState.getAttribute("tablet"))
+      return;
     this._toolbarLocked++;
     document.getElementById("toolbar-moveable-container").top = "0";
     if (this._toolbarLocked == 1)
@@ -379,11 +381,6 @@ var BrowserUI = {
     return this._toolbarH;
   },
 
-  get sidebarW() {
-    delete this._sidebarW;
-    return this._sidebarW = Elements.controls.getBoundingClientRect().width;
-  },
-
   sizeControls: function(windowW, windowH) {
     // tabs
     document.getElementById("tabs").resize();
@@ -553,10 +550,12 @@ var BrowserUI = {
 
   updateTabletLayout: function updateTabletLayout() {
     let tabletPref = Services.prefs.getIntPref("browser.ui.layout.tablet");
-    if (tabletPref == 1 || (tabletPref == -1 && Util.isTablet()))
+    if (tabletPref == 1 || (tabletPref == -1 && Util.isTablet())) {
+      this.unlockToolbar();
       Elements.urlbarState.setAttribute("tablet", "true");
-    else
+    } else {
       Elements.urlbarState.removeAttribute("tablet");
+    }
   },
 
   update: function(aState) {

mobile/chrome/content/browser.js

@@ -1038,7 +1038,7 @@ var Browser = {
   },
 
   tryFloatToolbar: function tryFloatToolbar(dx, dy) {
-    if (this.floatedWhileDragging)
+    if (this.floatedWhileDragging || Elements.urlbarState.getAttribute("tablet"))
       return;
 
     let [leftvis, ritevis, leftw, ritew] = Browser.computeSidebarVisibility(dx, dy);
@@ -2897,7 +2897,6 @@ Tab.prototype = {
     let notification = this._notification = document.createElement("notificationbox");
     notification.classList.add("inputHandler");
 
-    // Create the browser using the current width the dynamically size the height
     let browser = this._browser = document.createElement("browser");
     browser.setAttribute("class", "viewable-width viewable-height");
     this._chromeTab.linkedBrowser = browser;
@@ -3151,15 +3150,18 @@ function rendererFactory(aBrowser, aCanvas) {
  */
 var ViewableAreaObserver = {
   get width() {
-    return this._width || window.innerWidth;
+    let width = this._width || window.innerWidth;
+    if (Elements.urlbarState.getAttribute("tablet")) {
+      let sidebarWidth = Math.round(Elements.tabs.getBoundingClientRect().width);
+      width -= sidebarWidth;
+    }
+    return width;
   },
 
   get height() {
     let height = (this._height || window.innerHeight);
-    if (Elements.urlbarState.getAttribute("tablet")) {
+    if (Elements.urlbarState.getAttribute("tablet"))
-      let toolbarHeight = Math.round(document.getElementById("toolbar-main").getBoundingClientRect().height);
+      height -= BrowserUI.toolbarH;
-      height -= toolbarHeight;
-    }
     return height;
   },
 

mobile/chrome/content/browser.xul

@@ -198,7 +198,7 @@
   <stack flex="1" id="stack">
     <scrollbox id="controls-scrollbox" style="overflow: hidden; -moz-box-orient: horizontal; position: relative;" flex="1" observes="bcast_urlbarState">
       <vbox id="tabs-sidebar" class="sidebar" observes="bcast_uidiscovery">
-        <spacer class="toolbar-height"/>
+        <spacer class="toolbar-height" id="tabs-spacer" observes="bcast_urlbarState"/>
         <!-- Left toolbar -->
         <vbox id="tabs-container" class="panel-dark" flex="1">
           <vbox id="tabs" flex="1"
@@ -213,7 +213,7 @@
       </vbox>
 
       <!-- Page Area -->
-      <stack>
+      <stack id="page-stack" observes="bcast_urlbarState">
         <scrollbox id="page-scrollbox">
           <vbox>
             <!-- Main Toolbar -->

mobile/themes/core/browser.css

@@ -1575,46 +1575,6 @@ setting {
   to { -moz-transform: translateX(0); }
 }
 
-/* Tablet mode */
-
-.spacer-actionbar,
-.button-actionbar {
-  visibility: collapse;
-}
-
-.button-actionbar[disabled="true"] {
-  opacity: 0.5;
-}
-
-.button-actionbar:hover:active {
-  background-color: #8db8d8;
-}
-
-#toolbar-main[tablet="true"] > .spacer-actionbar,
-#toolbar-main[tablet="true"] > .button-actionbar {
-  visibility: visible;
-}
-
-#controls-scrollbox[tablet="true"] > #controls-sidebar {
-  visibility: collapse;
-}
-
-#controls-scrollbox[tablet="true"] > #tabs-sidebar {
-  border: none;
-  position: fixed;
-  top: -moz-calc(@touch_button_xlarge@ + @margin_normal@);
-  visibility: collapse;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
-  right: 0;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
-  left: 0;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
-  visibility: visible;
-}
-
 /* Text selection handles */
 
 #selectionhandle-start,
@@ -1640,4 +1600,6 @@ setting {
   #search-engines-popup {
     max-width: -moz-calc(@tablet_panel_minwidth@);
   }
-}
+}
+
+%include tablet.css

mobile/themes/core/gingerbread/browser.css

@@ -1545,46 +1545,6 @@ setting {
   to { -moz-transform: translateX(0); }
 }
 
-/* Tablet mode */
-
-.spacer-actionbar,
-.button-actionbar {
-  visibility: collapse;
-}
-
-.button-actionbar[disabled="true"] {
-  opacity: 0.5;
-}
-
-.button-actionbar:hover:active {
-  background-color: #8db8d8;
-}
-
-#toolbar-main[tablet="true"] > .spacer-actionbar,
-#toolbar-main[tablet="true"] > .button-actionbar {
-  visibility: visible;
-}
-
-#controls-scrollbox[tablet="true"] > #controls-sidebar {
-  visibility: collapse;
-}
-
-#controls-scrollbox[tablet="true"] > #tabs-sidebar {
-  border: none;
-  position: fixed;
-  top: -moz-calc(@touch_button_xlarge@ + @margin_normal@);
-  visibility: collapse;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
-  right: 0;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
-  left: 0;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
-  visibility: visible;
-}
-
 /* Text selection handles */
 
 #selectionhandle-start,
@@ -1603,11 +1563,4 @@ setting {
   list-style-image: url("chrome://browser/skin/images/handle-end.png");
 }
 
-@media (min-width: @tablet_panel_minwidth@) {
+%include ../tablet.css
-  #awesome-panels {
-    -moz-box-shadow: 0px 0px @shadow_width_small@ black;
-  }
-  #search-engines-popup {
-    max-width: -moz-calc(@tablet_panel_minwidth@);
-  }
-}

mobile/themes/core/honeycomb/browser.css

@@ -37,6 +37,7 @@
 
 %filter substitution
 %include defines.inc
+%define honeycomb 1
 
 /* main toolbar (URL bar) -------------------------------------------------- */
 #toolbar-main {
@@ -1694,42 +1695,6 @@ setting {
   to { -moz-transform: translateX(0); }
 }
 
-/* Tablet mode */
-
-.spacer-actionbar,
-.button-actionbar {
-  visibility: collapse;
-}
-
-.button-actionbar[disabled="true"] {
-  opacity: 0.5;
-}
-
-#toolbar-main[tablet="true"] > .spacer-actionbar,
-#toolbar-main[tablet="true"] > .button-actionbar {
-  visibility: visible;
-}
-
-#controls-scrollbox[tablet="true"] > #controls-sidebar {
-  visibility: collapse;
-}
-
-#controls-scrollbox[tablet="true"] > #tabs-sidebar {
-  border: none;
-  position: fixed;
-  top: @touch_button_xlarge@;
-  visibility: collapse;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
-  left: 0;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
-  right: 0;
-}
-#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
-  visibility: visible;
-}
-
 /* Text selection handles */
 
 #selectionhandle-start,
@@ -1814,3 +1779,5 @@ setting {
   }
 
 }
+
+%include ../tablet.css

mobile/themes/core/tablet.css

@@ -0,0 +1,70 @@
+
+.spacer-actionbar,
+.button-actionbar {
+  visibility: collapse;
+}
+
+.button-actionbar[disabled="true"] {
+  opacity: 0.5;
+}
+
+%ifndef honeycomb
+.button-actionbar:hover:active {
+  background-color: #8db8d8;
+}
+%endif
+
+#toolbar-main[tablet="true"] > .spacer-actionbar,
+#toolbar-main[tablet="true"] > .button-actionbar {
+  visibility: visible;
+}
+#toolbar-main[tablet="true"] > #tool-tabs {
+  visibility: collapse;
+}
+
+#controls-scrollbox[tablet="true"] > #controls-sidebar {
+  visibility: collapse;
+}
+
+#tabs-spacer[tablet="true"]  {
+  visibility: collapse;
+}
+
+@media (@orientation@: portrait) {
+  #toolbar-main[tablet="true"] > #tool-tabs {
+    visibility: visible;
+  }
+
+  #controls-scrollbox[tablet="true"] > #tabs-sidebar {
+    border: none;
+%ifdef honeycomb
+    top: @touch_button_xlarge@;
+%else
+    top: -moz-calc(@touch_button_xlarge@ + @margin_normal@);
+%endif
+    visibility: collapse;
+  }
+
+  #controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
+    left: 0;
+  }
+  #controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
+    right: 0;
+  }
+
+  #controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
+    position: fixed;
+    visibility: visible;
+  }
+}
+
+%ifndef honeycomb
+@media (min-width: @tablet_panel_minwidth@) {
+  #awesome-panels {
+    -moz-box-shadow: 0px 0px @shadow_width_small@ black;
+  }
+  #search-engines-popup {
+    max-width: -moz-calc(@tablet_panel_minwidth@);
+  }
+}
+%endif