--- a/browser/base/content/browser-context.inc
+++ b/browser/base/content/browser-context.inc
@@ -88,16 +88,20 @@
       <menuitem id="context-sharelink"
                 label="&shareLink.label;"
                 accesskey="&shareLink.accesskey;"
                 oncommand="gContextMenu.shareLink();"/>
       <menuitem id="context-savelink"
                 label="&saveLinkCmd.label;"
                 accesskey="&saveLinkCmd.accesskey;"
                 oncommand="gContextMenu.saveLink();"/>
+      <menu id="context-marklinkMenu" label="&social.marklinkMenu.label;"
+            accesskey="&social.marklinkMenu.accesskey;">
+        <menupopup/>
+      </menu>
       <menuitem id="context-copyemail"
                 label="&copyEmailCmd.label;"
                 accesskey="&copyEmailCmd.accesskey;"
                 oncommand="gContextMenu.copyEmail();"/>
       <menuitem id="context-copylink"
                 label="&copyLinkCmd.label;"
                 accesskey="&copyLinkCmd.accesskey;"
                 oncommand="gContextMenu.copyLink();"/>
@@ -282,16 +286,20 @@
       <menuseparator id="context-sep-sendpagetodevice" hidden="true"/>
       <menu id="context-sendpagetodevice"
                 label="&sendPageToDevice.label;"
                 accesskey="&sendPageToDevice.accesskey;"
                 hidden="true">
         <menupopup id="context-sendpagetodevice-popup"
                    onpopupshowing="(() => { let browser = gBrowser || getPanelBrowser(); gFxAccounts.populateSendTabToDevicesMenu(event.target, browser.currentURI.spec, browser.contentTitle); })()"/>
       </menu>
+      <menu id="context-markpageMenu" label="&social.markpageMenu.label;"
+            accesskey="&social.markpageMenu.accesskey;">
+        <menupopup/>
+      </menu>
       <menuseparator id="context-sep-viewbgimage"/>
       <menuitem id="context-viewbgimage"
                 label="&viewBGImageCmd.label;"
                 accesskey="&viewBGImageCmd.accesskey;"
                 oncommand="gContextMenu.viewBGImage(event);"
                 onclick="checkForMiddleClick(this, event);"/>
       <menuitem id="context-undo"
                 label="&undoCmd.label;"

--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -215,16 +215,19 @@
                               observes="viewBookmarksSidebar"/>
                     <menuitem id="menu_historySidebar"
                               key="key_gotoHistory"
                               observes="viewHistorySidebar"
                               label="&historyButton.label;"/>
                     <menuitem id="menu_tabsSidebar"
                               observes="viewTabsSidebar"
                               label="&syncedTabs.sidebar.label;"/>
+                    <!-- Service providers with sidebars are inserted between these two menuseperators -->
+                    <menuseparator hidden="true"/>
+                    <menuseparator class="social-provider-menu" hidden="true"/>
                   </menupopup>
                 </menu>
                 <menuseparator/>
                 <menu id="viewFullZoomMenu" label="&fullZoom.label;"
                       accesskey="&fullZoom.accesskey;"
                       onpopupshowing="FullZoom.updateMenu();">
                   <menupopup>
                     <menuitem id="menu_zoomEnlarge"

--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -102,28 +102,31 @@
       oncommand="OpenBrowserWindow({private: true});" reserved="true"/>
 #ifdef E10S_TESTING_ONLY
     <command id="Tools:NonRemoteWindow"
       oncommand="OpenBrowserWindow({remote: false});"/>
 #endif
     <command id="History:UndoCloseTab" oncommand="undoCloseTab();"/>
     <command id="History:UndoCloseWindow" oncommand="undoCloseWindow();"/>
     <command id="Social:SharePage" oncommand="SocialShare.sharePage();"/>
+    <command id="Social:ToggleSidebar" oncommand="SocialSidebar.toggleSidebar();" hidden="true"/>
+    <command id="Social:ToggleNotifications" oncommand="Social.toggleNotifications();" hidden="true"/>
     <command id="Social:Addons" oncommand="BrowserOpenAddonsMgr('addons://list/service');"/>
+    <command id="Chat:Focus" oncommand="Cu.import('resource:///modules/Chat.jsm', {}).Chat.focus(window);"/>
   </commandset>
 
   <commandset id="placesCommands">
     <command id="Browser:ShowAllBookmarks"
              oncommand="PlacesCommandHook.showPlacesOrganizer('UnfiledBookmarks');"/>
     <command id="Browser:ShowAllHistory"
              oncommand="PlacesCommandHook.showPlacesOrganizer('History');"/>
   </commandset>
 
   <broadcasterset id="mainBroadcasterSet">
-    <broadcaster id="Social:PageShareable" disabled="true"/>
+    <broadcaster id="Social:PageShareOrMark" disabled="true"/>
     <broadcaster id="viewBookmarksSidebar" autoCheck="false" label="&bookmarksButton.label;"
                  type="checkbox" group="sidebar" sidebarurl="chrome://browser/content/bookmarks/bookmarksPanel.xul"
                  oncommand="SidebarUI.toggle('viewBookmarksSidebar');"/>
 
     <!-- for both places and non-places, the sidebar lives at
          chrome://browser/content/history/history-panel.xul so there are no
          problems when switching between versions -->
     <broadcaster id="viewHistorySidebar" autoCheck="false" sidebartitle="&historyButton.label;"
@@ -173,16 +176,17 @@
     <broadcaster id="sync-setup-state"/>
     <broadcaster id="sync-syncnow-state" hidden="true"/>
     <broadcaster id="sync-reauth-state" hidden="true"/>
     <broadcaster id="viewTabsSidebar" autoCheck="false" sidebartitle="&syncedTabs.sidebar.label;"
                  type="checkbox" group="sidebar"
                  sidebarurl="chrome://browser/content/syncedtabs/sidebar.xhtml"
                  oncommand="SidebarUI.toggle('viewTabsSidebar');"/>
     <broadcaster id="workOfflineMenuitemState"/>
+    <broadcaster id="socialSidebarBroadcaster" hidden="true"/>
 
     <broadcaster id="devtoolsMenuBroadcaster_PageSource"
                  label="&pageSourceCmd.label;"
                  key="key_viewSource"
                  command="View:PageSource">
       <observes element="canViewSource" attribute="disabled"/>
     </broadcaster>
   </broadcasterset>
@@ -307,16 +311,27 @@
 #endif
     <key id="viewBookmarksSidebarKb" key="&bookmarksCmd.commandkey;" command="viewBookmarksSidebar" modifiers="accel"/>
 #ifdef XP_WIN
 # Cmd+I is conventially mapped to Info on MacOS X, thus it should not be
 # overridden for other purposes there.
     <key id="viewBookmarksSidebarWinKb" key="&bookmarksWinCmd.commandkey;" command="viewBookmarksSidebar" modifiers="accel"/>
 #endif
 
+    <!--<key id="markPage" key="&markPageCmd.commandkey;" command="Social:TogglePageMark" modifiers="accel,shift"/>-->
+    <key id="focusChatBar" key="&social.chatBar.commandkey;" command="Chat:Focus"
+#ifdef XP_MACOSX
+# Sadly the devtools uses shift-accel-c on non-mac and alt-accel-c everywhere else
+# So we just use the other
+         modifiers="accel,shift"
+#else
+         modifiers="accel,alt"
+#endif
+    />
+
     <key id="key_stop" keycode="VK_ESCAPE" command="Browser:Stop"/>
 
 #ifdef XP_MACOSX
     <key id="key_stop_mac" modifiers="accel" key="&stopCmd.macCommandKey;" command="Browser:Stop"/>
 #endif
 
     <key id="key_gotoHistory"
          key="&historySidebarCmd.commandKey;"

--- a/browser/base/content/browser-social.js
+++ b/browser/base/content/browser-social.js
@@ -1,79 +1,180 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // the "exported" symbols
 var SocialUI,
+    SocialFlyout,
+    SocialMarks,
     SocialShare,
