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: <!DOCTYPE bindings [
michael@0: <!ENTITY % commonDialogDTD  SYSTEM "chrome://global/locale/commonDialog.dtd">
michael@0: <!ENTITY % dialogOverlayDTD SYSTEM "chrome://global/locale/dialogOverlay.dtd">
michael@0: %commonDialogDTD;
michael@0: %dialogOverlayDTD;
michael@0: ]>
michael@0: 
michael@0: <bindings id="tabPrompts"
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="tabmodalprompt">
michael@0: 
michael@0:     <resources>
michael@0:         <stylesheet src="chrome://global/content/tabprompts.css"/>
michael@0:         <stylesheet src="chrome://global/skin/tabprompts.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:                  role="dialog"
michael@0:                  aria-describedby="info.body">
michael@0: 
michael@0:         <!-- This is based on the guts of commonDialog.xul -->
michael@0:         <spacer flex="1"/>
michael@0:         <hbox pack="center">
michael@0:             <vbox anonid="mainContainer" class="mainContainer">
michael@0:                 <grid class="topContainer" flex="1">
michael@0:                     <columns>
michael@0:                         <column/>
michael@0:                         <column flex="1"/>
michael@0:                     </columns>
michael@0: 
michael@0:                     <rows>
michael@0:                         <vbox anonid="infoContainer" align="center" pack="center" flex="1">
michael@0:                             <description anonid="info.title" class="info.title" hidden="true" />
michael@0:                             <description anonid="info.body" class="info.body"/>
michael@0:                         </vbox>
michael@0: 
michael@0:                         <row anonid="loginContainer" hidden="true" align="center">
michael@0:                             <label anonid="loginLabel" value="&editfield0.label;" control="loginTextbox"/>
michael@0:                             <textbox anonid="loginTextbox"/>
michael@0:                         </row>
michael@0: 
michael@0:                         <row anonid="password1Container" hidden="true" align="center">
michael@0:                             <label anonid="password1Label" value="&editfield1.label;" control="password1Textbox"/>
michael@0:                             <textbox anonid="password1Textbox" type="password"/>
michael@0:                         </row>
michael@0: 
michael@0:                         <row anonid="checkboxContainer" hidden="true">
michael@0:                             <spacer/>
michael@0:                             <checkbox anonid="checkbox"/>
michael@0:                         </row>
michael@0:                     </rows>
michael@0:                 </grid>
michael@0:                 <xbl:children/>
michael@0:                 <hbox class="buttonContainer">
michael@0: #ifdef XP_UNIX
michael@0:                     <button anonid="button3" hidden="true"/>
michael@0:                     <button anonid="button2" hidden="true"/>
michael@0:                     <spacer anonid="buttonSpacer" flex="1"/>
michael@0:                     <button anonid="button1" label="&cancelButton.label;"/>
michael@0:                     <button anonid="button0" label="&okButton.label;"/>
michael@0: #else
michael@0:                     <button anonid="button3" hidden="true"/>
michael@0:                     <spacer anonid="buttonSpacer" flex="1"/>
michael@0:                     <button anonid="button0" label="&okButton.label;"/>
michael@0:                     <button anonid="button2" hidden="true"/>
michael@0:                     <button anonid="button1" label="&cancelButton.label;"/>
michael@0: #endif
michael@0:                 </hbox>
michael@0:             </vbox>
michael@0:         </hbox>
michael@0:         <spacer flex="2"/>
michael@0:     </xbl:content>
michael@0: 
michael@0:     <implementation implements="nsIDOMEventListener">
michael@0:         <constructor>
michael@0:         <![CDATA[
michael@0:             let self = this;
michael@0:             function getElement(anonid) {
michael@0:                 return document.getAnonymousElementByAttribute(self, "anonid", anonid);
michael@0:             }
michael@0: 
michael@0:             this.ui = {
michael@0:                 prompt             : this,
michael@0:                 loginContainer     : getElement("loginContainer"),
michael@0:                 loginTextbox       : getElement("loginTextbox"),
michael@0:                 loginLabel         : getElement("loginLabel"),
michael@0:                 password1Container : getElement("password1Container"),
michael@0:                 password1Textbox   : getElement("password1Textbox"),
michael@0:                 password1Label     : getElement("password1Label"),
michael@0:                 infoBody           : getElement("info.body"),
michael@0:                 infoTitle          : getElement("info.title"),
michael@0:                 infoIcon           : null,
michael@0:                 checkbox           : getElement("checkbox"),
michael@0:                 checkboxContainer  : getElement("checkboxContainer"),
michael@0:                 button3            : getElement("button3"),
michael@0:                 button2            : getElement("button2"),
michael@0:                 button1            : getElement("button1"),
michael@0:                 button0            : getElement("button0"),
michael@0:                 // focusTarget (for BUTTON_DELAY_ENABLE) not yet supported
michael@0:             };
michael@0: 
michael@0:             this.ui.button0.addEventListener("command", this.onButtonClick.bind(this, 0), false);
michael@0:             this.ui.button1.addEventListener("command", this.onButtonClick.bind(this, 1), false);
michael@0:             this.ui.button2.addEventListener("command", this.onButtonClick.bind(this, 2), false);
michael@0:             this.ui.button3.addEventListener("command", this.onButtonClick.bind(this, 3), false);
michael@0:             // Anonymous wrapper used here because |Dialog| doesn't exist until init() is called!
michael@0:             this.ui.checkbox.addEventListener("command", function() { self.Dialog.onCheckbox(); } , false);
michael@0:             this.isLive = false;
michael@0:         ]]>
michael@0:         </constructor>
michael@0:         <destructor>
michael@0:         <![CDATA[
michael@0:             if (this.isLive) {
michael@0:                 this.abortPrompt();
michael@0:             }
michael@0:         ]]>
michael@0:         </destructor>
michael@0: 
michael@0:         <field name="ui"/>
michael@0:         <field name="args"/>
michael@0:         <field name="linkedTab"/>
michael@0:         <field name="onCloseCallback"/>
michael@0:         <field name="Dialog"/>
michael@0:         <field name="isLive"/>
michael@0:         <field name="availWidth"/>
michael@0:         <field name="availHeight"/>
michael@0:         <field name="minWidth"/>
michael@0:         <field name="minHeight"/>
michael@0: 
michael@0:         <method name="init">
michael@0:             <parameter name="args"/>
michael@0:             <parameter name="linkedTab"/>
michael@0:             <parameter name="onCloseCallback"/>
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 this.args = args;
michael@0:                 this.linkedTab = linkedTab;
michael@0:                 this.onCloseCallback = onCloseCallback;
michael@0: 
michael@0:                 if (args.enableDelay)
michael@0:                     throw "BUTTON_DELAY_ENABLE not yet supported for tab-modal prompts";
michael@0: 
michael@0:                 // We need to remove the prompt when the tab or browser window is closed or
michael@0:                 // the page navigates, else we never unwind the event loop and that's sad times.
michael@0:                 // Remember to cleanup in shutdownPrompt()!
michael@0:                 this.isLive = true;
michael@0:                 window.addEventListener("resize", this, false);
michael@0:                 window.addEventListener("unload", this, false);
michael@0:                 linkedTab.addEventListener("TabClose", this, false);
michael@0:                 // Note:
michael@0:                 // nsPrompter.js or in e10s mode browser-parent.js call abortPrompt,
michael@0:                 // when the domWindow, for which the prompt was created, generates
michael@0:                 // a "pagehide" event.
michael@0: 
michael@0:                 let tmp = {};
michael@0:                 Components.utils.import("resource://gre/modules/CommonDialog.jsm", tmp);
michael@0:                 this.Dialog = new tmp.CommonDialog(args, this.ui);
michael@0:                 this.Dialog.onLoad(null);
michael@0: 
michael@0:                 // Display the tabprompt title that shows the prompt origin when
michael@0:                 // the prompt origin is not the same as that of the top window.
michael@0:                 if (!args.showAlertOrigin)
michael@0:                     this.ui.infoTitle.removeAttribute("hidden");
michael@0: 
michael@0:                 // TODO: should unhide buttonSpacer on Windows when there are 4 buttons.
michael@0:                 //       Better yet, just drop support for 4-button dialogs. (bug 609510)
michael@0: 
michael@0:                 this.onResize();
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0: 
michael@0:         <method name="shutdownPrompt">
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 // remove our event listeners
michael@0:                 try {
michael@0:                     window.removeEventListener("resize", this, false);
michael@0:                     window.removeEventListener("unload", this, false);
michael@0:                     this.linkedTab.removeEventListener("TabClose", this, false);
michael@0:                 } catch(e) { }
michael@0:                 this.isLive = false;
michael@0:                 // invoke callback
michael@0:                 this.onCloseCallback();
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0: 
michael@0:         <method name="abortPrompt">
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 // Called from other code when the page changes.
michael@0:                 this.Dialog.abortPrompt();
michael@0:                 this.shutdownPrompt();
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0: 
michael@0:         <method name="handleEvent">
michael@0:             <parameter name="aEvent"/>
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 switch (aEvent.type) {
michael@0:                   case "resize":
michael@0:                     this.onResize();
michael@0:                     break;
michael@0:                   case "unload":
michael@0:                   case "TabClose":
michael@0:                     this.abortPrompt();
michael@0:                     break;
michael@0:                 }
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0: 
michael@0:         <method name="onResize">
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 let availWidth = this.clientWidth;
michael@0:                 let availHeight = this.clientHeight;
michael@0:                 if (availWidth == this.availWidth && availHeight == this.availHeight)
michael@0:                     return;
michael@0:                 this.availWidth = availWidth;
michael@0:                 this.availHeight = availHeight;
michael@0: 
michael@0:                 let self = this;
michael@0:                 function getElement(anonid) {
michael@0:                     return document.getAnonymousElementByAttribute(self, "anonid", anonid);
michael@0:                 }
michael@0:                 let main = getElement("mainContainer");
michael@0:                 let info = getElement("infoContainer");
michael@0:                 let body = this.ui.infoBody;
michael@0: 
michael@0:                 // cap prompt dimensions at 60% width and 60% height of content area
michael@0:                 if (!this.minWidth)
michael@0:                   this.minWidth = parseInt(window.getComputedStyle(main).minWidth);
michael@0:                 if (!this.minHeight)
michael@0:                   this.minHeight = parseInt(window.getComputedStyle(main).minHeight);
michael@0:                 let maxWidth = Math.max(Math.floor(availWidth * 0.6), this.minWidth) +
michael@0:                                info.clientWidth - main.clientWidth;
michael@0:                 let maxHeight = Math.max(Math.floor(availHeight * 0.6), this.minHeight) +
michael@0:                                 info.clientHeight - main.clientHeight;
michael@0:                 body.style.maxWidth = maxWidth + "px";
michael@0:                 info.style.overflow = info.style.width = info.style.height = "";
michael@0: 
michael@0:                 // when prompt text is too long, use scrollbars
michael@0:                 if (info.clientWidth > maxWidth) {
michael@0:                     info.style.overflow = "auto";
michael@0:                     info.style.width = maxWidth + "px";
michael@0:                 }
michael@0:                 if (info.clientHeight > maxHeight) {
michael@0:                     info.style.overflow = "auto";
michael@0:                     info.style.height = maxHeight + "px";
michael@0:                 }
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0: 
michael@0:         <method name="onButtonClick">
michael@0:             <parameter name="buttonNum"/>
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 this.Dialog["onButton" + buttonNum]();
michael@0:                 this.shutdownPrompt();
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0: 
michael@0:         <method name="onKeyAction">
michael@0:             <parameter name="action"/>
michael@0:             <parameter name="event"/>
michael@0:             <body>
michael@0:             <![CDATA[
michael@0:                 if (event.defaultPrevented)
michael@0:                     return;
michael@0: 
michael@0:                 event.stopPropagation();
michael@0:                 if (action == "default") {
michael@0:                     let bnum = this.args.defaultButtonNum || 0;
michael@0:                     let button = this.ui["button" + bnum];
michael@0:                     this.onButtonClick(bnum);
michael@0:                 } else { // action == "cancel"
michael@0:                     this.onButtonClick(1); // Cancel button
michael@0:                 }
michael@0:             ]]>
michael@0:             </body>
michael@0:         </method>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:         <!-- Based on dialog.xml handlers -->
michael@0:         <handler event="keypress" keycode="VK_RETURN"
michael@0:                  group="system" action="this.onKeyAction('default', event);"/>
michael@0:         <handler event="keypress" keycode="VK_ESCAPE"
michael@0:                  group="system" action="this.onKeyAction('cancel', event);"/>
michael@0: #ifdef XP_MACOSX
michael@0:         <handler event="keypress" key="." modifiers="meta"
michael@0:                  group="system" action="this.onKeyAction('cancel', event);"/>
michael@0: #endif
michael@0:         <handler event="focus" phase="capturing">
michael@0:             let bnum = this.args.defaultButtonNum || 0;
michael@0:             let defaultButton = this.ui["button" + bnum];
michael@0: 
michael@0: #ifdef XP_MACOSX
michael@0:             // On OS X, the default button always stays marked as such (until
michael@0:             // the entire prompt blurs).
michael@0:             defaultButton.setAttribute("default", true);
michael@0: #else
michael@0:             // On other platforms, the default button is only marked as such
michael@0:             // when no other button has focus. XUL buttons on not-OSX will
michael@0:             // react to pressing enter as a command, so you can't trigger the
michael@0:             // default without tabbing to it or something that isn't a button.
michael@0:             let focusedDefault = (event.originalTarget == defaultButton);
michael@0:             let someButtonFocused = event.originalTarget instanceof Ci.nsIDOMXULButtonElement;
michael@0:             defaultButton.setAttribute("default", focusedDefault || !someButtonFocused);
michael@0: #endif
michael@0:         </handler>
michael@0:         <handler event="blur">
michael@0:             // If focus shifted to somewhere else in the browser, don't make
michael@0:             // the default button look active.
michael@0:             let bnum = this.args.defaultButtonNum || 0;
michael@0:             let button = this.ui["button" + bnum];
michael@0:             button.setAttribute("default", false);
michael@0:         </handler>
michael@0:     </handlers>
michael@0: 
michael@0:   </binding>
michael@0: </bindings>