gecko/browser/base/content/socialchat.xml

459 lines
16 KiB
XML
Raw Normal View History

<?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"
onclick="document.getBindingParent(this).toggle();" align="baseline">
<xul:image class="chat-status-icon" xbl:inherits="src=image"/>
<xul:label class="chat-title" flex="1" xbl:inherits="value=label" crop="center"/>
<xul:toolbarbutton class="chat-close-button chat-toolbarbutton"
oncommand="document.getBindingParent(this).close();"/>
</xul:hbox>
<xul:iframe anonid="iframe" class="chat-frame" flex="1"
xbl:inherits="src,origin,collapsed=minimized" type="content"/>
</content>
<implementation implements="nsIDOMEventListener">
<field name="iframe" readonly="true">
document.getAnonymousElementByAttribute(this, "anonid", "iframe");
</field>
<property name="minimized">
<getter>
return this.getAttribute("minimized") == "true";
</getter>
<setter>
this.isActive = !val;
if (val)
this.setAttribute("minimized", "true");
else
this.removeAttribute("minimized");
</setter>
</property>
<property name="isActive">
<getter>
return this.iframe.docShell.isActive;
</getter>
<setter>
this.iframe.docShell.isActive = !!val;
// let the chat frame know if it is being shown or hidden
let evt = this.iframe.contentDocument.createEvent("CustomEvent");
evt.initCustomEvent(val ? "socialFrameShow" : "socialFrameHide", true, true, {});
this.iframe.contentDocument.documentElement.dispatchEvent(evt);
</setter>
</property>
<method name="close">
<body><![CDATA[
this.parentNode.remove(this);
]]></body>
</method>
<method name="toggle">
<body><![CDATA[
this.minimized = !this.minimized;
]]></body>
</method>
</implementation>
<handlers>
<handler event="focus" phase="capturing">
this.parentNode.selectedChat = this;
</handler>
<handler event="DOMContentLoaded"><![CDATA[
this.isActive = !this.minimized;
if (this._callback) this._callback(this.iframe.contentWindow);
let chatbox = this;
function chatActivity() {
chatbox.setAttribute("activity", true);
chatbox.parentNode.updateTitlebar(chatbox);
};
let iframeWindow = this.iframe.contentWindow;
iframeWindow.addEventListener("socialChatActivity", chatActivity);
iframeWindow.addEventListener("unload", function unload() {
iframeWindow.removeEventListener("unload", unload);
iframeWindow.removeEventListener("socialChatActivity", chatActivity);
});
]]></handler>
<handler event="DOMTitleChanged"><![CDATA[
this.setAttribute('label', this.iframe.contentDocument.title);
this.parentNode.updateTitlebar(this);
]]></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 uri = DOMLinkHandler.getLinkIconURI(link);
if (!uri)
return;
// we made it this far, use it
this.setAttribute('image', uri.spec);
this.parentNode.updateTitlebar(this);
]]></handler>
</handlers>
</binding>
<binding id="chatbar">
<content>
<xul:hbox align="end" pack="end" anonid="innerbox" class="chatbar-innerbox" mousethrough="always" flex="1">
<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>
<xul:spacer flex="1" anonid="spacer" class="chatbar-overflow-spacer"/>
<children/>
</xul:hbox>
</content>
<implementation implements="nsIDOMEventListener">
<constructor>
// to avoid reflows we cache the values for various widths.
this.cachedWidthOpen = 0;
this.cachedWidthMinimized = 0;
this.cachedWidthNub = 0;
</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>
<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.
let child = this.lastChild;
while (child) {
if (child.collapsed)
yield child;
child = child.previousSibling;
}
]]></getter>
</property>
<property name="visibleChildren">
<getter><![CDATA[
// A generator yielding all non-collapsed chatboxes.
let child = this.firstChild;
while (child) {
if (!child.collapsed)
yield child;
child = child.nextSibling;
}
]]></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.)
for (let child of this.visibleChildren)
if (child != this.selectedChat)
yield child;
]]></getter>
</property>
<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[
// gets the width of a child, using/setting the cached value for
// children of this type.
// DOES NOT take collapsed into account - ie, this is the width
// of a child assuming it is *not* collapsed. (collapsed chats
// have a width of zero as they are not shown).
if (aChatbox.minimized) {
if (!this.cachedWidthMinimized) {
if (aChatbox.collapsed)
throw new Error("can't calculate size of collapsed chat!");
this.cachedWidthMinimized = this.calcTotalWidthOf(aChatbox);
}
return this.cachedWidthMinimized;
}
if (!this.cachedWidthOpen) {
if (aChatbox.collapsed)
throw new Error("can't calculate size of collapsed chat!");
this.cachedWidthOpen = this.calcTotalWidthOf(aChatbox);
}
return this.cachedWidthOpen;
]]></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.iframe.contentDocument.title);
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"/>
<body><![CDATA[
if (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.
this.resize();
]]></body>
</method>
<method name="_remove">
<parameter name="aChatbox"/>
<body><![CDATA[
if (this.selectedChat == aChatbox) {
this.selectedChat = aChatbox.previousSibling ? aChatbox.previousSibling : aChatbox.nextSibling
}
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.getAttribute('src'));
]]></body>
</method>
<method name="removeAll">
<body><![CDATA[
while (this.firstChild) {
this._remove(this.firstChild);
}
// and the nub/popup must also die.
this.nub.collapsed = true;
]]></body>
</method>
<method name="openChat">
<parameter name="aProvider"/>
<parameter name="aURL"/>
<parameter name="aCallback"/>
<parameter name="aMode"/>
<body><![CDATA[
let cb = this.chatboxForURL.get(aURL);
if (cb) {
cb = cb.get();
if (cb.parentNode) {
this.showChat(cb);
if (aCallback)
aCallback(cb.iframe.contentWindow);
return;
}
this.chatboxForURL.delete(aURL);
}
cb = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "chatbox");
if (aMode == "minimized")
cb.setAttribute("minimized", "true");
this.selectedChat = cb;
this.insertBefore(cb, this.firstChild);
cb._callback = aCallback;
cb.setAttribute("origin", aProvider.origin);
cb.setAttribute("src", aURL);
this.chatboxForURL.set(aURL, Cu.getWeakReference(cb));
this.resize();
]]></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>
</implementation>
<handlers>
<handler event="popupshown"><![CDATA[
this.nub.removeAttribute("activity");
]]></handler>
<handler event="load"><![CDATA[
window.addEventListener("resize", this);
]]></handler>
<handler event="unload"><![CDATA[
window.removeEventListener("resize", this);
]]></handler>
</handlers>
</binding>
</bindings>