+    SocialSidebar,
+    SocialStatus,
     SocialActivationListener;
 
 (function() {
 
+XPCOMUtils.defineLazyModuleGetter(this, "PanelFrame",
+  "resource:///modules/PanelFrame.jsm");
+
 XPCOMUtils.defineLazyGetter(this, "OpenGraphBuilder", function() {
   let tmp = {};
   Cu.import("resource:///modules/Social.jsm", tmp);
   return tmp.OpenGraphBuilder;
 });
 
 XPCOMUtils.defineLazyGetter(this, "DynamicResizeWatcher", function() {
   let tmp = {};
   Cu.import("resource:///modules/Social.jsm", tmp);
   return tmp.DynamicResizeWatcher;
 });
 
+XPCOMUtils.defineLazyGetter(this, "sizeSocialPanelToContent", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/Social.jsm", tmp);
+  return tmp.sizeSocialPanelToContent;
+});
+
+XPCOMUtils.defineLazyGetter(this, "CreateSocialStatusWidget", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/Social.jsm", tmp);
+  return tmp.CreateSocialStatusWidget;
+});
+
+XPCOMUtils.defineLazyGetter(this, "CreateSocialMarkWidget", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/Social.jsm", tmp);
+  return tmp.CreateSocialMarkWidget;
+});
+
+XPCOMUtils.defineLazyGetter(this, "hookWindowCloseForPanelClose", function() {
+  let tmp = {};
+  Cu.import("resource://gre/modules/MozSocialAPI.jsm", tmp);
+  return tmp.hookWindowCloseForPanelClose;
+});
+
 SocialUI = {
   _initialized: false,
 
   // Called on delayed startup to initialize the UI
   init: function SocialUI_init() {
     if (this._initialized) {
       return;
     }
     let mm = window.getGroupMessageManager("social");
     mm.loadFrameScript("chrome://browser/content/content.js", true);
     mm.loadFrameScript("chrome://browser/content/social-content.js", true);
 
+    Services.obs.addObserver(this, "social:ambient-notification-changed", false);
     Services.obs.addObserver(this, "social:providers-changed", false);
+    Services.obs.addObserver(this, "social:provider-reload", false);
+    Services.obs.addObserver(this, "social:provider-enabled", false);
+    Services.obs.addObserver(this, "social:provider-disabled", false);
+
+    Services.prefs.addObserver("social.toast-notifications.enabled", this, false);
 
     CustomizableUI.addListener(this);
     SocialActivationListener.init();
+    messageManager.addMessageListener("Social:Notification", this);
+
+    // menupopups that list social providers. we only populate them when shown,
+    // and if it has not been done already.
+    document.getElementById("viewSidebarMenu").addEventListener("popupshowing", SocialSidebar.populateSidebarMenu, true);
+    document.getElementById("social-statusarea-popup").addEventListener("popupshowing", SocialSidebar.populateSidebarMenu, true);
 
     Social.init().then((update) => {
       if (update)
         this._providersChanged();
+      // handle SessionStore for the sidebar state
+      SocialSidebar.restoreWindowState();
     });
 
     this._initialized = true;
   },
 
   // Called on window unload
   uninit: function SocialUI_uninit() {
     if (!this._initialized) {
       return;
     }
+    SocialSidebar.saveWindowState();
+
+    Services.obs.removeObserver(this, "social:ambient-notification-changed");
     Services.obs.removeObserver(this, "social:providers-changed");
+    Services.obs.removeObserver(this, "social:provider-reload");
+    Services.obs.removeObserver(this, "social:provider-enabled");
+    Services.obs.removeObserver(this, "social:provider-disabled");
 
+    Services.prefs.removeObserver("social.toast-notifications.enabled", this);
     CustomizableUI.removeListener(this);
     SocialActivationListener.uninit();
+    messageManager.removeMessageListener("Social:Notification", this);
+
+    document.getElementById("viewSidebarMenu").removeEventListener("popupshowing", SocialSidebar.populateSidebarMenu, true);
+    document.getElementById("social-statusarea-popup").removeEventListener("popupshowing", SocialSidebar.populateSidebarMenu, true);
 
     this._initialized = false;
   },
 
+  receiveMessage: function(aMessage) {
+    if (aMessage.name == "Social:Notification") {
+      let provider = Social._getProviderFromOrigin(aMessage.data.origin);
+      if (provider) {
+        provider.setAmbientNotification(aMessage.data.detail);
+      }
+    }
+  },
+
   observe: function SocialUI_observe(subject, topic, data) {
     switch (topic) {
+      case "social:provider-enabled":
+        SocialMarks.populateToolbarPalette();
+        SocialStatus.populateToolbarPalette();
+        break;
+      case "social:provider-disabled":
+        SocialMarks.removeProvider(data);
+        SocialStatus.removeProvider(data);
+        SocialSidebar.disableProvider(data);
+        break;
+      case "social:provider-reload":
+        SocialStatus.reloadProvider(data);
+        // if the reloaded provider is our current provider, fall through
+        // to social:providers-changed so the ui will be reset
+        if (!SocialSidebar.provider || SocialSidebar.provider.origin != data)
+          return;
+        // currently only the sidebar and flyout have a selected provider.
+        // sidebar provider has changed (possibly to null), ensure the content
+        // is unloaded and the frames are reset, they will be loaded in
+        // providers-changed below if necessary.
+        SocialSidebar.unloadSidebar();
+        SocialFlyout.unload();
+        // fall through to providers-changed to ensure the reloaded provider
+        // is correctly reflected in any UI and the multi-provider menu
       case "social:providers-changed":
         this._providersChanged();
         break;
+      // Provider-specific notifications
+      case "social:ambient-notification-changed":
+        SocialStatus.updateButton(data);
+        break;
+      case "nsPref:changed":
+        if (data == "social.toast-notifications.enabled") {
+          SocialSidebar.updateToggleNotifications();
+        }
+        break;
     }
   },
 
   _providersChanged: function() {
+    SocialSidebar.clearProviderMenus();
+    SocialSidebar.update();
     SocialShare.populateProviderMenu();
+    SocialStatus.populateToolbarPalette();
+    SocialMarks.populateToolbarPalette();
   },
 
   showLearnMore: function() {
     let url = Services.urlFormatter.formatURLPref("app.support.baseURL") + "social-api";
     openUILinkIn(url, "tab");
   },
 
   closeSocialPanelForLinkTraversal: function (target, linkNode) {
@@ -113,40 +214,52 @@ SocialUI = {
 
   get enabled() {
     // Returns whether social is enabled *for this window*.
     if (this._chromeless)
       return false;
     return Social.providers.length > 0;
   },
 
-  canSharePage: function(aURI) {
+  canShareOrMarkPage: function(aURI) {
     return (aURI && (aURI.schemeIs('http') || aURI.schemeIs('https')));
   },
 
   onCustomizeEnd: function(aWindow) {
     if (aWindow != window)
       return;
     // customization mode gets buttons out of sync with command updating, fix
     // the disabled state
-    let canShare = this.canSharePage(gBrowser.currentURI);
+    let canShare = this.canShareOrMarkPage(gBrowser.currentURI);
     let shareButton = SocialShare.shareButton;
     if (shareButton) {
       if (canShare) {
         shareButton.removeAttribute("disabled")
       } else {
         shareButton.setAttribute("disabled", "true")
       }
     }
+    // update the disabled state of the button based on the command
+    for (let node of SocialMarks.nodes) {
+      if (canShare) {
+        node.removeAttribute("disabled")
+      } else {
+        node.setAttribute("disabled", "true")
+      }
+    }
   },
 
   // called on tab/urlbar/location changes and after customization. Update
   // anything that is tab specific.
   updateState: function() {
-    goSetCommandEnabled("Social:PageShareable", this.canSharePage(gBrowser.currentURI));
+    goSetCommandEnabled("Social:PageShareOrMark", this.canShareOrMarkPage(gBrowser.currentURI));
+    if (!SocialUI.enabled)
+      return;
+    // larger update that may change button icons
+    SocialMarks.update();
   }
 }
 
 // message manager handlers
 SocialActivationListener = {
   init: function() {
     messageManager.addMessageListener("Social:Activation", this);
   },
@@ -162,16 +275,19 @@ SocialActivationListener = {
     // social.directories preference
     let options;
     if (browser == SocialShare.iframe && Services.prefs.getBoolPref("social.share.activationPanelEnabled")) {
       options = { bypassContentCheck: true, bypassInstallPanel: true };
     }
 
     Social.installProvider(data, function(manifest) {
       Social.activateFromOrigin(manifest.origin, function(provider) {
+        if (provider.sidebarURL) {
+          SocialSidebar.show(provider.origin);
+        }
         if (provider.shareURL) {
           // Ensure that the share button is somewhere usable.
           // SocialShare.shareButton may return null if it is in the menu-panel
           // and has never been visible, so we check the widget directly. If
           // there is no area for the widget we move it into the toolbar.
           let widget = CustomizableUI.getWidget("social-share-button");
           // If the panel is already open, we can be sure that the provider can
           // already be accessed, possibly anchored to another toolbar button.
@@ -198,16 +314,148 @@ SocialActivationListener = {
           // a background tab
           gBrowser.loadOneTab(provider.postActivationURL, {inBackground: SocialShare.panel.state == "open"});
         }
       });
     }, options);
   }
 }
 
+SocialFlyout = {
+  get panel() {
+    return document.getElementById("social-flyout-panel");
+  },
+
+  get iframe() {
+    if (!this.panel.firstChild)
+      this._createFrame();
+    return this.panel.firstChild;
+  },
+
+  dispatchPanelEvent: function(name) {
+    let doc = this.iframe.contentDocument;
+    let evt = doc.createEvent("CustomEvent");
+    evt.initCustomEvent(name, true, true, {});
+    doc.documentElement.dispatchEvent(evt);
+  },
+
+  _createFrame: function() {
+    let panel = this.panel;
+    if (!SocialUI.enabled || panel.firstChild)
+      return;
+    // create and initialize the panel for this window
+    let iframe = document.createElement("browser");
+    iframe.setAttribute("type", "content");
+    iframe.setAttribute("class", "social-panel-frame");
+    iframe.setAttribute("flex", "1");
+    iframe.setAttribute("message", "true");
+    iframe.setAttribute("messagemanagergroup", "social");
+    iframe.setAttribute("disablehistory", "true");
+    iframe.setAttribute("tooltip", "aHTMLTooltip");
+    iframe.setAttribute("context", "contentAreaContextMenu");
+    iframe.setAttribute("origin", SocialSidebar.provider.origin);
+    panel.appendChild(iframe);
+    this.messageManager.sendAsyncMessage("Social:SetErrorURL",
+                        { template: "about:socialerror?mode=compactInfo&origin=%{origin}" });
+  },
+
+  get messageManager() {
+    // The xbl bindings for the iframe may not exist yet, so we can't
+    // access iframe.messageManager directly - but can get at it with this dance.
+    return this.iframe.QueryInterface(Components.interfaces.nsIFrameLoaderOwner).frameLoader.messageManager;
+  },
+
+  unload: function() {
+    let panel = this.panel;
+    panel.hidePopup();
+    if (!panel.firstChild)
+      return
+    let iframe = panel.firstChild;
+    panel.removeChild(iframe);
+  },
+
+  onShown: function(aEvent) {
+    let panel = this.panel;
+    let iframe = this.iframe;
+    this._dynamicResizer = new DynamicResizeWatcher();
+    iframe.docShellIsActive = true;
+    if (iframe.contentDocument.readyState == "complete") {
+      this._dynamicResizer.start(panel, iframe);
+    } else {
+      // first time load, wait for load and dispatch after load
+      let mm = this.messageManager;
+      mm.addMessageListener("DOMContentLoaded", function panelBrowserOnload(e) {
+        mm.removeMessageListener("DOMContentLoaded", panelBrowserOnload);
+        setTimeout(function() {
+          if (SocialFlyout._dynamicResizer) { // may go null if hidden quickly
+            SocialFlyout._dynamicResizer.start(panel, iframe);
+          }
+        }, 0);
+      });
+    }
+  },
+
+  onHidden: function(aEvent) {
+    this._dynamicResizer.stop();
+    this._dynamicResizer = null;
+    this.iframe.docShellIsActive = false;
+  },
+
+  load: function(aURL, cb) {
+    if (!SocialSidebar.provider)
+      return;
+
+    this.panel.hidden = false;
+    let iframe = this.iframe;
+    // same url with only ref difference does not cause a new load, so we
+    // want to go right to the callback
+    let src = iframe.contentDocument && iframe.contentDocument.documentURIObject;
+    if (!src || !src.equalsExceptRef(Services.io.newURI(aURL, null, null))) {
+      let mm = this.messageManager;
+      mm.addMessageListener("DOMContentLoaded", function documentLoaded(e) {
+        mm.removeMessageListener("DOMContentLoaded", documentLoaded);
+        cb();
+      });
+      iframe.setAttribute("src", aURL);
+    } else {
+      // we still need to set the src to trigger the contents hashchange event
+      // for ref changes
+      iframe.setAttribute("src", aURL);
+      cb();
+    }
+  },
+
+  open: function(aURL, yOffset, aCallback) {
+    // Hide any other social panels that may be open.
+    document.getElementById("social-notification-panel").hidePopup();
+
+    if (!SocialUI.enabled)
+      return;
+    let panel = this.panel;
+    let iframe = this.iframe;
+
+    this.load(aURL, function() {
+      sizeSocialPanelToContent(panel, iframe);
+      let anchor = document.getElementById("social-sidebar-browser");
+      if (panel.state == "open") {
+        panel.moveToAnchor(anchor, "start_before", 0, yOffset, false);
+      } else {
+        panel.openPopup(anchor, "start_before", 0, yOffset, false, false);
+      }
+      if (aCallback) {
+        try {
+          aCallback(iframe.contentWindow);
+        } catch(e) {
+          Cu.reportError(e);
+        }
+      }
+    });
+  }
+}
+
 SocialShare = {
   get _dynamicResizer() {
     delete this._dynamicResizer;
     this._dynamicResizer = new DynamicResizeWatcher();
     return this._dynamicResizer;
   },
 
   // Share panel may be attached to the overflow or menu button depending on
@@ -229,17 +477,16 @@ SocialShare = {
     return this.panel.lastChild.firstChild;
   },
 
   uninit: function () {
     if (this.iframe) {
       let mm = this.messageManager;
       mm.removeMessageListener("PageVisibility:Show", this);
       mm.removeMessageListener("PageVisibility:Hide", this);
-      mm.removeMessageListener("Social:DOMWindowClose", this);
       this.iframe.removeEventListener("load", this);
       this.iframe.remove();
     }
   },
 
   _createFrame: function() {
     let panel = this.panel;
     if (this.iframe)
@@ -257,17 +504,16 @@ SocialShare = {
     iframe.setAttribute("messagemanagergroup", "social");
     panel.lastChild.appendChild(iframe);
     let mm = this.messageManager;
     mm.addMessageListener("PageVisibility:Show", this);
     mm.addMessageListener("PageVisibility:Hide", this);
     mm.sendAsyncMessage("Social:SetErrorURL",
                         { template: "about:socialerror?mode=compactInfo&origin=%{origin}&url=%{url}" });
     iframe.addEventListener("load", this, true);
-    mm.addMessageListener("Social:DOMWindowClose", this);
 
     this.populateProviderMenu();
   },
 
   get messageManager() {
     // The xbl bindings for the iframe may not exist yet, so we can't
     // access iframe.messageManager directly - but can get at it with this dance.
     return this.iframe.QueryInterface(Components.interfaces.nsIFrameLoaderOwner).frameLoader.messageManager;
@@ -277,19 +523,16 @@ SocialShare = {
     let iframe = this.iframe;
     switch(aMessage.name) {
       case "PageVisibility:Show":
         SocialShare._dynamicResizer.start(iframe.parentNode, iframe);
         break;
       case "PageVisibility:Hide":
         SocialShare._dynamicResizer.stop();
         break;
-      case "Social:DOMWindowClose":
-        this.panel.hidePopup();
-        break;
     }
   },
 
   handleEvent: function(event) {
     switch (event.type) {
       case "load": {
         let iframe = this.iframe;
         iframe.parentNode.removeAttribute("loading");
@@ -398,17 +641,17 @@ SocialShare = {
     // graphData is an optional param that either defines the full set of data
     // to be shared, or partial data about the current page. It is set by a call
     // in mozSocial API, or via nsContentMenu calls. If it is present, it MUST
     // define at least url. If it is undefined, we're sharing the current url in
     // the browser tab.
     let pageData = graphData ? graphData : this.currentShare;
     let sharedURI = pageData ? Services.io.newURI(pageData.url, null, null) :
                                 gBrowser.currentURI;
-    if (!SocialUI.canSharePage(sharedURI))
+    if (!SocialUI.canShareOrMarkPage(sharedURI))
       return;
 
     // the point of this action type is that we can use existing share
     // endpoints (e.g. oexchange) that do not support additional
     // socialapi functionality.  One tweak is that we shoot an event
     // containing the open graph data.
     let _dataFn;
     if (!pageData || sharedURI == gBrowser.currentURI) {
@@ -500,9 +743,671 @@ SocialShare = {
   _openPanel: function(anchor) {
     this._currentAnchor = anchor || this.anchor;
     anchor = document.getAnonymousElementByAttribute(this._currentAnchor, "class", "toolbarbutton-icon");
     this.panel.openPopup(anchor, "bottomcenter topright", 0, 0, false, false);
     Services.telemetry.getHistogramById("SOCIAL_TOOLBAR_BUTTONS").add(0);
   }
 };
 
+SocialSidebar = {
+  _openStartTime: 0,
+
+  get browser() {
+    return document.getElementById("social-sidebar-browser");
+  },
+
+  // Whether the sidebar can be shown for this window.
+  get canShow() {
+    if (!SocialUI.enabled || document.fullscreenElement)
+      return false;
+    return Social.providers.some(p => p.sidebarURL);
+  },
+
+  // Whether the user has toggled the sidebar on (for windows where it can appear)
+  get opened() {
+    let broadcaster = document.getElementById("socialSidebarBroadcaster");
+    return !broadcaster.hidden;
+  },
+
+  restoreWindowState: function() {
+    // Window state is used to allow different sidebar providers in each window.
+    // We also store the provider used in a pref as the default sidebar to
+    // maintain that state for users who do not restore window state. The
+    // existence of social.sidebar.provider means the sidebar is open with that
+    // provider.
+    this._initialized = true;
+    if (!this.canShow)
+      return;
+
+    if (Services.prefs.prefHasUserValue("social.provider.current")) {
+      // "upgrade" when the first window opens if we have old prefs.  We get the
+      // values from prefs this one time, window state will be saved when this
+      // window is closed.
+      let origin = Services.prefs.getCharPref("social.provider.current");
+      Services.prefs.clearUserPref("social.provider.current");
+      // social.sidebar.open default was true, but we only opened if there was
+      // a current provider
+      let opened = origin && true;
+      if (Services.prefs.prefHasUserValue("social.sidebar.open")) {
+        opened = origin && Services.prefs.getBoolPref("social.sidebar.open");
+        Services.prefs.clearUserPref("social.sidebar.open");
+      }
+      let data = {
+        "hidden": !opened,
+        "origin": origin
+      };
+      SessionStore.setWindowValue(window, "socialSidebar", JSON.stringify(data));
+    }
+
+    let data = SessionStore.getWindowValue(window, "socialSidebar");
+    // if this window doesn't have it's own state, use the state from the opener
+    if (!data && window.opener && !window.opener.closed) {
+      try {
+        data = SessionStore.getWindowValue(window.opener, "socialSidebar");
+      } catch(e) {
+        // Window is not tracked, which happens on osx if the window is opened
+        // from the hidden window. That happens when you close the last window
+        // without quiting firefox, then open a new window.
+      }
+    }
+    if (data) {
+      data = JSON.parse(data);
+      this.browser.setAttribute("origin", data.origin);
+      if (!data.hidden)
+        this.show(data.origin);
+    } else if (Services.prefs.prefHasUserValue("social.sidebar.provider")) {
+      // no window state, use the global state if it is available
+      this.show(Services.prefs.getCharPref("social.sidebar.provider"));
+    }
+  },
+
+  saveWindowState: function() {
+    let broadcaster = document.getElementById("socialSidebarBroadcaster");
+    let sidebarOrigin = this.browser.getAttribute("origin");
+    let data = {
+      "hidden": broadcaster.hidden,
+      "origin": sidebarOrigin
+    };
+    if (broadcaster.hidden) {
+      Services.telemetry.getHistogramById("SOCIAL_SIDEBAR_OPEN_DURATION").add(Date.now()  / 1000 - this._openStartTime);
+    } else {
+      this._openStartTime = Date.now() / 1000;
+    }
+
+    // Save a global state for users who do not restore state.
+    if (broadcaster.hidden)
+      Services.prefs.clearUserPref("social.sidebar.provider");
+    else
+      Services.prefs.setCharPref("social.sidebar.provider", sidebarOrigin);
+
+    try {
+      SessionStore.setWindowValue(window, "socialSidebar", JSON.stringify(data));
+    } catch(e) {
+      // window not tracked during uninit
+    }
+  },
+
+  setSidebarVisibilityState: function(aEnabled) {
+    let sbrowser = document.getElementById("social-sidebar-browser");
+    // it's possible we'll be called twice with aEnabled=false so let's
+    // just assume we may often be called with the same state.
+    if (aEnabled == sbrowser.docShellIsActive)
+      return;
+    sbrowser.docShellIsActive = aEnabled;
+  },
+
+  updateToggleNotifications: function() {
+    let command = document.getElementById("Social:ToggleNotifications");
+    command.setAttribute("checked", Services.prefs.getBoolPref("social.toast-notifications.enabled"));
+    command.setAttribute("hidden", !SocialUI.enabled);
+  },
+
+  update: function SocialSidebar_update() {
+    // ensure we never update before restoreWindowState
+    if (!this._initialized)
+      return;
+    this.ensureProvider();
+    this.updateToggleNotifications();
+    this._updateHeader();
+    clearTimeout(this._unloadTimeoutId);
+    // Hide the toggle menu item if the sidebar cannot appear
+    let command = document.getElementById("Social:ToggleSidebar");
+    command.setAttribute("hidden", this.canShow ? "false" : "true");
+
+    // Hide the sidebar if it cannot appear, or has been toggled off.
+    // Also set the command "checked" state accordingly.
+    let hideSidebar = !this.canShow || !this.opened;
+    let broadcaster = document.getElementById("socialSidebarBroadcaster");
+    broadcaster.hidden = hideSidebar;
+    command.setAttribute("checked", !hideSidebar);
+
+    let sbrowser = this.browser;
+
+    if (hideSidebar) {
+      sbrowser.messageManager.removeMessageListener("DOMContentLoaded", SocialSidebar._loadListener);
+      this.setSidebarVisibilityState(false);
+      // If we've been disabled, unload the sidebar content immediately;
+      // if the sidebar was just toggled to invisible, wait a timeout
+      // before unloading.
+      if (!this.canShow) {
+        this.unloadSidebar();
+      } else {
+        this._unloadTimeoutId = setTimeout(
+          this.unloadSidebar,
+          Services.prefs.getIntPref("social.sidebar.unload_timeout_ms")
+        );
+      }
+    } else {
+      sbrowser.setAttribute("origin", this.provider.origin);
+
+      // Make sure the right sidebar URL is loaded
+      if (sbrowser.getAttribute("src") != this.provider.sidebarURL) {
+        sbrowser.setAttribute("src", this.provider.sidebarURL);
+        PopupNotifications.locationChange(sbrowser);
+        document.getElementById("social-sidebar-button").setAttribute("loading", "true");
+        sbrowser.messageManager.addMessageListener("DOMContentLoaded", SocialSidebar._loadListener);
+      } else {
+        // if the document has not loaded, delay until it is
+        if (sbrowser.contentDocument.readyState != "complete") {
+          document.getElementById("social-sidebar-button").setAttribute("loading", "true");
+          sbrowser.messageManager.addMessageListener("DOMContentLoaded", SocialSidebar._loadListener);
+        } else {
+          this.setSidebarVisibilityState(true);
+        }
+      }
+    }
+    this._updateCheckedMenuItems(this.opened && this.provider ? this.provider.origin : null);
+  },
+
+  _onclick: function() {
+    Services.telemetry.getHistogramById("SOCIAL_PANEL_CLICKS").add(3);
+  },
+
+  _loadListener: function SocialSidebar_loadListener() {
+    let sbrowser = SocialSidebar.browser;
+    sbrowser.messageManager.removeMessageListener("DOMContentLoaded", SocialSidebar._loadListener);
+    document.getElementById("social-sidebar-button").removeAttribute("loading");
+    SocialSidebar.setSidebarVisibilityState(true);
+    sbrowser.addEventListener("click", SocialSidebar._onclick, true);
+  },
+
+  unloadSidebar: function SocialSidebar_unloadSidebar() {
+    let sbrowser = SocialSidebar.browser;
+    if (!sbrowser.hasAttribute("origin"))
+      return;
+
+    sbrowser.removeEventListener("click", SocialSidebar._onclick, true);
+    sbrowser.stop();
+    sbrowser.removeAttribute("origin");
+    sbrowser.setAttribute("src", "about:blank");
+    // We need to explicitly create a new content viewer because the old one
+    // doesn't get destroyed until about:blank has loaded (which does not happen
+    // as long as the element is hidden).
+    sbrowser.messageManager.sendAsyncMessage("Social:ClearFrame");
+    SocialFlyout.unload();
+  },
+
+  _unloadTimeoutId: 0,
+
+  _provider: null,
+  ensureProvider: function() {
+    if (this._provider)
+      return;
+    // origin for sidebar is persisted, so get the previously selected sidebar
+    // first, otherwise fallback to the first provider in the list
+    let origin = this.browser.getAttribute("origin");
+    let providers = Social.providers.filter(p => p.sidebarURL);
+    let provider;
+    if (origin)
+      provider = Social._getProviderFromOrigin(origin);
+    if (!provider && providers.length > 0)
+      provider = providers[0];
+    if (provider)
+      this.provider = provider;
+  },
+
+  get provider() {
+    return this._provider;
+  },
+
+  set provider(provider) {
+    if (!provider || provider.sidebarURL) {
+      this._provider = provider;
+      this._updateHeader();
+      this._updateCheckedMenuItems(provider && provider.origin);
+      this.update();
+    }
+  },
+
+  disableProvider: function(origin) {
+    if (this._provider && this._provider.origin == origin) {
+      this._provider = null;
+      // force a selection of the next provider if there is one
+      this.ensureProvider();
+    }
+  },
+
+  _updateHeader: function() {
+    let provider = this.provider;
+    let image, title;
+    if (provider) {
+      image = "url(" + (provider.icon32URL || provider.iconURL) + ")";
+      title = provider.name;
+    }
+    document.getElementById("social-sidebar-favico").style.listStyleImage = image;
+    document.getElementById("social-sidebar-title").value = title;
+  },
+
+  _updateCheckedMenuItems: function(origin) {
+    // update selected menuitems
+    let menuitems = document.getElementsByClassName("social-provider-menuitem");
+    for (let mi of menuitems) {
+      if (origin && mi.getAttribute("origin") == origin) {
+        mi.setAttribute("checked", "true");
+        mi.setAttribute("oncommand", "SocialSidebar.hide();");
+      } else if (mi.getAttribute("checked")) {
+        mi.removeAttribute("checked");
+        mi.setAttribute("oncommand", "SocialSidebar.show(this.getAttribute('origin'));");
+      }
+    }
+  },
+
+  show: function(origin) {
+    // always show the sidebar, and set the provider
+    let broadcaster = document.getElementById("socialSidebarBroadcaster");
+    broadcaster.hidden = false;
+    if (origin)
+      this.provider = Social._getProviderFromOrigin(origin);
+    else
+      SocialSidebar.update();
+    this.saveWindowState();
+    Services.telemetry.getHistogramById("SOCIAL_SIDEBAR_STATE").add(true);
+  },
+
+  hide: function() {
+    let broadcaster = document.getElementById("socialSidebarBroadcaster");
+    broadcaster.hidden = true;
+    this._updateCheckedMenuItems();
+    this.clearProviderMenus();
+    SocialSidebar.update();
+    this.saveWindowState();
+    Services.telemetry.getHistogramById("SOCIAL_SIDEBAR_STATE").add(false);
+  },
+
+  toggleSidebar: function SocialSidebar_toggle() {
+    let broadcaster = document.getElementById("socialSidebarBroadcaster");
+    if (broadcaster.hidden)
+      this.show();
+    else
+      this.hide();
+  },
+
+  populateSidebarMenu: function(event) {
+    // Providers are removed from the view->sidebar menu when there is a change
+    // in providers, so we only have to populate onshowing if there are no
+    // provider menus. We populate this menu so long as there are enabled
+    // providers with sidebars.
+    let popup = event.target;
+    let providerMenuSeps = popup.getElementsByClassName("social-provider-menu");
+    if (providerMenuSeps[0].previousSibling.nodeName == "menuseparator")
+      SocialSidebar.populateProviderMenu(providerMenuSeps[0]);
+  },
+
+  clearProviderMenus: function() {
+    // called when there is a change in the provider list we clear all menus,
+    // they will be repopulated when the menu is shown
+    let providerMenuSeps = document.getElementsByClassName("social-provider-menu");
+    for (let providerMenuSep of providerMenuSeps) {
+      while (providerMenuSep.previousSibling.nodeName == "menuitem") {
+        let menu = providerMenuSep.parentNode;
+        menu.removeChild(providerMenuSep.previousSibling);
+      }
+    }
+  },
+
+  populateProviderMenu: function(providerMenuSep) {
+    let menu = providerMenuSep.parentNode;
+    // selectable providers are inserted before the provider-menu seperator,
+    // remove any menuitems in that area
+    while (providerMenuSep.previousSibling.nodeName == "menuitem") {
+      menu.removeChild(providerMenuSep.previousSibling);
+    }
+    // only show a selection in the sidebar header menu if there is more than one
+    let providers = Social.providers.filter(p => p.sidebarURL);
+    if (providers.length < 2 && menu.id != "viewSidebarMenu") {
+      providerMenuSep.hidden = true;
+      return;
+    }
+    let topSep = providerMenuSep.previousSibling;
+    for (let provider of providers) {
+      let menuitem = document.createElement("menuitem");
+      menuitem.className = "menuitem-iconic social-provider-menuitem";
+      menuitem.setAttribute("image", provider.iconURL);
+      menuitem.setAttribute("label", provider.name);
+      menuitem.setAttribute("origin", provider.origin);
+      if (this.opened && provider == this.provider) {
+        menuitem.setAttribute("checked", "true");
+        menuitem.setAttribute("oncommand", "SocialSidebar.hide();");
+      } else {
+        menuitem.setAttribute("oncommand", "SocialSidebar.show(this.getAttribute('origin'));");
+      }
+      menu.insertBefore(menuitem, providerMenuSep);
+    }
+    topSep.hidden = topSep.nextSibling == providerMenuSep;
+    providerMenuSep.hidden = !providerMenuSep.nextSibling;
+  }
+}
+
+// this helper class is used by removable/customizable buttons to handle
+// widget creation/destruction
+
+// When a provider is installed we show all their UI so the user will see the
+// functionality of what they installed. The user can later customize the UI,
+// moving buttons around or off the toolbar.
+//
+// On startup, we create the button widgets of any enabled provider.
+// CustomizableUI handles placement and persistence of placement.
+function ToolbarHelper(type, createButtonFn, listener) {
+  this._createButton = createButtonFn;
+  this._type = type;
+
+  if (listener) {
+    CustomizableUI.addListener(listener);
+    // remove this listener on window close
+    window.addEventListener("unload", () => {
+      CustomizableUI.removeListener(listener);
+    });
+  }
+}
+
+ToolbarHelper.prototype = {
+  idFromOrigin: function(origin) {
+    // this id needs to pass the checks in CustomizableUI, so remove characters
+    // that wont pass.
+    return this._type + "-" + Services.io.newURI(origin, null, null).hostPort.replace(/[\.:]/g,'-');
+  },
+
+  // should be called on disable of a provider
+  removeProviderButton: function(origin) {
+    CustomizableUI.destroyWidget(this.idFromOrigin(origin));
+  },
+
+  clearPalette: function() {
+    for (let p of Social.providers) {
+      this.removeProviderButton(p.origin);
+    }
+  },
+
+  // should be called on enable of a provider
+  populatePalette: function() {
+    if (!Social.enabled) {
+      this.clearPalette();
+      return;
+    }
+
+    // create any buttons that do not exist yet if they have been persisted
+    // as a part of the UI (otherwise they belong in the palette).
+    for (let provider of Social.providers) {
+      let id = this.idFromOrigin(provider.origin);
+      this._createButton(id, provider);
+    }
+  }
+}
+
+var SocialStatusWidgetListener = {
+  _getNodeOrigin: function(aWidgetId) {
+    // we rely on the button id being the same as the widget.
+    let node = document.getElementById(aWidgetId);
+    if (!node)
+      return null
+    if (!node.classList.contains("social-status-button"))
+      return null
+    return node.getAttribute("origin");
+  },
+  onWidgetAdded: function(aWidgetId, aArea, aPosition) {
+    let origin = this._getNodeOrigin(aWidgetId);
+    if (origin)
+      SocialStatus.updateButton(origin);
+  },
+  onWidgetRemoved: function(aWidgetId, aPrevArea) {
+    let origin = this._getNodeOrigin(aWidgetId);
+    if (!origin)
+      return;
+    // When a widget is demoted to the palette ('removed'), it's visual
+    // style should change.
+    SocialStatus.updateButton(origin);
+    SocialStatus._removeFrame(origin);
+  }
+}
+
+SocialStatus = {
+  populateToolbarPalette: function() {
+    this._toolbarHelper.populatePalette();
+
+    for (let provider of Social.providers)
+      this.updateButton(provider.origin);
+  },
+
+  removeProvider: function(origin) {
+    this._removeFrame(origin);
+    this._toolbarHelper.removeProviderButton(origin);
+  },
+
+  reloadProvider: function(origin) {
+    let button = document.getElementById(this._toolbarHelper.idFromOrigin(origin));
+    if (button && button.getAttribute("open") == "true")
+      document.getElementById("social-notification-panel").hidePopup();
+    this._removeFrame(origin);
+  },
+
+  _removeFrame: function(origin) {
+    let notificationFrameId = "social-status-" + origin;
+    let frame = document.getElementById(notificationFrameId);
+    if (frame) {
+      frame.parentNode.removeChild(frame);
+    }
+  },
+
+  get _toolbarHelper() {
+    delete this._toolbarHelper;
+    this._toolbarHelper = new ToolbarHelper("social-status-button",
+                                            CreateSocialStatusWidget,
+                                            SocialStatusWidgetListener);
+    return this._toolbarHelper;
+  },
+
+  updateButton: function(origin) {
+    let id = this._toolbarHelper.idFromOrigin(origin);
+    let widget = CustomizableUI.getWidget(id);
+    if (!widget)
+      return;
+    let button = widget.forWindow(window).node;
+    if (button) {
+      // we only grab the first notification, ignore all others
+      let provider = Social._getProviderFromOrigin(origin);
+      let icons = provider.ambientNotificationIcons;
+      let iconNames = Object.keys(icons);
+      let notif = icons[iconNames[0]];
+
+      // The image and tooltip need to be updated for
+      // ambient notification changes.
+      let iconURL = provider.icon32URL || provider.iconURL;
+      let tooltiptext;
+      if (!notif || !widget.areaType) {
+        button.style.listStyleImage = "url(" + iconURL + ")";
+        button.setAttribute("badge", "");
+        button.setAttribute("aria-label", "");
+        button.setAttribute("tooltiptext", provider.name);
+        return;
+      }
+      button.style.listStyleImage = "url(" + (notif.iconURL || iconURL) + ")";
+      button.setAttribute("tooltiptext", notif.label || provider.name);
+
+      let badge = notif.counter || "";
+      button.setAttribute("badge", badge);
+      let ariaLabel = notif.label;
+      // if there is a badge value, we must use a localizable string to insert it.
+      if (badge)
+        ariaLabel = gNavigatorBundle.getFormattedString("social.aria.toolbarButtonBadgeText",
+                                                        [ariaLabel, badge]);
+      button.setAttribute("aria-label", ariaLabel);
+    }
+  },
+
+  _onclose: function(frame) {
+    frame.removeEventListener("close", this._onclose, true);
+    frame.removeEventListener("click", this._onclick, true);
+  },
+
+  _onclick: function() {
+    Services.telemetry.getHistogramById("SOCIAL_PANEL_CLICKS").add(1);
+  },
+
+  showPopup: function(aToolbarButton) {
+    // attach our notification panel if necessary
+    let origin = aToolbarButton.getAttribute("origin");
+    let provider = Social._getProviderFromOrigin(origin);
+
+    PanelFrame.showPopup(window, aToolbarButton, "social", origin,
+                         provider.statusURL, provider.getPageSize("status"),
+                         (frame) => {
+                          frame.addEventListener("close", () => { SocialStatus._onclose(frame) }, true);
+                          frame.addEventListener("click", this._onclick, true);
+                        });
+    Services.telemetry.getHistogramById("SOCIAL_TOOLBAR_BUTTONS").add(1);
+  }
+};
+
+
+var SocialMarksWidgetListener = {
+  onWidgetAdded: function(aWidgetId, aArea, aPosition) {
+    let node = document.getElementById(aWidgetId);
+    if (!node || !node.classList.contains("social-mark-button"))
+      return;
+    node._receiveMessage = node.receiveMessage.bind(node);
+    messageManager.addMessageListener("Social:ErrorPageNotify", node._receiveMessage);
+  },
+  onWidgetBeforeDOMChange: function(aNode, aNextNode, aContainer, isRemoval) {
+    if (!isRemoval || !aNode || !aNode.classList.contains("social-mark-button"))
+      return;
+    messageManager.removeMessageListener("Social:ErrorPageNotify", aNode._receiveMessage);
+    delete aNode._receiveMessage;
+  }
+}
+
+/**
+ * SocialMarks
+ *
+ * Handles updates to toolbox and signals all buttons to update when necessary.
+ */
+SocialMarks = {
+  get nodes() {
+    for (let p of Social.providers.filter(p => p.markURL)) {
+      let widgetId = SocialMarks._toolbarHelper.idFromOrigin(p.origin);
+      let widget = CustomizableUI.getWidget(widgetId);
+      if (!widget)
+        continue;
+      let node = widget.forWindow(window).node;
+      if (node)
+        yield node;
+    }
+  },
+  update: function() {
+    // querySelectorAll does not work on the menu panel, so we have to do this
+    // the hard way.
+    for (let node of this.nodes) {
+      // xbl binding is not complete on startup when buttons are not in toolbar,
+      // verify update is available
+      if (node.update) {
+        node.update();
+      }
+    }
+  },
+
+  getProviders: function() {
+    // only rely on providers that the user has placed in the UI somewhere. This
+    // also means that populateToolbarPalette must be called prior to using this
+    // method, otherwise you get a big fat zero. For our use case with context
+    // menu's, this is ok.
+    return Social.providers.filter(p => p.markURL &&
+                                        document.getElementById(this._toolbarHelper.idFromOrigin(p.origin)));
+  },
+
+  populateContextMenu: function() {
+    // only show a selection if enabled and there is more than one
+    let providers = this.getProviders();
+
+    // remove all previous entries by class
+    let menus = [...document.getElementsByClassName("context-socialmarks")];
+    for (let m of menus) {
+      m.parentNode.removeChild(m);
+    }
+
+    let contextMenus = [
+      {
+        type: "link",
+        id: "context-marklinkMenu",
+        label: "social.marklinkMenu.label"
+      },
+      {
+        type: "page",
+        id: "context-markpageMenu",
+        label: "social.markpageMenu.label"
+      }
+    ];
+    for (let cfg of contextMenus) {
+      this._populateContextPopup(cfg, providers);
+    }
+    this.update();
+  },
+
+  MENU_LIMIT: 3, // adjustable for testing
+  _populateContextPopup: function(menuInfo, providers) {
+    let menu = document.getElementById(menuInfo.id);
+    let popup = menu.firstChild;
+    for (let provider of providers) {
+      // We show up to MENU_LIMIT providers as single menuitems's at the top
+      // level of the context menu, if we have more than that, dump them *all*
+      // into the menu popup.
+      let mi = document.createElement("menuitem");
+      mi.setAttribute("oncommand", "gContextMenu.markLink(this.getAttribute('origin'));");
+      mi.setAttribute("origin", provider.origin);
+      mi.setAttribute("image", provider.iconURL);
+      if (providers.length <= this.MENU_LIMIT) {
+        // an extra class to make enable/disable easy
+        mi.setAttribute("class", "menuitem-iconic context-socialmarks context-mark"+menuInfo.type);
+        let menuLabel = gNavigatorBundle.getFormattedString(menuInfo.label, [provider.name]);
+        mi.setAttribute("label", menuLabel);
+        menu.parentNode.insertBefore(mi, menu);
+      } else {
+        mi.setAttribute("class", "menuitem-iconic context-socialmarks");
+        mi.setAttribute("label", provider.name);
+        popup.appendChild(mi);
+      }
+    }
+  },
+
+  populateToolbarPalette: function() {
+    this._toolbarHelper.populatePalette();
+    this.populateContextMenu();
+  },
+
+  removeProvider: function(origin) {
+    this._toolbarHelper.removeProviderButton(origin);
+  },
+
+  get _toolbarHelper() {
+    delete this._toolbarHelper;
+    this._toolbarHelper = new ToolbarHelper("social-mark-button",
+                                            CreateSocialMarkWidget,
+                                            SocialMarksWidgetListener);
+    return this._toolbarHelper;
+  },
+
+  markLink: function(aOrigin, aUrl, aTarget) {
+    // find the button for this provider, and open it
+    let id = this._toolbarHelper.idFromOrigin(aOrigin);
+    document.getElementById(id).markLink(aUrl, aTarget);
+  }
+};
+
 })();

--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -14,16 +14,40 @@
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else
   min-width: 300px;
 %endif
 }
 
+/* These values are chosen to keep the Loop detached chat window from
+ * getting too small.  When it's too small, three bad things happen:
+ *
+ * - It looks terrible
+ * - It's not really usable
+ * - It's possible for the user to be transmitting video that's cropped by the
+ *   the edge of the window, so that they're not aware of it, which is a
+ *   privacy problem
+ *
+ * Note that if the chat window grows more users than Loop who want this
+ * ability, we'll need to generalize.  A partial patch for this is in
+ * bug 1112264.
+ */
+
+#chat-window {
+ /*
+  * In some ideal world, we'd have a simple way to express "block resizing
+  * along any dimension beyond the point at which an overflow event would
+  * occur".  But none of -moz-{fit,max,min}-content do what we want here. So..
+  */
+  min-width: 260px;
+  min-height: 315px;
+}
+
 #main-window[customize-entered] {
   min-width: -moz-fit-content;
 }
 
 searchbar {
   -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
 }
 
@@ -883,26 +907,101 @@ html|*#gcli-output-frame,
 .browserStack[responsivemode] {
   transition-property: min-width, max-width, min-height, max-height;
 }
 
 .browserStack[responsivemode][notransition] {
   transition: none;
 }
 
+toolbarbutton[type="socialmark"] {
+  -moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks");
+}
+
 panelview > .social-panel-frame {
   width: auto;
   height: auto;
 }
 
 /* Translation */
 notification[value="translation"] {
   -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
 }
 
+/* Social */
+/* Note the chatbox 'width' values are duplicated in socialchat.xml */
+chatbox {
+  -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
+  transition: height 150ms ease-out, width 150ms ease-out;
+  height: 290px;
+  width: 300px; /* CHAT_WIDTH_OPEN in socialchat.xml */
+}
+
+chatbox[customSize] {
+  width: 350px; /* CHAT_WIDTH_OPEN_ALT in socialchat.xml */
+}
+
+#chat-window[customSize] {
+  min-width: 350px;
+}
+
+chatbox[customSize="loopChatEnabled"] {
+  /* 430px as defined per UX */
+  height: 430px;
+}
+
+#chat-window[customSize="loopChatEnabled"] {
+  /* 325px + 30px top bar height. */
+  min-height: calc(325px + 30px);
+}
+
+chatbox[customSize="loopChatMessageAppended"] {
+  /* 430px as defined per UX */
+  height: 430px;
+}
+
+chatbox[customSize="loopChatDisabledMessageAppended"] {
+  /* 388px as defined per UX */
+  height: 388px;
+}
+
+#chat-window[customSize="loopChatMessageAppended"] {
+  /* 445px + 30px top bar height. */
+  min-height: calc(400px + 30px);
+}
+
+chatbox[minimized="true"] {
+  width: 160px;
+  height: 20px; /* CHAT_WIDTH_MINIMIZED in socialchat.xml */
+}
+
+chatbar {
+  -moz-binding: url("chrome://browser/content/socialchat.xml#chatbar");
+  height: 0;
+  max-height: 0;
+}
+
+.chatbar-innerbox {
+  margin: -285px 0 0;
+}
+
+chatbar[customSize] > .chatbar-innerbox {
+  /* 450px to make room for the maximum custom-size chatbox; currently 'loopChatMessageAppended'. */
+  margin-top: -450px;
+}
+
+/* Apply crisp rendering for favicons at exactly 2dppx resolution */
+@media (resolution: 2dppx) {
+  #social-sidebar-favico,
+  .social-status-button,
+  .chat-status-icon {
+    image-rendering: -moz-crisp-edges;
+  }
+}
+
 /** See bug 872317 for why the following rule is necessary. */
 
 #downloads-button {
   -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton");
 }
 
 /*** Visibility of downloads indicator controls ***/
 
@@ -924,16 +1023,28 @@ toolbarpaletteitem[place="palette"] > #d
 
 #downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon,
 #downloads-button:not(:-moz-any([progress], [counter], [paused]))
                                                    #downloads-indicator-progress-area
 {
   visibility: hidden;
 }
 
+/* hide chat chrome when chat is fullscreen */
+#chat-window[sizemode="fullscreen"] chatbox > .chat-titlebar {
+  display: none;
+}
+
+/* hide chatbar and sidebar if browser tab is fullscreen */
+#main-window[inFullscreen][inDOMFullscreen] chatbar,
+#main-window[inFullscreen][inDOMFullscreen] #social-sidebar-box,
+#main-window[inFullscreen][inDOMFullscreen] #social-sidebar-splitter {
+  display: none;
+}
+
 /* Combobox dropdown renderer */
 #ContentSelectDropdown > menupopup {
   /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
    * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
   direction: ltr;
 }
 
 /* Indent options in optgroups */

