Bug 792677 - dynamically adjust social panels as content changes. r=jaws

browser/base/content/browser-social.js

@@ -191,7 +191,6 @@ let SocialChatBar = {
 
 function sizeSocialPanelToContent(iframe) {
   // FIXME: bug 764787: Maybe we can use nsIDOMWindowUtils.getRootBounds() here?
-  // Need to handle dynamic sizing
   let doc = iframe.contentDocument;
   if (!doc) {
     return;
@@ -199,15 +198,38 @@ function sizeSocialPanelToContent(iframe) {
   // "notif" is an implementation detail that we should get rid of
   // eventually
   let body = doc.getElementById("notif") || doc.body;
-  if (!body || !body.firstChild) {
+  if (!body) {
     return;
   }
-
-  let [height, width] = [body.firstChild.offsetHeight || 300, 330];
-  iframe.style.width = width + "px";
+  // XXX - do we want a max for width and height here?
+  // The 300 and 330 defaults also seem arbitrary, so should be revisited.
+  // BUT - for at least one provider, the scrollWidth/offsetWidth/css width
+  // isn't set appropriately, so the 330 is "fixed" for now...
+  iframe.style.width = "330px";
+  // offsetHeight doesn't include margins, so account for that.
+  let cs = doc.defaultView.getComputedStyle(body);
+  let computedHeight = parseInt(cs.marginTop) + body.offsetHeight + parseInt(cs.marginBottom);
+  let height = computedHeight || 300;
   iframe.style.height = height + "px";
 }
 
+function setupDynamicPanelResizer(iframe) {
+  let doc = iframe.contentDocument;
+  let mo = new iframe.contentWindow.MutationObserver(function(mutations) {
+    sizeSocialPanelToContent(iframe);
+  });
+  // Observe anything that causes the size to change.
+  let config = {attributes: true, characterData: true, childList: true, subtree: true};
+  mo.observe(doc, config);
+  doc.addEventListener("unload", function() {
+    if (mo) {
+      mo.disconnect();
+      mo = null;
+    }
+  }, false);
+  sizeSocialPanelToContent(iframe);
+}
+
 let SocialFlyout = {
   get panel() {
     return document.getElementById("social-flyout-panel");
@@ -275,7 +297,7 @@ let SocialFlyout = {
     if (src != aURL) {
       iframe.addEventListener("load", function documentLoaded() {
         iframe.removeEventListener("load", documentLoaded, true);
-        sizeSocialPanelToContent(iframe);
+        setupDynamicPanelResizer(iframe);
         if (aCallback) {
           try {
             aCallback(iframe.contentWindow);
@@ -650,13 +672,13 @@ var SocialToolbar = {
       notificationFrame.docShell.isActive = true;
       notificationFrame.docShell.isAppTab = true;
       if (notificationFrame.contentDocument.readyState == "complete") {
-        sizeSocialPanelToContent(notificationFrame);
+        setupDynamicPanelResizer(notificationFrame);
         dispatchPanelEvent("socialFrameShow");
       } else {
         // first time load, wait for load and dispatch after load
         notificationFrame.addEventListener("load", function panelBrowserOnload(e) {
           notificationFrame.removeEventListener("load", panelBrowserOnload, true);
-          sizeSocialPanelToContent(notificationFrame);
+          setupDynamicPanelResizer(notificationFrame);
           setTimeout(function() {
             dispatchPanelEvent("socialFrameShow");
           }, 0);

browser/base/content/test/browser_social_flyout.js

@@ -44,6 +44,35 @@ var tests = {
       }
     }
     port.postMessage({topic: "test-init"});
+  },
+
+  testResizeFlyout: function(next) {
+    let panel = document.getElementById("social-flyout-panel");
+    let port = Social.provider.getWorkerPort();
+    ok(port, "provider has a port");
+    port.onmessage = function (e) {
+      let topic = e.data.topic;
+      switch (topic) {
+        case "test-init-done":
+          port.postMessage({topic: "test-flyout-open"});
+          break;
+        case "got-flyout-visibility":
+          // The width of the flyout should be 250px
+          let iframe = panel.firstChild;
+          let cs = iframe.contentWindow.getComputedStyle(iframe.contentDocument.body);
+          is(cs.width, "250px", "should be 250px wide");
+          iframe.contentDocument.addEventListener("SocialTest-DoneMakeWider", function _doneHandler() {
+            iframe.contentDocument.removeEventListener("SocialTest-DoneMakeWider", _doneHandler, false);
+            cs = iframe.contentWindow.getComputedStyle(iframe.contentDocument.body);
+            is(cs.width, "500px", "should now be 500px wide");
+            panel.hidePopup();
+            next();
+          }, false);
+          SocialFlyout.dispatchPanelEvent("socialTest-MakeWider");
+          break;
+      }
+    }
+    port.postMessage({topic: "test-init"});
   }
 }
 

browser/base/content/test/social_flyout.html

@@ -14,9 +14,16 @@
         var port = navigator.mozSocial.getWorker().port;
         port.postMessage({topic: "flyout-visibility", result: "hidden"});
       }, false);
+      window.addEventListener("socialTest-MakeWider", function(e) {
+        document.body.setAttribute("style", "width: 500px;");
+        document.body.offsetWidth; // force a layout flush
+        var evt = document.createEvent("CustomEvent");
+        evt.initCustomEvent("SocialTest-DoneMakeWider", true, true, {});
+        document.documentElement.dispatchEvent(evt);
+      }, false);
     </script>
   </head>
-  <body onload="pingWorker();">
+  <body style="max-width: 250px;" onload="pingWorker();">
     <p>This is a test social flyout panel.</p>
   </body>
 </html>