Bug 549562 - Position the toolbar customization popup in repositionDialog() and make it invisible until it's positioned and loaded. r=gavin

browser/base/content/browser.js

@@ -3310,8 +3310,10 @@ function BrowserCustomizeToolbar()
 
   if (gCustomizeSheet) {
     var sheetFrame = document.getElementById("customizeToolbarSheetIFrame");
+    var panel = document.getElementById("customizeToolbarSheetPopup");
     sheetFrame.hidden = false;
     sheetFrame.toolbox = gNavToolbox;
+    sheetFrame.panel = panel;
 
     // The document might not have been loaded yet, if this is the first time.
     // If it is already loaded, reload it so that the onload initialization code
@@ -3321,9 +3323,14 @@ function BrowserCustomizeToolbar()
     else
       sheetFrame.setAttribute("src", customizeURL);
 
-    document.getElementById("customizeToolbarSheetPopup")
-            .openPopup(gNavToolbox, "after_start", 0, 0);
-
+    // Open the panel, but make it invisible until the iframe has loaded so
+    // that the user doesn't see a white flash.
+    panel.style.visibility = "hidden";
+    gNavToolbox.addEventListener("beforecustomization", function () {
+      gNavToolbox.removeEventListener("beforecustomization", arguments.callee, false);
+      panel.style.removeProperty("visibility");
+    }, false);
+    panel.openPopup(gNavToolbox, "after_start", 0, 0);
     return sheetFrame.contentWindow;
   } else {
     return window.openDialog(customizeURL,

browser/base/content/browser.xul

@@ -375,8 +375,7 @@
     <tooltip id="bhTooltip"/>
 
     <panel id="customizeToolbarSheetPopup"
-           noautohide="true"
-           onpopupshown="this.moveTo(this.boxObject.screenX + (window.innerWidth - this.boxObject.width) / 2, this.boxObject.screenY);">
+           noautohide="true">
       <iframe id="customizeToolbarSheetIFrame"
               style="&dialog.style;"
               hidden="true"/>

browser/base/content/test/browser_customize.js

@@ -29,15 +29,29 @@ function testCustomizeFrameLoaded()
   }
 
   var framedoc = document.getElementById("customizeToolbarSheetIFrame").contentDocument;
-  var b = framedoc.getElementById("donebutton");
 
-  b.focus();
-  framedoc.getElementById("donebutton").doCommand();
+  var panelX = panel.boxObject.screenX;
+  var iconModeList = framedoc.getElementById("modelist");
+  iconModeList.addEventListener("popupshown", function (e) {
+    iconModeList.removeEventListener("popupshown", arguments.callee, false);
+    SimpleTest.executeSoon(function () {
+      is(panel.boxObject.screenX, panelX, "toolbar customization panel shouldn't move when the iconmode menulist is opened");
+      iconModeList.open = false;
+    
+      var b = framedoc.getElementById("donebutton");
+      b.focus();
+      b.doCommand();
+    });
+  }, false);
+  iconModeList.open = true;
 }
   
-function testCustomizePopupHidden()
+function testCustomizePopupHidden(e)
 {
   var panel = document.getElementById("customizeToolbarSheetPopup");
+  if (e.target != panel)
+    return;
+
   panel.removeEventListener("popuphidden", testCustomizePopupHidden, false);
   is(document.activeElement, document.documentElement, "focus after customize done");
 

toolkit/content/customizeToolbar.js

@@ -50,12 +50,13 @@ function onLoad()
 {
   if ("arguments" in window && window.arguments[0]) {
     InitWithToolbox(window.arguments[0]);
-    repositionDialog();
+    repositionDialog(window);
   }
   else if (window.frameElement &&
            "toolbox" in window.frameElement) {
     gToolboxSheet = true;
     InitWithToolbox(window.frameElement.toolbox);
+    repositionDialog(window.frameElement.panel);
   }
 }
 
@@ -114,12 +115,17 @@ function initDialog()
   wrapToolbarItems();
 }
 
-function repositionDialog()
+function repositionDialog(aWindow)
 {
   // Position the dialog touching the bottom of the toolbox and centered with
   // it.
+  if (!aWindow)
+    return;
+
   var width;
-  if (document.documentElement.hasAttribute("width"))
+  if (aWindow != window)
+    width = aWindow.getBoundingClientRect().width;
+  else if (document.documentElement.hasAttribute("width"))
     width = document.documentElement.getAttribute("width");
   else
     width = parseInt(document.documentElement.style.width);
@@ -127,7 +133,7 @@ function repositionDialog()
                 + ((gToolbox.boxObject.width - width) / 2);
   var screenY = gToolbox.boxObject.screenY + gToolbox.boxObject.height;
 
-  window.moveTo(screenX, screenY);
+  aWindow.moveTo(screenX, screenY);
 }
 
 function removeToolboxListeners()