--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -2289,16 +2289,19 @@ function BrowserViewSourceOfDocument(aAr
         // that of the original URL, so disable remoteness if necessary for this
         // URL.
         let contentProcess = Ci.nsIXULRuntime.PROCESS_TYPE_CONTENT
         forceNotRemote =
           gMultiProcessBrowser &&
           !E10SUtils.canLoadURIInProcess(args.URL, contentProcess)
       }
 
+      // In the case of sidebars and chat windows, gBrowser is defined but null,
+      // because no #content element exists.  For these cases, we need to find
+      // the most recent browser window.
       // In the case of popups, we need to find a non-popup browser window.
       if (!tabBrowser || !window.toolbar.visible) {
         // This returns only non-popup browser windows by default.
         let browserWindow = RecentWindow.getMostRecentBrowserWindow();
         tabBrowser = browserWindow.gBrowser;
       }
 
       // `viewSourceInBrowser` will load the source content from the page

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -266,16 +266,33 @@
           <toolbarbutton id="add-share-provider" class="toolbarbutton share-provider-button" type="radio"
                          group="share-providers" tooltiptext="&findShareServices.label;"
                          oncommand="SocialShare.showDirectory()"/>
         </arrowscrollbox>
       </hbox>
       <hbox id="share-container" flex="1"/>
     </panel>
 
