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: 
michael@0: <bindings id="tabBindings"
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="tab-base">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/tabbox.css"/>
michael@0:     </resources>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="tabbox"
michael@0:            extends="chrome://global/content/bindings/tabbox.xml#tab-base">
michael@0:     <implementation implements="nsIDOMEventListener">
michael@0:       <property name="handleCtrlTab">
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           this.setAttribute("handleCtrlTab", val);
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           return (this.getAttribute("handleCtrlTab") != "false");
michael@0:         ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0:       
michael@0:       <property name="handleCtrlPageUpDown">
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           this.setAttribute("handleCtrlPageUpDown", val);
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           return (this.getAttribute("handleCtrlPageUpDown") != "false");
michael@0:         ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <field name="_handleMetaAltArrows" readonly="true">
michael@0: #ifdef XP_MACOSX
michael@0:         true
michael@0: #else
michael@0:         false
michael@0: #endif
michael@0:       </field>
michael@0: 
michael@0:       <!-- _tabs and _tabpanels are deprecated, they exist only for
michael@0:            backwards compatibility. -->
michael@0:       <property name="_tabs" readonly="true" onget="return this.tabs;"/>
michael@0:       <property name="_tabpanels" readonly="true" onget="return this.tabpanels;"/>
michael@0: 
michael@0:       <property name="tabs" readonly="true">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           return this.getElementsByTagNameNS(
michael@0:               "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
michael@0:               "tabs").item(0);
michael@0:         ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="tabpanels" readonly="true">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           return this.getElementsByTagNameNS(
michael@0:               "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
michael@0:               "tabpanels").item(0);
michael@0:         ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0:       
michael@0:       <property name="selectedIndex">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var tabs = this.tabs;
michael@0:           return tabs ? tabs.selectedIndex : -1;
michael@0:         ]]>
michael@0:         </getter>
michael@0: 
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           var tabs = this.tabs;
michael@0:           if (tabs)
michael@0:             tabs.selectedIndex = val;
michael@0:           this.setAttribute("selectedIndex", val);
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="selectedTab">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var tabs = this.tabs;
michael@0:           return tabs && tabs.selectedItem;
michael@0:         ]]>
michael@0:         </getter>
michael@0: 
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val) {
michael@0:             var tabs = this.tabs;
michael@0:             if (tabs)
michael@0:               tabs.selectedItem = val;
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="selectedPanel">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var tabpanels = this.tabpanels;
michael@0:           return tabpanels && tabpanels.selectedPanel;
michael@0:         ]]>
michael@0:         </getter>
michael@0: 
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val) {
michael@0:             var tabpanels = this.tabpanels;
michael@0:             if (tabpanels)
michael@0:               tabpanels.selectedPanel = val;
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="handleEvent">
michael@0:         <parameter name="event"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (!event.isTrusted) {
michael@0:             // Don't let untrusted events mess with tabs.
michael@0:             return;
michael@0:           }
michael@0: 
michael@0:           switch (event.keyCode) {
michael@0:             case event.DOM_VK_TAB:
michael@0:               if (event.ctrlKey && !event.altKey && !event.metaKey)
michael@0:                 if (this.tabs && this.handleCtrlTab) {
michael@0:                   this.tabs.advanceSelectedTab(event.shiftKey ? -1 : 1, true);
michael@0:                   event.stopPropagation();
michael@0:                   event.preventDefault();
michael@0:                 }
michael@0:               break;
michael@0:             case event.DOM_VK_PAGE_UP:
michael@0:               if (event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey)
michael@0:                 if (this.tabs && this.handleCtrlPageUpDown) {
michael@0:                   this.tabs.advanceSelectedTab(-1, true);
michael@0:                   event.stopPropagation();
michael@0:                   event.preventDefault();
michael@0:                 }
michael@0:               break;
michael@0:             case event.DOM_VK_PAGE_DOWN:
michael@0:               if (event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey)
michael@0:                 if (this.tabs && this.handleCtrlPageUpDown) {
michael@0:                   this.tabs.advanceSelectedTab(1, true);
michael@0:                   event.stopPropagation();
michael@0:                   event.preventDefault();
michael@0:                 }
michael@0:               break;
michael@0:             case event.DOM_VK_LEFT:
michael@0:               if (event.metaKey && event.altKey && !event.shiftKey && !event.ctrlKey)
michael@0:                 if (this.tabs && this._handleMetaAltArrows) {
michael@0:                   var offset = window.getComputedStyle(this, "")
michael@0:                                      .direction == "ltr" ? -1 : 1;
michael@0:                   this.tabs.advanceSelectedTab(offset, true);
michael@0:                   event.stopPropagation();
michael@0:                   event.preventDefault();
michael@0:                 }
michael@0:               break;
michael@0:             case event.DOM_VK_RIGHT:
michael@0:               if (event.metaKey && event.altKey && !event.shiftKey && !event.ctrlKey)
michael@0:                 if (this.tabs && this._handleMetaAltArrows) {
michael@0:                   var offset = window.getComputedStyle(this, "")
michael@0:                                      .direction == "ltr" ? 1 : -1;
michael@0:                   this.tabs.advanceSelectedTab(offset, true);
michael@0:                   event.stopPropagation();
michael@0:                   event.preventDefault();
michael@0:                 }
michael@0:               break;
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <field name="_eventNode">this</field>
michael@0: 
michael@0:       <property name="eventNode" onget="return this._eventNode;">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:             if (val != this._eventNode) {
michael@0:               val.addEventListener("keypress", this, false);
michael@0:               this._eventNode.removeEventListener("keypress", this, false);
michael@0:               this._eventNode = val;
michael@0:             }
michael@0:             return val;
michael@0:           ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <constructor>
michael@0:         switch (this.getAttribute("eventnode")) {
michael@0:           case "parent": this._eventNode = this.parentNode; break;
michael@0:           case "window": this._eventNode = window; break;
michael@0:           case "document": this._eventNode = document; break;
michael@0:         }
michael@0:         this._eventNode.addEventListener("keypress", this, false);
michael@0:       </constructor>
michael@0: 
michael@0:       <destructor>
michael@0:         this._eventNode.removeEventListener("keypress", this, false);
michael@0:       </destructor>
michael@0:     </implementation>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="tabs" role="xul:tabs"
michael@0:            extends="chrome://global/content/bindings/general.xml#basecontrol">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/tabbox.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content>
michael@0:       <xul:spacer class="tabs-left"/>
michael@0:       <children/>
michael@0:       <xul:spacer class="tabs-right" flex="1"/>
michael@0:     </content>
michael@0:     
michael@0:     <implementation implements="nsIDOMXULSelectControlElement, nsIDOMXULRelatedElement">
michael@0:       <constructor>
michael@0:       <![CDATA[
michael@0:         // first and last tabs need to be able to have unique styles
michael@0:         // and also need to select first tab on startup.
michael@0:         if (this.firstChild)
michael@0:           this.firstChild.setAttribute("first-tab", "true");
michael@0:         if (this.lastChild)
michael@0:           this.lastChild.setAttribute("last-tab", "true");
michael@0: 
michael@0:         if (!this.hasAttribute("orient"))
michael@0:           this.setAttribute("orient", "horizontal");
michael@0: 
michael@0:         if (this.tabbox && this.tabbox.hasAttribute("selectedIndex")) {
michael@0:           let selectedIndex = parseInt(this.tabbox.getAttribute("selectedIndex"));
michael@0:           this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
michael@0:           return;
michael@0:         }
michael@0: 
michael@0:         var children = this.childNodes;
michael@0:         var length = children.length;
michael@0:         for (var i = 0; i < length; i++) {
michael@0:           if (children[i].getAttribute("selected") == "true") {
michael@0:             this.selectedIndex = i;
michael@0:             return;
michael@0:           }
michael@0:         }
michael@0: 
michael@0:         var value = this.value;
michael@0:         if (value)
michael@0:           this.value = value;
michael@0:         else
michael@0:           this.selectedIndex = 0;
michael@0:       ]]>
michael@0:       </constructor>
michael@0: 
michael@0:       <!-- nsIDOMXULRelatedElement -->
michael@0:       <method name="getRelatedElement">
michael@0:         <parameter name="aTabElm"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (!aTabElm)
michael@0:             return null;
michael@0: 
michael@0:           let tabboxElm = this.tabbox;
michael@0:           if (!tabboxElm)
michael@0:             return null;
michael@0: 
michael@0:           let tabpanelsElm = tabboxElm.tabpanels;
michael@0:           if (!tabpanelsElm)
michael@0:             return null;
michael@0: 
michael@0:           // Get linked tab panel by 'linkedpanel' attribute on the given tab
michael@0:           // element.
michael@0:           let linkedPanelElm = null;
michael@0: 
michael@0:           let linkedPanelId = aTabElm.linkedPanel;
michael@0:           if (linkedPanelId) {
michael@0:             let ownerDoc = this.ownerDocument;
michael@0: 
michael@0:             // XXX bug 565858: if XUL tab element is anonymous element then
michael@0:             // suppose linked tab panel is hosted within the same XBL binding
michael@0:             // and search it by ID attribute inside an anonymous content of
michael@0:             // the binding. This is not robust assumption since tab elements may
michael@0:             // live outside a tabbox element so that for example tab elements
michael@0:             // can be explicit content but tab panels can be anonymous.
michael@0: 
michael@0:             let bindingParent = ownerDoc.getBindingParent(aTabElm);
michael@0:             if (bindingParent)
michael@0:               return ownerDoc.getAnonymousElementByAttribute(bindingParent,
michael@0:                                                              "id",
michael@0:                                                              linkedPanelId);
michael@0: 
michael@0:             return ownerDoc.getElementById(linkedPanelId);
michael@0:           }
michael@0: 
michael@0:           // otherwise linked tabpanel element has the same index as the given
michael@0:           // tab element.
michael@0:           let tabElmIdx = this.getIndexOfItem(aTabElm);
michael@0:           return tabpanelsElm.childNodes[tabElmIdx];
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- nsIDOMXULSelectControlElement -->
michael@0:       <property name="itemCount" readonly="true"
michael@0:                 onget="return this.childNodes.length"/>
michael@0: 
michael@0:       <property name="value" onget="return this.getAttribute('value');">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:             this.setAttribute("value", val);
michael@0:             var children = this.childNodes;
michael@0:             for (var c = children.length - 1; c >= 0; c--) {
michael@0:               if (children[c].value == val) {
michael@0:                 this.selectedIndex = c;
michael@0:                 break;
michael@0:               }
michael@0:             }
michael@0:             return val;
michael@0:           ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <field name="tabbox" readonly="true"><![CDATA[
michael@0:         var parent = this.parentNode;
michael@0:         while (parent) {
michael@0:           if (parent.localName == "tabbox")
michael@0:             break;
michael@0:           parent = parent.parentNode;
michael@0:         }
michael@0:         parent;
michael@0:       ]]></field>
michael@0: 
michael@0:       <!-- _tabbox is deprecated, it exists only for backwards compatibility. -->
michael@0:       <field name="_tabbox" readonly="true"><![CDATA[
michael@0:         this.tabbox;
michael@0:       ]]></field>
michael@0: 
michael@0:       <property name="selectedIndex">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           const tabs = this.childNodes;
michael@0:           for (var i = 0; i < tabs.length; i++) {
michael@0:             if (tabs[i].selected)
michael@0:               return i;
michael@0:           }
michael@0:           return -1;
michael@0:         ]]>
michael@0:         </getter>
michael@0:         
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           var tab = this.getItemAtIndex(val);
michael@0:           if (tab) {
michael@0:             var alreadySelected = tab.selected;
michael@0: 
michael@0:             Array.forEach(this.childNodes, function (aTab) {
michael@0:               if (aTab.selected && aTab != tab)
michael@0:                 aTab._selected = false;
michael@0:             });
michael@0:             tab._selected = true;
michael@0: 
michael@0:             this.setAttribute("value", tab.value);
michael@0: 
michael@0:             let linkedPanel = this.getRelatedElement(tab);
michael@0:             if (linkedPanel) {
michael@0:               this.tabbox.setAttribute("selectedIndex", val);
michael@0: 
michael@0:               // This will cause an onselect event to fire for the tabpanel
michael@0:               // element.
michael@0:               this.tabbox.tabpanels.selectedPanel = linkedPanel;
michael@0:             }
michael@0: 
michael@0:             if (!alreadySelected) {
michael@0:               // Fire an onselect event for the tabs element.
michael@0:               var event = document.createEvent('Events');
michael@0:               event.initEvent('select', true, true);
michael@0:               this.dispatchEvent(event);
michael@0:             }
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="selectedItem">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           const tabs = this.childNodes;
michael@0:           for (var i = 0; i < tabs.length; i++) {
michael@0:             if (tabs[i].selected)
michael@0:               return tabs[i];
michael@0:           }
michael@0:           return null;
michael@0:         ]]>
michael@0:         </getter>
michael@0: 
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val && !val.selected)
michael@0:             // The selectedIndex setter ignores invalid values
michael@0:             // such as -1 if |val| isn't one of our child nodes.
michael@0:             this.selectedIndex = this.getIndexOfItem(val);
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="getIndexOfItem">
michael@0:         <parameter name="item"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           return Array.indexOf(this.childNodes, item);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="getItemAtIndex">
michael@0:         <parameter name="index"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           return this.childNodes.item(index);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_selectNewTab">
michael@0:         <parameter name="aNewTab"/>
michael@0:         <parameter name="aFallbackDir"/>
michael@0:         <parameter name="aWrap"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var requestedTab = aNewTab;
michael@0:           while (aNewTab.hidden || aNewTab.disabled || !this._canAdvanceToTab(aNewTab)) {
michael@0:             aNewTab = aFallbackDir == -1 ? aNewTab.previousSibling : aNewTab.nextSibling;
michael@0:             if (!aNewTab && aWrap)
michael@0:               aNewTab = aFallbackDir == -1 ? this.childNodes[this.childNodes.length - 1] :
michael@0:                                              this.childNodes[0];
michael@0:             if (!aNewTab || aNewTab == requestedTab)
michael@0:               return;
michael@0:           }
michael@0: 
michael@0:           var isTabFocused = false;
michael@0:           try {
michael@0:             isTabFocused =
michael@0:               (document.commandDispatcher.focusedElement == this.selectedItem);
michael@0:           } catch (e) {}
michael@0:           this.selectedItem = aNewTab;
michael@0:           if (isTabFocused) {
michael@0:             aNewTab.focus();
michael@0:           }
michael@0:           else if (this.getAttribute("setfocus") != "false") {
michael@0:             let selectedPanel = this.tabbox.selectedPanel;
michael@0:             document.commandDispatcher.advanceFocusIntoSubtree(selectedPanel);
michael@0: 
michael@0:             // Make sure that the focus doesn't move outside the tabbox
michael@0:             if (this.tabbox) {
michael@0:               try {
michael@0:                 let el = document.commandDispatcher.focusedElement;
michael@0:                 while (el && el != this.tabbox.tabpanels) {
michael@0:                   if (el == this.tabbox || el == selectedPanel)
michael@0:                     return;
michael@0:                   el = el.parentNode;
michael@0:                 }
michael@0:                 aNewTab.focus();
michael@0:               } catch(e) {
michael@0:               }
michael@0:             }
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_canAdvanceToTab">
michael@0:         <parameter name="aTab"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           return true;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="advanceSelectedTab">
michael@0:         <parameter name="aDir"/>
michael@0:         <parameter name="aWrap"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var startTab = this.selectedItem;
michael@0:           var next = startTab[aDir == -1 ? "previousSibling" : "nextSibling"];
michael@0:           if (!next && aWrap) {
michael@0:             next = aDir == -1 ? this.childNodes[this.childNodes.length - 1] :
michael@0:                                 this.childNodes[0];
michael@0:           }
michael@0:           if (next && next != startTab) {
michael@0:             this._selectNewTab(next, aDir, aWrap);
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="appendItem">
michael@0:         <parameter name="label"/>
michael@0:         <parameter name="value"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
michael@0:           var tab = document.createElementNS(XULNS, "tab");
michael@0:           tab.setAttribute("label", label);
michael@0:           tab.setAttribute("value", value);
michael@0:           this.appendChild(tab);
michael@0:           return tab;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="insertItemAt">
michael@0:         <parameter name="index"/>
michael@0:         <parameter name="label"/>
michael@0:         <parameter name="value"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
michael@0:           var tab = document.createElementNS(XULNS, "tab");
michael@0:           tab.setAttribute("label", label);
michael@0:           tab.setAttribute("value", value);
michael@0:           var before = this.getItemAtIndex(index);
michael@0:           if (before)
michael@0:             this.insertBefore(tab, before);
michael@0:           else
michael@0:             this.appendChild(tab);
michael@0:           return tab;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="removeItemAt">
michael@0:         <parameter name="index"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var remove = this.getItemAtIndex(index);
michael@0:           if (remove)
michael@0:             this.removeChild(remove);
michael@0:           return remove;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:     </implementation>
michael@0: 
michael@0: #ifdef MOZ_WIDGET_GTK
michael@0:     <handlers>
michael@0:       <handler event="DOMMouseScroll">
michael@0:       <![CDATA[
michael@0:         if (event.detail > 0)
michael@0:           this.advanceSelectedTab(1, false);
michael@0:         else
michael@0:           this.advanceSelectedTab(-1, false);
michael@0: 
michael@0:         event.stopPropagation();
michael@0:       ]]>
michael@0:       </handler>
michael@0:     </handlers>
michael@0: #endif
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="tabpanels" role="xul:tabpanels"
michael@0:            extends="chrome://global/content/bindings/tabbox.xml#tab-base">
michael@0:     <implementation implements="nsIDOMXULRelatedElement">
michael@0:       <!-- nsIDOMXULRelatedElement -->
michael@0:       <method name="getRelatedElement">
michael@0:         <parameter name="aTabPanelElm"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (!aTabPanelElm)
michael@0:             return null;
michael@0: 
michael@0:           let tabboxElm = this.tabbox;
michael@0:           if (!tabboxElm)
michael@0:             return null;
michael@0: 
michael@0:           let tabsElm = tabboxElm.tabs;
michael@0:           if (!tabsElm)
michael@0:             return null;
michael@0: 
michael@0:           // Return tab element having 'linkedpanel' attribute equal to the id
michael@0:           // of the tab panel or the same index as the tab panel element.
michael@0:           let tabpanelIdx = Array.indexOf(this.childNodes, aTabPanelElm);
michael@0:           if (tabpanelIdx == -1)
michael@0:             return null;
michael@0: 
michael@0:           let tabElms = tabsElm.childNodes;
michael@0:           let tabElmFromIndex = tabElms[tabpanelIdx];
michael@0: 
michael@0:           let tabpanelId = aTabPanelElm.id;
michael@0:           if (tabpanelId) {
michael@0:             for (let idx = 0; idx < tabElms.length; idx++) {
michael@0:               var tabElm = tabElms[idx];
michael@0:               if (tabElm.linkedPanel == tabpanelId)
michael@0:                 return tabElm;
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           return tabElmFromIndex;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- public -->
michael@0:       <field name="tabbox" readonly="true"><![CDATA[
michael@0:         var parent = this.parentNode;
michael@0:         while (parent) {
michael@0:           if (parent.localName == "tabbox")
michael@0:             break;
michael@0:           parent = parent.parentNode;
michael@0:         }
michael@0:         parent;
michael@0:       ]]></field>
michael@0: 
michael@0:       <field name="_selectedPanel">this.childNodes.item(this.selectedIndex)</field>
michael@0: 
michael@0:       <property name="selectedIndex">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var indexStr = this.getAttribute("selectedIndex");
michael@0:           return indexStr ? parseInt(indexStr) : -1;
michael@0:         ]]>
michael@0:         </getter>
michael@0: 
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val < 0 || val >= this.childNodes.length)
michael@0:             return val;
michael@0:           var panel = this._selectedPanel;
michael@0:           this._selectedPanel = this.childNodes[val];
michael@0:           this.setAttribute("selectedIndex", val);
michael@0:           if (this._selectedPanel != panel) {
michael@0:             var event = document.createEvent("Events");
michael@0:             event.initEvent("select", true, true);
michael@0:             this.dispatchEvent(event);
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="selectedPanel">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:             return this._selectedPanel;
michael@0:           ]]>
michael@0:         </getter>
michael@0: 
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:             var selectedIndex = -1;
michael@0:             for (var panel = val; panel != null; panel = panel.previousSibling)
michael@0:               ++selectedIndex;
michael@0:             this.selectedIndex = selectedIndex;
michael@0:             return val;
michael@0:           ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0:     </implementation>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="tab" display="xul:button" role="xul:tab"
michael@0:            extends="chrome://global/content/bindings/general.xml#control-item">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/tabbox.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content>
michael@0:       <xul:hbox class="tab-middle box-inherit" xbl:inherits="align,dir,pack,orient,selected" flex="1">
michael@0:         <xul:image class="tab-icon"
michael@0:                    xbl:inherits="validate,src=image"
michael@0:                    role="presentation"/>
michael@0:         <xul:label class="tab-text"
michael@0:                    xbl:inherits="value=label,accesskey,crop,disabled"
michael@0:                    flex="1"
michael@0:                    role="presentation"/>
michael@0:       </xul:hbox>
michael@0:     </content>
michael@0: 
michael@0:     <implementation implements="nsIDOMXULSelectControlItemElement">
michael@0:       <property name="control" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:             var parent = this.parentNode;
michael@0:             if (parent instanceof Components.interfaces.nsIDOMXULSelectControlElement)
michael@0:               return parent;
michael@0:             return null;
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="selected" readonly="true"
michael@0:                 onget="return this.getAttribute('selected') == 'true';"/>
michael@0: 
michael@0:       <property name="_selected">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:           if (val)
michael@0:             this.setAttribute("selected", "true");
michael@0:           else
michael@0:             this.removeAttribute("selected");
michael@0: 
michael@0:           if (this.previousSibling && this.previousSibling.localName == "tab") {
michael@0:             if (val)
michael@0:               this.previousSibling.setAttribute("beforeselected", "true");
michael@0:             else
michael@0:               this.previousSibling.removeAttribute("beforeselected");
michael@0:             this.removeAttribute("first-tab");
michael@0:           }
michael@0:           else
michael@0:             this.setAttribute("first-tab", "true");
michael@0: 
michael@0:           if (this.nextSibling && this.nextSibling.localName == "tab") {
michael@0:             if (val)
michael@0:               this.nextSibling.setAttribute("afterselected", "true");
michael@0:             else
michael@0:               this.nextSibling.removeAttribute("afterselected");
michael@0:             this.removeAttribute("last-tab");
michael@0:           }
michael@0:           else
michael@0:             this.setAttribute("last-tab", "true");
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="linkedPanel" onget="return this.getAttribute('linkedpanel')"
michael@0:                                    onset="this.setAttribute('linkedpanel', val); return val;"/>
michael@0: 
michael@0:       <field name="arrowKeysShouldWrap" readonly="true">
michael@0: #ifdef XP_MACOSX
michael@0:         true
michael@0: #else
michael@0:         false
michael@0: #endif
michael@0:       </field>
michael@0:       <field name="TelemetryStopwatch" readonly="true">
michael@0:         let tmp = {};
michael@0:         Cu.import("resource://gre/modules/TelemetryStopwatch.jsm", tmp);
michael@0:         tmp.TelemetryStopwatch;
michael@0:       </field>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="mousedown" button="0">
michael@0:       <![CDATA[
michael@0:         if (this.disabled)
michael@0:           return;
michael@0: 
michael@0:         if (this != this.parentNode.selectedItem) { // Not selected yet
michael@0:           let stopwatchid = this.parentNode.getAttribute("stopwatchid");
michael@0:           if (stopwatchid) {
michael@0:             this.TelemetryStopwatch.start(stopwatchid);
michael@0:           }
michael@0: 
michael@0:           // Call this before setting the 'ignorefocus' attribute because this
michael@0:           // will pass on focus if the formerly selected tab was focused as well.
michael@0:           this.parentNode._selectNewTab(this);
michael@0: 
michael@0:           var isTabFocused = false;
michael@0:           try {
michael@0:             isTabFocused = (document.commandDispatcher.focusedElement == this);
michael@0:           } catch (e) {}
michael@0: 
michael@0:           // Set '-moz-user-focus' to 'ignore' so that PostHandleEvent() can't
michael@0:           // focus the tab; we only want tabs to be focusable by the mouse if
michael@0:           // they are already focused. After a short timeout we'll reset
michael@0:           // '-moz-user-focus' so that tabs can be focused by keyboard again.
michael@0:           if (!isTabFocused) {
michael@0:             this.setAttribute("ignorefocus", "true");
michael@0:             setTimeout(function (tab) tab.removeAttribute("ignorefocus"), 0, this);
michael@0:           }
michael@0: 
michael@0:           if (stopwatchid) {
michael@0:             this.TelemetryStopwatch.finish(stopwatchid);
michael@0:           }
michael@0:         }
michael@0:         // Otherwise this tab is already selected and we will fall
michael@0:         // through to mousedown behavior which sets focus on the current tab,
michael@0:         // Only a click on an already selected tab should focus the tab itself.
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_LEFT">
michael@0:       <![CDATA[
michael@0:         var direction = window.getComputedStyle(this.parentNode, null).direction;
michael@0:         this.parentNode.advanceSelectedTab(direction == 'ltr' ? -1 : 1, this.arrowKeysShouldWrap);
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_RIGHT">
michael@0:       <![CDATA[
michael@0:         var direction = window.getComputedStyle(this.parentNode, null).direction;
michael@0:         this.parentNode.advanceSelectedTab(direction == 'ltr' ? 1 : -1, this.arrowKeysShouldWrap);
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_UP">
michael@0:       <![CDATA[
michael@0:         this.parentNode.advanceSelectedTab(-1, this.arrowKeysShouldWrap);
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_DOWN">
michael@0:       <![CDATA[
michael@0:         this.parentNode.advanceSelectedTab(1, this.arrowKeysShouldWrap);
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_HOME">
michael@0:       <![CDATA[
michael@0:         this.parentNode._selectNewTab(this.parentNode.childNodes[0]);
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_END">
michael@0:       <![CDATA[
michael@0:         var tabs = this.parentNode.childNodes;
michael@0:         this.parentNode._selectNewTab(tabs[tabs.length - 1], -1);
michael@0:       ]]>
michael@0:       </handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0: </bindings>
michael@0: