palemoon27/toolkit/content/widgets/spinbuttons.xml

<?xml version="1.0" encoding="UTF-8"?>

<!-- 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="spinbuttonsBindings"
   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="spinbuttons"
           extends="chrome://global/content/bindings/general.xml#basecontrol">

    <resources>
      <stylesheet src="chrome://global/skin/spinbuttons.css"/>
    </resources>

    <content>
      <xul:vbox class="spinbuttons-box" flex="1">
        <xul:button anonid="increaseButton" type="repeat" flex="1"
                    class="spinbuttons-button spinbuttons-up"
                    xbl:inherits="disabled,disabled=increasedisabled"/>
        <xul:button anonid="decreaseButton" type="repeat" flex="1"
                    class="spinbuttons-button spinbuttons-down"
                    xbl:inherits="disabled,disabled=decreasedisabled"/>
      </xul:vbox>
    </content>

    <implementation>
      <property name="_increaseButton" readonly="true">
        <getter>
          return document.getAnonymousElementByAttribute(this, "anonid", "increaseButton");
        </getter>
      </property>
      <property name="_decreaseButton" readonly="true">
        <getter>
          return document.getAnonymousElementByAttribute(this, "anonid", "decreaseButton");
        </getter>
      </property>

      <property name="increaseDisabled"
                onget="return this._increaseButton.getAttribute('disabled') == 'true';"
                onset="if (val) this._increaseButton.setAttribute('disabled', 'true');
                       else this._increaseButton.removeAttribute('disabled'); return val;"/>
      <property name="decreaseDisabled"
                onget="return this._decreaseButton.getAttribute('disabled') == 'true';"
                onset="if (val) this._decreaseButton.setAttribute('disabled', 'true');
                       else this._decreaseButton.removeAttribute('disabled'); return val;"/>
    </implementation>

    <handlers>
      <handler event="mousedown">
        <![CDATA[
          // on the Mac, the native theme draws the spinbutton as a single widget
          // so a state attribute is set based on where the mouse button was pressed
          if (event.originalTarget == this._increaseButton)
            this.setAttribute("state", "up");
          else if (event.originalTarget == this._decreaseButton)
            this.setAttribute("state", "down");
        ]]>
      </handler>

      <handler event="mouseup">
        this.removeAttribute("state");
      </handler>
      <handler event="mouseout">
        this.removeAttribute("state");
      </handler>

      <handler event="command">
        <![CDATA[
          var eventname;
          if (event.originalTarget == this._increaseButton)
            eventname = "up";
          else if (event.originalTarget == this._decreaseButton)
            eventname = "down";

          var evt = document.createEvent("Events");
          evt.initEvent(eventname, true, true);
          var cancel = this.dispatchEvent(evt);

          if (this.hasAttribute("on" + eventname)) {
            var fn = new Function("event", this.getAttribute("on" + eventname));
            if (fn.call(this, event) == false)
              cancel = true;
          }

          return !cancel;
        ]]>
      </handler>

    </handlers>
  </binding>

</bindings>