toolkit/content/widgets/tabbox.xml
author Dão Gottwald <dao@mozilla.com>
Wed, 09 Jan 2019 14:38:42 +0000
changeset 453053 52bc1477d801eebf61511e0071edc949dcdc1a36
parent 449759 0c7a54d4cc426d989d5759f962c8c0af737d5a5b
child 469804 2a745d4407f448ff7d6d020d7dd4aeb32f4fb139
permissions -rw-r--r--
Bug 1512493 - Make switching tabs by scrolling pref-controlled and off by default. r=stransky Differential Revision: https://phabricator.services.mozilla.com/D16021

<?xml version="1.0"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->


<bindings id="tabBindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xbl="http://www.mozilla.org/xbl">
  <binding id="tabs"
           extends="chrome://global/content/bindings/general.xml#basecontrol">
    <content>
      <xul:spacer class="tabs-left"/>
      <children/>
      <xul:spacer class="tabs-right" flex="1"/>
    </content>

    <implementation implements="nsIDOMXULSelectControlElement, nsIDOMXULRelatedElement">
      <constructor>
      <![CDATA[

        if (!this.hasAttribute("orient"))
          this.setAttribute("orient", "horizontal");

        if (this.tabbox && this.tabbox.hasAttribute("selectedIndex")) {
          let selectedIndex = parseInt(this.tabbox.getAttribute("selectedIndex"));
          this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
          return;
        }

        var children = this.children;
        var length = children.length;
        for (var i = 0; i < length; i++) {
          if (children[i].getAttribute("selected") == "true") {
            this.selectedIndex = i;
            return;
          }
        }

        var value = this.value;
        if (value)
          this.value = value;
        else
          this.selectedIndex = 0;
      ]]>
      </constructor>

      <!-- nsIDOMXULRelatedElement -->
      <method name="getRelatedElement">
        <parameter name="aTabElm"/>
        <body>
        <![CDATA[
          if (!aTabElm)
            return null;

          let tabboxElm = this.tabbox;
          if (!tabboxElm)
            return null;

          let tabpanelsElm = tabboxElm.tabpanels;
          if (!tabpanelsElm)
            return null;

          // Get linked tab panel by 'linkedpanel' attribute on the given tab
          // element.
          let linkedPanelId = aTabElm.linkedPanel;
          if (linkedPanelId) {
            let ownerDoc = this.ownerDocument;

            // XXX bug 565858: if XUL tab element is anonymous element then
            // suppose linked tab panel is hosted within the same XBL binding
            // and search it by ID attribute inside an anonymous content of
            // the binding. This is not robust assumption since tab elements may
            // live outside a tabbox element so that for example tab elements
            // can be explicit content but tab panels can be anonymous.

            let bindingParent = ownerDoc.getBindingParent(aTabElm);
            if (bindingParent)
              return ownerDoc.getAnonymousElementByAttribute(bindingParent,
                                                             "id",
                                                             linkedPanelId);

            return ownerDoc.getElementById(linkedPanelId);
          }

          // otherwise linked tabpanel element has the same index as the given
          // tab element.
          let tabElmIdx = this.getIndexOfItem(aTabElm);
          return tabpanelsElm.children[tabElmIdx];
        ]]>
        </body>
      </method>

      <!-- nsIDOMXULSelectControlElement -->
      <property name="itemCount" readonly="true"
                onget="return this.children.length"/>

      <property name="value" onget="return this.getAttribute('value');">
        <setter>
          <![CDATA[
            this.setAttribute("value", val);
            var children = this.children;
            for (var c = children.length - 1; c >= 0; c--) {
              if (children[c].value == val) {
                this.selectedIndex = c;
                break;
              }
            }
            return val;
          ]]>
        </setter>
      </property>

      <field name="_tabbox">null</field>
      <property name="tabbox" readonly="true">
        <getter><![CDATA[
          // Memoize the result in a field rather than replacing this property,
          // so that it can be reset along with the binding.
          if (this._tabbox) {
            return this._tabbox;
          }

          let parent = this.parentNode;
          while (parent) {
            if (parent.localName == "tabbox") {
              break;
            }
            parent = parent.parentNode;
          }

          return this._tabbox = parent;
        ]]></getter>
      </property>

      <!-- _tabbox is deprecated, it exists only for backwards compatibility. -->
      <field name="_tabbox" readonly="true"><![CDATA[
        this.tabbox;
      ]]></field>

      <field name="_prefService" readonly="true"><![CDATA[
        Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
      ]]></field>

      <property name="selectedIndex">
        <getter>
        <![CDATA[
          const tabs = this.children;
          for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].selected)
              return i;
          }
          return -1;
        ]]>
        </getter>

        <setter>
        <![CDATA[
          var tab = this.getItemAtIndex(val);
          if (tab) {
            Array.forEach(this.children, function(aTab) {
              if (aTab.selected && aTab != tab)
                aTab._selected = false;
            });
            tab._selected = true;

            this.setAttribute("value", tab.value);

            let linkedPanel = this.getRelatedElement(tab);
            if (linkedPanel) {
              this.tabbox.setAttribute("selectedIndex", val);

              // This will cause an onselect event to fire for the tabpanel
              // element.
              this.tabbox.tabpanels.selectedPanel = linkedPanel;
            }
          }
          return val;
        ]]>
        </setter>
      </property>

      <property name="selectedItem">
        <getter>
        <![CDATA[
          const tabs = this.children;
          for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].selected)
              return tabs[i];
          }
          return null;
        ]]>
        </getter>

        <setter>
        <![CDATA[
          if (val && !val.selected)
            // The selectedIndex setter ignores invalid values
            // such as -1 if |val| isn't one of our child nodes.
            this.selectedIndex = this.getIndexOfItem(val);
          return val;
        ]]>
        </setter>
      </property>

      <field name="ACTIVE_DESCENDANT_ID" readonly="true"><![CDATA[
        "keyboard-focused-tab-" + Math.trunc(Math.random() * 1000000);
      ]]></field>

      <property name="ariaFocusedIndex" readonly="true">
        <getter>
        <![CDATA[
          const tabs = this.children;
          for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].id == this.ACTIVE_DESCENDANT_ID)
              return i;
          }
          return -1;
        ]]>
        </getter>
      </property>

      <property name="ariaFocusedItem">
        <getter>
        <![CDATA[
          return document.getElementById(this.ACTIVE_DESCENDANT_ID);
        ]]>
        </getter>

        <setter>
        <![CDATA[
          let setNewItem = val && this.getIndexOfItem(val) != -1;
          let clearExistingItem = this.ariaFocusedItem && (!val || setNewItem);
          if (clearExistingItem) {
            let ariaFocusedItem = this.ariaFocusedItem;
            ariaFocusedItem.classList.remove("keyboard-focused-tab");
            ariaFocusedItem.id = "";
            this.selectedItem.removeAttribute("aria-activedescendant");
          }

          if (setNewItem) {
            this.ariaFocusedItem = null;
            val.id = this.ACTIVE_DESCENDANT_ID;
            val.classList.add("keyboard-focused-tab");
            this.selectedItem.setAttribute("aria-activedescendant", this.ACTIVE_DESCENDANT_ID);
          }

          return val;
        ]]>
        </setter>
      </property>

      <method name="getIndexOfItem">
        <parameter name="item"/>
        <body>
        <![CDATA[
          return Array.indexOf(this.children, item);
        ]]>
        </body>
      </method>

      <method name="getItemAtIndex">
        <parameter name="index"/>
        <body>
        <![CDATA[
          return this.children.item(index);
        ]]>
        </body>
      </method>

      <method name="_selectNewTab">
        <parameter name="aNewTab"/>
        <parameter name="aFallbackDir"/>
        <parameter name="aWrap"/>
        <body>
        <![CDATA[
          this.ariaFocusedItem = null;

          var requestedTab = aNewTab;
          while (aNewTab.hidden || aNewTab.disabled || !this._canAdvanceToTab(aNewTab)) {
            aNewTab = aFallbackDir == -1 ? aNewTab.previousElementSibling : aNewTab.nextElementSibling;
            if (!aNewTab && aWrap)
              aNewTab = aFallbackDir == -1 ? this.children[this.children.length - 1] :
                                             this.children[0];
            if (!aNewTab || aNewTab == requestedTab)
              return;
          }

          var isTabFocused = false;
          try {
            isTabFocused =
              (document.commandDispatcher.focusedElement == this.selectedItem);
          } catch (e) {}
          this.selectedItem = aNewTab;
          if (isTabFocused) {
            aNewTab.focus();
          } else if (this.getAttribute("setfocus") != "false") {
            let selectedPanel = this.tabbox.selectedPanel;
            document.commandDispatcher.advanceFocusIntoSubtree(selectedPanel);

            // Make sure that the focus doesn't move outside the tabbox
            if (this.tabbox) {
              try {
                let el = document.commandDispatcher.focusedElement;
                while (el && el != this.tabbox.tabpanels) {
                  if (el == this.tabbox || el == selectedPanel)
                    return;
                  el = el.parentNode;
                }
                aNewTab.focus();
              } catch (e) {
              }
            }
          }
        ]]>
        </body>
      </method>

      <method name="_canAdvanceToTab">
        <parameter name="aTab"/>
        <body>
        <![CDATA[
          return true;
        ]]>
        </body>
      </method>

      <method name="advanceSelectedTab">
        <parameter name="aDir"/>
        <parameter name="aWrap"/>
        <body>
        <![CDATA[
          var startTab = this.ariaFocusedItem || this.selectedItem;
          var next = startTab[(aDir == -1 ? "previous" : "next") + "ElementSibling"];
          if (!next && aWrap) {
            next = aDir == -1 ? this.children[this.children.length - 1] :
                                this.children[0];
          }
          if (next && next != startTab) {
            this._selectNewTab(next, aDir, aWrap);
          }
        ]]>
        </body>
      </method>

      <method name="appendItem">
        <parameter name="label"/>
        <parameter name="value"/>
        <body>
        <![CDATA[
          var tab = document.createXULElement("tab");
          tab.setAttribute("label", label);
          tab.setAttribute("value", value);
          this.appendChild(tab);
          return tab;
        ]]>
        </body>
      </method>
    </implementation>

    <handlers>
      <handler event="DOMMouseScroll">
      <![CDATA[
        if (this._prefService.getBoolPref("toolkit.tabbox.switchByScrolling")) {
          if (event.detail > 0) {
            this.advanceSelectedTab(1, false);
          } else {
            this.advanceSelectedTab(-1, false);
          }
          event.stopPropagation();
        }
      ]]>
      </handler>
    </handlers>
  </binding>

  <binding id="tab"
           extends="chrome://global/content/bindings/general.xml#basetext">
    <content>
      <xul:hbox class="tab-middle box-inherit" xbl:inherits="align,dir,pack,orient,selected,visuallyselected" flex="1">
        <xul:image class="tab-icon"
                   xbl:inherits="validate,src=image"
                   role="presentation"/>
        <xul:label class="tab-text"
                   xbl:inherits="value=label,accesskey,crop,disabled"
                   flex="1"
                   role="presentation"/>
      </xul:hbox>
    </content>

    <implementation implements="nsIDOMXULSelectControlItemElement">
      <property name="value" onset="this.setAttribute('value', val); return val;"
                             onget="return this.getAttribute('value');"/>
      <property name="control" readonly="true">
        <getter>
          <![CDATA[
            var parent = this.parentNode;
            return (parent.localName == "tabs") ? parent : null;
          ]]>
        </getter>
      </property>

      <property name="selected" readonly="true"
                onget="return this.getAttribute('selected') == 'true';"/>

      <property name="_selected">
        <setter><![CDATA[
          if (val) {
            this.setAttribute("selected", "true");
            this.setAttribute("visuallyselected", "true");
          } else {
            this.removeAttribute("selected");
            this.removeAttribute("visuallyselected");
          }

          return val;
        ]]></setter>
      </property>

      <property name="linkedPanel" onget="return this.getAttribute('linkedpanel')"
                                   onset="this.setAttribute('linkedpanel', val); return val;"/>

      <field name="arrowKeysShouldWrap" readonly="true">
        /Mac/.test(navigator.platform)
      </field>
    </implementation>

    <handlers>
      <handler event="mousedown" button="0">
      <![CDATA[
        if (this.disabled)
          return;

        this.parentNode.ariaFocusedItem = null;

        if (this != this.parentNode.selectedItem) { // Not selected yet
          let stopwatchid = this.parentNode.getAttribute("stopwatchid");
          if (stopwatchid) {
            TelemetryStopwatch.start(stopwatchid);
          }

          // Call this before setting the 'ignorefocus' attribute because this
          // will pass on focus if the formerly selected tab was focused as well.
          this.parentNode._selectNewTab(this);

          var isTabFocused = false;
          try {
            isTabFocused = (document.commandDispatcher.focusedElement == this);
          } catch (e) {}

          // Set '-moz-user-focus' to 'ignore' so that PostHandleEvent() can't
          // focus the tab; we only want tabs to be focusable by the mouse if
          // they are already focused. After a short timeout we'll reset
          // '-moz-user-focus' so that tabs can be focused by keyboard again.
          if (!isTabFocused) {
            this.setAttribute("ignorefocus", "true");
            setTimeout(tab => tab.removeAttribute("ignorefocus"), 0, this);
          }

          if (stopwatchid) {
            TelemetryStopwatch.finish(stopwatchid);
          }
        }
        // Otherwise this tab is already selected and we will fall
        // through to mousedown behavior which sets focus on the current tab,
        // Only a click on an already selected tab should focus the tab itself.
      ]]>
      </handler>

      <handler event="keydown" keycode="VK_LEFT" preventdefault="true">
      <![CDATA[
        var direction = window.getComputedStyle(this.parentNode).direction;
        this.parentNode.advanceSelectedTab(direction == "ltr" ? -1 : 1, this.arrowKeysShouldWrap);
      ]]>
      </handler>

      <handler event="keydown" keycode="VK_RIGHT" preventdefault="true">
      <![CDATA[
        var direction = window.getComputedStyle(this.parentNode).direction;
        this.parentNode.advanceSelectedTab(direction == "ltr" ? 1 : -1, this.arrowKeysShouldWrap);
      ]]>
      </handler>

      <handler event="keydown" keycode="VK_UP" preventdefault="true">
      <![CDATA[
        this.parentNode.advanceSelectedTab(-1, this.arrowKeysShouldWrap);
      ]]>
      </handler>

      <handler event="keydown" keycode="VK_DOWN" preventdefault="true">
      <![CDATA[
        this.parentNode.advanceSelectedTab(1, this.arrowKeysShouldWrap);
      ]]>
      </handler>

      <handler event="keydown" keycode="VK_HOME" preventdefault="true">
      <![CDATA[
        this.parentNode._selectNewTab(this.parentNode.children[0]);
      ]]>
      </handler>

      <handler event="keydown" keycode="VK_END" preventdefault="true">
      <![CDATA[
        var tabs = this.parentNode.children;
        this.parentNode._selectNewTab(tabs[tabs.length - 1], -1);
      ]]>
      </handler>
    </handlers>
  </binding>

</bindings>