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