+    <panel id="social-notification-panel"
+           class="social-panel"
+           type="arrow"
+           hidden="true"
+           noautofocus="true"/>
+    <panel id="social-flyout-panel"
+           class="social-panel"
+           onpopupshown="SocialFlyout.onShown()"
+           onpopuphidden="SocialFlyout.onHidden()"
+           side="right"
+           type="arrow"
+           hidden="true"
+           flip="slide"
+           rolluponmousewheel="true"
+           noautofocus="true"
+           position="topcenter topright"/>
+
     <menupopup id="toolbar-context-menu"
                onpopupshowing="onViewToolbarsPopupShowing(event, document.getElementById('viewToolbarsMenuSeparator'));">
       <menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
                 accesskey="&customizeMenu.moveToPanel.accesskey;"
                 label="&customizeMenu.moveToPanel.label;"
                 contexttype="toolbaritem"
                 class="customize-context-moveToPanel"/>
       <menuitem oncommand="gCustomizeMode.removeFromArea(document.popupNode)"
@@ -1059,16 +1076,66 @@
       <vbox id="appcontent" flex="1">
         <notificationbox id="high-priority-global-notificationbox" notificationside="top"/>
         <tabbrowser id="content"
                     flex="1" contenttooltip="aHTMLTooltip"
                     tabcontainer="tabbrowser-tabs"
                     contentcontextmenu="contentAreaContextMenu"
                     autocompletepopup="PopupAutoComplete"
                     selectmenulist="ContentSelectDropdown"/>
+        <chatbar id="pinnedchats" layer="true" mousethrough="always" hidden="true"/>
+      </vbox>
+      <splitter id="social-sidebar-splitter"
+                class="chromeclass-extrachrome sidebar-splitter"
+                observes="socialSidebarBroadcaster"/>
+      <vbox id="social-sidebar-box"
+            class="chromeclass-extrachrome"
+            observes="socialSidebarBroadcaster"
+            persist="width">
+
+        <sidebarheader id="social-sidebar-header" class="sidebar-header" align="center">
+          <image id="social-sidebar-favico"/>
+          <label id="social-sidebar-title" class="sidebar-title" persist="value" flex="1" crop="end" control="sidebar"/>
+          <toolbarbutton id="social-sidebar-button"
+                         class="toolbarbutton-1"
+                         type="menu">
+            <menupopup id="social-statusarea-popup" position="after_end">
+              <menuitem class="social-toggle-sidebar-menuitem"
+                        type="checkbox"
+                        autocheck="false"
+                        command="Social:ToggleSidebar"
+                        label="&social.toggleSidebar.label;"
+                        accesskey="&social.toggleSidebar.accesskey;"/>
+              <menuitem class="social-toggle-notifications-menuitem"
+                        type="checkbox"
+                        autocheck="false"
+                        command="Social:ToggleNotifications"
+                        label="&social.toggleNotifications.label;"
+                        accesskey="&social.toggleNotifications.accesskey;"/>
+              <menuseparator/>
+              <menuseparator class="social-provider-menu" hidden="true"/>
+              <menuitem class="social-addons-menuitem" command="Social:Addons"
+                        label="&social.addons.label;"/>
+              <menuitem label="&social.learnMore.label;"
+                        accesskey="&social.learnMore.accesskey;"
+                        oncommand="SocialUI.showLearnMore();"/>
+            </menupopup>
+          </toolbarbutton>
+        </sidebarheader>
+
+        <browser id="social-sidebar-browser"
+                 type="content"
+                 context="contentAreaContextMenu"
+                 message="true"
+                 messagemanagergroup="social"
+                 disableglobalhistory="true"
+                 tooltip="aHTMLTooltip"
+                 popupnotificationanchor="social-sidebar-favico"
+                 flex="1"
+                 style="min-width: 14em; width: 18em; max-width: 36em;"/>
       </vbox>
       <vbox id="browser-border-end" hidden="true" layer="true"/>
     </hbox>
 #include ../../components/customizableui/content/customizeMode.inc.xul
   </deck>
 
   <html:div id="fullscreen-warning" class="pointerlockfswarning" hidden="true">
     <html:div class="pointerlockfswarning-domain-text">

new file mode 100644
--- /dev/null
+++ b/browser/base/content/chatWindow.xul
@@ -0,0 +1,170 @@
+#filter substitution
+<?xml version="1.0"?>
+
+# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+<?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
+<?xul-overlay href="chrome://browser/content/baseMenuOverlay.xul"?>
+<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
+<?xul-overlay href="chrome://browser/content/places/placesOverlay.xul"?>
+
+#include browser-doctype.inc
+
+<window id="chat-window"
+        windowtype="Social:Chat"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        title="&mainWindow.title;"
+        onload="gChatWindow.onLoad();"
+        onunload="gChatWindow.onUnload();"
+        macanimationtype="document"
+        fullscreenbutton="true"
+# width and height are also used in socialchat.xml: chatbar dragend handler
+        width="400px"
+        height="420px"
+        persist="screenX screenY width height sizemode">
+
+  <script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
+  <script type="application/javascript" src="chrome://global/content/contentAreaUtils.js"/>
+  <script type="application/javascript" src="chrome://browser/content/nsContextMenu.js"/>
+
+#include global-scripts.inc
+
+<script type="application/javascript">
+
+var gChatWindow = {
+  // cargo-culted from browser.js for nonBrowserStartup, but we're slightly
+  // different what what we need to leave enabled
+  onLoad: function() {
+    // Disable inappropriate commands / submenus
+    var disabledItems = ['Browser:SavePage', 'Browser:OpenFile',
+                         'Browser:SendLink', 'cmd_pageSetup', 'cmd_print',
+                         'cmd_find', 'cmd_findAgain', 'cmd_findPrevious',
+                         'cmd_fullZoomReduce', 'cmd_fullZoomEnlarge', 'cmd_fullZoomReset',
+#ifdef XP_MACOSX
+                         'viewToolbarsMenu', 'viewSidebarMenuMenu',
+                         'viewFullZoomMenu', 'pageStyleMenu', 'charsetMenu',
+#else
+                         'Browser:OpenLocation', 'Tools:Search',
+#endif
+                         'Tools:Sanitize', 'Tools:DevToolbox',
+                         'key_selectTab1', 'key_selectTab2', 'key_selectTab3',
+                         'key_selectTab4', 'key_selectTab5', 'key_selectTab6',
+                         'key_selectTab7', 'key_selectTab8', 'key_selectLastTab',
+                         'viewHistorySidebar', 'viewBookmarksSidebar',
+                         'Browser:AddBookmarkAs', 'Browser:BookmarkAllTabs'];
+
+    for (let disabledItem of disabledItems) {
+      document.getElementById(disabledItem).setAttribute("disabled", "true");
+    }
+
+    window.QueryInterface(Ci.nsIDOMChromeWindow).browserDOMWindow =
+      new chatBrowserAccess();
+
+    // initialise the offline listener
+    BrowserOffline.init();
+  },
+
+  onUnload: function() {
+    BrowserOffline.uninit();
+  }
+}
+
+// define a popupnotifications handler for this window.  we don't use
+// an iconbox here, and only support the browser frame for chat.
+XPCOMUtils.defineLazyGetter(this, "PopupNotifications", function () {
+  let tmp = {};
+  Cu.import("resource://gre/modules/PopupNotifications.jsm", tmp);
+  try {
+    return new tmp.PopupNotifications(document.getElementById("chatter").content,
+                                      document.getElementById("notification-popup"),
+                                      null);
+  } catch (ex) {
+    console.error(ex);
+    return null;
+  }
+});
+
+XPCOMUtils.defineLazyModuleGetter(this, "RecentWindow",
+                                  "resource:///modules/RecentWindow.jsm");
+
+function chatBrowserAccess() { }
+
+chatBrowserAccess.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsIBrowserDOMWindow, Ci.nsISupports]),
+
+  _openURIInNewTab: function(aURI, aWhere) {
+    if (aWhere != Ci.nsIBrowserDOMWindow.OPEN_NEWTAB)
+      return null;
+
+    let win = RecentWindow.getMostRecentBrowserWindow();
+    if (!win) {
+      // We couldn't find a suitable window, a new one needs to be opened.
+      return null;
+    }
+
+    let loadInBackground =
+      Services.prefs.getBoolPref("browser.tabs.loadDivertedInBackground");
+    let tab = win.gBrowser.loadOneTab(aURI ? aURI.spec : "about:blank",
+                                      {inBackground: loadInBackground});
+    let browser = win.gBrowser.getBrowserForTab(tab);
+    win.focus();
+
+    return browser;
+  },
+
+  openURI: function (aURI, aOpener, aWhere, aContext) {
+    let browser = this._openURIInNewTab(aURI, aWhere);
+    return browser ? browser.contentWindow : null;
+  },
+
+  openURIInFrame: function browser_openURIInFrame(aURI, aParams, aWhere, aContext) {
+    let browser = this._openURIInNewTab(aURI, aWhere);
+    return browser ? browser.QueryInterface(Ci.nsIFrameLoaderOwner) : null;
+  },
+
+  isTabContentWindow: function (aWindow) {
+    return this.contentWindow == aWindow;
+  },
+
+  canClose() {
+    let {BrowserUtils} = Cu.import("resource://gre/modules/BrowserUtils.jsm", {});
+    return BrowserUtils.canCloseWindow(window);
+  },
+};
+
+</script>
+
+#include browser-sets.inc
+
+#ifdef XP_MACOSX
+#include browser-menubar.inc
+#endif
+
+  <popupset id="mainPopupSet">
+    <tooltip id="aHTMLTooltip" page="true"/>
+    <menupopup id="contentAreaContextMenu" pagemenu="start"
+               onpopupshowing="if (event.target != this)
+                                 return true;
+                               gContextMenu = new nsContextMenu(this, event.shiftKey);
+                               if (gContextMenu.shouldDisplay)
+                                 document.popupNode = this.triggerNode;
+                               return gContextMenu.shouldDisplay;"
+               onpopuphiding="if (event.target != this)
+                                return;
+                              gContextMenu.hiding();
+                              gContextMenu = null;">
+#include browser-context.inc
+    </menupopup>
+
+#include popup-notifications.inc
+
+  </popupset>
+
+  <commandset id="editMenuCommands"/>
+  <chatbox id="chatter" flex="1"/>
+</window>

