Bug 614091 - having 4 or more tabs, zooming in and switching to portrait to landscape will show part of the tab side panel [r=mfinkle]

mobile/chrome/content/browser.js

@@ -249,10 +249,16 @@ var Browser = {
     // Saved the scrolls values before the resizing of the window, to restore
     // the scrollbox position once the resize has finished
     window.addEventListener("MozBeforeResize", function(aEvent) {
+      if (aEvent.target != window)
+        return;
+
       let { x: x1, y: y1 } = Browser.getScrollboxPosition(Browser.controlsScrollboxScroller);
       let { x: x2, y: y2 } = Browser.getScrollboxPosition(Browser.pageScrollboxScroller);
+      let [,, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
 
-      Browser.controlsPosition = { x: x1, y: y2, hideSidebars: Browser.controlsPosition ? Browser.controlsPosition.hideSidebars : true };
+      let shouldHideSidebars = Browser.controlsPosition ? Browser.controlsPosition.hideSidebars : true;
+      Browser.controlsPosition = { x: x1, y: y2, hideSidebars: shouldHideSidebars,
+                                   leftSidebar: leftWidth, rightSidebar: rightWidth };
     }, false);
 
     function resizeHandler(e) {
@@ -277,12 +283,20 @@ var Browser = {
       BrowserUI.sizeControls(w, h);
 
       // Restore the previous scroll position
-      if (Browser.controlsPosition.hideSidebars) {
-        Browser.controlsPosition.hideSidebars = false;
+      let restorePosition = Browser.controlsPosition;
+      if (restorePosition.hideSidebars) {
+        restorePosition.hideSidebars = false;
         Browser.hideSidebars();
       } else {
-        Browser.controlsScrollboxScroller.scrollTo(Browser.controlsPosition.x, 0);
-        Browser.pageScrollboxScroller.scrollTo(0, Browser.controlsPosition.y);
+        // Handle Width transformation of the tabs sidebar
+        if (restorePosition.x) {
+          let [,, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
+          let delta = ((restorePosition.leftSidebar - leftWidth) || (restorePosition.rightSidebar - rightWidth));
+          restorePosition.x += (restorePosition.x == leftWidth) ? delta : -delta;
+        }
+
+        Browser.controlsScrollboxScroller.scrollTo(restorePosition.x, 0);
+        Browser.pageScrollboxScroller.scrollTo(0, restorePosition.y);
         Browser.tryFloatToolbar(0, 0);
       }
 

mobile/chrome/content/tabs.xml

@@ -187,7 +187,7 @@
             let lastBox = this.children.lastChild.getBoundingClientRect();
 
             // XXX we can do better than using a constant here
-            let columnsCount = Math.ceil(this.children.childNodes.length / Math.floor(this.children.getBoundingClientRect().height / (firstBox.heigth + 4)));
+            let columnsCount = Math.ceil(this.children.childNodes.length / Math.floor(this.children.getBoundingClientRect().height / (firstBox.height + 4)));
             if (this._columnsCount != columnsCount) {
               let width = Math.max(lastBox.right - firstBox.left, firstBox.right - lastBox.left);
               // XXX we can do better than using a constant

mobile/chrome/tests/Makefile.in

@@ -85,6 +85,12 @@ _BROWSER_FILES = \
   browser_upgrade.rdf\
   $(NULL)
 
+ifndef ANDROID
+ifndef MOZ_PLATFORM_MAEMO
+_BROWSER_FILES +=  browser_sidebars.js
+endif
+endif
+
 libs:: $(_BROWSER_FILES)
 	$(INSTALL) $(foreach f,$^,"$f") $(DEPTH)/_tests/testing/mochitest/browser/$(relativesrcdir)
 

mobile/chrome/tests/browser_sidebars.js

@@ -0,0 +1,121 @@
+let testURL_01 = chromeRoot + "browser_blank_01.html";
+
+let newTabs = [];
+let gCurrentTest = null;
+let gTests = [];
+
+//------------------------------------------------------------------------------
+// Iterating tests by shifting test out one by one as runNextTest is called.
+function runNextTest() {
+  // Run the next test until all tests completed
+  if (gTests.length > 0) {
+    gCurrentTest = gTests.shift();
+    info(gCurrentTest.desc);
+    gCurrentTest.run();
+  }
+  else {
+    // Close the awesome panel just in case
+    BrowserUI.activePanel = null;
+    finish();
+  }
+}
+
+
+//------------------------------------------------------------------------------
+// Entry point (must be named "test")
+function test() {
+  // This test is async
+  waitForExplicitFinish();
+
+  //Add new tab
+  newTabs.push(Browser.addTab(testURL_01, true));
+  let tabs = document.getElementById("tabs");
+  ok(tabs._columnsCount == 1, "Tabs layout should be on one column");
+
+  runNextTest();
+
+}
+
+function checkSidebars(aLeftVisible, aRightVisible) {
+  let [leftVisibility, rightVisibility, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
+  ok(Math.abs(leftVisibility - aLeftVisible) < 0.2, (leftWidth * aLeftVisible) + "px of the left sidebar should be visible");
+  ok(Math.abs(rightVisibility - aRightVisible) < 0.2, (rightWidth * aRightVisible) + "px of the right sidebar should be visible");
+}
+
+function checkOnResize(aCallback) {
+  let [leftVisibility, rightVisibility, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
+
+  window.addEventListener("resize", function() {
+    window.removeEventListener("resize", arguments.callee, false);
+    setTimeout(function() {
+      checkSidebars(leftVisibility, rightVisibility);
+      window.addEventListener("resize", function() {
+        window.removeEventListener("resize", arguments.callee, false);
+        setTimeout(function() {
+          checkSidebars(leftVisibility, rightVisibility);
+          aCallback();
+        }, 0);
+      }, false);
+      window.resizeTo(800, 480);
+    }, 0);
+  }, false);
+  window.resizeTo(480, 800);
+}
+
+gTests.push({
+  desc: "Testing horizontal positionning of the sidebars for one column",
+
+  run: function() {
+    checkSidebars(0, 0);
+    checkOnResize(gCurrentTest.checkLeftVisible);
+  },
+
+  checkLeftVisible: function() {
+    Browser.controlsScrollboxScroller.scrollTo(0, 0);
+    checkSidebars(1, 0);
+    checkOnResize(gCurrentTest.checkRightVisible);
+  },
+
+  checkRightVisible: function() {
+    let [,, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
+    Browser.controlsScrollboxScroller.scrollTo(leftWidth + rightWidth, 0);
+    checkSidebars(0, 1);
+    checkOnResize(runNextTest);
+  }
+});
+
+
+gTests.push({
+  desc: "Testing horizontal positionning of the sidebars for multiple columns",
+
+  run: function() {
+    newTabs.push(Browser.addTab(testURL_01, true));
+    newTabs.push(Browser.addTab(testURL_01, true));
+    newTabs.push(Browser.addTab(testURL_01, true));
+    newTabs.push(Browser.addTab(testURL_01, true));
+    newTabs.push(Browser.addTab(testURL_01, true));
+    newTabs.push(Browser.addTab(testURL_01, true));
+    newTabs.push(Browser.addTab(testURL_01, true));
+    let tabs = document.getElementById("tabs");
+    ok(tabs._columnsCount > 1, "Tabs layout should be on multiple columns");
+
+    checkSidebars(0, 0);
+    checkOnResize(gCurrentTest.checkLeftVisible);
+  },
+
+  checkLeftVisible: function() {
+    Browser.controlsScrollboxScroller.scrollTo(0, 0);
+    checkSidebars(1, 0);
+    checkOnResize(gCurrentTest.checkRightVisible);
+  },
+
+  checkRightVisible: function() {
+    let [,, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
+    Browser.controlsScrollboxScroller.scrollTo(leftWidth + rightWidth, 0);
+    checkSidebars(0, 1);
+    checkOnResize(function() {
+      Browser.hideSidebars();
+      runNextTest();
+    });
+  }
+});