michael@0: <?xml version="1.0"?>
michael@0: 
michael@0: <bindings id="socialMarkBindings"
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: 
michael@0:   <binding id="toolbarbutton-marks" display="xul:button"
michael@0:            extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
michael@0:     <content disabled="true">
michael@0:       <xul:panel anonid="panel" hidden="true" type="arrow" class="social-panel"/>
michael@0:       <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
michael@0:       <xul:label class="toolbarbutton-text" crop="right" flex="1"
michael@0:                  xbl:inherits="value=label,accesskey,crop,wrap"/>
michael@0:       <xul:label class="toolbarbutton-multiline-text" flex="1"
michael@0:                  xbl:inherits="xbl:text=label,accesskey,wrap"/>
michael@0:     </content>
michael@0:     <implementation implements="nsIDOMEventListener, nsIObserver">
michael@0:       <field name="inMenuPanel">false</field>
michael@0: 
michael@0:       <property name="panel">
michael@0:         <getter>
michael@0:           let widgetGroup = CustomizableUI.getWidget(this.getAttribute("id"));
michael@0:           let widget = widgetGroup.forWindow(window);
michael@0:           this.inMenuPanel = widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL;
michael@0:           if (this.inMenuPanel) {
michael@0:             widget.node.setAttribute("closemenu", "none");
michael@0:             return document.getElementById("PanelUI-socialapi");
michael@0:           }
michael@0:           return document.getAnonymousElementByAttribute(this, "anonid", "panel");
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="content">
michael@0:         <getter><![CDATA[
michael@0:           if (this._frame)
michael@0:             return this._frame;
michael@0:           let notificationFrameId = "social-mark-frame-" + this.getAttribute("origin");
michael@0:           this._frame = SharedFrame.createFrame(
michael@0:             notificationFrameId, /* frame name */
michael@0:             this.panel, /* parent */
michael@0:             {
michael@0:               "type": "content",
michael@0:               "mozbrowser": "true",
michael@0:               "class": "social-panel-frame",
michael@0:               "id": notificationFrameId,
michael@0:               "tooltip": "aHTMLTooltip",
michael@0:               "flex": "1",
michael@0:               "context": "contentAreaContextMenu",
michael@0:               "origin": this.getAttribute("origin"),
michael@0:               "src": "about:blank"
michael@0:             }
michael@0:           );
michael@0:           this._frame.addEventListener("DOMLinkAdded", this);
michael@0:           this.setAttribute("notificationFrameId", notificationFrameId);
michael@0:           return this._frame;
michael@0:         ]]></getter>
michael@0:       </property>
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="provider">
michael@0:         <getter>
michael@0:           return Social._getProviderFromOrigin(this.getAttribute("origin"));
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="isMarked">
michael@0:         <setter><![CDATA[
michael@0:           this._isMarked = val;
michael@0:           let provider = this.provider;
michael@0:           // we cannot size the image when we apply it via listStyleImage, so
michael@0:           // use the toolbar image
michael@0:           let place = CustomizableUI.getPlaceForItem(this);
michael@0:           val = val && place != "palette";
michael@0:           let icon = val ? provider.markedIcon : provider.unmarkedIcon;
michael@0:           let iconURL = icon || provider.icon32URL || provider.iconURL;
michael@0:           this.setAttribute("image", iconURL);
michael@0:         ]]></setter>
michael@0:         <getter>
michael@0:           return this._isMarked;
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="update">
michael@0:         <body><![CDATA[
michael@0:         // update the button for use with the current tab
michael@0:         let provider = this.provider;
michael@0:         if (this._dynamicResizer) {
michael@0:           this._dynamicResizer.stop();
michael@0:           this._dynamicResizer = null;
michael@0:         }
michael@0:         this.content.setAttribute("src", "about:blank");
michael@0: 
michael@0:         // do we have a savable page loaded?
michael@0:         let aURI = gBrowser.currentURI;
michael@0:         this.disabled = !aURI || !(aURI.schemeIs('http') || aURI.schemeIs('https'));
michael@0:         if (this.disabled) {
michael@0:           this.isMarked = false;
michael@0:         } else {
michael@0:           Social.isURIMarked(provider.origin, aURI, (isMarked) => {
michael@0:             this.isMarked = isMarked;
michael@0:           });
michael@0:         }
michael@0: 
michael@0:         this.content.setAttribute("origin", provider.origin);
michael@0:         if (!this.inMenuPanel) {
michael@0:           let panel = this.panel;
michael@0:           // if customization is currently happening, we may not have a panel
michael@0:           // that we can hide
michael@0:           if (panel.hidePopup) {
michael@0:             panel.hidePopup();
michael@0:             panel.hidden = true;
michael@0:           }
michael@0:         }
michael@0:         this.pageData = null;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="loadPanel">
michael@0:         <parameter name="pageData"/>
michael@0:         <body><![CDATA[
michael@0:         let provider = this.provider;
michael@0:         let panel = this.panel;
michael@0:         panel.hidden = false;
michael@0: 
michael@0:         // reparent the iframe if we've been customized to a new location
michael@0:         if (this.content.parentNode != panel)
michael@0:           panel.appendChild(this.content);
michael@0: 
michael@0:         let URLTemplate = provider.markURL;
michael@0:         this.pageData = pageData || OpenGraphBuilder.getData(gBrowser);
michael@0:         let endpoint = OpenGraphBuilder.generateEndpointURL(URLTemplate, this.pageData);
michael@0: 
michael@0:         // setup listeners
michael@0:         let DOMContentLoaded = (event) => {
michael@0:           if (event.target != this.contentDocument)
michael@0:             return;
michael@0:           this._loading = false;
michael@0:           this.content.removeEventListener("DOMContentLoaded", DOMContentLoaded, true);
michael@0:           // add our resizer after the dom is ready
michael@0:           if (!this.inMenuPanel) {
michael@0:             let DynamicResizeWatcher = Cu.import("resource:///modules/Social.jsm", {}).DynamicResizeWatcher;
michael@0:             this._dynamicResizer = new DynamicResizeWatcher();
michael@0:             this._dynamicResizer.start(this.panel, this.content);
michael@0:           } else if (this._dynamicResizer) {
michael@0:             this._dynamicResizer.stop();
michael@0:             this._dynamicResizer = null;
michael@0:           }
michael@0:           // send the opengraph data
michael@0:           let evt = this.contentDocument.createEvent("CustomEvent");
michael@0:           evt.initCustomEvent("OpenGraphData", true, true, JSON.stringify(this.pageData));
michael@0:           this.contentDocument.documentElement.dispatchEvent(evt);
michael@0: 
michael@0:           let contentWindow = this.contentWindow;
michael@0:           let markUpdate = function(event) {
michael@0:             // update the annotation based on this event, then update the
michael@0:             // icon as well
michael@0:             this.isMarked = JSON.parse(event.detail).marked;
michael@0:             let uri = Services.io.newURI(this.pageData.url, null, null);
michael@0:             if (this.isMarked) {
michael@0:               Social.markURI(provider.origin, uri);
michael@0:             } else {
michael@0:               Social.unmarkURI(provider.origin, uri, () => {
michael@0:                 this.update();
michael@0:               });
michael@0:             }
michael@0:           }.bind(this);
michael@0:           contentWindow.addEventListener("socialMarkUpdate", markUpdate);
michael@0:           contentWindow.addEventListener("unload", function unload() {
michael@0:             contentWindow.removeEventListener("unload", unload);
michael@0:             contentWindow.removeEventListener("socialMarkUpdate", markUpdate);
michael@0:           });
michael@0:         }
michael@0:         this.content.addEventListener("DOMContentLoaded", DOMContentLoaded, true);
michael@0:         this._loading = true;
michael@0:         this.content.setAttribute("src", endpoint);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="openPanel">
michael@0:         <parameter name="aResetOnClose"/>
michael@0:         <body><![CDATA[
michael@0:         let panel = this.panel;
michael@0:         let frameId = this.getAttribute("notificationFrameId");
michael@0: 
michael@0:         let wasAlive = SharedFrame.isGroupAlive(frameId);
michael@0:         SharedFrame.setOwner(frameId, this.content);
michael@0: 
michael@0:         // Clear dimensions on all browsers so the panel size will
michael@0:         // only use the selected browser.
michael@0:         let frameIter = panel.firstElementChild;
michael@0:         while (frameIter) {
michael@0:           frameIter.collapsed = (frameIter != this.content);
michael@0:           frameIter = frameIter.nextElementSibling;
michael@0:         }
michael@0: 
michael@0:         // if we're a slice in the hambuger, use that panel instead
michael@0:         let widgetGroup = CustomizableUI.getWidget(this.getAttribute("id"));
michael@0:         let widget = widgetGroup.forWindow(window);
michael@0:         let inMenuPanel = widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL;
michael@0:         if (inMenuPanel) {
michael@0:           PanelUI.showSubView("PanelUI-socialapi", widget.node,
michael@0:                               CustomizableUI.AREA_PANEL);
michael@0:         } else {
michael@0:           let anchor = document.getAnonymousElementByAttribute(this, "class", "toolbarbutton-icon");
michael@0:           panel.openPopup(anchor, "bottomcenter topright", 0, 0, false, false);
michael@0:           this.setAttribute("open", "true");
michael@0:         }
michael@0:         if (aResetOnClose) {
michael@0:           let evName = inMenuPanel ? "ViewHiding": "popuphidden";
michael@0:           let _hidden = () => {
michael@0:             panel.removeEventListener(evName, _hidden);
michael@0:             this.update();
michael@0:           };
michael@0:           panel.addEventListener(evName, _hidden, false);
michael@0:         }
michael@0:          ]]></body>
michael@0:        </method>
michael@0: 
michael@0:       <method name="markCurrentPage">
michael@0:         <parameter name="aOpenPanel"/>
michael@0:         <body><![CDATA[
michael@0:         // we always set the src on click if it has not been set for this tab,
michael@0:         // but we only want to open the panel if it was previously annotated.
michael@0:         let openPanel = this.isMarked || aOpenPanel ||
michael@0:                         this.inMenuPanel || !this.provider.haveLoggedInUser();
michael@0:         let src = this.content.getAttribute("src");
michael@0:         if (!src || src == "about:blank") {
michael@0:           this.loadPanel();
michael@0:         }
michael@0:         if (openPanel)
michael@0:           this.openPanel();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="markLink">
michael@0:         <parameter name="aUrl"/>
michael@0:         <body><![CDATA[
michael@0:         if (!aUrl) {
michael@0:           this.markCurrentPage(true);
michael@0:           return;
michael@0:         }
michael@0:         // initiated form an external source, such as gContextMenu, where
michael@0:         // pageData is passed into us. In this case, we always load the iframe
michael@0:         // and show it since the url may not be the browser tab, but an image,
michael@0:         // link, etc. inside the page. We also "update" the iframe to the
michael@0:         // previous url when it is closed.
michael@0:         this.content.setAttribute("src", "about:blank");
michael@0:         this.loadPanel({ url: aUrl });
michael@0:         this.openPanel(true);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="dispatchPanelEvent">
michael@0:         <parameter name="name"/>
michael@0:         <body><![CDATA[
michael@0:         let evt = this.contentDocument.createEvent("CustomEvent");
michael@0:         evt.initCustomEvent(name, true, true, {});
michael@0:         this.contentDocument.documentElement.dispatchEvent(evt);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onShown">
michael@0:         <body><![CDATA[
michael@0:         // because the panel may be preloaded, we need to size the panel when
michael@0:         // showing as well as after load
michael@0:         let sizeSocialPanelToContent = Cu.import("resource:///modules/Social.jsm", {}).sizeSocialPanelToContent;
michael@0:         if (!this._loading && this.contentDocument &&
michael@0:             this.contentDocument.readyState == "complete") {
michael@0:           this.dispatchPanelEvent("socialFrameShow");
michael@0:           if (!this.inMenuPanel)
michael@0:             sizeSocialPanelToContent(this.panel, this.content);
michael@0:         } else {
michael@0:           let panelBrowserOnload = (e) => {
michael@0:             this.content.removeEventListener("load", panelBrowserOnload, true);
michael@0:             this.dispatchPanelEvent("socialFrameShow");
michael@0:             if (!this.inMenuPanel)
michael@0:               sizeSocialPanelToContent(this.panel, this.content);
michael@0:           };
michael@0:           this.content.addEventListener("load", panelBrowserOnload, true);
michael@0:         }
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.eventPhase != aEvent.BUBBLING_PHASE)
michael@0:           return;
michael@0:         switch(aEvent.type) {
michael@0:           case "DOMLinkAdded": {
michael@0:             // much of this logic is from DOMLinkHandler in browser.js, this sets
michael@0:             // the presence icon for a chat user, we simply use favicon style
michael@0:             // updating
michael@0:             let link = aEvent.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 cannot size the image when we apply it via listStyleImage, so
michael@0:             // use the toolbar image
michael@0:             this.setAttribute("image", uri.spec);
michael@0:             }
michael@0:             break;
michael@0:           case "ViewShowing":
michael@0:             this.onShown();
michael@0:             break;
michael@0:           case "ViewHiding":
michael@0:             this.dispatchPanelEvent("socialFrameHide");
michael@0:             break;
michael@0:         }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:     </implementation>
michael@0:     <handlers>
michael@0:       <handler event="popupshown"><![CDATA[
michael@0:         this.onShown();
michael@0:       ]]></handler>
michael@0:       <handler event="popuphidden"><![CDATA[
michael@0:         this.dispatchPanelEvent("socialFrameHide");
michael@0:         this.removeAttribute("open");
michael@0:       ]]></handler>
michael@0:       <handler event="command"><![CDATA[
michael@0:         this.markCurrentPage();
michael@0:       ]]></handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0: </bindings>