--- a/browser/base/content/content.js
+++ b/browser/base/content/content.js
@@ -708,16 +708,20 @@ var PageMetadataMessenger = {
       }
     }
   }
 }
 PageMetadataMessenger.init();
 
 addEventListener("ActivateSocialFeature", function (aEvent) {
   let document = content.document;
+  if (PrivateBrowsingUtils.isContentWindowPrivate(content)) {
+    Cu.reportError("cannot use social providers in private windows");
+    return;
+  }
   let dwu = content.QueryInterface(Ci.nsIInterfaceRequestor)
                    .getInterface(Ci.nsIDOMWindowUtils);
   if (!dwu.isHandlingUserInput) {
     Cu.reportError("attempt to activate provider without user input from " + document.nodePrincipal.origin);
     return;
   }
 
   let node = aEvent.target;

--- a/browser/base/content/nsContextMenu.js
+++ b/browser/base/content/nsContextMenu.js
@@ -345,16 +345,38 @@ nsContextMenu.prototype = {
 
     // BiDi UI
     this.showItem("context-sep-bidi", !this.onNumeric && top.gBidiUI);
     this.showItem("context-bidi-text-direction-toggle",
                   this.onTextInput && !this.onNumeric && top.gBidiUI);
     this.showItem("context-bidi-page-direction-toggle",
                   !this.onTextInput && top.gBidiUI);
 
+    // SocialMarks. Marks does not work with text selections, only links. If
+    // there is more than MENU_LIMIT providers, we show a submenu for them,
+    // otherwise we have a menuitem per provider (added in SocialMarks class).
+    let markProviders = SocialMarks.getProviders();
+    let enablePageMarks = markProviders.length > 0 && !(this.onLink || this.onImage
+                            || this.onVideo || this.onAudio);
+    this.showItem("context-markpageMenu", enablePageMarks && markProviders.length > SocialMarks.MENU_LIMIT);
+    let enablePageMarkItems = enablePageMarks && markProviders.length <= SocialMarks.MENU_LIMIT;
+    let linkmenus = document.getElementsByClassName("context-markpage");
+    for (let m of linkmenus) {
+      m.hidden = !enablePageMarkItems;
+    }
+
+    let enableLinkMarks = markProviders.length > 0 &&
+                            ((this.onLink && !this.onMailtoLink) || this.onPlainTextLink);
+    this.showItem("context-marklinkMenu", enableLinkMarks && markProviders.length > SocialMarks.MENU_LIMIT);
+    let enableLinkMarkItems = enableLinkMarks && markProviders.length <= SocialMarks.MENU_LIMIT;
+    linkmenus = document.getElementsByClassName("context-marklink");
+    for (let m of linkmenus) {
+      m.hidden = !enableLinkMarkItems;
+    }
+
     // SocialShare
     let shareButton = SocialShare.shareButton;
     let shareEnabled = shareButton && !shareButton.disabled && !this.onSocial;
     let pageShare = shareEnabled && !(this.isContentSelected ||
                             this.onTextInput || this.onLink || this.onImage ||
                             this.onVideo || this.onAudio || this.onCanvas);
     this.showItem("context-sharepage", pageShare);
     this.showItem("context-shareselect", shareEnabled && this.isContentSelected);
@@ -1041,24 +1063,32 @@ nsContextMenu.prototype = {
                      Ci.nsIScriptSecurityManager.DISALLOW_SCRIPT);
     let referrer = gContextMenuContentData.referrer;
     openUILinkIn(gContextMenuContentData.docLocation, "current",
                  { disallowInheritPrincipal: true,
                    referrerURI: referrer ? makeURI(referrer) : null });
   },
 
   reload: function(event) {
-    BrowserReloadOrDuplicate(event);
+    if (this.onSocial) {
+      // full reload of social provider
+      Social._getProviderFromOrigin(this.browser.getAttribute("origin")).reload();
+    } else {
+      BrowserReloadOrDuplicate(event);
+    }
   },
 
   // View Partial Source
   viewPartialSource: function(aContext) {
     let inWindow = !Services.prefs.getBoolPref("view_source.tab");
     let openSelectionFn = inWindow ? null : function() {
       let tabBrowser = gBrowser;
+      // In the case of sidebars and chat windows, gBrowser is defined but null,
+      // because no #content element exists.  For these cases, we need to find
+      // the most recent browser window.
       // In the case of popups, we need to find a non-popup browser window.
       if (!tabBrowser || !window.toolbar.visible) {
         // This returns only non-popup browser windows by default.
         let browserWindow = RecentWindow.getMostRecentBrowserWindow();
         tabBrowser = browserWindow.gBrowser;
       }
       let tab = tabBrowser.loadOneTab("about:blank", {
         relatedToCurrent: true,
@@ -1697,16 +1727,20 @@ nsContextMenu.prototype = {
                                                 message.data.description)
                                   .catch(Components.utils.reportError);
     };
     mm.addMessageListener("ContextMenu:BookmarkFrame:Result", onMessage);
 
     mm.sendAsyncMessage("ContextMenu:BookmarkFrame", null, { target: this.target });
   },
 
+  markLink: function CM_markLink(origin) {
+    // send link to social, if it is the page url linkURI will be null
+    SocialMarks.markLink(origin, this.linkURI ? this.linkURI.spec : null, this.target);
+  },
   shareLink: function CM_shareLink() {
     SocialShare.sharePage(null, { url: this.linkURI.spec }, this.target);
   },
 
   shareImage: function CM_shareImage() {
     SocialShare.sharePage(null, { url: this.imageURL, previews: [ this.mediaURL ] }, this.target);
   },
 

--- a/browser/base/content/social-content.js
+++ b/browser/base/content/social-content.js
@@ -39,16 +39,25 @@ addEventListener("DOMTitleChanged", func
   if (!gDOMTitleChangedByUs) {
     sendAsyncMessage("Social:DOMTitleChanged", {
       title: e.target.title
     });
   }
   gDOMTitleChangedByUs = false;
 });
 
+addEventListener("Social:Notification", function(event) {
+  let frame = docShell.chromeEventHandler;
+  let origin = frame.getAttribute("origin");
+  sendAsyncMessage("Social:Notification", {
+    "origin": origin,
+    "detail": JSON.parse(event.detail)
+  });
+});
+
 addMessageListener("Social:OpenGraphData", (message) => {
   let ev = new content.CustomEvent("OpenGraphData", { detail: JSON.stringify(message.data) });
   content.dispatchEvent(ev);
 });
 
 addMessageListener("Social:ClearFrame", (message) => {
   docShell.createAboutBlankContentViewer(null);
 });

new file mode 100644
--- /dev/null
+++ b/browser/base/content/socialchat.xml
@@ -0,0 +1,913 @@
+<?xml version="1.0"?>
+
+<bindings id="socialChatBindings"
+    xmlns="http://www.mozilla.org/xbl"
+    xmlns:xbl="http://www.mozilla.org/xbl"
+    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="chatbox">
+    <content orient="vertical" mousethrough="never">
+      <xul:hbox class="chat-titlebar" xbl:inherits="minimized,selected,activity" align="baseline">
+        <xul:hbox flex="1" onclick="document.getBindingParent(this).onTitlebarClick(event);">
+          <xul:image class="chat-status-icon" xbl:inherits="src=image"/>
+          <xul:label class="chat-title" flex="1" xbl:inherits="crop=titlecrop,value=label" crop="end"/>
+        </xul:hbox>
+        <xul:toolbarbutton anonid="webRTC-shareScreen-icon"
+                           class="notification-anchor-icon chat-toolbarbutton screen-icon"
+                           oncommand="document.getBindingParent(this).showNotifications(this); event.stopPropagation();"/>
+        <xul:toolbarbutton anonid="webRTC-sharingScreen-icon"
+                           class="notification-anchor-icon chat-toolbarbutton screen-icon in-use"
+                           oncommand="document.getBindingParent(this).showNotifications(this); event.stopPropagation();"/>
+        <xul:toolbarbutton anonid="notification-icon" class="notification-anchor-icon chat-toolbarbutton"
+                           oncommand="document.getBindingParent(this).showNotifications(this); event.stopPropagation();"/>
+        <xul:toolbarbutton anonid="minimize" class="chat-minimize-button chat-toolbarbutton"
+                           oncommand="document.getBindingParent(this).toggle();"/>
+        <xul:toolbarbutton anonid="swap" class="chat-swap-button chat-toolbarbutton"
+                           oncommand="document.getBindingParent(this).swapWindows();"/>
+        <xul:toolbarbutton anonid="close" class="chat-close-button chat-toolbarbutton"
+                           oncommand="document.getBindingParent(this).close();"/>
+      </xul:hbox>
+      <xul:browser anonid="remote-content" class="chat-frame" flex="1"
+                   context="contentAreaContextMenu"
+                   disableglobalhistory="true"
+                   frameType="social"
+                   message="true"
+                   messagemanagergroup="social"
+                   tooltip="aHTMLTooltip"
+                   remote="true"
+                   xbl:inherits="src,origin"
+                   type="content"/>
+
+      <xul:browser anonid="content" class="chat-frame" flex="1"
+                   context="contentAreaContextMenu"
+                   disableglobalhistory="true"
+                   message="true"
+                   messagemanagergroup="social"
+                   tooltip="aHTMLTooltip"
+                   xbl:inherits="src,origin"
+                   type="content"/>
+    </content>
+
+    <implementation implements="nsIDOMEventListener, nsIMessageListener">
+      <constructor><![CDATA[
+        const kAnchorMap = new Map([
+          ["", "notification-"],
+          ["webRTC-shareScreen-", ""],
+          ["webRTC-sharingScreen-", ""]
+        ]);
+        const kBrowsers = [
+          document.getAnonymousElementByAttribute(this, "anonid", "content"),
+          document.getAnonymousElementByAttribute(this, "anonid", "remote-content")
+        ];
+        for (let content of kBrowsers) {
+          for (let [getterPrefix, idPrefix] of kAnchorMap) {
+            let getter = getterPrefix + "popupnotificationanchor";
+            let anonid = (idPrefix || getterPrefix) + "icon";
+            content.__defineGetter__(getter, () => {
+              delete content[getter];
+              return content[getter] = document.getAnonymousElementByAttribute(
+                this, "anonid", anonid);
+            });
+          }
+        }
+
+        let mm = this.content.messageManager;
+        // process this._callbacks, then set to null so the chatbox creator
+        // knows to make new callbacks immediately.
+        if (this._callbacks) {
+          for (let callback of this._callbacks) {
+            callback(this);
+          }
+          this._callbacks = null;
+        }
+
+        mm.addMessageListener("Social:DOMTitleChanged", this);
+
+        mm.sendAsyncMessage("WaitForDOMContentLoaded");
+        mm.addMessageListener("DOMContentLoaded", function DOMContentLoaded(event) {
+          mm.removeMessageListener("DOMContentLoaded", DOMContentLoaded);
+          this.isActive = !this.minimized;
+          this._chat.loadButtonSet(this, this.getAttribute("buttonSet"));
+          this._deferredChatLoaded.resolve(this);
+        }.bind(this));
+
+        this.setActiveBrowser();
+      ]]></constructor>
+
+      <field name="_deferredChatLoaded" readonly="true">
+        Promise.defer();
+      </field>
+
+      <property name="promiseChatLoaded">
+        <getter>
+          return this._deferredChatLoaded.promise;
+        </getter>
+      </property>
+
+      <property name="content">
+        <getter>
+          return document.getAnonymousElementByAttribute(this, "anonid",
+            (this.remote ? "remote-" : "") + "content");
+        </getter>
+      </property>
+
+      <field name="_chat" readonly="true">
+        Cu.import("resource:///modules/Chat.jsm", {}).Chat;
+      </field>
+
+      <property name="minimized">
+        <getter>
+          return this.getAttribute("minimized") == "true";
+        </getter>
+        <setter><![CDATA[
+          // Note that this.isActive is set via our transitionend handler so
+          // the content doesn't see intermediate values.
+          let parent = this.chatbar;
+          if (val) {
+            this.setAttribute("minimized", "true");
+            // If this chat is the selected one a new one needs to be selected.
+            if (parent && parent.selectedChat == this)
+              parent._selectAnotherChat();
+          } else {
+            this.removeAttribute("minimized");
+            // this chat gets selected.
+            if (parent)
+              parent.selectedChat = this;
+          }
+        ]]></setter>
+      </property>
+
+      <property name="chatbar">
+        <getter>
+          if (this.parentNode.nodeName == "chatbar")
+            return this.parentNode;
+          return null;
+        </getter>
+      </property>
+
+      <property name="isActive">
+        <getter>
+          return this.content.docShellIsActive;
+        </getter>
+        <setter>
+          this.content.docShellIsActive = !!val;
+
+          // Bug 1256431 to remove socialFrameShow/Hide from hello, keep this
+          // until that is complete.
+          // let the chat frame know if it is being shown or hidden
+          this.content.messageManager.sendAsyncMessage("Social:CustomEvent", {
+            name: val ? "socialFrameShow" : "socialFrameHide"
+          });
+        </setter>
+      </property>
+
+      <field name="_remote">false</field>
+      <property name="remote" onget="return this._remote;">
+        <setter><![CDATA[
+          this._remote = !!val;
+
+          this.setActiveBrowser();
+        ]]></setter>
+      </property>
+
+      <method name="setActiveBrowser">
+        <body><![CDATA[
+          // Make sure we only show one browser element at a time.
+          let content = document.getAnonymousElementByAttribute(this, "anonid", "content");
+          let remoteContent = document.getAnonymousElementByAttribute(this, "anonid", "remote-content");
+          remoteContent.setAttribute("hidden", !this.remote);
+          content.setAttribute("hidden", this.remote);
+          remoteContent.removeAttribute("src");
+          content.removeAttribute("src");
+
+          if (this.src) {
+            this.setAttribute("src", this.src);
+
+            // Stop loading of the document - that is set before this method was
+            // called - in the now hidden browser.
+            (this.remote ? content : remoteContent).setAttribute("src", "about:blank");
+          }
+        ]]></body>
+      </method>
+
+      <method name="showNotifications">
+        <parameter name="aAnchor"/>
+        <body><![CDATA[
+        PopupNotifications._reshowNotifications(aAnchor,
+                                                this.content);
+        ]]></body>
+      </method>
+
+      <method name="swapDocShells">
+        <parameter name="aTarget"/>
+        <body><![CDATA[
+          aTarget.setAttribute("label", this.content.contentTitle);
+
+          aTarget.remote = this.remote;
+          aTarget.src = this.src;
+          let content = aTarget.content;
+          content.setAttribute("origin", this.content.getAttribute("origin"));
+          content.popupnotificationanchor.className = this.content.popupnotificationanchor.className;
+          content.swapDocShells(this.content);
+
+          // When a chat window is attached or detached, the docShell hosting
+          // the chat document is swapped to the newly created chat window.
+          // (Be it inside a popup or back inside a chatbox element attached to
+          // the chatbar.)
+          // Since a swapDocShells call does not swap the messageManager instances
+          // attached to a browser, we'll need to add the message listeners to
+          // the new messageManager. This is not a bug in swapDocShells, merely
+          // a design decision.
+          content.messageManager.addMessageListener("Social:DOMTitleChanged", content);
+        ]]></body>
+      </method>
+
+      <method name="setDecorationAttributes">
+        <parameter name="aTarget"/>
+        <body><![CDATA[
+          if (this.hasAttribute("customSize"))
+            aTarget.setAttribute("customSize", this.getAttribute("customSize"));
+          this._chat.loadButtonSet(aTarget, this.getAttribute("buttonSet"));
+        ]]></body>
+      </method>
+
+      <method name="onTitlebarClick">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+          if (!this.chatbar)
+            return;
+          if (aEvent.button == 0) { // left-click: toggle minimized.
+            this.toggle();
+            // if we restored it, we want to focus it.
+            if (!this.minimized)
+              this.chatbar.focus();
+          } else if (aEvent.button == 1) // middle-click: close chat
+            this.close();
+        ]]></body>
+      </method>
+
+      <method name="close">
+        <body><![CDATA[
+        if (this.chatbar)
+          this.chatbar.remove(this);
+        else
+          window.close();
+
+        if (!this.swappingWindows)
+          this.dispatchEvent(new CustomEvent("ChatboxClosed"));
+        ]]></body>
+      </method>
+
+      <method name="swapWindows">
+        <body><![CDATA[
+        let deferred = Promise.defer();
+        let title = this.getAttribute("label");
+        if (this.chatbar) {
+          this.chatbar.detachChatbox(this, { "centerscreen": "yes" }).then(
+            chatbox => {
+              chatbox.content.messageManager.sendAsyncMessage("Social:SetDocumentTitle", {
+                title: title
+              });
+              deferred.resolve(chatbox);
+            }
+          );
+        } else {
+          // attach this chatbox to the topmost browser window
+          let Chat = Cu.import("resource:///modules/Chat.jsm").Chat;
+          let win = Chat.findChromeWindowForChats();
+          let chatbar = win.document.getElementById("pinnedchats");
+          let origin = this.content.getAttribute("origin");
+          let cb = chatbar.openChat({
+            origin: origin,
+            title: title,
+            url: "about:blank"
+          });
+
+          cb.promiseChatLoaded.then(
+            () => {
+              this.setDecorationAttributes(cb);
+
+              this.swapDocShells(cb);
+
+              chatbar.focus();
+              this.swappingWindows = true;
+              this.close();
+
+              // chatboxForURL is a map of URL -> chatbox used to avoid opening
+              // duplicate chat windows. Ensure reattached chat windows aren't
+              // registered with about:blank as their URL, otherwise reattaching
+              // more than one chat window isn't possible.
+              chatbar.chatboxForURL.delete("about:blank");
+              chatbar.chatboxForURL.set(this.src, Cu.getWeakReference(cb));
+
+              cb.content.messageManager.sendAsyncMessage("Social:CustomEvent", {
+                name: "socialFrameAttached"
+              });
+
+              deferred.resolve(cb);
+            }
+          );
+        }
+        return deferred.promise;
+        ]]></body>
+      </method>
+
+      <method name="toggle">
+        <body><![CDATA[
+          this.minimized = !this.minimized;
+        ]]></body>
+      </method>
+
+      <method name="setTitle">
+        <body><![CDATA[
+          try {
+            this.setAttribute("label", this.content.contentTitle);
+          } catch (ex) {}
+          if (this.chatbar)
+            this.chatbar.updateTitlebar(this);
+        ]]></body>
+      </method>
+
+      <method name="receiveMessage">
+        <parameter name="aMessage" />
+        <body><![CDATA[
+          switch (aMessage.name) {
+            case "Social:DOMTitleChanged":
+              this.setTitle();
+              break;
+          }
+        ]]></body>
+      </method>
+    </implementation>
+
+    <handlers>
+      <handler event="focus" phase="capturing">
+        if (this.chatbar)
+          this.chatbar.selectedChat = this;
+      </handler>
+      <handler event="DOMTitleChanged">
+        this.setTitle();
+      </handler>
+      <handler event="DOMLinkAdded"><![CDATA[
+        // Much of this logic is from DOMLinkHandler in browser.js.
+        // This sets the presence icon for a chat user, we simply use favicon
+        // style updating.
+        let link = event.originalTarget;
+        let rel = link.rel && link.rel.toLowerCase();
+        if (!link || !link.ownerDocument || !rel || !link.href)
+          return;
+        if (link.rel.indexOf("icon") < 0)
+          return;
+
+        let ContentLinkHandler = Cu.import("resource:///modules/ContentLinkHandler.jsm", {})
+          .ContentLinkHandler;
+        let uri = ContentLinkHandler.getLinkIconURI(link);
+        if (!uri)
+          return;
+
+        // We made it this far, use it.
+        this.setAttribute("image", uri.spec);
+        if (this.chatbar)
+          this.chatbar.updateTitlebar(this);
+      ]]></handler>
+      <handler event="transitionend">
+        if (this.isActive == this.minimized)
+          this.isActive = !this.minimized;
+      </handler>
+    </handlers>
+  </binding>
+
+  <binding id="chatbar">
+    <content>
+      <xul:hbox align="end" pack="end" anonid="innerbox" class="chatbar-innerbox" mousethrough="always" flex="1">
+        <xul:spacer flex="1" anonid="spacer" class="chatbar-overflow-spacer"/>
+        <xul:toolbarbutton anonid="nub" class="chatbar-button" type="menu" collapsed="true" mousethrough="never">
+          <xul:menupopup anonid="nubMenu" oncommand="document.getBindingParent(this).showChat(event.target.chat)"/>
+        </xul:toolbarbutton>
+        <children/>
+      </xul:hbox>
+    </content>
+
+    <implementation implements="nsIDOMEventListener">
+      <constructor>
+        // to avoid reflows we cache the width of the nub.
+        this.cachedWidthNub = 0;
+        this._selectedChat = null;
+      </constructor>
+
+      <field name="innerbox" readonly="true">
+        document.getAnonymousElementByAttribute(this, "anonid", "innerbox");
+      </field>
+
+      <field name="menupopup" readonly="true">
+        document.getAnonymousElementByAttribute(this, "anonid", "nubMenu");
+      </field>
+
+      <field name="nub" readonly="true">
+        document.getAnonymousElementByAttribute(this, "anonid", "nub");
+      </field>
+
+      <method name="focus">
+        <body><![CDATA[
+          if (!this.selectedChat)
+            return;
+          this.selectedChat.content.messageManager.sendAsyncMessage("Social:EnsureFocus");
+        ]]></body>
+      </method>
+
+      <method name="_isChatFocused">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          // If there are no XBL bindings for the chat it can't be focused.
+          if (!aChatbox.content)
+            return false;
+          let fw = Services.focus.focusedWindow;
+          if (!fw)
+            return false;
+          // We want to see if the focused window is in the subtree below our browser...
+          let containingBrowser = fw.QueryInterface(Ci.nsIInterfaceRequestor)
+                                    .getInterface(Ci.nsIWebNavigation)
+                                    .QueryInterface(Ci.nsIDocShell)
+                                    .chromeEventHandler;
+          return containingBrowser == aChatbox.content;
+        ]]></body>
+      </method>
+
+      <property name="selectedChat">
+        <getter><![CDATA[
+          return this._selectedChat;
+        ]]></getter>
+        <setter><![CDATA[
+          // this is pretty horrible, but we:
+          // * want to avoid doing touching 'selected' attribute when the
+          //   specified chat is already selected.
+          // * remove 'activity' attribute on newly selected tab *even if*
+          //   newly selected is already selected.
+          // * need to handle either current or new being null.
+          if (this._selectedChat != val) {
+            if (this._selectedChat) {
+              this._selectedChat.removeAttribute("selected");
+            }
+            this._selectedChat = val;
+            if (val) {
+              this._selectedChat.setAttribute("selected", "true");
+            }
+          }
+          if (val) {
+            this._selectedChat.removeAttribute("activity");
+          }
+        ]]></setter>
+      </property>
+
+      <field name="menuitemMap">new WeakMap()</field>
+      <field name="chatboxForURL">new Map();</field>
+
+      <property name="hasCollapsedChildren">
+        <getter><![CDATA[
+          return !!this.querySelector("[collapsed]");
+        ]]></getter>
+      </property>
+
+      <property name="collapsedChildren">
+        <getter><![CDATA[
+          // A generator yielding all collapsed chatboxes, in the order in
+          // which they should be restored.
+          return function*() {
+            let child = this.lastElementChild;
+            while (child) {
+              if (child.collapsed)
+                yield child;
+              child = child.previousElementSibling;
+            }
+          }
+        ]]></getter>
+      </property>
+
+      <property name="visibleChildren">
+        <getter><![CDATA[
+          // A generator yielding all non-collapsed chatboxes.
+          return function*() {
+            let child = this.firstElementChild;
+            while (child) {
+              if (!child.collapsed)
+                yield child;
+              child = child.nextElementSibling;
+            }
+          }
+        ]]></getter>
+      </property>
+
+      <property name="collapsibleChildren">
+        <getter><![CDATA[
+          // A generator yielding all children which are able to be collapsed
+          // in the order in which they should be collapsed.
+          // (currently this is all visible ones other than the selected one.)
+          return function*() {
+            for (let child of this.visibleChildren())
+              if (child != this.selectedChat)
+                yield child;
+          }
+        ]]></getter>
+      </property>
+
+      <method name="_selectAnotherChat">
+        <body><![CDATA[
+          // Select a different chat (as the currently selected one is no
+          // longer suitable as the selection - maybe it is being minimized or
+          // closed.)  We only select non-minimized and non-collapsed chats,
+          // and if none are found, set the selectedChat to null.
+          // It's possible in the future we will track most-recently-selected
+          // chats or similar to find the "best" candidate - for now though
+          // the choice is somewhat arbitrary.
+          let moveFocus = this.selectedChat && this._isChatFocused(this.selectedChat);
+          for (let other of this.children) {
+            if (other != this.selectedChat && !other.minimized && !other.collapsed) {
+              this.selectedChat = other;
+              if (moveFocus)
+                this.focus();
+              return;
+            }
+          }
+          // can't find another - so set no chat as selected.
+          this.selectedChat = null;
+        ]]></body>
+      </method>
+
+      <method name="updateTitlebar">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          if (aChatbox.collapsed) {
+            let menuitem = this.menuitemMap.get(aChatbox);
+            if (aChatbox.getAttribute("activity")) {
+              menuitem.setAttribute("activity", true);
+              this.nub.setAttribute("activity", true);
+            }
+            menuitem.setAttribute("label", aChatbox.getAttribute("label"));
+            menuitem.setAttribute("image", aChatbox.getAttribute("image"));
+          }
+        ]]></body>
+      </method>
+
+      <method name="calcTotalWidthOf">
+        <parameter name="aElement"/>
+        <body><![CDATA[
+          let cs = document.defaultView.getComputedStyle(aElement);
+          let margins = parseInt(cs.marginLeft) + parseInt(cs.marginRight);
+          return aElement.getBoundingClientRect().width + margins;
+        ]]></body>
+      </method>
+
+      <method name="getTotalChildWidth">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          // These are from the CSS for the chatbox and must be kept in sync.
+          // We can't use calcTotalWidthOf due to the transitions...
+          const CHAT_WIDTH_OPEN = 300;
+          const CHAT_WIDTH_OPEN_ALT = 350;
+          const CHAT_WIDTH_MINIMIZED = 160;
+          let openWidth = aChatbox.hasAttribute("customSize") ?
+            CHAT_WIDTH_OPEN_ALT : CHAT_WIDTH_OPEN;
+
+          return aChatbox.minimized ? CHAT_WIDTH_MINIMIZED : openWidth;
+        ]]></body>
+      </method>
+
+      <method name="collapseChat">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          // we ensure that the cached width for a child of this type is
+          // up-to-date so we can use it when resizing.
+          this.getTotalChildWidth(aChatbox);
+          aChatbox.collapsed = true;
+          aChatbox.isActive = false;
+          let menu = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+          menu.setAttribute("class", "menuitem-iconic");
+          menu.setAttribute("label", aChatbox.content.contentTitle);
+          menu.setAttribute("image", aChatbox.getAttribute("image"));
+          menu.chat = aChatbox;
+          this.menuitemMap.set(aChatbox, menu);
+          this.menupopup.appendChild(menu);
+          this.nub.collapsed = false;
+        ]]></body>
+      </method>
+
+      <method name="showChat">
+        <parameter name="aChatbox"/>
+        <parameter name="aMode"/>
+        <body><![CDATA[
+          if ((aMode != "minimized") && aChatbox.minimized)
+            aChatbox.minimized = false;
+          if (this.selectedChat != aChatbox)
+            this.selectedChat = aChatbox;
+          if (!aChatbox.collapsed)
+            return; // already showing - no more to do.
+          this._showChat(aChatbox);
+          // showing a collapsed chat might mean another needs to be collapsed
+          // to make room...
+          this.resize();
+        ]]></body>
+      </method>
+
+      <method name="_showChat">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          // the actual implementation - doesn't check for overflow, assumes
+          // collapsed, etc.
+          let menuitem = this.menuitemMap.get(aChatbox);
+          this.menuitemMap.delete(aChatbox);
+          this.menupopup.removeChild(menuitem);
+          aChatbox.collapsed = false;
+          aChatbox.isActive = !aChatbox.minimized;
+        ]]></body>
+      </method>
+
+      <method name="remove">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          this._remove(aChatbox);
+          // The removal of a chat may mean a collapsed one can spring up,
+          // or that the popup should be hidden.  We also defer the selection
+          // of another chat until after a resize, as a new candidate may
+          // become uncollapsed after the resize.
+          this.resize();
+          if (this.selectedChat == aChatbox) {
+            this._selectAnotherChat();
+          }
+        ]]></body>
+      </method>
+
+      <method name="_remove">
+        <parameter name="aChatbox"/>
+        <body><![CDATA[
+          this.removeChild(aChatbox);
+          // child might have been collapsed.
+          let menuitem = this.menuitemMap.get(aChatbox);
+          if (menuitem) {
+            this.menuitemMap.delete(aChatbox);
+            this.menupopup.removeChild(menuitem);
+          }
+          this.chatboxForURL.delete(aChatbox.src);
+        ]]></body>
+      </method>
+
+      <method name="openChat">
+        <parameter name="aOptions"/>
+        <parameter name="aCallback"/>
+        <body><![CDATA[
+          let {origin, title, url, mode} = aOptions;
+          let cb = this.chatboxForURL.get(url);
+          if (cb && (cb = cb.get())) {
+            // A chatbox is still alive to us when it's parented and still has
+            // content.
+            if (cb.parentNode) {
+              this.showChat(cb, mode);
+              if (aCallback) {
+                if (cb._callbacks == null) {
+                  // Chatbox has already been created, so callback now.
+                  aCallback(cb);
+                } else {
+                  // Chatbox is yet to have bindings created...
+                  cb._callbacks.push(aCallback);
+                }
+              }
+              return cb;
+            }
+            this.chatboxForURL.delete(url);
+          }
+          cb = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "chatbox");
+          cb._callbacks = [];
+          if (aCallback) {
+            // _callbacks is a javascript property instead of a <field> as it
+            // must exist before the (possibly delayed) bindings are created.
+            cb._callbacks.push(aCallback);
+          }
+
+          cb.remote = !!aOptions.remote;
+          // src also a javascript property; the src attribute is set in the ctor.
+          cb.src = url;
+          if (mode == "minimized")
+            cb.setAttribute("minimized", "true");
+          cb.setAttribute("origin", origin);
+          cb.setAttribute("label", title);
+          this.insertBefore(cb, this.firstChild);
+          this.selectedChat = cb;
+          this.chatboxForURL.set(url, Cu.getWeakReference(cb));
+          this.resize();
+          return cb;
+        ]]></body>
+      </method>
+
+      <method name="resize">
+        <body><![CDATA[
+        // Checks the current size against the collapsed state of children
+        // and collapses or expands as necessary such that as many as possible
+        // are shown.
+        // So 2 basic strategies:
+        // * Collapse/Expand one at a time until we can't collapse/expand any
+        //   more - but this is one reflow per change.
+        // * Calculate the dimensions ourself and choose how many to collapse
+        //   or expand based on this, then do them all in one go.  This is one
+        //   reflow regardless of how many we change.
+        // So we go the more complicated but more efficient second option...
+        let availWidth = this.getBoundingClientRect().width;
+        let currentWidth = 0;
+        if (!this.nub.collapsed) { // the nub is visible.
+          if (!this.cachedWidthNub)
+            this.cachedWidthNub = this.calcTotalWidthOf(this.nub);
+          currentWidth += this.cachedWidthNub;
+        }
+        for (let child of this.visibleChildren()) {
+          currentWidth += this.getTotalChildWidth(child);
+        }
+
+        if (currentWidth > availWidth) {
+          // we need to collapse some.
+          let toCollapse = [];
+          for (let child of this.collapsibleChildren()) {
+            if (currentWidth <= availWidth)
+              break;
+            toCollapse.push(child);
+            currentWidth -= this.getTotalChildWidth(child);
+          }
+          if (toCollapse.length) {
+            for (let child of toCollapse)
+              this.collapseChat(child);
+          }
+        } else if (currentWidth < availWidth) {
+          // we *might* be able to expand some - see how many.
+          // XXX - if this was clever, it could know when removing the nub
+          // leaves enough space to show all collapsed
+          let toShow = [];
+          for (let child of this.collapsedChildren()) {
+            currentWidth += this.getTotalChildWidth(child);
+            if (currentWidth > availWidth)
+              break;
+            toShow.push(child);
+          }
+          for (let child of toShow)
+            this._showChat(child);
+
+          // If none remain collapsed remove the nub.
+          if (!this.hasCollapsedChildren) {
+            this.nub.collapsed = true;
+          }
+        }
+        // else: achievement unlocked - we are pixel-perfect!
+        ]]></body>
+      </method>
+
+      <method name="handleEvent">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+          if (aEvent.type == "resize") {
+            this.resize();
+          }
+        ]]></body>
+      </method>
+
+      <method name="_getDragTarget">
+        <parameter name="event"/>
+        <body><![CDATA[
+          return event.target.localName == "chatbox" ? event.target : null;
+        ]]></body>
+      </method>
+
+      <!-- Moves a chatbox to a new window. Returns a promise that is resolved
+           once the move to the other window is complete.
+      -->
+      <method name="detachChatbox">
+        <parameter name="aChatbox"/>
+        <parameter name="aOptions"/>
+        <body><![CDATA[
+          let deferred = Promise.defer();
+          let chatbar = this;
+          let options = "";
+          for (let name in aOptions)
+            options += "," + name + "=" + aOptions[name];
+
+          let otherWin = window.openDialog("chrome://browser/content/chatWindow.xul",
+                                           "_blank", "chrome,all,dialog=no" + options);
+
+          otherWin.addEventListener("load", function _chatLoad(event) {
+            if (event.target != otherWin.document)
+              return;
+
+            if (aChatbox.hasAttribute("customSize")) {
+              otherWin.document.getElementById("chat-window").
+                setAttribute("customSize", aChatbox.getAttribute("customSize"));
+            }
+
+            otherWin.removeEventListener("load", _chatLoad, true);
+            let otherChatbox = otherWin.document.getElementById("chatter");
+            aChatbox.setDecorationAttributes(otherChatbox);
+            aChatbox.swapDocShells(otherChatbox);
+
+            aChatbox.swappingWindows = true;
+            aChatbox.close();
+            let url = aChatbox.src;
+            chatbar.chatboxForURL.set(url, Cu.getWeakReference(otherChatbox));
+
+            // All processing is done, now we can fire the event.
+            otherChatbox.content.messageManager.sendAsyncMessage("Social:CustomEvent", {
+              name: "socialFrameDetached"
+            });
+
+            Services.obs.addObserver(function onDOMWindowClosed(subject) {
+              if (subject !== otherWin)
+                return;
+
+              Services.obs.removeObserver(onDOMWindowClosed, "domwindowclosed");
+              chatbar.chatboxForURL.delete(url);
+
+              if (!otherChatbox.swappingWindows)
+                otherChatbox.dispatchEvent(new CustomEvent("ChatboxClosed"));
+            }, "domwindowclosed", false);
+
+            deferred.resolve(otherChatbox);
+          }, true);
+          return deferred.promise;
+        ]]></body>
+      </method>
+
+    </implementation>
+
+    <handlers>
+      <handler event="popupshown"><![CDATA[
+        this.nub.removeAttribute("activity");
+      ]]></handler>
+      <handler event="load"><![CDATA[
+        window.addEventListener("resize", this, true);
+      ]]></handler>
+      <handler event="unload"><![CDATA[
+        window.removeEventListener("resize", this, true);
+      ]]></handler>
+
+      <handler event="dragstart"><![CDATA[
+        // chat window dragging is essentially duplicated from tabbrowser.xml
+        // to acheive the same visual experience
+        let chatbox = this._getDragTarget(event);
+        if (!chatbox) {
+          return;
+        }
+
+        let dt = event.dataTransfer;
+        // we do not set a url in the drag data to prevent moving to tabbrowser
+        // or otherwise having unexpected drop handlers do something with our
+        // chatbox
+        dt.mozSetDataAt("application/x-moz-chatbox", chatbox, 0);
+
+        // Set the cursor to an arrow during tab drags.
+        dt.mozCursor = "default";
+
+        // Create a canvas to which we capture the current tab.
+        // Until canvas is HiDPI-aware (bug 780362), we need to scale the desired
+        // canvas size (in CSS pixels) to the window's backing resolution in order
+        // to get a full-resolution drag image for use on HiDPI displays.
+        let windowUtils = window.getInterface(Ci.nsIDOMWindowUtils);
+        let scale = windowUtils.screenPixelsPerCSSPixel / windowUtils.fullZoom;
+        let canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+        canvas.mozOpaque = true;
+        canvas.width = 160 * scale;
+        canvas.height = 90 * scale;
+        PageThumbs.captureToCanvas(chatbox, canvas);
+        dt.setDragImage(canvas, -16 * scale, -16 * scale);
+
+        event.stopPropagation();
+      ]]></handler>
+
+      <handler event="dragend"><![CDATA[
+        let dt = event.dataTransfer;
+        let draggedChat = dt.mozGetDataAt("application/x-moz-chatbox", 0);
+        if (dt.mozUserCancelled || dt.dropEffect != "none") {
+          return;
+        }
+
+        let eX = event.screenX;
+        let eY = event.screenY;
+        // screen.availLeft et. al. only check the screen that this window is on,
+        // but we want to look at the screen the tab is being dropped onto.
+        let sX = {}, sY = {}, sWidth = {}, sHeight = {};
+        Cc["@mozilla.org/gfx/screenmanager;1"]
+          .getService(Ci.nsIScreenManager)
+          .screenForRect(eX, eY, 1, 1)
+          .GetAvailRect(sX, sY, sWidth, sHeight);
+        // default size for the chat window as used in chatWindow.xul, use them
+        // here to attempt to keep the window fully within the screen when
+        // opening at the drop point. If the user has resized the window to
+        // something larger (which gets persisted), at least a good portion of
+        // the window should still be within the screen.
+        let winWidth = 400;
+        let winHeight = 420;
+        // ensure new window entirely within screen
+        let left = Math.min(Math.max(eX, sX.value),
+                            sX.value + sWidth.value - winWidth);
+        let top = Math.min(Math.max(eY, sY.value),
+                           sY.value + sHeight.value - winHeight);
+
+        this.detachChatbox(draggedChat, { screenX: left, screenY: top });
+        event.stopPropagation();
+      ]]></handler>
+    </handlers>
+  </binding>
+
+</bindings>

