michael@0: <?xml version="1.0"?>
michael@0: <!-- This Source Code Form is subject to the terms of the Mozilla Public
michael@0:    - License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
michael@0: 
michael@0: <bindings id="browserPanelUIBindings"
michael@0:           xmlns="http://www.mozilla.org/xbl"
michael@0:           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:           xmlns:xbl="http://www.mozilla.org/xbl">
michael@0: 
michael@0:   <binding id="panelmultiview">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://browser/content/customizableui/panelUI.css"/>
michael@0:     </resources>
michael@0:     <content>
michael@0:       <xul:box anonid="viewContainer" class="panel-viewcontainer" xbl:inherits="panelopen,viewtype,transitioning">
michael@0:         <xul:stack anonid="viewStack" xbl:inherits="viewtype" viewtype="main" class="panel-viewstack">
michael@0:           <xul:vbox anonid="mainViewContainer" class="panel-mainview"/>
michael@0: 
michael@0:           <!-- Used to capture click events over the PanelUI-mainView if we're in
michael@0:                subview mode. That way, any click on the PanelUI-mainView causes us
michael@0:                to revert to the mainView mode, whereupon PanelUI-click-capture then
michael@0:                allows click events to go through it. -->
michael@0:           <xul:vbox anonid="clickCapturer" class="panel-clickcapturer"/>
michael@0: 
michael@0:           <!-- We manually set display: none (via a CSS attribute selector) on the
michael@0:                subviews that are not being displayed. We're using this over a deck
michael@0:                because a deck assumes the size of its largest child, regardless of
michael@0:                whether or not it is shown. That's not good for our case, since we
michael@0:                want to allow each subview to be uniquely sized. -->
michael@0:           <xul:vbox anonid="subViews" class="panel-subviews" xbl:inherits="panelopen">
michael@0:             <children includes="panelview"/>
michael@0:           </xul:vbox>
michael@0:         </xul:stack>
michael@0:       </xul:box>
michael@0:     </content>
michael@0:     <implementation implements="nsIDOMEventListener">
michael@0:       <field name="_clickCapturer" readonly="true">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "clickCapturer");
michael@0:       </field>
michael@0:       <field name="_viewContainer" readonly="true">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "viewContainer");
michael@0:       </field>
michael@0:       <field name="_mainViewContainer" readonly="true">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "mainViewContainer");
michael@0:       </field>
michael@0:       <field name="_subViews" readonly="true">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "subViews");
michael@0:       </field>
michael@0:       <field name="_viewStack" readonly="true">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "viewStack");
michael@0:       </field>
michael@0:       <field name="_panel" readonly="true">
michael@0:         this.parentNode;
michael@0:       </field>
michael@0: 
michael@0:       <field name="_currentSubView">null</field>
michael@0:       <field name="_anchorElement">null</field>
michael@0:       <field name="_mainViewHeight">0</field>
michael@0:       <field name="_subViewObserver">null</field>
michael@0:       <field name="__transitioning">false</field>
michael@0:       <field name="_ignoreMutations">false</field>
michael@0: 
michael@0:       <property name="showingSubView" readonly="true"
michael@0:                 onget="return this._viewStack.getAttribute('viewtype') == 'subview'"/>
michael@0:       <property name="_mainViewId" onget="return this.getAttribute('mainViewId');" onset="this.setAttribute('mainViewId', val); return val;"/>
michael@0:       <property name="_mainView" readonly="true"
michael@0:                 onget="return this._mainViewId ? document.getElementById(this._mainViewId) : null;"/>
michael@0:       <property name="showingSubViewAsMainView" readonly="true"
michael@0:                 onget="return this.getAttribute('mainViewIsSubView') == 'true'"/>
michael@0: 
michael@0:       <property name="ignoreMutations">
michael@0:         <getter>
michael@0:           return this._ignoreMutations;
michael@0:         </getter>
michael@0:         <setter><![CDATA[
michael@0:           this._ignoreMutations = val;
michael@0:           if (!val && this._panel.state == "open") {
michael@0:             if (this.showingSubView) {
michael@0:               this._syncContainerWithSubView();
michael@0:             } else {
michael@0:               this._syncContainerWithMainView();
michael@0:             }
michael@0:           }
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="_transitioning">
michael@0:         <getter>
michael@0:           return this.__transitioning;
michael@0:         </getter>
michael@0:         <setter><![CDATA[
michael@0:           this.__transitioning = val;
michael@0:           if (val) {
michael@0:             this.setAttribute("transitioning", "true");
michael@0:           } else {
michael@0:             this.removeAttribute("transitioning");
michael@0:           }
michael@0:         ]]></setter>
michael@0:       </property>
michael@0:       <constructor><![CDATA[
michael@0:         this._clickCapturer.addEventListener("click", this);
michael@0:         this._panel.addEventListener("popupshowing", this);
michael@0:         this._panel.addEventListener("popupshown", this);
michael@0:         this._panel.addEventListener("popuphidden", this);
michael@0:         this._subViews.addEventListener("overflow", this);
michael@0:         this._mainViewContainer.addEventListener("overflow", this);
michael@0: 
michael@0:         // Get a MutationObserver ready to react to subview size changes. We
michael@0:         // only attach this MutationObserver when a subview is being displayed.
michael@0:         this._subViewObserver =
michael@0:           new MutationObserver(this._syncContainerWithSubView.bind(this));
michael@0:         this._mainViewObserver =
michael@0:           new MutationObserver(this._syncContainerWithMainView.bind(this));
michael@0: 
michael@0:         this._mainViewContainer.setAttribute("panelid",
michael@0:                                              this._panel.id);
michael@0: 
michael@0:         if (this._mainView) {
michael@0:           this.setMainView(this._mainView);
michael@0:         }
michael@0:         this.setAttribute("viewtype", "main");
michael@0:       ]]></constructor>
michael@0: 
michael@0:       <destructor><![CDATA[
michael@0:         if (this._mainView) {
michael@0:           this._mainView.removeAttribute("mainview");
michael@0:         }
michael@0:         this._mainViewObserver.disconnect();
michael@0:         this._subViewObserver.disconnect();
michael@0:         this._panel.removeEventListener("popupshowing", this);
michael@0:         this._panel.removeEventListener("popupshown", this);
michael@0:         this._panel.removeEventListener("popuphidden", this);
michael@0:         this._subViews.removeEventListener("overflow", this);
michael@0:         this._mainViewContainer.removeEventListener("overflow", this);
michael@0:         this._clickCapturer.removeEventListener("click", this);
michael@0:       ]]></destructor>
michael@0: 
michael@0:       <method name="setMainView">
michael@0:         <parameter name="aNewMainView"/>
michael@0:         <body><![CDATA[
michael@0:         if (this._mainView) {
michael@0:           this._mainViewObserver.disconnect();
michael@0:           this._subViews.appendChild(this._mainView);
michael@0:           this._mainView.removeAttribute("mainview");
michael@0:         }
michael@0:         this._mainViewId = aNewMainView.id;
michael@0:         aNewMainView.setAttribute("mainview", "true");
michael@0:         this._mainViewContainer.appendChild(aNewMainView);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="showMainView">
michael@0:         <body><![CDATA[
michael@0:           if (this.showingSubView) {
michael@0:             let viewNode = this._currentSubView;
michael@0:             let evt = document.createEvent("CustomEvent");
michael@0:             evt.initCustomEvent("ViewHiding", true, true, viewNode);
michael@0:             viewNode.dispatchEvent(evt);
michael@0: 
michael@0:             viewNode.removeAttribute("current");
michael@0:             this._currentSubView = null;
michael@0: 
michael@0:             this._subViewObserver.disconnect();
michael@0: 
michael@0:             this._transitioning = true;
michael@0: 
michael@0:             this._viewContainer.addEventListener("transitionend", function trans() {
michael@0:               this._viewContainer.removeEventListener("transitionend", trans);
michael@0:               this._transitioning = false;
michael@0:             }.bind(this));
michael@0:             this._viewContainer.style.height = this._mainViewHeight + "px";
michael@0: 
michael@0:             this.setAttribute("viewtype", "main");
michael@0:           }
michael@0: 
michael@0:           this._shiftMainView();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="showSubView">
michael@0:         <parameter name="aViewId"/>
michael@0:         <parameter name="aAnchor"/>
michael@0:         <body><![CDATA[
michael@0:           let viewNode = this.querySelector("#" + aViewId);
michael@0:           viewNode.setAttribute("current", true);
michael@0:           // Emit the ViewShowing event so that the widget definition has a chance
michael@0:           // to lazily populate the subview with things.
michael@0:           let evt = document.createEvent("CustomEvent");
michael@0:           evt.initCustomEvent("ViewShowing", true, true, viewNode);
michael@0:           viewNode.dispatchEvent(evt);
michael@0:           if (evt.defaultPrevented) {
michael@0:             return;
michael@0:           }
michael@0: 
michael@0:           this._currentSubView = viewNode;
michael@0: 
michael@0:           // Now we have to transition the panel. There are a few parts to this:
michael@0:           //
michael@0:           // 1) The main view content gets shifted so that the center of the anchor
michael@0:           //    node is at the left-most edge of the panel.
michael@0:           // 2) The subview deck slides in so that it takes up almost all of the
michael@0:           //    panel.
michael@0:           // 3) If the subview is taller then the main panel contents, then the panel
michael@0:           //    must grow to meet that new height. Otherwise, it must shrink.
michael@0:           //
michael@0:           // All three of these actions make use of CSS transformations, so they
michael@0:           // should all occur simultaneously.
michael@0:           this.setAttribute("viewtype", "subview");
michael@0:           this._shiftMainView(aAnchor);
michael@0: 
michael@0:           this._mainViewHeight = this._viewStack.clientHeight;
michael@0: 
michael@0:           this._transitioning = true;
michael@0:           this._viewContainer.addEventListener("transitionend", function trans() {
michael@0:             this._viewContainer.removeEventListener("transitionend", trans);
michael@0:             this._transitioning = false;
michael@0:           }.bind(this));
michael@0: 
michael@0:           let newHeight = this._heightOfSubview(viewNode, this._subViews);
michael@0:           this._viewContainer.style.height = newHeight + "px";
michael@0: 
michael@0:           this._subViewObserver.observe(viewNode, {
michael@0:             attributes: true,
michael@0:             characterData: true,
michael@0:             childList: true,
michael@0:             subtree: true
michael@0:           });
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_shiftMainView">
michael@0:         <parameter name="aAnchor"/>
michael@0:         <body><![CDATA[
michael@0:           if (aAnchor) {
michael@0:             // We need to find the edge of the anchor, relative to the main panel.
michael@0:             // Then we need to add half the width of the anchor. This is the target
michael@0:             // that we need to transition to.
michael@0:             let anchorRect = aAnchor.getBoundingClientRect();
michael@0:             let mainViewRect = this._mainViewContainer.getBoundingClientRect();
michael@0:             let center = aAnchor.clientWidth / 2;
michael@0:             let direction = aAnchor.ownerDocument.defaultView.getComputedStyle(aAnchor, null).direction;
michael@0:             let edge, target;
michael@0:             if (direction == "ltr") {
michael@0:               edge = anchorRect.left - mainViewRect.left;
michael@0:               target = "-" + (edge + center);
michael@0:             } else {
michael@0:               edge = mainViewRect.right - anchorRect.right;
michael@0:               target = edge + center;
michael@0:             }
michael@0:             this._mainViewContainer.style.transform = "translateX(" + target + "px)";
michael@0:             aAnchor.setAttribute("panel-multiview-anchor", true);
michael@0:           } else {
michael@0:             this._mainViewContainer.style.transform = "";
michael@0:             if (this.anchorElement)
michael@0:               this.anchorElement.removeAttribute("panel-multiview-anchor");
michael@0:           }
michael@0:           this.anchorElement = aAnchor;
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.startsWith("popup") && aEvent.target != this._panel) {
michael@0:             // Shouldn't act on e.g. context menus being shown from within the panel.
michael@0:             return;
michael@0:           }
michael@0:           switch (aEvent.type) {
michael@0:             case "click":
michael@0:               if (aEvent.originalTarget == this._clickCapturer) {
michael@0:                 this.showMainView();
michael@0:               }
michael@0:               break;
michael@0:             case "overflow":
michael@0:               if (aEvent.target.localName == "vbox") {
michael@0:                 // Resize the right view on the next tick.
michael@0:                 if (this.showingSubView) {
michael@0:                   setTimeout(this._syncContainerWithSubView.bind(this), 0);
michael@0:                 } else if (!this.transitioning) {
michael@0:                   setTimeout(this._syncContainerWithMainView.bind(this), 0);
michael@0:                 }
michael@0:               }
michael@0:               break;
michael@0:             case "popupshowing":
michael@0:               this.setAttribute("panelopen", "true");
michael@0:               // Bug 941196 - The panel can get taller when opening a subview. Disabling
michael@0:               // autoPositioning means that the panel won't jump around if an opened
michael@0:               // subview causes the panel to exceed the dimensions of the screen in the
michael@0:               // direction that the panel originally opened in. This property resets
michael@0:               // every time the popup closes, which is why we have to set it each time.
michael@0:               this._panel.autoPosition = false;
michael@0:               this._syncContainerWithMainView();
michael@0: 
michael@0:               this._mainViewObserver.observe(this._mainView, {
michael@0:                 attributes: true,
michael@0:                 characterData: true,
michael@0:                 childList: true,
michael@0:                 subtree: true
michael@0:               });
michael@0: 
michael@0:               break;
michael@0:             case "popupshown":
michael@0:               this._setMaxHeight();
michael@0:               break;
michael@0:             case "popuphidden":
michael@0:               this.removeAttribute("panelopen");
michael@0:               this._mainView.style.removeProperty("height");
michael@0:               this.showMainView();
michael@0:               this._mainViewObserver.disconnect();
michael@0:               break;
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_shouldSetHeight">
michael@0:         <body><![CDATA[
michael@0:           return this.getAttribute("nosubviews") != "true";
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_setMaxHeight">
michael@0:         <body><![CDATA[
michael@0:           if (!this._shouldSetHeight())
michael@0:             return;
michael@0: 
michael@0:           // Ignore the mutation that'll fire when we set the height of
michael@0:           // the main view.
michael@0:           this.ignoreMutations = true;
michael@0:           this._mainView.style.height =
michael@0:             this.getBoundingClientRect().height + "px";
michael@0:           this.ignoreMutations = false;
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       <method name="_syncContainerWithSubView">
michael@0:         <body><![CDATA[
michael@0:           // Check that this panel is still alive:
michael@0:           if (!this._panel || !this._panel.parentNode) {
michael@0:             return;
michael@0:           }
michael@0: 
michael@0:           if (!this.ignoreMutations && this.showingSubView) {
michael@0:             let newHeight = this._heightOfSubview(this._currentSubView, this._subViews);
michael@0:             this._viewContainer.style.height = newHeight + "px";
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       <method name="_syncContainerWithMainView">
michael@0:         <body><![CDATA[
michael@0:           // Check that this panel is still alive:
michael@0:           if (!this._panel || !this._panel.parentNode || !this._shouldSetHeight()) {
michael@0:             return;
michael@0:           }
michael@0: 
michael@0:           if (!this.ignoreMutations && !this.showingSubView && !this._transitioning) {
michael@0:             let height;
michael@0:             if (this.showingSubViewAsMainView) {
michael@0:               height = this._heightOfSubview(this._mainView);
michael@0:             } else {
michael@0:               height = this._mainView.scrollHeight;
michael@0:             }
michael@0:             this._viewContainer.style.height = height + "px";
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_heightOfSubview">
michael@0:         <parameter name="aSubview"/>
michael@0:         <parameter name="aContainerToCheck"/>
michael@0:         <body><![CDATA[
michael@0:           function getFullHeight(element) {
michael@0:             //XXXgijs: unfortunately, scrollHeight rounds values, and there's no alternative
michael@0:             // that works with overflow: auto elements. Fortunately for us,
michael@0:             // we have exactly 1 (potentially) scrolling element in here (the subview body),
michael@0:             // and rounding 1 value is OK - rounding more than 1 and adding them means we get
michael@0:             // off-by-1 errors. Now we might be off by a subpixel, but we care less about that.
michael@0:             // So, use scrollHeight *only* if the element is vertically scrollable.
michael@0:             let height;
michael@0:             let elementCS;
michael@0:             if (element.scrollTopMax) {
michael@0:               height = element.scrollHeight;
michael@0:               // Bounding client rects include borders, scrollHeight doesn't:
michael@0:               elementCS = win.getComputedStyle(element);
michael@0:               height += parseFloat(elementCS.borderTopWidth) +
michael@0:                         parseFloat(elementCS.borderBottomWidth);
michael@0:             } else {
michael@0:               height = element.getBoundingClientRect().height;
michael@0:               if (height > 0) {
michael@0:                 elementCS = win.getComputedStyle(element);
michael@0:               }
michael@0:             }
michael@0:             if (elementCS) {
michael@0:               // Include margins - but not borders or paddings because they
michael@0:               // were dealt with above.
michael@0:               height += parseFloat(elementCS.marginTop) + parseFloat(elementCS.marginBottom);
michael@0:             }
michael@0:             return height;
michael@0:           }
michael@0:           let win = aSubview.ownerDocument.defaultView;
michael@0:           let body = aSubview.querySelector(".panel-subview-body");
michael@0:           let height = getFullHeight(body || aSubview);
michael@0:           if (body) {
michael@0:             let header = aSubview.querySelector(".panel-subview-header");
michael@0:             let footer = aSubview.querySelector(".panel-subview-footer");
michael@0:             height += (header ? getFullHeight(header) : 0) +
michael@0:                       (footer ? getFullHeight(footer) : 0);
michael@0:           }
michael@0:           if (aContainerToCheck) {
michael@0:             let containerCS = win.getComputedStyle(aContainerToCheck);
michael@0:             height += parseFloat(containerCS.paddingTop) + parseFloat(containerCS.paddingBottom);
michael@0:           }
michael@0:           return Math.round(height);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:     </implementation>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="panelview">
michael@0:     <implementation>
michael@0:       <property name="panelMultiView" readonly="true">
michael@0:         <getter><![CDATA[
michael@0:           if (this.parentNode.localName != "panelmultiview") {
michael@0:             return document.getBindingParent(this.parentNode);
michael@0:           }
michael@0: 
michael@0:           return this.parentNode;
michael@0:         ]]></getter>
michael@0:       </property>
michael@0:     </implementation>
michael@0:   </binding>
michael@0: </bindings>