Bug 677669 - Always show the tab bar in tablet mode [r=mfinkle]
☠☠ backed out by 4be2da039559 ☠ ☠
authorMatt Brubeck <mbrubeck@mozilla.com>
Wed, 07 Sep 2011 13:47:25 -0700
changeset 76648 24d45fb7142192c524b1e3ad2de317833b925bc2
parent 76647 2cbb9f7ffe32d328595e8ab9415533a85d8718ea
child 76649 8d3475475a0be3a6ff752e6f9d4cda7469734863
push id3
push userfelipc@gmail.com
push dateFri, 30 Sep 2011 20:09:13 +0000
reviewersmfinkle
bugs677669
milestone9.0a1
Bug 677669 - Always show the tab bar in tablet mode [r=mfinkle]
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.js
mobile/chrome/content/browser.xul
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/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -181,16 +181,18 @@ var BrowserUI = {
 
   _toolbarLocked: 0,
 
   isToolbarLocked: function isToolbarLocked() {
     return this._toolbarLocked;
   },
 
   lockToolbar: function lockToolbar() {
+    if (Elements.urlbarState.getAttribute("tablet"))
+      return;
     this._toolbarLocked++;
     document.getElementById("toolbar-moveable-container").top = "0";
     if (this._toolbarLocked == 1)
       Browser.forceChromeReflow();
   },
 
   unlockToolbar: function unlockToolbar() {
     if (!this._toolbarLocked)
@@ -374,21 +376,16 @@ var BrowserUI = {
   get toolbarH() {
     if (!this._toolbarH) {
       let toolbar = document.getElementById("toolbar-main");
       this._toolbarH = toolbar.boxObject.height;
     }
     return this._toolbarH;
   },
 
-  get sidebarW() {
-    delete this._sidebarW;
-    return this._sidebarW = Elements.controls.getBoundingClientRect().width;
-  },
-
   sizeControls: function(windowW, windowH) {
     // tabs
     document.getElementById("tabs").resize();
     AwesomeScreen.doResize(windowW, windowH);
 
     // content navigator helper
     document.getElementById("content-navigator").contentHasChanged();
   },
@@ -548,20 +545,22 @@ var BrowserUI = {
 
   observe: function observe(aSubject, aTopic, aData) {
     if (aTopic == "nsPref:changed" && aData == "browser.ui.layout.tablet")
       this.updateTabletLayout();
   },
 
   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) {
     let browser = Browser.selectedBrowser;
 
     switch (aState) {
       case TOOLBARSTATE_LOADED:
         this._updateToolbar();
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -1033,17 +1033,17 @@ var Browser = {
         snappedX = -ritevis * ritew * dirVal;
       }
     }
 
     return Math.round(snappedX);
   },
 
   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);
     if (leftvis > 0 || ritevis > 0) {
       BrowserUI.lockToolbar();
       this.floatedWhileDragging = true;
     }
   },
@@ -2892,17 +2892,16 @@ Tab.prototype = {
   _createBrowser: function _createBrowser(aURI, aInsertBefore) {
     if (this._browser)
       throw "Browser already exists";
 
     // Create a notification box around the browser
     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;
 
     browser.setAttribute("type", "content");
 
     let useRemote = Services.prefs.getBoolPref("browser.tabs.remote");
     let useLocal = Util.isLocalScheme(aURI);
@@ -3146,25 +3145,28 @@ function rendererFactory(aBrowser, aCanv
 
 /* ViewableAreaObserver is an helper object where width/height represents the
  * size of the currently viewable area in pixels. This is use instead of
  * window.innerHeight/innerWidth because some keyboards does not resize the
  * window but floats over it.
  */
 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")) {
-      let toolbarHeight = Math.round(document.getElementById("toolbar-main").getBoundingClientRect().height);
-      height -= toolbarHeight;
-    }
+    if (Elements.urlbarState.getAttribute("tablet"))
+      height -= BrowserUI.toolbarH;
     return height;
   },
 
   _isKeyboardOpened: true,
   get isKeyboardOpened() {
     return this._isKeyboardOpened;
   },
 
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -193,32 +193,32 @@
     <key id="key_newTab" key="t" modifiers="accel" command="cmd_newTab"/>
     <key id="key_closeTab" key="w" modifiers="accel" command="cmd_closeTab"/>
     <key id="key_undoCloseTab" key="t" modifiers="accel,shift" command="cmd_undoCloseTab"/>
   </keyset>
 
   <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"
                 onselect="BrowserUI.selectTab(this);"
                 onreloadtab="BrowserUI.undoCloseTab()"
                 onclosetab="BrowserUI.closeTab(this)"
                 onclosereloadtab="this._container.removeTab(this)"/>
           <hbox id="tabs-controls">
             <toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab"/>
           </hbox>
         </vbox>
       </vbox>
 
       <!-- Page Area -->
-      <stack>
+      <stack id="page-stack" observes="bcast_urlbarState">
         <scrollbox id="page-scrollbox">
           <vbox>
             <!-- Main Toolbar -->
             <box id="toolbar-container" class="panel-dark toolbar-height">
               <box id="toolbar-moveable-container" observes="bcast_uidiscovery">
                 <toolbar id="toolbar-main" class="panel-dark viewable-width" observes="bcast_urlbarState">
                   <toolbarbutton id="tool-back2" class="tool-back button-actionbar" command="cmd_back"/>
                   <toolbarbutton id="tool-forward2" class="tool-forward button-actionbar" command="cmd_forward"/>
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -1570,56 +1570,16 @@ setting {
   from { -moz-transform: translateX(0); }
   10% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); }
   45% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); }
   55% { -moz-transform: translateX(@sidebar_width_minimum@); }
   90% { -moz-transform: translateX(@sidebar_width_minimum@); }
   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,
 #selectionhandle-end {
   min-width: 35px !important;
   width: 35px !important;
   padding: 0 !important;
   margin: 0 !important;