new file mode 100644
--- /dev/null
+++ b/browser/base/content/socialmarks.xml
@@ -0,0 +1,366 @@
+<?xml version="1.0"?>
+
+<bindings id="socialMarkBindings"
+    xmlns="http://www.mozilla.org/xbl"
+    xmlns:xbl="http://www.mozilla.org/xbl"
+    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+  <binding id="toolbarbutton-marks" display="xul:button"
+           extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
+    <content>
+      <xul:panel anonid="panel" hidden="true" type="arrow" class="social-panel"/>
+      <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
+      <xul:label class="toolbarbutton-text" crop="right" flex="1"
+                 xbl:inherits="value=label,accesskey,crop,wrap"/>
+      <xul:label class="toolbarbutton-multiline-text" flex="1"
+                 xbl:inherits="xbl:text=label,accesskey,wrap"/>
+    </content>
+    <implementation implements="nsIDOMEventListener, nsIObserver">
+      <constructor>
+        // if we overflow, we have to reset the button. unfortunately we cannot
+        // use a widget listener because we need to do this *after* the node is
+        // moved, and the event happens before the node is moved.
+        this.update();
+      </constructor>
+      <property name="_anchor">
+        <getter>
+          let widgetGroup = CustomizableUI.getWidget(this.getAttribute("id"));
+          return widgetGroup.forWindow(window).anchor;
+        </getter>
+      </property>
+      <property name="_useDynamicResizer">
+        <getter>
+          let provider = Social._getProviderFromOrigin(this.getAttribute("origin"));
+          return !provider.getPageSize("marks");
+        </getter>
+      </property>
+
+      <property name="panel">
+        <getter>
+          return document.getAnonymousElementByAttribute(this, "anonid", "panel");
+        </getter>
+      </property>
+
+      <property name="content">
+        <getter><![CDATA[
+          if (this._frame)
+            return this._frame;
+          let provider = Social._getProviderFromOrigin(this.getAttribute("origin"));
+          let size = provider.getPageSize("marks");
+          let {width, height} = size ? size : {width: 330, height: 100};
+
+          let iframe = this._frame = document.createElement("iframe");
+          iframe.setAttribute("type", "content");
+          iframe.setAttribute("class", "social-panel-frame");
+          iframe.setAttribute("flex", "1");
+          iframe.setAttribute("message", "true");
+          iframe.setAttribute("messagemanagergroup", "social");
+          iframe.setAttribute("tooltip", "aHTMLTooltip");
+          iframe.setAttribute("context", "contentAreaContextMenu");
+          iframe.setAttribute("origin", provider.origin);
+          iframe.setAttribute("style", "width: " + width + "px; height: " + height + "px;");
+          this.panel.appendChild(iframe);
+
+          this._frame.addEventListener("DOMLinkAdded", this);
+          return this._frame;
+        ]]></getter>
+      </property>
+
+      <property name="messageManager">
+        <getter>
+          return this.content.QueryInterface(Components.interfaces.nsIFrameLoaderOwner).frameLoader.messageManager;
+        </getter>
+      </property>
+
+      <property name="contentWindow">
+        <getter>
+          return this.content.contentWindow;
+        </getter>
+      </property>
+
+      <property name="contentDocument">
+        <getter>
+          return this.content.contentDocument;
+        </getter>
+      </property>
+
+      <property name="provider">
+        <getter>
+          return Social._getProviderFromOrigin(this.getAttribute("origin"));
+        </getter>
+      </property>
+
+      <property name="isMarked">
+        <setter><![CDATA[
+          this._isMarked = val;
+          let provider = this.provider;
+          // we cannot size the image when we apply it via listStyleImage, so
+          // use the toolbar image
+          let widgetGroup = CustomizableUI.getWidget(this.getAttribute("id"));
+          val = val && !!widgetGroup.areaType;
+          let icon = val ? provider.markedIcon : provider.unmarkedIcon;
+          let iconURL = icon || provider.icon32URL || provider.iconURL;
+          this.setAttribute("image", iconURL);
+        ]]></setter>
+        <getter>
+          return this._isMarked;
+        </getter>
+      </property>
+
+      <method name="update">
+        <body><![CDATA[
+        // update the button for use with the current tab
+        let provider = this.provider;
+        if (this._dynamicResizer) {
+          this._dynamicResizer.stop();
+          this._dynamicResizer = null;
+        }
+        this.content.setAttribute("src", "about:blank");
+        // called during onhidden, make sure the docshell is updated
+        if (this._frame.docShell)
+          this._frame.docShell.createAboutBlankContentViewer(null);
+
+        // disabled attr is set by Social:PageShareOrMark command
+        if (this.hasAttribute("disabled")) {
+          this.isMarked = false;
+        } else {
+          Social.isURIMarked(provider.origin, gBrowser.currentURI, (isMarked) => {
+            this.isMarked = isMarked;
+          });
+        }
+
+        this.content.setAttribute("origin", provider.origin);
+
+        let panel = this.panel;
+        // if customization is currently happening, we may not have a panel
+        // that we can hide
+        if (panel.hidePopup) {
+          panel.hidePopup();
+        }
+        this.pageData = null;
+        ]]></body>
+      </method>
+
+      <method name="receiveMessage">
+        <parameter name="message"/>
+        <body><![CDATA[
+        if (message.name != "Social:ErrorPageNotify" || message.target != this.content)
+          return;
+        this.openPanel();
+        ]]></body>
+      </method>
+
+      <method name="loadPanel">
+        <parameter name="pageData"/>
+        <parameter name="target"/>
+        <body><![CDATA[
+        let provider = this.provider;
+        let panel = this.panel;
+        panel.hidden = false;
+
+        // reparent the iframe if we've been customized to a new location
+        if (this.content.parentNode != panel)
+          panel.appendChild(this.content);
+
+        let URLTemplate = provider.markURL;
+        let _dataFn;
+        if (!pageData) {
+          messageManager.addMessageListener("PageMetadata:PageDataResult", _dataFn = (msg) => {
+            messageManager.removeMessageListener("PageMetadata:PageDataResult", _dataFn);
+            this.loadPanel(msg.json, target);
+          });
+          gBrowser.selectedBrowser.messageManager.sendAsyncMessage("PageMetadata:GetPageData", null, { target });
+          return;
+        }
+        // if this is a share of a selected item, get any microformats
+        if (!pageData.microformats && target) {
+          messageManager.addMessageListener("PageMetadata:MicroformatsResult", _dataFn = (msg) => {
+            messageManager.removeMessageListener("PageMetadata:MicroformatsResult", _dataFn);
+            pageData.microformats = msg.data;
+            this.loadPanel(pageData, target);
+          });
+          gBrowser.selectedBrowser.messageManager.sendAsyncMessage("PageMetadata:GetMicroformats", null, { target });
+          return;
+        }
+        this.pageData = pageData;
+
+        let endpoint = OpenGraphBuilder.generateEndpointURL(URLTemplate, this.pageData);
+        // setup listeners
+        let DOMContentLoaded = (event) => {
+          this._loading = false;
+          this.messageManager.removeMessageListener("DOMContentLoaded", DOMContentLoaded);
+          // add our resizer after the dom is ready
+          if (this._useDynamicResizer) {
+            let DynamicResizeWatcher = Cu.import("resource:///modules/Social.jsm", {}).DynamicResizeWatcher;
+            this._dynamicResizer = new DynamicResizeWatcher();
+            this._dynamicResizer.start(this.panel, this.content);
+          } else if (this._dynamicResizer) {
+            this._dynamicResizer.stop();
+            this._dynamicResizer = null;
+          }
+
+          let contentWindow = this.contentWindow;
+          let markUpdate = function(event) {
+            // update the annotation based on this event, then update the
+            // icon as well
+            this.isMarked = JSON.parse(event.detail).marked;
+            if (this.isMarked) {
+              Social.markURI(provider.origin, gBrowser.currentURI);
+            } else {
+              Social.unmarkURI(provider.origin, gBrowser.currentURI, () => {
+                this.update();
+              });
+            }
+          }.bind(this);
+          let unload = () => {
+            contentWindow.removeEventListener("unload", unload);
+            contentWindow.removeEventListener("socialMarkUpdate", markUpdate);
+          }
+          contentWindow.addEventListener("socialMarkUpdate", markUpdate);
+          contentWindow.addEventListener("unload", unload);
+
+          // send the opengraph data
+          this.messageManager.sendAsyncMessage("Social:OpenGraphData", pageData);
+        }
+        this.messageManager.addMessageListener("DOMContentLoaded", DOMContentLoaded);
+        this._loading = true;
+        this.content.setAttribute("src", endpoint);
+        ]]></body>
+      </method>
+
+      <method name="openPanel">
+        <parameter name="aResetOnClose"/>
+        <body><![CDATA[
+        let panel = this.panel;
+        let anchor = document.getAnonymousElementByAttribute(this._anchor, "class", "toolbarbutton-icon");
+        // Bug 849216 - open the popup in a setTimeout so we avoid the auto-rollup
+        // handling from preventing it being opened in some cases.
+        setTimeout(() => {
+          panel.openPopup(anchor, "bottomcenter topright", 0, 0, false, false);
+        }, 0);
+        Services.telemetry.getHistogramById("SOCIAL_TOOLBAR_BUTTONS").add(2);
+        ]]></body>
+       </method>
+
+      <method name="markCurrentPage">
+        <parameter name="aOpenPanel"/>
+        <body><![CDATA[
+        // we always set the src on click if it has not been set for this tab,
+        // but we only want to open the panel if it was previously annotated.
+        let openPanel = this.isMarked || aOpenPanel;
+        let src = this.content.getAttribute("src");
+        if (!src || src == "about:blank") {
+          this.loadPanel();
+        }
+        if (openPanel)
+          this.openPanel();
+        ]]></body>
+      </method>
+
+      <method name="markLink">
+        <parameter name="aUrl"/>
+        <parameter name="aTarget"/>
+        <body><![CDATA[
+        if (!aUrl) {
+          this.markCurrentPage(true);
+          return;
+        }
+        // initiated form an external source, such as gContextMenu, where
+        // pageData is passed into us. In this case, we always load the iframe
+        // and show it since the url may not be the browser tab, but an image,
+        // link, etc. inside the page. We also "update" the iframe to the
+        // previous url when it is closed.
+        this.content.setAttribute("src", "about:blank");
+        this.loadPanel({ url: aUrl }, aTarget);
+        this.openPanel(true);
+        ]]></body>
+      </method>
+
+      <method name="dispatchPanelEvent">
+        <parameter name="name"/>
+        <body><![CDATA[
+        let evt = this.contentDocument.createEvent("CustomEvent");
+        evt.initCustomEvent(name, true, true, {});
+        this.contentDocument.documentElement.dispatchEvent(evt);
+        ]]></body>
+      </method>
+
+      <method name="onShown">
+        <body><![CDATA[
+        // because the panel may be preloaded, we need to size the panel when
+        // showing as well as after load
+        if (!this._useDynamicResizer) {
+          return;
+        }
+        let sizeSocialPanelToContent = Cu.import("resource:///modules/Social.jsm", {}).sizeSocialPanelToContent;
+        if (!this._loading && this.contentDocument &&
+            this.contentDocument.readyState == "complete") {
+          sizeSocialPanelToContent(this.panel, this.content);
+        } else {
+          let panelBrowserOnload = (message) => {
+            if (message.target != this.content)
+              return;
+            this.messageManager.removeMessageListener("PageVisibility:Show", panelBrowserOnload, true);
+            sizeSocialPanelToContent(this.panel, this.content);
+          };
+          this.messageManager.addMessageListener("PageVisibility:Show", panelBrowserOnload);
+        }
+        ]]></body>
+      </method>
+
+      <method name="handleEvent">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+        if (aEvent.eventPhase != aEvent.BUBBLING_PHASE)
+          return;
+        switch(aEvent.type) {
+          case "DOMLinkAdded": {
+            // much of this logic is from DOMLinkHandler in browser.js, this sets
+            // the presence icon for a chat user, we simply use favicon style
+            // updating
+            let link = aEvent.originalTarget;
+            let rel = link.rel && link.rel.toLowerCase();
+            if (!link || !link.ownerDocument || !rel || !link.href)
+              return;
+            if (link.rel.indexOf("icon") < 0)
+              return;
+
+            let ContentLinkHandler = Cu.import("resource:///modules/ContentLinkHandler.jsm", {}).ContentLinkHandler;
+            let uri = ContentLinkHandler.getLinkIconURI(link);
+            if (!uri)
+              return;
+
+            // we cannot size the image when we apply it via listStyleImage, so
+            // use the toolbar image
+            this.setAttribute("image", uri.spec);
+            }
+            break;
+          case "click":
+            Services.telemetry.getHistogramById("SOCIAL_PANEL_CLICKS").add(2);
+            break;
+        }
+        ]]></body>
+      </method>
+
+    </implementation>
+    <handlers>
+      <handler event="popupshowing"><![CDATA[
+        this._anchor.setAttribute("open", "true");
+        this.content.addEventListener("click", this);
+      ]]></handler>
+      <handler event="popupshown"><![CDATA[
+        this.onShown();
+      ]]></handler>
+      <handler event="popuphidden"><![CDATA[
+        this._anchor.removeAttribute("open");
+        this.update();
+        this.content.removeEventListener("click", this);
+      ]]></handler>
+      <handler event="command"><![CDATA[
+        this.markCurrentPage();
+      ]]></handler>
+    </handlers>
+  </binding>
+
+</bindings>

