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]
authorVivien Nicolas <21@vingtetun.org>
Wed, 15 Dec 2010 21:58:05 +0100
changeset 67120 1d5dd368e6eac3744bf1fbc0fd06dd9b133086b3
parent 67119 1f0022813952d594959bb1740afeccc15614813a
child 67121 d2a37f807198b0f8a22acfa0620f85b55410bc7a
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs614091
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
mobile/chrome/content/tabs.xml
mobile/chrome/tests/Makefile.in
mobile/chrome/tests/browser_sidebars.js
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -244,20 +244,26 @@ var Browser = {
     }
 
     // Init the cache used in the resize handler
     window.cachedWidth = window.innerWidth;
 
     // 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);
-
-      Browser.controlsPosition = { x: x1, y: y2, hideSidebars: Browser.controlsPosition ? Browser.controlsPosition.hideSidebars : true };
+      let [,, leftWidth, rightWidth] = Browser.computeSidebarVisibility();
+
+      let shouldHideSidebars = Browser.controlsPosition ? Browser.controlsPosition.hideSidebars : true;
+      Browser.controlsPosition = { x: x1, y: y2, hideSidebars: shouldHideSidebars,
+                                   leftSidebar: leftWidth, rightSidebar: rightWidth };
     }, false);
 
     function resizeHandler(e) {
       if (e.target != window)
         return;
 
       let w = window.innerWidth;
       let h = window.innerHeight;
@@ -272,22 +278,30 @@ var Browser = {
       Browser.styles["window-width"].width = w + "px";
       Browser.styles["window-height"].height = h + "px";
       Browser.styles["toolbar-height"].height = toolbarHeight + "px";
 
       // Tell the UI to resize the browser controls
       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);
       }
 
       let oldWidth = window.cachedWidth || w;
       window.cachedWidth = w;
 
       for (let i = Browser.tabs.length - 1; i >= 0; i--) {
         let tab = Browser.tabs[i];
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@@ -182,17 +182,17 @@
       <field name="_columnsCount">1</field>
       <method name="_updateWidth">
         <body>
           <![CDATA[
             let firstBox = this.children.firstChild.getBoundingClientRect();
             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
               this.children.style.width = (width + 20) + "px";
               this._columnsCount = columnsCount;
             }
           ]]>
         </body>
--- a/mobile/chrome/tests/Makefile.in
+++ b/mobile/chrome/tests/Makefile.in
@@ -80,16 +80,22 @@ include $(topsrcdir)/config/rules.mk
   browser_vkb.js \
   browser_viewport.js \
   browser_viewport.sjs \
   browser_title.sjs \
   browser_install.xml \
   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)
 
 libs::
 	rm -rf $(TESTXPI)
 	$(NSINSTALL) -D $(TESTXPI)
 	if [ -d $(ADDONSRC) ]; then \
 		$(EXIT_ON_ERROR) \
new file mode 100644
--- /dev/null
+++ b/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();
+    });
+  }
+});