Bug 1007601 Fix styling of the loop panel so it is laid out properly …

…and without a white border. Also make the iframe creation dynamic, to avoid an iframe in the DOM when we don't need one. r=mhammond

browser/base/content/browser-loop.js

@@ -23,6 +23,16 @@ XPCOMUtils.defineLazyModuleGetter(this, "MozLoopService", "resource:///modules/l
       let anchor = event.target;
       let iframe = document.getElementById("loop-panel-frame");
 
+      if (!iframe) {
+        // XXX This should be using SharedFrame (bug 1011392 may do this).
+        iframe = document.createElement("iframe");
+        iframe.setAttribute("id", "loop-panel-frame");
+        iframe.setAttribute("type", "content");
+        iframe.setAttribute("class", "loop-frame social-panel-frame");
+        iframe.setAttribute("flex", "1");
+        panel.appendChild(iframe);
+      }
+
       // We inject in DOMContentLoaded as that is before any scripts have tun.
       iframe.addEventListener("DOMContentLoaded", function documentDOMLoaded() {
         iframe.removeEventListener("DOMContentLoaded", documentDOMLoaded, true);
@@ -35,7 +45,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "MozLoopService", "resource:///modules/l
             iframe.contentWindow.removeEventListener("loopPanelInitialized",
                                                      documentLoaded, true);
             // XXX We end up with the wrong size here, so this
-            // needs investigation (bug 1007601).
+            // needs further investigation (bug 1011394).
             sizeSocialPanelToContent(panel, iframe);
           }, true);
 

browser/base/content/browser.xul

@@ -267,14 +267,10 @@
 
 #ifdef MOZ_LOOP
     <panel id="loop-panel"
-           class="loop-panel"
+           class="loop-panel social-panel"
            type="arrow"
            orient="horizontal"
-           hidden="true">
-      <iframe id="loop-panel-frame"
-              type="content"
-      />
-    </panel>
+           hidden="true"/>
 #endif
 
     <menupopup id="toolbar-context-menu"