new file mode 100644
--- /dev/null
+++ b/browser/base/content/test/chat/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../../../../testing/mochitest/browser.eslintrc"
+  ]
+}

new file mode 100644
--- /dev/null
+++ b/browser/base/content/test/chat/browser.ini
@@ -0,0 +1,9 @@
+[DEFAULT]
+skip-if = buildapp == 'mulet'
+support-files =
+  head.js
+  chat.html
+
+[browser_chatwindow.js]
+[browser_focus.js]
+[browser_tearoff.js]

new file mode 100644
--- /dev/null
+++ b/browser/base/content/test/chat/browser_chatwindow.js
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+requestLongerTimeout(2);
+
+var chatbar = document.getElementById("pinnedchats");
+
+add_chat_task(function* testOpenCloseChat() {
+  let chatbox = yield promiseOpenChat("http://example.com");
+  Assert.strictEqual(chatbox, chatbar.selectedChat);
+  // we requested a "normal" chat, so shouldn't be minimized
+  Assert.ok(!chatbox.minimized, "chat is not minimized");
+  Assert.equal(chatbar.childNodes.length, 1, "should be 1 chat open");
+
+
+  // now request the same URL again - we should get the same chat.
+  let chatbox2 = yield promiseOpenChat("http://example.com");
+  Assert.strictEqual(chatbox2, chatbox, "got the same chat");
+  Assert.equal(numChatsInWindow(window), 1, "should be 1 chat open");
+
+  chatbox.toggle();
+  is(chatbox.minimized, true, "chat is now minimized");
+  // was no other chat to select, so selected becomes null.
+  is(chatbar.selectedChat, null);
+
+  // We check the content gets an unload event as we close it.
+  chatbox.close();
+});
+
+// In this case we open a chat minimized, then request the same chat again
+// without specifying minimized.  On that second call the chat should open,
+// selected, and no longer minimized.
+add_chat_task(function* testMinimized() {
+  let chatbox = yield promiseOpenChat("http://example.com", "minimized");
+  Assert.strictEqual(chatbox, chatbar.selectedChat);
+  Assert.ok(chatbox.minimized, "chat is minimized");
+  Assert.equal(numChatsInWindow(window), 1, "should be 1 chat open");
+  yield promiseOpenChat("http://example.com");
+  Assert.ok(!chatbox.minimized, false, "chat is no longer minimized");
+});
+
+// open enough chats to overflow the window, then check
+// if the menupopup is visible
+add_chat_task(function* testManyChats() {
+  Assert.ok(chatbar.menupopup.parentNode.collapsed, "popup nub collapsed at start");
+  // we should *never* find a test box that needs more than this to cause
+  // an overflow!
+  let maxToOpen = 20;
+  let numOpened = 0;
+  for (let i = 0; i < maxToOpen; i++) {
+    yield promiseOpenChat("http://example.com#" + i);
+    if (!chatbar.menupopup.parentNode.collapsed) {
+      info("the menu popup appeared");
+      return;
+    }
+  }
+  Assert.ok(false, "We didn't find a collapsed chat after " + maxToOpen + "chats!");
+});
+
+// Check that closeAll works as expected.
+add_chat_task(function* testOpenTwiceCallbacks() {
+  yield promiseOpenChat("http://example.com#1");
+  yield promiseOpenChat("http://example.com#2");
+  yield promiseOpenChat("http://test2.example.com");
+  Assert.equal(numChatsInWindow(window), 3, "should be 3 chats open");
+  Chat.closeAll("http://example.com");
+  Assert.equal(numChatsInWindow(window), 1, "should have closed 2 chats");
+  Chat.closeAll("http://test2.example.com");
+  Assert.equal(numChatsInWindow(window), 0, "should have closed last chat");
+});
+
+// Check that when we open the same chat twice, the callbacks are called back
+// twice.
+add_chat_task(function* testOpenTwiceCallbacks() {
+  yield promiseOpenChatCallback("http://example.com");
+  yield promiseOpenChatCallback("http://example.com");
+});
+
+// Bug 817782 - check chats work in new top-level windows.
+add_chat_task(function* testSecondTopLevelWindow() {
+  const chatUrl = "http://example.com";
+  let winPromise = BrowserTestUtils.waitForNewWindow();
+  OpenBrowserWindow();
+  let secondWindow = yield winPromise;
+  yield promiseOpenChat(chatUrl);
+  // the chat was created - let's make sure it was created in the second window.
+  Assert.equal(numChatsInWindow(window), 0, "main window has no chats");
+  Assert.equal(numChatsInWindow(secondWindow), 1, "second window has 1 chat");
+  secondWindow.close();
+});
+
+// Test that findChromeWindowForChats() returns the expected window.
+add_chat_task(function* testChatWindowChooser() {
+  let chat = yield promiseOpenChat("http://example.com");
+  Assert.equal(numChatsInWindow(window), 1, "first window has the chat");
+  // create a second window - this will be the "most recent" and will
+  // therefore be the window that hosts the new chat (see bug 835111)
+  let secondWindow = OpenBrowserWindow();
+  yield promiseOneEvent(secondWindow, "load");
+  Assert.equal(secondWindow, Chat.findChromeWindowForChats(null), "Second window is the preferred chat window");
+
+  // focus the first window, and check it will be selected for future chats.
+  // Bug 1090633 - there are lots of issues around focus, especially when the
+  // browser itself doesn't have focus. We can end up with
+  // Services.wm.getMostRecentWindow("navigator:browser") returning a different
+  // window than, say, Services.focus.activeWindow. But the focus manager isn't
+  // the point of this test.
+  // So we simply keep focusing the first window until it is reported as the
+  // most recent.
+  do {
+    dump("trying to force window to become the most recent.\n");
+    secondWindow.focus();
+    window.focus();
+    yield promiseWaitForFocus();
+  } while (Services.wm.getMostRecentWindow("navigator:browser") != window)
+
+  Assert.equal(window, Chat.findChromeWindowForChats(null), "First window now the preferred chat window");
+
+  let privateWindow = OpenBrowserWindow({private: true});
+  yield promiseOneEvent(privateWindow, "load")
+
+  // The focused window can't accept chats (it's a private window), so the
+  // chat should open in the window that was selected before. This will be
+  // either window or secondWindow (linux may choose a different one) but the
+  // point is that the window is *not* the private one.
+  Assert.ok(Chat.findChromeWindowForChats(null) == window ||
+            Chat.findChromeWindowForChats(null) == secondWindow,
+            "Private window isn't selected for new chats.");
+  privateWindow.close();
+  secondWindow.close();
+});
+
+add_chat_task(function* testButtonSet() {
+  let chatbox = yield promiseOpenChat("http://example.com#1");
+  let document = chatbox.ownerDocument;
+
+  // Expect all default buttons to be visible.
+  for (let buttonId of kDefaultButtonSet) {
+    let button = document.getAnonymousElementByAttribute(chatbox, "anonid", buttonId);
+    Assert.ok(!button.hidden, "Button '" + buttonId + "' should be visible");
+  }
+
+  let visible = new Set(["minimize", "close"]);
+  chatbox = yield promiseOpenChat("http://example.com#2", null, null, [...visible].join(","));
+
+  for (let buttonId of kDefaultButtonSet) {
+    let button = document.getAnonymousElementByAttribute(chatbox, "anonid", buttonId);
+    if (visible.has(buttonId)) {
+      Assert.ok(!button.hidden, "Button '" + buttonId + "' should be visible");
+    } else {
+      Assert.ok(button.hidden, "Button '" + buttonId + "' should NOT be visible");
+    }
+  }
+});
+
+add_chat_task(function* testCustomButton() {
+  let commanded = 0;
+  let customButton = {
+    id: "custom",
+    onCommand: function() {
+      ++commanded;
+    }
+  };
+
+  Chat.registerButton(customButton);
+
+  let chatbox = yield promiseOpenChat("http://example.com#1");
+  let document = chatbox.ownerDocument;
+  let titlebarNode = document.getAnonymousElementByAttribute(chatbox, "class",
+    "chat-titlebar");
+
+  Assert.equal(titlebarNode.getElementsByClassName("chat-custom")[0], null,
+    "Custom chat button should not be in the toolbar yet.");
+
+  let visible = new Set(["minimize", "close", "custom"]);
+  Chat.loadButtonSet(chatbox, [...visible].join(","));
+
+  for (let buttonId of kDefaultButtonSet) {
+    let button = document.getAnonymousElementByAttribute(chatbox, "anonid", buttonId);
+    if (visible.has(buttonId)) {
+      Assert.ok(!button.hidden, "Button '" + buttonId + "' should be visible");
+    } else {
+      Assert.ok(button.hidden, "Button '" + buttonId + "' should NOT be visible");
+    }
+  }
+
+  let customButtonNode = titlebarNode.getElementsByClassName("chat-custom")[0];
+  Assert.ok(!customButtonNode.hidden, "Custom button should be visible");
+
+  let ev = document.createEvent("XULCommandEvent");
+  ev.initCommandEvent("command", true, true, document.defaultView, 0, false,
+    false, false, false, null);
+  customButtonNode.dispatchEvent(ev);
+
+  Assert.equal(commanded, 1, "Button should have been commanded once");
+});

