Bug 1163319 - Pocket button in hamburger menu breaks layout. r=jaws, a=dolske
authorJustin Dolske <dolske@mozilla.com>
Sun, 10 May 2015 17:16:57 -0700
changeset 274570 6af1bc0bcd35d72a63c2d1d0ae5b789f54486842
parent 274569 042cb568f4dd48f3cf91fabe1afdc88111eb1f8e
child 274572 1139ae4ca5f7e09e38225981ace07dafb3cf5f37
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, dolske
bugs1163319
milestone40.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;