Bug 1163319 - Pocket button in hamburger menu breaks layout. r=jaws, a=dolske
authorJustin Dolske <dolske@mozilla.com>
Sun, 10 May 2015 17:19:18 -0700
changeset 260452 32b69592b334
parent 260451 f4179577249b
child 260453 e3715677b2be
child 260455 e397816859ad
push id784
push userjdolske@mozilla.com
push date2015-05-11 00:19 +0000
treeherdermozilla-release@32b69592b334 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, dolske
bugs1163319
milestone38.0
Bug 1163319 - Pocket button in hamburger menu breaks layout. r=jaws, a=dolske
browser/components/customizableui/content/panelUI.inc.xul
browser/components/pocket/Pocket.jsm
browser/components/pocket/main.js
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -230,19 +230,17 @@
         </vbox>
         <button id="PanelUI-panic-view-button"
                 label="&panicButton.view.forgetButton;"/>
       </vbox>
     </panelview>
 
     <panelview id="PanelUI-pocketView" flex="1">
       <vbox class="panel-subview-body">
-        <hbox id="pocket-panel-container" align="top" flex="1">
-          <iframe id="pocket-panel-iframe" type="content"/>
-        </hbox>
+        <iframe id="pocket-panel-iframe" type="content"/>
       </vbox>
     </panelview>
 
 
   </panelmultiview>
   <!-- These menupopups are located here to prevent flickering,
        see bug 492960 comment 20. -->
   <menupopup id="customizationPanelItemContextMenu">
--- a/browser/components/pocket/Pocket.jsm
+++ b/browser/components/pocket/Pocket.jsm
@@ -18,31 +18,45 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 let Pocket = {
   get site() Services.prefs.getCharPref("browser.pocket.site"),
   get listURL() { return "https://" + Pocket.site; },
 
   /**
    * Functions related to the Pocket panel UI.
    */
   onPanelViewShowing(event) {
-    let window = event.target.ownerDocument.defaultView;
-    window.addEventListener("popupshowing", Pocket.onPocketPanelShowing, true);
-    window.addEventListener("popupshown", Pocket.onPocketPanelShown, true);
+    let document = event.target.ownerDocument;
+    let window = document.defaultView;
+    let iframe = document.getElementById('pocket-panel-iframe');
+
+    // ViewShowing fires immediately before it creates the contents,
+    // in lieu of an AfterViewShowing event, just spin the event loop.
+    window.setTimeout(function() {
+      window.pktUI.pocketButtonOnCommand();
+
+      if (iframe.contentDocument &&
+          iframe.contentDocument.readyState == "complete")
+      {
+        window.pktUI.pocketPanelDidShow();
+      } else {
+        // iframe didn't load yet. This seems to always be the case when in
+        // the toolbar panel, but never the case for a subview.
+        // XXX this only being fired when it's a _capturing_ listener!
+        iframe.addEventListener("load", Pocket.onFrameLoaded, true);
+      }
+    }, 0);
   },
 
-  onPocketPanelShowing(event) {
-    let window = event.target.ownerDocument.defaultView;
-    window.removeEventListener("popupshowing", Pocket.onPocketPanelShowing, true);
-    window.pktUI.pocketButtonOnCommand(event);
-  },
+  onFrameLoaded(event) {
+    let document = event.currentTarget.ownerDocument;
+    let window = document.defaultView;
+    let iframe = document.getElementById('pocket-panel-iframe');
 
-  onPocketPanelShown(event) {
-    let window = event.target.ownerDocument.defaultView;
-    window.removeEventListener("popupshown", Pocket.onPocketPanelShown, true);
-    window.pktUI.pocketPanelDidShow(event);
+    iframe.removeEventListener("load", Pocket.onPanelLoaded, true);
+    window.pktUI.pocketPanelDidShow();
   },
 
   onPanelViewHiding(event) {
     let window = event.target.ownerDocument.defaultView;
     window.pktUI.pocketPanelDidHide(event);
   },
 
   // Called on tab/urlbar/location changes and after customization. Update
--- a/browser/components/pocket/main.js
+++ b/browser/components/pocket/main.js
@@ -454,21 +454,27 @@ var pktUI = (function() {
      * options = {
      * 	width: ,
      *	height: ,
      * 	animate [default false]
      * }
      */
     function resizePanel(options) {
         var iframe = getPanelFrame();
-        iframe.width = options.width;
-        iframe.height = options.height;
+        var subview = getSubview();
 
-    	// TODO : Animate the change if given options.animate = true
-    	getPanel().sizeTo(options.width, options.height);
+        if (subview) {
+          // Use the subview's size
+          iframe.style.width = "100%";
+          iframe.style.height = subview.clientHeight + "px";
+        } else {
+          // Set an explicit size, panel will adapt.
+          iframe.style.width  = options.width  + "px";
+          iframe.style.height = options.height + "px";
+        }
     }
 
     /**
      * Called when the signup and saved panel was hidden
      */
     function panelDidHide() {
         
     }
@@ -635,26 +641,32 @@ var pktUI = (function() {
             panel = panel.parentNode;
         }
     	return panel;
     }
 
     function getPanelFrame() {
     	return document.getElementById('pocket-panel-iframe');
     }
-    
-    function isInOverflowMenu() {
+
+    function getSubview() {
         var frame = getPanelFrame();
         var view = frame;
         while (view && view.localName != "panelview") {
             view = view.parentNode;
         }
 
-        var isSubview = (view && view.getAttribute("current") == "true");
-        return isSubview;
+        if (view && view.getAttribute("current") == "true")
+            return view;
+        return null;
+    }
+
+    function isInOverflowMenu() {
+        var subview = getSubview();
+        return !!subview;
     }
 
     function hasLegacyExtension() {
     	return !!document.getElementById('RIL_urlbar_add');
     }
 
     function isHidden() {
     	return _isHidden;