new file mode 100644
--- /dev/null
+++ b/browser/base/content/test/chat/browser_focus.js
@@ -0,0 +1,262 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Tests the focus functionality.
+
+Cu.import("resource://testing-common/ContentTask.jsm", this);
+const CHAT_URL = "https://example.com/browser/browser/base/content/test/chat/chat.html";
+
+requestLongerTimeout(2);
+
+// Is the currently opened tab focused?
+function isTabFocused() {
+  let tabb = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+  // focus sucks in tests - our window may have lost focus.
+  let elt = Services.focus.getFocusedElementForWindow(window, false, {});
+  return elt == tabb;
+}
+
+// Is the specified chat focused?
+function isChatFocused(chat) {
+  // focus sucks in tests - our window may have lost focus.
+  let elt = Services.focus.getFocusedElementForWindow(window, false, {});
+  return elt == chat.content;
+}
+
+var chatbar = document.getElementById("pinnedchats");
+
+function* setUp() {
+  // Note that (probably) due to bug 604289, if a tab is focused but the
+  // focused element is null, our chat windows can "steal" focus.  This is
+  // avoided if we explicitly focus an element in the tab.
+  // So we load a page with an <input> field and focus that before testing.
+  let html = '<input id="theinput"><button id="chat-opener"></button>';
+  let url = "data:text/html;charset=utf-8," + encodeURI(html);
+  let tab = yield BrowserTestUtils.openNewForegroundTab(gBrowser, url);
+  let browser = tab.linkedBrowser;
+  yield ContentTask.spawn(browser, null, function* () {
+    content.document.getElementById("theinput").focus();
+  });
+
+  registerCleanupFunction(function() {
+    gBrowser.removeTab(tab);
+  });
+}
+
+// Test default focus - not user input.
+add_chat_task(function* testDefaultFocus() {
+  yield setUp();
+  let chat = yield promiseOpenChat("http://example.com");
+  // we used the default focus behaviour, which means that because this was
+  // not the direct result of user action the chat should not be focused.
+  Assert.equal(numChatsInWindow(window), 1, "should be 1 chat open");
+  Assert.ok(isTabFocused(), "the tab should remain focused.");
+  Assert.ok(!isChatFocused(chat), "the chat should not be focused.");
+});
+
+// Test default focus via user input.
+add_chat_task(function* testDefaultFocusUserInput() {
+  todo(false, "BrowserTestUtils.synthesizeMouseAtCenter doesn't move the user " +
+    "focus to the chat window, even though we're recording a click correctly.");
+  return;
+
+  yield setUp();
+  let browser = gBrowser.selectedTab.linkedBrowser;
+  let mm = browser.messageManager;
+
+  let promise = new Promise(resolve => {
+    mm.addMessageListener("ChatOpenerClicked", function handler() {
+      mm.removeMessageListener("ChatOpenerClicked", handler);
+      promiseOpenChat("http://example.com").then(resolve);
+    });
+  });
+
+  yield ContentTask.spawn(browser, null, function* () {
+    let button = content.document.getElementById("chat-opener");
+    button.addEventListener("click", function onclick() {
+      button.removeEventListener("click", onclick);
+      sendAsyncMessage("ChatOpenerClicked");
+    });
+  });
+  // Note we must use synthesizeMouseAtCenter() rather than calling
+  // .click() directly as this causes nsIDOMWindowUtils.isHandlingUserInput
+  // to be true.
+  yield BrowserTestUtils.synthesizeMouseAtCenter("#chat-opener", {}, browser);
+  let chat = yield promise;
+
+  // we use the default focus behaviour but the chat was opened via user input,
+  // so the chat should be focused.
+  Assert.equal(numChatsInWindow(window), 1, "should be 1 chat open");
+  yield promiseWaitForCondition(() => !isTabFocused());
+  Assert.ok(!isTabFocused(), "the tab should have lost focus.");
+  Assert.ok(isChatFocused(chat), "the chat should have got focus.");
+});
+
+// We explicitly ask for the chat to be focused.
+add_chat_task(function* testExplicitFocus() {
+  yield setUp();
+  let chat = yield promiseOpenChat("http://example.com", undefined, true);
+  // we use the default focus behaviour, which means that because this was
+  // not the direct result of user action the chat should not be focused.
+  Assert.equal(numChatsInWindow(window), 1, "should be 1 chat open");
+  yield promiseWaitForCondition(() => !isTabFocused());
+  Assert.ok(!isTabFocused(), "the tab should have lost focus.");
+  Assert.ok(isChatFocused(chat), "the chat should have got focus.");
+});
+
+// Open a minimized chat via default focus behaviour - it will open and not
+// have focus.  Then open the same chat without 'minimized' - it will be
+// restored but should still not have grabbed focus.
+add_chat_task(function* testNoFocusOnAutoRestore() {
+  yield setUp();
+  let chat = yield promiseOpenChat("http://example.com", "minimized");
+  Assert.ok(chat.minimized, "chat is minimized");
+  Assert.equal(numChatsInWindow(window), 1, "should be 1 chat open");
+  Assert.ok(isTabFocused(), "the tab should remain focused.");
+  Assert.ok(!isChatFocused(chat), "the chat should not be focused.");
+  yield promiseOpenChat("http://example.com");
+  Assert.ok(!chat.minimized, "chat should be restored");
+  Assert.ok(isTabFocused(), "the tab should remain focused.");
+  Assert.ok(!isChatFocused(chat), "the chat should not be focused.");
+});
+
+// Here we open a chat, which will not be focused.  Then we minimize it and
+// restore it via a titlebar clock - it should get focus at that point.
+add_chat_task(function* testFocusOnExplicitRestore() {
+  yield setUp();
+  let chat = yield promiseOpenChat("http://example.com");
+  Assert.ok(!chat.minimized, "chat should have been opened restored");
+  Assert.ok(isTabFocused(), "the tab should remain focused.");
+  Assert.ok(!isChatFocused(chat), "the chat should not be focused.");
+  chat.minimized = true;
+  Assert.ok(isTabFocused(), "tab should still be focused");
+  Assert.ok(!isChatFocused(chat), "the chat should not be focused.");
+
+  let promise = promiseOneMessage(chat.content, "Social:FocusEnsured");
+  // pretend we clicked on the titlebar
+  chat.onTitlebarClick({button: 0});
+  yield promise; // wait for focus event.
+  Assert.ok(!chat.minimized, "chat should have been restored");
+  Assert.ok(isChatFocused(chat), "chat should be focused");
+  Assert.strictEqual(chat, chatbar.selectedChat, "chat is marked selected");
+});
+
+// Open 2 chats and give 1 focus.  Minimize the focused one - the second
+// should get focus.
+add_chat_task(function* testMinimizeFocused() {
+  yield setUp();
+  let chat1 = yield promiseOpenChat("http://example.com#1");
+  let chat2 = yield promiseOpenChat("http://example.com#2");
+  Assert.equal(numChatsInWindow(window), 2, "2 chats open");
+  Assert.strictEqual(chatbar.selectedChat, chat2, "chat2 is selected");
+  let promise = promiseOneMessage(chat1.content, "Social:FocusEnsured");
+  chatbar.selectedChat = chat1;
+  chatbar.focus();
+  yield promise; // wait for chat1 to get focus.
+  Assert.strictEqual(chat1, chatbar.selectedChat, "chat1 is marked selected");
+  Assert.notStrictEqual(chat2, chatbar.selectedChat, "chat2 is not marked selected");
+
+  todo(false, "Bug 1245803 should re-enable the test below to have a chat window " +
+    "re-gain focus when another chat window is minimized.");
+  return;
+
+  promise = promiseOneMessage(chat2.content, "Social:FocusEnsured");
+  chat1.minimized = true;
+  yield promise; // wait for chat2 to get focus.
+  Assert.notStrictEqual(chat1, chatbar.selectedChat, "chat1 is not marked selected");
+  Assert.strictEqual(chat2, chatbar.selectedChat, "chat2 is marked selected");
+});
+
+// Open 2 chats, select and focus the second.  Pressing the TAB key should
+// cause focus to move between all elements in our chat window before moving
+// to the next chat window.
+add_chat_task(function* testTab() {
+  yield setUp();
+
+  function sendTabAndWaitForFocus(chat, eltid) {
+    EventUtils.sendKey("tab");
+
+    return ContentTask.spawn(chat.content, { eltid: eltid }, function* (args) {
+      let doc = content.document;
+
+      // ideally we would use the 'focus' event here, but that doesn't work
+      // as expected for the iframe - the iframe itself never gets the focus
+      // event (apparently the sub-document etc does.)
+      // So just poll for the correct element getting focus...
+      yield new Promise(function(resolve, reject) {
+        let tries = 0;
+        let interval = content.setInterval(function() {
+          if (tries >= 30) {
+            clearInterval(interval);
+            reject("never got focus");
+            return;
+          }
+          tries++;
+          let elt = args.eltid ? doc.getElementById(args.eltid) : doc.documentElement;
+          if (doc.activeElement == elt) {
+            content.clearInterval(interval);
+            resolve();
+          }
+          info("retrying wait for focus: " + tries);
+          info("(the active element is " + doc.activeElement + "/" +
+            doc.activeElement.getAttribute("id") + ")");
+        }, 100);
+        info("waiting for element " + args.eltid + " to get focus");
+      });
+    });
+  }
+
+  let chat1 = yield promiseOpenChat(CHAT_URL + "#1");
+  let chat2 = yield promiseOpenChat(CHAT_URL + "#2");
+  chatbar.selectedChat = chat2;
+  let promise = promiseOneMessage(chat2.content, "Social:FocusEnsured");
+  chatbar.focus();
+  info("waiting for second chat to get focus");
+  yield promise;
+
+  // Our chats have 3 focusable elements, so it takes 4 TABs to move
+  // to the new chat.
+  yield sendTabAndWaitForFocus(chat2, "input1");
+  Assert.ok(isChatFocused(chat2), "new chat still focused after first tab");
+
+  yield sendTabAndWaitForFocus(chat2, "input2");
+  Assert.ok(isChatFocused(chat2), "new chat still focused after tab");
+
+  yield sendTabAndWaitForFocus(chat2, "iframe");
+  Assert.ok(isChatFocused(chat2), "new chat still focused after tab");
+
+  // this tab now should move to the next chat, but focus the
+  // document element itself (hence the null eltid)
+  yield sendTabAndWaitForFocus(chat1, null);
+  Assert.ok(isChatFocused(chat1), "first chat is focused");
+});
+
+// Open a chat and focus an element other than the first. Move focus to some
+// other item (the tab itself in this case), then focus the chatbar - the
+// same element that was previously focused should still have focus.
+add_chat_task(function* testFocusedElement() {
+  yield setUp();
+
+  // open a chat with focus requested.
+  let chat = yield promiseOpenChat(CHAT_URL, undefined, true);
+
+  yield ContentTask.spawn(chat.content, null, function* () {
+    content.document.getElementById("input2").focus();
+  });
+
+  // set focus to the main window.
+  let tabb = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+  let promise = promiseOneEvent(window, "focus");
+  Services.focus.moveFocus(window, null, Services.focus.MOVEFOCUS_ROOT, 0);
+  yield promise;
+
+  promise = promiseOneMessage(chat.content, "Social:FocusEnsured");
+  chatbar.focus();
+  yield promise;
+
+  yield ContentTask.spawn(chat.content, null, function* () {
+    Assert.equal(content.document.activeElement.getAttribute("id"), "input2",
+      "correct input field still has focus");
+  });
+});