Bug 690816 (1/2) - Refactor TabsPopup and tab sidebar show/hide methods [r=lucasr]

mobile/chrome/content/TabletSidebar.js

@@ -0,0 +1,114 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla Mobile Browser.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Matt Brubeck <mbrubeck@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * 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 ***** */
+
+
+var TabletSidebar = {
+  _grabbed: false, // true while the user is dragging the sidebar
+  _offset: 0, // tracks how far the sidebar has been dragged
+  _slideMultiplier: 1, // set greater than 1 to amplify sidebar drags (makes swiping easier)
+
+  get visible() {
+    return Elements.urlbarState.hasAttribute("tablet_sidebar");
+  },
+
+  toggle: function toggle() {
+    if (this.visible)
+      this.hide();
+    else
+      this.show();
+  },
+
+  show: function show() {
+    Elements.urlbarState.setAttribute("tablet_sidebar", "true");
+    ViewableAreaObserver.update();
+  },
+
+  hide: function hide() {
+    Elements.urlbarState.removeAttribute("tablet_sidebar");
+    ViewableAreaObserver.update();
+  },
+
+  /**
+   * Call this function in landscape tablet mode to begin dragging the tab sidebar.
+   * Hiding the sidebar makes the viewable area grow; showing the sidebar makes it shrink.
+   */
+  grab: function grab() {
+    this._grabbed = true;
+    ViewableAreaObserver.update();
+
+    let ltr = (Util.localeDir == Util.LOCALE_DIR_LTR);
+
+    if (this.visible) {
+      this._setOffset(ltr ? 0 : ViewableAreaObserver.sidebarWidth);
+      this._slideMultiplier = 3;
+    } else {
+      // If the tab bar is hidden, un-collapse it but scroll it offscreen.
+      this.show();
+      this._setOffset(ltr ? ViewableAreaObserver.sidebarWidth : 0);
+      this._slideMultiplier = 6;
+    }
+  },
+
+  /** Move the tablet sidebar by aX pixels. */
+  slideBy: function slideBy(aX) {
+    this._setOffset(this._offset + (aX * this._slideMultiplier));
+  },
+
+  /** Call this when tablet sidebar dragging is finished. */
+  ungrab: function ungrab() {
+    if (!this._grabbed)
+      return;
+    this._grabbed = false;
+
+    let finalOffset = this._offset;
+    this._setOffset(0);
+
+    let rtl = (Util.localeDir == Util.LOCALE_DIR_RTL);
+    if (finalOffset > (ViewableAreaObserver.sidebarWidth / 2) ^ rtl)
+      this.hide();
+    else
+      // we already called show() in grab; just need to update the width again.
+      ViewableAreaObserver.update();
+  },
+
+  /** Move the tablet sidebar. */
+  _setOffset: function _setOffset(aOffset) {
+    this._offset = aOffset;
+    let scrollX = Util.clamp(aOffset, 0, ViewableAreaObserver.sidebarWidth);
+    Browser.controlsScrollboxScroller.scrollTo(scrollX, 0);
+  }
+}

mobile/chrome/content/TabsPopup.js

@@ -61,22 +61,18 @@ var TabsPopup = {
     return this.button = document.getElementById("tool-tabs");
   },
 