@@ -1635,9 +1595,11 @@ setting {
 
 @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@);
   }
-}
\ No newline at end of file
+}
+
+%include tablet.css
--- a/mobile/themes/core/gingerbread/browser.css
+++ b/mobile/themes/core/gingerbread/browser.css
@@ -1540,56 +1540,16 @@ setting {
   from { -moz-transform: translateX(0); }
   10% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); }
   45% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); }
   55% { -moz-transform: translateX(@sidebar_width_minimum@); }
   90% { -moz-transform: translateX(@sidebar_width_minimum@); }
   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,
 #selectionhandle-end {
   min-width: 35px !important;
   width: 35px !important;
   padding: 0 !important;
   margin: 0 !important;
@@ -1598,16 +1558,9 @@ setting {
 #selectionhandle-start {
   list-style-image: url("chrome://browser/skin/images/handle-start.png");
 }
 
 #selectionhandle-end {
   list-style-image: url("chrome://browser/skin/images/handle-end.png");
 }
 
-@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@);
-  }
-}
+%include ../tablet.css
--- a/mobile/themes/core/honeycomb/browser.css
+++ b/mobile/themes/core/honeycomb/browser.css
@@ -32,16 +32,17 @@
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
 
 %filter substitution
 %include defines.inc
+%define honeycomb 1
 
 /* main toolbar (URL bar) -------------------------------------------------- */
 #toolbar-main {
   -moz-appearance: none;
   -moz-box-align: center;
   padding: 0;
   background: @color_toolbar_background@;
   border: none;
@@ -1689,52 +1690,16 @@ setting {
   from { -moz-transform: translateX(0); }
   10% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); }
   45% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); }
   55% { -moz-transform: translateX(@sidebar_width_minimum@); }
   90% { -moz-transform: translateX(@sidebar_width_minimum@); }
   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,
 #selectionhandle-end {
   min-width: 35px !important;
   width: 35px !important;
   padding: 0 !important;
   margin: 0 !important;
@@ -1809,8 +1774,10 @@ setting {
   }
   
   #search-engines-list > .action-button > .button-box > .button-text {
     text-align: start;
     font-size: @font_tiny@ !important;
   }
 
 }
+
+%include ../tablet.css
new file mode 100644
--- /dev/null
+++ b/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