Bug 1161793 - Wait to run the Pocket popupshowing code until the popupshowing event is dispatched, same for the popupshown code. r=dolske a=dolske
authorJared Wein <jwein@mozilla.com>
Thu, 07 May 2015 17:55:21 -0400
changeset 260442 18bf7b4baaac
parent 260441 ccec3836123c
child 260443 067c9c7a5e75
push id782
push userjdolske@mozilla.com
push date2015-05-09 00:18 +0000
treeherdermozilla-release@067c9c7a5e75 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdolske, dolske
bugs1161793
milestone38.0
Bug 1161793 - Wait to run the Pocket popupshowing code until the popupshowing event is dispatched, same for the popupshown code. r=dolske a=dolske
browser/components/customizableui/content/panelUI.js
browser/components/pocket/Pocket.jsm
browser/components/pocket/main.js
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -327,16 +327,17 @@ const PanelUI = {
       if (evt.defaultPrevented) {
         return;
       }
 
       let tempPanel = document.createElement("panel");
       tempPanel.setAttribute("type", "arrow");
       tempPanel.setAttribute("id", "customizationui-widget-panel");
       tempPanel.setAttribute("class", "cui-widget-panel");
+      tempPanel.setAttribute("viewId", aViewId);
       if (this._disableAnimations) {
         tempPanel.setAttribute("animate", "false");
       }
       tempPanel.setAttribute("context", "");
       document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel);
       // If the view has a footer, set a convenience class on the panel.
       tempPanel.classList.toggle("cui-widget-panelWithFooter",
                                  viewNode.querySelector(".panel-subview-footer"));
--- a/browser/components/pocket/Pocket.jsm
+++ b/browser/components/pocket/Pocket.jsm
@@ -18,18 +18,30 @@ 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);
+  },
+
+  onPocketPanelShowing(event) {
+    let window = event.target.ownerDocument.defaultView;
+    window.removeEventListener("popupshowing", Pocket.onPocketPanelShowing, true);
     window.pktUI.pocketButtonOnCommand(event);
-    window.pktUI.pocketPanelDidShow(event)
+  },
+
+  onPocketPanelShown(event) {
+    let window = event.target.ownerDocument.defaultView;
+    window.removeEventListener("popupshown", Pocket.onPocketPanelShown, true);
+    window.pktUI.pocketPanelDidShow(event);
   },
 
   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
@@ -296,22 +296,20 @@ var pktUI = (function() {
             {
                 if (fxasignedin == '1')
                 {
                     startheight = 436;
                 }
             }
            showPanel("chrome://browser/content/pocket/panels/signup.html?pockethost=" + Services.prefs.getCharPref("browser.pocket.site") + "&fxasignedin=" + fxasignedin + "&variant=" + pktApi.getSignupAB(), {
                onShow: function() {
-                    resizePanel({
-                        width: 300,
-                        height: startheight
-                    });
                 },
                onHide: panelDidHide,
+               width: 300,
+               height: startheight
            });
         });
     }
 
     /**
      * Show the logged-out state / sign-up panel
      */
     function saveAndShowConfirmation(url, title) {
@@ -320,22 +318,16 @@ var pktUI = (function() {
         if (typeof url !== 'undefined' && url.startsWith("about:reader?url=")) {
             url = ReaderMode.getOriginalUrl(url);
         }
 
         var isValidURL = (typeof url !== 'undefined' && (url.startsWith("http") || url.startsWith('https')));
 
         showPanel("chrome://browser/content/pocket/panels/saved.html?pockethost=" + Services.prefs.getCharPref("browser.pocket.site") + "&premiumStatus=" + (pktApi.isPremiumUser() ? '1' : '0'), {
     		onShow: function() {
-                // Open and resize the panel
-                resizePanel({
-                        width: 350,
-                        height: 263
-                });
-
                 // Send error message for invalid url
                 if (!isValidURL) {
                     var error = new Error('Only links can be saved');
                     sendErrorMessage('saveLink', error);
                     return;
                 }
 
                 // Add url
@@ -364,16 +356,18 @@ var pktUI = (function() {
                 if (typeof title !== "undefined") {
                     options.title = title;
                 }
 
                 // Send the link
 				pktApi.addLink(url, options);
 			},
 			onHide: panelDidHide,
+            width: 350,
+            height: 267
     	});
     }
 
     /**
      * Open a generic panel
      */
     function showPanel(url, options) {
 
@@ -392,39 +386,38 @@ var pktUI = (function() {
     	// panel.setAttribute('noautohide', true);
     	// panel.setAttribute('consumeoutsideclicks', false);
     	//
 
     	// For some reason setting onpopupshown and onpopuphidden on the panel directly didn't work, so
     	// do it this hacky way for now
     	currentPanelDidShow = options.onShow;
     	currentPanelDidHide = options.onHide;
+
+        resizePanel({
+            width: options.width,
+            height: options.height
+        });
     }
 
     /**
      * Resize the panel
      * options = {
      * 	width: ,
      *	height: ,
      * 	animate [default false]
      * }
      */
     function resizePanel(options) {
         var iframe = getPanelFrame();
         iframe.width = options.width;
         iframe.height = options.height;
-        return;
 
     	// TODO : Animate the change if given options.animate = true
     	getPanel().sizeTo(options.width, options.height);
-    	setTimeout(function(){
-    		// we set the iframe size directly because it does not automatically stretch vertically
-            var height = document.getElementById('pocket-panel-container').clientHeight + 'px';
-	    	getPanelFrame().style.height = height;
-	    },1);
     }
 
     /**
      * Called when the signup and saved panel was hidden
      */
     function panelDidHide() {
     }
 
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -251,16 +251,21 @@ panelview:not([mainview]) .toolbarbutton
   text-align: start;
   display: -moz-box;
 }
 
 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 4px 0;
 }
 
+.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
   padding-bottom: 0;
 }
 
 #PanelUI-contents {
   display: block;
   flex: 1 0 auto;
   margin-left: auto;