-  hide: function hide() {
-    this._hidePortraitMenu();
+  get visible() {
+    return !this.box.hidden;
+  },
 
-    if (!Util.isPortrait()) {
-      Elements.urlbarState.removeAttribute("tablet_sidebar");
-      ViewableAreaObserver.update();
-    }
+  toggle: function toggle() {
+    if (this.visible)
+      this.hide();
+    else
+      this.show();
   },
 
   show: function show() {
-    if (!Util.isPortrait()) {
-      Elements.urlbarState.setAttribute("tablet_sidebar", "true");
-      ViewableAreaObserver.update();
-      return;
-    }
-
     while(this.list.firstChild)
       this.list.removeChild(this.list.firstChild);
 
@@ -123,18 +119,7 @@ var TabsPopup = {
     window.addEventListener("resize", this.resizeHandler, false);
   },
 
-  toggle: function toggle() {
-    if (this.visible)
-      this.hide();
-    else
-      this.show();
-  },
-
-  get visible() {
-    return Util.isPortrait() ? !this.box.hidden : Elements.urlbarState.hasAttribute("tablet_sidebar");
-  },
-
-  _hidePortraitMenu: function _hidePortraitMenu() {
+  hide: function hide() {
     if (!this.box.hidden) {
       this.box.hidden = true;
       BrowserUI.popPopup(this);
@@ -174,7 +159,7 @@ var TabsPopup = {
     if (aEvent.target != window)
       return;
     if (!Util.isPortrait())
-      this._hidePortraitMenu();
+      this.hide();
   },
 
   handleEvent: function handleEvent(aEvent) {

mobile/chrome/content/browser-scripts.js

@@ -108,6 +108,7 @@ XPCOMUtils.defineLazyGetter(this, "CommonUI", function() {
   ["SelectionHelper", "chrome://browser/content/SelectionHelper.js"],
   ["ContentPopupHelper", "chrome://browser/content/ContentPopupHelper.js"],
   ["SharingUI", "chrome://browser/content/SharingUI.js"],
+  ["TabletSidebar", "chrome://browser/content/TabletSidebar.js"],
   ["TabsPopup", "chrome://browser/content/TabsPopup.js"],
   ["MasterPasswordUI", "chrome://browser/content/MasterPasswordUI.js"],
 #ifdef MOZ_SERVICES_SYNC

mobile/chrome/content/browser-ui.js

@@ -1246,7 +1246,10 @@ var BrowserUI = {
         AppMenu.toggle();
         break;
       case "cmd_showTabs":
+        if (Util.isPortrait())
           TabsPopup.toggle();
+        else
+          TabletSidebar.toggle();
         break;
       case "cmd_newTab":
         this.newTab();

mobile/chrome/content/browser.js

@@ -1276,60 +1276,6 @@ var Browser = {
         this._handleErrorPage(aMessage);
         break;
     }
-  },
-
-  _grabbedSidebar: false, // true while the user is dragging the sidebar
-  _sidebarOffset: 0, // tracks how far the sidebar has been dragged
-  _slideMultiplier: 1, // set greater than 1 to amplify sidebar drags (makes swiping easier)
-
-  /**
-   * Call this function in landscape tablet mode to begin dragging the tab sidebar.
-   * Hiding the sidebar makes the viewable area grow; showing the sidebar makes it shrink.
-   */
-  grabSidebar: function grabSidebar() {
-    this._grabbedSidebar = true;
-    ViewableAreaObserver.update();
-
-    let ltr = (Util.localeDir == Util.LOCALE_DIR_LTR);
-
-    if (TabsPopup.visible) {
-      this._setSidebarOffset(ltr ? 0 : ViewableAreaObserver.sidebarWidth);
-      this._slideMultiplier = 3;
-    } else {
-      // If the tab bar is hidden, un-collapse it but scroll it offscreen.
-      TabsPopup.show();
-      this._setSidebarOffset(ltr ? ViewableAreaObserver.sidebarWidth : 0);
-      this._slideMultiplier = 6;
-    }
-  },
-
-  /** Move the tablet sidebar by aX pixels. */
-  slideSidebarBy: function slideSidebarBy(aX) {
-    this._setSidebarOffset(this._sidebarOffset + (aX * this._slideMultiplier));
-  },
-
-  /** Call this when tablet sidebar dragging is finished. */
-  ungrabSidebar: function ungrabSidebar() {
-    if (!this._grabbedSidebar)
-      return;
-    this._grabbedSidebar = false;
-
-    let finalOffset = this._sidebarOffset;
-    this._setSidebarOffset(0);
-
-    let rtl = (Util.localeDir == Util.LOCALE_DIR_RTL);
-    if (finalOffset > (ViewableAreaObserver.sidebarWidth / 2) ^ rtl)
-      TabsPopup.hide();
-    else
-      // we already called TabsPopup.show() in grabSidebar; just need to update the width again.
-      ViewableAreaObserver.update();
-  },
-
-  /** Move the tablet sidebar. */
-  _setSidebarOffset: function _setSidebarOffset(aOffset) {
-    this._sidebarOffset = aOffset;
-    let scrollX = Util.clamp(aOffset, 0, ViewableAreaObserver.sidebarWidth);
-    Browser.controlsScrollboxScroller.scrollTo(scrollX, 0);
   }
 };
 
@@ -1365,7 +1311,7 @@ Browser.MainDragger.prototype = {
     this._canGrabSidebar = false;
     // In landscape portrait mode, swiping from the left margin drags the tab sidebar.
     if (isTablet && !Util.isPortrait()) {
-      let grabSidebarMargin = TabsPopup.visible ? 30 : 5;
+      let grabSidebarMargin = TabletSidebar.visible ? 30 : 5;
       // Don't actually grab until we see whether the swipe is horizontal in dragMove.
       this._canGrabSidebar = ((Util.localeDir == Util.LOCALE_DIR_LTR)
                            ? (clientX - bcr.left < 30)
@@ -1380,7 +1326,7 @@ Browser.MainDragger.prototype = {
 
   dragStop: function dragStop(dx, dy, scroller) {
     if (this._grabSidebar) {
-      Browser.ungrabSidebar();
+      TabletSidebar.ungrab();
       return;
     }
 
@@ -1394,10 +1340,10 @@ Browser.MainDragger.prototype = {
   dragMove: function dragMove(dx, dy, scroller, aIsKinetic) {
     if (this._canGrabSidebar && !this._grabSidebar && dx) {
       this._grabSidebar = true;
-      Browser.grabSidebar();
+      TabletSidebar.grab();
     }
     if (this._grabSidebar) {
-      Browser.slideSidebarBy(dx);
+      TabletSidebar.slideBy(dx);
       return;
     }
 
@@ -3236,7 +3182,7 @@ function rendererFactory(aBrowser, aCanvas) {
 var ViewableAreaObserver = {
   get width() {
     let width = this._width || window.innerWidth;
-    if (!Browser._grabbedSidebar && Util.isTablet())
+    if (!TabletSidebar._grabbed && Util.isTablet())
       width -= this.sidebarWidth;
     return width;
   },

mobile/chrome/content/tabs.xml

@@ -201,7 +201,7 @@
 
             dragStop: function dragStop(dx, dy) {
               if (this._grabSidebar)
-                Browser.ungrabSidebar();
+                TabletSidebar.ungrab();
               dragger.dragStop(dx, dy, scroller);
             },
 
@@ -211,10 +211,10 @@
               if (!this._grabSidebar && hiddingPan) {
                 this._grabSidebar = dx && Util.isTablet() && !Util.isPortrait();
                 if (this._grabSidebar)
-                  Browser.grabSidebar();
+                  TabletSidebar.grab();
               }
               if (this._grabSidebar)
-                Browser.slideSidebarBy(dx);
+                TabletSidebar.slideBy(dx);
               return dragger.dragMove(dx, dy, scroller);
             }
           };

mobile/chrome/jar.mn

@@ -33,6 +33,7 @@ chrome.jar:
   content/SelectHelperUI.js            (content/SelectHelperUI.js)
   content/SelectionHelper.js           (content/SelectionHelper.js)
   content/SharingUI.js                 (content/SharingUI.js)
+  content/TabletSidebar.js             (content/TabletSidebar.js)
   content/TabsPopup.js                 (content/TabsPopup.js)
   content/MasterPasswordUI.js          (content/MasterPasswordUI.js)
 * content/content.js                   (content/content.js)